［Javascript］基礎と練習 （3月25日）
Javascriptの基本
①初期値を与える
②演算の命令をする
③出力する
例：
①
var x = 12;
var y = 6;
②
var z = x + y;
③
document.write( z ); //ブラウザに結果を表示させる
console.log( z ); //consoleに結果を表示させる
var x = 12;
変数宣言 ・・・var
x ・・・変数
12 ・・・値
; ・・・セミコロンは命令
変数に数値を入れることを「代入」という
文字列の連結
aの変数とbの変数を連結するとき
a=○○;
b=○○;
c= a + b;
練習① 標準体重
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title標準体重</title>
</head>
<body>
<script>
var height; //身長
var weight; //体重
//慎重を代入する
height = 180;
//計算を行う
weight = ( height -100)*0.9;
//結果を表示する
document.write('<h1>');
document.write('身長が' + height + 'cmの人の標準体重は');
document.write( weight + 'kgです。');
document.write('</h1>');
</script>
</body>
</html>
↓ ブラウザでの表示
document.write('<h1>');
〜〜〜
document.write('</h1>'); の記述で、h1で装飾して表示されています。
練習② 平成を西暦に変換する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title平成を西暦に変換</title>
</head>
<body>
<script>
var heisei;
var fullYear; //西暦４桁
var message;
heisei = 24;
fullYear = heisei + 1988;
message = '平成'+ heisei + '年は' + '西暦' + fullYear + '年です';
document.write('<h1>' + message + '</h1>');
</script>
</body>
</html>
ブラウザでの表示
練習③ 警告ダイアログに「ありがとう！」と表示させる
警告ダイアログでメッセージを表示させるには、window.alert(); を使用する。windowは省略化可能。
表示内容が文字列ならば ’’（シングルクォーテーション）で囲む
<body>
<script>
window.alert('ありがとう！');
</script>
</body>
</html>
練習④ ユーザーにデータを入力させる prompt
＜例＞
height = prompt ('身長を入力してください' ,175 );
上のようにダイアログボックスが表示される。
コンマ(,)後に入れておく数字はplaceholderの役目
<body>
<script>
var height; //身長
var weight; //体重
//身長を入力する
height = prompt('身長を入力してください',175);
//数値を整数にする
height = parseInt ( height );
//計算を行う
weight = (height - 100) *0.9;
//結果を表示
document.write('身長が'+ height + 'cmの人の標準体重は');
document.write(weight + 'kgです');
</script>
</body>
↓↓ ブラウザでの表示 ↓↓
☆parseInt = ( ); は入力された文字列を数値として認識させる関数。また、入力された数値が小数点であった場合は小数点以下を切り捨て、整数として認識させる。（四捨五入ではない）
height = parseInt ( height );
練習⑤ ユーザーに確認を求めるダイアログボックス confirm
man = confirm ('あなたは男性ですか？');
<body>
<script>
var height; //身長
var weight; //体重
var man; //男性かどうか
//男性か女性か入力
man = confirm('あなたは男性ですか？');
//身長を入力する
height = prompt('身長を入力してください',175);
//数値を整数にする
height = parseInt ( height );
//計算を行う
if ( man ) {
weight = ( height - 80) *0.7;
} else {
weight = ( height - 70) *0.6;
}
//結果を表示
document.write('<h1>');
document.write('身長が'+ height + 'cmの');
if (man) {
document.write('男性の標準体重は');
} else {
document.write('女性の標準体重は');
}
document.write( weight +'kgです');
document.write('</h1>');
</script>
</body>
</html>
ブラウザでの表示 ↓
