ブラウザに表示 - web-0127のブログ

ブラウザに文字を表示

「Hello World!!」とブラウザに表示させる

<!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.」は省略できます。

'（シングルクォーテーション）

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

;（セミコロン）

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
    var heisei;
    var fullYear;
    var message;
	
    heisei = 26;
    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>
/*
* 標準体重計算プログラム 
* 最終修正日：2014.05.23
*/

var height; //身長
var weight; //体重

// 身長を代入する
height = 170;

// 計算を行う
weight = (height -100) * 0.9;

// 結果を表示する
document.write('<h1>' + '身長が' + height + 'cmの人の標準体重は' + weight + 'kgです。' + '</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.」は省略できます。

命令には引数を渡せる

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptはじめの一歩</title>
</head>
<body>
<script>
  document.write( '<h1>はじめてのJavaScript</h1>' );
  document.write( '<h1>' ,  'はじめてのJavaScript' , '</h1>' );
  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 = 26;
    fullYear = heisei + 1988;
    message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
    window.alert(message);
</script>
</body>
</html>

メッセージを表示するダイアログボックス

alert( メッセージ );

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

confirm( メッセージ );

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

confirmメソッドは「戻り値を返す」
ブーリアン型「true（真）」または「false（偽）」

ユーザーにデータを入力してもらうダイアログボックス

prompt( メッセージ );

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

文字列を数値に変換

入力された数字が文字列ではなく、数値として認識させる

parseInt( );

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
/*
* 標準体重計算プログラム 
* 最終修正日：2014.05.23
*/

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>

男性・女性を区別する

条件分岐（if文）が入ります

<!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>' + '身長が' + height + 'cmの' );
  if ( man ) {
    document.write( '男性の標準体重は' );
  } else {
    document.write( '女性の標準体重は' );
  }
  document.write( weight + 'kgです。' + '</h1>' );
</script>
</body>
</html>