Embedded Files
javascriptはhtmlの中で展開される言語で動きなどを実現でき、サイトを動的なものに変えて魅力を加えます。ここでは簡単なjavascriptについて説明します。
document.writeで文字を表示する
document.writeで文字を表示する
document.writeを使って文字を表示してみましょう。
ここでは前回利用した背景画像「css_backimage.png」とscript、「superimpose.css」をそのまま用いています。なくても支障はありません。HTMLのコードは以下のようになります。
<script></script>の部分がjavascriptです。ここでは単に表示コマンドdocument.writeを用いてデータ"これはjavascriptで記載しました"を表示しているだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="superimpose.css"> </head>
</head>
<body>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<h2>変わった市松模様</h2>
<script>document.write("これはjavascriptで記載しました");
</script>
</div>
</body>
</html>
テキストを変数varにする
テキストを変数varにする
さて次は表示するテキストを変数として利用する方法です。これには変数宣言「var」を利用します。上のコードで変更のあるbodyの部分だけ記載します。ここで は、変数「x」に"これはjavascriptで書いてみました。"を代入しています。その後で、document.writeの引数にxを代入して表示させています。
<body>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<h2>変わった市松模様</h2>
<script>
var x = "これはjavascriptで書いてみました。";
document.write(x);
</script>
</div>
</body>
変数だから足し算もできる！
変数だから足し算もできる！
次にyという変数に別のテキストを代入して、document.writeの引数に、x＋yを指定してみましょう。
<body>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<h2>変わった市松模様</h2>
<script>
var x = "これはjavascriptで書いてみました。";
var y = "これは初めてのscriptです。";
document.write(x + y);
</script>
</div>
</body>
数字を代入すれば計算もしてくれる
数字を代入すれば計算もしてくれる
もちろん変数や足し算がテキストでできるのであれば、数字を変数に代入すれば計算もできます。電卓の方が早いですが・・・。ここでは「３＋４」を行い答え「７」が表示されます。
<body>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<h2>変わった市松模様</h2>
<script>
var x = 3;
var y = 4;
document.write(x + y);
</script>
</div>
</body>
関数として定義する
関数として定義する
いきなり関数の話をするとえ〜と思われる方もいるかもしれません。でも関数とは英語ではfunction(ファンクション）です。キーボードの上によくファンクションキーがありますね。ファンクションキーにはあらかじめ操作が割り当てられていて、そのキーを押すと目的の作業が行われます。ショートカットキーと似ています。例えばコピーは「command(control)+c」などです。つまり繰り返し利用するには何か名前をつけてショートカットコマンドとして宣言してあげるものです。なので、数学の関数とはにアンスが違います（本来は同じですが、数学の関数は計算に特化している）
以下のscriptではheaderに functionを利用したscriptを記載して、yourname()という関数(ファンクションキーに相当)を定義しています。
textinは変数でテキストで入力された文字が変数textinに代入されます。
yournameという変数に入力されたtextinのデータを代入しています。
これを使って文章を作り、それをtextvarという変数に代入しています。
このfunctionの部分は<head></head>の中にあるのでwebには表示されることはありません。裏で動く感じですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="superimpose.css"> </head>
<script>
function yourname(){
var textin =document.querySelector('#textin');
var yourname = textin.value;
var textvar = document.querySelector('#textvar');
textvar.textContent = "こんにちは、" + yourname + "さん";
}
</script>
</head>
<body>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<h2>ご挨拶</h2>
<p id="textvar">あなたの名前は？</p>
<input type="text" id="textin">
<button onclick="yourname();">Click</button>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse