JavaScript學習筆記

JavaScript入門學習

JavaScript入門學習

六種資料型別

JS中一共分成六種資料型別 5個基本資料型別+object
String 字串
Number 數值
Boolean 布林值
Null 空值
Undefined 未定義
Object 物件

其中基本資料型別有 5個

String Number Boolean Null Undefined

還有一種資料型別是Object

typeof運算子檢查資料型別

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

null和undefined值相等，型別不等。
可以用null和undefined來對清空物件，var a = null; 清空後，a的資料型別是object ，而var a = undefined; 清空後是undefined

引用資料型別： $對象 (O b j e c t) 、數組 (A r r a y) 、函數 (F u n c t i o n)$ 。

Array

建立：

var a = Array("t1","t2");
var b = Array(1,2,3,4);
var c = [1.2, 3.2, 9.3];

遍歷：

for(int i=0; i<a.length; ++i){
    console.log(a[i]);
}
a.forEach(t => {
   console.log(t); 
});

物件

var user = {
            id: 123,
            name: "某某某",
            phone: "13232123"
        };
console.log(user.id);//輸出到控制檯
console.log(user["id"]);//兩種方法均可

物件中自定義函式

var user = {
            id: 123,
            name: "某某某",
            phone: "13232123",
            fn: function(){
                return this.id+" "+this.name+" "+this.phone;
            }
        };
       console.log(user.id);
       console.log(user["id"]);
       console.log(user.fn());

在這裡插入圖片描述
遍歷物件:
for(變數 in 物件)

var user = {
            id: 12,
            name: "xxx",
            phone: "12312312"
        };
        var x;
        var p = "";
        for(x in user){
            p += user[x];
        }
        console.log(p);

12xxx12312312

函式

簡單的函式建立

function fn(){
            alert("hello javascript!");
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn(){
            alert("hello javascript!");
        }
    </script>
</head>
<body>
    <h1>我的第一個JAVASCRIPT程式</h1>
    <button type="button" onclick="fn()">點我</button>
</body>
</html>

在這裡插入圖片描述

JavaScript 作用域

<script>
var a;
function fn(){
   	var b = "xxx";
}
console.log(a);
console.log(b);
</script>

在外部定義的是全域性變數，函式內部定義的是區域性變數
在這裡插入圖片描述
有一種特殊情況：
在函式中，沒有var b; 直接用了 b變數b = "bbb";，b變數自動成為一個全域性變數

<script>
    fn();  //此處不可少
    
    var a = "aaa";
    console.log(b);
    function fn(){
        b = "bbb";
    }
    console.log(a);
    console.log(b);
</script>

在這裡插入圖片描述

事件

onclick 使用者點選 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        function fnDate(){
            document.getElementById('demo').innerHTML = Date();
        }
       
    </script>
</head>
<body>
    <input type="button" onclick="fnDate()" value="日期">
    <p id="demo" class="demo1">事件</p>
</body>
</html>

在這裡插入圖片描述
或者
<input type="button" onclick="getElementById('demo').innerHTML = Date()" value="日期">

字串

可以採用這幾種方式定義

var a1 = "123";
var a2 = '123';
//'' 和""這兩個符號等效
var a2 = new String("123");

var a1 = "123";  //string 
var a2 = new String("123");  //object
console.log(a1===a2);

答案是false
因為 new String 建立的是一個String物件，而 === 比較的是資料型別和變數數值

字串的方法
charAt() //返回字元

var a = "hello"; 
for(var i=0; i<a.length; ++i){
    console.log(a.charAt(i));
}

在這裡插入圖片描述
concat()連線字串

var a = "hello";
var b = a.concat("js");
console.log(b);

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020102319262376.png#pic_cent
substring() 擷取字串

 var a = "hello,javascript";
var b = a.substring(6,10);  //擷取下標從[6,10)
console.log(b);

輸出：java
split() 字串分割

var a = "hello,javascript";
var b = a.split(",");
for(var i=0; i<b.length; ++i){
    console.log(b[i]);
}

hello
javascript

java強制轉換

轉換為字串

x = x.toString();
x = String(x);   //推薦
x = x+"";

字串轉換為number型別

var a ="123";
var b = parseInt(a);
var c = parseFloat(a);
console.log(typeof b);
console.log(typeof c);

var a ="123.4";
var c = parseFloat(a);
console.log(c);

JavaScript入門學習學習筆記（上）