javascript入門①実行環境からHello Worldまで

るだ

はじめに

Web×IoT メイカーズチャレンジに参加することになったので、そこで使用する言語であるjavascriptを始めてみました。学習のための個人的なメモです。

Web×IoT メイカーズチャレンジとは
パソコンやスマホ、ネットワーク機器だけでなく、これまで想定されなかったあらゆるモノがインターネットにつながる「IoT (Internet of Things) = モノのインターネット」。
そんな今話題の IoT の世界に一歩踏み出すきっかけとしていただけるよう、学生や若者を対象とした IoT システム開発のスキルアップのためのイベントである。

プログラミング初心者でも参加できるのでオススメです。全国各地で開催しています。→https://webiotmakers.github.io/

とりあえず書いてみる

前置きが長くなりましたが、とりあえず書きます。エディタはメモ帳で十分です。

<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
document.write("Hello world!!");
</script>
</body>
</html>

と書いて、ファイル名をsample.htmlとしましょう。

「あれ、これHTMLじゃない…？」
と言われそうですが、HTMLの中にjavascriptのコードを書いています。

<script>
document.write("Hello world!!");
</script>

↑つまり、<script>　javascriptのコード　<script>で目的のコードが動かせるようになります。

では、このファイルを実行させたいと思います。他の言語と違い特別な環境構築がいらないです。Firefox、Chrome、 Safari、 IEなどのブラウザでうごきます。

ファイルをブラウザにD&D(ドラックアンドドロップ)しましょう。右クリックからのプログラムから開くでもできます。

実行結果は以下のようになります。

Hello world!が出来ました。

ちなみに

.htmlファイルと.jsファイルで分けたい時は

<script type="text/javascript" src="sample.js"></script>

と書き、これをsample.htmlとします。

新たに

var greeting = "おやすみ";
console.log(greeting);

と書いてこれをsample2.jsとし、先ほどのsample.htmlと同じディレクトリ内に入れます。

.htmlをブラウザにD&Dして…あれ？なにも出ません。

大丈夫です。ctrl + shift + I を押して、右側にあるconsoleボタンを押しましょう。

おやすみと表示されました。consol.logではこのようにコンソールに表示されるようになっているので、デバック用に使えるということです。