三万字速通JavaScript

目录 一、前言 二、什么是JavaScript,有什么用? 三、HTML嵌入JavaScript…

目录

一、前言

二、什么是JavaScript,有什么用?

三、HTML嵌入JavaScript的方式:

第一种方式:

第二种方式:

第三种方式:

四、JavaScript的变量

五、函数初步

函数参数中的几个场景

情景1:传入参数不足

情景2:传入参数过多

情景3:无参数传入

情景4:多个函数同名

六、变量的种类

七、js中的数据类型

八、typeof运算符

九、原始类型:

1.Undefined

2. Number

什么时候结果是一个NaN呢?

十、常见的函数:

isNaN:

parseInt:

parseFloat:

Math.ceil():

4.Boolean

5、 Null

6、String

十一、 常用函数

考点:经常问 substr和substring的区别?

7、Object

十二、创建类的方式

方式①

方式②

十三、 js中创建类和对象?

十四、null、undefined、NaN的区别

十五、等同和全等运算符

十六、js常用事件

十七、 回调函数的概念

回调函数的特点:

十八、注册事件的两种方式:

常用的写法:

十九、代码的执行顺序

load事件解决:

二十、 捕捉键盘回车事件

二十一、 void运算符

二十二、控制语句

二十三、js中创建数组

二十四、 DOM编程获取value

BOM和DOM的区别和联系?

BOM包含DOM

点击按钮得到文本框中的值

按回车把文本框1内容复制到文本框2

失去焦点后执行这段

二十五、js中的innerHTML和innerText属性

innerText和innerHTML属性有什么区别?

二十六、正则表达式

1、什么是正则表达式,有什么用?

常见的的正则表达式符号

怎么创建正则表达式对象,怎么调用正则表达式对象的方法?

正则表达式的test()方法?

二十七、 去除前后空白trim

二十八、复选框的全选和取消全选

二十九、获取系统当前时间

获取毫秒数

三十、 周期函数setInterval

三十一、 内置支持类Array

join方法链接

反转数组:reverse()

三十二、BOM编程

window中open和close方法

三十三、消息框弹出(alert、confirm)

三十四、history和location对象

三十五、什么是JSON,有什么用?

JSON的语法格式:

创建JSON数组和遍历

复杂一些的JSON对象

三十六、 eval函数

面试题:


一、前言

html和css的学习大致完成,我们进入重要的JavaScript学习阶段

二、什么是JavaScript,有什么用?

Javascript是运行在浏览器上的脚本语言。简称JS。

他的出现让原来静态的页面动起来了,更加的生动。

三、HTML嵌入JavaScript的方式:

第一种方式:

1、要实现的功能:

用户点击以下按钮,弹出消息框。

2、弹窗

JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】,而事件句柄是以HTML标签的属性存在的。

3、οnclick=js代码",执行原理是什么?

页面打开的时候,js代码并不会执行,只是把这段ss代码注册到按钮的click事件上了。等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。

4、 怎么使用JS代码弹出消息框?

在JS中有一个内置的对象叫做window, 全部小写,可以直接拿来使用,window代表的是浏览器对象。 window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就可以弹窗了。

5、window.可以省略

6、设置多个alert可以一直弹窗

JS中的字符串可以使用双引号,也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。

整体代码:

弹窗效果:

第二种方式:

脚本如:

  • javascript的脚本块在一个页面当中可以出现多次。
  • javascript的脚本块出现位置也没有要求。

如:

