0
点赞
收藏
分享

微信扫一扫

Lesson4:JavaScript

花明 2022-04-14 阅读 36

目录

一、初始JavaScript

1.1 概念

1.2 JS能做的事情

1.3 JS之父

1.4 JS和HTML、CSS之间的关系

1.5 JS运行过程

1.6  浏览器的组成

1.7JS的组成

二、基础知识

2.1 JS的书写形式(3种)

2.2 注释

2.3 输入输出

2.3.1 输入:prompt

2.3.2 输出:alert

2.3.3 输出:console.log

三、语法概况

3.1 变量的使用

3.2 理解动态类型

3.3 基本数据类型

3.3.1 JS中内置的几种类型

3.3.2 特殊的数字值

 注意:

3.3.3 String字符串类型、求长度

3.3.4 转义字符

3.3.5 字符串拼接

3.3.6 boolean类型

类型的强弱和类型的动态静态

3.3.7 undefined未定义数据类型

3.3.8 null空值异常

​null和undefined都表示取值非法的情况,但是侧重点不同

四、运算符

4.1 算术运算符

4.2 赋值运算符&复合赋值运算符

4.3 自增自减运算符

4.4 位运算

4.5 移位运算

4.6 比较运算符

== 和===

4.7 逻辑运算符

五、数组

5.1 创建数组

5.2 获取数组元素

5.3 新增数组元素

5.3.1 通过修改length新增

5.3.2 通过下标新增

5.3.3 使用push追加元素

5.4 使用splice方法删除数组中的元素

六、函数

6.1 语法格式

6.2 参数个数(实参和形参的个数可以不匹配)

6.3 函数表达式

七、对象

7.1 和Java中对象的区别

7.2 使用字面量创建对象(常用)

7.3 使用构造函数创建对象

 八、JAVA和JS的区别总结


一、初始JavaScript

1.1 概念

JS是一个解释型的语言。和JAVA类似,都需要运行在一个虚拟机上
Java运行的虚拟机称为JVM,当前用的JVM是0racle的官方版本hotspot.
JS运行的虚拟机称为JS引擎,当前最主流的版本Google开发的V8Worker.
V8 worker性能好,也方便和其他语言如c+ +进行联动,Chrome浏 器、NodeJS都是基于V8 Worker 的程序。

1.2 JS能做的事情

网页开发(更复杂的特效和用户交互)、网页游戏开发、服务器开发(node.js)、桌面程序开发(Electron, VSCode就是这么来的)、手机app开发

1.3 JS之父

布兰登·艾奇

1.4 JS和HTML、CSS之间的关系

