約 4,497,682 件
https://w.atwiki.jp/javascriptteam/pages/13.html
勉強系 JavaScript例文辞典 ゼロから始める「JavaScriptゲームの作り方」入門 AJAXについて勉強しよう 最後の「Ajaxについて勉強しよう」の内容は使わないかもだから、参考程度に。 -- J (2010-11-24 02 59 51) 名前 コメント
https://w.atwiki.jp/api_programming/pages/40.html
下位ページ AngularJS Date（日付・時刻） jQuery jQuery Mobile jQuery-UI イベント制御 オブジェクト ダイアログ(Dialog) 変数・演算子 文字列(String) 構文・処理 表示 連想配列 配列 関数 非同期処理 Content コードの記述方法HTMLページ内に記述 コードの実行タイミングDOMが構築されている途中 DOMが構築されてから 関数の定義function文による定義 デフォルト引数の設定 引数は参照渡しか値渡しか？ テキストボックスの値を取得するid属性で指定する場合 name属性で指定する場合 クッキーの操作書き込み設定値を加える 読み出し 正規表現 タイマーの利用と停止 ポップアップウィンドウ getで指定するパラメータを、エンコード／デコードする 配列のソート ページの遷移 / リダイレクト任意のページに移動 履歴の前後に移動 Dateオブジェクトの計算 即時関数即時関数のポイント JSPの変数をJavascriptに渡す。 Javascriptの変数をJavaに渡す コメント1行コメント 複数行コメント タッチデバイスへの対応 JSONデータの読み込み ウィンドウサイズの取得 コードの記述方法 http //www.openspc2.org/JavaScript/study/script.html HTMLページ内に記述 SCRIPT /SCRIPT type="text/javascript" language="~" でバージョン指定も可能 コードの実行タイミング .onload .ready DOMが構築されている途中 script /script の中に書くと、読み込まれた時点で実行される。 DOMが構築されてから document.ready DOMツリーは構築されているが、まだ外部からのロードは始まっていない。 window.onload 既に画像のレンダリングも終わった状態 window.onload = function(){...} [[]] 【JavaScript】記述方法別の実行タイミングについて -Qiita 関数の定義 http //www.atmarkit.co.jp/ait/articles/0707/10/news124.html] function文による定義 Functionコンストラクタによる定義 関数リテラルによる定義 function文による定義 function 関数名([引数1 [, 引数2 [, ……]]) { [関数内で実行される任意の命令……] } デフォルト引数の設定 = で事前設定しておくと、デフォルト扱いになる。 function testfunc(a, b = null) もし function testfunc(a = null, b) で、引数 testfunc(1) にしたら、a = 1, b = undefined になる。 デフォルト引数 引数は参照渡しか値渡しか？ オブジェクト、配列は参照渡し 数、文字列は値渡し http //so-zou.jp/web-app/tech/programming/javascript/grammar/function/#no13 テキストボックスの値を取得する id属性で指定する場合 document.forms.(参照するフォームのid).(参照するコントロールのid) name属性で指定する場合 document.forms.(参照するフォームのname).(参照するコントロールのname) iPentec クッキーの操作 document.cookieでアクセスが可能 クッキーの使用方法 - JavaScript プログラミング解説 書き込み =（イコール）で、変数と値をセットにして書き込み document.cookie="変数=値" 設定値を加える 寿命を2時間(7200秒）に設定する document.cookie="key=value; max-age=7200" 読み出し document.cookie を読み込めば、そのまま取得できるが、 key1=value1;key2=value2;key3=value3 となるので、分割する必要あり 文字列の分割 正規表現 チェック、置換、該当部分の抜き出しが可能チェック、該当部分の取り出し match 置換 replace Javascriptでの正規表現の利用 タイマーの利用と停止 setInterval関数 返り値がtimerIDで、clearInterval(timerID)で停止させる。 https //techacademy.jp/magazine/5537 ポップアップウィンドウ window.openで開く。戻り値としてウィンドウオブジェクトが返ってくる。これを監視していれば、閉じたかどうか分かる。 http //amenti.usamimi.info/windowopen.html getで指定するパラメータを、エンコード／デコードする encodeURIComponent decodeURIComponent どちらも組み込み関数 http //itpro.nikkeibp.co.jp/article/Reference/20081126/319910/?ST=oss 配列のソート array.sort(comparefunction) comparefunctionは、比較関数を定義する comparefunction(a,b)が返す値が負の時は a→bの順に、正の時は b→a の順に並べる。0なら等しいとする。 Array.sort - Javascript | MDN ページの遷移 / リダイレクト 任意のページに移動 location.href = (URL) 履歴の前後に移動 戻る history.back(); 進む history.forward(); Dateオブジェクトの計算 Date.setMonth(Date.getMonth - 1) のようにすれば計算できる。マイナスの値も（上記のように「月」の場合は「年」が一年遡る） でも、setMinutes(...)とか、戻り値がDateオブジェクトのms変換値が入る。なんでだよ。 Date(ms)で再作成。 その他 日付と時刻の計算 (JavaScript) - MSDN Date 即時関数 (function(){... )()} 即時関数というらしい。即、実行される。 即時関数のポイント 関数が、グローバルに設定されない。 → リソースの節約 関数内で設定された変数は、当然ローカル 知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て JSPの変数をJavascriptに渡す。 getAttributeで素直に渡せるみたい。 Servlet/JSPのデータをJavaScriptに渡す方法 Javascriptの変数をJavaに渡す 確認中 https //dev.mozilla.jp/localmdc/localmdc_8833.html コメント 1行コメント // コメント 複数行コメント /* コメント */ タッチデバイスへの対応 いろいろあるが jQuery Finger JSONデータの読み込み obj = JSON.parse(data) で読み込める。連想配列の状態で格納されている。 JSON.parse() - MDN JSON - MDN ウィンドウサイズの取得 window.parent.screen.width; // 高さ window.parent.screen.height; // 幅 window.onresize = getScreenSize(); // ウィンドウのリサイズ時に発火 //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.getElementById("ScrSize").innerHTML = s; }
https://w.atwiki.jp/aias-jsstyleguide2/pages/17.html
JavaScriptのデータ型 JSDocへのデータ型の記述は、できるだけ具体的かつ正確に行ってください。我々のサポートする型のスタイルはEcmaScript 4 仕様に基づいています。 JavaScriptの型言語 ES4の提案にはJavaScriptのデータ型を定義する言語が含まれていました。この言語をJSDoc内で用い、関数パラメータや戻り値の型を表現します。 ES4提案の進展に伴い、その型言語も変化しています。Compilerは古い構文もサポートしていますが、現在それらは非推奨となっています。 構文名 構文 説明 非推奨の構文 Primitive Type JavaScriptに含まれる5種類のプリミティブ型 {null}, {undefined}, {boolean}, {number}, {string} シンプルな型名称 Instance Type {Object}Objectのインスタンスもしくはnull{Function}Functonのインスタンスもしくはnull{EventTarget}EventTargetインタフェースを実装するコンストラクタのインスタンスもしくはnull コンストラクタまたはインタフェースのインスタンスであることを表します。コンストラクタ関数は@cpnstructorJSDocタグによって定義されます。インタフェース関数は@interfaceJSDocタグによって定義されます。デフォルトで、Instance Typeはnullを許可します。このタイプはnullを許す唯一のものです。この表に含まれる他の構文はデフォルトでnullを許可しません。 Enum Type {goog.events.EventType}goog.events.EventTypeの列挙値で初期化されたオブジェクトリテラルのプロパティのどれか 列挙型の変数はオブジェクトリテラルもしくは他の列挙型変数の別名で、@enumJSDocタグがアノテートされていなければなりません。このオブジェクトリテラルのプロパティが、列挙値の実体となります。列挙型の構文についてはこちらで定義されています。注意：この型は、我々の型システムのうちES4仕様に含まれない数少ないもののひとつです。 Type Application {Array. string }文字列の配列{Object. string, number }キーが文字列、値が数値のオブジェクト 型引数のセットを付記し、型をパラメータ化します。考え方はJavaのジェネリクスによく似ています。 Type Union {(number|boolean)}数値または論理値 値の型がAまたはBであることを表します。この型が最上位の式で使われる場合、丸括弧は省略しても構いません。しかしそうでない場合は、曖昧さを避けるために丸括弧を付けてください。{number|boolean}{function() (number|boolean)} {(number,boolean)}, {(number||boolean)} Nullable Type {?number}数値またはNULL。 Unionの省略形で、何らかの型もしくはnullであることを表します。この型は糖衣構文です。 {number?} Non-nullable Type {!Object}Object型ですが、nullは許されません。 この型がnullを許容しないことを表します。殆どの場合、デフォルトでnullを許すInstance Typeに対して使用されます。 {Object!} Record Type {{myNum number, myObject}}型指定されたメンバを持つ無名オブジェクト 値が指定された型のメンバを持つオブジェクトであることを表します。左のケースでは、myNumは数値、myObjectはどの型でも取れるプロパティです。波括弧は構文の一部であることに注意してください。例えばArrayがlengthというプロパティを持つオブジェクトの配列であることを示すには、Array. {length} のように書きます。 Function Type {function(string, boolean)}2つの引数（文字列と論理値）を取り、戻り値が指定されていない関数。 関数を定義します。 Function Return Type {function() number}引数を取らず、数値を戻り値として返す関数。 関数の戻り値の型を定義します。 Function this Type {function(this goog.ui.Menu, string)}文字列の引数1つをとり、goog.ui.Menuのコンテキストで実行される関数。 関数のコンテキストの型を定義します。 Function new Type {function(new goog.ui.Menu, string)}文字列の引数を1つ取るコンストラクタ関数。 new キーワードと共にコールされるときにはgoog.ui.Menuのインスタンスを生成します。 コンストラクタによって作成される型を定義します。 Variable arguments {function(string, ...[number]) number}引数として文字列を1つと、可変個数の数値を取る関数。 関数に個数の変化する引数を定義します。 Variable arguments (in @param annotations) @param {...number} var_args可変個数の引数を取るようアノテートされた関数。 可変個数の引数を受け取れるようアノテートされた関数を定義します。 Function optional arguments {function(?string=, number=)}省略可能な、nullでもよい文字列型の引数と、省略可能な数値型の引数を取る関数。=は関数型の宣言の中でのみ使います。 関数の省略可能な引数を定義します。 Function optional arguments (in @param annotations) @param {number=} opt_argument数値型の省略可能なパラメータ。 省略可能な引数を受け取れるようアノテートされた関数を定義します。 The ALL Type {*} その変数がどのような型でも取れることを表します。 The UNKNOWN Type {?} その変数がどのような型でも取れ、Compilerはそれを使った型チェックを行ってはならないことを表します。 JavaScriptで使えるデータ型 型名の例 値の例 説明 number 11.0-51e5Math.PI Number new Number(true) Numberオブジェクト string Hello "World"String(42) 文字列値 String new String( Hello )new String(42) Stringオブジェクト boolean truefalseBoolean(0) 論理値 Boolean new Boolean(true) Booleanオブジェクト RegExp new RegExp( hello )/world/g Date new Datenew Date() null null undefined undefined void function f() { return;} 戻り値なし Array [ foo , 0.3, null][] 型指定のない配列 Array. number [11, 22, 33] 数値の配列 Array. Array. string [[ one , two , three ], [ foo , bar ]] 文字列の配列の配列 Object {}{foo abc , bar 123, baz null} Object. string { foo bar } 文字列の値を持つオブジェクト Object. number, string var obj = {};obj[1] = bar ; キーが数値で値が文字列のオブジェクト。JavaScriptではオブジェクトのキーは暗黙的に文字列に変換される点に注意してください。従ってobj[ 1 ] == obj[1]です。また for...in ループの中でもキーは常に文字列です。しかしCompilerはオブジェクトのキーをインデックス化する際、その型を識別します。 Function function(x, y) { return x * y;} Functionオブジェクト function(number, number) number function(x, y) { return x * y;} 関数 SomeClass /** @constructor */function SomeClass() {}new SomeClass(); SomeInterface /** @interface */function SomeInterface() {}SomeInterface.prototype.draw = function() {}; project.MyClass /** @constructor */project.MyClass = function () {}new project.MyClass() project.MyEnum /** @enum {string} */project.MyEnum = { /** 青色 */ BLUE #0000dd , /** 赤色 */ RED #dd0000 }; 列挙型列挙値に対するJSDocコメントは省略可能です。 Element document.createElement( div ) DOM要素 Node document.body.firstChild DOMノード HTMLInputElement htmlDocument.getElementsByTagName( input )[0] DOM要素の型を明示的に指定します。 型キャスト ある式のデータ型を型チェック機能が正確に推測できないケースでは、型キャストコメントを利用できます。型キャストコメントには@typeアノテーションでデータ型を示し、式は丸括弧で括ります。丸括弧は必須です。 /** @type {number} */ (x) そのパラメータ・プロパティは「Nullを許す」のか「省略できる」のか JavaScriptは型に厳格でない言語なので、関数パラメータやクラスプロパティにおける「nullを許す」、「省略できる」、「undefined」の微妙な違いを理解しておくことは非常に重要です。 クラスとインタフェースのインスタンスはデフォルトでnullを許します。例として、以下の宣言をみてください /** * 何かのクラス、何らかの値で初期化されます。 * @param {Object} value 何かの値。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {Object} * @private */ this.myValue_ = value; } 上のコードはCompilerに対し、myValue_プロパティが値として持つのはオブジェクトかnullのどちらかだと伝えています。もし myValue_プロパティが決してnullとならないのなら、こう宣言されるべきです /** * 何かのクラス、nullでない何らかの値で初期化されます。 * @param {!Object} value 何かの値。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {!Object} * @private */ this.myValue_ = value; } この場合、もしコードのどこかでMyClassがnull値で初期化されていることをCompilerが検出すると、Compilerから警告が発せられます。 省略されたパラメータはおそらくランタイムによってundefinedとして扱われます。それらがオブジェクトのプロパティに代入されるのであれば、プロパティもまたそれに応じて適切に宣言されていなければなりません /** * 何かのクラス、省略可能な何らかの値で初期化されます。 * @param {Object=} opt_value 何かの値（省略可）。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {Object|undefined} * @private */ this.myValue_ = value; } 上のコードはCompilerに対し、myValue_の値はオブジェクトかnull、あるいはundefinedのままであると伝えています。 省略可能なパラメータopt_valueの型が{Object=}と宣言されており、{Object|undefined}ではないことに注意してください。それは、省略可能なパラメータが undefined でありうることが定義上明らかだからです。そのことを明示的に宣言しても不都合はありませんが、本来必要ないだけでなく、コードも読みにくくなってしまいます。 最後に、nullを許すことと省略可能であることは直交的な性質である点に注意してください。以下の4つの宣言は全て異なった意味を持っています /** * 4つの引数を取ります。そのうち2つはnullを許容し、2つは省略可能です。 * @param {!Object} nonNull 必須（undefinedは不可）、nullは不可。 * @param {Object} mayBeNull 必須（undefinedは不可）、nullでもよい。 * @param {!Object=} opt_nonNull 省略可 (undefinedでもよい)、しかし値があるなら、 * それはnullであってはならない! * @param {Object=} opt_mayBeNull 省略可 (undefinedでもよい)、nullでもよい。 */ function strangeButTrue(nonNull, mayBeNull, opt_nonNull, opt_mayBeNull) { // ... }; 型定義 時々、型の指定が複雑になってしまうことがあります。例えば、DOM要素のコンテンツを受け取る関数があるとしましょう /** * @param {string} tagName * @param {(string|Element|Text|Array. Element |Array. Text )} contents * @return {Element} */ goog.createElement = function(tagName, contents) { ... }; @typedefタグを使うと、よく使われるデータ型の組み合わせを1つの型として定義することができます。例えばこうです /** @typedef {(string|Element|Text|Array. Element |Array. Text )} */ goog.ElementContent; /** * @param {string} tagName * @param {goog.ElementContent} contents * @return {Element} */ goog.createElement = function(tagName, contents) { ... }; テンプレート型 Compilerが行うテンプレート型のサポートは限定的です。それは関数リテラル内のthisの型を、thisを指定する引数の型と値の有無から推測するだけです。 /** * @param {function(this T, ...)} fn * @param {T} thisObj * @param {...*} var_args * @template T */ goog.bind = function(fn, thisObj, var_args) { ... }; // おそらくプロパティが存在しないという警告が出力されます。 goog.bind(function() { this.someProperty; }, new SomeClass()); // thisがundefinedであるという警告が出力されます。 goog.bind(function() { this.someProperty; }); 列挙型 訳注：2.28版以降列挙型に関する以下の説明は削除されていますが、コーディングルールの理解には必要と考え記載します。 /** * 3つの状態を値にもつ列挙型。 * @enum {number} */ project.TriState = { TRUE 1, FALSE -1, MAYBE 0 }; 列挙型は有効なデータ型の1つである点に注意して下さい。列挙型はパラメータの型指定などに使用できます。 /** * プロジェクトの状態を設定します。 * @param {project.TriState} state 新しいプロジェクトの状態 */ project.setState = function(state) { // ... };
https://w.atwiki.jp/f_go/pages/181.html
ツール系 javascript/サーヴァント経験値計算 javascript/成長曲線 javascript/サーヴァント一覧 javascript/skilllist (スキル一覧) 表示用 javascript/gallery （スライドショー用） javascript/twitter javascript/zeb_row （table） javascript/page-bottom javascript/itemicon javascript/statuscalc (鯖詳細ページのHP/ATK自動挿入) javascript/truename (左メニュー用の真名隠し設定) javascript/common-style 各種javascriptのstyle集約(atwiki仕様変更に備えて) javascript/keepedopenclose (折りたたみ状態を記憶するopencloseプラグインもどき) javascript/rmyet (未作成ページ一覧から不要な行を削除する。) javascript/announce (告知用のいろいろ) javascript/tablefilter (表の絞り込み) javascript/npsort (NP獲得効率専用) javascript/sortabletable (pukiwikiのsortabletableプラグインのjs実装)使い方 規制 javascript/pcomment_hide javascript/pcomment_hide_all コメント調整 javascript/pcomment_display javascript/tabs javascript/commentics 更新履歴 javascript/recent_cmlog_only 編集者向け javascript/クエスト情報変換 javascript/クエスト情報変換【タブ用】 javascript/アイテム要求数 （即席） javascript/過去ログ作成 （即席） 確認用 javascript/test javascript/test-style その他 javascript/menu javascriptに詳しい方、得意な方、よければ助言願います。 「こんなツールが欲しい」「こんな機能を追加して欲しい」などあれば、掲示板/編集掲示板まで。
https://w.atwiki.jp/kayo_2525/pages/5.html
大見出し 書き方？ 中見出し HTMLファイルに書く場合：ヘッダ・ボディ・タグの3ヶ所に書けます。
https://w.atwiki.jp/kodan/pages/69.html
[JavaScript] POST送信 [JavaScript] window.open()でPOST [JavaScript] 16進数6桁表示(RGB風) [JavaScript] Arrayへの追加 [JavaScript] Date [JavaScript] e.preventdefaultでスクロール制御 [JavaScript] img.srcとimg.onloadのタイミング [JavaScript] jqxhrの中身 [JavaScript] エスケープ [JavaScript] カラーパレット [JavaScript] ガントチャート [JavaScript] クラス化の方法 [JavaScript] チェックボックスに色付け [JavaScript] テキストボックスの入力可・不可切り替え [JavaScript] 引数の値渡し、参照渡し [JavaScript] 切り上げ [JavaScript] ロードのタイミング [JavaScript] elementへ子要素追加 [JavaScript] フォーカスが外れた際に発行されるイベント [JavaScript] jQueryでブラウザ判定 [JavaScript] サンプル [JavaScript] 単体テストサンプル
https://w.atwiki.jp/saicron/pages/60.html
2011/03/11 10 41/ edit this_page tags (JavaScript Webプログラミング) JavaScript LiveScript Netscape Navigator 2.0 (Netscape Communications) 1995 JavaScript 1996 Internet Explorer 3.0に搭載 1997 通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化 page top/ edit this page 目次 未分類 プログラミングリファレンス JavaScriptWeb Tools Tutorials実行 実行キュー 関数型プログラミング言語として Scope Closure tmp ひとめぐり サンプル 実装 DOM page top/ edit this page 未分類 Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009)ECMAScript Language Specification (3rd edition, December 1999) の邦訳 ECMAScript ウィキペディア プログラミング Firefoxの「ツール」→「エラーコンソール」で実行できる。 FirefoxのFirebugの「コンソール」で実行できる。 Aptanaで実行できる。 JavaScriptの()無し関数はやっぱりポインタ(f() → f)。 リファレンス MDN JavaScript Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009) MDN とほほのJavaScriptリファレンス JavaScriptリファレンス - JavaScriptist 一撃必殺JavaScript日本語リファレンス page top/ edit this page JavaScript EfficientJavaScript - Dev.Opera - 効率的な JavaScript JavaScriptの巧い書き方 JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 JavaScriptの実行キューのお勉強 javascriptは本当にシングルスレッドで実行されているけれど起こるsetTimeout/prompt現象 page top/ edit this page # Web Tools JS Bin JavaScriptオンラインエディタ JSLint The JavaScript Code Quality Tool page top/ edit this page Tutorials jQueryの基礎 実行 DOMの構築が済んだタイミングで実行する(画像の読み込みは終了していない)。 jQuery(document).ready(function(){ // jQuery or JavaScript のコード }); または、 $(document).ready(function(){ // jQuery or JavaScript のコード }); または、 $(function(){ // jQuery or JavaScript のコード }); jQuery関数($関数)は何度書いてもよい。 onLoadと同じタイミング(画像の読み込みを含めて全て終了後)に実行する場合。 $(window).load(function() { // jQuery or JavaScript のコード }); 実行キュー JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 IT戦記 JavaScriptのタイマー処理 setTimeoutとその活用 (function(){})() と function(){}() page top/ edit this page 関数型プログラミング言語として JavaScript の function は lambda かもしれない。 Functional Javascript エレガントな JavaScript を作成するための関数型プログラミングの使用 JavaScriptの巧い書き方 (名前空間) 24 wyas (名前空間) そろそろきっちりJavaScript マイコミジャーナル (関数リテラル/オブジェクト/prototypeチェーン/prototype.jsを読む) page top/ edit this page Scope JavaScript の変数とスコープ JavaScript のスコープに変数を動的に追加する JavaScriptクロージャを完全理解！スコープチェインを知る（前編） JavaScript でブロックスコープを実現する JavaScriptでthisスコープをコントロールする JavaScript のブロックスコープと名前空間 page top/ edit this page Closure JavaScript Closures 101- they're not magic 猿でもわかるクロージャ超入門 まとめ page top/ edit this page tmp prototype.jsを読む(1) Firebugクックブック #1 Firefox 3とFirebugで始めるJavaScript開発 Firebug page top/ edit this page ひとめぐり プログラマのためのJavaScript 初心者でも使えてプログラマでも困惑するJavaScript page top/ edit this page サンプル 新JavaScript例文辞典 JavaScriptテクニックブック page top/ edit this page 実装 JavaScriptは何で動くのか？ 各Webブラウザ +SpiderMonkey… What is SpiderMonkey? SpiderMonkey とは何か? SpiderMonkey は Mozilla の C による JavaScript 実装につけられたコードネームである。 +jslib… jslibs (SpiderMonkeyの拡張?) standalone JavaScript development runtime environment with general purpose native libraries +Rhino… Rhino JavaScript for Java Rhino はすべてが Java で記述された JavaScript のオープンソースな実装です。それは一般的には、Java アプリケーション環境へ組み込まれて、エンドユーザーによるスクリプトの記述が可能になります。J2SE 6 ではデフォルトの Java スクリプティングエンジンとして組み込まれています。 もっともお手軽な対話的JavaScript処理系 page top/ edit this page DOM The DOM and JavaScript - MDN JavaScript DOM リファレンス 文書オブジェクトモデル(DOM)第1水準 仕様書 Version 1.0. The DOM and JavaScript DOMから始めるJavaScriptモダン・スクリプティング JavaScriptでDOMを使う――オブジェクト指向入門の入門 page top/ edit this page { 2011/03/11 10 41/ edit this_page tags (JavaScript Webプログラミング)
https://w.atwiki.jp/naobe/pages/73.html
言語に戻る はじめに Netscape社が制定。IEのJScriptとの互換性に問題があり、ECMAの標準規格ECMA-262（JavaScript1.1がベース）が制定され、この規格がJavaScriptの標準規格となった。 2009年時点では、JavaScript1.5～1.7。JavaScript2.0が現在検証中。 文法 コメント //コメント /* コメント */ 演算子 typeof演算子 オペランドに変数を用い、変数の型を表す文字を返す。"string","number","boolean","object","function","undefined"のどれかを返す。 等値演算子（==）と同値演算子(===) ==は型変換を行って、同じ値か確認する。===は型も含めて同じであるか判定する。 【例】 var a = "1"; var b = 1; if( a == b) { document.write("等値 br "); } else { document.write("等値でない br "); } document.write(" br "); if( a === b) { document.write("同値 br "); } else { document.write("同値でない br "); } document.write(" br "); 正規表現 JavaScript1.2から正規表現に対応。 修飾子 g マッチしたものを全て出力。 i 大文字と小文字を区別しない。 例 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字：" + b + " br "); //-- /script 条件分岐 if 繰り返し処理 while() {} while(条件) { ステートメント } 条件が真の間、ステートメントを実行する。 do { ステートメント } while(条件); 条件が真の間、ステートメントを実行する。最初のステートメントは無条件で実行する。 for in for(プロパティ in オブジェクト) { } オブジェクトのプロパティ名全てに対して処理する。 【例1】 for(var property in navigator) { document.write(navigator[property]); document.write(" br "); } 関数 機能をモジュール化して、共通化する。資源の節約、バグの低減に有効。 書式 function 関数名(引数) { 処理 [return 式] } 関数リテラル 関数を変数（オブジェクト）に代入して使う。 【例】 var func = function(x,y) { return x * y; } func(10, 20); 変数 関数の外部で定義した変数は関数内で使える(グローバル。C言語と同じ)。 【例】 var aaa = "aaa"; function func(x,y) { return aaa; } window.self 自身のwindowオブジェクト window.opener マルチウィンドウの親 windo.parent フレーム分割の１つ親 with文 共通するオブジェクトの記述を省略するために使う。 書式 with(オブジェクト) { } 例 with(document) { write("aaa"); write("bbb"); } 配列 引数は文字列に変換され連想配列として作成される。 初期化 a = []; 代入 a[0] = 1; a[1] = 2; 削除 delete a[0] a[0]がundefinedになり、a[1]は残る。 先頭の抽出 b = a.shift() aの先頭は削除。 最後の抽出 b = a.pop() aの最後は削除。 指定位置の抽出 b = a.slice(start, [end]) endがなければ最後まで。aは変化しない。bは配列になる。 オブジェクト コンストラクタ関数を作成し、newして使う。メソッドは、クラス固有なのでprototypeプロパティに設定する。 【例】 //長方形 function Rectangle(x, y){ this.x = x; this.y = y; } Rectangle.prototype.area = function(){ return this.x * this.y; } var rect = new Rectangle(10, 20); document.write("x：" + rect.x + " br "); document.write("y：" + rect.y + " br "); document.write("面積：" + rect.area() + " br "); クラスプロパティ コンストラクタ関数のプロパティ。定数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Number.MAX_VALUE クラスメソッド コンストラクタ関数の関数。汎用的な関数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Date.parse() クラスの継承 プロトタイププロパティを利用して、継承したクラスを作成する。 【例】 // クラスの継承 function PointedRectangle(w, h, x, y) { Rectangle.call(this, w, h); this.x = x; this.y = y; } // メソッドを継承させる PointedRectangle.prototype = new Rectangle(); // プロトタイププロパティを削除 delete PointedRectangle.prototype.width; delete PointedRectangle.prototype.height; // コンストラクタを元に戻す PointedRectangle.prototype.constructor = PointedRectangle; var prect = new PointedRectangle(20, 40, 200, 400); 連想配列 プロパティのアクセス方法には以下の２とおりの方法がある。 obj.property = 値; obj["property"] = 値; 2番目の方法を使うとプロパティ名を変数として与えることができるので、連想配列として使える。 WEBアプリケーション Java Scrriptの記述 script タグの中に本体を記述。 script は、何回でも、どこにでも記述可能。ただし呼び出しの前に本体を記述しなければならない。 header タグの中に記述する場合が多い。 JavaScriptに対応していないブラウザに対処するために以下の書式を使う。 script !-- ・・・ //-- /script イベントハンドラ onclick リンク、ボタンの属性。JavaScriptの関数を指定する。falseを返すと、デフォルト処理をキャンセルする（フォームのときは、送信しない。）。 onload body タグに指定する。ドキュメントや画像などの外部コンテンツが完全に読み込まれたときにこのイベントハンドラが呼び出される。 右クリック禁止 body oncontextmenu="return false"" 外部JavaScriptファイル参照 script type="text/javasctipt" src="XXX.js" /script 組み込みメソッド setTimeout(実行する関数, 遅れ時間(ms)) 【例】 ar timer = false; function foo(){ if(timer == false){ setTimeout(function() { timer = true; foo(); timer=false; }, 2000); return; } alert("hello!"); } foo(); 【例12】 var isTrx = 0; var delayTime = 5000; //2重押下抑止 function check() { if (isTrx == 1) { return false; } isTrx = 1; setTimeout( isTrx = 0; , delayTime); return true; } テクニック [Enter]キーでフォームの内容が送信されるのを防ぐ記述 form action="***" method="***" onsubmit="return false;" オブジェクトモデル window +--document | +-- anchors[] | +-- applets[] | +-- Area | +-- forms[] | | +-- elements[] 要素は、Button,CheckBox,・・・ | | +-- Button | | +-- CheckBox | | +-- FileUpload | | +-- Password | | +-- Hidden | | +-- Radio | | +-- Reset | | +-- Select | | | +-- options[] | | | | | +-- Submit | | +-- Text | | +-- Textarea | +-- images[] | +-- links[] +-- history +-- location +-- frames[] +-- navigator +-- screen windowは、ブラウザウィンドウまたはフレームを表す。 フォーム フォーム全体：forms フォームの各要素：elements 添え字によるアクセス document.forms[1].elements[2] ・・ ２番目のformの3番目の要素(button,password,radiobox,textareaなど ) 名前によるアクセス html form name="f1" /form form name="f2" /form /html 上記例では、document.f2 イベント イベント 発生タイミング イベントハンドラ 対象オブジェクト blur ユーザのフォーカスが離れたとき onBlur テキストフィールド focus フォーカスされたとき onFocus テキストフィールド click クリックしたとき onClick ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン change 値が変更されたとき onChange テキストフィールド load WebページがWebブラウザにロードされたとき onLoad bodyタグ unload 別のページに移動したとき onUnLoad bodyタグ 【例 onLoad】 body onLoad="alert( ロードしました )" 【例 onUnLoad】 body onUnLoad="alert( 移動しました )" 動作しない！！ 新たにウィンドウを開く window.open(URL, ターゲット, フィーチャ); URL ロードするサイトのURL ターゲット フィーチャ 何も設定しなければ、起動もとのウィンドウと同じ。一つでも設定すれば、設定した項目のみ有効。 項目 説明 height=X ウィンドウの高さ width=X ウィンドウの幅 left=X ウインドウの画面左からの位置 top=X ウインドウの画面トップからの位置 location URL入力用のバーを表示 menubar メニューバーを表示 resizable ウィンドウのサイズを変更可能にする status ウィンドウ下のステータスバーを表示 scrollbars スクロールバーを表示 セキュリティ JavaScriptでできないこと クライアントのファイルに対して読み書きができない。 ネットワーク機能自体をサポートしない（生のTCP/IPを使えない） 別ブラウザを開くのは、ボタンクリックなどのユーザ操作に対してのみ。（無制限なポップアップウィンドウ表示をなくすため） クローズできるのは、自分が開いたウィンドウのみ 小さなウィンドウ（100ピクセル以下）を開くことはできない。 スクリプトをロードしたサーバと異なるサーバからロードしたドキュメントを操作することはできない。（同一出身ポリシー） 作成例 html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" meta http-equiv="Content-Style-Type" content="text/css" meta http-equiv="Content-Script-Type" content="text/javascript" title JavaScriptテスト /title style type="text/css" !-- h1 {font-size 14pt}; h2 {font-size 12pt} -- /style /head body oncontextmenu="return false" onLoad="alert( ロードしました )" onunload="alert( ページを移動しました )" h1 単純な文字出力 /h1 script type="text/javascript" !-- document.write("Hello Java Script."); //-- /script h1 外部ファイル /h1 script type="text/javascript" src="aaa.js" /script h1 正規表現 /h1 h2 マッチした文字を返す /h2 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字：" + b + " br "); //-- /script h1 繰り返し処理 /h1 h2 for in /h2 script type="text/javascript" !-- for(i in navigator) { document.write(navigator[i]); document.write(" br "); } //-- /script h1 関数の使用 /h1 script type="text/javascript" !-- function func1(a) { return a*2; } document.write("3*2=" + func1(3) + " br " ); //-- /script h1 with文 /h1 script type="text/javascript" !-- with(document) { write("aaa" + " br "); write("bbb" + " br "); } //-- /script h1 マウス右クリック無効化 /h1 script language="JavaScript" !-- function RightOff(e) { if (document.layers e.which == 3){ //NNの場合 alert("右クリックメニューは機能停止しました!"); return false; }else if (document.all event.button == 2) { //IEの場合 alert("右クリックメニューは機能停止しました!"); return false; } return true; } if(document.all){ //IEの場合 document.onmousedown = RightOff; } if(document.layers){ //NNの場合 window.onmousedown = RightOff; window.captureEvents(Event.MOUSEDOWN); } // -- /script firefoxでは無効。 h1 onLoad /h1 p ページを開いたときに起動。bodyタグに記述。 /p h1 onUnLoad /h1 p 別のページに移動したときに起動。bodyタグに記述。 /p a href="http //localhost/PukiWiki/index.php" ホームに移動 /a h1 onBlur/onFocus /h1 form input type="text" onblur="alert( onblur action. )" value="" input type="text" onfocus="alert( onfocus action. )" value="" /form h1 別ウィンドウを開く /h1 h1 タイマー /h1 script type="text/javascript" !-- var cnt = 0; var ret; function rewritePg() { var p = document.getElementById("p1"); if(p == null) { alert("p1 null."); } if( cnt % 2 == 0 ) { p.innerHTML = "bbb"; /** p.firstChild.data = "bbb" でも良い。 */ } else { p.innerHTML = "aaa"; } cnt++; ret = setTimeout("rewritePg()", 2000); } function stopRewrite() { clearTimeout(ret); } //-- /script p 2秒ごとにパラグラフの文字を変える。 /p p id="p1" aaa /p input type="button" value="開始" onClick="rewritePg()" / br input type="button" value="停止" onClick="stopRewrite()" / br / body /html
https://w.atwiki.jp/telestea/pages/108.html
JavaScript（ジャヴァスクリプト）とは、オブジェクト指向のスクリプト言語である。主にウェブブラウザ(ブラウザ)にクライアントサイド実装され、動的なウェブサイト構築や、リッチインターネットアプリケーション(RIA)など高度なユーザインタフェース(エクステンション)の開発に用いられる。 拡張子.js パラダイムマルチパラダイム 登場時期1995年 設計者ブレンダン・アイク 開発者ネットスケープコミュニケーションズ、Mozilla Foundation 最新リリース1.8 / 2008年 評価版リリース1.9.3 / 2010年 型付けダック・タイピング 主な処理系JavaScriptCore、KJS、Nitro、Rhino、SpiderMonkey、V8ほか 方言JScript 影響を受けた言語C言語、Java、Perl、Python、Scheme、Self 影響を与えた言語Dart、Objective-J プラットフォームクロスプラットフォーム JavaScript - ウィキブックス
https://w.atwiki.jp/pspt/pages/243.html
JavaScriptリファレンス 言語に関する話題はこちら→JavaScript & jQuery JavaScriptリファレンス 入門 オブジェクトオブジェクトに情報を入力する連想配列 演算子 DOMHTMLの内容を書き換える フォームフォームを最初から編集できる状態にする その他即時関数 入門 JavaScriptリファレンス入門 オブジェクト オブジェクトとはプロパティ(キー)に関連付けてデータを格納するデータ構造である。オブジェクトという概念を用意することでデータが意味を持つようになる(抽象的になる)。 オブジェクトに情報を入力する var Tom={ Japanese 4, mathematics 5, English 2}; alert(Tom.mathematics); 連想配列 var Tom={ Japanese 4, mathematics 5, English 2}; for(key in Tom){ alert("Tom s "+key+ +Tom[key]); } 演算子 演算子/JavaScriptリファレンス DOM HTMLの内容を書き換える HTMLで書き換えたい要素を用意してid名(ここではidName)を添えておく。 document.getElementById("idName").textContent="書き換えました"; フォーム フォームを最初から編集できる状態にする select()をつける。 対象のフォームよりselect()を前に置くと処理されない。 !--HTMLのコード-- form name="form1" input type="text" value="ここに入力" /form script test(); /script //JavaScriptのコード function test(){ document.form1.elements[0].select(); } その他 即時関数 (function(){ // 処理 })(); 編集