一、JavaScript简介
1、什么是JavaScript?
JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司(NetScape)的 布兰登·艾奇 开发的,最初叫做LiveScript。LiveScript的出现让浏览器更加生动,使得页面更具有交互性。
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript和java没有任何关系,只是语法类似。JavaScript运行在浏览器中,代码由浏览器解释后执行。而Java运行在JVM中。
JavaScript的“目标程序”以普通文本形式保存,这种语言都叫做"脚本语言“。
Java的目标程序已.class形式存在,不能使用文本编辑器打开,不是脚本语言。
1998年网景公司由“美国在线”公司收购。
王景公司最著名的就是“领航者浏览器”:Navigator浏览器。
LiveScript的出现,最初的时候是为Navigator浏览器量身定制一门语言,不支持其他浏览器。
微软一看不行,研发了只支持IE浏览器的脚本语言。JScript。
在两者语言共存的时代,程序员需要写两套程序。这时一个叫做ECMA组织(欧洲计算机协会)根据JavaScript制定了ECMA-262标准,叫做ECMA-Script.
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
2、JavaScript构成
- 核心(ECMAScript)
- 文档对象模型(DOM)–document Object Module
- 浏览器对象模型(BOM)–Browser Object Module
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85TO6Qpx-1653037390967)(D:/华清远见 前端/02-js笔记/图片/js-union.png)]
ECMAScript:是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展
BOM: Browse Object Model,提供与浏览器交互的方法和接口
DOM: Document Object Model,提供访问和操作网页内容的方法和接口
3、 JavaScript 使用
在Web应用程序中,JavaScript是HTML文档的一部分,它是依托 HTML 而存在的。也就是说,必须把脚本的代码放在HTML文档中,否则它无法运行。JavaScript 程序可以用任何文本编辑器来编写。
1. 行级
给标签设置对应的属性,属性值是要执行的JavaScript代码。
<a href="javaScript:alert('你已经领取过了')">领取奖品</a>
<input type="button" value="点击有惊喜" onclick="alert('哈哈哈哈')">
2. 嵌入
使用script标签,标签需要闭合,标签内容是要执行的JavaScript代码,格式如下:
<script>
JavaScript 语言代码;
</script>
注:
① 可以将JavaScript代码嵌入到head中或body中的任何地方。
② 含在
3. 引入
使用script标签,标签需要闭合,设置属性src,src的值是js文件路径,如:./js/my.js。
<script src="./js/my.js"></script>
<script src="./js/my.js"/>
注:
① 嵌入和导入的数量不受限制;
② 使用script 标签引入外部js文件时(标明src属性,不管有没有赋值),标签内容部分再填写js语句是不能执行的;
③ js代码直接写在一个独立的文件里面,该文件就是js文件,后缀是.js
二、基础语法
1、语法规范
- 区分大小写
- JavaScript区分大小写,包括关键字、变量、函数名、所有标识符;
- querySelector的S是大写,你写成小写就会报错;
- alert()全部是小写,你写一个大写字母就会提示你该函数不存在;
- myname、myName、mynamE、MyName他们真不是一个东西;
- 注释
JavaScript支持两种注释方式;
单行注释 //这是注释内容
/*
* 这是一个多行
* (块级)注释
*/
- 虽然上面注释中的第二和第三行都以一个星号开头,但这不是必需的。之所以添加那两个星号,纯粹是为了提高注释的可读性(这种格式在企业级应用中用得比较多)。
- 注释部分不会执行,合理的注释能显著提高代码的可读性;
- 可以通过浏览器源文件看到注释内容,所以什么该注释什么不该注释要注意;
- 语句
ECMAScript 中的语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾,如下例所示:
var sum = a + b // 即使没有分号也是有效的语句——不推荐
var sum = a - b; // 有效的语句——推荐
虽然语句结尾的分号不是必需的,换行也可以表示一个语句结束,但我们建议任何时候都不要省略它。这样可以避免程序员犯一些低级错误,当然大佬也是可以忽略的,像我们这种小白还是好好写吧!
可以使用 C 风格的语法把多条语句组合到一个代码块中,即代码块以左花括号({)开头,以右花括号(})结尾:
if (test) {
test = false;
alert(test);
}
虽然条件控制语句(如 if 语句)只在执行多条语句的情况下才要求使用代码块,但最佳实践是始终在控制语句中使用代码块——即使代码块中只有一条语句,例如:
if (test)
alert(test); // 有效但容易出错,不要使用
if (test) { // 推荐使用
alert(test);
}
在控制语句中使用代码块可以让编码意图更加清晰,而且也能降低修改代码时出错的几率。
- 标识符:所谓标识符,就是指变量、函数、属性、参数的名字,或者用做某些循环语句中的跳转位置的标记。
有以下注意事项:
- 只能由数字、字母、下划线和美元符号($)组成;
- 合法的标识符:myname、_age、$classname、abc、hqyj_h5;
- 不合法的标识符:5myname;
- 不能以数字开头;
- 不能是保留字和关键字;(下面会有介绍)
- 大小写敏感 age 、Age 这是两个完全不同的变量;
- 见名知意(尽量使用英文全称),例如年龄:age 而不是a阿b的;
- 单词个数超过两个之后;
- 驼峰式命名 className(用的比较多);
- 下划线命名 class_name;
2、关键字和保留字
ECMA-262 描述了一组具有特定用途的关键字,这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。以下就是 ECMAScript的全部关键字(带*号上标的是第 5 版新增的关键字):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdWNJb7O-1653037390968)(D:/华清远见 前端/02-js笔记/图片/importantword.png)]
ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途,但它们有可能在将来被用作关键字。以下是 ECMA-262 第 3 版定义的全部保留字:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0UJwh64-1653037390969)(D:/华清远见 前端/02-js笔记/图片/es3-baoliuword.png)]
3、变量
当程序需要将值保存起来以备将来使用时,便将其赋值给一个变量。变量(variable)是一个用于保存值的占位符,可以通过变量名称来获得对值的引用。
变量在JavaScript中就是用一个变量名表示,**变量名是大小写英文、数字、$和_的组合,且不能用数字开头。**变量名也不能是JavaScript的关键字,如if、while等。申明一个变量用var语句,比如:
var a; // 申明了变量a,此时a的值为undefined
var $b = 1; // 申明了变量$b,同时给$b赋值,此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null
在JavaScript中,使用赋值符号 = 对变量进行赋值。可以把任意数据类型赋值给变量,同一个变量可以反复赋值,而且可以是不同类型的变量,但是要注意只能用var申明一次,例如:
var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串
4、 var声明
- 有var,系统就会在当前作用域的第一行代码隐式的声明一个变量(变量提升);
- 无var,系统帮你创建一个(全局)变量(运行到这里的时候)。
var abc = 'Hello, world';
abcd = "abcd";
- 严格模式下,使用没有var声明的变量会报错。
三、JavaScript数据类型
JavaScript的数据类型分类:
- 基本数据类型:Number、String、Boolean
- 特殊数据类型:NULL、Undefined、NaN
- 引用数据类型:数组、对象、函数等
1、typeof 操作符
typeof 就是负责鉴定数据类型的操作符。
对一个值使用 typeof 操作符可能返回下列某个字符串:
- “undefined”——如果这个值未定义;
- “boolean”——如果这个值是布尔值;
- “string”——如果这个值是字符串;
- “number”——如果这个值是数值;
- “object”——如果这个值是对象或 null;
- “function”——如果这个值是函数。
面试题–typeof 返回值
//返回值类型
console.log(typeof typeof 222); //string
typeof本身是字符串型,这里是一个坑要注意不要跳进去~
2、 Undefined类型
- Undefined 类型只有一个值,即特殊的 undefined。
- 在使用 var 声明变量但未对其没有赋值时,这个变量的值就是 undefined
来个例子理解吧:
var message;
alert(message == undefined); //true
这个例子只声明了变量 message,但未对其进行赋值。比较这个变量与 undefined 字面量,结果表明它们是相等的。
3 、Null类型
- null类型是第二个只有一个值的数据类型,这个特殊的值是 null。
- 实际上,ECMA-262 规定对它们的相等性测试要返回 true:
alert(null == undefined); //true,仅做判断不做字符串连接时
这里,位于 null 和 undefined 之间的相等操作符(==)总是返回 true。
null和undefined区别:
null
- 用来描述空值;
- typeof null:返回的是字符串object
undefined
- undefined表明只声明了变量没有赋值;
- 如果函数没有返回值,则返回undefined;
- typeof undefined:返回的是字符串undefined;
- ==认为NULL和undefined是相等的;===则返回false;
4 、Boolean类型
Boolean 类型是 ECMAScript 中使用得最多的一种类型,该类型只有两个字面值: true 和 false。Boolean 类型的字面值 true 和 false 是区分大小写的。
5 、Number类型
用来表示整数和浮点数值
6、 String类型
字符串可以由双引号(")或单引号(')表示,因此下面两种字符串的写法都是有效的:
var firstColor = "pink";
var lastColor = 'blue';
字符串的特点
ECMAScript 中的字符串是不可变的,也就是说,字符串一旦创建,它们的值就不能改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量。
7、Object类型
ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。
也就是说 对象=属性+方法
如下所示:
var o = new Object;
//var o={}
//为实例添加属性并赋值
o.name = "张三";
o.age = 24;
var o={
name:"张三",
age:24
}
也可使用大括号定义对象:
var person = {
name:'张三',
age:24,
say:function(){
console.log('大家好,我叫张三');
}
}
- 通过点(.)访问对象的属性:person.name;
- 通过点(.)访问对象的方法:person.say();
四、操作符
- A&&B A为False时,执行A,B不运行; 反之执行B。
- A||B A为True时,执行A,B不运行; 反之执行B;
在开发中优化代码最常用。 - 运算符:面试题:var f1=new new Fn.rank( )( )
- 开关思想:把一个变量中保存一个布尔值,然后再业务执行时,修改这个变量的值,为取反,然后通过变量的值执行分支业务。
- 排他思想:先清除所有的效果,然后赋予自己这个效果。
- == 双等号 :“100”==100 值相等 但是类型不同 。引用数据比较时看内存空间,数值一样不一定相等。
难点:笔试题中喜欢考 == 的比较表(背它)
var arr=[]
var b=''
console.log(arr==b)//True
//因为转换成了字符串,所以相等
var arr=[] //这是一个内存空间
var arr2=[[]] //这是内存空间
console.log(arr==arr2)
//false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lUBjg6PX-1653037390970)(C:\Users\Lenovo\Pictures\Screenshots\true_false.png)]
- === 三等号 :值和类型都要相等。
- in运算符:检查右侧对象里面是否拥有左侧属性名,如果有返回true;反之,返回false。
实例代码:
var a = {x:1, y:2, z:''};
console.log(a);
console.log('x' in a);
console.log('z1' in a);
console.log('toString' in a);
- 对象在js中是一种键值对的集合:key:value
- 逗号操作符多用于声明多个变量;但除此之外,逗号操作符还可以用于赋值。在用于赋值时**,逗号操作符总会返回表达式中的最后一项**,如下面的例子所示:
var num = (5, 1, 4, 8, 0); // num 的值为 0
- eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。
eval()
是全局对象的一个函数属性。eval()
的参数是一个字符串。- 如果
eval()
的参数不是字符串,eval()
会将参数原封不动地返回。
看一下例子:
console.log(eval('2 + 2'));
// expected output: 4
console.log(eval(new String('2 + 2')));
// expected output: 2 + 2
console.log(eval('2 + 2') === eval('4'));
// expected output: true
console.log(eval('2 + 2') === eval(new String('2 + 2')));
// expected output: false
三、语句
1、定义:
表达式-----最简单的语句,
单语句:只有一条语句,每一个单语句结尾都要加分号;
复合语句:多条单语句组成 ; 语句组成程序。
空语句:啥都不写 ;
2、if语句:
js的执行引擎:如果执行体只有一条语句,可以省略执行体。
if-else if -else 语句 不是js的标准语法,是程序员利用js引擎的纠错功能实现的。
var a = 20;
if (a < 18) {
alert('未成年');
} else if (a > 22) {
alert('可以喝酒结婚')
} else {
alert('可以喝酒');
}
3、switch语句
switch 语句用于基于不同的条件来执行不同的动作。
使用 switch 语句来选择要执行的多个代码块之一。
语法如下:
switch(n) {
case 10: 执行代码块 1
break;
case 20: 执行代码块 2
break;
default: 与 case 1 和 case 2 不同时执行的代码
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 **break **来阻止代码自动地向下一个 case 运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch语法</title>
</head>
<body>
<p>点击下面的按钮来显示今天是周几:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.querySelector("demo").innerHTML=x;
}
</script>
</body>
</html>
·使用 default 关键词来规定匹配不存在时做的事情
switch 和 if 语句区别:
switch 更具有业务性
if语句 更具有逻辑性
4、 for语句(重要)
循环可以将代码块执行指定的次数。
如果希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
我们可以这样输出数组的值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
console.log(i)
</script>
</body>
</html>
不同类型的循环
JavaScript 支持不同类型的循环:
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for循环
for 循环是在希望创建循环时常会用到的工具。
语法如下:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
for (语句 1; 语句 2;)
{
被执行的代码块;
语句 3;
}
- 语句 1 (代码块)循环开始前执行 starts.
- 语句 2 定义运行循环(代码块)的条件
- 语句 3 在每次循环(代码块)已被执行之后执行
考点:
//分析下面的结果 ?
//第一题
var i = 0;
for (; i++, i < 5;) {
console.log(i);
} //1 2 3 4
//第二题:闭包的作用域
var arr = [];
for (var i = 0; i < 4; i++) {
arr[i] = function () {
console.log(i)
};
}
arr[0]() //结果:4
arr[1]() //结果:4
/* 原因:
var arr=[]{
var i=0; //变成1,2,3
if(i<4){
arr[0] = function() {console.log(i)}
//不取值 函数没有调用
i=i+1;
if(1<4){
arr[1] = function() {console.log(i)}
i=i+1;
...
if(4<4){
} else{跳出循环}
}
}
}
最后执行 arr[0]() // 其实就是i在运行过程中一直在变化 最后加到了4
*/
for (var j = 0; j < 4; j++) {
arr[j];
}
//第三题
for (var i = 0, j = 6; i < 4, j > 0; i++, j--) {
console.log(i);
} //考点:由j>0控制
//结果 j:6 5 4 3 2 1 i输出:0 1 2 3 4 5
//for中的业务条件筛选
var arr = [{
age: 21,
name: 'karen',
rank: 580
},
{
age: 10,
name: 'jack',
rank: 380
},
{
age: 12,
name: 'marry',
rank: 540
},
{
age: 23,
name: 'rose',
rank: 880
}
]
/* //1.打印名字
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].name);
} */
//2.打印大于18岁的名字
for (var i = 0; i < arr.length; i++) {
if (arr[i].age > 18) {
console.log(arr[i].name);
}
}
//3.打印年龄大于18 rank 大于480 的名字
for (var i = 0; i < arr.length; i++) {
if (arr[i].age > 18 && arr[i].rank > 480) {
console.log(arr[i].name);
}
}
//4.打印年龄小于18 rank大于400的对象的名字 拼接一个字符串“少年班” 大于18 且rank大于480 的普通班 其余的啥也不是
for (var i = 0; i < arr.length; i++) {
if (arr[i].age < 18 && arr[i].rank > 480) {
console.log(arr[i].name + '少年班');
} else if (arr[i].age >= 18 && arr[i].rank > 480) {
console.log(arr[i].name + '普通班');
} else {
console.log(arr[i].name + '啥也不是');
}
}
for循环嵌套思想:
- 不要管内部外部for 的执行问题,重点关注每一个for都是遍历自己的数组;
- for 内部有条件语句和数据处理得到的数组,然后用for遍历
- for大括号会执行数组的元素个数这么多次,每次执行时 i 就是元素的下标。
5、while 语句
- 语法
while (A)
{
业务需要执行的代码
}
//A判定为真,执行业务 循环
//A判定为假,直接结束while语句
var i=0
for(;i<len;){
//需要执行的代码
i++;
}
- 怎样判断选择while和for 循环?
- while循环:如果有一个业务需要重复执行,但是总有一次执行会让他停下来不再执行,不知道循环次数。
- for 循环: 一个业务需要重复执行,但是是已知次数。
6、continue和break 语句
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代,继续执行下一个迭代(如果有的话)。
break 语句举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击按钮,测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
continue 语句举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮来执行循环,该循环会跳过 i=3 的步进。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + "该数字为 " + i + "<br>";//9行
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
7、 label 语句
标签语句,在语句之前加上冒号:可标记 JavaScript 语句。
语法如下:
label: statements
break 和 continue可以使用标签语句。
var a = 0;
forhere:
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if(j == 5){
break forhere;
//这里终止的是外面的for循环
//体会continue、break后面加和不加语句标签的区别;
}
a++;
}
}
console.log(a);
并且:
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>
</body>
</html>
8、throw抛出异常
1.立即停止正在执行的程序,跳转至就近的逻辑异常处理程序。
例子:
function factorial (n) {
if(isNaN(n)) throw new Error('请输入数字,HOHO');
if(n == 1) return 1;
return n*factorial(n-1);//递归
}
var n = factorial(3);//3*factorial(2)--3*2*factorial(1)--3*2*1
console.log(n);//6
var n = factorial('a05');
console.log(n);
var n = factorial(5);
console.log(n);
2.throw抛出异常该异常可以是 JavaScript 字符串、数字、逻辑值或对象。
3.js语言,是脚本语言,当运行过程终于到了错误就停止运行后面的代码。
9、try-catch-finally语句
- try-catch-finally是JavaScript的异常处理机制。
- 语法
try{
//我们自认为没有错误的 处理业务的代码
}
catch(e){
//上面的业务处理代码报错了,这里才会执行
//console.log(e);
}
finally{
//这里总是会执行的,理解为领导总结发言
}
//语句 不会影响到后面代码的执行。
异常对象e里面有两个属性name和message,分别代表错误类型和错误描述信息。
- 例子
try {
console.log(1);
throw new Error('出错了');
console.log(2); //不会打印2
} catch (e) {
console.log(e.message); //打印throw里面的内容,里面写其他的字符串也行
} finally {
console.log(4);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwVhgouR-1653037390970)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220429210348940.png)]
10、with语句(了解)
例子:
<script>
var a = 20;
var b = 10;
console.log(window.b); //window 全局变量 可省略
var obj = {
age: 20,
name: "karen"
};
with(obj) {
console.log(name);
}
/* //我们平常使用的这里代码有一个隐式操作 with(window){
} */
console.log(age); //报错
</script>
不建议使用,语法有性能问题,es6 解决了这个问题
新技术:解构赋值
var {age,name}=obj;
console.log(age)