【Java Script】Java Scriptの基本とファイルの作り方

チャッピー

Java Scriptができると何ができるようになるの？

こばゆた

今まで動かなかったWebページに動きをつけたり、もっと頑張ればゲームなんかも作れるようになるよ

きなこ

なんだか難しそう

こばゆた

確かにいきなりは難しいから順番に文法などをやりながら覚えていこう

まず今回はJava Scriptでできる事とファイルの作り方を中心にやっていくよ

今回の内容

1.何ができるか
2.Java Scriptの読み込み方
- 2-1.HTMLファイルに直接書く
- 2-2.ファイルを別に用意して書く
2.まとめ

1.何ができるか

こばゆた

初めに言ったように今まで作ってきたサイトは動きのないものでした

しかしJava Scriptを使うとサイトに動きを付けることができます

メッセージが変わります

おはよう

下部にメッセージがでます

ボタンの背景が変わります

メッセージがでます

右側にメッセージが出ます

※もう一度クリックで消えます

Hello!!

入力してボタンを押すと下の欄に入力されたものが出ます。

筋トレをした彼は…

簡単にですがこのような操作ができる様になります。

こばゆた

もちろん他にもたくさんやれる事があります

Java Scriptは言い換えると情報を取得したり、書き換えたりすることができると言う事になります。

2.Java Scriptの読み込み方

Java Script読み込み方ですがCSSの時のようにいくつか方法があります。

こばゆた

順番に説明していきます

2-1.HTMLファイルに直接書く

この場合、読み込ませる位置はどこに書いてもよいですが、一般的にはbodyタグの閉じタグの手前で読み込みます。

HTMLファイルへのJava Scriptファイルの書き方

STEP1

htmlの雛形を用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="練習用のサイトです">
  <title>Sample-site</title>
</head>
<body>

</body>
</html>

STEP2

bodyタグの閉じタグの手前にscriptタグを挿入して完成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="練習用のサイトです">
  <title>Sample-site</title>
</head>
<body>

<script>
  'use strict';

</script>
</body>
</html>

なぜbodyタグの手前に書くかというとHTMLファイルを読み込み終えてからJava Scriptでの操作をするためです。

またタグの中にある’use strict’;というやつですが…。

用語

‘use strict‘;

最初に記入することで厳格なエラーチェックをしてくれるもの

2-2.ファイルを別に用意して書く

こばゆた

こちらはCSSファイルの時と似ています

別ファイルの作り方

STEP1

bodyタグの閉じタグの前にファイルを作成する

<script src="名前.js"> </script>

src属性で値を好きな名前にし、拡張子を”.js”にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="練習用のサイトです">
  <title>Sample-site</title>
</head>
<body>

<script　src="名前.js"> </script>
</body>
</html>

bodyタグの閉じタグの直前に挿入します。

STEP2
別ファイルを作成する

ここでは”main.js”という名前にしてあります。
STEP3
「ファイルの作成をクリック」
STEP4
別ファイルにJava Scriptファイルが完成
```
'use strict';
//ここからJava Scriptを書いていきます
```
こちらも’use strict’;を忘れずに書きます。

こばゆた

どちらが良いかと言う問題ですが、短ければHTML内でも良いですがたくさんJava Scriptを書く予定なら後者の別ファイルで書くのが良いと思います

2.まとめ

Java Scriptの基本まとめ

Java Scriptでできることは…

HTMLで作ったサイトに動きを付ける事ができる
情報を取得したり書き換えたりができる

Java Scriptはbodyタグの閉じタグの手前でscriptタグを作りその中に書いていく OR　別ファイルを作成して書いていく

HTMLファイルに記入する場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <title>Document</title>
  </head>

  <body>
    <!-- 閉じタグの手前に記入 -->
    <script>
      'use strict';

    </script>
  </body>
</html>

別ファイルを作成して記入する場合

別ファイルを作って読み込む場合はsrc=”名前.js”で作成する
拡張子が.jsであることに注意

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <title>Document</title>
  </head>

  <body>
    <script　src="名前.js"> 

    </script>
  </body>
</html>

Java Scriptの先頭に’use strict’;を書くことで厳格なエラーチェックをしてくれる

'use strict';
//ここからJava Scriptを書いていきます