JavaScript#xff08;简称#xff1a;JS#xff09;

是一门跨平台、面向对象的脚本语言#xff0c;是…要想让网页具备一定的交互效果具有一定的动作行为还得通过JavaScript来实现,

JavaScript简称JS

是一门跨平台、面向对象的脚本语言是用来控制网页行为的实现人机交互效果。

JavaScript

Java

规定了JS基础语法核心知识包括变量、数据类型、流程控制、函数、对象等。

BOM浏览器对象模型用于操作浏览器本身如页面弹窗、地址栏操作、关闭窗口等。

DOM文档对象模型用于操作HTML文档如改变标签内的内容、改变标签内字体样式等。

备注ECMA国际前身为欧洲计算机制造商协会制定了标准化的脚本程序设计语言

ECMAScript这种语言得到广泛应用。

而JavaScript是遵守ECMAScript的标准的。

引入方式

js代码也是书写在html中的那么html中如何引入js代码呢主要通过下面的2种引入方式

JavaScript代码必须位于script/script标签之间

body!--

注意2通过script/script标签引入外部JS文件时标签不能自闭合

第一步在VS

initial-scale1.0titleJS-引入方式/title

/head

第四步接下来演示外部脚本注释掉内部脚本然后在css然后创建一个名为demo.js的文件

第五步在demo.js中编写如下js内容

第六步注释掉之前的内部脚本代码添加script标签来引入外部demo.js文件,具体代码如下

!DOCTYPE

initial-scale1.0titleJS-引入方式/title

/head

掌握了js的引入方式那么接下来我们需要学习js的书写了首先需要掌握的是js的书写语法语法规则如下

区分大小写与

api描述window.alert(...)警告框document.write(...)在HTML

第一步在VS

第二步按照基本语法规则编写3种输出语句的代码并且添加注释具体代码如下

!DOCTYPE

initial-scale1.0titleJS-基本语法-输出语句/title

/head

写入浏览器的body区域document.write(Hello

控制台console.log(Hello

基本的书写语法我们清楚了之后接下来我们再来讲解JS中的变量。

在js中变量的声明和java中还是不同的。

let

组成字符可以是任何字母、数字、下划线_或美元符号$且数字不能开头

script//变量let

在JS中如果声明一个场景需要使用const关键字。

一旦声明常量的值就不能改变

如下所示

name变量重复声明了但是呢如果使用var关键字是没有问题的可以重复声明。

var声明的变量呢还有一些其他不严谨的地方这里就不再一一列举了所以这个声明变量的关键字并不严谨

数据类型

虽然JS是弱数据类型的语言但是JS中也存在数据类型JS中的数据类型分为

原始数据类型

引用数据类型。

那这部分我们先来学习原始数据类型主要包含以下几种类型

Number)string字符串单双引(...)、双引号(...)、反引号(...)皆可正常使用推荐单引号boolean布尔。

truefalsenull对象为空。

JavaScript

null、Null、NULL是完全不同的undefined当声明的变量未初始化时该变量的默认值是

undefined

关键字可以返回变量的数据类型接下来我们需要通过书写代码来演示js中的数据类型

第一步在VS

initial-scale1.0titleJS-数据类型/title

/head

对于字符串类型的数据除了可以使用双引号...、单引号...以外还可以使用反引号

...

//使用模板字符串方式拼接字符串console.log(大家好,

请多多关照);

那接下来我们再来介绍JS中的运算符。

JS中的运算规则绝大多数还是和JAVA中是一致的具体运算符如下

运算规则运算符算术运算符

上述所罗列的这些运算符中绝大部分的运算符和Java中的使用方式、含义都是一样的。

那这里我们主要介绍一下

会自动进行类型转换

全等在比较时判断左右两边的类型和值是否都相等都相等才为true不会进行类型转换

接下来我们通过代码来演示JS中的运算法主要记忆JS中和JAVA中不一致的地方

第一步在VS

initial-scale1.0titleJS-运算符/title

/head

在js中还有非常重要的一点是0nullundefinedNaN

