カテゴリー: Javascript

Javascirpt createElement

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>
  <ul>
    <li class="target">Taro</li>
    <li id="second">Jiro</li>
    <li class="target">Saburo</li>
  </ul>
  <button>OK</button>

  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    const liElement = document.createElement('li');
    liElement.textContent = 'Hanako';
  });
}

Javascript DOM セレクター

<!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>
  <ul>
    <li>Taro</li>
    <li>Jiro</li>
    <li>Saburo</li>
  </ul>
  <button>OK</button>

  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    // document.querySelector('li').textContent = 'Changed!';
    // document.querySelectorAll('li')[0].textContent = 'Changed!';
    // document.querySelectorAll('li')[1].textContent = 'Changed!';
    // document.querySelectorAll('li')[2].textContent = 'Changed!';
    document.querySelectorAll('li').forEach((li) => {
      li.textContent = 'Changed!';
    });
  });
}

Javascript classList

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>
  <style>
    .pink-bg{
      background: pink;
    }

    .red-border{
      border: 2px solid red;
    }

    .green-color{
      color: green;
    }
  </style>
</head>
<body>
  <p>Hello</p>
  <button>OK</button>
  
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict'

{
    document.querySelector('button').addEventListener('click', ()=> {
        //console.log('Clicked');
        document.querySelector('p').classList.add('pink-bg', 'red-border');
        document.querySelector('p').classList.add('green-color');
    });

    //console.log('Hello');
}

Javascript textContent

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>
  <p>Hello</p>
  <button>OK</button>
  
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict'

{
    document.querySelector('button').addEventListener('click', ()=> {
        //console.log('Clicked');
        document.querySelector('p').textContent = document.querySelector('button').textContent;
    });

    //console.log('Hello');
}

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>
  <button>OK</button>
  
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  document.querySelector('button').addEventListener('click', () => {
    console.log('Clicked');
  });
}

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

{
//  let num = 10;
//  const numBackup = num;
//  num = 99;
//  console.log(num);
//  console.log(numBackup);
const nums = [10, 20, 30];
const numBackup = [...nums];
nums[0] = 99;
console.log(nums);
console.log(numBackup);
}

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

{
//  let num = 10;
//  const numBackup = num;
//  num = 99;
//  console.log(num);
//  console.log(numBackup);
const nums = [10, 20, 30];
const numBackup = nums;
nums[0] = 99;
console.log(nums);
console.log(numBackup);
}

Javascript オブジェクト

<!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 moreScores = {
    shiro: 77,
    goro: 88,
  };
  const scores = {
    taro: 80,
    jiro: 70,
    saburo: 90,
    ...moreScores,
  };
  // const {taro, jiro, saburo} = scores;
  const {taro, ...others} = scores;

  console.log(taro);
  // console.log(jiro);
  // console.log(saburo);
  console.log(others);
}

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 moreScores = [77, 88];
  const scores = [70,90,80,85, ...oreScores];
  const [first, ...others] = scores;

  console.log(first);
  console.log(others);
}

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 scores = [70,90,80,85];
  const [first, ...others] = scores;

  console.log(first);
  console.log(others);
}