JavaScript(TM)はブラウザ上で動きを付けるために生まれたプログラミング言語です。 ECMAScript（イクマスクリプト）として標準化され、毎年のようにバージョンアップしています。 JS（ジェーエス）と呼ばれています。 HTMLやCSSと合わせて使えるようになると、表現の幅がぐっと広がって楽しいです！
ひとまず、BMIを計算するwebアプリを打ち込んで、動かして見ましょう。意味はわからなくてOKです！
<body>
Height <input id="height">cm<br>
Weight <input id="weight">kg<br>
<button id="btn">BMI</button><br>
<textarea id="output"></textarea><br>
<script type="module">
btn.onclick = () => {
const bmi = weight.value / (height.value / 100) ** 2;
const s = bmi >= 18.5 && bmi < 25 ? "Good! " : "Bad... ";
output.value = s + bmi;
};
</script>
</body>
bmi.html など、.html で終わるファイルとして保存し、ブラウザで開くと、入力ボックスがでます。
身長、体重を入力し、BMIボタンを押すと、計算されたBMIと、良いか悪いか判定してくれます。（出てこない場合、間違いがないか見比べてみましょう）
※プログラムにある通り、どこにも送信されないのでご安心を！）
JSは、scriptタグに type="module" と書き、タグ内にプログラムを書いて、htmlファイルを作成し、開くことでブラウザで動きます。
<script type="module">
alert(1 + 1);
</script>
alertはメッセージボックスを表示する組み込み関数です。1 + 1 を計算した結果が表示されます。
HTMLの復習はこちら → HTMLはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_html.md
1から10までの数を表示するプログラム
<script type="module">
for (let i = 0; i < 10; i++) {
alert(i);
}
</script>
何度もメッセージボックスがでますね。10ならいいですが、100とか1000なら大変です！
そこで、便利な print 関数を用意しました。
<script type="module">
import { print } from "https://js.sabae.cc/";
for (let i = 0; i < 10; i++) {
print(i);
}
</script>
ブラウザ内で表示されましたね！
import（インポート）を使って、https://js.sabae.cc/ 内で定義している関数 print を読み込んで使っています。
ネット上にある、いろいろな機能をimportして使えます！
h = 150 として、表示しようと下記のように作ってみると・・・。
<script type="module">
import { print } from "https://js.sabae.cc/";
h = 150;
print(h);
</script>
何も表示されません。
JavaScriptコンソールを開くと、エラーが起きていることがわかります。
Uncaught ReferenceError: h is not defined
at print.html:4
print.htmlの4行目で、hが定義(define)されて無いよと書いてあります。
<script type="module">
import { print } from "https://js.sabae.cc/";
const h = 150;
print(h);
</script>
hを定数(const)だよと書き、ブラウザをリロード(F5)することで、無事150と表示されるようになります。
思ったとおりにいかないときは、JavaScriptコンソールを開きましょう。
JavaScript コンソールを開く方法 – Lucidchart
https://lucidchart.zendesk.com/hc/ja/articles/207323676-JavaScript-%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%82%92%E9%96%8B%E3%81%8F%E6%96%B9%E6%B3%95
今度は、もう少しちゃんとしたHTMLとして作ります。
<!DOCTYPE html><html><head><meta charset="utf-8"/>
<title>BMI計算</title>
</head>
<body>
身長<input type="text" id="height">cm<br>
体重<input type="text" id="weight">kg<br>
<button id="btn">BMI</button><br>
<textarea id="output"></textarea><br>
</body>
</html>
inputタグ、buttonタグ、textareaタグで入力や結果表示用のボックスが作れます。
...
<textarea id="output"></textarea><br>
<script type="module">
import { print } from "https://js.sabae.cc/";
btn.onclick = () => {
alert("ボタン押された！");
};
</script>
</body>
textareaタグの下にJSのプログラムを追記しましょう。
HTMLのタグでidで指定されたものは、プログラム内で使えます。
idがbtnと指定された、BMIと書かれたbuttonタグが押されたら(onclick)、alertでメッセージがでます。
btn.onclick = () => {
const bmi = weight.value / (height.value / 100) ** 2;
output.value = bmi;
};
BMIを計算するように改造しました。
const bmi = weight.value / (height.value / 100) ** 2;
let s = "";
if (bmi < 18.5) {
s = "やせ型";
} else if (bmi < 25) {
s = "標準";
} else {
s = "肥満";
}
output.value = `${s}です BMI ${bmi}`;
痩せ型か肥満かの表示を追加しました。
見た目をかっこよくすると人に見せたくなりますよ！titleタグの後ろにCSSを追加します。
<title>BMI計算</title>
<style>
body {
background-color: hsl(50, 100%, 80%);
font-family: sans-serif;
}
* {
margin: 1em;
}
textarea {
width: 20em;
height: 5em;
}
</style>
</head>
間はデザインの基本！背景色とフォントも変えてみました。画像を貼ったり、いろんな改造にチャレンジしてみてください！
うまく行かなかった場合、こちらの完成版とよく見比べてみましょう。
HTMLの復習はこちら → HTMLはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_html.md
CSSの復習はこちら → CSSはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_css.md
GitHubにアップロードしてみましょう
https://github.com/code4sabae/website/blob/master/README.md
しゅこ / Shuko
62行のプログラムをみてみる src on GitHub
2D物理エンジンを使った簡単なサンプルです
JSは本格的なプログラミング言語、大規模な開発にまで使えます。詳しく知りたい方は、こちらのサイトがおすすめです。
JavaScript の基本 - ウェブ開発を学ぶ | MDN （ブラウザの組み込み関数やクラスの説明豊富！） https://developer.mozilla.org/ja/docs/Web/JavaScript
JavaScript Primer - 迷わないための入門書 #jsprimer（やさしく読みやすい）
https://jsprimer.net/