1.Javascript-1

2022.12.08

Javascriptとは

JavaScriptとは、HTMLやcssと一緒に使いWebサイトに「動き」をつける事ができるプログラミング言語のことです。

JavascriptがなくてもWebサイトを見ることは出来ますが、ただ文字が書いてあったり、画像が貼られていたりするだけで様々な操作が出来ず、現代のサイトにしては少々不便に感じてしまうかもしれません。
そこでJavascriptを使用すると、問い合わせのフォームやリアルタイムで動くグラフなどをサイトにつけることができます。

プログラミング言語はたくさんありますが、その中でもJavaScriptはプログラミング初心者の方にも入門しやすい言語として人気です。人気の理由は、エディタとブラウザさえあれば動作する手軽な実行環境と、アニメーションとして動きが見えてモチベーションに繋がりやすいところです。


プログラミング言語の中に 「JavaScript」と似たような名前の「Java」言語がありますが、 「JavaScript」と「Java」は別の言語です。
「JavaScript」を略して使いたいときは「JS」といいましょう。

インターネットもしくはローカルPCでWebページを開いた時、主にクライアント（ユーザー）PC側のブラウザーで実行される言語は、以下の3つです。

HTML
単なるテキストや画像からなるページに「見出し」や「段落」といった構造と意味を持たせる言語です。

CSS
HTMLに「文字や背景の色」や「余白」といったレイアウトやデザインを設定するための言語です。

JavaScript
「メッセージボックスの表示」や「HTMLの操作」、「時刻の表示」、や「ゲーム」など、ページに様々な「動き」や「機能」を追加する言語です。

「JavaScript」は、「HTML」や「CSS」が翻訳された後で実行されます。

JavaScriptは身近にある様々な機能の実装に使われています。

学習の準備

JavaScriptの学習を始める前にまずは環境を作りましょう。

JavaScriptは、ブラウザ上で機能する言語です。
そのため、使用するブラウザを統一したいと思います。

本教材では「Google Chrome」というブラウザの使用を前提で進めていきます。
他のブラウザでも問題はありませんが微妙に操作が異なる場合があるので注意してください。
また実際にエンジニアとして働いた時Google Chromeを使ってる現場がほとんどなので、慣れておいて損はないと思います。無料でダウンロードできるので、よければダウンロードしてみてください。

以下に手順が記載されています。
https://support.google.com/chrome/answer/95346?co=GENIE.Platform%3DDesktop&hl=ja

本教材で「ブラウザ」という言葉が出てきたら、すべてGoogle Chromeブラウザのことだと思ってください。

HTML上でJavascriptを使う

まず、JavaScriptをHTMLに紐づけます。
そのためにはHTMLファイル(.html)とJavaScriptファイル(.js)が必要です。
ポイントさえ抑えればとても簡単なので実際にやりながら覚えましょう。

  1. 「TEST」という名前のフォルダを作り、その中に「html」フォルダと「js」フォルダを作ります。
  2. 「html」フォルダの中に「index.html」というファイルを作成し、「js」フォルダの中に「index.js」というファイルを作成してください。

画像のようになれば準備完了です。（cssを使う場合は画像のようにcssフォルダを作りその中にcssファイルを作成しましょう）

それでは、index.htmlをエディタで開き、例を参考に「index.html」にひな形を記入していきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>jsを使えるようになる</p>
</body>
</html>

そして、body要素の終端に以下を書き込みます。

<script type="text/javascript" src="../js/index.js"></script>

このscript要素は実行できるコードを埋め込んだり参照したりするために使用されます。
通常、JavaScript のコードの埋め込みや参照に使用されます。

<body>
  <p>jsを使えるようになる</p>
  <script type="text/javascript" src="../js/index.js"></script>
</body>

属性の値を見ていきましょう。
type=”text/javascript” →スクリプトが JavaScript であることを示します。 
src=”../js/index.js”→読み込みたい Jsファイルのファイルパスを記入しています。

これでHTMLファイルの設定は完了ですので、一度ファイルを保存しましょう。
（保存:Windows control+S, Mac command+S）

次は、Jsファイルを編集していきます。
まず、先ほど作成した index.js を開きましょう。

そして、以下コードを記入してください。

alert("私がJavascriptです");

記入できたら、保存をしてHTMLファイルをブラウザで開いて表示してみてください。

このようなメッセージボックスが表示されたら、成功です。
次回はJavascriptでめちゃくちゃ活用されるconsoleについてです。

PAGE TOP