読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

1.2 JavaScriptってどういうもの? 【JavaScript超入門】

003 JavaScriptってどういうもの? - YouTube (3分40秒)

 


 

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第1章を読んでみます。

 

jsstudy.hatenablog.com

 

 

1.2 JavaScriptってどういうもの?

(p.5)

JavaScript

ブラウザを操作するためのプログラミング言語

で、

HTMLやCSSだけではできないことをする

ために使います。

 

確かに、JavaScriptはもともとブラウザーを操作するために作られたプログラミング言語でしたが、今は用途が広がって、ブラウザーを操作する以外の用途でも使われています。

とりあえず、JavaScriptの本来の使い方である「ブラウザーを操作」する目的で、使い方を学んでみたいと思います。

 

「ブラウザを操作する」ってどういうこと?

(p.5)

JavaScriptは、一般的なブラウザである、ChromeFirefoxInternet Explorer(以下IE)/ Edge、Safariなどで実行することができるプログラミング言語です。

JavaScriptで何かプログラムを書いておけば、ブラウザはその命令どおりの処理をしてくれるのです。

 

ブラウザーには、JavaScriptのプログラムを実行する仕組みが備わっています。

 

(p.6)

HTMLとCSSには重要な特徴があります。

それは、一度ブラウザに読み込まれたらもう変化しないということです。

HTMLとCSSは不変で、静止したデータといえます。

JavaScriptを使うと、これら静止したデータであるHTMLやCSSを、その場でリアルタイムに書き換えて、一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます。

 

具体的な「書き換え」の例

(p.6)

パターン1: タグに囲まれたテキストを書き換える

<p>AAA</p>

<p>BBB</p>

 

パターン2: 要素を追加・削除する

<ul>

 <li>1行目</li>

</ul>

<ul>

 <li>1行目</li>

 <li>2行目</li>

</ul>

 

パターン3: タグの属性の値を変更する

<img src="apple.jpg">

<img src="banana.jpg">

 

パターン4: CSSの値を変更する

body {

 background: #FFFFFF;

}

body {

 background: #FF0000;

}

 

(p.8)

これら4つのパターンでHTMLやCSSが書き換えられると、その変更がブラウザの表示に即座に反映されます。

しかも、画面が描き替わるのは変更があった箇所だけで、ページ全体の再読み込みは発生せず、待ち時間もありません。

これにより、単なる「ホームページ」ではない、より「アプリ」らしい動きのWebページを作ることができます。

 

「HTMLやCSSだけではできないことをする」ってどういうこと?

これ以外にも、JavaScriptにできることはたくさんあります。

 

JavaScriptの最も基本的で、かつ重要な役割は次の2点です。

  • ブラウザに表示されているHTMLやCSS書き換える
  • ブラウザに表示されているHTMLやCSSから情報を読み取る

この2つの役割はとても大事なので頭に入れておいてくださいね。

 

この本を通して学ぶのは、JavaScriptを使ってHTMLやCSSをいろいろな方法で書き換えて、ページのコンテンツを変えたり、動きをつけたりする方法です。

 

JavaScriptには、HTMLやCSSの操作で

  • 読む(read)
  • 書く(write)

という2つの基本的な役割があるんですねー。(覚えておこう)