この記事は初心者の個人的解釈多めな備忘録です。
よって事実と誤っている場合も多々ある可能性がございます。
ご容赦いただけますと幸いです。
前回のJavascript勉強の続きです
大学時代の講義や基本情報試験等で
ある程度学習してきた内容でしたが、
あやふやなところもあるため、一から参考にさせていただきました。
参考動画
https://www.youtube.com/watch?v=QCjFPSO96RU
jsファイルを作成したところから基礎文法を学んでいきます。
javascript基礎文法
変数
変数は後から書き換えることができる。
let unko = "Hello World!"; //変数を宣言
unko = 'Hello World2!!'; //変数を上書き
console.log(unko); //コンソールに表示
htmlを開き、右クリック-検証(chrome環境)
consoleを確認すると上書きした内容が表示されている。
定数
後から変更できない値
文字列を変更したくないときに使う
const bigUnko = 'He..Hell...Hello World!!';
//二単語以上の名称の場合、大文字かアンダーバーで区切る
bigUnko = 'Hello World2!!'; //定数は後から変更できない
console.log(bigUnko); //コンソールに表示
通常
上書きしようとした場合エラーが出る。
※バージョンが古いjavascriptだと変数定数の宣言にはvarを用いていたが、今はletとconstで区別して書くのが主流。
配列
複数の文字列を入れて定義することができる。
let inoki = ['いーち','にーい','さーん','ダーー!！'];
console.log(inoki); //コンソールに表示
一つの値だけ取り出したい場合 [0]から[3]までを指定
console.log(inoki[1]); //コンソールに表示
ループ文
繰り返し処理を行う
命令は無限ループしないように記述する。
無限ループするとクラッシュの恐れがある。
let index = 0
while(index < 5){ //indexの値が5より小さい間命令を繰り返す
//繰り返したい命令
console.log(index);
index++; //indexを１ずつ加算
};
さきほどの配列を持ってきて条件指定することもできる。
let index = 0
while(index < inoki.length){ //indexがinokiの配列数より小さいと命令を繰り返す
//繰り返したい命令
console.log(inoki[index]);//inokiの文字列を指定して表示
index++; //indexを１ずつ加算
};
if/else文
if文
もしこうだったらこうする という命令で使える。
//配列
let inoki = ['いーち','にーい','さーん','ダーー!！'];
if(inoki.length > 3){
console.log('ボンバイエ!');
};
else文
でなければこうする
//配列
let inoki = ['いーち','にーい','さーん','ダーー!！'];
//if else
if(inoki.length > 5){ //inokiのlengthが5より上なら
console.log('ボンバイエ!');
} else {
console.log('ボンバ...!');
};
関数
1.同じ命令を何回も使いたいとき
2.任意のタイミングで命令を実行させたいとき に使う
const test = () => {
//ここに実行させたい命令を書く
}
test(); //ここのタイミングで実行される。
const test = () => の部分はひな形だと思って書く。
testは関数名で任意の名前にする。
=>はアロー関数というらしい。
命令を入れてみる。
const test = () => {
//ここに実行させたい命令を書く
if(inoki.length > 5){ //inokiのlengthが5より上なら
console.log('ボンバイエ!');
} else {
console.log('ボンバ...!');
}
};
test(); //ここのタイミングで実行される。
引数
関数の命令を一部だけ変えたいときに使う。
以下の内容の"5"を任意の値に変えたい。
const test = () => {
//ここに実行させたい命令を書く
if(inoki.length > 5){ //inokiのlengthが5より上なら
console.log('ボンバイエ!');
} else {
console.log('ボンバ...!');
}
};
test(); //ここのタイミングで実行される。
(arg)に値を入れられるようになる。
const test = (arg) => {
//ここに実行させたい命令を書く
if(inoki.length > arg){ //inokiのlengthがargより上なら
console.log('ボンバイエ!');
} else {
console.log('ボンバ...!');
}
};
test(3);//ここのタイミングで実行される。引数に3を入れる
inoki.length=(4)がarg=(3)より大きいのでボンバイエが表示される。
オブジェクト
変数や定数の派生。
//オブジェクト
const unko2 ={
color: 'pink',
size:'large',
purfume:'mint'
};
console.log(unko2);
オブジェクトの中のどのプロパティを参照するかを選ぶには
console.log(unko2.color);
オブジェクト内に関数を入れることもできる
//オブジェクト
//オブジェクト
const unko2 ={
color: 'pink',
size:'large',
purfume:'mint',
goToilet: () => {
console.log('Hello World!');
}
};
console.log(unko2.goToilet());
デフォルトで用意されているオブジェクト
windowオブジェクト
console.log(window);
Webブラウザ全体のオブジェクト
何かしらの値をとりたいときに使える
ウィンドウの高さや幅の値
スマホのウィンドウサイズになりそうだったら表示を切り替える というような条件に使える。
console.log(window.innerHeight); //ウィンドウの高さの値が分かる。
console.log(window.innerWidth); //ウィンドウの幅の値
警告を出せる。
エラー表示や動作確認等に使う。
window.alert('Hi');
Documentオブジェクト
console.log(document);
Webブラウザで表示しているページ全体をオブジェクトとしてとらえる。
ページやタグに対して何かしたいとき使う。
ボタンタグを表示してみる
console.log(document.getElementsByTagName('button'));
ボタンタグを指定して表示
console.log(document.getElementsByTagName('button')[0]);
イベント
ボタンをクリックしたとき、ブラウザをスクロールしたときのような
ユーザーがアクションしたタイミングで何かしたいときに使う。
ボタン[0]をクリックしたとき命令を実行してみる
//getElementsでボタンタグを取得し、addEventでボタンをclickしたとき命令を実行している。
document.getElementsByTagName('button')[0].addEventListener('click', () => {
//命令を書く
window.alert('Hello World');
});
Primaryボタンを押すとアラートが表示
コメントアウト
コードを保持しつつ、実行されないようにすることができる。
//コメントアウトされます
一括で複数行をコメントアウトしたいときは
ドラッグして選択、Ctrl＋/でコメントアウトできる。(VScodeで確認）
ちなみにhtmlでのコメントアウト
これもCtrl+/で一括コメントアウトできた。
<!--コメントアウトされます-->
ここまでで基礎文法終了！