JavaScript

console.log(i + '枚')

Pythonのような感じで変数と文字列を連結可 

console.dir()

console.error()

クラス.メソッド

 

<script>

'user strict';

</script>

 

<script>タグは<head>~</head>内や<body>~</body>内に

'user strict'は互換性を保ち新しいJavaScriptを実行するモード

 

JavaScriptのファイルを読み込む

<script src="JavaScriptのファイル名"></script>

src属性(sourseの略)を追加してファイルへのパスを指定する。相対パスで指定する場合はHTMLファイルからのパス。

 

ファイルの文字コードは必ずUTF-8

 

window.alert()

アラートダイアログボックスを表示する

window.confirm()

確認ダイアログボックスを表示する。選択によりtrueかfalseの戻り値を返す。

window.prompt()

プロンプトを表示する(入力フォーム)。入力内容を戻り値として返す。入力内容は文字列として扱われる。

 

document.getElementById('id名')

特定のid名を持つ要素を取得する

 

document.getElementById('id名').textContent = 書き換えたい文字列;

取得した要素のコンテンツを書き換える

textContentはプロパティ。オブジェクトの状態を表す。

メソッドはオブジェクトに指示をする

 

textContentはElementオブジェクトに用意されているメソッド

 

取得した要素.insertAdjacentHTML('挿入する場所', 挿入する要素)

'beforebegin'

'afterbegin'

'beforeend'

'afterend'

(p136 挿入される場所見取り図)

 

new Date()

現在の日時を取得する

new Date().getHours()

24時間時計で取得する

 

let 変数名

変更可能な変数の宣言。

const 変数名

変更不可な定数の宣言

 

比較演算子

===はデータ型を変換しないで左右を比べる

==はデータ型を変換してできるだけ評価結果がtrueになるようにする

==は何をもって同じとするかの判断基準を正確に把握していないと予期せぬ不具合を起こすので非推奨

!==

<
<=

>
>=

&&

||

!

 

 

parseInt(変換したい文字列)

文字列を整数に変換する

 

Math.floor(Math.random() * 生成する上限+1の数)

ランダムな整数を生成

 

function ファンクション名(パラメータ) {

      加工

  return 

}

 

let 配列の変数名 = ['1', ''2];

配列の宣言

 

配列の変数名.push(末尾に追加したいデータ)

配列の変数名.pop()←末尾を削除

配列の変数名.unshift(先頭に追加したいデータ)

配列の変数名.shift←先頭を削除

 

for (let 繰り返しに使う変数名 of 読み取る配列名)

 

const li = `<li>${item}</li>`;

テンプレートリテラル。${}内に変数や関数を埋め込める。

 

``で挟めば途中で改行できる

 

let オブジェクト名 = {title: 'JavaScript入門', price: 2500}

オブジェクト名.titleで参照(オブジェクト名['プロパティ名'])。メンバのように使える。ファンクションも保存できる。javaのメンバとメソッドの関係みたいだね。

 

for (let p int オブジェクト名) {

    console.log(p + '=' + オブジェクト名[p])

}

pでプロパティを読み取る、オブジェクト名[p]でデータを読み取る。ただしオブジェクトは登録順に読み取れないときがある、順序に無頓着。

 

<form action="#" id="form">
#の意味は現在のページへデータを送る

 

document.querySelectorAll('CSSセレクタ')

要素をすべて取得

 

配列.forEach(function(item, index) {

});

配列の各項目に繰り返し処理