約 2,904,187 件
https://w.atwiki.jp/acil/pages/39.html
サルでもわかるデザインパターン javaScript イベントの順番 フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編) JavaScriptあれこれ/正規表現パターン jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 JavaScript 開発環境の用意(Eclipse WTP/JSDT) EOF
https://w.atwiki.jp/pspt/pages/236.html
JavaScript jQuery ご存知でしたか?実はWEB上で動くもの殆どがJavaScriptで記述されているんです。 JavaScript jQuery JavaScriptを学ぶメリットホームページをカスタマイズする ブックマークレットを記述する Windows8のストアアプリを作成する Google Apps Scriptを記述する リファレンスリファレンス 学習方法 (初心者用) jQueryを使いたいならCDNを利用する 参考WEBサイトリファレンス 最適化について 書籍 JavaScriptを学ぶメリット ホームページをカスタマイズする HTML & CSSだけでは難しい動的なWEBページを作成できます。jQueryを利用すればより簡単に動的なWEBページを作成できます。 ブックマークレットを記述する ブックマークレットとはウェブブラウザで簡単な処理を行う簡易的なプログラムです。上手く使いこなせば今よりずっと快適なネットサーフィンを実現できます。 Windows8のストアアプリを作成する Windows8のストアアプリは従来のソフトウェアと異なりWEBページやWEBアプリを組むようにアプリを作成することが可能です。(勿論、従来の方法も通用します) Google Apps Scriptを記述する なんとGoogle Apps ScriptはMS Officeのマクロ機能のGoogle ドキュメント版です。安さしかないフリーのオフィスソフトとは、一線を画します。 リファレンス リファレンス JavaScriptリファレンス入門 JavaScriptリファレンス 学習方法 (初心者用) JavaScriptの記入場所は2つ。 HTMLファイル内 外部のJSファイル 基本的にJavaScriptはHTMLファイル内に記述するものだがCSSがそうであったようにHTMLファイルとは別に外部のJSファイルを用意してそこからHTMLファイルに取り込むことも出来る。(詳しくはHTML & CSS)慣れない初めのうちはJavaScriptをHTMLファイル内に記述することだけに専念しよう。では下のようなhtmlファイル(jstest.html)を作って script タグ内を編集していこう。 html head title jstest /title meta charset="Shift_JIS" /head body script !-- ここを編集する。 -- /script /body /html jQueryを使いたいなら CDNを利用する HTMLのヘッダー内に以下のコードを挿入 script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" /script 参考 WEBサイト リファレンス とほほのJavaScriptリファレンス 最適化について JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 JavaScriptを高速化する6つのテクニック(マイナビニュース) 書籍
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(){ // 処理 })(); 編集
https://w.atwiki.jp/m_shige1979/pages/1016.html
配列 概要 Arrayや"[]"で定義する。 最初の番号は"0"から始まるものとする 1.[]で静的定義する 2.[]で定義後、動的追加する 3.[]で定義後、動的追加(push)する 4.Arrayで定義 5.new Arrayで定義 6.Array.prototypeによる継承 記述1(静的設定"[]"で挟んだ文字を配列とする) hoge.html !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 ary = ["aaa", "bbb", "ccc"]; // 出力 document.write(ary[0] + " br / "); document.write(ary[1] + " br / "); document.write(ary[2] + " br / "); //]] /script /body /html 記述1-A("[]"で挟んだ文字を2次元配列とする) hoge.html !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[ // 2次元配列で定義 var ary = [ [ "aaa", "bbb", "ccc"], [ "ddd", "eee", "fff"], [ "ggg", "hhh", "iii"], ]; // 出力 document.write(ary[0][2] + " br / "); document.write(ary[1][0] + " br / "); document.write(ary[2][1] + " br / "); //]] /script /body /html 記述2("[]"で挟んだ文字を配列とし動的に追加する) hoge.html !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 ary = []; // 追加を行う ary[0] = "ddd"; ary[1] = "eee"; ary[2] = "fff"; // 出力 document.write(ary[0] + " br / "); document.write(ary[1] + " br / "); document.write(ary[2] + " br / "); //]] /script /body /html 記述3("[]"で挟んだ文字を配列とし動的に追加する(push)) hoge.html !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 ary = []; // 追加を行う ary.push("ggg"); ary.push("hhh"); ary.push("iii"); // 出力 document.write(ary[0] + " br / "); document.write(ary[1] + " br / "); document.write(ary[2] + " br / "); //]] /script /body /html 記述3-A(2次元配列を動的設定する) hoge.html !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[ // 2次元配列で定義 var ary = []; var item = []; // 追加 item = []; item.push("111", "222", "333"); ary.push(item); // 追加 item = []; item.push("444", "555", "666"); ary.push(item); // 追加 item = []; item.push("777", "888", "999"); ary.push(item); // 出力 document.write(ary[0][2] + " br / "); document.write(ary[1][0] + " br / "); document.write(ary[2][1] + " br / "); //]] /script /body /html 記述4(Arrayオブジェクトを使用) hoge.html !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 ary = Array("aaa", "bbb", "ccc"); // 出力 document.write(ary[0] + " br / "); document.write(ary[1] + " br / "); document.write(ary[2] + " br / "); //]] /script /body /html 記述5(new Arrayオブジェクトを使用) hoge.html !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 ary = new Array("111", "222", "333"); // 出力 document.write(ary[0] + " br / "); document.write(ary[1] + " br / "); document.write(ary[2] + " br / "); //]] /script /body /html
https://w.atwiki.jp/api_programming/pages/51.html
下位ページ Content 宣言配列、連想配列 要素数 要素の追加引数で追加 push 連想配列を結合する 要素の削除splice()indexが配列長より大きい場合 要素のソート(並び替え)sort 要素の確認 配列要素に対する処理for a of A で取り出す A.forEach() で取り出す 配列/Javascript - AjaxTower 配列 (Array) - JavaScript プログラミング解説 宣言 new Array() var a = new Array() もしくは []で最初から中身や要素数を書く。 var a = [] new Array()と[]の違い - Qiita http //qiita.com/Hiraku/items/d74690088dfa368875c9 配列、連想配列 javascriptの連想配列と配列の違い - Qiita 要素数 array.length 関数ではなく、プロパティ lengthプロパティ 要素の追加 JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除 - Qiita 引数で追加 空き番号に入れる var a = [1,2,3]; // a[0]=1,a[1]=2,a[2]=3 a[5]=6; // a[0]=1, a[1]=2, a[2]=3, a[3]=undefined, a[4]=undefined, a[5]=6 push 末尾に追加する array.push(a); https //qiita.com/takeharu/items/d75f96f81ff83680013f#%E6%9C%AB%E5%B0%BE%E3%81%AB%E8%BF%BD%E5%8A%A0---push Array.prototype.push() - MDN 連想配列を結合する jQueryには $.extend(target,obj1[,obj2,...]) という関数があるらしい。 jQuery.extend $.extend() - js STUDIO 要素の削除 splice() array.splice(index, howMany, [element1][, ..., elementN]);) index の要素から howMany 個削除する ※その場で配列長が短くなるので、ループを回す際には後ろから回すなど、工夫が必要 indexが配列長より大きい場合 index ← length-1 で解釈される https //developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 要素のソート(並び替え) sort htmlでいうところのli要素(の集合、配列)に対して使ってみたが、リストの順番は実では反映されず。 html($(ul li).sort())をしてみたら、ソートはできたが、.data("-","~")でくっつけておいたデータが反映されず。 変数の並べ替えは「辞書的」に行われる。 .sort(compareFunction) でcomareFunctionを定義することで、オブジェクト等々でも並べ替えが可能。 compareFunction(a,b) 0 a→bの順に並べる compareFunction(a,b) = 0 a = b と判断(並べ替えない) compareFunction(a,b) 0 b→aの順に並べる 中でどのような並べ替えが行われているのか?どうも挿入ソートで行われているようだ(firefoxとchromeでは)。挿入ソートなので、n番目の要素のソート(挿入位置の検索)を開始してから、並べ替えが発生しなかったとき、つまり compareFunction 0 になったとき、次のn+1番目の要素のソートに遷移する、という意味でいいのか? すると、「並べ替えて次の」か並べ替えないか」だから、すくなくともfirefoxとchromeでは、compareFunction = 0 と compareFunction 0 は「並べ替えない」という意味で同義になるのか? Array.sort - MDN 要素の確認 array.indezOf( ) を使って、インデックスがあるか(-1か)で確認できる。 配列要素に対する処理 for a of A で取り出す A.forEach() で取り出す forEach は関数を引数にとる。そのため、break, continue で抜けられない。return で飛ばす。 .some() とか、要素に対するループを処理するものが他にもある。 https //38fanjia.hatenablog.com/entry/2016/10/10/170900
https://w.atwiki.jp/eraiwa/pages/20.html
HP上でのJavaScriptのエラーは、観覧側からエラーを出させないようにするしか 対応できない場合があります。 もしくはHPを更新・開き直しで解決できる場合もありますが 禁止にしてしまえば、テキストは通常に観覧可能となります。 JavaScript を禁止するのは簡単です。主要なブラウザで JavaScript を無効にする手順は以下のとおりです。他のブラウザでも同じような手順で設定できます。 Internet Explorer(Windows) 「ツール」→「インターネットオプション」→「セキュリティ」→「レベルのカスタマイズ」→「スクリプト」→「アクティブスクリプト」、「無効にする」をチェックする。 Internet Explorer(Macintosh) 「編集」→「初期設定」→「Web コンテンツ」→「アクティブコンテンツ」、「スクリプトを有効にする」のチェックをはずす。 Netscape 「編集」→「設定」→「詳細」、「JavaScript を有効にする」のチェックをはずす。
https://w.atwiki.jp/nicepaper/pages/278.html
前回記事JavaScript入門6ではオブジェクトとメソッドの書き方について学びました。今回は用意されているオブジェクトとメソッドについて考えていきます。10月27日記事 目次 基本オブジェクト メソッド コード(stringオブジェクトの例) まとめ 基本オブジェクト 配列を扱うArrayオブジェクト、文字列を扱うStringオブジェクト、日付を扱うDateオブジェクト 数学的な計算処理を扱うMathオブジェクト、dateオブジェクトの一部 1の方はメソッドを使う時に、 new演算子を使ってオブジェクトを作ってあげる必要があります。 2の方はメソッド記述時に new演算子を使わずに、そしてオブジェクトを宣言しなくても使えるものがあります。 具体的な例を見ていきたいと思います。 メソッド メソッドとはオブジェクトにくっついてる関数です。「手続き」と呼ばれ、オブジェクトにくっつけて使います。当然オブジェクトが定義されていないと使えません(Mathオブジェクト,Dateオブジェクトの一部を除く)。 コード(stringオブジェクトの例) stringオブジェクトでどんなメソッドが使えるかはMDNを確認していただくとわかりやすいと思います。 !DOCTYPE HTML html head meta charset="utf-8" title 用意されているオブジェクトを使う~組み込みオブジェクト~ /title /head body script var s = new String("world wide web"); //オブジェクト名にドットをくっつけてメソッドを記述する。 console.log(s.length);//文字列の長さを測るlengthメソッド console.log(s.replace("w","W"));//文字列を置換するreplaceメソッド var regexp = /[i]/; //変数を適当に作る console.log(s.match(regexp));//正規表現によるパターンマッチさせるmathメソッド //iは先頭が0から始まり7番目(いわゆる8文字目)にあらわれる console.log(s.split("w",3));//先頭も数えられるので最後のwebは分割できない。 console.log(s.split("w",4));//これをするとwebのwも分割される。 /script /body /html その他Stringオブジェクトで使えるメソッドはMDNの https //developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Stringを見ていじってみてみてください。 まとめ 今回はオブジェクトを作り、メソッドで色々と表示させていきました。 次に、JavaScript入門8では、new演算子を使わず、オブジェクトを作らず数学的な処理をするMathオブジェクトについて考えていきたいと思います。 以上
https://w.atwiki.jp/hear_br0wn/pages/27.html
☆JavaScript 【①JavaScriptとは】 動きのあるホームページを作成できるようにする、クライアント用スクリプト言語。 イベント利用のインタラクティブ機能の補完 ユーザ入力補助などにイベント発生 【②JavaScriptとイベントハンドラ】 JavaScriptは動作するタイミング(クリック時、マウスオーバー時・・など)を指定する必要がある。 イベントハンドラ名="実行するJavaScript('コメント')" ●JavaScript(命令)例: ・alert('テキスト') :アラート(ポップアップ)を表示 ●イベントハンドラ(命令をするタイミング)例: ・onabort ブラウザの停止ボタンなどで、画像の読み込みが中断された場合 ・onblur 対象の要素からフォーカス(マウスポインタなど)が離れた場合 ・onclick クリックされたら実行 ・onchange 値が変更されたら実行 ・onerror ページや画像の読み込みエラーされたら実行 ・onfocus 対象の要素にフォーカス(マウスポインタなど)が移動した場合 ・onload HTMLが読み込まれたら実行(ページが表示された直後に実行) ・onmouseover カーソルホバーされたら実行 ・onreset フォームがリセットされた場合 ・onsubmit フォームのサブミットボタンが押されたら実行 ・onselect テキストボックスなどのエリア内をクリックし、入力が可能になった場合に実行 ・onunload 別ページへ移動する場合に実行 【③記述時のルール】 半角文字で記述する ・大文字と小文字が区別される(HTML・CSSは大文字小文字を区別なく書いてもOK) ・各文の最後に「;」(セミコロン)を記述する必要がある。(ないと命令がずっと続いていると認識される) ・半角、タブによるスペースは無視される。 ※コメントはHTMLと同様に --!と//-- でくくる。 ※外部ファイル(外部JS)の場合は、 ・//:ラインコメント(1行) ・/*非表示にしたい内容*/:ブロックコメント 【④組み込みかた】 ④-1.外部ページ CSSのようにJavaScript専用の.jsファイルをつくり、そこから呼び出す。 script type=”text/javascript” src=”パス” /script 例: !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 JSイベント /title link href="css/import.css" rel="stylesheet" type="text/css" / script type="text/javascript" src="import.js" /script ④-2.ページ内(header内) script type=”text/javascript” 処理 /script 例: !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 Javascript /title script language="javascript" !-- //-- var total = 4800; var a = new Array(3); a[0] = 2000; a[1] = 400; a[2] = 500; function goukei(i){ if(document.f1.elements[i].checked == true){ total = total + a[i]; } else{ total = total - a[i]; } document.f1.elements[3].value = total; } /script /head ④-3.タグ内 要素名 イベント=”処理” 例: body onload="window.alert('オンロードイベント発生') ) ④-4.JavaScriptに対応していないwebブラウザ用に以下の記述をしておくとわかりやすい。 script language="JavaScript" !-- (JavaScriptの処理を記述) /script nonscript このページはJavaScriptが使用されています。 br / JavaScriptを有効にしてから閲覧してください。 /nonscript ※ nonscript ~ /nonscript はJavaScriptに対応していないブラウザの場合のみ表示される。
https://w.atwiki.jp/m_shige1979/pages/1019.html
繰り返し 概要 処理を繰り返す場合に処理を行う 1.for文(回数指定) 2.for-in文(連想配列繰り返し) 3.while文(条件指定、前条件判断) 4.do-while文(条件指定、後条件判断) 1.for文(回数指定) !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[ // 回数指定の繰り返し for(var i = 0;i 10;i++){ document.write("i=" + i + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html 1-B.for文(配列での回数指定) !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 list = ["aaa", "bbb", "ccc", "ddd", "eee"]; // 回数指定の繰り返し for(var i = 0;i list.length ;i++){ document.write("list=" + list[i] + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html 2.for-in文(連想配列繰り返し) !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 list = {"aaa" "11111", "bbb" "22222", "ccc" "33333", "ddd" "44444", "eee" "55555",}; // 連想配列の繰り返し for(var key in list){ document.write("kwy=" + key + " list=" + list[key] + " br / "); } // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html 3.while文(条件指定、前条件判断) !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 i=10; // 継続条件 while(i 10){ // 出力 document.write("i=" + i + " br / "); // インクリメント i++; } document.write(" br / "); // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html 4.do-while文(条件指定、後条件判断) !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 i=10; // 継続条件 do{ // 出力 document.write("i=" + i + " br / "); // インクリメント i++; }while(i 10); document.write(" br / "); // 出力1 document.write("Test Javascript" + " br / "); //]] /script /body /html
https://w.atwiki.jp/sevenlives/pages/1705.html
スコープ(JavaScript) 読み:すこーぷ 英語:scope 別名: 意味: JavaScriptにおけるスコープとは、変数の有効範囲のこと。 JavaScriptのスコープは関数内か外かの違いでありブロックスコープは存在しません。 またvar宣言をしない変数は自動的にグローバル変数になります。 JavaScriptの変数はスコープをたどるスコープチェーンという機能を持っています。 2015年02月02日 グローバル変数(JavaScript)? ローカル変数(JavaScript) ブロック・スコープ? スコープ・チェーン ホイスティング? 単独varパターン? 関数(JavaScript) スコープ JavaScript