学習の書き留め プログラミング勉強中

プログラミングで学んだことを日記として残して行こうと思います

今日の学習

今日学んだこと 2021/01/18

学習項目

Java Script 基礎

学習内容

まず、script src でjsのファイルを読み込む。

<head>
  <link rel="stylesheet" href="index.css">
  <script src="index.js"></script>
  <meta charset="UTF-8">
  <title>JavaScriptの練習サイト</title>
</head>

jsではHTMLに対して行う処理の要求のことをイベントという。
また、イベントを認識して、コードが動き出すことをイベント発火という。

主なイベント発火の例

イベント名 説明
loadイベント ページ全体が全て読み込まれた後に、イベント発火する
clickイベント 指定された要素がクリックされた時に、イベントが発火する
mouseoverイベント マウスカーソルが指定された要素上に乗った時に、イベントが発火する
mouseoutイベント マウスカーソルが指定された要素上から外れた時に、イベントが発火する

イベントの発火方法

要素.addEventListener(`イベント名`, 関数)

記入例

window.addEventListener('load', function(){
  const sample = document.getElementById("sample")
  sample.addEventListener('mouseover', function(){
    console.log("カーソルを当てた際のイベント")
  })
})

こんな感じになる。まず、javascriptのコードはbody要素より先に読み込まれる。
そのため、最初に window.addEventListener('load', function(){})の関数の中に記載し、ロードをした後に全てのイベントが発火するようにする。
その後constで何を動かしたいのかを定義する。その際にdocument.getElementById()を使って、どのIDかを指定し、その要素を取得する。 あとは、取得した要素をどう動かすのかをそれぞれのイベントに合わせて記載する。
このコードはページが表示された際に、HTMLのsampleIDを取得し、マウスが当たった際にイベントを行うように記載してます。

まとめ

まずはどう動かせばいいのかをつかむ！