HTML:网页的结构(

CSS:网页的表现(

JS:网页的行为(灵魂

1.5 JS运行过程

编写的代码是保存在文件中的,即存储在硬盘(外存上).
双击.html文件浏览器应用程序就会读取文件,把文件内容加载到内存中(数据流向:硬盘=>内存)
浏览器会解析用户编写的代码把代码翻译成二进制的,能让计算机识别的指令(解释器的工作)
得到的二进制指令会被CPU加载并执行(数据流向:内存=> CPU)

1.6  浏览器的组成

浏览器分为渲染引擎+JS引擎.
渲染引擎:解析htm1+CSS. 俗称“内核”
JS引擎:也就是JS解释器,典型的就是Chrome中内置的V8.
JS引擎逐行读取JS代码内容,然后解析称为二进制指令,再执行

1.7JS的组成

ECMAScript(ES):语法核心

DOM:页面文档对象模型,对页面中的元素进行操作。页面上的每个HTML元素(标签),都在JS中对应到一个对象,通过JS控制这些对象,就能达到控制页面表现形式的效果

BOM:浏览器对象模型,对浏览器窗口进行操作。浏览器也提供了一些对象,JS通过控制这些对象就可以控制浏览器的一些行为。 例如:刷新页面、控制浏览器窗口大小,前进、后退、右键菜单等等

DOM和BOM都是和语言相关的库,在某些运行环境下(浏览器)会有DOM和BOM。有些运行环境下(NodeJS) 就没有DOM和BOM,需提供另外一组API。进行系统级操作。

二、基础知识

2.1 JS的书写形式(3种)

①内嵌式:在script标签里面写代码
②行内式:在html标签的一些属性里面写JS代码
③外部式:把JS写到单独的文件中,使用script标签引入。 (实际开发中最常用)

 

 

在这种情况下,script标签中间不能写代码,必须空着,写了也不会执行。 

2.2 注释

单行注释 // ,ctrl+/

多行注释 /**/ ,多行注释不能嵌套

2.3 输入输出

2.3.1 输入:prompt

 

2.3.2 输出:alert

弹出一个警示对话框,输出结果。

2.3.3 输出:console.log

在控制台打印一个日志,供程序员查看。

需要打开浏览器的开发者工具(F12) => Console标签页才能看到结果. 

console是一个js中的"对象”,.表示取对象中的某个属性或者方法.可以直观理解成"的"
console.log就可以理解成:使用"控制台"对象"的log方法.

三、语法概况

3.1 变量的使用

 var: 表示这是一个变量
name:变量名(要求和java一样,数字字母下划线)
创建变量的时候并不需要指定变量的类型。虽然没有显示的写出name变量的类型,但是并不意味name没有类型。name的类型就是和赋值操作相关的,=后面赋的值是啥类型,name就是啥类型

var定义变量的时候,一个变量名可以被重复定义,不会报错。
使用1et进行变量定义,变量的特性更接近于java这样的规则。因此,后面尽量使用let定义变量。

3.2 理解动态类型

JS的变量类型是动态的。即变量的类型可以在程序运行过程中发生变化

①JS的变量类型是程序运行过程中才确定的。运行到=才会确定类型。

②随着程序的运行,变量的类型可能会发生改变。

 

动态类型自带泛型效果,也不需要重载这样的机制。

静态类型语言:c、c++、Java、Go等都是静态类型语言。一个变量在创建的时候类型就确定了,不能再运行时改变。如果尝试改变,就会直接编译报错。

对于前端和后端都是静态语言更好,因为更严谨。

3.3 基本数据类型

3.3.1 JS中内置的几种类型

number:数字。不区分整数和小数.
boolean: true真, false假.
string:字符串类型.
undefined:只有唯一的值undefined.表示未定义的值.
null:只有唯一的值null. 表示空值.

3.3.2 特殊的数字值

Infinity:无穷大,大于任何数字.表示数字已经超过了JS能表示的范围. 
-Infinity:负无穷大,于任何数字.表示数字已经超过了JS能表示的范围.
NaN:表示当前的结果不是一个数字.

 注意:

①负穷大和无穷小不是一回事.无穷小指无限趋近与0,值为1/Infinity
'hello' + 10得到的不是NaN,而是"hello10',会把数字隐式转成字符串,再进行字符串拼接.
③可以使用isNaN函数判定是不是一个非数字

3.3.3 String字符串类型、求长度

字符串字面值需要使用引号引起来,单引号双引号均可。
如果字符串中本来已经包含引号咋办?
 

求长度使用String的length属性即可,单位为字符的数量。

3.3.4 转义字符

\n   \\  \'  \"  \t

3.3.5 字符串拼接

使用+进行拼接
注意,数字和字符串也可以进行拼接
注意,要认准相加的变量到底是字符串还是数字
 

3.3.6 boolean类型

java中的布尔类型是单独的类型,不能和其他类型进行混合运算。

JS中的布尔类型是可以和其他类型混合运算,运算时,会把true隐式转为1,把false隐式转为0.

这样的操作时不科学的,实际开发中不应该这样写。

类型的强弱和类型的动态静态

JS将true和false隐式转为1和0,认为其是一个弱类型的开发语言。

 一个语言越支持隐式类型转换,类型就越弱.一个语言越不支持隐式类型转换,类型就越强.
类型的强弱,和类型的动态静态,是完全不同的事情(正交)

3.3.7 undefined未定义数据类型

如果一个变量没有被初始化过,结果就是undefined,是undefined类型

undefined和字符串进行相加,结果进行字符串拼接
undefined和数字进行相加,结果为NaN
 

3.3.8 null空值异常

null表示当前的变量是一个"空值".


null和undefined都表示取值非法的情况,但是侧重点不同

null表示当前的值为空. (相当于有一个空的盒子)
undefined表示当前的变量未定义. (相当于连盒子都没有)

四、运算符

4.1 算术运算符

+ - * / %

4.2 赋值运算符&复合赋值运算符

=   +=  -=   *=  /=  %=

4.3 自增自减运算符

++  --

4.4 位运算

& 按位与 |按位或  ~按位取反 ^按位异或

JS的位运算.不区分整数和小数的.但是一般来说,整数才能位运算.JS中的数据在进行位运算之前会先隐式转成一个4个字节的整数,然后再进行运算

4.5 移位运算

<< 左移 

>>有符号右移(算数右移)

  >>>无符号右移(逻辑右移)

4.6 比较运算符

< > <= >= 

== 和===

==:只比较值,不比较类型。(会触发隐式类型转换,比较的是转换后的结果)
===:同时比较值和类型(不会触发隐式类型转换,如果类型不同,直接返回false),也是JS独有的

!= 和 !==:比较方法和==与===一样。

条件不一定是Boolean类型,也可以是其他类型:
number类型:非0为真,0为假
string类型:''为假,非空字符串为真.
undefined和null都是假

4.7 逻辑运算符

&& 与:一假则假

|| 或:一真则真

!:非

Java:&&和返回的是true或者false
JS:

a&&b:a为真(非0),表达式的值就是b的值;a为假,表达式的值就是a的值
a||b:a为真(非0), 表达式的值就是a的值;a为假,表达式的值就是b的值
x=x||0:万一x是nu11或者undefined,就设为0,如果是其他值,就不变。

五、数组

5.1 创建数组

①使用new关键字,Array要大写

②使用字面意思创建(常用)

 

注意:

注意:js的数组不要求元素是相同类型。这一点和C、java等静态语言差别很大,但是python、php
等动态语言和js一样
Java中的数组:表示一组相同类型的变量
JS中的数组:批量表示一组变量,对类型相同不做要求。

5.2 获取数组元素

使用下标的方式访问数组元素(从0开始),如果下标超出范围读取元素,则结果为undefined
注意:不要给数组名直接赋值此时数组中的所有元素都没了.
相当于本来array3 是一个数组,重新赋值后变成字符串了.

java中数组取下标:下标必须在0-length-1这个范围里,超出范围,就会抛出一个数组下标越界异常
js:下标超出范围,就会得到undefined

5.3 新增数组元素

5.3.1 通过修改length新增

相当于在末尾新增元素。新增元素的默认值是undefined。

 

5.3.2 通过下标新增

如果下标超出范围,就会给指定位置插入新元素。

 

5.3.3 使用push追加元素

JS中的数组,并不是一个单纯的数组,而是一个类似于键值对结构的数据。
JS的数组,本质上是一个对象,JS作为动态语言,“一个对象在运行过程中可以动态的新增属性或者删除属性”

 

5.4 使用splice方法删除数组中的元素

 

六、函数

6.1 语法格式

 

 

 同一个函数,就能支持不同类型的参数。所以在js这种动态类型语言中,不需要“泛型”这样的语法。(和泛型相比,少了一些编译期的类型检查)

6.2 参数个数(实参和形参的个数可以不匹配)

实参和形参的个数可以不匹配,但在实际开发中一般要求匹配。

 实参个数 > 形参个数   多的参数不参与函数运算

 实参个数 <  形参个数   多出来的形参值为undefined

6.3 函数表达式

函数是可以像一个变量一样赋值的。函数可以作为另一个函数的参数或者返回值。

 

七、对象

7.1 和Java中对象的区别

java:认为先有类,才有对象。类是对象的模板,得先约定好类里面有啥属性,才能实例化。类同时也表示这是一种自定义的类型。String和ArrayList是两 个不同的类,虽然他们都继承自0bject
js:对象是不依赖类存在的,js的对象是单独存在的。js中的类也是ES6开始有的之前都没有。

7.2 使用字面量创建对象(常用)

使用{}创建对象
属性和方法使用键值对的形式来组织.
键值对之间使用,分割.最后一个属性后面的,可有可无。
键和值之间使用:分割,
方法的值是一个匿名函数.

没有public、private之类的修饰,所有的属性都可以认为是public。

7.3 使用构造函数创建对象

有时候,需要批量创建出一组‘同类型’的对象,对象的属性和方法等都相同。可以使用构造函数来完成这个工作,此处的构造函数,就扮演了java中“类”这样的角色。在JS中,使用构造函数作为对象的模板。

 八、JAVA和JS的区别总结

JAVAJS
boolean布尔类型是单独的类型,不能和其他类型进行混合运算。

可以和其他类型混合运算,运算时,会把true隐式转为1,把false隐式转为0.

==比较的是引用比较的是值
===JS特有,比较的是值和类型
&&和II返回的值是true或者false

a&&b:a为真(非0),表达式的值就是b的值;a为假,表达式的值就是a的值
a||b:a为真(非0), 表达式的值就是a的值;a为假,表达式的值就是b的值
x=x||0:万一x是nu11或者undefined,就设为0,如果是其他值,就不变。

数组表示一组相同类型的变量批量表示一组变量,对类型相同不做要求。
数组取下标下标必须在0-length-1这个范围里,超出范围,就会抛出一个数组下标越界异常下标超出范围,就会得到undefined
对象先有类,才有对象对象是不依赖类存在的,js的对象是单独存在的
强弱强类型弱类型
静态动态静态动态
举报

相关推荐

0 条评论