カテゴリー: Javascript

Javascript join()､split()

imdex.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 names = ['Taro', 'Jiro', 'Saburo'];

  // // Taro|Jiro|Saburo
  // console.log(names.join('|'));
  // console.log(names.join());
  // console.log(names.join(''));

  const names = 'Taro|Jiro|Saburo';
  console.log(names.split('|'));
}

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 = {
    math: 80,
    english: 90,
  };
  let sum = 0;

  scores.physics = 70;

  const entries = Object.entries(scores);
  // console.log(entries);
  entries.forEach((prop) => {
    // console.log(prop);
    sum += prop[1];
    console.log(`${prop[0]}: ${prop[1]}`);
  });
  console.log(`Sum: ${sum}`);
  console.log(`Average: ${sum / entries.length}`);
}

Javascirpt Object.entries()

'use strict';

{
  const scores = {
    math: 80,
    english: 90,
  };

  const entries = Object.entries(scores);
  entries.forEach((prop) =>{
    //console.log(prop);
    console.log(`${prop[0]}: ${prop[1]}`);
  });
}
<!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>

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 scores = {
    math: 80,
    english: 90,
  };

  scores.physics = 70;
  delete scores.english;
  console.log(scores);
}

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 scores = [
    70, 
    95, 
    80, 
    85,
  ];
  let sum = 0;
// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 sum += score;
 console.log(`${index}: ${score}`);
});

console.log(`Sum: ${sum}`);
console.log(`Average: ${sum / scores.length}`);
}

Javascript forEach()

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

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];

// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 console.log(`${index}: ${score}`);
});
}

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, 
    95, 
    80, 
    85,
  ];

// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.push(77, 88);

for(let i = 0; i <= 4; i++){
  console.log(scores[i]);
}
}

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, 
    95, 
    80, 
    85,
  ];

  console.log(scores[2]);
  console.log(scores.length);
  scores[1] = 95;
  console.log(scores);
}

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,
  ];

  console.log(scores);
}

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(double(10));
  //関数宣言
  function double(num){
    return num * 2;
  }

  // //関数式
  // const double = function(num){
  //   return num * 2;
  // };
}