Sheets)は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。CSSの書き方CSSは、HTMLファイル内に直接記述する方法、<style>タグ内に記述する方法、外部スタイルシートとして記述する方法の3種類があります。ここでは、外部スタイルシートを使う方法を紹介します。index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。style.cssファイルに以下のスタイルを追加します。それぞれのスタイルの詳細はコメントを見て下さい。*/}sanitize.cssについてsanitize.cssは、Webサイトやアプリケーションのスタイルをブラウザ間で一貫させるためのCSSフレームワークです。最新のブラウザ標準に準拠したスタイルの標準化を提供しています。sanitize.cssを使うことで、セキュリティやアクセシビリティのベストプラクティスを取り入れることができるでしょう。(GitHub)JavaScriptとの連携HTMLとCSSを使って基本的なウェブページを作成したら、JavaScriptを使ってページに動的な機能を追加する方法を学びます。JavaScriptの基本的な埋め込み方法JavaScriptは、<script>タグを使ってHTMLファイルに埋め込むことも、外部JavaScriptファイルを使うこともできます。外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。作成したscript.jsファイルに、以下のようなコードを追加します。s)をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。classListプロパティを使うCSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。CSSクラスを追加・削除する以下の例では、ボタンをクリックすると、toggleClass関数が呼び出され、div要素にactiveクラスが追加され、再度クリックすると削除されます。(sample)皆さんはトグルスイッチというものを見たことがありますか?上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態(オン/オフ)を切り替えることができるものです。setAttributeメソッドを使うsetAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。インラインスタイルを追加する以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。World」というメッセージを表示させなさい。World");documentオブジェクト概要:documentオブジェクトは、windowオブジェクトのプロパティの一つであり、現在のHTMLドキュメントの内容を保持しています。Model)の一部であり、HTMLドキュメントを操作するためのインターフェースを提供します。DOMは、HTMLドキュメントの構造をツリー構造として表現し、その各要素にアクセスして操作するためのAPIを提供します。するためのメソッドを提供します。ユーザーの操作(クリック、キーボード入力など)に対するイベントハンドラを設定できます。paragraph";document.body.appendChild(newParagraph);調べてみましょう講師と一緒に以下のコードを実行してブラウザのディベロッパーツールのコンソールを開いてみましょう。alert()などのメソッドやdocumentなどのプロパティが見えると思います。windowはオブジェクトだということの証拠です。documentを展開するとその中にもメソッドやプロパティが見えると思います。オブジェクトが入れ子になっている訳ですね。<p>これはサンプルのHTMLページです。Model)要素を選択するためのメソッドです。これらのメソッドは、CSSセレクタを使用して要素を選択します。querySelectorquerySelectorは、指定されたCSSセレクタに一致する最初の要素を返します。見つからない場合はnullを返します。</script></body></html>querySelectorAllquerySelectorAllは、指定されたCSSセレクタに一致するすべての要素を返します。(sample)返されるのはNodeListオブジェクトで、これには複数の要素が含まれます。NodeListは配列のように扱うことができますが、実際には配列ではありません。最初に一致する要素を一つだけ返す。見つからない場合はnullを返す。一致するすべての要素をNodeListとして返す。NodeListは配列のようにループ処理が可能。Sheets)は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。CSSの書き方CSSは、HTMLファイル内に直接記述する方法、<style>タグ内に記述する方法、外部スタイルシートとして記述する方法の3種類があります。ここでは、外部スタイルシートを使う方法を紹介します。index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。style.cssファイルに以下のスタイルを追加します。それぞれのスタイルの詳細はコメントを見て下さい。*/}sanitize.cssについてsanitize.cssは、Webサイトやアプリケーションのスタイルをブラウザ間で一貫させるためのCSSフレームワークです。最新のブラウザ標準に準拠したスタイルの標準化を提供しています。sanitize.cssを使うことで、セキュリティやアクセシビリティのベストプラクティスを取り入れることができるでしょう。(GitHub)JavaScriptとの連携HTMLとCSSを使って基本的なウェブページを作成したら、JavaScriptを使ってページに動的な機能を追加する方法を学びます。JavaScriptの基本的な埋め込み方法JavaScriptは、<script>タグを使ってHTMLファイルに埋め込むことも、外部JavaScriptファイルを使うこともできます。外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。作成したscript.jsファイルに、以下のようなコードを追加します。s)をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。本研修では、querySelectorやquerySelectorAllを使いますインターネットで検索するとgetElementByIdとgetElementsByClassNameなどの記述を目にすることがあると思います。これらは関数と呼ばれるものです。querySelectorやquerySelectorAllの方がより柔軟で、多くの場合便利です。本テキストでは、これらを推奨しています。特定の要素をIDで取得する場合など、シンプルな操作ではgetElementByIdがパフォーマンスの面で優れていることがあります。イベントハンドライベントハンドラとは、ユーザーの操作やシステムの動作(イベント)が発生した際に実行される処理を制御する(ハンドラ)仕組みのことです。HTML内で設定する場合、属性として記述され、特定のイベントに対して関数やコードを割り当てます。onclick属性は、要素がクリックされたときに実行される関数を指定します。イベントハンドラは、ユーザーインターフェースを動的にし、インタラクティブな操作を実現するために不可欠です。主なイベントには、クリック、キーボード入力、フォーム送信、ページ読み込みなどがあります。ユーザーのアクションに応じた反応をプログラムできます。イベントハンドラ属性の中で、特に頻繁に使用される主要なものを以下に紹介します。マウスイベントonclick:要素がクリックされたときに実行されます。onclick="alert('ボタンがクリックされました')">クリック</button>onmouseover:マウスが要素の上に乗ったときに実行されます。マウスオーバーで色が変わります</div>キーボードイベントonkeydown:キーが押されたときに実行されます。onkeydown="console.log('キーが押されました')">onkeyup:キーが放されたときに実行されます。onkeyup="console.log('キーが放されました')">フォームイベントonsubmit:フォームが送信されたときに実行されます。</form>onchange:入力フィールドの内容が変わったときに実行されます。onchange="console.log('入力が変更されました')">ウィンドウイベントonload:ページが読み込まれたときに実行されます。onload="alert('ページが読み込まれました')">onresize:ウィンドウのサイズが変更されたときに実行されます。onresize="console.log('ウィンドウのサイズが変更されました')">属性とは?HTMLの属性(attribute)は、HTML要素に追加情報を提供するために使用されるものです。属性は、要素の開始タグ内に記述され、属性名と属性値のペアで構成されます。属性を使うことで、要素にさまざまな設定やプロパティを適用することができます。属性値はダブルクオーテーションで囲みます。ここではJavaScriptとなじみが深いid属性とclass属性を紹介します。属性名="属性値">コンテンツ</要素名>id属性id属性は、要素に一意の識別子を指定します。id="header">これはヘッダーです</div>class属性class属性は、要素にクラス名を指定します。複数の要素に同じクラスを適用できます。class="text-primary">これは段落です</p>JavaScriptの基礎JavaScriptとはJavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザ上で動作します。この章では、JavaScriptの基本的な構文と概念を学びます。変数は、データを保存した場所にニックネームを付けたものです。JavaScriptでは、let、const、varの3種類のキーワードを使って変数を宣言します。'こんにちは、JavaScript!';console.log(message);let:ブロックスコープの変数を宣言します。変数はその名の通り値を書き換えることができます。const:定数を宣言します。定数はその名の通り一度値を設定すると変更できません。var:関数スコープの変数を宣言します。古い書き方ですが、まだ使われることがあります。'松田';console.log(pi);console.log(name);ローカル変数とグローバル変数JavaScriptにはローカル変数とグローバル変数があります。これらは変数のスコープ(有効範囲)によって区別されます。関数の外で宣言され、スクリプト全体で有効。複数のファイルで競合することもある。関数の内で宣言され、その関数内でのみ有効。以下は、グローバル変数とローカル変数の具体例です。ローカル変数にアクセス不可能varは使わないJavaScriptのvarキーワードは、古い変数宣言の方法として広く使われていましたが、現在は推奨されていません。varで宣言された変数は、関数スコープを持ち、ブロックスコープを無視します。これは、forループやifブロック内で宣言された変数が、ブロック外からもアクセスできることを意味します。varは同じ名前の変数を再宣言できるため、予期しないバグの原因となることがあります。このような理由から、最新のJavaScriptコードでは、ブロックスコープを持ち、再宣言を防ぐletや、定数宣言のためのconstの使用が推奨されています。varの使用は避け、より安全で予測可能なコードを書くためにletやconstを使うべきです。データ型JavaScriptにはいくつかのデータ型があります。主なデータ型は以下の通りです。")、またはバッククォート()のいずれでも囲むことができます。それぞれに特徴があり、使い分けが推奨されます。'):シンプルな文字列に使用されることが多い。HTMLやJSONの属性値にシングルクオートが含まれることが少ないため、エスケープの必要性が減る。"):シングルクオート同様にシンプルな文字列に使用される。シングルクォートを含む文字列をエスケープなしで使いたいときに便利。'World!'";バッククォート():テンプレートリテラルとして使用される。文字列中に変数や式を埋め込むことができる。console.log(doubleQuoteString);複数行の文字列も容易に扱える。これは複数行にわたる文字列です。複数行を簡単に記述できます。関数は、一連の処理をまとめて部品化し、特定のタスクを実行するためのものです。関数を使うことで、コードの再利用性を高めることができます。8関数とメソッドの違いJavaScriptの関数とメソッドはよく似ていますが、厳密には違います。JavaScriptの関数とメソッドには共通点もありますが、使い方や位置付けにいくつかの重要な違いがあります。この研修では特に呼び出し方の違いについて理解して下さい。オブジェクトのメソッドを呼び出すことは想定していますが、メソッドを作ることは想定していないからです。(対して関数は作ったり呼び出したりします。独立して定義され、どのオブジェクトにも属しません。オブジェクトのプロパティとして定義され、そのオブジェクトに属します。所属するオブジェクトを通して呼び出されます。使うことで、特定の条件に応じた処理を実行することができます。if文やswitch文が一般的です。console.log('成人です。console.log('未成年です。{...}:条件が真であれば、ifブロック内のコードが実行されます。なければ、elseブロック内のコードが実行されます。{...}:変数の値に応じて異なるケースを実行します。繰り返し繰り返し処理を使うことで、同じ操作を複数回実行することができます。for文やwhile文が一般的です。{...}:初期化ステートメントが1回実行され、条件が真である間、更新ステートメントが実行されるたびにループ内のコードが繰り返されます。{...}:条件が真である間、ループ内のコードが繰り返されます。配列は、複数のデータを一つの変数に格納するためのデータ構造です。配列の各要素には、インデックスを使ってアクセスできます。インデックスは1からではなく、0から始まる点は初学者が間違いやすいところです。最後の要素を削除console.log(fruits);実践・JavaScript確認用メッセージを使うJavaScriptでは、ユーザーに確認を求めるメッセージを表示することができます。これは、ユーザーが操作を継続するかどうかを確かめるのに使います。関数を使って、シンプルなメッセージを表示することができます。(sample)alert('こんにちは、JavaScript!');このコードを実行すると、ポップアップウィンドウが表示され、メッセージが表示されます。関数を使って、ユーザーに確認を求めることができます。この関数は、ユーザーが「OK」または「キャンセル」をクリックしたかどうかを判定します。console.log('操作が確認されました。console.log('操作がキャンセルされました。');}windowオブジェクトの記述は省略できるちなみに、これらの確認用メッセージはwindowオブジェクトのメソッドです。そのため、本来は以下のようにwindow.に続けてメソッド名を記述します。window.alert('こんにちは、JavaScript!');しかし、windowオブジェクトは唯一省略可能なオブジェクト名なので、ここでは省略しています。JavaScriptでスタイルを指定する方法JavaScriptを使って、動的にHTML要素のスタイルを変更することができます。ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更することが可能です。以下では、JavaScriptでスタイルを指定する基本的な方法を紹介します。styleプロパティを使うJavaScriptで特定の要素のスタイルを変更する最も直接的な方法は、要素のstyleプロパティを使用することです。要素の背景色を変更する以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。</script></body></html>CSSのプロパティ名はキャメルケースになるJavaScriptでは、変数名やプロパティ名にハイフン(-)を使用することができません。ハイフンがJavaScriptの文法上、マイナス記号として解釈されるためです。CSSプロパティ名のようにハイフンを含む名前をJavaScriptで使用する場合、キャメルケース(camelCase)に変換する必要があります。キャメルケース(camelCase)のルール最初の単語は全て小文字で始める。それ以降の単語の先頭文字を大文字にする。ハイフンやスペースなどの区切り文字を使わない。英語の【camel】にはラクダという意味があり、ラクダのコブのように見えることからこの名前があります。