alert有阻塞当前页面加载的作用。(阻挡,直到用户点击确定按钮。

在脚本块当中的程序,在页面打开的时候执行并且遵守自上而下的顺序依次逐行执行。 (这个代码的执行不需要事件,即运行就开始)

第三种方式:

引入外部独立的js文件如,外部文件路径

在需要的位置引入js脚本文件
引入外部独立的js文件的时候,js文件中的代码会遵循自上而下的顺序依次逐行执行。

①在引入的外部脚本中又加alert,则这个不会生效

②需要另外写一个才会生效

如:

四、JavaScript的变量

如:var i;

javascript是一门弱类型的语言,没有编译阶段一个变量可以随意赋值。

这里的var可以表示任何类型。

一个变量没有赋初始值,默认是undefined ,undefined在js是一个具体存在的值。

测试代码:

一个变量如果没声明直接用则会报错

下列的结果是:

结果:

js中的变量命名规范和规则差不多,但是变量的赋值就相差很远,Java是一门强类型的语言,而JavaScript是一门弱类型的语言。

怎么理解强类型和弱类型的语言呢?
java语言存在编译阶段,假设有代码:int i;
那么在Java中有一个特点是;java程序编译阶段就已经确定了 i变量的数据类型,该i变量的数据类型在编译阶段是int类型,那么这个变量到最终内存释放,一直都是int类型,不可能变成其他类型。强制类型转化变得也只是语法面上,对象的类型还是不变。

Java中要求申明的时候是什么类型就一直的是什么类型,不可变,这就是强类型。

JavaScript是一个弱类型是因为在声明的时候不需要指定数据类型,变量的类型是有值来定的。

五、函数初步

函数必须调用才会生效

js的函数类型没有限制和参数个数没有限制,函数名是唯一标识。

函数的定义格式:

方式①:

示例:

方式②:

将函数封装在点击事件:

js中的函数不能重载

函数参数中的几个场景

情景1:传入参数不足

情景2:传入参数过多

情景3:无参数传入

情景4:多个函数同名

函数名不能重名,否则后面的函数会覆盖前面的,因为是自上而下执行程序

六、变量的种类

①全局变量:

在画数体之外声明的变量属于全局变量,全局变量的生命周期是:
浏览器打开时声明,浏览器关闭时销毁,尽量少用,因为全局变量会一直在浏览器的内存当中,耗费内存空间。所以尽量使用局部变量

②局部变量:

在函数体当中声明的变量。包括一个函数的形参都属于局部变量
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟,函数执行结束之后,局部变量的内存空间释放。

这和java中的基本一致。

如果一个变量没有var修饰那他就是全局变量,和他所在的位置无关。

如:

若是加上var修饰则,则定义在函数体内的变量则无法访问,因为他已经销毁了。

两个相同的变量和作用范围(都是全局或都是局部变量),后出现的会覆盖先出现的变量,因为执行顺序是自上而下的。

七、js中的数据类型

虽然js在声明的时候不需要指定类型,但是每个值还是有类型的。

分为:原始类型和引用类型

原始类型:Undefined、Number、String、boolean、Null

引用类型:Object和object的子类

ES规范(ECMAScript规范):在ES6之后又在数据类型上面增加了叫Symbol的数据类型

八、typeof运算符

js中有一种运算符为typeof,这个运算符可以在程序执行过程中动态的获取变量的数据类型

typeof运算符的语法格式:

typeof 变量名

typeof运算符的运算结果是以下6个字符串之一:(注意字符串都是全部小写)

  • "undefined"
  • "number"
  • "string"
  • "boolearl"
  • "object"
  • "function"

在js中比较字符串是否相等用"=="来完成,js中没有equals。

例:,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型。

以下定义的这个sum函效是为了完成两个数字的求和。

typeof数据类型小测试:

九、原始类型:

1.Undefined

Undefined类型只有一个值,这个值就是undefined的,当一个变量没有赋初值,系统就会给这个变量赋为undefined,undefined是一个具体的值。

例:

运行结果:

2. Number

number包括整数、小数、负数、正数、不是数字、无穷大(10,3.14,-5,10,NaN,Infinity)都属于Number类型。

关于NaN表示Not a Number,不是一个数字,但是属于Number类型

什么时候结果是一个NaN呢?

运算结果本来应给是一个数字,但最后算完不是一个数字,结果就是NaN

如:

但是有字符串相加时,会进行字符串拼接,不会参与加号运算,故结果也就不会是NaN

Infinity表示无穷大(当除数为0时,结果为无穷大)

结果为3.3333333…

在js中两个数相除,会算尽

十、常见的函数:

isNaN

判断不是一个数字,如果是数字返回false,否则true。

parseInt

将字符串转化为数字,并且取整数位。

parseFloat

将字符串转化为数字

Math.ceil():

将一个小数向上取整(如:2.1->3,Math是一个数学类,ceil表示天花板)(向大的整数靠近)

4.Boolean

在js中布尔类型只有两个值,false和true.

Boolean类型终有一个函数:boolean();

语法格式为:boolean(数据)

在其他需要布尔类型是,直接写数据,js会自动调用boolean()函数。有数据会转化成true,没数据转化成false。

如:

如:

结果:

5、 Null

Null只有一个值null

6、String

String类型:
1、在JS当中字符串可以使用单引号。也可以使用双引号。

2、在JS当中,有两种方式创建字符串对象

第一种:

第二种(使用Js内置的支持类String):

需要注意的是:String是一个内置的类,可以直接用,String的父类是object。
3、无论小string还是大String,他们的属性和函数都是通用的。

①小string(属于原始类型string)

②大String(属于Object类型)

获取字符串的长度的函数

结果

十一、 常用函数

  • indexOf 获取指定字符串在当前字符串中第一次出现处的索引
  • lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
  • replace 替换
  • substr 截取子字符串
  • substring 截取子字符串
  • toLowerCase 转换小写
  • toUpperCase 转换大写
  • spIit 拆分字符串

indexOf & lastIndexOf

replace(只替换了第一个)

在写一个可以再替换一个,其实在原来替换第一个基础上在替换第一个

想全部替换要使用正则表达式

考点:经常问 substr和substring的区别?

substr(startIndex,length) 参数是开始的下标和截取总长度

substring(startIndex,endIndex)参数是开始的下标和结束的下标注意:不包含结束下标

7、Object

Object类型:
1、0bject类型是所有类型的超类,自定义的任何类型,默认继承object。

2、Obiect类包括哪些属性?
prototype属性(常用的,主要是这个),作用是给类动态的扩展属性和函数。 constructor属性

3、Object类包括哪些函数?
toString() valueOf()
toLocaleString()

4、在js当中定义的类默认继承Object,会继承Object类中所有的属性以及函数。换句话说,自己定义的类中也有prototype属性。

十二、创建类的方式

js中创建类的方式和创建函数一样。

方式①

方式②

创建对象的语法:

创建类和函数的方式是一样的,所以在调用上就有区别了

运行结果:

图一弹两次窗,图二一次

在创建类的时候new对象,也得调用一次,所以共两次

JS中的类的定义,同时又是一个构造函数的定义
在JS中类的定义和构造函数的定义是放在一起来完成的。

通过prototype可以给一个类动态的扩展函数和属性

也可以通过prototype给String类动态扩展属性和函数

十三、 js中创建类和对象?

十四、null、undefined、NaN的区别

十五、等同和全等运算符

在JS当中有两个比较特殊的运算符

(等同运算符"==":只判断值是否相等)
(全等运算符"===":既判断值是否相等,又判断数据类型是否相等)

小demo:

十六、js常用事件

JS中的事件:
blur失去焦点
focus获得焦点

click鼠标单击
dblclick鼠标双击

keydown键盘按下
keyup键盘弹起

mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起

reset表单重置
submit表单提交

change下拉列表选中项改变,或文本框内容改变
select文本被选定
load页面加载完毕(整个html页面中所有元素全部加载完成后发生)

十七、 回调函数的概念

任何一个事件都会对应一个事件句柄,事件句柄就是在事件前添加on。

onXXX这个事件句柄出现在标签属性位置上。(事件句柄以属性的形式存在)

下面代码的含义是:将sayHello函数注册到按钮上,等待click事件发生后,该函数被浏览器调用我们称这个函数为回调函数。

如:

当点击这个按钮时,会弹出hello

sayHello()被称为为回调函数

回调函数的特点:

自己把这个函数写出来,但是这个函数不是自己调用的,而是有其他程序调用这样的函数被称为回调函数。

java中也有回调函数的机制:

十八、注册事件的两种方式:

方式①:前面提到的直接将onclick写入标签中:

方式②:是使用纯js代码完成事件的注册。

函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调

一般步骤:

常用的写法:

十九、代码的执行顺序

错误示例:

这时我们可以采用load事件

load事件页面全部元素加载完毕才发生

load事件解决:

写法①:

写法② :

常用写法③:

详细分析:

这是两个回调函数的结合,外层回调函数在页面加载完成后执行,内层在点击事件发生后执行。

外层起名叫a函数,内层叫b函数

页面加载的过程中,将a函数注册给了load事件
页面加载完毕之后load事件发生了,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件当id="btn"的节点发生click事件之后,b函数被调用并执行。

运行结果:

小text:

点击将文本框变成复选框

二十、 捕捉键盘回车事件

对于keydown事件来说,都有keyCode属性来获取键值(即键盘上的每个键都有对应的一个值)回车键为13,Esc键为27

当敲下回车键可以弹出:

二十一、 void运算符

void运算符的语法:void(表达式)
运算原理:执行表达式,但不返回任何结果。

javascript:void(0)
其中javascript:作用是告诉浏览器后面是一段js代码。以下程序的javascript:是不能省略的。

既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转

点击文字显示的弹窗效果:

二十二、控制语句

1、if

2、while

3、switch

4、do…while…

5、for

6、break

7、continue

8、for in(了解)

9、with(了解)

1-7和java类似,就不多赘述了。

二十三、js中创建数组

遍历数组

for in 遍历

with的用法:

在访问类的对象时:

用with

二十四、 DOM编程获取value

JavaScript包括三大块:
ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
DOM:document Object Model(文档对象模型:对网页当中的节点进行增删改的过 程。)HTML文档被当做一棵DOM树来看待

DOM编程的代表: var domObj=document.getElementById("id");

BOM:Browser Object Model(测览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退。前进、浏览器地址栏上的地址等,都是BOM编程。

BOM和DOM的区别和联系?

DOM的顶级对象是document

BOM的顶级对象是window

BOM包含DOM

在document之前有window省略了

点击按钮得到文本框中的值

拿到value的值。

按回车把文本框1内容复制到文本框2

失去焦点后执行这段

二十五、js中的innerHTML和innerText属性

在head中:

在body中:

运行结果:

innerText和innerHTML属性有什么区别?

相同点:都是设置元素内部的内容。

不同点:
innerHTML:会把后面的“字符串”当做一段HTML代码解释并执行。
innerText:即使后面是一段HTML代码,也只是将其当做普通的字符串来看待。

二十六、正则表达式

1、什么是正则表达式,有什么用?

正则表达式:Regular Expression
正则表达式主要用在字符串格式匹配方面

2、正则表达式实际上是一门独立的学科工在Java语言中支持,c语言中也支持,javascript中也支持。大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面,用来表示神经符号等。目前使用最多的是计算机编程领域,用作字符串格式匹配。包括搜索方面等。

正则表达式,对于我们javascript编程来说,掌握哪些内容呢?
第一:常见的正则表达式符号要认识。第二:简单的正则表达式要会写。
第三:他人编写的正则表达式要能看懂。
第四:在javascript当中,怎么创建正则表达式对象!(new对象)
第五:在javascript当中,正则表达式对象有哪些方法!(调方法)
第六:要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。

常见的的正则表达式符号

①:

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

②:

* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

③:

\W 匹配任意不是字母,数字,下划线,汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

正则表达式当中的小括号()优先级较高。

「1-9]表示1到9的任意1个数字(次数是1次)

[A-Za-z0-9]表示A-Za-z0-9中的任意1个字符

[A-Za-z0-9-]表示A-Z、a-z、0-9、-,以上所有字符中的任意1个字符。

一些正则表达式:

QQ号的正则:^[1-9] [0-9] { 4,}$

邮箱的正则:

怎么创建正则表达式对象,怎么调用正则表达式对象的方法?

第一种创建方式:
var regExp=/正则表达式/flags;

第二种创建方式:使用内置支持类RegExp
var regExp =new RegExp("正则表达式","flags");
关于flags:
g:全局四配
i:忽略大小写
m:多行搜索(ES规范制定之后才支持m。)当前面是正则表达式的时候,m不能用,只有前面是普通字符串的时候,m 才可以使用。

正则表达式的test()方法?

true/false=正则表达式对象.test(用户填写的字符串)

  • true:字符串格式匹配成功
  • false:字符串格式匹配失败

二十七、 去除前后空白trim

效果:

在IE8不支持trim,所以可以使用prototype扩展这个函数。如

小test

表单验证:
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成,不能含有其它符号(正则表达式)
(4)密码和确认密码一致,邮箱址址合法。
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
(7)文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value
(8)最终表单中所有项均合法方可提交

二十八、复选框的全选和取消全选

二十九、获取系统当前时间

js中的内置支持类Date,可以用来获取时间/日期

运行结果:

我们发现这个格式不太对头,可以用转换成具有本地语言的日期格式

运行结果:

js中的换行,在script中不能直接写br。

获取毫秒数

重点:获取的毫秒数是从(1970年1月1日 00:00:00 000毫秒到到当前系统时间的总毫秒数)

运行结果:

三十、 周期函数setInterval

三十一、 内置支持类Array

创建数组

数组数组类型没有限制

遍历数组,输出在网页上

数组不会越界

如arr中长度有5,直接arr[7]=true;则会

另一种创建数组的方式

join方法链接

join方法将变成字符串,用参数链接起来

js中数组可以模拟栈的数据结构,先进后出原则

push();压栈

pop();弹栈

反转数组:reverse()

三十二、BOM编程

window中open和close方法

打开1-open.html文件

关闭当前窗口

三十三、消息框弹出(alert、confirm)

confirm有返回值,确认框中点确定返回true,点取消返回false

示例:

三十四、history和location对象

history

location

location获取地址栏

三十五、什么是JSON,有什么用?

JSON是一种行业内的数据交换格式标准,JSON在JS中以JS对象的形式存在

JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行。90%以上的系统,系统A与系统B交换数据的话,都是采用JSON。)

