0704 JavaScript: 初めてのプログラミング、始まりはゆっくりと…
はじめに：先生のお言葉
プログラミングをしていると、行き詰まって解決法が見つからなくなる時がある。
そんな時はちょっと休憩を入れてみる。
時間を置いてみる事で、解決の糸口が見えてくる事がある。
大切なのは、視点を変えてその物事に向き合ってみる事。
JavaScriptとは
- インタプリタ方式の高水準言語
- オブジェクトベースのスクリプト言語（難しい言葉…）
- ブラウザで動作するよう作られたものでクライアント側で動作する⇔サーバー側(PHP)
- テキストエディタで書けるのでトクベツな開発環境が要らない
- HTMLとCSSで作られたWebページに組み合わせる事で、動きや機能といった振る舞いを追加できる
ECMAScript
ECMAが定めたJavaScriptの標準規格
（これ以前は各社バラバラだった仕様を統一）
記述のルール
- Google Javascript Style Guideをベースに
- 大文字・小文字を区別する
書き方
window.alert;
→文末に ; を付ける
コメントアウト
１行 // コメント
複数行 /* ここに
コメント */
bodyに書き込む場合
<body>
<script>
ここにスクリプト
</script>
</body>
外部ファイルを読み込む場合
<head>
<script type=”text/javascript” src=”ファイル名”>
</script>
<head>
！JavaScriptはユーザー側（ブラウザ）で無効に出来る
無効の場合の対策も視野に入れておく必要性がある
具体的な記述例
<script>
window.document.write( ‘*******’ );
</script>
<noscript> // JavaScript無効のブラウザに対する表示
JavaScript対応ブラウザで表示してください
</noscript>
window.document.write( );
- ( )内をブラウザに表示する
- windowは省略可→ document.write( );
- ( )内に、数値はそのまま、文字列は ’ ’ で括って記述する
変数
a=2; aは変数、=は代入演算子
aという箱に2を入れるイメージ
a=’2’; この場合は文字列2を代入、の意
変数宣言
var a
a=2;
var heisei
heisei=26; などなど
変数の値に対してはvarを付ける
JavaScriptの記述いくつか
alert( メッセージ );
メッセージを表示するダイアログボックス
prompt( メッセージ );
データを入力してもらうダイアログボックス
変数 = prompt( メッセージ , デフォルトの値 );
parseInt( );
入力された数字が文字列でなく数値であると認識させる
今日の演習
１。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script>
document.write( 'Hello World!!' );
</script>
<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>
</body>
</html>
２。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数</title>
</head>
<body>
<script>
var a = 2
var b = 5
document.write('<h1>' , a + b , '</h1>');
</script>
</body>
</html>
３。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数</title>
</head>
<body>
<script>
var a = 2
var b = 5
document.write('<h1>' + a + b + '</h1>');
</script>
</body>
</html>
この記述では前から順番に読まれるため2のあとに5が表示され25となる
４。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>警告</title>
</head>
<body>
<script>
window.alert('アラート！！！！！');
</script>
</body>
</html>
５。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>年齢入力</title>
</head>
<body>
<script>
window.prompt('年齢を入力');
</script>
</body>
</html>
６。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
var height; //身長
var weight; //体重
// 身長を入力する
height = prompt( '身長を入力してください' , '半角数字 例 170' );
height = parseInt(height);
// 計算を行う
weight = (height - 100) * 0.9;
// 結果を表示する
document.write('<h1>' + '身長が' + height + 'cmの人の標準体重は' + weight + 'kgです' + '</h1>');
</script>
</body>
</html>
