JavaScript勉強会

Kronos.js

前回のCSS勉強会に続き、12/13に大阪 本町でJavaScript勉強会を開催しました。
前回同様初学者向け、女性限定勉強会なので、女性の方でも気軽に参加していただける勉強会です。

Kronos.js(JavaScript女性限定勉強会)

以下、今回のJavaScript勉強会の資料です。
JavaScriptの基礎についてまとめています。

JavaScriptとは

Webページの文字や画像に動きを与えるプログラミング言語です。

開発の準備

デスクトップにkronosjsフォルダを作成して、エディタを起動します。

アジェンダ

  1. JavaScriptの適用方法
  2. JavaScriptの構文について
  3. JavaScriptで要素を取得するには
  4. JavaScriptのイベントについて

Step1 JavaScriptの適用方法

JavaScriptはScript要素を使ってHTMLに直接記述、または外部のスクリプトファイルから読み込んで実行することができます。

内部スクリプト

HTMLの内部に直接JavaScriptを記述して実行します。
JavaScriptを読み込むには、まず、HTMLにScript要素を記述します。

以下のコードを記述したHTMLファイルを作成して、sample1.htmlという名前で保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    // ここにJavaScriptの処理を書きます
  </script>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

アラートを出してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    alert("Kronos.js");
  </script>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

外部スクリプト

HTML内部に記述するのではなく、別のJSファイルに分離させてJavaScriptを読み込むこともできます。

以下のコードを記述したjsファイルをsample.jsというファイルで保存してください。

alert("Kronos.js");

HTMLで作成したJSファイルを読み込むには、以下のようにscript要素のsrc属性にsample.jsのパスを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
    <script src="./sample.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

Step2 JavaScriptの構文について

変数

変数とはプログラミング中の値を保持しておくためのものです。
JavaScriptでは変数を以下のように定義します。

var 変数名;
var 変数名=値;

処理結果などの値を変数に入れておけば、その変数を別の処理に引き渡して使うことができます。
変数latteに格納した文字列"Caffe Latte"がアラートとして表示されます。

<script type="text/javascript">
  var latte="Caffe Latte";
  alert(latte);
</script>

配列

配列を作る場合は以下のように[]で囲んで、その中に値を入れていきます。

var 変数名=["値0","値1","値2"];

配列は0から数えます。
配列の要素を取得したい場合は 配列名[配列番号] のように書くと取得できます。

<script type="text/javascript">
  var orders=["Coffee","Moca","Tea","Misto"];
  alert(orders[0]);
</script>

制御構文

if文やfor文などの制御構文を書くことができます。

  • if文
<script type="text/javascript">
  var latte="Caffe Latte";
  if (latte=="Caffe Latte") {
    alert(latte);
  }
  else {
    alert("注文しない");
  }
</script>
  • for文
<script type="text/javascript">
  var orders=["Coffee","Moca","Tea","Misto"];
  for(var i=0; i < orders.length; i++){
    console.log(orders[i]);
  }
</script>

関数

関数の定義はfunctionキーワードと、関数名、引数（任意）、{}の中に処理を書きます。
関数の中には汎用的に使う処理をまとめて書いておくことができます。

function 関数名(引数){
  // ここに処理を書きます
}

関数に定義した処理が最後まで読まれると、「戻り値」という１つの結果を返すことができます。
戻り値はreturnキーワードで定義します。

return 戻り値;

コンソールから関数を呼び出して、結果をコンソールに表示させます。

<script type="text/javascript">
  function doOder(coffee, latte){
    totalAmount = coffee + latte;
    return totalAmount;
  }
  // コンソールに結果を表示
  console.log(doOder(200, 300));
</script>

Step3 JavaScriptのイベントについて

JavaScriptには動作のタイミングをイベントとして定義しています。

  • ボタンが押されたタイミング
  • ボタンにマウスが乗ったタイミング　など

ではイベントを実際に使ってみましょう。
HTMLファイルを作成して、samlple3.htmlというファイル名で保存してください。

ボタンが押されたタイミングでアラートを表示してみましょう。
button要素にonclickイベントを登録します。
onclickイベントに関数名を渡すと、ボタンを押したタイミングで毎回その関数が呼ばれます。

<button type="button" name="button" onclick="clickButton()">注文</button>

clickButton関数にはアラートの処理を書いておきます。

<script type="text/javascript">
  function clickButton() {
    alert("注文しました");
  }
</script>

全体のコードは以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    function doOrder() {
      alert("注文しました");
    }
  </script>
  <body>
    <h1>Kronos Cafe</h1>
    <button type="button" name="button" onclick="doOrder()">注文</button>
  </body>
</html>

onclickイベント以外にも以下のようなイベントが用意されています。
使ってみましょう

|イベント|説明| |:---|:---| |onclick|要素がクリックされた時| |onmouseover|要素にマウスが乗った時| |onmouseup|要素上でクリックボタンが離れた時| |onmousedown|要素上でクリックボタンが押された時| |onchange|入力内容が変更された時(textarea要素、input要素、select要素など)| and more...

サンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    function clickButton() {
      alert("注文しました");
    }
  </script>
  <body>
    <h1>Kronos Cafe</h1>
    <button type="button" name="button" onclick="clickButton()">onclick</button>
    <button type="button" name="button" onmouseover="clickButton()">onmouseover</button>
    <select class="" name="" onchange="clickButton()">
      <option value="">Coffee</option>
      <option value="">Tea</option>
      <option value="">Latte</option>
    </select>
  </body>
</html>

Step4 JavaScriptで要素を取得するには

JavaScriptのオブジェクト

  • Windowオブジェクト
    ドキュメントを表示するウィンドウに対応するオブジェクト

以下のようにWindowオブジェクトのalertメソッドを使うと、ウィンドウにアラートを表示させることができます。

window.alert("Caffe Latteお願いします");
  • Documentオブジェクト
    HTMLドキュメントに対応するオブジェクト

以下のようにDocumentオブジェクトのwriteメソッドを使うと、HTMLドキュメントを書くことができます。

document.write("Cafe Latteお願いします");

JavaScriptでは、要素を取得して、その要素に対して処理を行うことができます。
li要素にidを指定して、そのidに対して色を変えてみます。
特定のidの要素を取得するには以下のようにJavaScriptを書きます。

HTMLファイルを作成してsample3.htmlというファイル名をつけて保存してください。

document.getElementById("id名");

取得されたidの要素に対して処理を行うことができます。

// 特定のidの要素のスタイルの色を赤色にする
document.getElementById("id名").style.color="red";

id取得以外にもclassの取得や、<タグ>の取得などの処理を行うこともできます。
- classの取得

document.getElementsByClassName("クラス名");
  • <タグ>の取得
document.getElementsByTagName("タグ名");

全体のコードです。
ボタンが押されたタイミングで特定のshortというidがつけられたタグで囲まれている文字の色が変わります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
    <script type="text/javascript">
     function changeOrder() {
       document.getElementById("short").style.color="red";
       document.getElementsByClassName("menu");
       document.getElementsByTagName("h1");
     }
    </script>
  </head>
  <body>
    <h1>Kronos Cafe</h1>
    <ul class="menu">
      <li id="short">Drip Coffee</li>
      <li id="tall">Cafe Misto</li>
    </ul>
    <button type="button" name="button" onclick="changeOrder()">注文</button>
  </body>
</html>