JavaScript

概要

ドットインストールでJavaScriptについてやってみた
http://dotinstall.com/lessons/basic_javascript_v2

特徴

ブラウウザに実装されているスクリプト言語

かいてみる

hello world

root@www27032ue:/var/www/htdocs/study# cat index.html
<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <script>
                // コメント
                console.log("hello world!");
        </script>
</body>
</html>

[F12]で管理者ツールを起動し、出力を確認できる
2014-11-24_233326

変数

root@www27032ue:/var/www/htdocs/study# cat index.html
### 以下ヘッダは省略する ###
<body>
        <script>
        /*
                変数
                - 文字列
                - 数値
                - 真偽値
                - オブジェクト
                　- 配列・関数・組み込みオブジェクト
                - undefined 定義されていない
                - null 何もない
        */

                // var msg  = "hello world!" という書き方も可能
                // "(ダブルクオーテーション)でも'(シングルクオーテーション)でも違いはない
                // 改行は\nを利用する
                var msg;
                msg = "hello world!";
                console.log(msg);
        </script>
</body>

数値計算

root@www27032ue:/var/www/htdocs/study# cat index.html
<body>
        <script>
                var x;
                x = 10 * 2;
                x = 10 % 3;
                console.log(x);
        </script>
</body>

条件分岐

root@www27032ue:/var/www/htdocs/study# cat index.html
<body>
        <script>
                var score = 55;
                if (score > 60){
                        console.log("OK");
                } else if (score > 40){
                        console.log("soso...");
                } else {
                        console.log("NG");
                }
        </script>
</body>

真偽値

if (x) {

}

### xが文字列の場合、上は以下と同義 ###
if (x !== ''){

}

while文

var i = 0;
while ( i < 10){
        console.log(i);
        i++;
}

ユーザにメッセージを表示する

// alertの表示
alert("hello");

// cancelボタンがついている
var answer = confirm("are you sure?");
console.log(answer);

// 変数を格納する
var name = prompt("what's your name?","名無し")
console.log(name);

2014-12-22_214246

関数

// 引数を持たせることができる
function hello(name) {
        console.log("hello" + name);
}

hello("Tom");

// 返り値をもたせることもできる
function hello2(name){
        return "hello" + name;
}
var greet = hello2("John");
console.log(greet);

関数その2

// 関数もデータ型であるため変数に入れることが可能
var varhello = function(name) {
        var msg = "hello" + name;
        return msg;
};
var greet = varhello("John");
console.log(greet);

関数その3

// 即時関数。定義して即実行する
(function hello(name) { // helloを省略することも可
        console.log("hello "+name);
})("Tom");

タイマー処理

// setInterval : 一定間隔で処理を実行。前の処理が終わっているかどうかは気にしない
// setTimeout : 一定時間経つと、一度だけ処理を実行。。前の処理が完了していると実行する
var i = 0;
function show() {
        console.log(i++);
}

setInterval(function(){
        show();
},1000);

// 3を表示したら終了する
var i = 0;
function show() {
        console.log(i++);
        var tid = setTimeout(function(){
                show();
        },1000);
        if (i > 3){
                clearTimeout(tid);
        }
}
show();

配列

var score = [100, 300, 500];
console.log(score[0]);
console.log(score);

2014-12-22_225338

オブジェクト

名前と値がグループ化されている

var user = {
        email: "shimizu.r.hiroaki@gmail.com",
        score: 80
};

console.log(user["email"]);
console.log(user.score);
console.log(user);

2014-12-22_225850

var user = {
        email: "shimizu.r.hiroaki@gmail.com",
        score: 80,
        greet: function(name) { // 関数のことをオブジェクトのメソッド。thisで自分のオブジェクトを指す
                console.log("hello," + name + " from " + this.email);
        }
};
user.greet("Tom");

2014-12-22_230945

組み込みオブジェクト

javascriptが用意しているオブジェクト

var s = new String("shimizu");
// 実は、var s = "shimizu"; でも同じことができる(文字列リテラル)
console.log(s.length);
console.log(s.replace("i","I"));

var d = new Date(2014, 1, 11, 10 ,20 ,30);
console.log(d.getFullYear());
console.log(d.getMonth());

DOM

ブラウザ自身もオブジェクトであり、操作することができる

// オブジェクトのプロパティを表示
console.dir(window);

window.document – 今開いているページのこと
Javascriptで書き換えることで動的にページを変更することができる
document にアクセスするための命令をdocument object model (DOM)と呼ぶ
以下について、文字列と色を変更している

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <h1>見出し</h1>
        <p id="msg">こんにちは</p>
        <script>
        var e = document.getElementById('msg');
        e.textContent = 'hello!';
        e.style.color = 'red';

        </script>
</body>
</html>

2014-12-23_113738

イベント

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <h1>見出し</h1>
        <p id="msg">こんにちは</p>
        <button id="add">click</button>
        <script>
        document.getElementById('add').addEventListener('click',function(){
        var e = document.getElementById('msg');
        e.textContent = 'hello!';
        e.style.color = 'red';
        });
        </script>
</body>
</html>

ボタンを押すと「こんにちは」の文字と色が変化する
2014-12-23_114144

おみくじを作る

http://dotinstall.com/lessons/omikuji_js
2014-12-23_161114

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>おみくじ</title>
</head>
<body>
        <h1>おみくじ</h1>
        <input type="button" value="あなたの運勢は" onclick="getOmikuji();">
        <p>あなたの運勢は...<span id="result"></span></p>
        <script>
                function getOmikuji(){
                        var omikuji = ["大吉","中吉","小吉"];
                        var result = Math.floor(Math.random() * omikuji.length);
                        document.getElementById('result').innerHTML = omikuji[result];
                }
        </script>
</body>
</html>

スロットマシーン

2014-12-23_161226

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>スロットマシーン</title>
        <style>
        .col{
        float: left;
        width: 100px;
        text-align: center;
        font-size: 32px;
        }
        </style>

</head>

<body>
<div class="col">
        <span id="num0">?</span><br>
        <input type="button" value="STOP" id="stop0">
</div>

<div class="col">
        <span id="num1">?</span><br>
        <input type="button" value="STOP" id="stop1">
</div>

<div class="col">
        <span id="num2">?</span><br>
        <input type="button" value="STOP" id="stop2">
</div>

<script>

(function() {
var timers,
nums,
stopCount;

document.getElementById('stop0').onclick = function() {
        stopSlot(0);
};
document.getElementById('stop1').onclick = function() {
        stopSlot(1);
};
document.getElementById('stop2').onclick = function() {
        stopSlot(2);
};


function startSlot(){
        timers = [];
        nums = [];
        stopCount = 0;

        runSlot(0);
        runSlot(1);
        runSlot(2);

}

function stopSlot(n) {
        // javascript 特有の書き方
        if (typeof nums[n] !== 'undefined') {
                return;
        }

        clearTimeout(timers[n]);
        nums[n] = document.getElementById('num'+ n).innerHTML;
        stopCount++;

        if (stopCount == 3){
                checkSlot();
        }
}

function checkSlot() {
        nums.sort();
        if(nums[0] == nums[1] && nums[0] == nums[2]){
                alert('すべて揃った');
        }else if (nums[0] == nums[1] || nums[1] == nums[2]){
                alert('2つ揃った');
        }else{
                alert('残念');
        }
}

function runSlot(n) {
        document.getElementById('num'+ n).innerHTML = Math.floor(Math.random() * 10);
        timers[n] = setTimeout(function() {
        runSlot(n);},50);
}

startSlot();
})();

</script>

</body>
</html>

5秒で決めろ

http://dotinstall.com/lessons/just_five_js
2014-12-23_160930

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>5秒で決めろ！</title>
</head>

<body>

<h1>5秒で決めろ！</h1>
<p><input type="button" value="start" onclick="start();"></p>
<p><input type="button" value="stop" onclick="stop();"></p>
<p id="result"></p>

<script>
var start;
var stop;
var FIVE_SECOND = 5 * 1000;
function start() {
        start = new Date().getTime();
        console.log(start);
}

function stop() {
        stop = new Date().getTime();
        console.log(stop);

        // 差を算出
        var diff = FIVE_SECOND - (stop - start);
        // 結果を表示
        var e = document.getElementById('result');
        if (diff == 0) {
                e.innerHTML= 'ぴったり';
        } else if (diff > 0){
                e.innerHTML = (diff / 1000) + '秒早い';
        } else {
                e.innerHTML = (diff / 1000) + '秒遅い';
        }
}
</script>
</body>
</html>

参考URL

ドットインストール-javascript関連
http://dotinstall.com/lessons/basic_javascript_v2
https://developer.mozilla.org/ja/docs/Web/JavaScript

タグ: