HTMLとjavascriptの基礎

レッスンではobnizをHTMLとJavascriptを使って操作しています。
今回はそれらの簡単な使い方を見てみましょう。

HTMLはただの文章

HTMLはブラウザでページを表現するための言語です。
どんな文字がどのぐらいの大きさで、どのへんに表示するのか。押されたらどこへジャンプするのかなどを書くものです。

例えば、このようなHTMLを用意して開くと、Helloと表示されます。
obnizのプログラム画面で書いて開いてもいいですし、パソコンならテキストファイルに書いて、ブラウザで開いても良いです。

<!-- HTML Example -->
<html>
<body>
Hello
</body>
</html>

これを見ると<html>で始まり、</html>で終わっておりますが、これは「ここからここまでがHTMLだよ」という意味です。
HTMLではこのように<>で挟んだものが1つの塊となります。

ブラウザはこのHTMLのをみて「あ、ここらここまではHTMLなんだね。じゃあ表示しましょう」となるわけです。

この上の例が文字を表示するのに最小の構成となっています。
実際にブラウザに何かを表示するのはHTMLの中のbodyで囲まれた中になります。
ここに書いたものがそのまま画面に出ます。

文字の修飾

htmlにはいろいろな修飾記号があります。例えば<strong>で囲った文字は太文字になります。

<!-- HTML Example -->
<html>
<body>
<strong>Hello</strong>
</body>
</html>

または囲い記号にさらに指示を書いてより細かくデザインすることもできます。たとえばこのようにすれば太いだけでなく赤い文字となります。

<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
</body>
</html>

テキストの他に画像を表示することもできます。
画像の表には<img>を使います。
例えばhttps://obniz.io/doc/images/obnizfront.jpg という画像を表示するには

<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<img src="https://obniz.io/doc/images/obnizfront.jpg">
</body>
</html>

これで表示できます。</img>と閉じていませんが、このように閉じなくてもいいものもあります。

あなたが見ているWebページはすべてこのHTMLによってできています。文字の色や太さや位置。画像の位置やサイズなど
これらを組み合わせれば自由にデザイン可能です。

javascript

さらに、HTMLの中には文字の他にプログラムも組み込むことができます。それがjavascript(ジャバスクリプト)という言語です。

HTMLの中で<script>と囲った部分の中にプログラムを書くことができます。

<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<script>
  console.log("This is javascript");
</script>
</body>
</html>

このようにすると、Helloは画面にでてきますが、console.log("This is javascript");は出てきません。

これは、scriptの中のものはプログラムだと思われているからです。
なので、ここに書くものはただの文章ではなく実行されるプログラムです。
上から1行ずつ実行されます。

じゃあこのjavascriptで何をするかというとまず、HTMLを操作することができます。
先ほどのHelloをjavascriptから書き換えてみましょう。

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong>Hello</strong>
<script>
  $("strong").text("Whats up")
</script>
</body>
</html>

画面にはWhats up と表示されると思います。しかしよく見てください。書いてあるのはHelloです!
プログラムを見てみましょう。
javascriptで$("strong").text("Whats up")というプログラムが書いてあります。
これは、「strongで囲まれているものの文章を Whats up に書き替えなさい」というプログラムです。

なので、Helloと表示するように書いてあったのですが、javascriptによって、それがWhats upに書き換えられたのです。
まったくもって無駄なプログラムです。なら最初からHelloじゃなくてWhats up と書いておけばよかったのです。
しかしこれは例で、このようにHTMLの中にあるjavascriptはHTMLの中のものを上書きしたり、読み取ったりなどいろいろなことができます。
javascriptからインターネットにも接続できるので、インターネットからニュースを持ってきてHTMLの中に表示したりなんてこともできます。
その場合は無駄ではなくなりますよね。

ここからがjavascriptの本気です。
先ほどはjavascriptから文字を出しましたが、逆にHTMLからjavascriptを動かすこともできます。

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong id="here">Please Touch this text</strong>
<script>
  $("#here").on("click", function(){
    $("#here").text("Touched!")
  })
</script>
</body>
</html>

さて、画面には「Please Touch this text」と表示されていると思います。
この文字をマウスならクリックで、スマホなら指で触ってみましょう。
文字が「Touched!」になると思います。

このプログラムでは文字が触ったときだけに先ほどと同じような文字の書き換えをしています。
このようにjavascriptからHTMLだけでなくHTMLからjavascriptを動かすこともできるわけです。

よく見ると<strong id="here">というのがあります。
HTMLではidというのを使ってカッコ1つ1つに名前をつけることができます。
そしてjavascriptでも$("#here")という書き方をしていますが、これは「hereというidを持つもの」という意味です。
これによりid=hereがクリックされたら、id=hereの文字を書き換える というプログラムができているわけです。

strongは太文字ですから、他にもふと文字があるときに全部が反応して困ってしまいます。
なので、このようにidを使う事がよくあります。

外部javascriptの取り込み

ちなみにHTMLの中にこのようなものが追加されています。

<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

これは、jQueryというjavascriptのプログラムで、別の場所で公開されているものです。
ためしにhttps://code.jquery.com/jquery-3.3.1.jsをクリックしたらとても長いjavascriptのプログラムがでてきます。
このように<script>というタグを書くことで、まるでここにそのjavascriptが書いてあるかのようにそれを取り込んで実行することができます。

いろいろな人が書いてくれたjavascriptのライブラリが世の中にはたくさんあります。それらをこうやって取り込むだけですぐに使うことができるのがHTMLの魅力です。

obniz.js

obnizと接続して使うためのjavascriptプログラムであるobniz.jsももちろん公開さています。
LEDをつけるレッスンなどでもすでに使用します。

https://unpkg.com/obniz@1.14.1/obniz.js

これがobniz.jsです、これを取り込むことでobnizが利用できます。

obniz.jsを使うと番号を指定するだけで簡単にobnizにインターネット経由で接続できます。
OBNIZ_ID_HEREのところにつなぎたいobnizのidを書き込むと
onconnect で設定した関数が呼ばれます。

「関数」や「変数」などがわからない方は「javascript 入門」などで検索してみて下さい。いいWebサイトがたくさん出てきます。

var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  // connected!
}

試しにobnizとつないで繋がったところで文字を書き換えれば

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<strong id="here">Not online</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  $("#here").text("Online")
}
</script>
</body>
</html>

このようにすると指定した番号のobnizと接続ができたところでid=hereの文字をOnlineに書き換えることができます。

すでに画面上の文字を触ったら何かをするというプログラムは勉強しています。
なので、画面の文字を触ったらLEDをつけるなんてのも簡単にできそうですよね。

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<strong id="here">Touch to turn on LED</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  var led = obniz.wired("LED", {anode:0, cathode:1});
  $("#here").on("click", function(){
    led.on();
  });
}
</script>
</body>
</html>

これで「Touch to turn on LED」を触るとobnizのio0とio1に繋いだLEDが点灯します。
LEDのレッスンでやったのと同じですね。

LEDじゃなく温度センサーを繋げば温度を画面に表示したり、
グラフを表示するようなjavascriptライブラリを取り込んでグラフにしたりなんてはとても簡単にできますね。