【超初級編】Java Scriptの書き方・表示方法

4807 ワード
JavaScript JavaScript テキストリンク

📗 Java Scriptとは【基礎知識】

プログラミングにはフロントエンドとサーバーサイドが存在します。

サーバーサイド=PHP,Ruby,Mysql,python等
ユーザーからは見えない、サーバー側で働くプログラムのことです。

クライアントサイド＝JavaScript,HTML,CSS
これはユーザーがグーグルクロームなどのブラウザを通して動く仕組みになります。

今回はクライアントサイドのJavaScriptについて基礎的なことを記入していきます。

📗 環境

Mac OS
VSCode
Google Chrome

📗 簡単なコードを書いてみよう！【準備】

  1. デスクトップ上に適当なフォルダを作って見ましょう♪
  2. そのフォルダをVSCodeで開いて、〇〇.htmlという形でファイルを作成してください。
  3. 〇〇.htmlというファイルに下記を記載しましょう。（EmmetというVSCodeの仕様で、!と記載してtabキーを押すと出てきます）
〇〇.html
<!DOCTYPE html>
<head>　//headはHPの情報などを書いていく場所です。
  <meta charset="UTF-8">　　//文字コードをutf-8に設定します。国際基準の規格で主流となっています。
</head>
<body></body> //bodyの中が実際にHPに表示されるものになります。
</html>

📗 主にJSを記入する場所【３箇所】

  • JSは主に１〜３のどこかに記載します。
〇〇.html
<!DOCTYPE html>
<head>　//headはHPの情報などを書いていく場所です。
  <meta charset="UTF-8">　　
 1 ←　ここ 
//以前はこの部分に記載するのが主流でしたが、JSを読み込んでから表示という流れになるので表示に時間がかかるため現在はあまりここには書きません。
</head>
<body>
 2←　ここ　//表示の前に書くパターンもあります。
　表示
 3　<script>この中にJSを書いていく。</script>
// 現在はこの３番の部分への記載が主流となっています。なのでここに基本的に記載していきましょう
</body> 
</html>

ただしJSのコードが非常に長くなる場合は.js形式でファイルを別に作り、そちらに記載してscriptの中で呼び出します。
呼び出す場合は下記を参考にしてください。

〇〇.html
<script src="〇〇.js"></script> //srcはsourceの略です。元になるファイル名を記載します。

📗 JSのコードを書いてブラウザで確認する。

1.では、hello.jsというファイルをVSCodeで作ってください。

２.上記を参考にscript src="hello.js"と記載してみましょう。

３.下記コードを記載してみましょう。

〇〇.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello!!</title>
</head>
<body>
  ここが表示されます。
  <script src="hello.js"></script>
</body>
</html>
hello.js
console.log('Hello World! from hello.js');

４.ページを更新し、ここが表示されます。と表示され。デベロッパーツールのconsoleにて"Hello World! from hello.js"と表示されていれば成功です！

📗 補足　ファイルをブラウザに表示させるには・・・


画像の部分の　ファイル→ファイルを開く→作ったフォルダをクリック→開きたいhtmlファイルを選択
でブラウザに表示できます。

📗 次回予告

今回はコンソールに表示させるまでを分かりやすく解説しました。
次回は、初歩的なJSの記入例を紹介したいと思いますので是非初学者の方は一緒に勉強しましょう♪

[TIL] 2020/11/24
[セットトップ]JavaScript操作Cookie——基礎編