易讀

科技

上篇：34個JavaScript栗子，從易到難

10 月 3, 2022

首次編寫js代碼，通過alert彈框提示hello world。

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            alert("hello world")
         </script>
     </head>
     <body>
     </body>
</html>

往頁面中輸出內容

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            document.write("hello world")
         </script>
     </head>
     <body>
     </body>
</html>

向控制臺輸出內容

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            console.log("好像有錯誤哦!")
         </script>
     </head>
     <body>
     </body>
</html>

查看的時候在瀏覽器按F12打開開發者工具，然後在控制臺中可看到該輸出的內容。

3條語句一起玩試試

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            alert("通知：請好好學習")
            document.write("hellow world!")
            console.log("好像有錯誤哦!")
         </script>
     </head>
     <body>
     </body>
</html>

說明：代碼的指向順序是從上往下的。

點擊按鈕時執行js代碼

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript"></script>
     </head>
     <body>
        <button onclick="alert('你好')">點擊</button>
     </body>
</html>

點擊超鏈接時執行js代碼

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript"></script>
     </head>
     <body>
        <a href="javascript:alert('你好!!!')">點擊</a>
     </body>
</html>

註意上面兩個案例，雖然可以將js代碼寫到標簽屬性中，如a屬性、button屬性，但不推薦這麼做，造成結構和行為耦合性太強，不方便維護，不推薦使用。

引入外部js文件

  • my.js代碼：
alert("這是外部my.js的彈框內容")
  • index.html代碼：
<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <!--src中引入外部js文件-->
         <script type="text/javascript" src="../js/my.js"></script>
     </head>
     <body>
     </body>
</html>

使用外部語言的好有：可以復用、可以利用到瀏覽器的緩存機制，因此這是推薦的方式。

註意：以下的小栗子都是在外部js文件中進行編碼。

js的基本語法

  • 註釋方式
// 這是單行註釋
/*
多行註釋
多行註釋
*/
  • 嚴格區分大小寫
//這是錯誤的
Alert("這是外部my.js的彈框內容")

//這是正確的
alert("這是外部my.js的彈框內容")

發生錯誤，在控制臺中可以看到：Uncaught ReferenceError: Alert is not defined at my.js:1:1

  • 分號結尾
alert("這是外部my.js的彈框內容");

如果不加分號，瀏覽器會自動添加分號，但會消耗資源，而且瀏覽器添加的分號有時候可能是錯的，導致出錯，造成排障困難，所以建議要加分號。

  • 忽略多個空格和換行
alert(
    "這是外部my.js的彈框內容"
);

聲明變量

var a = 200; //同時聲明變量和賦值
console.log(a); //輸出到控制臺

使用typeof檢查數據類型

var a = 500;;
console.log(typeof a);

var b = "ttr";
console.log(typeof b);

var c = true;
console.log(c);

控制臺輸出：

number
string
true

類型轉換

  • 數值轉字符串，方式1
var a = 100;
//轉換前它是整型
console.log(a, typeof a);
//轉換後是字符串類型
var b = a.toString();
console.log(b, typeof b);

控制臺輸出：

100 'number'
100 string
  • 數值轉字符串，方式2
var a = 100;
//轉換前它是整型
console.log(a, typeof a);
//轉換後是字符串類型
var b = String(a);
console.log(b, typeof b);

字符串轉數值

var a = "100";
console.log(a, typeof a);
var b = Number(a);
console.log(b, typeof b);

控制臺輸出：

100 string
100 'number'

條件運算符

var a = 10;
var b = 20;
a > b ? console.log("ok") : console.log("no");

switch語句

var a = 5;

switch (a){
    case 1:
        console.log("is 1");
        break;
    case 2:
        console.log("is 2");
        break;
    case 3:
        console.log("is 3");
        break;
    default:
        console.log("非法的數字");
        break;
}

while循環，小栗子1

var a = 5;
var b = 0;

