JavaScriptは現在もっとも人気のある言語だ。この先も活躍の場が広がることが予想され、学んで損のないコスパの高い言語と言って良いだろう。
それでは、さっそくやっていこう。まずは以下のようなjsLesson1.htmlを作成する。

●jsLesson1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<div id="result"></div>
<script>
var x=10;
var y=20;
var z=x+y;
var str="x+y="+z;
console.log(str);
var ele=document.getElementById("result");
ele.textContent=str;
</script>
</body>
</html>

ブラウザで実行してみよう。
ブラウザと開発者画面(ChromeだったらWin:ctr+shift+j,Mac:command+option+j)のコンソールに以下のように「x+y=30」と表示されれば成功だ。

[ソースコード解説]
JSの活躍の局面は年々増えているが、基本はなんといってもhtmlの動的操作だ。なので今回もそれから行う。
9~17行目:このようにscriptタグでくくるとスクリプトが実行される。
10,11行目:変数を宣言している。JSは変数宣言の際頭にvarをつける。型が無い訳ではなく右辺の情報をもとに判断される。JSの変数は型を知っていると覚えておくとよい。
12行目:右辺での足し算の結果を左辺に代入している。演算子はこのほかに-,*,/,%などが使える。
13行目:文字列と整数を連結している。文字列はダブルコーテーションか、シングルコーテーションでくくる。
文字列と整数を連結すると新たな文字列を生成する。
14行目:コンソールへの出力。デバッグしたいときなどに利用する。ブラウザへの表示には影響がない。
15行目:document.getElementById(id)でhtmlの中からそのidの要素を探してきて返却する。今回はその結果を変数eleに代入している。
16行目:上で取得したオブジェクトのプロパティtextContentに値を代入している。その結果がブラウザに表示される。
開発者画面で見てみよう。空っぽだったdivが動的に書き換えられているのがわかる。

続いてjsLesson2.htmlを以下のように作成する。
[関数]
●jsLesson2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
  <input type="text" id="itAge" value="" placeholder="Enter your age">
  <button onclick="btCheck()">Check!</button>
  <div id="result"></div>
<script>
function btCheck(){
  var age=document.getElementById("itAge").value;
  var str;
  if(age >= 20){
    str='おとな';
  }else{
    str='こども';
  }
  document.getElementById("result").textContent=str;
}
</script>
</body>
</html>

実行して、年齢を入力し「おとな」や「こども」と出力されれば成功だ。

[ソースコード解説]
8行目:htmlレベルの話だが、placeholder属性を書いておくと入力ヒントとして表示される。
9行目:button要素のonclick属性にbtCheck()と記述。こうすることでこのボタンがクリックされたときにbtCheck関数を実行することができる。
10行目:結果表示ようの空要素。
12行目:functionの定義
13行目:document.getElementById(“itAge”).value;によってidがitAgeのvalueを取得(入力されている値を取得する)
15~19行目:if文による分岐
20行目:結果を出力

続いてjsLesson3.htmlを以下のように入力
[for文]
●jsLesson3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
  <h1>正の整数を入力してください</h1>
  <input type="number" id="inNum" min="1" value="" placeholder="Enter a Number">
  <button onclick="btCalc()">Calc!</button>
  <div id="result"></div>
<script>
function btCalc(){
  var num=document.getElementById("inNum").value;
  var sum=0;
  for(var i=0;i<=num;i++){
    sum+=i;
  }
  var str='1から'+num+'までの和は'+sum+'です。';
  document.getElementById("result").textContent=str;
}
</script>
</body>
</html>

数値をいれて、1からその数値までの合計が表示されれば成功だ。

次に進もう。jsLesson4.htmlとして以下を入力
[配列1]
●jsLesson4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
  <h1>平均の計算</h1>
  <h2 id="data"></h2>
  <button onclick="btCalc()">Calc!</button>
  <div id="result"></div>
<script>
var nums=[10,32,18,20,40];
var str="";
var sum=0;
for(var i=0;i<nums.length;i++){
  str += nums[i]+(i==nums.length-1?"":",");
  sum += nums[i];
}
document.getElementById("data").textContent=str;
function btCalc(){
  var msg="要素の平均は"+sum/nums.length+"です。";
  document.getElementById("result").textContent=msg;
}
</script>
</body>
</html>

最初に配列の要素が表示され、calcボタンを押すと要素の平均が表示されれば成功だ。

[ソースコード解説]
13:var nums=[10,32,18,20,40];で要素が5個の配列を生成している。
16:配列の要素数はlengthで求められる。
17:(i==nums.length-1?””:”,”);の部分は三項演算子。最後の要素でなければカンマを追加している。

次に進もう。jsLesson5.htmlとして以下を入力
[配列2]
●jsLesson5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
  <h1>平均の計算</h1>
  <input type="number" id="num" value="" placeholder="数値を入力"/>
  <button onclick="add()">Add</button>
  <button onclick="btCalc()">Calc!</button>
  <div id="msg"></div>
<script>
var nums=[];
var eleNum=document.getElementById("num");
var eleMsg=document.getElementById("msg");
function add(){
  var num=parseInt(eleNum.value);
  nums.push(num);
  eleMsg.textContent=num+"を配列に追加";
}
function btCalc(){
  var sum=0;
  for(var i=0;i<nums.length;i++){
    sum+=nums[i];
  }
  var msg="要素の平均は"+sum/nums.length+"です。";
  eleMsg.textContent=msg;
}
</script>
</body>
</html>

以下のようになれば成功だ。
1.スタート画面

2.数値をいれてAddを押すと配列に要素を加え、その旨を表示する。

3.いくつか数値を加えたのち、Calcボタンを押すと配列の要素と平均が表示される。

[ソースコード解説]
14:var nums=[];で空の配列を生成。
18:var num=parseInt(eleNum.value);フォームからの入力は全て文字列なのでそれを明示的に整数に変換している。
19:nums.push(num);で配列に要素を追加する。

[練習問題]
二つの整数を入力し、演算子を選ぶと結果を表示するアプリを作成せよ。

[実行例]
1.スタート画面

2. 二つの整数を入力し、演算子ボタンを押すと結果が表示される。

[解答例]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>整数電卓</title>
</head>
<body>
<h2>整数を2つ入力してください</h2>
<div>x:<input type="number" id="numX" value=""/></div>
<div>y:<input type="number" id="numY" value=""/></div>
<button id="plus" onclick="btCalc('plus')">+</button>
<button id="minus" onclick="btCalc('minus')">-</button>
<button id="multi" onclick="btCalc('multi')">*</button>
<button id="div" onclick="btCalc('div')">/</button>
<button id="rest" onclick="btCalc('rest')">%</button>
<div id="result"></div>
<script>
var eleX=document.getElementById("numX");
var eleY=document.getElementById("numY");
var result=document.getElementById("result");
function btCalc(ope){
  var x=parseInt(eleX.value);
  var y=parseInt(eleY.value);
  switch(ope){
    case 'plus':
      result.textContent=x+"+"+y+"="+(x+y);
    break;
    case 'minus':
      result.textContent=x+"-"+y+"="+(x-y);
    break;
    case 'multi':
      result.textContent=x+"*"+y+"="+(x*y);
    break;
    case 'div':
      result.textContent=x+"/"+y+"="+(x/y);
    break;
    case 'rest':
      result.textContent=x+"%"+y+"="+(x%y);
    break;
  }
}
</script>
</body>
</html>