JavaScriptの勉強03【条件文・関数・イベント】

勉強シリーズ。
基礎の基礎を知る。

前回の記事 micche-labo.hatenablog.com

今回は巷でよく見る条件文。 このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！ 玄人の方はどうぞ温かい目で見守っていてください。 なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

条件文の使い方

if()で条件を立てる。
はじめのブロックにはtrueのときの処理、elseのあとにはfalseのときの処理を書く。

例1

let name = 'みっちぇ';
if(name === 'みっちぇ') {
  alert('私の名前はみっちぇです！');
} else {
  alert('私の名前はみっちぇじゃありません');
}

上記の例ではif(name === 'みっちぇ'){…は、trueとなるので、最初の処理が実行される。

条件文が正しい(=true)とき

正しい時ははじめの文が表示

例2

let name = 'みっちぇ';
if(name === 'はなこ') {
  alert('私の名前はみっちぇです！');
} else {
  alert('私の名前はみっちぇじゃありません');
}

条件が違う時（false）

falseの時はelseのあとの処理が実行される

とりあえず条件文の形、

if(変数 === 'hoge') {
 関数('true');
 } else {
 関数('false');
}

という形を覚えようと思う。 (===は!==もいれれる)

メモ
;は関数('なになに')の後にのみ必要。
if(変数 === 'ほにゃらら')のあとにはつけない。

関数

便利機能。 前回からでてきている、document.querySelectorや、さっき条件文で使用したalertも関数。

見分け方は、

もし変数名に見えるものがあったとしても、その後に括弧 () が付いていれば、おそらくそれは関数です。
MDN|Javascriptの基本より引用

とあるので、これを参考にしようと思う。

関数は自分で定義可能

MDNのサイトでは簡単な乗算の関数を作るようになっていたが、よく「ほにゃららは何歳」みたいなサンプルを見るのでそれを作ってみた。

自分で作った関数を呼び出してみる

let name = 'みっちぇ' ; // letで変数に名前をいれる
function myProfile(name,age) { // myProfileという関数をつくる
let resulte = name + 'は' + age + '才です'; // +でくっつける
return resulte;
}
myProfile(name,28); // 呼び出し

計算じゃない関数も作れた！👏

関数まとめ

SCSSでも、@functionで少し触れたが、忘れてしまっていたのできちんとjavascriptの形で知ることができてよかった。

イベント

これがなきゃはじまらない！
webサイトとjavascriptを連携させて、javascriptでhtmlを操作！！

document.querySelector('h1').onclick = function() {
    alert('見出しをクリックしました！');
}

h1をクリックすると、アラートでカッコ内の文章が表示される。

以下挙動の画像。

クリックイベントを定義

クリックイベントで、見出しをクリックするとアラートがでるようになった

なお、今までみてきた形と違うので困惑するが、

document.querySelector('h1').onclick = function() {};

は

let myHTML = document.querySelector('h1');
myHTML.onclick = function() {};

と同じである。 let 変数名の部分を省略し記述。すっきり見えて良いですな。

まとめ

条件文・関数・イベントと今回の記事でまた基礎を知り得た。 ここから先は実際にMDNのサイトに沿って、webページに実践していこうと思う。

javascriptの基礎を知りえたおかげで、今までよりもコードの中身が読めるようになった気がする。

少しずつではあるが、明日も引き続き、勉強して、少しでも理解を深めたいと思う。