Javascript基礎知識＃1 #JavaScript

はじめに

この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

前提知識

HTML および CSS の基本的な理解。

Javascriptとは

・ブラウザで実行され、ブラウザを操作できる。
・HTMLやCSSでは作れない動的なサイトを作ることができえる。
・HTMLやCSSをリアルタイムで書き換えることができる。

実際にできること

例）・写真スライドさせるスライダー
　　・入力欄のエラー表示
　　・テキストの書き換え

main.js


const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('名前を入力して下さい');
  para.textContent = 'Player 1: ' + name;
}

こんな感じのコード。理解できなくてよい。（MDN参照）

用意するツール

・ブラウザ（chrome, firefox, IE, Safariなどなんでもオッケー（筆者はChrome））
・テキストエディタ（VScode, Atom　などなんでもオッケー（筆者はVScode））

記述方法

JavaScriptの記述方法は、次の2種類ある。

・HTMLファイルに直接記述する
・専用の別のファイルにJavaScriptのみ記述する(main.jsなど)

index.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      let x = 1;
      console.log(x);
    </script>
  </body>
</html>

↑HTMLファイルにscriptタグを書いて記述する。