この記事の対象読者
・JavaScriptを始めて見たいけど、どうにコードを書いてどうやって実行するか分からない人
・JavaScriptをhtmlとは別のファイルから読み込める様にしたい人
・ウェブ開発をやった事は無いけど興味がある暇な人
JavaScriptとは
ざっくり言うと、環境構築がいらずで開発を始められてウェブサイト、アプリ、サーバーなど多岐に渡って色々な事が出来るプログラミング言語だと思っていたら大丈夫だと思います。
※本当はもっと細かく説明した方が良いと思うが今回やる事に関してだったらこれくらいで十分だと思います。詳しく知りたい人はwikiを見て下さい。
下準備
ここからはBracketsを使って行きますが、コードを貼り付けますので無くても大丈夫です。もしBracketsを入れたい人はこちらを参考にしてくれたら嬉しいです。(ちなみに動作環境はfirefoxです。)
始めにfinderを使って、書類のフォルダーにJavaScript_testとフォルダーを新規で作って置いて下さい名前は正直どうでも良いです。次にbracketsを開いて新しいファイルを2つ開きそれぞれindex.htmlとtest.jsと言う名前で保存して下さい。それではindex.htmlの方から編集をして行きます。!と入力してからtobキーを押したら下準備は完成です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
本来ならlangをjaに変更したり、titleを変えたりしますが今回はあくまでテストなので放って置きます。
htmlに埋め込み
始めは、超簡単なJavaScriptを直接埋め込む事をやって見ます。これは単にスクリプトタグで囲んで、その中にプログラムを書くだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.write(1+1);
</script>
</body>
</html>
次にJavaScriptを別で読み込むコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="test.js">
</script>
</body>
</html>
document.write("<h1>Hello World</h1>");
jsでdocument.writeを使うときはh1の様にタグを付ける事でcssに対応させる事が出来るので、cssでHello Worldの色を変える事も出来ます。
終わりに
JavaScriptは今までやった事があまりなかったので間違っている所はコメントで教えてくれると憂しいです。
参考にしたサイト
https://www.javadrive.jp/javascript/before/index4.html