JavaScriptについて

JavaScriptの役割

JavaScriptはWebブラウザー上で動作するプログラミング言語です。
Webページは HTML CSS JavaScript の3つの言語によって構成されています。それぞれの言語の役割は以下です。

言語	役割	例
HTML	文書構造	文中のどこが見出し/段落なのか
CSS	見た目	見出しの色/文字サイズ/幅/高さなど
JavaScript	動作	インタラクションや要素の追加/削除などページ表示後の動作

HTMLのみ

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NZU Programming WS 2020</title>
</head>
<body>
  <h1 id="hdg">NZU Programming WS 2020</h1>
</body>
</html>

「NZU Programming WS 2020」という見出しテキストを設置しただけの状態です。
HTMLのみの場合、表示しているブラウザのデフォルトのスタイルが適用されます。

CSSでスタイルを追加

ソースコード

index.html

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

style.css

body {
  background-color: #dddddd;
}
#hdg {
  font-size: 50px;
}

CSSでスタイルを追加すると、ブラウザのデフォルトスタイルを上書きして見た目をカスタマイズできます。
ress.min.cssはブラウザごとに異なるデフォルトスタイルの差異をなくすためのものです。
ここでは背景を薄いグレーにして見出しのフォントサイズを50pxにしています。

JavaScriptで動作を追加

ソースコード

index.html

<body>
  ...
  <script src="./script.js"></script>
</body>

style.css

...
.text-green {
  color: #00CD81;
}

script.js

let element = document.getElementById('hdg');
element.onclick = function() {
  element.classList.toggle('text-green');
};

見出しをクリック

JavaScriptを使用すると、ページ表示後の動作を定義できます。
ここでは見出しをクリックしたときにh1要素のクラスを付け外しして、文字色が緑と黒に切り替わるようにしています。

JavaとJavaScript

≠

JavaScriptと名前のよく似た「Java」というプログラミング言語も存在しますが、「Java」と「JavaScript」は全く別物です！メロンとメロンパンくらい違います！

混乱を避けるため略称は「Java」ではなく「JS」と呼んでください。

JavaScriptの種類

JavaScriptについて検索すると「ECMAScript（ES）」や「TypeScript（TS）」といったワードを含む記事がヒットします。

「ECMAScript」とはJavaScriptの文法を定める仕様の名称で、様々なバージョンが存在します。
ですので、JavaScriptとECMAScriptは同じものという認識で構いません。バージョンによって文法が少しずつ異なりますが、本演習では2020年現在のモダンブラウザで標準的に動作が保証されている「ECMAScript 2015（ES 6）」の仕様に則って進めていきます。

一方「TypeScript」はトランスパイル（変換）をすることで「ECMAScript 5（ES 5）」（新旧全てのブラウザで動くバージョン）のコードに変換する言語なので、JavaScriptと似た別の言語と思っておいてください。