JavaScript(1)语法基础
时间:2021-06-17 17:13:27
收藏:0
阅读:0
JavaScript
- JavaScript:基于对象和事件触发的弱类型脚本语言。脚本通常以文本保存,只在被调用时进行解释或编译。可以动态增删改HTML标签和CSS样式,动态校验数据。
- JavaScript特点:
- 交互性:存在于所有Web浏览器中,能够增强用户与Web站点和 Web 应用程序之间的交互。
- 安全性:不能直接访问磁盘
- 跨平台:浏览器能解析JavaScript就可以,不需要针对于操作系统。
- JavaScript组成:
- ECMAScript(核心):
- DOM(文档对象模型)
- BOM(浏览器对象模型)
- JavaScript引用方式:<script>标签在任意位置使用都可以,但是影响加载顺序。前两种引用方式不可以混用。type="text/javascript"属性不是必需的。JavaScript是HTML中的默认脚本语言。
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第一种【内部脚本】:使用<script>声明js代码域。【注意:外部脚本中不能再写内部脚本】 --> <script type="text/javascript"> alert(‘第一种‘); </script> <!-- 第二种【外部脚本】:使用<script>引入外部声明的js文件。src属性:JavaScript文件的相对路径 --> <script src="my.js" type="text/javascript"></script> </head> <body> <!-- 第三种【内嵌脚本】:内嵌在标签内部,通过事件触发属性调用。例如:onclick等 --> <input type="button" onclick="alert(‘第三种‘)" value="第三种"> </body>
JavaScript语言
- 注释:分为多行注释和单行注释。
// 单行注释
/* 多行注释 多行注释 多行注释 */
- 语法规范:建议使用分号;结尾、忽略多个空格、支持折行编写代码、
- 变量声明:用var关键字进行变量声明(var可以省略)。可以存储任意类型的数据。变量允许出现同名变量,后面的会将前面的覆盖。严格区分大小写。声明不赋值,默认值是undefined。变量允许字母、数字、_(下划线)、$(美元符号),不允许以数字开头和关键字。
// 声明变量。 var a = 123;
- 数据类型:JavaScript中数据类型有五种基本类型(Number、String、Boolean、Null、Undefined)和一种引用类型(Object)。可以使用typeof可以判断变量的数据类型
- number:数字类型。包含了JavaScript中所有的数字类型(包括浮点数和小数)。数字类型不精准,不能用于金钱计算。
- string:字符串类型。可以使用单引号也可以使用双引号。
- boolean:布尔类型。只有true和false两种。
- null:空类型。输出null为object类型
- undefined:未定义的类型。变量声明后不赋值时默认是未定义类型。Undefined和null判定是相等的
- object:对象。ECMAScript中的所有对象都由Object继承而来,Object对象中的所有属性和方法都会出现在其他对象中。var obj = new Object();
var a; // 结果为:undefined console.log("var:" + typeof (a)) a = 123; // 结果为:number console.log("123:" + typeof (a)) a = "cls"; // 结果为:string console.log("cls:" + typeof (a)) a = true; // 结果为:boolean console.log("true:" + typeof (a)) a = null; // 结果为:object console.log("null:" + typeof (a))
- 数据类型比较:实际开发中经常判断某些值是否为null或者为undifend。下面代码进行举例如何判断。
/* * 结论:typeof输出的均为小写字符串,需要使用字符串比较。=== 需要使用数据类型比较 */ var a; // 输出为:undefined console.log(a); // 输出为:undefined(但实际上是‘undefined‘) console.log(typeof a); // 输出为:true(直接使用类型判断) console.log(a === undefined); // 输出为:false(使用typeof之后输出的均为字符串类型) console.log(typeof a === undefined); // 输出为:true console.log(typeof a === ‘undefined‘); var b = null; // 输出为:null console.log(b); // 输出为:object console.log(typeof b); // 输出为true console.log(b === null); // 输出为:false console.log(typeof b === null); // 输出为:false console.log(typeof b === Object); // 输出为:false console.log(typeof b === ‘null‘); // 输出为:true console.log(typeof b === ‘object‘); var c = 1; var d = ‘曹老三‘; var e = false; console.log(c === 1); console.log(d === ‘曹老三‘); console.log(e === false);
- 数据类型转换:toString()、parseInt()、parseFloat()和强制类型转换Boolean(),String(),Number()。null和undefined进行转换会报错(没有toString和parseInt等方法)
var x = "12.05"; // 转换成String console.log(x.toString() + ":" + typeof x.toString()); // 转换成Boolean console.log(Boolean(x) + ":" + typeof Boolean(x)); // 转换成Number console.log(parseFloat(x) + ":" + typeof parseFloat(x)); console.log(parseInt(x) + ":" + typeof parseInt(x));
- 运算符:
- 算术运算符:+,-,*,/,%。在算术运算中,数据类型会自动使用Number()强转成数字类型,然后进行运算
- 关系运算符:>,>=,<,<=,!= ,++(自增),--,=,==(等值符,只比较值),===(等同符,比较值和类型)
- 三元运算符:条件?表达式1:表达式2(如果条件为true,返回表达式1的结果,如果条件为false,返回表达式2的结果)
- 逻辑运算符:&&,||,!
- void运算符:javascript:void(0)。一般用于<a>标签的href属性,防止查看地址,阻止跳转。
- 类型运算符:typeof判断数据类型、instanceof(判断类型是否是你定义的,返回boolean类型【注意:不能使用instanceof判断null和undefined】)
var a = 10; var b = 20; var c = "10"; // 加法 console.log(a + b); // 等值符和等同符 console.log((a == c) + ":" + (a === c)); // 关系运算符:大于 console.log(a > b);
- 流程控制语句:基本语法同java语言,不做过多解释,见代码
-
判断选择结构:if(){},else if(){},else{},switch(){}
-
循环结构:for(){},while(){},do{}while(),for(in){}增强for循环
var a = 15; var b = ["呵呵", "哈哈", "垃圾"]; // 判断:if else if (a == 10) { console.log("a为10"); } else if (a == 20) { console.log("a为20"); } else { console.log("a未匹配"); } // 判断:switch switch (a) { case 10: console.log("a为10"); break; case 20: console.log("a为20"); break; default: console.log("a未匹配"); break; } // 循环:for for (var i = 0; i < b.length; i++) { console.log(i); console.log(b[i]); } // 循环:增强for(i代表的角标,这个和java中不一样)【经常用于遍历对象】 for (var i in b) { console.log(b[i]); } // 循环:while while (a < 20) { console.log(++a); } // 循环:do while do { console.log(a++); } while (a < 25);
对象、函数
- 对象:基本数据类型只能将单一值赋给变量,对象就可以把多个值(包括函数,如果是函数就称作“方法”)赋给变量。对象分为内置对象(Number、String、Math等)、宿主对象(由JavaScript运行环境【浏览器】提供的对象,BOM、DOM)、自定义对象。
// 创建对象 var student = { "name": "曹老三", "age": 18, "grade": 50, "isBy": false, "study": function () { console.log("我在学习") } } // 修改对象(属性) student.name = "王大妞"; // 读取对象(属性) console.log(student.name); console.log(student["name"]); // 删除对象(属性) delete student.name; console.log(student.name); // 调用对象的函数属性 student.study();
- 遍历对象:对象如果不知道有多少属性的时候,可以使用for...in进行遍历
// 创建对象 var student = { "name": "曹老三", "age": 18, "grade": 50, "isBy": false, "study": function () { console.log("我在学习") } } // 遍历对象 for (item in student) { console.log(student[item]); }
- 函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
- JavaScript中的函数不需要定义返回值。如果需要返回值,直接return,默认返回undefined。
- 形参不需要声明类型,函数的形参在调用的时候可以不赋值,默认为undefined。如果不完全赋值,则为依次赋值。
- 没有函数重载,只有函数覆盖。
- 实参可以是任意类型对象:实体类、函数、匿名函数
// 第一种声明方式:普通函数声明【常用】(函数声明提前) function test1(a, b) { alert("我是第一种声明方式" + (a + b)); } // 第二种声明方式:构造函数方式 var test2 = new Function("a", "b", "alert(a+b);"); // 第三种声明方式:匿名函数并赋给一个变量【常用】 var test3 = function (a, b) { alert("我是第三种声明方式" + a + b); }; // 定义需要返回值的函数 function sum(a, b) { return a + b; }
// 调用函数 test1(5, 6); // 调用函数(有返回值) var c = sum(5, 6);
- 全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。全局作用域中有一个window对象(BOM)由浏览器创建。而所有的全局变量都是window对象的属性。所有的函数都是window的方法。
- 局部变量:在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。局部变量会在函数运行以后被删除。
// 全局变量 var d = 789; // 方法 function test1(a, b) { // 局部变量 var c = 654; // 输出局部变量 console.log(c); // 输出全局变量 console.log(d); return c; } // 输出局部变量【报错】 // console.log(c); // 输出全局变量 console.log(d); test1();
- 实参和返回值类型:可以是任意对象、函数(代码举例)、匿名函数
// 实参传入(1)函数 function test1(a) { console.log("test1 -------------- "); // 方式一对应:调用函数test2 console.log(a(5, 6)); // 方式二对应:输出函数test2返回值 console.log(a); } function test2(a, b) { console.log("test2 -------------- "); return a + b; } // 方式一:将函数对象传入 test1(test2); // 方式二:调用函数,将返回值传入 test1(test2(5, 6));
// 实参传入(2)对象 var person = { "name": "曹老三", "age": 15 }; function test1(a) { console.log(a.name); console.log(a.age); } // 调用函数传入对象 test1(person);
- 立即执行函数:表示这段函数只会执行一次且立即执行。
/** * 立即执行函数: * 外边括号防止编译报错,表示为一个整体 * 后边括号为立即调用函数。 **/ (function () { console.log("123") })();
- 声明提前:所有var定义的对象,都会最先被声明,但是不会赋值。只有执行到那一行才会赋值。不使用var声明的对象,只有执行到那一行才会声明和赋值
// 提前打印a:undefined。声明未赋值就是undefined console.log(a); // 提前打印b:报错!因为b还没有声明 console.log(b); // 使用var声明a var a = "123"; // 不使用var声明b b = "456";
- 函数声明提前:常用的两种创建函数的方式针对声明时机有却别,详情看代码
// 正常使用函数 test1(); // 报错:函数不存在 test3(); // 声明提前,页面加载时候就被创建,也就是说无论什么时候使用都行。 function test1() { console.log("我是第一种声明方式"); }; // 声明不提前:只有执行这段代码之后test3方法才能调用。 var test3 = function (a, b) { console.log("我是第三种声明方式"); };
- 函数作用域:每次调用函数都会创建一个新的函数作用域,他们之间相互独立。函数中可以访问全局变量,全局中无法访问函数的局部变量。函数中使用变量优先级是从内部找,然后一层层向外找,如果最外层的全局作用域也没有该变量,就会报错。在函数中不使用var声明变量,就变成了全局变量。
// 全局变量 var a = 10; var b = 33; // 函数 function test1() { // 局部变量 var a = 20; // 优先使用局部变量 console.log("函数中:" + a); // 局部变量没有b使用全局变量b console.log("函数中:" + b); }; // 外部访问的就是全局变量 console.log("全局:" + a); test1();
this
- this:根据调用方式不同,this表示的也是不同的对象
- 方法方式调用:this 表示该方法所属的对象。
- 函数方式调用:this 表示全局对象。在严格模式下,this 是未定义的(undefined)。
- 事件方式调用:this表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
评论(0)