JavaScript

Stackコンテナ

JavaScriptでStackコンテナと動作確認用コードを書いてみた。stack.html <html> <head> <meta charset="UTF-8"> <title>stack操作</title> <script language="javascript" src="./stack.js"></script> <script language="javascript" src="./html.js"></script> </head> <body> <…</body></html>

Stackの実装とイベント設定サンプルコード

動的生成版と関数定義版2つのスタイルで実装してみた。動的生成版のほうがJavaScriptっぽい。 しかしwindow.onloadの定義がぶくぶくと太っていくのが、気になる。関数定義版のほうが関数一つ一つは小さくて見通しが良い。 しかしグローバル空間を汚さないよ…

イベント勉強会資料

イベント

勉強会用JavaScriptメモイベントの登録方法は以下 HTMLの属性として記述 <button onclick="alert('Hello')">Hello</button> メリット DOMの特定や読み込みタイミングなどを気にしないでよい。 デメリット コンテンツであるhtmlを挙動を示すコードが侵食する。 DOMエレメントのon*メソッドに登録 <button id="btnHello">Hello</button> <script> …

イベントハンドラサンプルコード

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Event sample</title> <script src="./event.js"></script> </head> <body> </body></html>

マルチプルインスタンスクロージャ(改)

先日マルチプルインスタンスに対応したクロージャを書いてみた。 http://d.hatena.ne.jp/Einherjar/20110909/p4 かなりゴチャゴチャしたコードで、もっと綺麗なやり方があるはずだと思っていた。 クロージャで一つ大きく勘違いしていることがあった。以下の…

マルチプルインスタンスクロージャ(改) 複数クロージャ

最近クロージャばっかりだが、性懲りも無く続ける。 前回はクロージャ関数がひとつだけだったので、直接関数オブジェクトを返せばよかったが、複数メソッドを外部からアクセスできるようにするには?とりあえず素直に考えたのがコンストラクタを使うもの。 …

関数定義方法、利用方法

社内勉強会用メモJavaScriptの関数定義と利用法は色いろある。 関数定義 C言語的感覚で使用できる、関数定義と呼び出し。 // 定義した関数の呼び出し f(); // 関数定義 function f() { console.log('call f()'); } 関数リテラルで関数オブジェクトを生成 // …

OOPプログラム

JavaScriptはクラスが無いが、プロパティを利用して、クラスを模倣することができる。 主な生成方法は以下 空オブジェクトを生成し、動的にプロパティを追加する。 オブジェクトリテラルを利用して、オブジェクト生成と同時にプロパティを設定する。 new演算…

クロージャ

Cには入れ子関数が無いため、クロージャの意味や使い方がさっぱりわからなかった。 匿名関数を即実行するのが気持ち悪かったということもある。エンクロージャのローカル変数が静的に保持されていることに考えが及び、ちょっと使い方がわかった気がする。そ…

マルチプルインスタンスクロージャ

'use strict'; // Closureサンプルコード // カウントアップ、ダウン、 // カウンタリセット、カウンタリードが出来るユーティリティ // マルチプルインスタンス対応版 // 名前空間 var CounterUtil; if (!CounterUtil) { // 名前空間オブジェクト生成 Count…

勉強会資料

https://docs.google.com/present/view?id=dchzmqg5_38gkxg9cdg

Stackサンプルコード

リンクリストを利用したStackデータ構造操作のサンプルコードstack.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Stack Sample</title> <script type="text/javascript" src="./Stack.js"></script> </head> <body> </body></html>

Stackサンプルコード

コード改善 画面に固有の処理と汎用的に使用できるStack処理に分離。 画面固有の処理はhtmlのheadに書いてしまう。stack.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Stack Sample</title> </meta></head></html>

DOM Elementツリー

会社の勉強会でDOMをあつかった。ドキュメントツリーについて、期待通りの動作をしなかったのでφ(..)メモメモdom.html <html> <head> <title>DOM Tree</title> <script src="./dom.js" type="text/javascript"> </script> </head> <body onload="domTree()"> <h1>DOM Tree</h1> <p> This document is <i>DOM</i> sample. </p> </body> </html>dom.js 'use strict'; function…

連想配列

社内の勉強会でJavaScriptの配列、連想配列を扱った。Cしか使ったこと無い人には、カルチャーショックが大きかったようだ。そのなかでも連想配列の強力さのアピールができたコード。 入力文字列の文字ごとの数を数えるコード。 'use strict'; // countChar.j…