loadイベントとは？ ページ全体が、全ての依存するリソースを含めて読み込まれた時に発生するイベント。(CSSや画像を含む) 構文 obj.onload = function() { 実行する処理 }

変更したら実行 change 構文 要素オブジェクト.addEventListener('change', 実行する処理, false); 要素オブジェクトが変更したら実行する処理が実行される。

イベントハンドラの削除 removeEventHander 構文 要素オブジェクト.removeEventListener(イベントの種類, 削除したいイベントハンドラ, false); 例 ボタンをHTMLで準備しておき、押した際にHellow Worldをコンソールに表示のイベントハンドラを削除 const sa…

イベントハンドラの登録 addEventListener 構文 要素オブジェクト.addEventListener(イベントの種類, 実行する処理, false); 例 ボタンをHTMLで準備しておき、押した際にHellow Worldをコンソールに表示 const sayHelloWorldButton = document.getElementByI…

DOM操作 idで要素の取得 let 変数 = document.getElementById('id名'); タグ名で要素の取得 let 変数 = document.getElementsByTagName('タグ名'); name属性で要素の取得 let 変数 = document.getElementsByName(’name名'); クラス名で要素の取得 let 変数 =…

DOMとは? Document Object Model JavaScriptのプログラムから、ウェブページにアクセスしてページを操作、利用することを可能にする仕組み DOMツリーとは? HTMLドキュメントをツリー構造として表現 ノードとは? DOMツリーを形成する一つ一つのオブジェクト W…

繰り返し処理 for of 構文 for(変数 of 配列、文字列) { 実行する処理 } 例 const colors = ['Red', 'Yellow', 'Blue']; for(const color of colors) { console.log(color); } #=> "Red" "Yellow" "Blue" 例2 const str = 'JavaScript'; for(const value of …

繰り返し処理 forEach 構文 配列名.forEach(コールバック関数(要素の値) { 実行する処理 }); 例 let colors = ['Red', 'Yellow', 'Blue']; colors.forEach(function(color) { console.log(color); }); #=> "Red" "Yellow" "Blue"

whileとdo whileの違いとは? while 条件の判断を前で行う。 条件によっては1度も繰り返さない。 do while 条件の判断を後で行う。 条件に関わらず、最低1回は繰り返しを実行。

繰り返し処理 do while 構文 do { 条件式がtrueの時に、実行する処理 } while(条件式); 例 let i =1; do { console.log(i); i++; } while(i <= 3); #=> 1 2 3

繰り返し処理 while 構文 while (条件式) { 条件式がtrueの時に、実行する処理 } 例 let i = 1; while(i <= 3) { console.log(i); i++; } #=> 1 2 3

繰り返し処理 for 構文 for(初期化式; ループ継続条件式; 増減式) { 繰り返し実行する処理 } 例 for(let i = 1; i <= 3; i++) { console.log(i); } #=> 1 2 3 例2 let arr = ['a', 'b', 'c']; for(let i = 0; i < arr.length; i++) { console.log(arr[i]); ]…

オブジェクトメソッド使い方 構文 let 変数 = { メソッド名: function(引数){ 処理内容 } } 例 let user = { birthYear: 2000, calcAge: function(year) { return year - this.birthYear; } } console.log(user.calcAge(2021)); #=> 21

オブジェクトとは？ 関連のあるデータと機能の集合 構成要素 変数(プロパティ) 関数(メソッド) オブジェクトの作り方、使い方 例 オブジェクトの作り方 let user = new Object(); user.name = 'sai'; user.birthplace = 'japan'; console.log(user); #=> { b…

配列操作 末尾を削除 pop 構文 配列.pop(); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors.pop(); console.log(colors); #=>["Red", "Yellow"]

配列操作 末尾を削除 pop 構文 配列.pop(); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors.pop(); console.log(colors); #=>["Red", "Yellow"]

配列操作 先頭を削除 shift 構文 配列.shift(); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors.shift(); console.log(colors); #=>["Yellow", "Blue"]

配列操作 結合 concat 構文 配列1.concat(配列2); 例 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let mergedArr = arr1.concat(arr2); console.log(mergedArr); #=>[1, 2, 3, 4, 5, 6]

配列操作 指定した位置から削除 splice 構文 変数名.splice(配列を変更する開始位置のインデックス, 配列を変更する開始位置のインデックスから取り除く古い要素の数の整数); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "…

配列操作 指定した位置に値を挿入 splice 構文 変数名.splice(配列を変更する開始位置のインデックス, 配列を変更する開始位置のインデックスから取り除く古い要素の数の整数, 配列を変更する開始位置のインデックスから追加する値1, 配列を変更する開始位置…

配列操作 更新 配列値変更 構文 変数名[インデックス] = 値; 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors[0] = 'Aka'; console.log(colors); #=>["Aka", "Yellow", "Blue"]

配列操作 先頭に追加 unshift 構文 配列.unshift(値); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors.unshift('Black'); console.log(colors); #=>["Black", "Red", "Yellow", "Blue"]

配列を操作 末尾に追加 pushを使用 構文 配列.push(値); 例 let colors = ['Red', 'Yellow', 'Blue']; console.log(colors); #=>["Red", "Yellow", "Blue"] colors.push('Green'); console.log(colors); #=>["Red", "Yellow", "Blue", "Green"]

コールバック関数とは？ 他の関数から呼ばれる関数。 〇〇が完了したら、△△を実行。 例 5秒経過したらコンソールに「タイムアウト」と表示。 const displayMessage = function() { console.log('タイムアウト'); } setTimeout(displayMessage, 5000); #=> タ…

関数(function)の書き方 引数はなしでも可 function命令(関数宣言) 構文 function 関数名(引数１,引数２, …) { // 実行処理; return 戻り値; } 呼び出し方 関数名(引数１,引数２,…); 例 合計の関数 console.logで出力 function sum(arg1, arg2) { return arg…

nullとundefinedの違い null 変数は定義されている。該当する値が存在しない。 let x = null; console.log(x); #=> null undefined 未定義。変数は宣言したが値が代入されていない。 let x; console.log(x); #=> undefined

比較演算子 == と === の違い ==は同じであるか型変換等をして抽象的に値を判定する。String '10'とInteger 10がtrueになる。 let str = '10'; let int = 10; if(str == int) { console.log(true); } else { console.log(false); } #=> true ===は型も同じで…

型変換 数値型にする Number console.log(Number('2000')); #=> 2000 変換できないものはNaNが返る console.log(Number('You')); #=> NaN 文字列型にする String console.log(String(20)); #=> 20 結合の注意点 文字列 + 文字列 = 文字列 文字列 + 数値 = 文…

変数に入れた文字列を結合 テンプレートリテラル時に ` ( バッククォーテーション)を使うので注意 +で結合 let lastName = '姓’; let firstName = '名前'; let greeting1 = 'おはよう！ ' + lastName + ' ' + firstName + ' ' + 'さん'; console.log(greetin…

データ型とは？ undefined, Boolean, Number, String, BigInt, Symbol, Object, Function, null等の値の型のこと データ型を調べる typeof演算子で調べることができる JavaScriptは他の言語の浮動小数点型(Float型)と整数型(Integer型)がNumber型として扱わ…