目录

文章目录

• **二、什么是JavaScript，有什么用?**
• 三、HTML嵌入JavaScript的方式：
• • 第一种方式：
  • 第二种方式：
  • 第三种方式：
• 四、JavaScript的变量
• 五、函数初步
• • **函数参数中的几个场景**
  • • **情景1：传入参数不足**
    • **情景2：传入参数过多**
    • **情景3：无参数传入**
    • **情景4：多个函数同名**
• 六、变量的种类
• 七、js中的数据类型
• 八、typeof[运算符](https://so.csdn.net/so/search?q=运算符&spm=1001.2101.3001.7020)
• 九、原始类型：
• • 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函数
• • 面试题：

二、什么是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 变量名;

如：var i;

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

var i;i=true;i=1.23;i=new Object();i="abc";

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

var i;//i没有赋初始值默认是undefined

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

测试代码：

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

下列的结果是：

结果：

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

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

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

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

五、函数初步

函数必须调用才会生效

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

函数的定义格式：

方式①：

示例：

//函数必须调用才能执行:sum(10,20,30);

方式②：

将函数封装在点击事件：

js中的函数不能重载

函数参数中的几个场景

情景1：传入参数不足

     //只传了一个结果会是第一个参数赋值，另一个没赋值的默认是undefined，所以结果是helloundefined (字符串拼接)

情景2：传入参数过多

     //传入过多个，只会计算函数参数多少个，所以只取2个，结果是1+2=3

情景3：无参数传入

     //没传参结果是NaN，NaN表示具体存在的值，这个表示不是数字(Not a Number)

情景4：多个函数同名

     //结果是 hi，因为函数同名后面的会覆盖前面的

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

六、变量的种类

①全局变量:

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

②局部变量:

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

这和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数据类型小测试：

 var i;alert(typeof i);//undefinedvar n=100;alert(typeof n);//numbervar s="abcd";alert(typeof s);//stringvar c=null;alert(typeof i);//object，null属于Null类型，单typeof运算结果是objectvar k=false;alert(typeof i);//booleanfunction su(){}alert(typeof su);//function

九、原始类型：

1.Undefined

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

例：

运行结果：

2. Number

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

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

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

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

如：

var i=100;var h="块";alert(i/h);//数字参与除法本来应该是一个数字，但是现在不会得到一个数字，所以结果是NaN

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

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

var i=100;var h=0;alert(i/h);//(当除数为0时，结果为无穷大)Infinity

alert(10/3);

结果为3.3333333…

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

十、常见的函数：

isNaN：

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

alert(isNaN(100));//false是一个数字alert(isNaN("100"));//false可以转化为数字alert(isNaN("ffff"));//true不能转为数字，不是数字

parseInt：

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

alert(parseInt("3.667"));//3alert(parseInt(5));//5不变

parseFloat：

将字符串转化为数字

alert(parseFloat("3.14"));//3.14alert(parseFloat(5.44));//5.44

Math.ceil():

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

alert(Math.ceil(2.1));//3alert(Math.ceil(-2.1));//-2

4.Boolean

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

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

语法格式为：boolean(数据)

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

如：

alert(Boolean(1));//truealert(Boolean(0));// falsealert(Boolean(""));// falsealert(Boolean("abc"));// truealert(Boolean(null)):// falsealert(Boolean(NaN));//falsealert(Boolean(undefined));// falsealert(Boolean(Infinity));// true//有数据会转化成true，没数据转化成false。

如：

var kc="kong";if(kc){alert("hello"+kc);}else{alert("数据为空") ;}

结果：

5、 Null

Null只有一个值null

6、String

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

var s1='abcdef';var s2="test";

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

第一种:

var  s="abc";

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

var  s2=new String("abc");

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

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

var x="king";alert(typeof x); // "string"

②大String(属于Object类型)

var y=new String("abc");alert(typeof y);// "object" 

获取字符串的长度的函数

结果

十一、 常用函数

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

indexOf & lastIndexOf

 alert('abcda'.indexOf("b"));//1alert('abcb'.lastIndexOf("b"));//3alert('abcda'.indexOf("f"));//-1不存在的返回-1

replace(只替换了第一个)

alert("next#int#oser".replace("#","%"))

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

alert("next#int#oser".replace("#","%").replace("#","%"))

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

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

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

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

 substr(startIndex,length)alert("abcdefxyz".substr(2,4));//cdefsubstring(startIndex,endIndex)注意:不包含endIndexalert("abcdefxyz".substring(2,4));//cd

7、Object

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

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

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

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

十二、创建类的方式

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

方式①

function 类名(形参){}

方式②

类名=function(形参){}

创建对象的语法：

new  类名();

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

运行结果：

图一弹两次窗，图二一次

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

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

function User(a,b,c){//abc是形参，属于局部变量。//声明属性(this表示当前对象)// User类中有三个属性:sno/sname/sage this.sno =a;this.sname=b;this.sage=c;}//创建对象var u1 = new User(111,"zhangsan", 30);//访间对象的属性 alert(u1.sno);//111alert(u1.sname); //zhangsanalert(u1.sage);//30//访问对象属性的另外一种写法alert(u1["sno"]);//111alert(u1["sname"]);//zhangsanalert(u1["sage"]);//30

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

//可以通过prototype这个属性来给类动态扩展属性和函数Product.prototype.getName=function(){return this.pname;}//调用后期动态扩展后的函数var chao=kong.getName();alert(chao);

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

String.prototype.hello=function(){alert("hello 🍉")}//调用扩展后的函数"abc".hello();

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

User=function(uname,uno){this.uname=uname;this.uno=nuo;}//创建对象(下列都可以)var u1=new User();var u2=new User("张三","1");var u3=new User("李四","1",3);//传入多个参数只会取前两个

十四、null、undefined、NaN的区别

十五、等同和全等运算符

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

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

alert(null===NaN);// falsealert(null===undefined);// false alert(undefined===NaN);// false

小demo：

alert(1==true);//true,值等同所以为true，boolean()函数将1转换为truealert(1===true);//false，值等同但数据类型不同所以为false

十六、js常用事件

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

click鼠标单击
dblclick鼠标双击

keydown键盘按下
keyup键盘弹起

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

reset表单重置
submit表单提交

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

十七、 回调函数的概念

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

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

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

如：

function sayHello(){alert("hello");}

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

sayHello()被称为为回调函数

回调函数的特点：

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

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

//java中也有回调函数机制:public class MyClass{public static void main(Stringl] args){//主动调用run()方法，站在这个角度看run()方法叫做正向调用。run();}//站在run方法的编写者角度来看这个方法，他把run方法叫做回调函数。 public static void run(){System.out.println("run...");}}

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

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

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

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

一般步骤：

十九、代码的执行顺序

错误示例：

//把input按钮放到script下面则getElementById访问不到id事件，因为是自上而下执行

这时我们可以采用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:是不能省略的。

//void(0)括号中的数字任意，不能不写数字 保留

var 数组名=[数据....]
var arr=[1,2,true,"abc","3.14" ];//什么类型都可以接受

for(var i=0;ialert(arr[i]);//i表示的是下标}

for(var i in arr){alert(arr[i]);}
//for..in语句可以遍历对象的属性User =function(username,password){this.username =username; this.password =password;}var u=new User("张三"，"444");alert(u.username +""+u.password);alert(u["username"]+","+u["password"]);for(var SXM in u){//alert(SXM)//alert(typeof shuXingMing)//SXM是一个字符串alert(u[shuXingMing]);}

alert(u.username);alert(u.password);

with(u){alert(username+password);}

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

//this代表的是当前文本框对象

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

//给String扩展trim

   
抽烟
喝酒
烫头
 

var nowTime=new Date();nowTime=nowTime.toLocaleString();//输出document.write(nowTime);

document.write("
")

//创建长度为0的数组var arr=[];//求数组长度arr.length

var arr2=[1,false,true,"kongchao",null];

for(var i=0;idocument.write(arr[i]+"
");}

var arr=[1,false,true,"kongchao",null];arr[7]=true;for(var i=0;idocument.write(arr[i]+"
");}

var arr =new Array();//创建数组长度为0
var arr =new Array(5);//创建数组长度为5
var arr =new Array(1,2);//创建数组长度为2,表示其中有两个值1,2

var a = [1,2,3,9];var str =a.join("-");alert(str);//"1-2-3-9"

//在数组的末尾添加一个元素(数组长度+1)var a = [1,2,3,9];a.push(10);alert(a.join("-"));//将数组末尾的元素弹出 var endElt =a.pop();alert(endElt);

//反转数组var a = [1,2,3,9];a.reverse();var str =a.join("-");alert(str);

window.confirm();//弹出消息确认框window.alert();

//后退//后退//前进

window.eval("var i=100:"); alert("i="+i);//i=100

  
员工信息列表
员工编号
员工名字
员工薪资
总共