関数のテストとJavaScriptでHTML要素を動的に生成

JavaScript/HTML/CSS JavaScript

文字を整数値で表す

プログラムは全て2進数の整数値であるため文字を数値化することができる

'文字'.charCodeAt(添字);

テスト

console.assert関数を使ってテストすることができる

第一引数にテストしたい式を、第二引数にはテストの結果が正しくなかった時に出したいメッセージを記述。

console.assert(
      テストしたい式, falseの時に表示されるメッセージ
);

JavaScriptでHTML要素を動的に生成

const 変数名 = document.createElement(タグ名);

タグ名にはｐやdivなどHTML要素名を入れる。

HTML要素への追加は

HTML要素.appendChild(生成した要素)

html

<body>
  <div id="example"></div>
  <script src="blog.js"></script>
</body>

JavaScript

const exampleDivided = document.getElementById('example');
const header = document.createElement('h3');
header.innerText = '例文';
exampleDivided.appendChild(header);
  • 最初にexampleのidが付いてるdiv要素を変数exampleDividedに代入
  • h3要素で'例文'を表示するよう記述

  • 子要素として追加

  • innerText ... スタイルを反映し隠しテキストなどは見えずレンダリングされたテキスト内容を表示

  • textContent ... 隠しテキストなどが見えるレンダリングされない表示
  • innerHTML ... HTMLを表示する

新しい属性を追加

 element.setAttribute(name名前,value値);

class属性の値を設定

element.className('value値');

複数のclass属性を操作

element.classList
メソッド 説明
add クラスを追加
remove クラスを削除
contains クラスが含まれているか確認
toggle クラスが含まれていれば削除、含まれていなければ追加

例）

一度にclassの値を複数追加

element.classList.add('value値1','value値2');

一度にclassの値を複数削除

element.classList.remove('value1','value2');

containsでvalue2というclasがあるか確認しあれば削除、なければ追加のif文

if(element.classList.contains('value2')){
  element.classList.remove('value2');
}else{
  element.classList.add('value2');
}

上記を簡略化したのがtoggle

element.classList.toggle('value2');

insertAdjacentHTML()

取得した要素の第一引数で指定した場所に第二引数の要素を追加

取得した要素.insertAdjacentHTML('挿入場所', '挿入する要素');

例))

const h1 = `<h1>表示します</h1>`;
document.getElementById('id名').insertAdjacentHTML('beforeend', h1);
第一引数 説明
beforebegin element(取得した要素)の直前
afterbegin element(取得した要素)の最初の子要素の前
beforeend element(取得した要素)の最後の子要素の後
afterend element(取得した要素)の直後

textContent

取得した要素を書き換える

document.getElementById('id名').textContent = 書き換えたい内容;