类型转换

if(1){//truealert(除0和NaN其他数字都转为

true);

if(undefined){//falsealert(undefined

转化为false);

需要注意的是在JS中0nullundefinedNaN理解成false反之都为

流程控制语句

而JS中的流程控制语句与JAVA中的流程控制语句的作用执行机制都是一样的。

。

同样在JavaScript中可以使用函数来完成相同的事情。

JavaScript中的函数被设计为执行特定任务的代码块方便程序的封装复用。

在JS中需要通过关键字function来定义。

接下来我们学习一下JavaScript中定义函数的2种语法

格式一

因为JavaScript是弱数据类型的语言所以有如下几点需要注意

形参不需要声明类型并且JS中不管什么类型都是let去声明加上也没有意义。

function

因为在JavaScript中函数的调用只需要名称正确即可参数列表不管的。

如上述案例10传递给了变量a20传递给了变量b,而30和40没有变量接受但是不影响函数的正常调用。

注意由于JS是弱类型语言形参、返回值都不需要指定类型。

在调用函数时实参个数与形参个数可以不一致但是建议一致。

格式二

那我们也可以不为函数指定名字那这一类的函数我们称之为匿名函数。

那接下来方式二就来介绍一下匿名函数的定义和调用。

匿名函数是指一种没有名称的函数由于它们没有名称因此无法直接通过函数名来调用而是通过变量或表达式来调用。

示例一函数表达式

JavaScript中的对象有很多主要可以分为如下3大类我们可以打开W3school在线学习文档来到首页在左侧栏找到浏览器脚本下的JavaScript如下图所示

然后进入到如下页面此页面列举出了JavaScript中的所有对象

第三类DOM对象JavaScript中将html的每一个标签都封装成一个对象

基本对象

数组定义好了如何获取数组中的值,和java中一样需要通过索引来获取数组中的值索引从0

arr[索引]

[1,2,3,4];//获取数组中的值索引从0开始计数console.log(arr[0]);console.log(arr[1]);

/script

与java中不一样的是JavaScript中数组相当于java中的集合数组的长度是可以变化的。

而且JavaScript是弱数据类型的语言所以数组中可以存储任意数据类型的值

//特点:

上述代码定义的arr变量中数组的长度是4但是我们直接再索引10的位置直接添加了数据10并且输出索引为10的位置的元素浏览器控制台数据结果如下

我们也可以给数组添加其他类型的值添加代码如下注释掉之前控制台输出的代码

//特点:

官方文档中提供了Array的很多属性和方法这里只举例常用的属性和方法如下图所示

方法描述forEach()遍历数组中的每个有值的元素并调用一次传入的函数map()遍历每个数组元素调用函数进行处理并将结果封装到一个新数组中push()将一个或多个元素添加到数组的末尾并返回新的长度。

pop()从数组移除最后一个元素并返回该元素。

unshift()在数组开头添加一个或多个元素并返回数组的新长度。

shift()从数组移除第一个元素并返回该元素。

splice()从数组中删除元素。

length属性

length属性可以用来获取数组的长度可以借助这个属性来遍历数组中的元素添加如下代码

let

这个方法的参数需要传递一个函数而且这个函数接受一个参数就是遍历时数组的值。

修改之前的遍历代码如下

arr.forEach(function(e){console.log(e);

在ES6中引入箭头函数的写法语法类似java中lambda表达式修改上述代码如下

arr.forEach((e)

浏览器输出结果如下注意的是没有元素的内容是不会输出的因为forEach只会遍历有值的元素

map()

该方法是用于遍历数组中的元素调用传入的函数对元素进行处理并将结果封装到一个新数组中。

如下所示

push()方法是用于向数组的末尾添加元素的其中函数的参数就是需要添加的元素。

编写如下代码向数组的末尾添加3个元素

//push:

pop()方法是用来移除数组中的最后一个元素并返回该元素。

编写如下代码

//pop:

该方法是用于在数组的开头添加元素(一个或多个)并返回新的数组的长度。

示例如下

//unshift: