カテゴリー: Javascript

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

Javascript else if

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 score = Number(prompt('Score?'));

if (score >= 90) {
    console.log('A!');
} else if (score >= 70) {
    console.log('B');
} else {
    console.log('C!');
}

HTMLCSSJavascript Canvas

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

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

css/styles.css

body {
  background: #222;
}
canvas {
  background: #fff;
}

js/main.js

'use strict';

{
  let t = 0;
  
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.ellipse(100, 100, 40, 30, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
    
    ctx.beginPath();
    ctx.ellipse( 80 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.ellipse(120 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    
    t++;
    setTimeout(draw, 10);
 }

  draw();
}
sprite-1ダウンロード
logoダウンロード

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

const n = prompt('Any number?');
console.log(Number(n) + 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';

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

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