くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[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>

 

↓ ブラウザでの表示

f:id:pleasure10501:20150325214549p:plain

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;  //西暦4桁
var message;

heisei = 24;
fullYear = heisei + 1988;
message = '平成'+ heisei + '年は' + '西暦' + fullYear + '年です';

document.write('<h1>' + message + '</h1>');
</script>
</body>
</html>

 

ブラウザでの表示

f:id:pleasure10501:20150325215830p:plain

練習③ 警告ダイアログに「ありがとう!」と表示させる

警告ダイアログでメッセージを表示させるには、window.alert(); を使用する。windowは省略化可能。
表示内容が文字列ならば ’’(シングルクォーテーション)で囲む

<body>
<script>
window.alert('ありがとう!');
</script>
</body>
</html>

f:id:pleasure10501:20150325220203p:plain

練習④ ユーザーにデータを入力させる prompt

<例>
height = prompt ('身長を入力してください' ,175 );

f:id:pleasure10501:20150325221321p:plain

上のようにダイアログボックスが表示される。
コンマ(,)後に入れておく数字は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>

↓↓ ブラウザでの表示 ↓↓

f:id:pleasure10501:20150325222445p:plain

☆parseInt = ( ); は入力された文字列を数値として認識させる関数。また、入力された数値が小数点であった場合は小数点以下を切り捨て、整数として認識させる。(四捨五入ではない)

height = parseInt ( height );

 

練習⑤ ユーザーに確認を求めるダイアログボックス confirm

man = confirm ('あなたは男性ですか?');

f:id:pleasure10501:20150325221751p:plain

 <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>

 

ブラウザでの表示 ↓

f:id:pleasure10501:20150325223855p:plain

 

広告を非表示にする