はじめに

この記事はJavaScript入門を目的としたハンズオンの資料となります。
本記事ではJavaScriptとHTML・CSSを組み合わせた実用的な部分の入門となるよう書くため、HTML・CSS及びJavaScriptの基本的な部分は解説しません。JavaScriptの文法や機能はJavaScript Primer、HTML・CSSはHTML, CSSを見て頂ければと思います。

環境

最新のGoogle chrome
テキストエディタ(メモ帳でないのが望ましい)
Windows

でのコーディング及び実行を想定しています。

基本の雛型

HTMLファイル上に記述する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world!</title>
  </head>
  <body>
    <p>Hello world!</p>
    <script type="text/javascript">
      // ここにJavaScriptを書きます
    </script>
  </body>
</html>

<script>はbody内の一番最後に記述します。

ファイルを分ける

htmlファイルとjsファイルを分けて記述することが出来ます。本記事ではファイルを分けてコーディングします。

project_directory
    |
    +- index.html
    +- style.css
    +- index.js
    +- images
        |
        +- hoge.png
        +- fuga.png
        +- piyo.png

以上のようなディレクトリ構造を想定した場合、

<body>
  <script type="text/javascript" src="index.js"></script>
</body>

とHTMLファイル上に記述するのと同様、body内の一番最後に記述します。

イベント

以下、

project
    |
    +- index.html
    +- style.css
    +- index.js

というディレクトリであることを前提に進めていきます。

ボタンを押してメソッド発火

まずはボタンを押すと、Hello Worldとアラートされるプログラムをつくります。

<button onclick="alert('Hello World')">ボタン</button>

これでも望む動作をしますが、この後のセクションにスムーズに入るために、別にメソッドを用意して動かしたいと思います。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <input type="button" value="ボタン" onclick="helloWorld()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const helloWorld = function(){
    window.alert("Hello World");
}

このように記述して実行してみましょう。ボタンを押すとHello Worldとアラートされるはずです。

use strict
無名関数
input

onload

ロードが終わったタイミングや特定のDOMが構成し終わったタイミングでメソッドを発火させたいことがあるかもしれません。そういう時はonloadを使いましょう。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p>こんにちわ</p>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
window.onload = function(){
    setTimeout(()=>window.alert("DOMが構成された"), 1000);
}

setTimeoutにより、DOMが構成された1秒後にアラートが出ます。……ちょっとわかりにくいですね。

window.onload
setTimeout

取得

ページ内の要素を取得

HTML内の要素を取得してみましょう。
DOM内にあるｐタグの数を取得してみます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <input type="button" value="get_p_num" onclick="tagGetFunc()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const tagGetFunc = function(){
    const pNum = document.getElementsByTagName("p");
    window.alert(pNum.length);
}

実行してみましょう。3と出たはずです。これは全体の<p>タグの数です。

また、idやclass、nameでも指定して取得できます。
が、ここではidのみ例を載せます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p id="hoge">こんにちわ</p>
        <input type="button" value="Hello" onclick="helloWorld()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const helloWorld = function(){
    const hoge = document.getElementById("hoge");
    window.alert(hoge.textContent);
}

テキストボックスからの取得

次はボタンを押すと、テキストボックスに入力した文字のアラートが出るコードを書きます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <input type="text" id="data"><input type="button" value="ボタン" onclick="helloWorld()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const textData = document.getElementById("data");
const helloWorld = function(){
    window.alert(textData.value);
}

テキストボックスに文字を入力してボタンを押すと、入力した文字がアラートで出たと思います。

inputの属性

制御

ページ内の要素を書き換え

JavaScriptではHTML要素をイジることが出来ます。
ボタンを押したらHTML上の<p id="hoge"></p>内を書き換えるコードを書いてみましょう。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p id="hoge">こんにちわ</p>
        <input type="button" value="English" onclick="helloWorld()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const helloWorld = function(){
    document.getElementById("hoge").textContent = "Hello!";
}

実行してみましょう。こんにちは が Hello! になったはずです。

ここまでやってきたことを組み合わせてみましょう。
onloadを用いてDOMが構成されてからsetIntervalで1秒ごとにカウントし、pタグ内の数値を更新します。そしてボタンを押すか、5秒経った時点でカウントが止まるプログラムにしてみます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p id="timer">0</p>
        <input type="button" value="stop" onclick="stopCount()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
let count = 0;
let timer;
const timerNode = document.getElementById("timer");

const stopCount = function(){
    clearInterval(timer);
    window.alert(count + "[s]");
}

window.onload = function(){
    timer = setInterval(()=>{
        count++;
        timerNode.textContent = count;
        if(count >= 5){
            stopCount();
        }
    }, 1000);
}

もっと上手なコードがあると思うんですけど、今はこれ以上思いつきません。思いついて、この記事のことを覚えていたら追記します。
5秒目にアラートが出たときページ上での秒数は4となっていますが、アラートを消すとちゃんと5になります。

DOMの追加

JavaScriptで途中からDOMを追加してみましょう。まずは末尾に要素を生成します。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p>これは元からあった要素です</p>
        <input type="button" value="生成" onclick="generate()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const p = document.createElement("p");
p.textContent = "新しく追加したノードです";
const generate = function(){
    document.body.appendChild(p);
}

ボタンを押すと初めの一回だけ<p>新しく追加したノードです</p>が末尾に追加されます。

DOMを生成後、その要素の情報を表示

次は画像要素を生成して、その画像データをアラートさせてみましょう。
画像は読み込みに時間が掛かります。ですから、onloadを用いてDOM生成後に画像のデータを表示させてやる必要があります。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
const img = document.createElement("img");
img.onload = function() {
     window.alert("画像の横幅は" + img.width + "\n" + "画像の縦幅は" + img.height);
}
img.src = "http://www.lovelive-anime.jp/otonokizaka/img/member/member09_04.png";
document.body.appendChild(img);

document.createElement("img")はImage()でも可です。

mapを用いた要素の分割生成

inputで入力した文字列をsplit(",")で,ごとに区切ってリスト化、それを要素一つ一つpタグで出力させてみます。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <input type="text" id="data"><input type="button" value="ボタン" onclick="helloWorld()">
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

"use strict"
let textData = document.getElementById("data");
const helloWorld = function(){
    textData = textData.value.split(",");
    textData.map((el)=>document.body.appendChild(document.createElement("p")).textContent = el);
}

ボタンを押すと初めの一回だけpタグで要素が,で分割された部分で改行され表示されます。

おまけ

コードゴルフを少し載せたいと思います。

FizzBuzz

fizzBuzz=num=>(num%3?"":"Fizz")+(num%5?"":"Buzz")||num;
console.log(fizzBuzz(15));
// FizzBuzz

JavaScriptの「&&」「||」について盛大に勘違いをしていた件

連番のリスト

[...Array(5).keys()].forEach(el=>console.log(el))
/*
0
1
2
3
4
*/

リスト内の合計

console.log([...Array(10).keys()].map(i=>i+1).reduce((a,b)=>a+b,0));
// 55

reduce

おわりに

よく使いそうだと思ったものをまとめました。ここから色々な技術に繋がればいいなと思います。

発展として