NotesNotesはじめにJavaScriptイベント変数クエリセレクタDOMの操作JavaScriptコンソールアロー関数TODOリストインターバルローカルストレージAPIJavaScriptオブジェクト為替レートはじめにこれまで、HTMLとCSSを使って簡単なWebページを構築する方法、GitとGitHubを使ってコードの変更を追跡し、他の人と共同作業する方法について説明してきました。Pythonプログラミング言語に慣れ、Djangoを使用してWebアプリケーションを作成し始め、Djangoモデルを使用してサイトに情報を保存する方法を学びました。本日は、新しいプログラミング言語であるJavaScriptを紹介します。JavaScriptまず、少し前のレッスンの図をもう1度見てみましょう。ほとんどのオンライン通信では、HTTP要求をサーバーに送信するクライアント/ユーザがあり、サーバーはHTTP応答を送り返します。これまでDjangoを使って作成したPythonコードはすべて、サーバー上で実行されています。JavaScriptを使用すると、クライアント側でコードを実行できます。実行中にサーバと通信する必要がないため、Webサイトをよりインタラクティブにすることができます。タグのペアを追加します。タグを使用して、2つのタグの間に記述するものはすべて、ユーザがサイトを訪れたときに実行したいJavaScriptコードであることをブラウザーに通知します。最初のプログラムは次のようになります。関数は、ユーザにメッセージを表示し、ユーザはそれを無視できます。これが実際のHTMLドキュメントのどこに収まるかを示すために、JavaScriptを使用した単純なページの例を示します。</body></html>イベントWebプログラミングに役立つJavaScriptの機能の1つは、イベント駆動型プログラミングをサポートしていることです。イベント駆動型プログラミングは、イベントの検出と、イベントが検出されたときに実行する必要があるアクションを中心としたプログラミングパラダイムです。イベントには、クリックされたボタン、移動されたカーソル、入力された応答、ロードされたページなど、ほとんどのものがあります。ユーザがWebページを操作するために行うことは、ほぼすべてイベントと考えることができます。JavaScriptでは、特定のイベントが発生するのを待ってからコードを実行するイベントリスナを使用します。いう関数に変換することから始めましょう。world!')}次に、ボタンがクリックされたときにこの関数を実行する方法について説明します。属性を持つHTMLボタンをページ内に作成します。この属性は、ボタンがクリックされたときに実行される処理をブラウザに指示します。Here</button>以上のように変更すると、JavaScriptのコードは、イベントが発生するまで、実行を待機します。変数JavaScriptはPythonやC、その他の言語と同じようなプログラミング言語であり、変数を含む他の言語と同じ機能を数多く備えています。JavaScriptで値を割り当てるために使用できるキーワードは3つあります。var:変数をグローバルに定義するために使用されます。20;let:関数やループなどの現在のブロックにスコープを制限する変数を定義するために使用されます。1;const:変更されない値を定義するために使用されます。3.14;変数の使い方の例として、カウンタを追跡するページを見てみましょう。</body></html>クエリセレクタJavaScriptを使用すると、警告を通じてメッセージを表示できるだけでなく、ページ上の要素を変更することもできます。いう関数を導入する必要があります。この関数は、DOMの要素を検索して戻します。document.querySelector('h1');見出しを抽出します。プロパティを変更します。利用することもできます。間を行ったり来たりしたいと思います。その場合、ページは次のようになります。使用して、より厳密に比較をします。</body></html>DOMの操作DOMの操作のアイデアを使って、カウンタページを改善してみましょう。</body></html>カウンタが10の倍数になるたびに警告を表示することで、このページをさらに面白くすることができます。この警告では、メッセージをカスタマイズするために文字列をフォーマットします。JavaScriptでは、テンプレートリテラルを使用します。あり、変数を置換したい箇所の前後に$と中括弧があることが必要です。count関数を変更します。}}では、このページのデザインを改善する方法をいくつか見てみましょう。CSSを使ったインライン・スタイル設定を避けようとしているのと同じように、可能な限りインラインJavaScriptを避けたいと考えています。関数の後に括弧を付けることによって、count関数を呼び出しているのではなく、単に関数の名前を付けていることです。これにより、ボタンがクリックされたときにのみこの関数を呼び出すように指定します。これが機能するのは、Pythonと同様にJavaScriptが関数型プログラミングをサポートしているため、関数を値そのものとして扱うことができるからです。上記の変更だけでは十分ではありません。ページを調べてブラウザのコンソールを見ると、次のように表示されます。使用して要素を検索したときに、何も見つからなかったためです。これは、ページのロードに少し時間がかかり、ボタンがレンダリングされる前にJavaScriptコードが実行されるためです。関数を使用して、ページがロードされた後にのみコードが実行されるように指定できます。この関数は、次の2つの引数を取ります。)関数を使用して、すべてのコンテンツがロードされた後にのみコードを実行できます。here});上の例では匿名関数を使用していますが、これは名前が与えられることのない関数です。これらをまとめると、JavaScriptは次のようになります。count;});設計を改善するもう1つの方法は、JavaScriptを別のファイルに移動することです。この方法は、スタイリング用にCSSを別のファイルに配置する方法と非常によく似ています。終わる別のファイルに記述します。いうファイルがあります。いうファイルがあります。count;});JavaScriptを別のファイルに保存すると、次のようないくつかの理由で便利です。ビジュアルな魅力:個々のHTMLファイルとJavaScriptファイルが読みやすくなります。HTMLファイル間のアクセス:複数のHTMLファイルから、同じJavaScriptを共有できます。コラボレーション:ある人がJavaScriptで作業し、別の人がHTMLで作業できるようになりました。インポート:他の人がすでに作成したJavaScriptライブラリーをインポートすることができます。Bootstrapには独自のJavaScriptライブラリがあり、サイトをよりインタラクティブにすることができます。インタラクティブなページの別の例を見てみましょう。以下では、ユーザが自分の名前を入力してカスタムグリーティングを取得できるページを作成します。フィールドを使用して、ページがロードされるとすぐにカーソルが入力フィールド内に移動するようにします。持つ要素を検索します。この関数では、CSSで使用可能なセレクタと同じセレクタをすべて使用できます。valueプロパティを使用して、現在入力されている内容を取得します。JavaScriptを使用してページにHTMLを追加するだけでなく、ページのスタイルを変更することもできます。次のページでは、ボタンを使用して見出しの色を変更します。data-color="green">Green</button></body></html>上のページでいくつかの注意事項があります。属性を使用して要素のスタイルを変更します。属性を使用して、HTML要素にデータを割り当てます。プロパティを使用してJavaScriptのデータにアクセスできます。関数は、別の関数を指定でき、その関数をリストまたは配列の各要素に適用します。JavaScriptコンソールコンソールは、小さなコードをテストしたり、デバッグしたりするのに便利なツールです。(正確な手順は、ブラウザーによって異なる可能性があります)。関数を使用して実行できるコンソールへの出力があります。ページでは、次の行を追加できます。console.log(document.querySelectorAll('button'));コンソールでは次のようになります。続き、その後に実行するコードが続きます。匿名のアロー関数を使用するように上記のスクリプトを変更できます。関数の書き換えのように、アローを使用する名前付き関数を使用することもできます。}}他にどんなイベントを利用できるか理解を深めるために、3つの個別のボタンの代わりにドロップダウンメニューを使用してカラースイッチャを実装する方法を見てみましょう。要素の変更を検出できます。JavaScriptでは、thisは使用されるコンテキストに基づいて変化するキーワードです。イベントをトリガしたオブジェクトを参照します。</body></html>JavaScriptで検出できるイベントは他にもたくさんあり、その中には以下のような一般的なものがあります。onclickonmouseoveronkeydownonkeyuponloadonblur...TODOリストこの講義で学んだことをまとめるために、完全にJavaScriptでTODOリストを作成してみましょう。ページのHTMLレイアウトを作成します。以下では、順序付けされていないリスト用のスペースを残していますが、まだ何も追加していません。リンクを追加しています。保存できるコードです。以下にいくつかの注意点を示します。このコードは、レッスンのコードとは少し異なります。