JavaScript 速習チュートリアル

JavaScript の紹介

1. JavaScriptで実現できること

JavaScriptは、Web開発において中心的な役割を果たすプログラミング言語です。
データの計算や操作、バリデーション(検証)を実行できるほか、HTMLとCSSの両方を動的に更新・変更することが可能です。

2. HTMLコンテンツの書き換え(getElementById)

JavaScriptでHTMLを操作する代表的なメソッドの一つに getElementById() があります。

以下のサンプルコードでは、特定のHTMLエレメント(id="demo")を特定し、その中身(innerHTML)を「ハロー、JavaScript」に書き換えています。

コード例

document.getElementById("demo").innerHTML = "ハロー、JavaScript";

JavaScriptでは、ダブルクォーテーション(")とシングルクォーテーション(')のどちらも使用可能です。

コード例

document.getElementById('demo').innerHTML = 'ハロー、JavaScript';

3. JavaScriptによるスタイル(CSS)の操作

HTMLエレメントのスタイルを変更することは、属性操作の一つのバリエーションです。フォントサイズや色の変更も容易に行えます。

// フォントサイズを35pxに変更する
document.getElementById("demo").style.fontSize = "35px";

4. 要素の表示・非表示の制御

HTMLエレメントを非表示にするには、CSSの display プロパティを操作します。

非表示にする例

document.getElementById("demo").style.display = "none";

4.1 非表示要素の再表示

逆に、非表示になっているエレメントを表示させるのも、display スタイルを変更するだけで完了します。

表示する例

document.getElementById("demo").style.display = "block";

5. JavaScriptの歴史と豆知識

プログラミングを始めたばかりの方が混同しやすい点ですが、JavaScriptとJavaは、コンセプトも設計も完全に異なる別の言語です。

JavaScriptは1995年にブレンダン・アイク(Brendan Eich)によって開発され、1997年にECMA標準規格となりました。
ECMA-262が標準規格の公式名称であり、ECMAScriptが言語としての正式名称です。