while(a > b){
    var str = "hello\n";
    document.write(b);
    b++;
}

while循環，小栗子2

while(true){
    var a = Math.ceil(Math.random()*10);
    if (a == 7) {
        document.write("恭喜！有7瞭,val=" + a);
        break;
    } else {
        document.write("沒有7,咱們繼續...\n");
        continue;
    }

}

for循環

  • 基本使用
for (var i=0; i<10; i++ ) {
    document.write(i);
}
  • 遍歷數組
var a = [1, 2, 3, ,4 ,5, 6];
for (i in a) {
    document.write(i);
}

使用構造函數new創建一個對象，並給這個對象添加2個屬性，案例1

//使用構造函數new創建對象
var obj = new Object();
//給對象添加屬性和值
obj.name = "ttr";
obj.age = 18;
//獲取屬性
console.log(obj);
console.log(obj.name);

//刪除對象屬性
delete obj.name;
console.log(obj);

//也可以這樣獲取屬性
console.log(obj["name"]);
console.log(obj["age"]);

創建一個對象，案例2

var obj = new Object();
obj.addr = "10.1.2.3";
var attr = "addr";
console.log(obj[attr]);

控制臺輸出：

10.1.2.3

使用[]的方式獲取屬性還可以傳傳變量哦，更加靈活，根據不同的變量取不同的屬性。

對象中還可以是對象

var host = new Object();
var app = new Object();
app.name = "nginx";
host.hostname = "linux01";
host.addr = "10.1.2.3";
host.runapp = app; //註意這裡
console.log(host);
console.log(host.runapp);

檢查一個對象中是否有某個屬性

var hostObj = new Object();
hostObj.hostname = "linux01";
hostObj.addr = "10.1.2.3";
console.log("addr" in hostObj); //檢查hostObj對象是否存在addr這個屬性
console.log("ip" in hostObj);

控制臺輸出：

true
false

還可以使用對象字面量來創建對象，更加方便，案例1

//使用對象字面量來創建一個對象
var obj = {
    name: "ttr", 
    age: 18
};
console.log(obj)

控制臺輸出：

{name: 'ttr', age: 18}

更推薦使用對象字面量的方式創建對象，更加方便哦。

對象字面量創建對象，案例2

//使用對象字面量來創建一個對象
var obj = {
    hostname: "linux001", 
    runapp: "nginx",
    ip: {manager: "10.1.1.2", bus: "192.168.16.90"}

};
console.log(obj)

函數的基礎使用

function f1(a, b) {
    var ret = a + b;
    return ret;
}

console.log(f1(19, 20))

立即執行函數

  • 小栗子1
(function() {
    console.log("hello")
})()
  • 小栗子2
(function(a, b) {
    console.log(a + b)
})(1, 2) // 註意這裡是傳參，將1和2傳給瞭該函數

所謂的立即執行函數，就是函數定義完，即可立即執行，而不用顯示取調用，而且它也沒有名字，也可以說是匿名函數，讓匿名函數立即執行。

匿名函數

var f = function(a, b){
    return a + b
}
console.log(f(10, 20))

上面的小栗子中，將匿名函數賦給瞭變量f，通過f()就可調用。

給對象添加方法

var objhost = {
    hostname: "ttr",
    ip: "10.12.5.1",
    start: function() {
        console.log("PowerON")
    },
    stop: function() {
        console.log("Shutdown")
    }
}
objhost.start()
objhost.stop()

之前講瞭匿名函數，那麼給對象添加方法就派上用場瞭，上面小栗子中，給對象objhost添加瞭2個方法start和stop

還可以這麼玩，給對象動態的添加方法

var objhost = {
    hostname: "ttr",
    ip: "10.12.5.1",
}

action = function() {
    console.log("PowerON")
}

action1 = function() {
    console.log("Shutdown")
}

objhost.start = action
objhost.stop = action1

objhost.start()
objhost.stop()

