[03] JavaScriptの概要

한국어 English 日本語 简体中文 繁體中文
By Gi Pyeong Lee
JavaScript javascript emca use 1日3分ウェブ学習 engineering
Untitled Document.md

3分間：第3章 JavaScript

_05 JavaScript とは何か？

JavaScriptはオブジェクトベースのスクリプトプログラミング言語です。より詳細な内容は Wikipedia を参照してください。

私たちは前章で CSS について学びました。 CSS を通じて、私たちは 特定の属性を持つ何か を作りました。今度は、この要素に対して 何をすべきか を指示します。

_06 ボタンをクリックしたとき、アラートを表示させる

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

JavaScript 


<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>

上記のコードを .html ファイルにまとめると以下のようになります。 


<!DOCTYPE HTML>
<html>
<head>
<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>
</head>
<body>
<div class="button" id="id_button">Button</div>
<script>
document.getElementById("id_button").addEventListener("click",function(){
    alert("hello world");
});
</script>
</body>
</html>

上記の内容は、該当する div タグをクリックした場合、 'hello world' という文字列を表示する例です。

JavaScriptを利用すれば、特定のタグの id や class などを通じて、そのタグに特定の動作を付与できます。
クリックだけでなく、 mouseover 、 mouseout といったマウスイベントに対するアクションも付与可能です。

_07 ボタンの属性を変更する

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

JavaScript 


<script>
// id_button の文字色を赤色に変更する
document.getElementById("id_button").style.color="red";
</script>

_08 ボタンのスタイルシートを無効化する

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style id="btn_css">
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

JavaScript 


<script>
// ドキュメントに適用されているスタイルのうち、btn_css というIDを持つスタイルを無効化する
document.getElementById("btn_css").disabled = true;
</script>

今日は簡単にJavaScriptについて学びました。今回お伝えしたJavaScriptは、 学習 というより 雰囲気を感じる 程度だと思ってください。
以下はJavaScriptに関する簡単な学習資料です。

MDN JavaScript 学習資料

実際、JavaScriptは 学習 をして初めて本格的に使用できるスクリプト言語です。JavaScriptを勉強していると ECMAScript という言葉を耳にするでしょう。
この言葉は、JavaScriptの 標準化 された仕様だと考えると分かりやすいです。

cf.
今後JavaScriptを書く際、スクリプトの冒頭に use strict という記述を見かけることがあります。
これは標準に従うことを意味し、複数のブラウザで同じように動作するように設計されたスクリプトであると解釈できます。

まとめ

- JavaScriptはHTMLに動きを与える。

- JavaScriptは document に適用されている属性値を変更できる。

- JavaScriptは document のタグを動的に変更できる。

- 今日少しだけ触れたJavaScriptは全体の1%程度に過ぎない。残りの99%は本当に無限に広がっている。

3分間予告

  • JavaScriptを一からすべて学ぶのは大変そうだが、もっと簡単に使える方法はないだろうか？
AD