読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

ブラウザに文字を表示(出力)

JavaScript

オブジェクトの階層構造

  • Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります


f:id:web-css-design:20160926005914p:plain

ブラウザに文字を表示(出力)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
  window.document.write( 'Hellow World!!' );
</script>
<noscript>
  JavaScript対応ブラウザで表示してください。
</noscript>
</body>
</html>

文字列の表示

JavaScriptで文字列を表示するには、「window.document.write( )」を使います。

window.document.write( )

( )の中の文字列を表示します。「window.」は省略できます。

'(シングルクォーテーション)

表示したい文字列を ' と ' ではさみます。

;(セミコロン)

ここまでが1つの文であることを表す記号です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
    var heisei;
    var fullYear;
    var message;
	
    heisei = 23;
    fullYear = heisei + 1988;
    message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
    document.write('<h1>' + message + '</h1>');
</script>
</body>
</html>
標準体重プログラム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
var height; //身長
var weight; //体重

// 身長を代入する
height = 170;
// 計算を行う
weight = ( height -100 ) * 0.9;

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

警告ダイアログに表示

  • 警告ダイアログに「ありがとう!」と表示させる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ありがとう!</title>
</head>
<body>
<script>
  window.alert( 'ありがとう!' );
</script>
<noscript>
  JavaScript対応ブラウザで表示してください。
</noscript>
</body>
</html>
警告ダイアログ表示
  • JavaScriptで警告ダイアログを表示するには、「window.alert( )」を使います
window.alert( )
  • [OK]ボタンのある警告ダイアログウィンドウに( )の中の文字列を表示します
  • 「window.」は省略できます。


命令には引数を渡せる

以下は同じ結果になります。

<script>
  document.write( '<h1>はじめてのJavaScript</h1>' );
</script>
<script>
  document.write( '<h1>' + 'はじめてのJavaScript' + '</h1>' );
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptはじめの一歩</title>
</head>
<body>
<script>
  document.write( '<h1>はじめてのJavaScript</h1>' );
</script>
<noscript>
  JavaScript対応ブラウザで表示してください。
</noscript>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
    var heisei;
    var fullYear;
    var message;
	
    heisei = 23;
    fullYear = heisei + 1988;
    message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
    window.alert( message );
</script>
</body>
</html>
メッセージを表示するダイアログボックス


alert( メッセージ );

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


confirm( メッセージ );


変数 = confirm( メッセージ );

  • confirmメソッドは「戻り値を返す」
  • ブーリアン型「true(真)」または「false(偽)」
ユーザーにデータを入力してもらうダイアログボックス


prompt( メッセージ );


変数 = prompt( メッセージ, デフォルトの値 );

文字列を数値に変換
  • 入力された数字が文字列ではなく、数値として認識させる
  • 整数型 【 integer 】 インテジャー


parseInt( );

<!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>' );
document.write( '身長が' + height + 'cmの人の標準体重は' );
document.write( weight + 'kgです。' );
document.write( '</h1>' );
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
var height; //身長
var weight; //体重
var man; //男性かどうか

//男性か女性かを入力
man = confirm( 'あなたは男性ですか?' ); 

// 身長を代入する
height = prompt( '身長を入力してください', 180 );
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>