【JavaScriptまとめ】勉強日記

勉強のアウトプット。学びながら随時更新。

画面出力

<script>
document.write('Hello JavaScript');
</script>

HTML5非推奨

documentはオブジェクト

witeはメソッド名、Hello JavaScriptはパラメータ

メソッド名+パラメータで、メソッド

実務では、innerHTMLを使用する。

要素オブジェクト.innerHTML = 変更する値;

外部ファイルの読み込み

<script src="ファイル名.js"></script>

コメントアウト

// 一行のコメントアウト

/*
  複数行のコメントアウト
*/

コンソールに出力

console.log('こんにちは');

★エスケープシーケンス

特殊な文字の入力

ダイアログ（警告・確認・入力）

警告ダイアログ

OKボタンのついた警告ダイアログボックスがでてくる。

window.alert('警告ダイアログにいれるテキスト);

windowは省略可

alert('警告ダイアログにいれるテキスト);

確認ダイアログ

OKとキャンセルボタンのついた確認ダイアログボックスがでてくる。

window.confirm('確認メッセージ');

confirm('確認メッセージ');

OKを押すとtrue

キャンセルを押すとfalse

入力ダイアログ

テキスト入力を促す入力ダイアログボックスがでてくる。

window.prompt('お名前を入力してください');

prompt('お名前を入力してください');

入力した名前をブラウザ上に表示

document.write(prompt('お名前を入力してください'));

算術演算子

変数の宣言

var message = 'こんにちは';

変数は、上書きすることが出来る

var message = 'こんにちは';

message = 'こんばんは';

データ型

• string　文字列
• number　数値
• boolean　真偽値（true/false）
• array　配列
• object　オブジェクト

文字列の結合演算子

文字列と変数などを同時に出力するときに、+（結合演算子）を使う。

条件分岐

var age = prompt('年齢を入力してください');
if (age >= 20) {
  // 年齢が20以上の時
  document.write('利用可能');
}

比較演算子

== 等しいときtrue

!=　異なるときtrue

===　データ型も含めて等しいときtrue

！==　データ型も含めて異なるときtrue

論理演算子

&&　どちらもtrueのときにtrue

||　どちらかがtrueのときにtrue

反復

while文

条件に一致する間、同じ処理を繰り返す。

繰り返す回数が決まっていない場合に使うことが多い。

for文

指定した回数、同じ処理を繰り返す。

繰り返す回数が決まっている場合に使うことが多い。

配列

var members = ['0番目', '1番目', '2番目', '3番目',];

Dateオブジェクト

Dateオブジェクトを使うには、インスタンス化（実体化）する必要がある。

独自関数

独自関数の登録

function 関数名(引数) {

  return 戻り値;
 
}

※引数を複数必要とする場合は、「,（半角カンマ）」で区切って指定する。

独自関数の呼び出し

関数名（引数）

一定の間隔で何らかの処理をする

setInterval();

一定間隔で処理を繰り返すメソッド

clearInterval();

タイマーを止めるメソッド

Stringオブジェクト

Stringオブジェクトのインスタンス化

var 変数名 = new String(オブジェクトとして扱いたい文字列);

Stringオブジェクトのプロパティやメソッド

Arrayオブジェクト

Arrayオブジェクトのインスタンス化

var 変数名 = new Array(値1,値2,値3,):

Arrayオブジェクトのプロパティやメソッド

Mathオブジェクト

計算に関する様々なプロパティやメソッドが使える。

Math.プロパティやメソッド;

Mathオブジェクトのプロパティやメソッド

0~10の乱数

var random = Math.floor(Math.random() * 11);

• random() 「0」~「1」のランダム数値を生成するメソッド
• floor 切り捨てするメソッド
• Math　計算に関する様々なプロパティやメソッドが使える。

★11のところを、lengh（配列の要素数を返すプロパティ）に変えれば、配列の数を上限にできる。

DOM

DOMとはDocument Object Modelの略。

HTMLやXML文書を取り扱うためのAPI。

要素を取得するメソッド

要素を操作するためには、document.getElementById()などで取得する。

要素内を変更するプロパティ

要素オブジェクト.innerHTML = 変更する値;

指定要素を空にすることもできる

””を代入することで、element要素の内容を空にすることも可能です。

要素オブジェクト.innerHTML = “”;

JavaScriptからCSSを追加

CSSはインラインスタイルとして追加される。

要素オブジェクト.style.CSSのプロパティ名 = CSSの値;

プロパティ名はキャメルケースで指定する

（Ex.「font-size」 → 「fontSize」）

classの操作

classの追加と削除

classList　（プロパティ）

要素オブジェクト.classList.add(class名);
要素オブジェクト.classList.remove(class名);
要素オブジェクト.classList.toggle(class名);

classを一括で設定したり取得したりする

className　（プロパティ）

要素オブジェクト.className = class名;

イベント

イベントは、addEventListener()で指定する。

要素オブジェクト.addEventListener(イベント名, function () {
// イベントが発生したときの処理
});

要素をクリックしたとき

click

マウスポインターをを要素の上に乗せたとき

mouseover

マウスポインターが要素の上から離れたとき

mouseout

スクロールさせたとき

scroll

送信ボタンが押された時

submit

PHP勉強日記

PHPも勉強しています。