Javascript - 長留裕平のブログ

Javascript 定数

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

/*
Javascriptにおける数値の表現
*/
// console.log(150 * 120 * 1.1);
// console.log(150 - 130 * 1.1);
// console.log(150 * 140 * 1.1);

//定数
const price = 150;
const rate = 1.1;

console.log(price * 120 * rate);
console.log(price * 130 * rate);
console.log(price * 140 * rate);

Javascript 数値の演算

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

/*
Javascriptにおける数値の表現
*/
console.log(10 + 3);
console.log(10 - 3);
console.log(10 * 3);
console.log(10 ** 3);
console.log(10 / 3);
console.log(10 % 3);

console.log(10 + 2 * 3);
console.log((10 + 2) * 3);

Javascript コメント

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

/*
Javascriptにおける数値の表現
*/
console.log(100);
console.log(-10);
console.log(2.5);

//大きな数値、小さな数値の表現
console.log(1.2e4); //1.2かける10の４乗
console.log(1.2e-4);//1.2かける10の-４乗

Javascript 数値

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

console.log(100);
console.log(-10);
console.log(2.5);

console.log(1.2e4);
console.log(1.2e-4);

Javascript Console.log

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

index.html

'use strict';

console.log(100);

main.js

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;
    }
    th:nth-child(1) {
      width: 180px;
    }
    th:nth-child(2) {
      width: 180px;
    }
    td:nth-child(2) {
      text-align: right;
    }
    tr:last-child {
      font-weight: bold;
    }
    input[type="checkbox"] {
      margin-right: 8px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th>商品名</th><th>価格</th></tr>
    </thead>
    <tbody id="items">
      <tr><td>合計 (送料込)</td><td><span id="total">0</span>円</td></tr>
    </tbody>
  </table>
  <p>
    ※ 税込価格、送料350円は5,000円以上で無料
  </p>
  <script>
    // 合計金額を0で初期化
    let total = 0;
    // 送料を定義するための変数
    let shipping;
    // HTMLからitemsというIDを持つテーブル要素を取得
    const table = document.getElementById('items');
    // HTMLからtotalというIDを持つspan要素を取得
    const totalSpan = document.getElementById('total');
    // 商品データを格納した配列
    const items = [
      {name: 'Tシャツ', price: 1200},
      {name: 'カットシャツ', price: 4200},
      {name: 'チノパン', price: 3800},
      {name: '靴下', price: 800},
    ];
    
    // すべての商品データに対して処理を行う
    items.forEach((item) => {
      // 新しいtr要素を作成
      const tr = document.createElement('tr');
      // 新しいtd要素を作成
      const nameTd = document.createElement('td');
      // 商品名のテキストを作成
      const nameText = document.createTextNode(item.name);
      // チェックボックスを作成
      const checkbox = document.createElement('input');
      // チェックボックスのタイプを設定
      checkbox.type = "checkbox";
      // チェックボックスがチェックされたときの処理
      checkbox.addEventListener('change', () => {
        // チェックされている場合、合計金額を加算
        if (checkbox.checked) {
          total += Number(item.price);
        } else {
          // チェックされていない場合、合計金額から減算
          total -= Number(item.price);
        }
        // 合計金額が5000以上または0の場合、送料は0
        if (total >= 5000 || total === 0) {
          shipping = 0;
        } else {
          // それ以外の場合、送料は350
          shipping = 350;
        }
        // 合計金額と送料を加算し、totalSpanに表示
        totalSpan.textContent = (total + shipping).toLocaleString();
      });
      // 新しいtd要素を作成
      const priceTd = document.createElement('td');
      // 価格をテキストとしてtd要素に追加
      priceTd.textContent = item.price.toLocaleString() + '円';
      // td要素にチェックボックスと商品名を追加
      nameTd.appendChild(checkbox);
      nameTd.appendChild(nameText);
      // tr要素に商品名のtd要素と価格のtd要素を追加
      tr.appendChild(nameTd);
      tr.appendChild(priceTd);
      // tr要素をテーブルの最後の行の前に挿入
      table.insertBefore(tr, table.rows[table.rows.length - 1]);
    });
  </script>
</body>
</html>

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.