webをつくる人になる

スクールでwebサイト制作を学んだことをきっかけに、webやパソコンなどについて記録していく たまにCG たまにおやつ・・・

Javascript の勉強 1

 

その1

【入れ物】

var heisei;
var fullYear;
var message;

 

【入れ物にモノを入れる 代入】

heisei = 23;
fullYear = heisei + 1988;
message = "平成" + heisei + "年は西暦" + fullYear + "年です";

 

【messageの中身を表示する】

document.write("<p>" , message , "</p>");

 

var 変数(variable)・・・・・ データを記憶し、必要なときに利用するために設けられたもの

 

document.write()・・・・・ドキュメントに文字列を書き出す

document.write()−JavaScriptリファレンス

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javaの勉強01</title>
<script>

var heisei;
var fullYear;
var message;

heisei = 23;
fullYear = heisei + 1988;
message = "平成" + heisei + "年は西暦" + fullYear + "年です";
document.write( "<p>" , message , "</p>" );

</script>
</head>
<body>
<h1>タイトル</h1>
</body>
</html>

 

 ↓ 結果

f:id:weble:20141104202648p:plain

 

 

その2

 【アラート表示する】

window.alert( message );

 

ウィンドウ名.alert()・・・・・警告ダイアログを表示する

ウィンドウ名.alert()−JavaScriptリファレンス

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javaの勉強01</title>
<script>

var heisei;
var fullYear;
var message;

heisei = 23;
fullYear = heisei + 1988;
message = "平成" + heisei + "年は西暦" + fullYear + "年です";
window.alert( message );

</script>
</head>
<body>
<h1>タイトル</h1>
</body>
</html>

 

 ↓ 結果

f:id:weble:20141104203315p:plain

 

 

その3

 【入力させた値を代入する】

heisei = prompt("平成の年号を入力してください", 23);

 

ウィンドウ名.prompt()・・・・・文字入力ダイアログを表示する

ウィンドウ名.prompt()−JavaScriptリファレンス

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javaの勉強01</title>
<script>

var heisei;
var fullYear;
var message;

heisei = prompt( "平成の年号を入力してください", 23 );
fullYear = heisei + 1988;
message = "平成" + heisei + "年は西暦" + fullYear + "年です";
window.alert( message );

</script>
</head>
<body>
<h1>タイトル</h1>
</body>
</html>

 

 ↓ 結果

f:id:weble:20141104203400p:plain

 ↓ 「西暦231988年」となってしまう。

f:id:weble:20141104203408p:plain

 ↓ 

f:id:weble:20141104203415p:plain

 

 

その4

【整数として扱う】

fullYear = parseInt( heisei ) + 1988;

 

parseInt()・・・・・文字列の引数をパースし、指定された基数の整数を返す

parseInt() - JavaScript | MDN

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javaの勉強01</title>
<script>

var heisei;
var fullYear;
var message;

heisei = prompt("平成の年号を入力してください", 23);
fullYear = parseInt( heisei ) + 1988;
message = "平成" + heisei + "年は西暦" + fullYear + "年です";
window.alert( message );

</script>
</head>
<body>
<h1>タイトル</h1>
</body>
</html>

 

 ↓ 結果

f:id:weble:20141104203400p:plain

 ↓ 「西暦2011年」となった。(正解)

f:id:weble:20141104204440p:plain

 ↓ 

f:id:weble:20141104203415p:plain

 

 

参考


JavaScriptリファレンス(オブジェクト別)