對象的遍歷

var objhost = {
    hostname: "ttr",
    ip: "10.12.5.1",
}

for (var i in objhost) {
    console.log("key="+ i, "value=" + objhost[i])
}

控制臺輸出：

key=hostname value=ttr
key=ip value=10.12.5.1

什麼是this，先看代碼

var obj = {
    a: 18,
    b: 19,
    add: function() {
        console.log(this.a + this.b)
    }
}
console.log(obj.a)
console.log(obj.b)
obj.add()

控制臺輸出：

18
19
37

在對象中，this表示它自己，等價於Python中類中的self。

哪個對象調用，this就是誰

function run() {
    console.log(this.names)
}

var webobj01 = {
    names: "app01",
    runapp: run
}

var webobj02 = {
    names: "app02",
    runapp: run
}

webobj01.runapp()
webobj02.runapp()

控制臺輸出：

app01
app02

使用工廠方法創建對象

function createHost(hostname, ip) {
    var obj = new Object();
    obj.hostname = hostname;
    obj.ip = ip;
    return obj;
}

var a1 = createHost("web01", "192.168.90.78");
var a2 = createHost("linux91", "10.1.2.3");
console.log(a1);
console.log(a2);

註意：使用工廠方法創建對象，它構造函數都是Object，這裡有個不好的地方就是無法區分多種不同類型的對象

通過new，將原本是普通的函數變成構造函數，然後創建不同類型的對象

function Host(hname, addr) {
    this.hostname = hname
    this.ip = addr
}
var h = new Host("linux01", "1.1.1.1") 
console.log(h)

function Storage(diskNum, size) {
    this.diskNum = diskNum
    this.size = size
}
var s = new Storage(6, 500)
console.log(s)

上面的栗子中，Host和Storage可以說是一個類瞭，var h = new Host("linux01", "1.1.1.1") 和 var s = new Storage(6, 500) 是在實例化對象，分別實例化出瞭對象h和s。this是對象本身，實例化對象後，就可以通過對象變量.屬性名（或方法）

剝離相同的方法，在全局作用域定義，不同的對象調用的是同一個方法，提升性能

poweron = function() {
    console.log(this.ip + " 開機...");
}

function Host(hname, addr) {
    this.hostname = hname;
    this.ip = addr;
    this.PowerOn = poweron;
}

function Storage(diskNum, size, ip) {
    this.diskNum = diskNum;
    this.size = size;
    this.ip = ip;
    this.PowerOn = poweron;
}

var h = new Host("linux01", "1.1.1.1");
var s = new Storage(6, 500, "192.168.11.90");

h.PowerOn()
s.PowerOn()

註意，在全局作用域定義的函數有個弊端，如果同個項目，其他程序員也剛好在全局作用域定義瞭相同名字的函數，那麼就會把你的覆蓋掉，可以使用原型來解決這個問題，該內容放到下篇繼續講解。

本文轉載於：https://mp.weixin.qq.com/s/8qP_xFMyDnzbqYHMcf75aQ

相关推荐

科技

這個賽道“含金量”達萬億級!國內首個鋰電循環產業互聯網平臺“鋰++”在無錫上線

3 月 10, 2023
科技

百日咳毒素及其應用

3 月 10, 2023
科技

企業站上科技創新“C位”

3 月 10, 2023

您可能感興趣

體育

勇士慘敗灰熊遭三連敗！庫裡29分難救主，普爾敗筆，全隊防守拉胯

3 月 10, 2023
體育

山東舊將有喜事，鞏曉彬沒看錯人，20場砍54+27，徐長鎖看走眼瞭

3 月 10, 2023
體育

五大聯賽球員進球榜：哈蘭德33球居首，姆巴佩、拉什福德二三位

3 月 10, 2023
科技

這個賽道“含金量”達萬億級!國內首個鋰電循環產業互聯網平臺“鋰++”在無錫上線

3 月 10, 2023