JavaScript 入門講座

JavaScript 第１回 / 全６回

JavaScript 入門講座 第１回

様々な開発言語

  • プログラムを書くための言語は何種類もあります。

  • それぞれに一長一短があり、得意な領域や不得意な領域を抱えています。

  • 通常は, それぞれの得意領域を組み合わせて複数の言語でシステムを作り上げます。

  • すべてを理解するのは到底不可能なので、各言語に特化した複数の人がチームになってシステムを組み上げます。

JavaScript 入門講座 第１回

JavaScript の特徴

  • JavaScript を解釈し、実行できるブラウザが多い。

  • ブラウザ上で動くので、ブラウザで表示している HTML などを書き換えることが出来る。

  • ブラウザ上の挙動を（セキュリティ的に）安全に模倣できる。

JavaScript 入門講座 第１回

練習

まずは HTML から練習しましょう。

すべて「半角」で入力してください。

<html>
<head>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

※「全角（日本語入力モード）」は使わないでください。

JavaScript 入門講座 第１回

HTML の構造

<html>
<head>
</head>
<body>  ← 開始タグ
    <h1>Hello World</h1>
</body>  ← 終了タグ
</html>
JavaScript 入門講座 第１回

シングルタグ

<html>
<head>
</head>
<body>
    <h1>Hello<br />World</h1>
</body>
</html>
JavaScript 入門講座 第１回

属性(attribute)

<html>
<head>
</head>
<body>
    <a href="http://www.google.co.jp">Google</a>
</body>
</html>
JavaScript 入門講座 第１回

百聞は一見にしかず、習うより慣れろ

というわけで JavaScript を動かしてみましょう。

JavaScript はブラウザでも動かせます。次のページにサンプルがありますので、 HTML ファイルとして入力して、実際に動かしてみてください。

※コピー＆ペーストを活用してください。

JavaScript 入門講座 第１回

sample0010.html

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        // コメント
        alert("Hello World!");
        /* アラートが表示されます。 */
    </script>
</head>
<body>
</body>
</html>
JavaScript 入門講座 第１回

変数

  • 値（数値や文字列等）を入れる入れ物
  • 自由に名前（変数名）を付けることが出来る
var name = "Tam";   // 名前は Tam
var age = 17;       // 年齢は 17歳
let address = "高松市"; // 住所は高松

※var と let どちらでも変数を定義できますが、できる限り let を使いましょう。

JavaScript 入門講座 第１回

エラーが出たとき

ブラウザだと、デバッグコンソールでエラーが表示できます。

おかしな挙動が出てきたら、エラーを確認するようにしましょう。

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        // 定義を２回行って、エラーを無理やり出す。
        let tmp = 10;
        let tmp = 20;
    </script>
</head>
<body>
</body>
</html>
JavaScript 入門講座 第１回

時計を表示してみましょう。

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        let d = new Date();
        let h = d.getHours();
        let m = d.getMinutes();
        let s = d.getSeconds();
        document.writeln(h + "時" + m + "分" + s + "秒");
    </script>
</head>
<body>
</body>
</html>
JavaScript 入門講座 第１回

JavaScript 部分を別ファイルに分離してみましょう。

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="sample0030.js"></script>
</head>
<body>
</body>
</html>

let d = new Date();
let h = d.getHours();
let m = d.getMinutes();
let s = d.getSeconds();
document.writeln(h + "時" + m + "分" + s + "秒");
JavaScript 入門講座 第１回

コメントの書き方

// 現在時刻を求める。
let d = new Date();

let h = d.getHours(); // 時
let m = d.getMinutes(); // 分
let s = d.getSeconds(); // 秒
/*
    時刻を表示する。
*/
document.writeln(h + "時" + m + "分" + s + "秒");
JavaScript 入門講座 第１回

計算してみましょう

100円の商品の消費税（10%）込の金額を計算してみましょう。

JavaScript では、掛け算の記号として「*（アスタリスク）」を使います。

let result = 100 * 1.10;
document.writeln(result);
JavaScript 入門講座 第１回

計算をしてみましょう２

200円の商品の消費税（10%）込の金額を計算してみましょう。

let result = 200 * 1.10;
document.writeln(result);

次に、 300円の商品の消費税（10%）込の金額を計算してみましょう。

let result = 300 * 1.10;
document.writeln(result);
JavaScript 入門講座 第１回

関数

同じことをする部分をまとめます。

// ここでは関数を定義するだけ。
function price(value) {
    let result = value * 1.10;
    return result;
}

// 以下で初めて関数が実行される。
let result1 = price(100);
document.writeln(result1);

// 以下で再び関数が実行される。
let result2 = price(200);
document.writeln(result2);
JavaScript 入門講座 第１回

$theme: gaia template: invert