第２回　はじめてのJavaScript

実習の手順

  1. JavaScript を記述する際の注意事項をよく読む
  2. web2のフォルダ内部にjavascript という名前のフォルダを作成する。
  3. [JavaScript(1) ページに文字を表示させる]の説明を読み、上で作成したフォルダの中に、javascript_hinagata.html を作成する
  4. [JavaScript (2) 文字列や数値と変数]の説明を読み、var_strings.html, var_numbers.html を作成し、web2のフォルダ内部のフォルダjavascript内に保存する。
  5. 練習 1 変数、練習 2 演算を通して上の理解を確実なものにする
  6. 実習4 var_strings01.html, var_numbers01.html を作成し、web2のフォルダ内部のフォルダjavascript内に保存する。
  7. 成果物をToyonetACEに提出する

記述する際の注意事項

命令文を書く時、守らないと不都合が起きること

  • 半角英数モードで入力を行う
  • JavaScriptでは大文字小文字を区別するので、正確に記述する。基本は、頭小文字のcamelCase
  • 命令文の終わりは、；（セミコロン）
  • 全角スペースを 字下げ目的で使わない。
    半角スペースは無視されるので、 コードが読みやすいように、 入力モードが(半角英数)になっている状態で、 Tabキーを押して字下げする。

推奨される行為

推奨される行為
  • コードが読みやすいように、
    = + - * / 等の記号の前後は、半角スペースあける。
  • ファイル名、フォルダ名は、半角英数小文字で統一

改行したいとき、（1行80文字が目安）

= や + - * / % 等の後

document.getElementById("demo").innerHTML =
 'Hello World!';

関数の見やすい書き方

function aisatsu() {
	document.getElementById("demo").innerHTML = 'Hello World!';
	document.getElementById("demo2").innerHTML = 'How are you?';
}
書き方の習慣やルールについての詳しい説明(@en)→　w3schools　JavaScript Style Guide and Coding Conventions

コメントの書き方

その行だけ無視してほしい時、　//　の後に無視してほしい部分を記載する
  • 例1：　// document.getElementById("demo").innerHTML = 'Hello World!';
  • 例2：　 document.getElementById("demo").innerHTML = 'Hello World!'; // 段落に文字を表示する。

//　から、行末までが無視される

そのブロックを無視してほしい時/* */ で取り囲む
	/*
	document.getElementById("demo").innerHTML = 'Hello World!';
	document.getElementById("demo2").innerHTML = 'How are you ?';
	*/

記述できる場所

JavaScriptを記述する場所
  • <head></head>の間に<script> </script> で取り囲んで記述する。
  • </body>の直前に<script> </script> で取り囲んで記述する。
  • 外部ファイルにJavasScriptを記述し、HTMLファイルから、そのファイルを参照させる。参照の記述を、<head></head>の間 または、</body>の直前に記述する。
  • タグの属性として記述する
書く位置と書き方の詳しい説明(@en)→　　w3cschools　JavaScript Where To

JavaScript(1) ページに文字を表示させる

実習3 　特定の段落に文字を表示するファイルの作成 (javascript_hinagata.html)

  1. web2のフォルダ内部にjavascript という名前のフォルダを作成
  2. html_hinagata.html を 1. で作成したフォルダにコピーし、名前を、javascript_hinagata.html に変更
  3. ファイルの上で右クリックし、プログラムから開く →　秀丸としてソースを編集する。
    1. 以下の見本を参照し、demo という名前の段落を作成
    2. </body>の直前に、<script></script>と書き、Javascriptでコードを記述する場所を確保
    3. script タグの間に、document.getElementById("demo").innerHTML = 'Hello World!';　と記述する。
  4. ファイルアイコンをダブルクリックし、GoogleChrome で表示を確認する。
  5. 3.で開いたソースを編集して、Hello World!以外の文字列を表示させてみる。
1.</body>の直前　に、<script> </script> で取り囲んで、demo というIDの段落に、Hello World! と表示させる記述をする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<h1>段落に挨拶を表示する</h1>
<p>挨拶の表示</p>

<p id="demo"></p>




<script>
document.getElementById("demo").innerHTML = 'Hello World!';
</script>


</body>

</html>
ポイント!:demo というIDの段落に、Hello World! と表示させるための記述
document.getElementById("demo").innerHTML = 'Hello World!';

JavaScript (2) 文字列や数値と変数

変数の代入
var 変数名 = 値；
  • 文字列や数値は変数に格納することができる。
  • 文字列は、ダブルクオーテーションまたはシングルクオーテーションで囲む
  • 変数名は予約語を除いて自由に設定することができる。

1.文字列を変数に代入 (var_strings.html)

flwName が設定した変数名, Rose が代入する文字列　;を忘れずに　　 ソース全体
var flwName = " Rose " ; 
<p id="demo"></p>

<script>
var flwName = "Rose";
document.getElementById("demo").innerHTML = flwName; 
</script>
文字列はダブルクォーテーション（"）、または、シングルクオーテーション(')で囲む
var aisatu1 = "It's OK!"
両方使うのはこんな場合
  • var aisatu2 = " My name is ' Mami ' ";　　　　//aisatu2 が表示される場合は、'Mami' とシングルクォーテーション付きで文字列が表示される
  • var aisatu3 = ' I am " Mami " '; 　　　　//aisatu3 が表示される場合は、"Mami" とダブルクォーテーション付きで文字列が表示される
  • <p onclick=" this.innerHTML=' Thank you! ' ">Click me.</p>

2. 数値や計算結果を変数に格納して演算 ( var_numbers.html )

ソース全体
var x = 6;
var y = 7;
var z = x + y;

<p id="demo"></p>

<script>
var x = 6;
var y = 7;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

+ 以外の演算子について　w3schools.com JavaScript Operators

練習 1 変数

問題とその解説の出典　w3cschools JavaScript Variables　2016-09-19閲覧

練習 2 演算

問題とその解説の出典　w3cschools JavaScript Arithmetic(演算子（+ - * / %）についての解説含む）　2016-09-19閲覧

実習4　変数を利用する実習

var_strings01.html の作成

html
trial という id 名のついた段落を一つ作成。
JavaScript
carName という変数を定義し、値をPorche とする。
段落 trial の内容が、変数carName の内容に書き換わるようにコードを書きましょう。

var_numbers01.html の作成

html
trial という id 名のついた段落を一つ作成。
JavaScript
xという変数を定義し、値を10 とする。
y という変数を定義し、値を5　とする。
z という変数を定義し、x と y を足した値が代入されるようにする。
段落 trial の内容が、変数 z の内容となるよう JavaScript を書く。

この回の成果物

注釈：フォルダ名/フォルダ名/ファイル名

  1. web2/javascript/javascript_hinagata.html
  2. web2/javascript/var_numbers.html
  3. web2/javascript/var_strings.html
  4. web2/javascript/var_numbers01.html
  5. web2/javascript/var_strings01.html
typing.io で、タイピングの例文を題材にタッチタイピングの練習をしてみましょう。