[TOC] ## 1.变量 ``` // 声明变量 var mood = "happy"; var age = 33; // 变量名是区分大小写的，以下是两个不同的变量。 var mood = "happy"; var Mood= "happy"; // 变量名的格式， // 变量名允许包含字母、数字、美元符号和下划线 var my_mood = "happy"; var myMood = "happy"; ``` ## 2.数据类型 （1） 字符串 ``` // 字符串有零个或多个字符 // 单引号、双引号都可以，且成对出现。 var mood = "happy"; var mood = 'happy'; // 引号嵌套，如果字符串包含单引号，就使用双引号，反之亦然；否则进行转义。 var mood = "don't ask"; var mood = 'don\'t ask'; ``` 详见[字符串操作](%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C.md) （2） 数值 ``` var age = 23; // 浮点数，允许带小数点的数值， var age = 23.5; ``` （3） 布尔值 ``` var sleeping = true; var hungry = false; ``` （4） 数组 ``` // 数组表示一个值的集合，集合中的每个值都是这个数组的元素。 // 声明数组时，给定长度 var beatles = Array(4); // 也可以不给定长度； var city = Arrary(); // 向数组中填充元素，下标从0开始。 var city = Arrary(3); city[0] = "Beijing"; city[1] = "Shanghai"; city[2] = "Nanjing"; ``` 详见[数组操作](%E6%95%B0%E7%BB%84%E6%93%8D%E4%BD%9C.md) （5） 对象 ``` // 创建对象 var student = Object(); student.name = "Alice"; student.age = 21; student.city = "Shanghai"; // 还可以这样创建 var student = { name: "alice", age: 21, city: "Shanghai" }; ``` （6） 算术操作符 | 运算符 | 描述 | 赋值运算符 | 描述 | | --- | --- |--- | --- | | + | 加法 | = | 赋值，将等号右边的值赋给左边的变量 | | - | 减法 | +=| 计算后再赋值| | * | 乘法 | -=| 计算后再赋值| | / | 除法 | *=| 计算后再赋值| | % | 取模 | /=| 计算后再赋值| | ++ | 自增 | %/| 计算后再赋值| | -- | 自减 | | ** | 幂 | ``` // + 连接字符串 str1 = "Hello"; str2 = "World"; str3 = str1 + str2; alert(str3); // 输出： str3 = "HelloWorld"; ``` ## 3.条件语句 ``` // 语法， 当“条件”满足时，即为True时，才会执行“语句” if (条件) { 语句; }; // 举例：不满足条件时执行else下的语句。 if (1 > 2) { alter("The world has gone mad!"); } else { alter("All is well with the world"); }; ``` 比较运算符 | 运算符 | 描述 | | --- | --- | | == | 等于 | | === | 绝对等于(值和类型都相等) | | != | 不等于 | | !== | 不绝对等于(值和类型有一个不相等，或者都不相等) | | > | 大于 | | < | 小于 | | >= | 大于或等于 | | <= | 小于或等于 | 逻辑运算符 | 运算符 | 描述 | | --- | --- | | && | 与 | | \|\| | 或 | | ! | 非 | ## 4.循环语句 while循环 ``` // 条件必须为True while(条件) { 语句 }; ``` do-while 循环 ``` // 执行循环语句之后，进行条件判断 var count = 1; do { alert(count); count++; } while(count < 11); ``` for 循环 ``` // 示例1： for (var count = 1; count < 11; count++) { alert(count); } // 示例2： const userNames = ["Alice", "Bob", "Cindy"]; for (const userName of userNames) { console.log(userName); } // 输出 Alice Bob Cindy // 遍历数组 var beatles = Array("John", "Paul", "George", "Ringo"); for(var count = 0; count < beatles.length; count++) { alert(beatles[count]) } ``` ## 5.函数 ``` // 语法 function 函数名(参数) { 语句; } // 示例： function shout() { var beatles = Array("John", "Paul", "George", "Ringo"); for(var count = 0; count < beatles.length; count++) { alert(beatles[count]); } }; shout(); // 传递参数 function total(num1, num2) { var count = num1+num2; alert(count); } total(1, 2); ``` ## 补充：变量的作用域 全局变量：可以在脚本的任何位置被引用 局部变量：只存在于声明它的函数的内部，作用于特定的函数。 ## 6.对象 **对象**是一种非常重要的数据类型，包含`属性`和`方法`。 `属性`是隶属于某个特定对象的变量； `方式`是只有某个特定对象才能调用的函数。 ``` // 使用new关键字来创建对象实例 var alice = new Student; ``` **内建对象** 数组其实就是内建对象 ``` var beatles = new Array(); beatles.length; var num = 7.561; var num = Math.round(num); alert(num); var current_date = new Date(); var today = current_date.getDay(); ``` **宿主对象** 由浏览器提供的预定义的对象被称为**宿主对象**。 宿主对象包括Form、Image和Element等。 ## DOM操作 ### getElementById ``` // 参数为获取元素的id属性的值 document.getElementById(id) // typeof 返回操作对象的类型 <div id="container"></div> <script> alert(typeof document.getElementById("container")); // 获取元素对象的属性和方法。 console.dir(object); </script> ``` ### getElementsByTagName ``` // 返回一个对象数组，参数为标签名 document.getElementsByTagName(tag) <ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> alert(document.getElementsByTagName("li").length); alert(typeof document.getElementsByTagName("li")); </script> ``` ### getElementsByClassName ``` // 参数为获取元素的class属性的值 document.getElementByClassName(class) // typeof 返回操作对象的类型 <div class="container"></div> <script> alert(typeof document.getElementsByClassName("container")); </script> ``` ### getAttribute ``` // 查询属性，只能通过元素节点对象来调用。 object.getAttribute(attribute) ``` ### setAttribute ``` // 设置属性，只能通过元素节点对象来调用。 object.setAttribute(attribute, value) ``` ### querySelector ``` // 参数为选择器，返回第一个元素对象 document.querySelector("选择器"); ``` ### querySelectorAll ``` // 参数为选择器，返回元素对象集合 document.querySelectorAll("选择器"); ``` ### 获取body和html标签 ``` // 获取body标签 document.body; // 获取html标签 document.documentElement; ``` ## 7.类和构造函数 ~~~ class Person { name; constructor(name) { this.name = name; } introduceSelf() { console.log(`Hi! I'm ${this.name}`); } } const alice = new Person("Alice"); alice.introduceSelf(); // 一个name属性 // 一个需要name参数的构造函数 // 一个introduceSelf方法 // 省略构造函数 class Animal { sleep() { console.log("zzzzzz"); } } const dog = new Animal(); dog.sleep(); ~~~