ブラウザに表示
ブラウザに文字を表示
- 「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.」は省略できます。
'(シングルクォーテーション)
表示したい文字列を ' と ' ではさみます。
;(セミコロン)
ここまでが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> /* * 標準体重計算プログラム * 最終修正日:2015.01.26 */ 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> /* * 標準体重計算プログラム * 最終修正日:2015.01.26 */ 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( '男性の標準体重は' ); document.write( weight + 'kgです。' ); } else { document.write( '女性の標準体重は' ); document.write( weight + 'kgです。' ); } document.write( '</h1>' ); </script> </body> </html>