文章目录
一、JavaScript是什么?
1.JavaScript的历史沿革
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像当下十分流行的Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
2.JavaScript的组成部分
JavaScript主要包括三部分:
①ECMAScript
ECMAScript是JavaScript的核心,仅仅是一个描述,定义了脚本语言的所有属性,方法和对象。具体地,ECMAscript描述了以下内容: 语法、类型、语句、关键字、保留字、运算符、对象每个浏览器都有它自己的ECMAScript 接口的实现,然后这个实现又被扩展,包含了 DOM 和 BOM。
②DOM–文档对象模型
DOM(文档对象模型)是 W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
③BOM–浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象模型,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
3.JavaScript的特点
解释性的脚本语言
与其他脚本语言一样,JavaScript也是一种解释性语言,代码不进行预编译,提供了非常方便的开发过程。JavaScript的基本语法结构与C、C++、Java非常相似。但是在使用之前,与这些语言不同,它们需要先被编译,但是在运行程序的过程中由js解释器逐行解释。javascript与HTML标识符结合使用,方便用户操作。
跨平台
JavaScript依赖于浏览器本身,与操作环境无关。只要计算机能运行浏览器,支持javascript浏览器,就可以正确执行。因此,javascript是一种可以嵌入到HTML文件中的新描述语言。
事件驱动
JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序
安全
JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
面向对象
它也可以看作是一种面向对象的语言,这意味着JavaScript可以使用它创建的对象。因此,许多函数可以来自脚本环境中对象方法和脚本之间的交互。
4.浏览器如何执行JavaScript
浏览器分成两部分,渲染引擎和JS引擎
渲染引擎
用来解析html与css,俗称内核,比如chrome浏览器的blink,老版本的webkit
JS引擎
也称为JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
二、JavaScript怎么用
1.引入方法
行内式(直接写到元素的内部)
<input type="button" value="1" onclick="alert('xxxx')">
内嵌式 (与css类似)
<!DOCTYPE html>
<html lang="en">
<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>
alert('xxxxx');
</script>
</head>
<body>
</body>
</html>
外联式
<script src="my.js"></script>
注意标签中间不能写代码 在my.js中直接写代码即可
如何添加注释?
单行注释 / /
选中要添加注释的地方 按ctrl + /
多行注释 / * * /
选中要添加注释的区域 按shift + ctrl + a
如果要修改默认的快捷键可以在vscode中点击左下角的设置按钮,选择键盘快捷方式
3.输入输出语句
输入框、弹出警示框、控制台(见代码)
<script>
prompt('请输入');
alert('xxxx');
console.log('xxx');
</script>
三、基础语法
1.变量
1.1 什么是变量
变量是程序在内存中申请的一块用来存放数据的空间,我们通过变量名获取数据,甚至可以修改数据
1.2 使用变量
声明变量
var age;
声明一个名为age的变量
var是一个JS关键字,用来声明变量(variable),使用该关键字声明变量后,计算机会自动为变量分配内存空间,
值得注意的是,使用var声明变量会有变量提升的问题(见代码)
补充:
var let const
var | let | const | |
---|---|---|---|
可否重声明 | 是 | 否 | 否 |
可否再赋值 | 是 | 是 | 否 |
作用域
- 用 var声明的变量的作用域是它当前的执行上下文,即如果是在任何函数外面,则是全局执行上下文,如果在函数里面,则是当前函数执行上下文。换句话说,var声明的变量的作用域只能是全局(全局对象window,BOM,整个script标签,或者是一个单独的js文件)或者整个函数块的。
- 而 let 声明的变量的作用域则是它当前所处代码块,即它的作用域既可以是全局或者整个函数块,也可以是if、while、switch等用{}限定的代码块。
- const的作用域与let一致,也是它当前所处代码块,但它与前两者都有所不同的是,它声明的是一个常量
另外,var 和 let 的作用域规则都是一样的,其声明的变量只在其声明的块或子块中可用。
示例代码:
function varTest() {
var a = 1;
{
var a = 2; // 函数块中,同一个变量
console.log(a); // 2
}
console.log(a); // 2
}
function letTest() {
let a = 1;
{
let a = 2; // 代码块中,新的变量
console.log(a); // 2
}
console.log(a); // 1
}
varTest();
letTest();
从上述示例中可以看出,let 声明的变量的作用域可以比 var 声明的变量的作用域有更小的限定范围,更具灵活。
命名规范
可以一次声明单个变量,也可以一次声明多个变量。
var age = 10, name = '23', sex = 2;
赋值
把值赋给变量,如果没有赋值,系统自动默认赋值是undefined
如果多次为变量赋值,将会不断更新变量的值
age = 10; 把 10 赋给变量 age
变量的初始化–声明变量并赋值
var age = 10;
与c语言、java不同的是:JS允许不声明,直接赋值的情况
tel = 123;
2.数据类型
2.1 变量的数据类型
变量是用来存储值的所在处,他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言,这意味着不用提前声明变量的类型,在程序运行过程,类型会被自动确定
var age = 10;
var areYourOk = '是的';
在代码运行时,变量的数据类型是由JS引擎根据等号=右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。
相同的变量也可用作不同的类型
var x = 6;
var x = "Bill";
2.2 数据类型的分类
2.2.1 Number数字型
isNaN()
用来判断一个变量是否为非数字的类型,是则返回true,否则返回false
(见代码:NaN性质:
1.不等于任何值
2.数值除以非数值得NaN
)
2.2.2 String字符串型
如果想打出换行、横线这些转义字符,我们需要用到字符串转义符
字符串转义符
转义字符一定要写在引号里面
字符串长度
字符串中字符的数量就是字符串的长度,通过字符串的length属性可以获取整个字符串的长度
var str = 'damn';
alert(str.length);//length=4
字符串拼接(见代码)
多个字符串之间可以使用加号 “ + ” 进行拼接,其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
2.2.3 Boolean布尔型
var flag = true;
如果布尔型参与加法运算,true当1来看,false当成0来看
2.2.4 Undefined(单值)
(1)声明了但未初始化的变量的默认值
(2)typeof 未初始化或未声明的变量
2.2.4 Null(单值)
空对象指针(略)
var x=null
alert(typeof x)//object
判断对象是否为空:
if(x!=null)
其实undefined派生自null
alert(undefined==null)//true
2.3 数据类型转换
转换成字符串
方法一:变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
方法二:String(变量)
var num = 10;
console.log(String(num));
方法三:利用+拼接字符串的方法实现转换效果
var num = 10;
console.log(num + '');
转换为数字型
<script>
//1、parseInt(变量)可以把字符型的转换为数字型,得到是整数
console.log(parseInt('3.14'));//3 取整
console.log(parseInt('3.94'));//3 取整
console.log(parseInt('120px'));//120 会去掉px这个单位
console.log(parseInt('rem120px'));//NaN
//2、parseFloat(变量)可以把字符型的转换为数字型,得到是小数,浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120 会去掉px这个单位
console.log(parseFloat('rem120px'));//NaN
//3、利用Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
//4、利用了算数运算- * 即隐式转换
console.log('12'-0);//12
console.log('123'-'120');
console.log('123' * 1);
</script>
转换成布尔型
代表空、否定的值会被转换成false,如0、NaN、null、undefine
其余值都会被转换成true
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean('哈哈哈'));//true
补充 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何来表达这个值。字面量有的地方称为直接量,即看见什么,它就是什么。
var a = 1 // 1为字面量
var a = "rocn" // "rocn"为字面量
var a = function() // function()为字面量
var person={
name:'小王',
age:18,
pri:233
} //{}即里面的内容就是字面量
3.运算符(略 同C)
运算符也被称为操作符,是用于实现赋值、比较和执行数运算等功能的符号
3.1 算数运算符
+加,-减,*乘,/除,%取余
算数运算符有优先级,先乘除后加减,有小括号先算小括号里面的
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001
这就是因为0.2和0.1被转换为二进制进行相加再转换为十进制表示出来,浮点数值的最高精度是17位小数。不要直接判断两个浮点数是否相等。(总之要求精度的计算在后端计算)
3.2 递增和递减运算符
前置递增(递减)运算符:++或–放在变量前面
++m 相当于m = m + 1
--m 相当于m = m - 1
后置递增(递减)运算符:++或–放在变量后面
m++ 相当于m = m + 1
m-- 相当于m = m - 1
两者区别
前置运算符先运算后返回值,后置运算符先返回值再运算
var a = 10;
console.log(a++);//10
console.log(a);//11
var b = 10;
console.log(++b);//11
console.log(b);//11
3.3 比较(关系)运算符
比较运算符是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true或false)作为比较运算的结果
运算符名称 说明
> 大于
< 小于
>= 大于等于号
<= 小于等于号
== != 判等号(会把字符串型转为数字型再进行比较)
=== !== 全等 要求值和数据类型都一致(不会自动转型)
3.4 逻辑运算符
当是布尔值参与逻辑运算时
逻辑与:两边都是true才返回true
逻辑或:两边都是false才返回false
逻辑非:取反
当是值或表达式参与逻辑运算时
3.4 赋值运算符
= 直接赋值
+=、-= 加、减一个数后再赋值
*=、/=、%= 乘、除、取模后再赋值
3.5 三元运算符
条件表达式?表达式1:表达式2
执行思路:如果条件表达式结果为真,则返回表达式1的值,如果条件表达式结果为假,则返回表达式2的值
var m = 10;
var result = m > 5 ? '是的':'不是的';
3.6 运算符优先级
四、流程控制(略 同C)
if分支语句
if(表达式){
执行语句
}
如果if里面的条件表达式结果为真,则 执行大括号里面的执行语句,否则执行if语句后面的代码
switch分支语句
switch语句也是多分支语句,他用于基于不同的条件来执行不同的代码,当要针对变量设置一系列的特定值的选项时,就可以使用switch,需要特别注意的是,①要判断的值与case里的值进行匹配的时候是全等,数值和数据类型一致才可以②break一定不要忘记加,如果当前的case里面没有break,则不会退出switch,而是继续执行下一个case
for循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行取决于循环的终止条件。由循环体即循环的终止条件组成的语句被称之为循环语句。
for(初始化变量;条件表达式;操作表达式){
//循环体
}
初始化变量,就是用var声明的一个普通变量,通常作为计数器使用
条件表达式,就是用来决定每一次循环是否继续执行,就是终止的条件
操作表达式,是每次循环最后执行的代码,经常用于对计数器变量进行更新(递增或者递减)
while循环
While语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
while(条件表达式){
//循环体代码
}
do while循环
Do while语句其实是while语句的一个变体,该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环
do {
//循环体
}while(条件表达式)
执行思路跟while不同的地方在于,Do while先执行一次循环体,再判断条件
continue
Continue关键字用于立即跳出本次循环,继续下一次循环
break
break关键字用于立即跳出整个循环
五、数组
数组是指一组数据的集合,数组可以把一组相关的数据一起存放,并提供方便的访问方式。其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
5.1 数组的创建方式
利用new创建数组
var arr = new Array();
利用数组字面量创建数组
var arr = [];
var arr1 = [1,2,'love',true]; //我们数组里的数据一定用逗号分隔
5.2 访问数组元素
索引也叫做下标,用来访问数组元素的序号(数组下标从0开始)
数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过数组名[索引]的形式来获取数组中的元素,这里的访问就是获取得到的意思
如果只定义了三个元素,访问第四个元素时会显示undefined
使用数组名.length可以访问数组元素的数量(数组长度)
var arr = [1,2,3];
console.log(arr.length);//这个值是3
5.3 新增数组元素
var arr = [1,2,3];
arr[3] = 4;//新增了4这个元素
注意:不要直接给数组名赋值,否则会覆盖掉之前的数组元素
六、函数
在JS里面可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数,函数就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用
6.1 函数的使用
<script>
函数使用分为两步:声明函数 和 调用函数
1、声明函数
方法一:function 函数名(){
//函数体
}
方法二:var 变量名 = function(){};
2、调用函数
方法一:函数名();
方法二:变量名();
</script>
6.2 函数的参数
我们可以利用函数的参数实现函数重复不同的代码
形参–在声明函数的小括号里面是形参
实参–在调用函数的小括号里面是实参
实参传递给形参
形参是用来接受实参的在声明函数时,可以在函数名称后面的小括号中加一些参数,这些参数被称为形参。而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去
函数表达式也可以进行传递参数
<script>
var fun = function(aru){
console.log(aru);
}
fun('信息');
</script>
6.3 函数的返回值
我们函数只是实现某种功能,最终的结果需要返回给函数的调用者。只要函数遇到return,就把后面的结果返回给函数的调用者,即函数名() = return后面的结果
function getResult(){
return 666;
}
getResult();//getResult() = 666
而return后面如果有代码也不会被执行,函数遇到return后就终止了
<script>
function getResult(num1,num2){
return num1,num2;//最后只会返回num2
}
console.log(getResult(1,2));//a = 2
function fun(num1,num2){
return [num1 + num2,num1 - num2,num1 * num2,num1 / num2];//返回的是一个数组
}
console.log(fun(1,2));
</script>
如果函数没有return则返回undefined
6.4 arguments的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取,在js中,arguments实际上是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。(见代码)
arguments展示形式是一个伪数组,因此可以进行遍历,具有以下特点:
- 具有length属性
- 按照索引方式存储数据
- 不具有数组的push、pop方法
七、预解析
Javascript代码是由浏览器中的javascript解析器来执行的。javascript解析器在运行javascript代码的时候分为两步,预解析和代码执行
预解析
JS引擎会把JS里面所有var还有function提升到当前作用域的最前面
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
变量预解析(变量提升的实质)
变量预解析就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
console.log(num1);//返回undefined
var num1 = 10;
//相当于执行了以下代码
var num;
console.log(num1);
num = 10;
函数预解析
就是把所有的函数声明提升到当前作用域的最前面,不调用函数
fn();
function fn() {
console.log(11);//可以正常调用函数,返回11
}
//相当于执行了以下代码
function fn() {
console.log(11);
}
fn();
但下面这段代码不是用function关键字声明的,就不会有函数提升的效果
fun();//报错 Uncaught TypeError: fun is not a function
var fun = function() {
console.log(22);
}
代码执行
按照代码书写的顺序从上往下执行