![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595956__340.webp)
先生!! 調べたんですけど、なんか最近巷ではJavaScriptっていうものがバズっているらしいとゆう噂を聞いたんですけども、先生はJavaScriptってご存知ですか?
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
バズってる訳ではないけども、JavaScriptは様々なWebサイトやWebアプリで使われているプログラミング言語だよ。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570514__480.webp)
なんですって!! わたくし、そのJavaScriptとゆうものを教えてほしいですわ。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
じゃあこれを見れば良いよ。
JavaScript wiki
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595956__340.webp)
では早速みてみますわね。
…………………………………….おいっ!!
難しすぎるだろ!!!
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
では簡単に解説するね。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570515__480.webp)
最初からそうしろよ、、
JavaScriptとは
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
JavaScriptとは、
htmlやcssで作られたWebサイトなどに動きを加えることができる、Webブラウザ上で動作するプログラミング言語なんだ。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570515__480.webp)
やはり、あまりよくわかりませんわ。
動きを加えるってどうゆうことですの?
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
そうだね、例えば、
PUSHボタンをクリックすると
背景色が変わるJavaScript。
左右の矢印を押すとdivが
スライドするスライドショー。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595956__340.webp)
こんなすごいものが作れますの!?
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
簡単に作れるよ!!
でもいきなりこんなのを作るのは少し大変だから、まずはJavaScriptを読み込んでWebブラウザで実際に動作をさせるところをやってみよう。
JavaScriptを読み込む。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
それじゃあhtmlからJavaScriptを読み込む方法を教えるね。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
JavaScriptを読み込みたいhtmlファイルと同じフォルダの中に、main.jsというファイルを作成して、htmlのbodyタグの閉じタグの直前に
<script src="main.js"></script>
を記述するんだよ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595957__480.webp)
簡単ですわね!!!
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
そして。作成したmain.jsのファイルに
'use strict';
console.log('TEST');
と記述しみてね。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
そしてhtmlをブラウザで読み込んで、ブラウザの開発者ツールのコンソールで確認してみよう。
![](https://hiros-hobby-house.com/wp-content/uploads/2022/08/dc947e9e65e609fb15f76ae7260ecfe2-1024x576.png)
![](https://hiros-hobby-house.com/wp-content/uploads/2022/08/a04c0d39c7a32707dd3e1eafc79d6ed4-1024x576.png)
![](https://hiros-hobby-house.com/wp-content/uploads/2022/08/85f1100acbfd4b098f3165697fc8ecad-1024x576.png)
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
そうするとコンソールにjsファイルに記述したTESTが表示されるようになったよ。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570514__480.webp)
本当ですわ!!
こんな簡単にJavaScriptが使えるようになるんですわね。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
他にもJavaScriptはいろいろなことができるんだけど、それはまた別のお話、、、
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570515__480.webp)
もったいぶんなよ、、、
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595957__480.webp)
ではまた教えてくださいね。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
うん、それじゃあまた次回ね。