タグ: 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>
  <script src="sub.js"></script>
</body>
</html>

main.js

'use strict';

{
let x = 10;
console.log(x);
}

sub.js

'use strict';

{
let x = 20;
console.log(x);
}

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 x = 10;
{
  x = 20;
  console.log(x);
}
console.log(x);

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 english = Number(prompt('English'));
const math = Number(prompt('Math?'));

if(!(english >= 80 && math >= 80)){
  console.log(`A`);
}else{
  console.log(`B`);
}

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 score = Number(prompt('Score?'));
const result = score > 80 ? `A` : `B`;
console.log(result);

Javascript break､continue

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 amount = 100;

for (let year = 1; year <= 30; year++){
  amount *= 1.05;
  if(amount < 200){
    continue;
  }
  if(amount > 300){
    break;
  }
  console.log(`Year ${amount}`);
}

Javascript do while

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 command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));
// console.log(`Menu ${command} processed.`);

//let command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));

//while (command !== 0) {
//  console.log(`Menu ${command} processed.`);
//  command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));
//}

let command;

do {
  command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));
  if (command === 0) {
    console.log('Exited');
  } else {
    console.log(`Menu ${command} processed.`);
  }
} while (command !== 0);

Javascript while

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 command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));
// console.log(`Menu ${command} processed.`);

let command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));

while (command !== 0) {
  console.log(`Menu ${command} processed.`);
  command = Number(prompt('Menu 1, 2, 3 or 0 to exit'));
}

Javascript forの中でforを使う

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 price;
const rate = 1.1;

for(let price = 150; price <= 160; price++){
  console.log('Price: ${price}');
  for(let amount = 120; amount <= 140; amount+=10){
    console.log(price * amount * rate);
  }
}

Javascript for

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

// for (let i = 0; i < 10; i++) {
// for (let i = 1; i < 11; i++) {
for (let i = 1; i <= 10; i++) {
    // console.log('Hello');
  console.log(`${i}: Hello`);
}

Javascript switch

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(50 + '20');

const color = prompt('Color?');

switch (color) {
    case 'red':
        console.log('Stop!');
        break;
    case 'yellow':
        console.log('slow down');
        break;
    case 'blue':
    case 'green':
        console.log('Go!');
        break;
    default:
        console.log('Wrong color');
        break;
}