株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | JavaScript基礎

2017.11.18

CATEGORY - web

これまで、HTMLとCSSを用いて、ひととおりちゃんとしたWEBページを表示させるところまでやってきました。

このままでも全然いいんですけど、ちょっとしたアニメーションをつけたり、ユーザーの行動によって、気持ちのよい動きをさせたりした方がUI/UX的にもいい場面があります。

そんな機能を実装するのに欠かせないのが、JavaScriptです。

今回は、その JavaScript とはなんぞや? どう書いたらいいのか? って部分をやっていきたいと思います^^

JavaScript基礎

1. JavaScript とは?

WEBブラウザ上で動作するスクリプト言語です。

?????

ってなった方、、まあ、そうですよね^^;;;;

スクリプト言語とはなんぞや?? ここらへんは興味があったら調べてみてください笑

ってことで、JavaScript でできることを説明した方がイメージ浮かびそうですね^^;;;

では、JavaScript で可能な主なものについて説明したいと思います。

1-1 DOM操作

DOM??? ガンダムに登場するモビルスーツの1つです。

じゃなくて、、、

簡単に言うと、HTMLのエレメント(タグで囲まれた部分)のことです。(要素とも言います。)
<div>あああ</div> のひとかたまりのことですね^^

じゃあ、エレメント操作でいいじゃん。って思いますが、
もう少し、踏み込んで説明すると、エレメントに階層構造を持たせたものってイメージです。

図にしてみますかね。

JavaScript基礎
(※わかりやすくするため、閉じタグは省略してます。)

ノードとは、各要素(エレメント)のことです。(※DOMでは、こう呼びます。)

1つ目の<div>を基準ノードとすると、中に入っている<p> は子ノード、<div>を囲んでいる<section> は親ノードということになります。

はい、てことで、JavaScript では、このDOMをいろいろ操作してなにかすることができます。。。

わかりづらいですかね^^;

例えば、

・子ノードを非表示にしましょう。 とか、
・親ノードにクラス(CSS)を付けて、中のテキストを赤にしましょう。 とか、
・マウスクリックしたら、基準ノードをアニメーションで動かしてみましょう。

とか、そんな感じです。。。

イメージできますかね^^;;;;;

1-2 その他w

最初の頃は、ほとんど DOM操作でしか JavaScript を使わないと思います。。。
(この講座でも、DOM操作以外特にやってないです。)

いちよ、他にもこんなことができるよって部分を書いておきますw

・Cookie や Session の管理

ショッピングサイトや、会員サービスなどのサイトとかで多く利用されてます。

・インタラクティブなものの描画

Canvas や SVG などを使って、グラフやチャート、3Dアニメーションの表示などができます。

・フォーム処理

お問い合わせなどのフォームの中身を処理したりします。

・ファイル操作、オーディオ操作、ビデオ操作

画像をアップロードしたり、ビデオや音楽の再生などができます。

・Ajax通信

ページの一部分だけを変えたいときに、ajax通信を行って、サーバーからデータをもってきて、ページの一部分だけを変更することができます。

とかですかね。

あと、最近ですと、React や Angular などのフレームワーク(あああ、React はライブラリか。。。まあ、それは置いておいて)を使って、WEBサービスを作ることも増えてきましたね^^

とまあ、いろいろできるわけです^^

10年以上前だと、JavaScript でできることはほんと限られていて、誰でも書けるようなイメージがあったのですが、ここ最近は、これまでサーバーサイドで担っていた部分もできちゃったりして、フロントエンドエンジニア(JavaScript をメインに書くエンジニアのこと)の役割が多様化してきてます。。。。2. JavaScript の書き方

JavaScript も CSS と同様に HTMLファイル内に書くことができます。

<script></script> で囲んであげた部分がjavaScriptのコードとして認識されます。

<script>
  console.log('てすと');
</script>

こんな感じです。

ちなみに、console.log() は、ブラウザのデベロッパーツールの Console 部分になにかを表示するやつです。

HTMLファイルに上記のコードを書いて、ブラウザで表示させてみてください。
で、例えば、Google Chrome だと、右クリックして、[検証] – [Console] を選ぶと、そこに表示されるはずです^^

JavaScript基礎

で、注意点が1つ。基本的に、HTMLもCSSもJavaScriptも、上から順番に読み込んでいきます。

<script> タグは、<head> の中に書くことが多いのですが、DOM操作をする場合、このままだと動きません。

なぜなら、<script> を読み込んでいる時点ではまだ、DOM自体が読み込まれていないため、JavaScriptがDOMを認識できないのですが。

そのため、JavaScriptには、ページ自体(DOMやCSS、画像ファイルなども)が完全に読み込まれた後に実行してね♩っていう処理を書くことができます。

それが、こちらです。

<script>
  window.onload = function() {
    console.log('全部よみこまれよ♩');
  };
</script>

ちなみに、onload イベントは、1つのページに対して1回しか使用できません。

何回も使いたい場合には、こちらを使います。

<script>
  window.addEventListener('load', function() {
    console.log('全部よみこまれよ♩');
  });
</script>

ちなみに最近は、HTMLの構築を先にやってしまって、ブラウザ上に表示させてから、JavaScriptを読み込ませたいので、</body> (bodyの閉じタグ)の直前に <script>タグを書くことが多いです。^^

JavaScript も、CSSと同様、文法やら、イベントやら鬼のようにあるので、細かい部分は調べてみてください。
(※毎度、投げやりですみません。。。。)

今回のポイント

  1. JavaScript は主にDOM操作を行う!(他にもいろいろあるけどw)
  2. DOMとは、HTMLエレメントを階層構造にしたもの
  3. ブラウザのデベロッパーツールはよく使います^^
株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP