投稿者: chosuke

趣味はゲームやアニメや漫画などです

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';

const fname = 'Taro';
const lname = 'Yamada';

//console.log('My name is ' + fname + ' ' + lname + ', call me ' + fname + '!');
console.log('My name is ${fname} ${lname}, call me $(fname)!');

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('It is a pen.');
// console.log('It\'s a pen.');
// console.log("It's a pen.");
console.log("It's \na \npen.");

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);

//変数
let price;
//定数
const rate = 1.1;

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

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

Javascript 変数

index.html

'use strict';

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

//変数
let price;
//定数
const rate = 1.1;

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

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

main.js

'use strict';

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

//変数
let price;
//定数
const rate = 1.1;

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

price = 151;
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(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>