上篇：34个JavaScript栗子，从易到难。

  1. 首次编写js代码，通过alert弹框提示hello world。
<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            alert("hello world")
         </script>
     </head>
     <body>
     </body>
</html>
  1. 往页面中输出内容
<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            document.write("hello world")
         </script>
     </head>
     <body>
     </body>
</html>
  1. 向控制台输出内容
<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript">
            console.log("好像有错误哦!")
         </script>
     </head>
     <body>
     </body>
</html>

查看的时候在浏览器按F12打开开发者工具，然后在控制台中可看到该输出的内容。

  1. 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>

说明：代码的指向顺序是从上往下的。

  1. 点击按钮时执行js代码
<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8" />
         <script type="text/javascript"></script>
     </head>
     <body>
        <button onclick="alert('你好')">点击</button>
     </body>
</html>
  1. 点击超链接时执行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属性，但不推荐这么做，造成结构和行为耦合性太强，不方便维护，不推荐使用。

  1. 引入外部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文件中进行编码。

  1. js的基本语法
  • 注释方式
// 这是单行注释
/*
多行注释
多行注释
*/
  • 严格区分大小写
//这是错误的
Alert("这是外部my.js的弹框内容")

//这是正确的
alert("这是外部my.js的弹框内容")

发生错误，在控制台中可以看到：Uncaught ReferenceError: Alert is not defined at my.js:1:1

  • 分号结尾
alert("这是外部my.js的弹框内容");

如果不加分号，浏览器会自动添加分号，但会消耗资源，而且浏览器添加的分号有时候可能是错的，导致出错，造成排障困难，所以建议要加分号。

  • 忽略多个空格和换行
alert(
    "这是外部my.js的弹框内容"
);
  1. 声明变量
var a = 200; //同时声明变量和赋值
console.log(a); //输出到控制台
  1. 使用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. 类型转换
  • 数值转字符串，方式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);
  1. 字符串转数值
var a = "100";
console.log(a, typeof a);
var b = Number(a);
console.log(b, typeof b);

控制台输出：

100 string
100 'number'
  1. 条件运算符
var a = 10;
var b = 20;
a > b ? console.log("ok") : console.log("no");
  1. 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;
}
  1. while循环，小栗子1
var a = 5;
var b = 0;

while(a > b){
    var str = "hello\n";
    document.write(b);
    b++;
}
  1. 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;
    }

}
  1. 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);
}
  1. 使用构造函数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"]);
  1. 创建一个对象，案例2
var obj = new Object();
obj.addr = "10.1.2.3";
var attr = "addr";
console.log(obj[attr]);

控制台输出：

10.1.2.3

使用[]的方式获取属性还可以传传变量哦，更加灵活，根据不同的变量取不同的属性。

  1. 对象中还可以是对象
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);
  1. 检查一个对象中是否有某个属性
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. 还可以使用对象字面量来创建对象，更加方便，案例1
//使用对象字面量来创建一个对象
var obj = {
    name: "ttr", 
    age: 18
};
console.log(obj)

控制台输出：

{name: 'ttr', age: 18}

更推荐使用对象字面量的方式创建对象，更加方便哦。

  1. 对象字面量创建对象，案例2
//使用对象字面量来创建一个对象
var obj = {
    hostname: "linux001", 
    runapp: "nginx",
    ip: {manager: "10.1.1.2", bus: "192.168.16.90"}

};
console.log(obj)
  1. 函数的基础使用
function f1(a, b) {
    var ret = a + b;
    return ret;
}

console.log(f1(19, 20))
  1. 立即执行函数
  • 小栗子1
(function() {
    console.log("hello")
})()
  • 小栗子2
(function(a, b) {
    console.log(a + b)
})(1, 2) // 注意这里是传参，将1和2传给了该函数

所谓的立即执行函数，就是函数定义完，即可立即执行，而不用显示取调用，而且它也没有名字，也可以说是匿名函数，让匿名函数立即执行。

  1. 匿名函数
var f = function(a, b){
    return a + b
}
console.log(f(10, 20))

上面的小栗子中，将匿名函数赋给了变量f，通过f()就可调用。

  1. 给对象添加方法
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

  1. 还可以这么玩，给对象动态的添加方法
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()
  1. 对象的遍历
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
  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。

  1. 哪个对象调用，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
  1. 使用工厂方法创建对象
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，这里有个不好的地方就是无法区分多种不同类型的对象

  1. 通过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是对象本身，实例化对象后，就可以通过对象变量.属性名（或方法）

  1. 剥离相同的方法，在全局作用域定义，不同的对象调用的是同一个方法，提升性能
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

posted @   不背锅运维  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· 一文带你玩透结构体和方法
· 不割韭菜，纯分享：剖析HTML中的类，运维开发必备前端技能，我们一起坚持。
· JavaScript学习笔记(1)
· 40个JS常用使用技巧案例
· 07-JavaScript
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示