JavaScript——JS基础

本文主讲:什么是JavaScript及其历史、JavaScript嵌入到HTML代码的三种方式【重点】、JavaScript标识符命名规则与规范、JavaScript变量、JS中的函数、JS中的全局变量与局部变量

什么是JavaScript及其历史

什么是JavaScript及其历史

image-20211006213357428

什么是脚本语言

答:脚本语言就是代码可以直接放在文本文件内即可以执行,代码文件不需要进行编译

JavaScript嵌入到HTML代码的三种方式

第一种方式:嵌入到HTML代码属性中的事件句柄后面

image-20211006213952578

注意:
1:第一种方式嵌入的JS代码,浏览器打开JS代码并不会执行,而是把JS代码注册到相应组件的事件句柄上面,当这个事件在组件上被执行的时候,组件内HTML代码属性中的事件句柄后面的JS代码才会执行

2:JS代码中 window.alert()方法是打开一个窗口,window就代表浏览器窗口,当然 window 也可以省略

3:句柄后面的JS代码要加上“ ”

注意1图示:

image-20211006214012678

第二种方式:JavaScript脚本块嵌入到HTML代码中

image-20211006214023030

注意:
1:JavaScript脚本块在一个HTML代码文档中可以有多个,并且可以出现在任何位置
2:JavaScript脚本块内的JS代码不需要通过事件执行,程序启动脚本块里面的JS代码就会从上向下执行
3:JS代码中的 alert 方法【窗口】会阻塞程序的执行
4:脚本块里面的JS代码不需要加双引号

第三种方式:JavaScript脚本块引入外部独立的JS文件

image-20211006214037601

注意:
1:一个JS文件可以被多个脚本块引入多次,但是实际开发中不这么做
2:如果脚本块引入了外部独立JS文件,那么脚本块标签里面的JS代码不会被执行
3:外部独立的JS文件会遵循从上到下的顺序执行JS代码

JavaScript标识符命名规则与规范

JavaScript 标识符命名规则

1:标识符是由数字、字母、下划线、¥组成
2:数字不能用作标识符开头
3:严格区分大小写
4:并用关键字做标识符

JavaScript 标识符的命名规范

常量:每个字母都大写,并且单词与单词之间用_作分隔

变量和函数名:首字母小写,后面每个单词大写

类名与接口名:首字母大写,后面每个单词的首字母大写

JavaScript 两种注释方法

单行注释://
多行注释:/* */

image-20211006214058520

JavaScript变量

什么是强类型与弱类型编程语言

强类型语言:变量在声明是什么数据类型之后,在整个程序执行结束【内存释放】,这个变量的数据类型都不能发生改变。

例如:java、c 、c++

弱类型语言:变量在声明之后【没有具体声明是什么数据类型】,在程序执行直到结束,这个变量的数据类型都是可以变的,你可以给这个变量赋予任何类型的值

例如:JavaScript、python

类型语言中数据类型的大小【字节】顺口溜

byte short int long float double boolean char

1 2 4 8 4 8 1 2

JavaScript 中变量

变量定义:var 变量名
变量赋值:变量名 = 变量值 【变量必须先声明才能使用,否则程序报错】

注意:

1:JavaScript是弱类型语言,没有编译阶段,在声明一个变量之后,可以为这个变量赋任何类型的值

2:在声明一个变量之后,不给这个变量赋值,这个变量默认值为 undefined,在JS中,undefined是一个具体存在的值!

3:在JS中如果一个变量没有声明就拿来被使用,这种语法是错误的,程序报错

4:在JS中声明一个变量用 var 关键字,但是如果直接这么写 变量名 = 变量值 这也是对这个变量进行声明,且这个变量在任何位置都是全局变量

5:在JS中,var a,b,c = 200; 打印结果 a = undefined b = undefined c = 200

6:在JS中,因为变量都是用 var 进行声明的因此可以出现 10 + “略略”以及 200 + false 的现象,这种现象在python是不行的

7:两个 undefined 相加的值为 NaN 表示不是一个数字

image-20211006214134668

JS中的函数

JS 中定义函数的两种方式及其注意事项

第一种方式:function 函数名(形参……){ }

第二种方式:函数名 = function(形参….){ }

注意事项:

1:JS 中定义函数时形参的数量以及类型都没有要求,和python很像

2:如果定义了两个同名的函数,后定义的那个函数会在内存中覆盖掉先定义的函数,先定义的那个函数就消失了!这也解释了注意的第三条

3:JS 中的函数不能重载,因此多个函数之间不能出现函数名重名的现象

image-20211006214158295

JS 中调用函数时的注意事项

注意1:如果函数定义时有返回值,在调用这个函数时需要有变量进行接收,那这个变量必须要用 var 进行声明,不声明的变量是不能用的

例如:var result = 函数名()

注意2:在脚本块内定义好的函数,可以在外部html组件的句柄后面进行调用的!

例如:

1
<input type=“button” value=“点我” onclick = “函数名()”/>

具体图示看上图!!!

JS中的全局变量与局部变量

JS 中什么是全局变量与局部变量以及两者的区别

全局变量:在 JS 函数体外部声明的变量,变量的生命周期是整个程序,前端开发来言就是浏览器打开到浏览器关闭这个全局变量都可以被访问的,浏览器打开变量声明,浏览器关闭变量销毁,但也正因为如此,全局变量与局部变量比起来很占浏览器内存,因此全局变量应该慎重使用

局部变量:在 JS 函数体内部声明的变量,包括函数的形参也是局部变量,局部变量的生命周期是从函数执行开辟变量空间【出生】到函数执行结束释放内存空间【局部变量死亡】

区别:

1:全局变量的作用域是整个程序,局部变量作用域是函数
2:全局变量生命周期长,局部变量生命周期短

注意:

1:在函数外部以及内部声明两个同名的变量,在函数内部访问这个变量,要按就近原则访问!

2:当一个变量没有用 var 关键字进行声明时,那这个变量不管在哪里定义它都是全局变量! 例如 在函数体内部声明的变量 name = “xiaoli”,name变量虽然在函数体内部声明,但它却是全局变量【JS独有】

3:如果在浏览器执行html文件【js代码】出现语法错误,程序不会继续向下执行

image-20211006214237999

持续更新中……