2013年11月17日日曜日

JavaScript 事始め

JavaScript 事始め

node.js使いたいので勉強。

もともとブラウザ内で動的なコンテンツを生成するためにつくられた言語。
以下、事始めで使ったコード。

<!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>
view raw js_fitst.html hosted with ❤ by GitHub
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)