JavaScriptを使う

JavaScript とは

　ホームページの記述の基本はHTMLファイルですが、その不足や演算機能を盛り込むことが出来る言語が「JavaScript」です。JavaScript を用いると、ウェブページの上の表示を動的に変更して、時刻を表示したり、入力値を演算したり、さらにはゲームまで出来たりします。
　JavaScript だけではホームページを作ることは出来ません。HTMLファイルの中に、書き始め(<script>)と終わり(</script>)との間に JavaScript を記述します。
　JavaScript へのデータのやり取りは、HTMLタグに「イベントハンドラー(onLoad onClick onMouseOver等)」を記述して行います。なお JavaScript では大文字と小文字が区別されます。

　「Java」は JavaScript とは別物で、通常のアプリケーションを作成するための言語です。ただし、Java で作られた「JavaApplet」ファイル(***.class)は HTML の <APPLET>タグで動かすことが出来ます。参考
　　参考サイト：　JavaScriptとは？　独学JavaScript 　初心者向け解説　 JavaScript って何？　JS サンプル

JavaScript の具体例
　JavaScriptプログラムは HTMLファイル内に記述します。ここで、 <script> ～ </script>が具体的なJavaScriptのプログラムで JavaScriptの仕様に従っています。　時計のサンプル：　サンプルコード／ JS サンプル集／ JavaScript例文辞典へ／ JavaScriptリファレンス／

　　　　　　　　　　　　【Javascript のリスト例】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>js_sample</title>
  <script>
    function hyouji(nakigoe){
      are=window.open('','aaa','width=250,height=200');
      are.document.write('<H2 align=center>'+nakigoe+'</H2>');
    }
  </script>
</head>
<body>
  <form>　　ボタンを押して下さい。<br><br>　
    <input type="button" value="　犬　" onClick="hyouji('わん！わん！')">　
    <input type="button" value="　猫　" onClick="hyouji('ニャン！ニャン！')">
  </form>
</body>
</html>

【左記の表示例】
(押すボタンに応じ鳴き声を表示します)

【参考サイト】
HTML5の書き方

JavaScriptの基本概念

JavaScriptでは、1.オブジェクト(対象物)に、2.プロパティ(属性)を指定し、3.メッソド(処理)を、4.イベントハンドラ(起点処理)で指定したりします。
<!DOCTYPE html><html lang="ja"> <head><title>背景色</title></head> <body style ="background: #66ff66;"> <a href="#" onclick="alert('背景色は '+ document.querySelector('body').style.backgroundColor)+'です'">クリックして!!</a> </body></html>
上の例は、document.querySelector('body') がオブジェクト、style.backgroundColorがプロパティ、alertがメッソド、onclickがイベントハンドラとなります。つまり、「クリックして!!」をクリック(onclick)したときに、documentオブジェクトの querySelector('body')オブジェクトのプロパティ(style.backgroundColor)が、「#66ff66」=rgb(102, 255, 102)であることを表示するページです。
　
その他に、変数、関数などを扱うことが出来ます。
・変数　　x=3; var y=8; 等のようにこの x,yを変数として、扱うことが出来ます。
・関数　　function 関数名 (引数) { 動作内容 ; }のように書きます。具体例は下記↓
<!DOCTYPE html><html lang="ja"><head> <title>時計</title> <script> function toki() { dd = new Date(); document.fm.tm.value = dd.toLocaleString(); window.setTimeout("toki()", 1000); } </script></head> <body onload="toki()"> <form name="fm" action="#"> <input type="text" name="tm" size=30> </form> </body></html>
・構文　　条件分岐（if）、繰り返し（for）、条件分岐（switch）等があります。

JavaScript を使うには

プラウザの設定　　参考１　参考２
javascript が動くように「アクティブスクリプト」を有効にします (IEの場合 → )
html への記述　　参考
● html のなかに<script> ～ </script>のように JavaScript を書く
<!DOCTYPE html><html lang="ja"> <head><meta charset="UTF-8"></head> <body> <script> alert('Hello!!'); </script> </body></html>
● script文を ***.js と名付けて保存し html から <script src="***.js"> </script>と呼込む
● イベントハンドラ(on～)を介して javascript を実行する。↓
　<input type="button" value="Click Me!!" onclick="alert('Hello!!')">
● URL記述(javascript:...)をする。↓
　<a href="javascript:alert('Hello!!')">Click Me!!</a>
JavaScript非対応環境への対策 (必要に応じて)　　参考
<script> // ここに、JavaScript 利用リストを記載 </script> <noscript> ここには、JavaScript非対応のリストを記載 </noscript>

JavaScript の利用

JavaScript の例
- JavaScriptの書き方　　逆引きリファレンス　 addEventListener type一覧　 JavaScriptでできること
- 犬猫　時刻表示　カレンダ　日付選択　ストップウォッチ　モーダル表示
  参考: JavaScriptテクニック　 HIMAJIN 　サンプル集　練習問題集　関連サイト
JavaScriptで地図を表示・操作する
1. Google Maps を使う　　 Maps サンプル　記述例
2. Yahoo! Map を使う　　 Yahoo! Map サンプル　記述例
3. Leaflet を使う　　使い方　 Leaflet 地図　地理院タイル　カスタマイズ　重ねるレイヤ
JavaScrip の注意事項　セキュリティ　JS の注意点　つまづきやすい
1. scriptの位置　　タイミング　外部ファイル　タイミング　 deferとasync 　レンダリング
2. 変数の扱い　　var宣言　変数宣言　 var/let/const 　オブジェクト　関数と変数
3. document.write()は非推奨　　 DOM-based XSS 　insertAdjacentHTMLを使う　 document.write()を使わない
4. return false 　
jQuery を使う
1. jQuery とは？　　
2. jQueryを使う　　
その他
1. メソッドとは　　メソッドの使い方　関数とメソッドの違い
2. セレクタの種類　　 querySelectorAll()
3. 正規表現テスト
4. 配列　　 Array.reduce() 　連想配列　 sort() 　reduce() 　可変長引数
5. アロー関数について　　関数の違い　即時関数　テンプレートリテラル
6. Class 　　クラス　クラス定義　 class を理解する　 class構文　コンストラクタ
7. マウスの座標を取得

JavaScript のディバッグ

alert で確認する
1. 　script の中に、「 alert( 変数 ) 」を記述して「変数」の確認等をします。例↓
  <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <script> alert(new Date()); // alert で new Date() を確認 var day = new Date().toLocaleString(); document.getElementById("box").innerHTML = day; </script> </head> <body> <p id="box">時刻</p> </body></html>
2. 注意事項
  引数が非適切の場合は「undefined」「object Object」「object HTMLCollection」等が表示されます
  ＊プロパティを一覧表示
3. 参考サイト
  alert の使い方　 alertメソッド　アラート表示
console.log() で確認する
1. console.log() を書き込む。例↓
  <!DOCTYPE html><html lang="ja"> <head> <meta charset = "utf-8"> </head> <body> <p>console.log() テスト</p> <script> for (var i=0; i<5; i++) { if(i==2){ console.log('i = '+i+' です'); // console を記述 } else if(i==3){ txt = "<p style='color:red;'>i= "+i+"</p>"; document.write(txt); console.log(txt); // console を記述 } else { console.log("i: "+i) } // console を記述 } </script> </body></html>
2. Web ページを表示時に(下左図↓)、F12 キーを押すと「コンソール」画面を表示出来ます(下右図↓)
3. ブラウザ毎の console 画面表示方法　　参考１　参考２
  「F12 キー押し」で表示可能です。それ以外にも下記のようにすれば console 画面が表示できます。
  Edge:
  　1) ブラウザの右上にある横三点アイコン(･･･)をクリック
  　2) 「その他のツール」＞「開発者ツール」を選択
  　3) 「コンソール」画面が表示される
  
  Chrome:
  　1) ブラウザの右上にある縦三点アイコンをクリック
  　2) 「その他のツール」＞「デベロッパーツール」を選択
  　3) 「console」画面が表示される
  
  Firefox:
  　1) ブラウザの右上にある三本ラインアイコンをクリック
  　2) 「ウェブ開発」＞「ウェブコンソール」を選択
  　3) 「コンソール」画面が表示される
  
  Internet Explorer:
  　1) ブラウザの右上にある歯車アイコンをクリック
  　2) 「F12開発者ツール」を選択
  　3) 「コンソール」画面が表示される
4. 参考サイト　console.logを表示　デバッグのやり方　 JSONを整形表示　デバッグ効率化　 console.table
DOM要素値を取得する
- DOM操作　 DOMとは何　 DOM基礎　 DOMの役割　 DOM操作とは　 DOM 　DOM操作一覧
- 要素を取得　スタイル取得　 value値　あらゆる要素　属性取得　 text box
参考サイト