メモ帳でできるプログラミング
メモ帳でできるプログラミング JavaScript

「とりあえずやってみよう」の解説

先ほど作った test.html は、HTML（エイチティーエムエル）という言語で書かれています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
function hello()
{
	alert('こんにちは');
}
</script>
</head>
<body>
<h1>test</h1>
<button type="button" onclick="hello();">あいさつ</button>
</body>
</html>

<body>～</body> に書かれた内容は画面表示に影響します。「test」という見出しや、「あいさつ」というボタンはここに書かれています。

<script>～</script> には、JavaScript（ジャバスクリプト）という言語で書かれたプログラムが入っています。

その他の部分は、知らないと意味が分からないですが、そういうおまじないが必要なのだと思っておきましょう。

「onclick="hello();"」は「このボタンをクリックしたら hello() を実行してくださいね」という指示になるのですが、実はいろんな書き方があります。この先作るプログラムでもいろんな書き方をする可能性がありますが、そういう書き方でもいいんだなあと思って読んでください。

見た目の調整、デザインを担当する部分も追加すると、以下のようになります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body {
	background-color:#ffff00;
}
</style>
<script>
function hello()
{
	alert('こんにちは');
}
</script>
</head>
<body>
<h1>test</h1>
<button type="button" onclick="hello();">あいさつ</button>
</body>
</html>

<style>～</style>というタグが登場しました。ここにはスタイルシート（CSS）という言葉で書かれていて、ここで「bodyの背景色（background-color）を黄色（#ffff00）にしてね」と指示しています。

上のサンプルプログラムを test.html の名前で保存して、Webブラウザで開くと、以下のようになります。

「メモ帳でできるプログラミング JavvaScript」では、上のような形で、HTML（内容）、CSS（見た目）、JavvaScript（動作）を書く形でプログラムを作っていきます。