學習JavaScript-Hello JavaScript

Posted on Edited on In Views: Disqus:

 

1.JavaScript所宣告的變數可以依照值動態賦予型態

var x;               // Now x is undefined
var x = 5;           // Now x is a Number
var x = "John";      // Now x is a String

 

2.在一個statement同時宣告多個變數

var lastName = "Doe", age = 30, job = "carpenter";

 

3.重新宣告同名稱變數，不會影響已設定之值

var carName = "Volvo"; 
var carName;

 

4.當已宣告並給值為字串時，想再加入一數字，則該數字會被轉成字串附加其後

<!DOCTYPE html>
<html>
<body>

    <p>Assign 5 to y, and display the result of y + 2:</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
        function myFunction() {
            var y = "5";
            document.getElementById("demo").innerHTML = y + 2;
        }
    </script>

</body>
</html>

字串"5"加上數字2，其結果為"52"

 

5.如果想用javaScript所宣告的變數放入單引號(')或是雙引號(")字元時

var answer = "It's alright";             // Single quote inside double quotes
var answer = "He is called 'Johnny'";    // Single quotes inside double quotes
var answer = 'He is called "Johnny"';    // Double quotes inside single quotes

當想放入單引號字元時則最外圍用雙引號括起來，反之想放入雙引號則使用單引號括起來。

或是利用斜線跳脫字元"\"來加入單引號或雙引號

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var carName1 = "Volvo XC60";
        var carName2 = 'Volvo XC60';
        var answer1 = "It\"s alright";
        var answer2 = "He is called 'Johnny'";
        var answer3 = 'He is called "Johnny"';

        document.getElementById("demo").innerHTML =
        carName1 + "<br>" +
        carName2 + "<br>" +
        answer1 + "<br>" +
        answer2 + "<br>" +
        answer3;
    </script>

</body>
</html>

 

6.使用typeof運算子回傳value的型態

<!DOCTYPE html>
<html>
<body>

<p>The typeof operator returns the type of a variable or an expression.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" + 
    typeof 3.14 + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34};
}
</script>

</body>
</html>

typeof "john"回傳"string"字串

typeof 3.14 回傳"number"字串

typeof false 回傳 "boolean"字串

typeof [1,2,3,4] 回傳 "object"字串

typeof {name:'john', age:34} 回傳 "object"字串

 

7.object宣告method的宣告方式

<!DOCTYPE html>
<html>
<body>

    <p>Creating and using an object method:</p>

    <p id="demo"></p>

    <script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566,
            fullName: function () { return this.firstName + " " + this.lastName }
        };

        document.getElementById("demo").innerHTML = person.fullName();
    </script>
</body>
</html>

 

8.存取物件的property

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566
        };

        document.getElementById("demo").innerHTML = person.firstName + " " + person["lastName"];
    </script>

</body>
</html>

可以使用person.firstName或是person["firstName"]兩種方式來取值

 

9.變數的scope

Scope可分區域變數(一種宣告方式)與全域變數(兩種宣告方式)

(1)區域變數

// code here can not use carName

function myFunction() {
    var carName = "Volvo";

    // code here can use carName

}

(2)全域變數

var carName = " Volvo";

// code here can use carName

function myFunction() {

    // code here can use carName 

}

(3)在function內沒事先使用var宣告變數則被視為全域變數

// code here can use carName

function myFunction() {
    carName = "Volvo";

    // code here can use carName

}

 

參考資料：

螞蟻的 JAVASCRIPT

JavaScript