#author("2021-06-07T11:17:14+09:00;2020-06-23T13:21:08+09:00","default:inoue.ko","inoue.ko") #author("2022-12-08T19:39:45+09:00;2021-06-07T11:17:14+09:00","default:inoue.ko","inoue.ko") *JavaScript [[JavaScript/Syntax]]｜[[JavaScript/BOM]]｜[[JavaScript/DOM]]｜[[JavaScript/Sample]] ~ JavaScriptとは、SunMicrosystems社とNetscapeCommunications社が開発したスクリプト言語です（Sunが開発したJavaという言語とは別物です）。 HTMLが文書の構造、CSSが文書の表現を定義するものだとすれば、Java ScriptはWebページの「振る舞い」を定義するものです。主要なWebブラウザ上で動作することはもちろん、ブラウザ以外のソフトウェアにも簡易な制御プログラムの記述用言語として移植されています。標準仕様は、ヨーロッパの標準化団体ECMAが発行した ECMAScript です。 世に登場したのは1995年ですが、Ajax（Asynchronous JavaScript ＋ XML）を活用したGoogleマップの登場（2005年）を機に、高機能なウェブアプリケーション開発言語として注目を集め、さらにHTMLとCSSに次ぐ第三の標準テクノロジー DOM（Document Object Model）が注目されるようになって、DOM-APIを利用する言語としての JavaScript にも注目が集まるようになりました。また JQuery のような優れたライブラリーが登場し、簡単に美しいインターフェースが実現できるようになったことも、その追い風になりました。2015 年には本格的な大規模更新が施された ECMAScript 6 (ES6) が策定され、2020年現在 10th Edition。 -https://ja.wikipedia.org/wiki/JavaScript -https://www.w3schools.com/js/default.asp ~ 言語を学ぶということは「新たな思考回路を身につける」ということです。AI（先端的なIT技術）との協働が必須となる時代、コンピュータの思考回路を理解してそれを使いこなす技術が求められています。時間はかかると思いますが、プログラミング言語を学ぶきっかけとして JavaScript を選択することは、最も賢明であると考えます。 言語を学ぶということは「新たな思考回路を身につける」ということです。AI（先端的なIT技術）との協働が必須となる時代、コンピュータの思考回路を理解してそれを使いこなす技術が求められています。時間はかかると思いますが、JavaScript でプログラミングを学ぶことは、賢明な選択であると考えます。 -[[The RedMonk Programming Language Rankings>Google:The RedMonk Programming Language Rankings]] -[[StackOverflow Most Popular Technologies>Google:StackOverflow Most Popular Technologies]] -[[TIOBE Index>https://www.tiobe.com/tiobe-index/]] -[[PYPL｜PopularitY of Programming Language index>http://pypl.github.io/PYPL.html]] ~ ~ ***CONTENTS #contents2_1 ~ **JavaScriptを利用するには JavaScript を利用するには、以下の３つの方法があります。 -HTMLのタグ内に直接書く <input type="button" onClick="alert('Hello World!');" value="hello"> -HTML内（＜/body＞直前あるいはhead内）に、scriptタグを用いて書く <script> // <!-- ←注） HTMLとしてはコメント扱いになっている function 関数名（引数）{ 処理 } function 関数名（引数）{ 処理 } ： // //--> </script> -HTMLから独立した別のファイルに書いて参照する（ 拡張子は .js ） --sample.html（head内あるいは＜/body＞直前に以下の１行を書く） <script src="script.js" defer></script> --script.js（独立した新規テキストファイルに、関数を列挙して書く） function 関数名（引数）{ 処理 } function 関数名（引数）{ 処理 } ： -結論から言うと ''３つめの方法を採用するのがベストです''。関数(プログラム)の書かれたファイルを分離して、独立性を高くすることで、メンテナンスがしやすくなり、また他のサイトへの移植もしやすくなります。 //ページのテンプレート作成の段階で、＜head＞部に参照情報を記載しておけば、テンプレートから派生させたすべてのHTMLファイルに、 JSファイルに明記された動作を適用させることができます。 文書構造はHTML、デザインはCSS、そして振る舞いはJavaScriptと、役割分担を明確にし、それぞれの独立性が高くなるように書きましょう。 -[[入門サンプル>JavaScript/Sample]] ~ ~ **開発環境 ***TextEditor JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキストファイルです。したがって、HTML,・CSSと同様に、[[テキストエディタ>TextEditor]]さえあれば、プログラムの開発が可能です。 ~ ***ブラウザ搭載の JavaScript コンソール JavaScript は、Webページが持つ機能のひとつとして、ブラウザ上で動作しますが、その文法に問題があったり、ロジックの問題があっても、ブラウザ上ではその機能が無視されるだけで、エラーメッセージが表面に現れることはありません（最悪の場合はブラウザがフリーズします）。そこで、スクリプトを開発する場合、それらを明示的に知るために、ブラウザの「コンソール」を使います。 以下、ブラウザでコンソールを表示する方法を紹介します。 -Firefoxの場合 --メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで コンソール ＞ JS と ロギング に チェックをつけて下さい。 --ショートカット： [command]+[option]+[i]（Windowsは [F12] ） --実際には、以下のようなイメージです。 #image(console.jpg) この例では「script.js の17行目26文字目にある getElemensByClass というのは関数ではない（関数が存在しない）」というエラーメッセージが出ていています。 -Chromeの場合 --メニュー＞表示＞開発/管理＞JavaScriptコンソール --ショートカット： [command]+[option]+[i]（Windowsは [F12] ） -試しに（コンソールへの文字列の出力） 以下のスクリプトを書いたHTMLをブラウザで開くと、 コンソールにHello World! と表示されるはずです。 <script> console.log("Hello World!"); </script> ~ ~ **JavaScriptプログラミングのキーワード ***イベントとイベントハンドラ JavaScriptのプログラムの多くは、何らかのアクションに対するリアクションとして記述されます。簡単な例で言うと「ボタンをクリックしたら要素の色が変わる」といったものです。JavaScriptの事例を調べていると、イベントとイベントハンドラという用語が頻繁に登場します。重要なキーワードですので確認して下さい。 -イベント イベントとは、マウスのクリック、キーの押下、タイマーの割り込みなど、ドキュメントに関わる「出来事」を意味します。イベントが「発火」すると、登録されたイベントハンドラが呼び出されるとともに、イベントに関するデータが引数としてそこへ渡されます。 -イベントハンドラ イベントに反応して動作する処理プログラム（関数）を意味します。 -<input type="button" onClick = "MyFunction()">を例にとると・・・ --イベント: ボタンのクリック --イベントハンドラ: MyFunction() ~ ***オブジェクト・プロパティー・メソッド JavaScript は[[オブジェクト指向言語（Object-Oriented Programming）>Google:オブジェクト指向]]であると言われます。オブジェクトとは簡単に言えば「モノ」のことで、身近にある文具、家電、車などと同様にイメージして構いません。 オブジェクト指向プログラミングでは、それを「プロパティー」と「メソッド」の集合体と考えてコードを記述します。 -プロパティー：オブジェクトの「状態」を表す「データ」 -メソッド：オブジェクトの「操作」を表す「処理」 例えば「車」を例にとると、それは以下のような「データ」と「処理機能」を持ったものであると説明することができます。[[参考 w3schools.com>https://www.w3schools.com/js/js_objects.asp]] -プロパティー：車の名前、型式、重量、色、現在位置、スピード・・・ -メソッド：エンジン始動、エンジン停止、走る、止まる、点灯する・・ 従来の「手続き型プログラミング」では、「データ（変数またはプロパティ）」と「処理（関数またはメソッド）」はバラバラに捉えられていて、プログラマーは、処理を担う「関数（引数＞処理＞戻り値）」を、いかに独立性の高いものに仕立てるか・・ということに関心を集中させていましたが、オブジェクト指向プログラミングでは、「データ」と「処理」をセットにした「オブジェクト」を構成単位と見なすとともに「オブジェクトのデータは、オブジェクトが持つメソッドによって処理される」と考えることで、プログラマーは、それがいかに単品としてうまく動くかということに専念できるようになりました。これは、画期的な意識改革です。 実は、私たち「生き物」も、またそれを構成する単位である「細胞」も、すべて同様に内部に「データ」と「処理システム」を持つオブジェクトです。データはデータ、処理は処理と、バラバラなものを寄せ集めても、大きなシステムがうまく動く保証はありません。しかし「きちんと動く小さなモノを集めて少し大きなモノを作り、それらを集めてさらに大きなモノを作る」という発想で仕事をすれば、物事はうまくいきます。実際に「車」というオブジェクトは、ネジのようなサイズの小さな部品から、少しづつ大きなパーツの塊ができ、最終的には、いくつかの大きなパーツの組み合わせとして出来上がります。個々のパーツは、それぞれの段階で、きちんと動くようにできているので、最後の組み立てもシンプルな作業になります。 ~ ***BOM・DOM BOM（Browser Object Model）と DOM（Document Object Model ）という概念は、Web制作を理解する上で、重要なオブジェクトの概念です。 JavaScriptは、Browser Object のひとつである Window オブジェクトを上位概念として、その中に表示される HTML文書を Document Object として扱います。さらに言えば、Document Object の中にある個々の要素（例えば h1 要素）もオブジェクトです。JavaScript プログラミングは、それらが持つ様々な「プロパティー」と「メソッド」を使って、システムを構築する作業であると言えます。 ''プロパティーとメソッドの違いは、語の最後に ( ) の有無で判断できます（メソッドは関数なので ( ) が付きます）。'' ''オブジェクトとプロパティー、またオブジェクトとメソッドは [ . （ドット）] で接続します。'' 以下、プロパティーとメソッドの例です。 -window.innerWindth：ブラウザウインドウの幅（プロパティ） -window.alert()：ブラウザに警告ダイアログを表示する（メソッド） -document.title：HTML文書のタイトル（プロパティー） -elem = document.createElement( タグ名 )：新たな要素を作る（メソッド） -document.body.appendChild( elem )：要素を body に加える（メソッド） -具体的な書き方、事例については以下をご覧ください。 --[[JavaScript/BOM]] --[[JavaScript/DOM]] --[[JavaScript/Sample]] ~ ~ **JavaScriptの実行タイミングを見極める ***HTMLファイルの中に <script>タグを書く場合 スクリプトが＜head＞内にあると、ページのコンテンツよりも先にスクリプトが読み込まれて即実行されます。関数を定義するだけならいいのですが、ページの中に記述された要素に対して実際に操作を施す場合、このままだと、ページ読み込み完了（DOM構築）前にスクリプトが実行されて、思うように処理が実現されない・・という問題が起こります。 そこで、この場合の解決方法としては、＜/body＞タグ（終了タグ）の直前に＜script＞を書く・・という方法が多くの事例で見られます。こうすれば、スクリプトの実行前にすべての要素が読み込まれている（DOMが構築済みとなる）ので、ターゲットを掴み損なうことはありません。 <html> ： <body> ： <script> // Do Something </script> </body> </html> ~ ***外部ファイルとして読む場合 プログラミングの基本的な感覚からすると、JavaScript は外部ファイルとして独立させて ＜head＞内で読み込むのがベストです。ただこの場合、先と同様、DOMの構築前にスクリプトが実行されてしまうという問題が生じます。 そこで、その回避策としてよく用いられるのが、window.onload イベントハンドラです。これを用いると、「ページの読み込み完了」というイベント通知を待ってから、スクリプトが実行されるので、.js 外部ファイルを安心して <head>で先読みさせることが可能になります。 window.onload = function() { [ ここに、DOM構築直後に実行すべきプログラムを書く ] } //''付記'' //さらなるスピードアップのために、以下のようなコードが書かれることもあります。DOMContentLoaded はDOMツリー構築完了直後に発火するイベントで、画像ファイルなどの外部リソースが読み込みを待たずに処理が行われるため、能率よくページの表示が行われます。 // document.addEventListener('DOMContentLoaded', function(){ // [ ここに、はじめに実行すべきプログラムを書く ] // } ~ ***Async と Defer HTML5の新しい仕様として、JavaScriptfの外部ファイルを読み込む方法として、 async属性 と defer属性 が追加されました。これに対応したブラウザの利用が前提であれば、''DOM構築後にJSが確実に実行されるようにするは、defer属性をつければよい'' ということになります。 -同期的読込 (デフォルト) <script src="script.js"></script> --script タグに defer も async も付けない場合、HTML パース中に script タグでHTMLのパースを一時停止し、JS ファイルのダウンロードと処理が行われます。JS ファイルの実行完了後、HTML のパースが再開されます。 -async属性｜非同期 <script src="script.js" async></script> --非同期で読み込まれる --JSファイル読み込み完了後に内容が実行される --実行順序が保証されていない -defer属性｜遅延 <script src="script.js" defer></script> --非同期で読み込まれる --JSファイル読み込みが完了してもすぐには実行されない --HTML解析後にJSファイルが実行される --実行順序が保証されている ~ ~ ~