Javascript - 長留裕平のブログ

Javascript データから表を作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th {
      font-weight: normal;
      background: #eee;
    }
    th,
    td {
      padding: 4px;
      border: 1px solid;
      text-align: center;
    }
    th:nth-child(1) {
      width: 40px;
    }
    th:nth-child(2) {
      width: 180px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th>#</th><th>名前</th></tr>
    </thead>
    <tbody id="names">
    </tbody>
  </table>
  <script>
    // 名前の配列を定義
    const names = [
      '佐藤',
      '鈴木',
      '高橋',
      '田中',
      '伊藤',
      '渡辺',
      '木村',
      '吉田',
      '山本',
      '中村',
      '小林',
      '加藤'
    ];
    
    // 配列のすべての要素に対して処理を実行
    names.forEach((name, index) => {
      // 新しいtr要素を作成
      const tr = document.createElement('tr');
      // インデックス用のtd要素を作成し、インデックスを設定
      const indexTd = document.createElement('td');
      indexTd.textContent = index + 1;
      // 名前用のtd要素を作成し、名前を設定
      const nameTd = document.createElement('td');
      nameTd.textContent = name;
      // インデックス用のtd要素をtr要素に追加
      tr.appendChild(indexTd);
      // 名前用のtd要素をtr要素に追加
      tr.appendChild(nameTd);
      // tr要素をテーブルのtbody要素に追加
      document.getElementById('names').appendChild(tr);
    });
  </script>
</body>
</html>

javascript タブメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <style>
    .container {
      margin: 16px auto;
      width: 500px;
    }
    .tabs {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
    }
    .tabs li a {
      display: inline-block;
      width: 80px;
      text-align: center;
      padding: 8px;
      color: #333;
      text-decoration: none;
    }
    .tabs li a.active {
      background: #333;
      color: #fff;
    }
    .content.active {
      background: #333;
      color: #fff;
      min-height: 150px;
      padding: 12px;
      display: block;
    }
    .content {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul class="tabs">
      <li><a href="#" class="active" data-id="p1">商品1</a></li>
      <li><a href="#" data-id="p2">商品2</a></li>
      <li><a href="#" data-id="p3">商品3</a></li>
      <li><a href="#" data-id="p4">商品4</a></li>
    </ul>
    <section class="content active" id="p1">
      商品1の説明です。
    </section>
    <section class="content" id="p2">
      商品2の説明です。
    </section>
    <section class="content" id="p3">
      商品3の説明です。
    </section>
     <section class="content" id="p4">
      商品4の説明です。
    </section>
  </div>
  <script>
    // タブのリンク要素を取得
    const tabs = document.querySelectorAll('.tabs li a');
    // コンテンツの要素を取得
    const contents = document.querySelectorAll('.content');
    
    // すべてのタブ要素に対して処理を実行
    tabs.forEach(clickedItem => {
      // タブがクリックされたときの処理
      clickedItem.addEventListener('click', e => {
        // リンクによるページ遷移を抑制
        e.preventDefault();
        
        // いったんすべてのタブを非アクティブにする
        tabs.forEach(item => {
          item.classList.remove('active');
        });
        // クリックされたタブだけアクティブにする
        clickedItem.classList.add('active');

        // いったんすべてのコンテンツ要素を非アクティブにする
        contents.forEach(content => {
          content.classList.remove('active');
        });
        // クリックされたタブに対応するコンテンツ要素だけアクティブにする
        document.getElementById(clickedItem.dataset.id).classList.add('active');
      });
    });
  </script>
</body>
</html>

Javascript ハートをクリック

<!DOCTYPE html>

<head>

<title>My Playground</title>

<style>

body {

user-select: none;

}

i {

color: red;

font-size: 20px;

margin-right: 4px;

cursor: pointer;

}

i.large {

font-size: 32px;

}

span {

font-size: 20px;

color: #aaa;

}

</style>

</head>

<body>

// クリック回数を0で初期化

let n = 0;

// ハートアイコンの要素を取得

const heart = document.getElementById(‘heart’);

// カウンターの要素を取得

const counter = document.getElementById(‘counter’);

// ハートアイコンをクリックしたときの処理

heart.addEventListener(‘click’, () => {

// カウンターを1増やす

n++;

// カウンターが10を超えた場合、ハートを大きくする

if (n > 10) {

heart.classList.add(‘large’);

}

// クリック回数を表示

counter.textContent = n;

});

</script>

</body>

</html>

Javascriptアイコン

See the Pen Untitled by ちょすけ (@tyosuke) on CodePen.

Javascript について

JavaScriptは、HTMLやCSSと並んでWebページを作成する上で重要な役割を果たすプログラミング言語の一つです。JavaScriptを使用することで、Webページに対する動的な動作や、ユーザーとのインタラクションを実現することができます。以下は、JavaScriptの基礎についての説明です。

JavaScriptの構文
JavaScriptの基本的な構文は、以下のような形式で記述されます。
php
Copy code
// コメント

// 変数宣言
var 変数名 = 値;

// 条件分岐
if (条件式) {
// 条件が真の場合の処理
} else {
// 条件が偽の場合の処理
}

// ループ
for (初期化; 条件式; 増減式) {
// 繰り返す処理
}

// 関数定義
function 関数名(引数1, 引数2, …) {
// 関数の処理
return 戻り値;
}
JavaScriptの役割
JavaScriptは、Webページに対する動的な動作を実現することができます。具体的には、以下のような役割があります。
HTML要素の操作：JavaScriptを使用することで、HTML要素を取得し、追加や削除、属性の変更などを行うことができます。
イベント処理：JavaScriptを使用することで、ユーザーのアクションに応じた処理を実行することができます。例えば、ボタンをクリックしたときにアラートダイアログを表示するような処理が挙げられます。
フォームの処理：JavaScriptを使用することで、フォームの入力値を取得し、バリデーションや送信などの処理を行うことができます。
Ajax通信：JavaScriptを使用することで、非同期通信を行うことができます。Ajax通信を使用することで、Webページの再読み込みなしでサーバーとの通信を行うことができます。
以上が、JavaScriptの基礎的な概念についての説明です。