WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

JavaScript基礎

JavaScriptとは

HTML+CSSで作られていたWEBページにJavaScriptを組み合わせると
今まで静的なページしか作れなかったのが、
動きや機能をつけることができるようになる。


プログラムは

  1. 初期値
  2. 演算
  3. 出力

がある。

JavaScriptの記述方法


JavaScriptのタグ
headの中に書くときはtitleの下に、
bodyの中に書くときはの上(一番最後)に書く。

変数に代入

var(変数宣言) ans(変数名/任意) = 命令;

ダイアログボックスの表示

alert();
警告ウィンドウに表示

ブラウザに表示

document.write();

コンソールに表示

console.log();

**入力ボックスに表示
>|javascript|
prompt('','');

第一引数は入力ボックスの上に、第二引数は入力ボックスの中に表示
入力された値は半角で打たれていても文字列になる。parseIntをかけて整数化する。
空けておくと何も表示されない。
変数に代入でき、入力された文字を取得できる。

プログラムは上から読まれていく。順番が重要。

//コメントアウト
/**/複数行のコメントアウト
練習

数値を変数に代入して計算して出力する。

<script>
var num1 = 150;
var num2 = 120;
var kake = 2;
var wari = 2
var ans = (num1*kake + num2*kake)/wari ;
alert( ans );
document.write( ans );
console.log( ans );
</script>
<script>
var price = 1000;
var tax = 0.08;
var kakaku = price + price + price*tax;
alert( kakaku );
document.write( kakaku );
console.log( kakaku );
</script>
<script>
var price = prompt( '金額を半角数字で入力してください。', '例: 850');
price = parseInt( price )
var tax = 0.08;
var kakaku = price + price*tax;
alert( kakaku );
document.write( kakaku );
console.log( kakaku );
</script>
<script>
var heisei;
var fullYear;
var message;

heisei = prompt('平成の年号を半角数字で入力してください。','');
heisei = parseInt( heisei );
fullYear = heisei + 1988;
message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
document.write( '<h1>' + message + '</h1>')
</script>
<script>
/*
*標準体重計算プログラム
*最終修正日:2015.03.25
*/
//(初期値)
var height; //身長
var weight; //体重

//身長を代入する(初期値)
height = prompt( 'あなたの身長を半角数字で入力してください','例:170' )
height = parseInt( height );
//計算を行う(演算)
weight = (height -100)*0.9;

//結果を表示する(出力)
document.write('<h1>');
document.write('身長が' + height + 'cmの人の標準体重は');
document.write(weight.toFixed(2) + 'kgです。');
document.write('</h1>');
</script>