【javascript練習問題】DOMを操作しよう!

※本サイトはアフィリエイトリンクを掲載しています。
javascript

問題1 : 要素をidで取得

下記のコードの要素をid名を使用して取得してください。

<div id="hoge">hogehoge</div>

 

参考ソース

document.getElementById("hoge");

 

問題2 : idから値を取得

下記のコードの値をid名を使用して取得してください。

<input type="text" id="hoge" value="hoge" />

 

参考ソース

document.getElementById("hoge").value;

 

問題3 : ユーザーが入力した値を取得

下記キャプチャのように、名前入力欄を作成してください。
名前入力欄からフォーカスが外れた時に、値をコンソールログに表示してください。

 

参考ソース

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <p>名前</p>
    <div><input type="text" id="user_name" /></div>
  </body>
  <script>
    let userName = document.getElementById("user_name");
    userName.addEventListener('blur',function(){
      console.log(userName.value);
    });
  </script>
</html>

フォーカスが外れた時のイベント処理にblurを使用しています。

 

問題4 : 要素の追加

javascriptの要素の追加の処理とループ処理を使用して、3列3行のテーブルを生成してください。

サンプル画像

参考ソース

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="table_position"></div>
    </body>
    <style>
    table {
      border-collapse: collapse;
      border: solid 1px;
    }
    th {
      background-color:yellow;
    }
    td {
      border: solid 1px;
    }
  </style>
  <script>
    let tablePosition = document.getElementById("table_position");
    let table = document.createElement('table');
    for (i = 1; i <= 3; i++) {
      let tr = document.createElement('tr');
      for (h = 1; h <= 3; h++) {
        if (i === 1) {
          let th = document.createElement('th');
          th.textContent = i + '行目' + h + '列目';
          tr.appendChild(th);
        } else {
          let td = document.createElement('td');
          td.textContent = i + '行目' + h + '列目';
          tr.appendChild(td);
        }
      }
      table.appendChild(tr);
    }
    tablePosition.appendChild(table);
  </script>
</html>

要素の追加をする手順として、idから要素の取得をします。

その後に「table」や「th」「tr」「td」などの要素をcreateElement()を使用して生成します。

appendChildを使用して親要素に対して子要素を追加しています。

また今回は3列3行ですが、これが何列何行になっても改修が楽になるようにfor文の繰り返し処理を活用しています。

最初に行のループをさせて、次に列のループをさせています。

 

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント