Project_OKI’s diary

エンジニアの勉強ブログ

HTML,CSS,Javascript7(javascriptの導入)

HTML系

javascriptの導入、記載方法ついて

この記事では、javascriptの導入、何が出来るかなどについて記載する。

 

1. 目的

　・javascriptの導入について理解する。(どこに書くかなど)

 

目次

 

2. javascriptとは

　・プログラミング言語の一つで、HTMLのコントロールに使用される。

　・HTMLに動的な機能の追加などが出来る。

　・webアプリなどを作成する時など必要

 

3.javascriptの書き方と、書く場所

<script>
// javascriptのコードを記述する
</script>

例：

<script>
　　// javascriptのコードを記述する
    let element = document.querySelector("h1")
    element.innerText = "タイトル"
</script>

　・これで、h1というタグを取得し、その文字列を「タイトル」に変更している。

　・documentはhtmlの要素を取得するのによく出てくる。

　→参考：Document - Web API | MDN

 

javascriptの書く場所

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<script>
// コードを記述する
</script>

</head>
<body>

<script>
// コードを記述する
</script>

</body>
</html>

　上記2箇所に記載することが可能。

　この場所によって、プログラムによってはエラーになる為注意が必要。

　下記に、そのプログラムを示す。

 

4.プログラムの作成(javascriptでh1編集)

<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>テストページ</title>
     <style>
         .red-moji {
           color: red;
         }
     </style>
   </head>
   <body>
     <h1 class="red-moji">Hello</h1>
     <h2>World</h2>
     <script>
       let element = document.querySelector("h1")
       element.innerText = "タイトル"
     </script>
   </body>
 </html>

 

実行結果

　※このようにh1で設定したHelloという文字列をタイトルという文字列に置き換えた。

5.プログラムの作成(javascriptでh1編集：エラーが発生する場合)

<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>テストページ</title>
     <style>
         .red-moji {
           color: red;
         }
     </style>
     <script>
       let element = document.querySelector("h1")
       element.innerText = "タイトル"
     </script>
   </head>
   <body>
     <h1 class="red-moji">Hello</h1>
     <h2>World</h2>
   </body>
 </html>

 

実行結果

　※上記の場合、Helloがjavascriptによって、変化していない。

　F12を押して、エラーを確認すると、下記のようなエラーが発生している。

　Uncaught TypeError: Cannot set properties of null (setting 'innerText')

　これは、innerTextで設定しようとしたが取得できなくて、セットできないということだ。

　この発生原因としては、scriptタグheadタグの中に入っているため、htmlのbodyを実行する前に、javascriptが実行されてしまい、h1が見つからない為発生している。

　

6.プログラムの作成(javascriptをonloadにより、最後に読み込む)

上記のようにHTMLを読み込んだ後に、javascriptを読み込まないとエラーが発生してしまう場合がある。

その解決策として、onloadイベントというものがある。

これは、実行する場合にHTMLが読み込まれてから、動作を開始するというものだ。

<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>テストページ</title>
     <style>
         .red-moji {
           color: red;
         }
     </style>
     <script>
     	window.onload = function () {
       		let element = document.querySelector("h1")
       		element.innerText = "タイトル"
       	}
     </script>
   </head>
   <body>
     <h1 class="red-moji">Hello</h1>
     <h2>World</h2>
   </body>
 </html>

実行結果

　※このように、最初にこれを知らないと、エラーに躓くので注意が必要。

 

 

　HTMLの基本の参考：

　・HTML の基本 - ウェブ開発を学ぶ | MDN

HTMLのidとは？使い方やclassとの違いについても解説 | 侍エンジニアブログ

【HTML】id属性とは？ 使い方と特徴を解説 | ZeroPlus Media

　・HTML Living Standardリファレンス

　javascript参考

　・Document: querySelector() メソッド - Web API | MDN

 

関連記事

過去の記事：