javascriptとは
ざっくり言うと、ユーザーからアクション等の「動き」のあるものを作れるプログラミング言語
javascriptの書き方
方法1_HTML内にて、<script><\script>タグで囲んだ中にプログラムを書き込む。
<body>
<script>
console.log('test');
</script>
</body>
//F12で開ける開発者モード内のコンソールタブのログにtestと表示される。
方法2_HTML内にて、.jsファイルを外部ファイルとして読み込む方法
<body>
<script src="./test.js"></script>
</body>
console.log()の使い方
F12で開ける開発者モード内のコンソールタブのログに文字を表示できる関数
変数の受け渡しが正しくできるか等、プログラミング中のデバッグによく使える。
console.log('test');
//コンソールにtestと表示。
算術演算子、代入演算子、比較演算子
他言語と同じなので下記サイト参考に。
※参考サイト
alert関数
任意のテキストメッセージをポップアップウィンドウで表示する。
数値同士の計算及び変数の使用可能。
$x = 2;
alert(1 + $x + 'testの文字です。');
//出力結果
//3testの文字です。
変数の宣言、定数
型には下記の２種類が存在する。
〇プリミティブ型
数値
長整数
文字列
論理値
undefined
null
シンボル
〇オブジェクト型
上記のプリミティブ型以外は全てオブジェクト型となる。下記は例
Object(オブジェクト)
Array(配列)
Function(関数)
StringやNumberなどのラッパーオブジェクト
Date(日時)
RegExp(正規表現)
JSON
オブジェクトは配列と似ており、箱と箱の中身が存在するイメージ。ただし、配列で使うインデックス番号がなく、順番が存在しない。箱の中に入っている中身すなわち内容物のことを「プロパティ（property）」と呼びます。また、プロパティは、名前（key）と値（value）で構成されています。
const オブジェクト名 = {
key01: 'value01',
key02: 'value02',
key03: 'value03'
};
ローカル変数、グローバル変数、定数
〇変数_let、var
・let：ブロックスコープなので、ローカル変数として使える。
・var：一番影響範囲が広い変数。再宣言・再代入・関数スコープ・繰り返し構文に使用可能と自由度が高いので安易に使うとエラーの原因となりやすい。
〇定数_const
変数前にconstをつけて宣言すると、定数(中身の変わらない事が保証されている特殊な変数)となる。
※エラー表示について
定数は再代入できないため、下記のようなエラーがでる。
const hoge = '定数です。';
hoge = '再代入します。';
console.log(hoge);
Uncaught TypeError: Assignment to constant variable.
スコープとは？
スコープとは、宣言した変数を利用できる範囲の事。
〇ブロックスコープ
ブロック（ { } ）内でのみ利用できるということ。
letやconstのようなローカル変数は宣言されたブロック内でしか使えない。
〇関数スコープ
関数内で定義された変数。関数外から参照すると未定義などのエラーとなる。
let、var、constを使用しないで変数宣言した場合
グローバル変数といい、どこからでも参照できてしまう。一見便利に見えるが、他の関数で偶々同じ変数名を使ってしまった場合などエラーの原因になりやすいため、使用は最低限にすべき。要注意。
※参考サイト
自作関数
自身で関数を定義し使うことができる。
〇構文
//定義
function 関数名(引数){
実行したい処理
return 戻り値;
}
//実行
関数名(引数);
DOMとは
「HTML、マークアップ言語、CSS等」をjavascript等のプログラミング言語からアクセスできるようにするためのAPIの事を指す。DOM自体は特定の言語に依存しない設計で、Pythonなどからも操作可。DOM操作をする事で、ユーザーからのアクションに応じて新たな要素を追加するといった動的に内容を変更できる。
※参考サイト
DOM操作
※参考サイト
基本的な要素の取得方法
HTMLなどドキュメントはオブジェクトとして扱われている。ドキュメントを構成するオブジェクトの事をノードを呼ぶ。全てのノードは親および子といったように階層構造になっている。ノードはさらに種類に応じて「要素ノード、テキストノード、属性ノード」などに分類されます。例えば下記のように、document.要素といったように記述する事でアクセスできる。
// html要素を取得
const html = document.documentElement;
// head要素を取得
const head = document.head;
// body要素を取得
const body = document.body;
※参考サイト
https://zenn.dev/hinoshin/articles/f47bf07c57b261
https://www.javadrive.jp/javascript/dom/index1.html
id属性で検索
getElementByidは、引数のid属性を持つ要素ノードを検索する機能。idで取得した場合、最初から1つ目の要素のみ取得されるため要注意。取得した要素は変数にいれる等で使用できる。
//id属性：test_buttonを持つ要素を取得し、定数buttonに代入
const button = document.getElementById('test_button');
class属性で検索
getElementsByClassNameは、引数のclass属性を持つ要素ノードを検索する機能。idとは違い、複数要素取得できるため、配列として取得される点には要注意。
//class属性：test_classを持つ要素を取得
document.getElementsByClassName('test_class');
テキストノードの取得及び変更
要素.textcontentでテキストノードを指定可能。
<body>
<p id="test_id">testです</p>
<script>
const test = document.getElementById('test_id');//idで取得
console.log(test.textContent);//テキストノードの取得と表示
test.textContent = `新しい文書です。`;//テキストの変更
console.log(test.textContent);//変更後のテキストを再度表示
</script>
</body>