現在、個人で考えた欲しいものを制作していると、
「次にやりたいことのために未知の言語が必要になる」
といったことが往々にしてある。
今回もそんな感じで、
内容は学生だった頃にも少し触れたことがある、JavaScriptだ。
というわけでJavaScriptの基本中の基本から触れていく
記憶の中のJavaScript
軽く覚えているのがJavaScriptはインタプリタ型のプログラミングであるということ。
インタプリタ型とは、記述したプログラムを直接実行し、実行時にコンピュータが実行できる形へ変換しながら処理をしていくもの（だったと思う）。
プログラミング記述から実行への待機時間（コンパイルする時間）がない代わりに、実行環境はそこまで上等ではないということ。
HTMLに直接記述することもできるし、外部ファイルからも参照ができる。
記述の場所も特に制限されておらず、記述方法も豊富。
総じて自由度が高い印象。
記述の規約に固められた人間からすると、自由度が高すぎて難しい気がする。
お試しHTML+JavaScript
というわけで基本的なHTMLと直接記述するJavaScriptについて。
まず基本的なHTMLを
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストケース</title>
</head>
<body>
<h1>Hello,HTML</h1>
</body>
</html>とすると、JavaScriptは<script>タグを使って、<html>タグ内（3～9行間）のどこでも記述できます。
例えば<head>タグ内だと、
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストケース</title>
<script type="text/javascript">
//ここに記述「//」はコメントアウト
</script>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>といった形になります。ファイルを表示
同じ要領で、例えば<body>タグ内や<body>タグの前後などにも記述できます。
そして<script>タグ内（7行目）にJavaScriptを記述することができます。
まずはJavaScriptの超基本documentオブジェクトのwrite()メソッド
document.write();引数を渡すと、それを開いている文書に書き込みます。例えば先ほど記載した<head>タグ内（7行目）を変更してみると、
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストケース</title>
<script type="text/javascript">
document.write("Hello,JavaScript!");
</script>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>このようになる。ファイルを表示
文書に書き込む指示しかしていないので、記述したタイミングで実行される。
これを例えば以下のように<body>タグ内に記述すると、
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストケース</title>
</head>
<body>
<h1>Hello, HTML</h1>
<script type="text/javascript">
document.write("Hello,JavaScript!");
</script>
</body>
</html>Hello,HTMLの後に呼ばれるのでこうなる。
ついでに外部ファイル参照
JavaScriptのファイル（.js）を読み込んで実行することができる。
方法は簡単で、<script>タグにソースのurlをsrc属性で与えてやるだけである。
試しに先述の例を外部ファイルとして参照してみる。
<script>タグ内
document.write("Hello,JavaScript!");を「hello.js」として保存する。そして先ほどのHTMLを
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストケース</title>
</head>
<body>
<h1>Hello, HTML</h1>
<script type="text/javascript" src="hello.js"></script>
</body>
</html>/* Your code... */とすると、こうなる。
とっかかりは大体こんな感じだと思います。
あとはJavaScriptの文法を覚えて好きなように記述していくだけかな。
次回は少し柔軟な記述を学んでいきます。
御覧いただきありがとうございました。