<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの学習</title>
</head>
<body>
<h1>JavaScriptの学習</h1>
<p><input type="button" value="クリック！" id="myButton"></p>
<p>僕の名前は<span id="myName">@masazdream</span>です！</p>
<p>価格：<input type="text" id="price">円</p>
<script>
// 変数：データにつけるラベル
// データの型
var message;
message = "Hello World! Again!" // 文字列
var d1 = -5.5; // 数値
var d2 = true; // 真偽
var d3 = undefined; // 定義無い
var d4 = null; // 何も無い
// 配列、オブジェクトなどもある
//alert(message);
// 演算子
// 代入演算子
var x = 5;
// 文字列に関する演算子
var s = "hello" + "world";
// 数値に関する演算子 + - * /
var x = 5 * 5; // 商
var x = 5 % 5; // 余り
var x = 1;
x++; // x = x + 1;
x--; // x = x - 1;
x += 5; // x = x + 5;
// 条件分岐(if)
var score = 20;
// >= <= < >
// == !=
if(score >= 70){
alert("合格!");
} else if (score >= 30){
alert("不合格!");
} else {
//alert("不合格!まじめにやれ！");
}
// switchで分岐：あらかじめ決まっている場合の条件分岐
var direction = "right";
var x, y;
switch(direction){
case "right":
x = x + 10;
break; // 忘れないように注意
case "left":
x = x - 10;
break;
case "up":
y = y + 10;
break;
case "down":
y = y - 10;
break;
default:
// 例外処理
break;
}
// while ループ
var i = 0;
while(i < 10){
console.log(i); // ブラウザのconsol に出力する
i++;
}
// for ループ
for (var j = 0; j < 10; j++){
console.log(j);
}
// 関数
function sum(a, b){
return (a + b);
}
var result = sum(10, 22);
//alert(result);
function getPrice(x){
var rate = 0.82; // ローカル変数
return (x * rate);
}
console.log(getPrice(83));
// 配列：グループ化されたデータ
var sales0 = 100;
var sales1 = 200;
var sales2 = 150;
var sales = [100, 200, 150];
sales[1] = 180;
console.log(sales[1]); // 添字
// 連想配列：
var sales = {'year2000':100, 'year2001':200, 'year2002':150};
console.log(sales['year2002']);
// オブジェクト
// 日付、数値、文字列
var s = new String("this is a pen.");
console.log(s.length); //プロパティ
var date = new Date(); // 現在時刻オブジェクト
console.log(date.getFullYear()); // メソッド
// Stringオブジェクト
var s = new String("this is a pen");
console.log(s.substr(2,3)); // 2番目から3文字分とってくる
console.log(s.replace('pen', 'pencil'));
// Arrayオブジェクト
var a = new Array(12, 33, 44, 55);
var a = [12, 33, 44, 55];
console.log(a.join("|"));
console.log(a.reverse());
var d = new Date(2012, 4, 22, 7, 44, 5); // これ楽だな。月は 0 ～ 11
console.log(d.getMonth());
console.log(d.getTime()); // UTC 経過時間
// Math オブジェクト
// プロパティ
console.log(Math.PI);
console.log(Math.SQRT2);
// メソッド
var x = 5.238;
console.log(Math.floor(x)); // 整数に切り捨て
console.log(Math.ceil(x)); // 切り上げ
console.log(Math.round(x)); // 四捨五入
console.log(Math.random()); // ランダム数
// Browserオブジェクトモデル(BOM)
//console.log(window.innerHeight); // ブラウザの大きさに応じた処理に使える
// hrefを変化させる
//window.location.href = "http://google.com";
// 文書を扱う document object model (DOM)
// console.log(document.width); ← 廃止
//document.body.bgColor = "red";
// ページ内の要素の変更
var e = document.getElementById('myName');
e.innerHTML = '真宏';
var n = document.getElementById('price');
n.value = 500;
// この↓の処理はonloadに書かないとエラーになることあり
var e = document.getElementById('myButton');
//e.onclick = function () {
// alert("クリックされました！");
//}
// タイマー処理
// setTimeout:一定時間後に何かする
setTimeout(function (){
console.log("2secたちました！")
}, 2000);
// setInterval: 一定周期毎に何かする
var n = 0;
setInterval(function(){
console.log(n++);
}, 1000);
</script>
</body>