中井千尋/通信ネットワーク演習

中井千尋

通信ネットワーク演習

演習

最終成果物

タイトル・公開URLの記入

タイトル

https://www.example.com/

サイトの趣旨

これはどんなサイトか・・を簡潔に

技法・技術情報

サイトで用いている技術や文法事項について記入

• 例）条件分岐（if/else）
• 例）イベント（click）
  
  

先行事例・参考情報

先行事例の紹介、参考サイトなど

リンク

公開リポジトリ

• GitHub：https : // github.com/johnsmith
  ※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。

• javascript_blank：https://n-chr.github.io/javascript_blank/
• javascript_color：https://n-chr.github.io/javascript_color/
• javascript_loading：https://n-chr.github.io/javascript_loading/
• javascript_change_a：https://n-chr.github.io/javascript_change_a/
• javascript_change_b：https://n-chr.github.io/javascript_change_b/

メモ

• visual studio code ショートカットキー
  • option+shift+f　自動で揃えてくれる
    
    

IDやClass名の付け方

ID名やClass名の命名にはよく使われる規則がある。統一することが大切。
camelCase（キャメルケース）：小文字から初めて、続く単語は大文字。JavaScriptの関数名などに使われる。
PascalCase（パスカルケース）：冒頭と、続く単語の先頭を大文字にする。
chain-case（チェインケース）：ハイフンでつなぐ。HTML・CSSのID・class名などに使われる。
snake_case（スネークケース）：アンダースコアでつなぐ。Pythonなどに使われる。

データ型

プログラムで扱うデータにはいくつかの種類があり、その種類のことを「データ型」という。

データ型の例
同じ数字であっても
a = 1;と書くと「数値（Number）」として処理され
a = "1";と書くと「数値」ではなく「文字列（String）」になる。

演算子

1. や = などの記号を演算子といい、値をものに何らの処理を行い、その結果を返す。
   数値の計算に使う演算子は、算術演算子と呼ばれ、次のようなものがある。

   +	加算（足し算）
   –	減算（引き算）
   *	乗算（かけ算）
   /	除算（割り算）
   %	剰余（割り算したときの余り）
   **	べき乗（3**2と書くと、3の2乗）
   ++	1を加算（インクリメント演算子）
   —	1を減算（デクリメント演算子）

   
   
   算術演算子
   【補足】等価（==）と厳格な等価（===）
   ==と===はどちらも「値が等しいかどうか」を比較する方法ですが、イコールが3個の===の方がより「厳格」。
   ===を使った方が、より正確に比較ができますので、同じ値かどうかを比較したいときには、基本的には===を使う方がわかりやすい。

HTML上でセレクタ（idやclass）を設定する

JavaScriptでHTMLを操作するには、まずは操作したい部分に対して、idやclassを設定します。ページ内で1箇所しか出てこない部分（唯一の存在）にはid、複数回登場する要素に対しては、classを設定するのが基本の使い方です。
なお、1箇所しかない場合でも、classを使うことも可能です。

▼HTMLの記載例

div id="id-name">

 <img src="images/img01.png" alt="" class="class-name">
 <img src="images/img02.png" alt="" class="class-name">
 <img src="images/img03.png" alt="" class="class-name">

/div>
HTML内で設定したセレクタ（idやclass）を呼び出す

大きく分けて、getElement(s)by〜を使う方法と、querySelectorを使う方法があります。

▼idを呼び出すとき

document.getElementByID('ID名');
▼classを呼び出すとき

document.getElementsByClassName('クラス名')
▼id・classどちらにも使える

document.querySelector('セレクタ名');
document.querySelectorAll('セレクタ名');
Allの方は、ページ内に複数あるセレクタ（class）をまとめて取得するときに使います。配列風オブジェクトに格納されます。

▼使い方（id="id-name"の場合）

document.getElementByID('id-name');

document.querySelector('#id-name');
getElementByIDを使うときは、初めから「id」を取得していることを明示しているので「#」がつきません。querySelectorのときは、idだけでなくclassも使えるため「#」を付けて区別しています。

▼使い方（class="class-name"の場合）

document.getElementsByclass('class-name');

document.querySelectorAll('.class-name');
classはidと異なり、一つのページ内に複数回登場する可能性があるセレクタです。そのため、複数形になっています。こちらも、querySelectorを使うときは、頭に「.」がついています。

DOM（Document Object Model）

JavaScriptで、HTMLを操作するという仕組みは、HTMLそのものを書き換えているのではなく、実際には「DOM」と呼ばれるものを操作しています。

DOMとは、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現のことです。HTMLをツリー構造に分解して構築することで、JavaScriptで操作できるようになります。

プログラムを動作させる〜イベント

操作したいセレクタを指定したあとは、何をきっかけにプログラムを動かすかを決めます。それが、イベントです。

▼基本の使い方
対象.addEventListener('イベント名', 動作内容・関数名);
イベントの種類
イベントには様々な種類があります。下記は一例です。
▼キーボードに関するイベント
input：入力されたとき
submit：フォームが送信されるとき
▼マウス操作に関わるイベント
click：クリックされたとき
mouseover：マウスカーソルが重なったとき
mouseout：マウスカーソルが離れたとき
▼カット・コピー・ペーストなどに関わるイベント
copy：コピーされたとき
paste：ペーストされたとき
cut：カットされたとき
▼フォーカスに関わるイベント
focus：フォーカスされたとき
blur：フォーカスがはずれたとき
▼スクロールや画面タッチに関わるイベント
scroll：画面がスクロールされたとき
touchstart：タッチ入力が開始されたとき
touchmove：タッチ操作が連続しているとき
touchend：タッチ入力が終了したとき
▼画面（window）に関わるイベント
load：読み込みが完了したとき
resize：画面サイズが変わったとき
・・・など

【補足】クラス名を追加・削除する
▼追加するとき
要素.classList.add('クラス名');
▼削除するとき
要素.classList.remove('クラス名');
▼複数指定することも可能です
要素.classList.add('クラス名1', 'クラス名2');
要素.classList.remove('クラス名1', 'クラス名2');

ボタンを設置するには

input type="button">を使う方法もある。
button要素は開始タグと終了タグから成り立つため、画像を間に挟むこともでき、CSSでの設定もinputよりも柔軟に行える。
HTMLのbody要素にclass="black"を適用し、背景色と文字色が変わることを確認します。確認ができたら、HTMLからclassを削除する。

▼index.html

body class="black">
クリックイベントを使い、クラス名を切り替える仕組みを作ります。

▼script.js
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {

 document.body.classList.toggle('black');

});
classList.toggleは、クラスを付け外しするのに使う方法。指定した要素にクラス名がついていなければ追加、ついていれば削除をする。
要素.classList.toggle('クラス名');

【補足】:root
:rootは、CSS の擬似クラスで、文書のルート要素（基点となるところ）を選択します。 HTML では :root は <html> 要素のこと。
【補足】CSS カスタムプロパティ（変数）
文書全体で再利用可能な設定をする方法。よく使われるのは、色を定義しておき、同じ文書内で繰り返し使う方法。
下記の例では、–main-bg-colorとして、red を定義している。呼び出すときは、var()関数を使う。
:root {

 --main-bg-color: red;

}
body {

 background-color: var(--main-bg-color);

}

【補足】データ属性
:rootに設定している[data-theme]は、データ属性と呼ばれる書き方です。「data-○○ 」という形式で記述し、○○の部分を自分で決めることができます。JavaScriptやCSSを使って取り出すことができる。
:root[data-theme=”color-a”] という記述は、HTML上で、<html lang=”ja” data-theme=”color-a”>と指定されている状態を表している。