prototype.jsã‚’èªã¿è§£ã：第1回　Prototypeライブラリ（1〜197行目）｜gihyo.jp
ä»–ã®ãƒ©ã‚¤ãƒ–ラリやã€è‡ªåˆ†ã®ã‚³ãƒ¼ãƒ‰ã¨å…±å˜ã•ã›ã‚‹ã¨ãã¯ã€ã“れらã®åå‰ã¨è¡çªã—ãªã„よã†ã«æ°—ã‚’ã¤ã‘ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚åŒã˜åå‰ã‚’使ã£ã¦ã—ã¾ã†ã¨ã€ã‚³ãƒ¼ãƒ‰ãŒãƒãƒ¼ãƒ‰ã•ã‚ŒãŸé †ç•ªã«ã‚ˆã£ã¦æŒ™å‹•ãŒå¤‰ã‚ã‚‹ã€ã¨ã„ã†ã‚ˆã†ãªã‚ã‹ã‚Šã«ãã„å•é¡ŒãŒç™ºç”Ÿã—ã¦ã—ã¾ã†å ´åˆãŒå‡ºã¦ãã¾ã™ã€‚ オブジェクトã€ã‚¯ãƒ©ã‚¹ã®ä½¿ã‚れ方 ライブラリ内ã§ã¯ã€ä¸Šè¨˜ã®åå‰ç©ºé–“ã¯å¤§ãã分ã‘ã¦ä»¥ä¸‹ã®ã‚ˆã†ãªä½¿ã‚れ形をã—ã¦ã„ã¾ã™ã€‚ ãã®ä¸‹ã«åˆ¥ã®ã‚ªãƒ–ジェクトを入れるãŸã‚ã®è¦ªåå‰ç©ºé–“ã¨ã—ã¦ä½¿ã† Class.create()を使ã£ã¦ Prototypeライブラリ風ã®ã‚¯ãƒ©ã‚¹ã¨ã—ã¦å®šç¾©ã™ã‚‹ Object.extend()を使ã£ã¦ä»–ã®ã‚¯ãƒ©ã‚¹ã€ã‚ªãƒ–ジェクトã‹ã‚‰ç¶™æ‰¿ã•ã‚Œã‚‹ã“ã¨ã‚’å‰æã¨ã™ã‚‹é–¢æ•°ã‚’集ã‚ã‚‹ コードを簡潔ã«è¨˜è¿°ã™ã‚‹ç‚ºã«çŸã„åå‰ã®é–¢æ•°ã¨ã—ã¦ä½¿ã† 特ã«ã€Object.extend()を使ã£ã¦ç¶™æ‰¿ã‚’実ç¾ã—ã¦ã„る箇所ãŒå¤šãã€æœ€çµ‚çš„ã«ã©ã®ã‚ªãƒ–ジェクト・クラスã«ã©ã®ãƒ¡ã‚½ãƒƒãƒ‰ãŒå®šç¾©ã•ã‚Œã¦ã„
ã€ã‚³ãƒ©ãƒ 】ãã‚ãã‚ãã£ã¡ã‚ŠJavaScript (7) prototype.jsã‚’èªã‚€(1) | エンタープライズ | マイコミジャーナル
ソースèªã¿ã®æº–å‚™ 本連載ã§ã¯ã“ã‚Œã¾ã§ã€JavaScriptã®ç‰¹å¾´çš„ãªè¨˜æ³•ã‚’ã„ãã¤ã‹ç´¹ä»‹ã—ã¦ããŸã€‚ãã‚ãã‚世ã«åºƒã¾ã£ã¦ã„ã‚‹JavaScriptライブラリã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’èªã¿è§£ã„ã¦ã„ãã“ã¨ãŒã§ãã‚‹ã¯ãšã 。 今回ã‹ã‚‰ã¯ã€å°‘ã—趣å‘を変ãˆã¦ã€JavaScriptライブラリをã„ãã¤ã‹æŒ™ã’ãªãŒã‚‰ã€ãƒ©ã‚¤ãƒ–ラリ利用方法ã¨ã€ãã®å‹•ä½œãƒ¡ã‚«ãƒ‹ã‚ºãƒ ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¦ã„ã“ã†ã€‚ 今回ã¯ã€prototype.jsã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã™ã‚‹ã€‚ç¾åœ¨ã®JavaScript人気ã®ç«‹å½¹è€…ã¨ã„ã£ã¦ã‚‚éŽè¨€ã§ã¯ãªã„prototype.jsã ãŒã€ãã®ä¸èº«ã¯ã©ã†ãªã£ã¦ã„ã‚‹ã®ã ã‚ã†ã‹ã€‚ソースコードをèªã¿ãªãŒã‚‰ã€ãƒ¡ã‚«ãƒ‹ã‚ºãƒ ã¯ã‚‚ã¡ã‚ã‚“ã€JavaScriptçš„ãªã‚³ãƒ¼ãƒ‰ã‚¹ã‚¿ã‚¤ãƒ«ã‚‚å¦ã‚“ã§ã„ããŸã„。 ã¾ãšã¯ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’èªã‚€ãŸã‚ã®ç’°å¢ƒã‚’æ•´å‚™ã—よã†ã€‚prototype.jsã¯ã€ä½œè€…ã§ã‚ã‚‹Sam Stephensonæ°ãŒæä¾›ã™ã‚‹ã‚µã‚¤ãƒˆã‹ã‚‰å–å¾—ã§ãる。ç¾åœ¨ã®å®‰å®šæœ€æ–°ãƒãƒ¼ã‚¸
Prototype.jsベースã®ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹æ画フレームワーク:phpspot開発日誌
Prototype Graphic Framework This open-source framework is developed for my new project NeoMeeting. Prototype.jsベースã®ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹æ画フレームワークã®ç´¹ä»‹ã€‚ 四角形ã€å††å½¢ã€å¤šè§’å½¢ãªã©ã‚’ SVG/VML/Canvas ã®æ–¹å¼ã§æç”»ã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚ コードã¯æ¬¡ã®ã‚ˆã†ã«ã‚ªãƒ–ジェクト指å‘ã§ã‚·ãƒ³ãƒ—ルã«è¨˜è¿°ã§ãã¾ã™ã€‚(SVGæç”»ã®å ´åˆ) // Create an SVG renderer var renderer = new SVGRenderer("whiteboard"); // Create a rectangle with some attributes like color and bounds var rect = new Graphic.Rectangle(rendere
lockエラー | 月é¡200円ã‹ã‚‰ã®ãƒ¬ãƒ³ã‚¿ãƒ«ã‚µãƒ¼ãƒãƒ¼Â JSN
ã¾ãšã¯æœ€è¿‘知ã£ã¦ä¾¿åˆ©ã ã¨æ€ã£ãŸCSSã®å°æŠ€ã‚’ã²ã¨ã¤ã€‚ æ–‡ç« ã®æœ€å¾Œã«ã€ã€Œâ€»ï¼ˆç±³å°ï¼‰ã€ãªã©ã§æ³¨é‡ˆã‚’入れãŸã„ã¨ãã«ã€CSSã®ã¿ã§è¡Œã®é–‹å§‹ä½ç½®ã‚’æƒãˆã‚‹ã®ã«ã™ã”ãシンプルãªã‚„ã‚Šæ–¹ãŒã“れ。 .note { padding-left:1em; text-indent:-1em; } <p class=â€noteâ€>※米å°ã‚’使ã†å ´åˆã¯ã“ã„ã¤ãŒä¾¿åˆ©ã€‚<br /> 改行ã—ã¦ã‚‚ã“ã®é€šã‚Šã€‚ã¡ã‚ƒã‚“ã¨é–‹å§‹ä½ç½®ãŒæƒã£ã¦ã‚‹ã€‚</p> 「padding-left : 1em;ã€ã§ã¾ãšï¼‘æ–‡å—分å³ã«å‹•ã‹ã—ã¦ã€ã€Œtext-indent : -1em;ã€ã§æœ€åˆã®è¡Œã ã‘１文å—分左ã«å‡ºã™ã€ã¨ã„ã†ã“ã¨ã‚‰ã—ã„ã§ã™ã€‚ã“れ考ãˆãŸäººã¯ãˆã‚‰ã„ã£ã™ãã‡ã€‚ ä»–ã«ã¯é–‹å§‹ä½ç½®ã‚’æƒãˆã‚‹ã„ã‚ゆる「ã¶ã‚‰ä¸‹ã’ã€ã‚’CSSã§ã‚„ã‚‹å ´åˆã€<div>ã‚¿ã‚°ã®å…¥ã‚Œåを使ã£ã¦ã‚‚ã„ã„ãŒã€<dl><dt><dd>ã®å®šç¾©åž‹ãƒªã‚¹ãƒˆã‚’使ã†ã®ãŒãŠã™ã™ã‚。Definition Listã®ç•¥ã§
prototype.jsã®bindã‚’ç†è§£ã™ã‚‹ - cloned.log
prototype.js使ã£ã¦ã„ã¦ã†ã‚Œã—ã„ã“ã¨ã®ä¸€ã¤ã«bindãŒä½¿ãˆã‚‹ã¨ã„ã†ã®ãŒã‚る。$()ã¨ã‹Ajaxã®ã‚¯ãƒã‚¹ãƒ–ラウザ対ç–ã¨ã‹ã‚‚ã„ã„ã‘ã‚Œã©ã€thisã‚’bindã§ãã‚‹ã®ã¯å¤§ããªãƒ¡ãƒªãƒƒãƒˆã ã¨æ€ã†ã€‚bindãŒãªã„ã¨ã©ã†ã„ã†æ™‚ã«è‹¦åŠ´ã™ã‚‹ã‹ã¨ã„ã†ã¨ã€ä»¥ä¸‹ã®ã‚ˆã†ãªå ´é¢ã€‚ var Foo = function(name) { this.name = name; } Foo.prototype.talk = function(message) { alert(this.name + ": " + message); } function inScope() { var foo = new Foo("foo"); setTimeout('foo.talk("Hello World!")', 0); } inScope(); ã“ã‚Œã¯å®Ÿè¡Œã§ããªã„。ãªãœã‹ã¨ã„ã†ã¨setTimeoutã«æ¸¡ã—ã¦ã„ã‚‹fooã¨ã„ã†å¤‰æ•°
[ThinkIT] 第1回：Prototype.jsを使ã†æº–å‚™ (1/2)
ç†è€…ãŒPrototype.jsã«åˆã‚ã¦å‡ºä¼šã£ãŸã®ã¯ã€2005å¹´9月ã”ã‚ã ã£ãŸã¨æ€ã„ã¾ã™ã€‚ã“ã®é ƒã€ã‚ªãƒ–ジェクト指å‘JavaScriptã¯ã¾ã ã¾ã 黎明期ã§ã€ã‚ªãƒ–ジェクト指å‘ã®æ›¸ã方もã•ã¾ã–ã¾ãªæˆ‘æµãŒå˜åœ¨ã—ã¦ã„ãŸã“ã¨ã‚’覚ãˆã¦ã„ã¾ã™ã€‚ ã‚‚ã¡ã‚ã‚“ã€ç†è€…も我æµã®ã‚ªãƒ–ジェクト指å‘ã§æ›¸ã„ã¦ã„ã¾ã—ãŸã€‚ã—ã‹ã—ã€ã™ã¹ã¦ã®ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒæˆ‘æµã®æ›¸ã方をã—ã¦ã„ã¦ã¯ã€JavaScriptã®ã‚ªãƒ–ジェクト指å‘ã¯æ™®åŠã—ã¾ã›ã‚“。 ãã‚“ãªæ™‚ã«ã•ã¾ã–ã¾ãªãƒ–ãƒã‚°ã§å–り上ã’られ始ã‚ãŸã®ãŒPrototype.jsã§ã—ãŸã€‚Prototype.jsã«ã¯ã‚¯ãƒ©ã‚¹ã‚’定義ã™ã‚‹ã¨ã„ã†æ©Ÿèƒ½ãŒã‚ã‚Šã€ã™ã¹ã¦ã®ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒåŒã˜æ–¹æ³•ã§ã‚¯ãƒ©ã‚¹ã‚’定義ã§ãã‚‹ã®ã§ã™ã€‚ãã‚Œã¯ã€å¤§ããªã‚¤ãƒ³ãƒ‘クトã§ã—ãŸã€‚ã—ã‹ã—ã€ãã®å½“時Prototype.jsã«ã¯ã¾ã¨ã¾ã£ãŸãƒ‰ã‚ュメントãŒç„¡ãã€ç›®åˆ©ãã®JavaScripterãŸã¡ã¯ã“ãžã£ã¦ã‚½ãƒ¼ã‚¹ã‚’èªã‚“ã§ã„ã¾ã—ãŸã€‚ ãã—ã¦ã€ãã®ã“ã¨ãŒå›³ã‚‰ãšã¨ã‚‚
prototype.jsã‚’10KBã«ã™ã‚‹æ–¹æ³•
2006-11-20T14:20:42+09:00 追記 「何者ã‹ã€ã«æ”»æ’ƒã‚’å—ã‘ã¦ã€ã“ã®ãƒšãƒ¼ã‚¸ã®å†…容ãŒå·®ã—変ã‚ã£ã¦ã„ã¾ã—ãŸã€‚ã‚ã‚ã¦ã¦ãƒãƒƒã‚¯ã‚¢ãƒƒãƒ—ファイルã‹ã‚‰å¾©æ—§ã—ã¾ã—ãŸï¼ˆã€Œä½•è€…ã‹ã€ = 酒……）。 prototype.jsã‚’10KBã«ã™ã‚‹æ–¹æ³•ã®ç¶šã（.htaccessをスマートã«ä½¿ã†ï¼‰ : 亜細亜ノ蛾 ã«ç¶šãを書ãã¾ã—ãŸã€‚åˆã‚ã›ã¦ã©ã†ãžã€‚ JavaScript ファイルを圧縮ã™ã‚‹ æ£çœŸæ£éŠ˜ã€Prototype（“prototype-1.4.0.jsâ€ï¼‰ã‚’10ã‚ãƒãƒã‚¤ãƒˆï¼ˆ10,453 bytes）ã«åœ§ç¸®ã—ã¦ã€ã—ã‹ã‚‚（当ãŸã‚Šå‰ãªãŒã‚‰ï¼‰å‹•ä½œã™ã‚‹ã‚ˆã†ã«ã™ã‚‹æ–¹æ³•ã§ã™ã€‚ ──ã¨èžã„ã¦çœŸã£å…ˆã«æ€ã„æµ®ã‹ã¶ã®ãŒã€Œå„種JavaScriptファイル圧縮サービスã€ã€ã¨ã„ã†äººã‚‚多ã„ã§ã—ょã†ã€‚ ã—ã‹ã—ã€è‡ªåˆ†ãŒè©¦ã—ã¦ã¿ãŸã¨ã“ã‚ã€ä¾‹ãˆã°/packer/ã§åœ§ç¸®ã—ãŸJavaScriptファイルã¯ä¸Šæ‰‹ã動作ã—ã¾ã›ã‚“ã§ã—ãŸï¼ˆä»–ã¯
å·o・-・）＜2nd life - prototype.js 1.5 ã‹ã‚‰ã®æ–°æ©Ÿèƒ½ Template ã®ä½¿ã„æ–¹
JavaScript ã§ã®å¤‰æ•°ã‚’使ã£ãŸæ–‡å—列ã®ä½œæˆã¯ä½•ã‹ã¨ã‚ã‚“ã©ãã•ã„ã§ã™ã。prototype.js ã§ã¯ 1.5_pre0 ã‹ã‚‰ Template ã¨ã„ã†ç°¡æ˜“テンプレートã¨ã—ã¦ä½¿ãˆã‚‹ã‚¯ãƒ©ã‚¹ãŒåŠ ã‚ã‚Šã¾ã—ãŸã€‚相変ã‚らãšãƒ‰ã‚ュメントã¯ã‚½ãƒ¼ã‚¹ã¨ test å«ãªã®ã§ç°¡å˜ãªä½¿ã„方を紹介ã—ã¾ã™ã€‚ ã¾ãšã¯ Template ã¨ãªã‚‹æ–‡å—列を new Template ã§ä½œã‚Šã¾ã™ã€‚Template ã®ãƒªãƒ†ãƒ©ãƒ«ã¯ #{}ã§ã™*1 。 var t = new Template('#{foo}, #{bar}!');次ã«ä½œæˆã—㟠Template インスタンス㮠evaluate 関数を呼ã³å‡ºã—ã€å¼•æ•°ã¨ã—㦠Hash(Object) を渡ã—ã¾ã™ã€‚ t.evaluate({ foo: 'hello', bar: 'world' }); // hello, world!ã‚‚ã—テンプレートを使ã„回ã•ãšã€ä¸€åº¦é™ã‚Šã®æ–‡å—列
prototype.jsã®Ajaxã‚’IE5.5ã«å¯¾å¿œã•ã›ã‚‹ - æµ…è‰æ©‹ã‚¯ãƒãƒ‹ã‚¯ãƒ«
prototype.js(確èªã—ãŸversionã¯1.4.0)ã¯IE6.0以上をターゲットã¨ã—ã¦ãŠã‚Šã€ç¢ºã‹ã«IE5.5ã§ã¯AjaxãŒå‹•ã‹ãªã„å ´åˆãŒã‚ã‚Šã¾ã™ã€‚ãŸã ã“ã‚Œã¯ã€prototype.jsã‚’ã¡ã‚‡ã¡ã‚‡ã„ã¨ä¿®æ£ã™ã‚‹ã ã‘ã§å‹•ä½œã™ã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ 640行目㧠this.transport.open(this.options.method, this.url, this.options.asynchronous);ã¨XMLHttpRequestをオープンã—ã¦ã„ã‚‹ã¨ã“ã‚ãŒã‚ã‚Šã¾ã™ãŒã€prototype.jsã§ã¯ä½•æ•…ã‹methodã®æŒ‡å®šãŒå°æ–‡å—ã§ã€Œgetã€ã€Œpostã€ã¨æ¸¡ã•ãªãã¦ã¯ã„ã‘ã¾ã›ã‚“。 ã©ã†ã‚‚IE6.0ã‚„Firefoxã¯this.transport.openã®ä¸ã§å¤§æ–‡å—変æ›ãŒã‹ã‹ã£ã¦ã„るよã†ãªã®ã§ã™ãŒã€IE5.5ã¯ãã‚ŒãŒã•ã‚Œãšå°æ–‡å—ã®ã¾ã¾HTTPリクエストãŒé€ã‚‰ã‚Œã¦ã„るよã†ã§ã™ã€‚ サーãƒ
Prototype.js を使ã£ãŸ JavaScript OOP 講座 #01
社内ã®ç²¾é‹ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’ä¸å¿ƒã«å®šæœŸçš„ã«å‹‰å¼·ä¼šã‚’ã™ã‚‹ã“ã¨ã«ãªã£ãŸã€‚ã‚“ã§ã€ JavaScript ã®è¬›ç¾©ã¯åƒ•ãŒã‚„ã‚‹ã“ã¨ã«ãªã£ãŸã€‚ 資料を社内ã ã‘ã§ã¨ã©ã‚ã¦ãŠãã®ã¯ã‚‚ã£ãŸã„ãªã„ã®ã§ã€ã“ã“ã«å…¬é–‹ã—ã¦ã„ãã¾ã™ã€‚社内ã®äººã‚‚社外ã®äººã‚‚èªã‚“ã§ãã ã•ã„。 講義ã®å†…容ã¯åŸºæœ¬çš„ã«ã‚½ãƒ¼ã‚¹å«ã€‚ソースレビュー形å¼ã€‚ ※ターゲット㯠JavaScript ã¯æ›¸ã„ãŸã“ã¨ãªã„ã€ã‚ªãƒ–ジェクト指å‘言語プãƒã‚°ãƒ©ãƒžã€‚ Section 00 Prototype.js ã®å‰ã« JavaScript ã®ã‚ªãƒ–ジェクトã®æ¦‚è¦ãƒ»ãƒ»ãƒ» オブジェクトを作ã£ã¦ã¿ã‚‹ã€‚ var object = {};オブジェクトã«ãƒ¡ã‚½ãƒƒãƒ‰ã¨ã‹ãƒ—ãƒãƒ‘ãƒ†ã‚£ã‚’è¿½åŠ ã—ã¦ã¿ã‚‹ã€‚ var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
é€æ˜Žæ„Ÿã®ã‚るデザインをJavaScriptã§å®Ÿè£…ã™ã‚‹ï¼ˆglassbox.js） - youmos
{{#tags}}- {{label}}
{{/tags}}