2、JSON是一种标准的轻量级的数据交施格式。特点是:体积小,易解析。

3、在实际的开发中有两种数据文换格式,使用最多,其一是JSON,另一个是XML。XML体积较大,解析麻频,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)

JSON的语法格式:

var jsonObj={

"属性名" :属性值,

"属性名" :属性值,

"属性名" :属性值,

………..

}

//创建JSON对象(JSON也可以称为无类型对象。轻量级,轻巧。体积小。易解析。)

创建JSON数组和遍历

复杂一些的JSON对象

json对象里面可以包含json对象,和数组之类的数组用下标访问即可

访问对象用"."即可访问,如访问aihao中的"drink",user.address.aihao[1]

三十六、 eval函数

eval函数的作用是:
将字符串当做一段JS代码解释并执行。

如:

Java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”将JSON格式的字符串响应到浏览器

也就是说Java响应到浏览器上的仅仅是一个"JSON格式的字符串”还不是一个JSON对象。
可以使用eval图数,将JSON格式的字符串转换成JSON对象。

结果:

面试题:

在JS中:[ ]和 { }有什么区别?

[ ]是数组

{ }是JSON对象

java中的数组:int arr={1,2,3,4};

js中的数组:var arr=[1,2,3,4];

JSON中的数组: var jsonObj={"name ": "张三","age":"12"};

table的用法

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/6542.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部