約 2,903,040 件
https://w.atwiki.jp/ochamemo/pages/13.html
はじめに 自分もなんとなくjavascripを扱ってきたくちで、そろそろjavascriptを本格的にやろうかなと。 この資料も昨日やっつけでつくったものなのでつっこみどころも多いです。 javascriptってなに？ 名前について java とはまったく関係ない。 nestscape者がjavaのブームにのっただけ。 もともとはLivescriptという名前。 現在はECMAScriptという名称で標準化されている。 簡単に始められる！ メモ帳とブラウザでできる！ javascript alert("aaa") 軽く見られがちだけど実は奥が深い！ ライブラリ 現在多くのライブラリが普及しているが、文法がなんだかそれぞれによって違う。 普及してるのはPrototype.jsというライブラリ。このソースの中に多くのクラスが含まれている。とりあえずソースを読むのが一番理解を深めるらしい。 でもソース読むにしても基本がわからないと！ 基本的なことを理解してないとモヤモヤ感がなくならず、なんとなく使うことになる。 そこでこの本！→] 関数の作り方 これだけです。 function hoge() { alert( hello! ) } hoge(); // hello! 無名関数というのもあります。 var hoge = function () { alert( hello! ) }; hoge(); // hello! var fuga = hoge; huga(); // hello! 変数 いきなり代入。これはグローバル変数となる。 hoge = 0; ローカルは？ x = 0; function hoge() { var x = 1; // varを宣言 alert(x); // 1 } alert(x); // 0 上書き注意！ x = 0; function hoge() { x = 1; alert(x); // 1 } alert(x); // 1が表示。 varを宣言しないと、グローバル変数とみなされる。 クラス定義はどうする？ コンストラクタを定義すればよい。コンストラクタとは関数定義のこと。 function Hoge(){}; で、これをnewしたらHogeオブジェクトのできあがり var hoge = new Hoge(); フィールドを定義したい場合は以下のようにthisをつけて代入すればよい var Hoge = function(){ this.field1 = 0; this.field2 = hoge ; }; メソッドはこんな感じ。 var Hoge = function(){ this.field1 = 0; this.mehod = function() {alert( fugaga! );} }; ↑でもこれだとメモリ効率が悪いよ。そこでプロトタイプ Hoge.prototyep.method = function() {alert( fugaga! );} クラスメソッドは？ Hoge.classMethod = function() {alert( classMethod! );} クラス変数は？ Hoge.classProperty = HOGE ; で最終的にはこうなる。 var Hoge = function(){ this.field1 = 0; this.field2 = hoge ; } Hoge.prototyep.method = function() {alert( fugaga! );} Hoge.classMethod = function() {alert( classMethod! );} Hoge.classProperty = HOGE ; このようにjavascriptでの定義は、最初にまとめて定義するのではなく、実行しながらプロパティを増やしていき、少しづつ肉付けしながら定義する。 いうなれば、雪だるまを転がしながらどんどん機能を追加していくような感じ。 プロトタイプってなに？ 雛形となるオブジェクトインスタンスのこと。 ようするにプロトタイプとはjavaでいうインスタンス（多分）。-プロトタイプベースオブジェクト指向とはつまりインスタンスベースクラス指向のこと。-javaのようにクラスの雛形をもとに静的にクラスを生成するのではなく、インスタンスをベースにクラスを量産するというイメージ。 プロトタイプの仕組み（プロトタイプチェーン） コンストラクトした時点では、prototypeは通常、ただの空オブジェクト。 まずオブジェクト自身のプロパティから、該当のプロパティ名を探索 なかった場合、オブジェクトのprototypeオブジェクトのプロパティの中から該当する名前のプロパティを探す。 それでもなければ、そのプロトタイプオブジェクトのprototypeから探索する。 最終的になにもプロパティを持たないprototypeになるまでこれを繰り返す。 見つからなければ、そこで代入になる。参照だったらundefinedのエラーになる これがプロトタイプチェーン。この仕組みを利用してクラスの継承が行われるのだけど、ちょっと複雑なので今回は割愛。 実はなんでもハッシュ javascriptのオブジェクトはハッシュ（連想配列）で表現できる image.width; image.height; image.draw(); これらのプロパティは、実は以下のようにアクセスできる！ image; image; image(); だから、こんな定義＆呼び出しもできる。 var image = {width 100, height 100, disp function(){alert("width "+this.width)}}; 実は、javascriptのオブジェクトとは連想配列なんです。 var o = new Object; これは下のように定義できるのです。なるほど！ var o = {}; ツールの紹介 alertで昔ながらのprintfデバッグでもいいけど、下記ツールを使ったほうが断然効率いいですよ。 FireFox FireBug 「firefox firebug」で検索 WebDeveloper 「firefox webdeveloper」で検索 IE 「InternetExplorer Developer」で検索
https://w.atwiki.jp/nano_001/pages/31.html
説明 全般 Greasemonkey 説明 たまにJavaScriptで遊ぶことがあるけど、いつも一から調べ直してて効率悪いのでまとめておきたい。 全般 Greasemonkey
https://w.atwiki.jp/designmemo/pages/19.html
Ext ダウンロード http //extjs.com/download 対応ブラウザ(2007-11現在) Internet Explorer 6以上 Firefox 1.5以上 Safari 2以上 Opera 9以上 参考記事 マイコミジャーナル Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」 皆さんは、「Ext」というJavaScriptフレームワークをご存知だろうか。Extは、4月1日にバージョン1.0がリリースされたばかりの新鋭のフレームワークである。 Extの前身は、「Yahoo! UI Library(YUI)」の拡張版として開発された「yui-ext」というライブラリである。しかし、yui-extでは、リッチなUIを実現できるものの、決してサイズが小さいとは言えないYUIを導入する必要がある。そこで、yui-extの作者であるJack Slocum氏は、YUI以外のライブラリとも併せて使えるようにyui-extを刷新。その成果物をExtという名前で(頭文字の「yui」を外して)リリースした。 Ext 1.0で対応している外部のフレームワークはPrototype.js(scriptaculousも併せて利用可)、jQuery、そしてYUIである。現在のところExt単体では動作しない。
https://w.atwiki.jp/anxiety/pages/32.html
スラッシュドット・ジャパン | MooTools1.2.1 APIドキュメントの日本語訳完成 ブラウザから手軽に使えるJavaScriptの統合開発環境『TIDE』 | 100SHIKI.COM 圧縮ツールの逆、JavaScriptの整形ツール - JS Beautifier登場 | エンタープライズ | マイコミジャーナル InfoQ JavaScriptへのマルチスレッド・プログラミングの導入 わーい ＼（＾o＾）／ JS で書ける IRC ボットライブラリできたよー - IT戦記 最速インターフェース研究会 JavaScriptにおけるdeep clone JavaScript Library Archive ハタさんのブログ Javascriptによる大規模開発の覚え書き。高速化編 ockeghem(徳丸浩)の日記 - JavaScriptの配列 一味違うMacOS Xのドック風UI実現JavaScriptライブラリ「iFishEye」 phpspot開発日誌 Ajaxメモ
https://w.atwiki.jp/m_shige1979/pages/1018.html
条件分岐 概要 データによって処理を切り分けたい場合にしようする。 １．if文 ２．if～else文 ３．if～else if～else文 ４．switch文 if文 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" // ![CDATA[ // 値設定 var data1 = 10; // 条件設定 if(data1 == 10){ document.write("data1=10" + " br / "); } // 条件設定 if(data1 == 20){ document.write("data1=20" + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html if～else文 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" // ![CDATA[ // 値設定 var data1 = 10; // 条件設定 if(data1 == 10){ document.write("data1=10" + " br / "); }else{ document.write("data1=else" + " br / "); } // 条件設定 if(data1 == 20){ document.write("data1=20" + " br / "); }else{ document.write("data1=else" + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html if～else if～else文 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" // ![CDATA[ // 値設定 var data1 = 10; // 条件設定 if(data1 == 10){ document.write("data1=10" + " br / "); }else if(data1 == 20){ document.write("data1=20" + " br / "); }else{ document.write("data1=else" + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html switch文 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" // ![CDATA[ // 値設定 var data1 = 30; // 条件設定 switch(data1){ case 10 document.write("data1=10" + " br / "); break; case 20 document.write("data1=20" + " br / "); break; case 30 document.write("data1=30" + " br / "); break; default document.write("data1=else" + " br / "); break; } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html
https://w.atwiki.jp/oboegaki1002/pages/30.html
jQueryのプラグイン33+1選 http //coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-aug.html
https://w.atwiki.jp/lang-complaint/pages/11.html
関連するブログ記事等 くそったれJavaScript
https://w.atwiki.jp/bookcrossing/pages/18.html
Javascriptを使うページです。その実行ためにこのページは管理者のみの編集権限に変更しています。
https://w.atwiki.jp/comcatet/pages/32.html
内包表記 ループ処理を簡単簡潔に記述する方法。 検索するとPythonの記事が多いから、そちらから取り込んだ？ 元々ECMAScript6の機能として提案されていたが、ECMAScript7に先送りされている。 現時点ではFirefoxのみの実装？ 配列内包とジェネレータ内包の表記がある。FirefoxではJavaScript1.7(Firefox2)で配列内包が実装されているが、今のとは表記が違う実装だった。ECMAScript7互換表記の配列内包とジェネレータ内包はFirefox30から実装された。今後も表記が変わる可能性がある。 [for (x of iterable) x*x] [for (x of iterable) if (x foo) x] [for (x of iterable) for (y of iterable) x + y] Array comprehensions - JavaScript | MDN es6 generator and array comprehensions in spidermonkey -- wingolog
https://w.atwiki.jp/pcigar/pages/64.html
このページは管理者のみ編集できます（@wikiの仕様） JavaScriptがOFFになっています ハロワ 関数の実行 [inch]から[cm]へ