0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Javascript基礎知識#1

Last updated at Posted at 2020-11-14

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

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

##目次
・前提知識
・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タグを書いて記述する。

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

↑HTMLファイルとは別のmain.jsファイルを作り、HTMLファイルでmain.jsを読み込む。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?