javaWeb前端基础-javascript

<body>  
      <input type="button" value="点击" onclick="window.alert('hello js')
                                                 window.alert('hello,zhangsan')
                                                   alert('lisi')">
</body>

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

3.οnclick=“js代码，执行原理是什么？

页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上。

等这个按钮发生click（鼠标单击后）事件后，注册在onclick后边的js代码就会被浏览器自动调用了

4.怎么使用js代码弹出消息框

在js中有一个内置对象叫做window，全部小写，可以直接拿来使用，Window代表的是浏览器对象

window对象有一个函数叫做alter(相当于java里的printf），用法是window.alter（'消息')；这样就可以弹窗了[window可以省略]

5.js中的字符串可以用双引号，也可以用单引号

6，js中的一条语句结束之后可以使用分号“；”也可以不用

HTML嵌入JS的第二种方式

格式： 

<script>

alert(内容）;

</script>

javascript 脚本方式可出现多次，没有要求出现位置随意

暴露在脚本块当中的程序，在页面打开的时候执行，并且遵循自上而下的顺序依次逐行执行（这个代码的执行不需要事件）

<script>
    window.alert("begin...")
    </script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML嵌入JS的第二种方式</title>
    <script>
        window.alert("head...")
        </script>
</head>
<body>
   
    <input type="button" value="按钮">
   
    <script>
      
        window.alert("hello");
    </script>
    <input type="button" value="按钮1">
</body>
</html>
<script>
    window.alert("end...")
    </script>

HTML嵌入js代码的第三种方式

引入外部独立的JS文件

格式： <script src="JS文件地址"></script>

在需要位置引入JS脚本文件-，引入外部独立的JS文件，JS文件中的代码会自上而下的执行，引入的JS文件下不可以再写脚本块

<body>
   
    <script src="目录/1.js"></script>
    <!--同一个JS文件可引入多次，但这种需求很少-->
    <script src="目录/1.js">
        //这里写的脚本块不会执行，引入的JS文件下不可以再写脚本块
       // window.alert("test");
    </script>
    <!--这种不引入可执行-->
    <script>
        window.alert("test");
    </script>

</body>

js变量，重要

1. javascript当中的变量怎么声明变量

var 变量名

2. 怎么给变量赋值

变量名 = 值

javascript是一种弱类型语言，没有编译阶段，一个变量可随意赋值，附什么类型的值都可以

var i =100;

i=true;

i="abc"

i = new Object();

3.一个变量没赋值时会给变量一个默认值underfined

在javascript中underfined是一个具体值

4.一个变量没有声明直接赋值，属于语法错误

alert(age)//没有声明age报错

<body>
    <script>
        var i ;
       alert("i=" +i);//i=undefined
       
       alert(undefined);//undefined
       var k = undefined;
       alert("k=" +k);//k=undefined

        //一个变量没有声明直接赋值，属于语法错误
       //alert(age)

       var a,b, c=200
       alert("a="+a);//a=undefined
       alert("b="+b);//a=undefined
       alert("c="+c);//200

    </script>

</body>

函数的定义与调用

1. js中的函数

等同于java语言中的方法，函数也是一段可以重复利用的代码片段。函数一般可以完成某个特定的功能

2. js变量是一种弱类型，那么函数应该怎样定义

语法格式：

第一种

function 函数名（形式参数列表）{

函数体

}

第二种

函数名 = function（形式参数列表）{

函数体

}

3.同名方法后边的会把前边的覆盖掉

4. java方法中有重载，js函数可以重载吗

可以

<body>
    <script>
//第一种定义
       function sum(a,b){
        alert(a+b);
       }
       //函数调用才可使用
       sum(10,20);
//第二种调用
       sayHello = function (username){
        alert("hello"+username);
       }
       sayHello("zhangsan");
    </script>

<!--函数封装-->
<input type="button" value="单击" onclick="sayHello('jack')">
<input type="button" value="求和" onclick="sum(100,200)">

    <script>
        /*
    js函数可以重载吗
        */
       function sum(a,b){
        //a b属于形参
        return a+b;
       }
       var r = sum(1,2);
       alert(r);//3

       var r2 = sum("jack");
       alert(r2);//jackundefined

       var r3 = sum();
       alert(r3);NaN一个具体值

       var r4 = sum(1,2,4);
       alert(r4);//3  4被自动忽略
       
       function text1(text1){
        alert("text1");
       }
       
       function text1 (){
        alert("test1 test1");
       }

      text1(li);//test1test1 同名方法后边的会把前边的覆盖掉
     </script>
    
</body>

全局变量和局部变量

全局变量：

在函数体之外声明的变量属于全局变量，全局变量的生命周期是：

浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存中，耗费内存空间

能使用局部变量尽量使用局部变量

局部变量

在函数体当中声明的变量，包括一个函数的形参都属于局部变量

局部变量的生命周期是：函数执行时局部变量的内存空间开辟，函数执行结束后局部变量内存空间释放，局部变量生命周期较短

注意：当一个变量声明时没有使用var关键字，那不管这变量在呢声明都是全局变量

</head>
<body>
    <script>
//全局变量
        var name = "jack";

        function accessName(){
            //函数体内部，局部变量
            var name = "lisi";
            //就近原则：访问局部变量
            alert("name= "+ name);//lisi 
        }
        accessName();//lisi
        //局部变量函数执行结束销毁，所以此处访问全局变量
        alert("name="+name);//jack

        function accessAge(){
            var age = 20;
            alert("age = "+age);
        }
        accessAge();//20
       // alter("age="+age)  报错因为没有声明全局变量
       
       function mfun(){
        //当一个变量声明时没有使用var关键字，那不管这变量在呢声明都是全局变量
         myname = "li";
       }
//
       mfun();//不执行，因为没有局部变量
       alert("myname=" + myname);//myname=li
    </script>
   
</body>

js数据类型

1.虽然js中的变量再声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以只里也是要学习一下js包括哪些数据类型

js中的数据类型有：原始类型、引用类型（面试题）

原始类型：Undefined、Number、String、boolean、null

引用类型：object和object的子类

2.ES规范：ES6后，基于以上六种类型之外有添加了：Symbol

3。js中有一个运算符叫做typeof，这个运算符可以再程序运行阶段动态获取变量的数据类型

typeof运算符的语法格式：

typeof 变量名

typeof运算符的运算结果是以下六个字符串之一：注意字符串全部小写。

“undefined” “number” “string” “boolean” “ object” “function”

4.在js中比较只能使用==

要求：求和，变量a，b变量将来的数字只能是数字，不能是其他类型

<body>
    <script>

       function sum(a,b){
        if(typeof a=="number"&&typeof b =="number"){//如果a变量是number类型b变量有事number类型
            return a+b
        }
        alert(a+b+"必须全部为数字");
       }

       var r =sum(false,"a");
       alert(r);//false必须全部为数字 undfined
//typeof不同参数结果
       var i;
       alert(typeof i);//undefined

       var k =10;
       alert(typeof k);//number

       var f = "abc";
       alert(typeof f);//string

       var d = null;
       alert(typeof d);//object

       var flag = false;
       alert(typeof flag);//boolean

       var obj = new Object();
       alert(typeof obj);//object

       function sayHello(){

       }
       alert(typeof sayHello);//functio
    </script>
</body>

Undefined类型

Undefined类型只有一个值，这个值就是undefined

当一个变量没有手动赋值，系统默认赋值undefined

或者也可以给一个变量手动赋值undefined

<body>
    <script>
    
        var i;//undefined
        var k =undefined;//undefined  i=k
        var y ="underfined";//"undefined" 结果一样但字符串类型和上边两个不相等
    </script>
</body>

Number 类型

1.Number 类型包含哪些值

整数、小数、正数、负数、NaN、 Infinity（无穷大）

2.关于Nan（不是一个数字，但是是Number类型）

什么情况下运行结果是一个NaN

运算结果本应是一个数字，最后算完不是一个数字的时候，结果是NaN

3.主要函数

isNaN(数据)：结果是TRUE表示不是一个函数，结果是FALSE表示是一个函数

pastInt（）：可以将字符串变成数字，并取整数位

parseFloat（）：可以将字符串变成数字

math.ceil（）：向上取整

<body>
    <script>
     
        var a =1;        
        var b =1.2;     
        var c =-1;       
        var ad =NaN;    
        var e =Infinity; 

        alert(typeof a);//number
        alert(typeof b);//number
        alert(typeof c);//number
        alert(typeof ad);//number
        alert(typeof e);//number

  

    var f = "abc";
    var g =10;
    alert(f/g);//除号  结果显然应该是一个数字，但是运算过程中导致最后不是一个数字那最后结果就是NaN

    var h = "abc";
    var i =10;
    alert(h+i)//"abc10" 不是NaN因为有优先级 加号判断有字符串会变成字符串拼接
//alert(10/0) 无穷大
alert(10/3);//3.33333333333


function sum(a,b){
    if(isNaN(a)||isNaN(b)){
        alert("参与运算须是数子")
    }
    return a+b;
}

var r =sum("a",2);//参与运算须是数子
alert(r)

alert(parseInt("3.9999999"));//3
alert(parseInt(4.11111));//4

alert(parseFloat("3.13")+1)//4.14
alert(parseFloat("3.2")+1)//4.2

alert(Math.ceil(5.1))//6
    </script>
</body>

boolean类型

1.js中的布尔类型永远只有两个值：true和false

2.在布尔类型中有一个函数叫做Boolan（）

语法格式：

Boolan（数据）

Boolan（）函数作用使用将非布尔类型转换为布尔类型

没有具体值转换成FALSE，有具体值转换为TRUE

3.if（只有真和假）和java不同的是他会将不是布尔类型的值转换为布尔类型

并且只要不为null或0就为真

<body>
    <script>
       var name ="";
       if(Boolean(name)){
        alert("欢迎你"+name);
       }else{
        alert("用户名不能为空")//用户名不能为空 应为name是空值
       }
//Boolean可省略
       var name ="Jack";
       if((name)){
        alert("欢迎你"+name);//欢迎你Jack
       }else{
        alert("用户名不能为空")
       }

       //转换
       alert(Boolean(1)) //true
       alert(Boolean(0))//false
       alert(Boolean(""))//false
       alert(Boolean("abc"))//true
       alert(Boolean(null))//false
       alert(Boolean(NaN))//false
       alert(Boolean(undefined))//false
       alert(Boolean(Infinity))//true
    </script>
    
</body>

String类型

1.在js当中既可以使用单引号，ye可以使用双引号

var s1 ="abc"

var s2 ='abc'

2.在js当中，怎样创建字符串对象？

两种方式：

第一种：小string

var s = "abc"

第二种：（使用js内置的支持类String）大string

var s2=new String（“abc”）

需要注意的是：String是一个内置的类，可以直接用，String的父类是object

3.无论是小string还是大string他们的方法是通用的

4.关于string类型的常用属性和函数

常用属性

length：获取字符串长度

常用函数：

indexof 获取指定字符串中第一次出现的位置

lastIndexof 获取指定字符串中最后一次出现的位置

replace 替换

substr 截取子字符串

substring 截取子字符串

toLowerCase 转换小写

toUpperCase 转换大写

split 拆分字符串

<body>
    <script>
      
        var x = "abc"
       alert(x.length);//3

       alert("http://www".indexOf("http"));//0
       alert("http://www".indexOf("https"));//-1

       //判断一个字符串是否包含在某个字符串中
       alert("http://www.baidu.com".indexOf("www")>=0 ?"包含" :"不包含")//包含

       //repace
       alert("aaaaaaa".replace("a","b"));//baaaaaa 只能替换一个 想全部替换需要用后边的正则表达式

       //面试高频：substring和substr有什么区别
       alert("abcdefg".substr(2,4));//cdef  substr截取从2开始四个字符长度的字符串
       alert("abcdefg".substring(2,4));//cd   substring是截取从而开始3结束的字符串
     
    </script>
</body>

Object类型

1.Object是所有类型的超类，自定义的任何类默认继承Object

2.Object包括哪些属性

prototype(常用的)：作用是给类动态的扩展属性和函数

constructor属性

3.Object包括哪些常用方法

toString（）

valueof（）

toLocaleString（）

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

5.在JS中怎么定义类？怎么new对象？

定义类的语法

第一种

function 类名（形参）{

}

第二种

类名 = function（形参）{

}

创建对象的语法

new 构造方法名（实参）

<body>
    <script>
     
       function say(){

       }
//把say当做一个普通函数来调用
       say();

       //这种方式就把say当做一个创建对象
      var r = new say();//object是一个引用对象，保存内存地址指向堆内地址

      alert(r);

      //js类型中类的定义同一个构造函数的定义
      //在js中类的定义和构造函数的定义是放在一起完成的
      function user(a,b,c){
        this.sno = a;
        this.sname =b;
        this.age=c;
      }

      //创建对象
      var u1 = new user(111,"zhangsan",30);
      alert(u1.age)
      alert(u1.sname)
      alert(u1.sname)

    var u2 = new user(222,"lisi",55);
    alert(u2["sno"])
    alert(u2["sname"])
    alert(u2["age"])

//定义类的另一种方法
Emp =function (ename,sal){
    this.ename = ename;
    this.sal = sal;
}
var e1 = new Emp("Smith",800);
alert(e1["ename"]+e1.sal);

    Product = function(pno,pname,price){
        this.pno = pno;
        this.name = name;
        this.price = price;
        //函数
        this.getPrice = function(){
            return this.price;
        }
    }
    var pro = new Product(111,"西瓜",4.0);
    var pri = pro.getPrice();
    alert(pri)//4

    //可以通过prototype这个属性来给类动态扩展属性以及函数
    Product.prototype.getPname = function(){
        return this.pname;
    }
    //调用后期扩展的函数
    var pname = pro.getPname();
    alert(pname);
    // 给string扩展一个函数
    String.prototype.suiyi = function(){
        alert("这是给生日那个类扩展的一个对象");
    }
    "abc".suiyi();//这是给生日那个类扩展的一个对象

    //js怎么定义类，怎么创建对象？
    User = function (username,password){
        this.username = username;
        this.password = password;

    }
    var u =new User();//可无参
    var u =new User("zhang");//可一参数
    var u =new User("zhang","124");//可全参



    </script>
</body>

null NaN undefined区别

<body>
    <script>
    //数据类型不一样
    alert(typeof null);//object
    alert(typeof NaN);//number
    alert(typeof undefined);//undefined

    //null和undefined可以相等
    alert(null == NaN);//false
    alert(null == undefined);//ture
    alert(undefined == NaN);//false

    //==：判断值是否相等
    //===：即判断值是否相等又判断类型是否相等

    alert(null == NaN);//false
    alert(null == undefined);//false  
    alert(undefined == NaN);//false
   alert(1==true)//true
   alert(1===true)//false
   </script>
    
</body>

js常用事件和回调函数

js中的事件

biur：失去焦点

focus：获得焦点

click：鼠标单击

dbclick：鼠标双击

keydown:键盘按下

keyup：键盘弹起

mousedown：鼠标按下

mouseover：鼠标经过

mousemove：鼠标移动

mouseout：鼠标离开

mouseup：鼠标弹起

reset：表单重置

submit：表单提交

change：下拉列表选中项改变，或文本框内容改变

select：文本选定

load：页面加载完执行

onxxx：这个事件句柄出现在一个标签的属性位置上或紧跟函数

回调函数：自己把这个函数代码写出来了，但是这个函数不是自己负责调用的，有其他程序负责调用该函数（就相当函数不在自己的块内调用，代码于其他部分调用这个函数）

注册事件

注册事件的第一种方式，直接在标签中使用事件句柄

<body>
    <script>

        //对于这个程序来说sayHello是一个回调函数
        
        function sayHello(){
        alert("hello");
        }
    </script>
<!--以下代码的含义：将sayHello函数注册到按钮上，等待click事件发生后，该函数被浏览器调用。我们称从这个函数为回调函数-->
<input type="button" value="hello" onclick="sayHello()">

</body>

第二种注册方式：是使用纯js代码完成事件注册

 <body>
    <input type="button" value="hello2" id="mybth">
    <input type="button" value="hello3" id="mybth1">
    <input type="button" value="hello4" id="mybth2">


<script>
    
    function doSome(){
        alert("do some")
    }

//第一步：先获取这个按钮对象，document全部小写，内置对象直接使用，document就代表整个HTML页面
    var bthObj = document.getElementById("mybth");//通过id值获取对象

   // 第二步：给按钮对象的onclick属性赋值
    bthObj.onclick = doSome;//千万别加小括号，该函数是回调函数这行函数的意思是将回调函数注册到click事件上

var bthObj1 = document.getElementById("mybth1");

mybth1.onclick = function(){//这个函数没有名字叫做匿名函数这个匿名函数也是一个回调函数
    alert("test")//这个函数在页面打开时不会执行，不会调用，在click事件发生后才会被调用
}

document.getElementById("mybth2").onclick = function(){
    alert("test2")
}

</script>
</body>

代码执行顺序

load：页面加载完毕执行,页面所有元素加载完，此时id也一加载完，才执行ready函数此时可以获得id值
以下代码执行发生错误，应为代码从上而下执行而id在getElementById（获取id）之后，所以script部分拿不到id值
<script>
document.getElementById("btn").onclick =function(){
alert("hello")
}
</script>
<input type="button" value="h" id ="btn">
解决方法在body加onclick
或看解决方法二常用


<body onload="ready()">
<script >
    function ready(){
    document.getElementById("btn").onclick =function (){
        alert("hello")
    }
    }
</script>
<input type="button" value="h" id ="btn">
</body>

解决方法二

<body >
  
<script >
    //页面加载过程中，将a函数注册给了onload
    //页面加载完毕，执行onload函数执行，此时执行回调函数a
    //a执行过程中吧b函数注册给了id="btn"的click事件
    //当b的click执行时，b调用并执行
    window.onload = function ready(){//这个是回调函数a
    document.getElementById("btn").onclick =function (){//这一部分是这个是回调函数b
        alert("hello")
    }
    }
    /*
    两个回调函数， document.getElementById("btn")在页面全部加载完执行
                  onclick =function (){alert("hello")}在鼠标点击事务发生之后执行
    */
</script>
<input type="button" value="h" id ="btn">
</body>

捕捉回车键

对于每一个键盘时间来说，都有keyCode属性获取键值

回车键键值是13 ESC键值是27

捕捉回车键：键盘按下回车会登录信息

<body>
    <script>
window.onload = function(){
    document.getElementById("a").onkeydown=function(c){//c参数用来接收传过来的事件，不带参数下边没办法调用事件
       
        if(c.keyCode === 13){
            alert("正在验证...")
        }
    }
}
    </script>
    <input type="text" id="a">
</body>

void运算符

当href=“”为空时表示为本地路径还是会重新跳转到当前页面

void运算符的语法。void（表达式）

运算原理，执行表达式，但不返回任何结果

javascript：void（0）

其中javascript：作用是告诉浏览器后边是一段JS代码，以下程序javascript不可省略

要求：既保留超链接样式（有下划线有小手）同时用户点击超链接时执行一次JS代码，但页面不能跳转

以下超链接样式

<a href="">既保留超链接样式（有下划线有小手）但没有执行JS代码，页面能跳转自己当前界面</a>

下面代码实现了既保留超链接样式同时用户点击超链接时执行一次JS代码但页面不能跳转

<a href="" οnclick="window.alert('hello')">既保留超链接样式（有下划线有小手）同时用户点击超链接时执行一次JS代码，但页面能跳转当前界面</a>-->

<body>
    页面顶部<br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
  

<a href="javascript:void(0)" onclick="window.alert('hello')">既保留超链接样式（有下划线有小手）同时用户点击超链接时执行一次JS代码，但页面不能跳转</a>
</body>

js里的控制语句

跟Java用法一样

1.if 2.switch 3.while 4.for循环 5.do...while 6.break

7.continue 8.for.. in（了解 9.with语句（了解

获取文本框内容

1.javascript包括三大块

ECMAScript：js的核心语法（E/S规范）

DOM：文档对象的模型，对网页当中的节点进行增删改的过程。HTML文档被当做一颗DOM树来看待

var domObj = document.getElemenntById("id");

BOM:浏览器对象模型

关闭浏览器串口，打开新浏览器窗口、后退、前进、浏览器地址栏上的地址等都是BOM编程

2.DOM和BOM区别和联系

BOM的顶级对象是window

DOM的顶级对象是：documnet

实际上BOM是包括DOM

<body> 
    <input type="text" id = "username">
    <input type="button" value="获取文本框内容" id="btn">
    <script>
function fun1(){
            document.getElementById("btn").onclick=function(){
                alert( document.getElementById("username").value);
            }
        } 
        fun1()      ;
    </script> 
   
<br><br>
<input type="tsxt" id = "u1">
<br>
<input type="tsxt" id = "u2">
<input type="button" value="将第一个文本框上的value值赋值给第二个文本框" id="setBtn">
<script>
function fun2(){
        document.getElementById("setBtn").onclick=function(){
        document.getElementById("u2").value = document.getElementById("u1").value
    }
    
    }
    fun2();

</script>


<!--blur时间失去焦点-->
<!--以下代码中的this代表的是当前结点对象，this.value就是这个节点的属性-->
<input type="text" onblur="alert(this.value)">
</body>

innerHTML和innerText

innerHTML：后面的代码会被解析执行

innerText：后面的代码不会解析执行，就是字符串

<body>

    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){

           var d=document.getElementById("div1")
           d.innerHTML = "<font color='red'>用户名不能为空</font>"
           d.innerText = "<font color='red'>用户名不能为空</font>"
            }
        }
        
    </script>

    <input type="button" value="设置div中的内容" id ="btn"><br><br>
    <div id = "div1"></div>

    
</body>

正则表达式

1.正则表达式是什么

主要用在字符串格式匹配方面

2.正则表达式对我们编程javascript掌握哪些内容

1.常见的正则表达式符号要认识

2.简单的正则表达式是要会写

3.他人编写的正则表达式能看懂

4.在javascript当中怎么创建表达式对象

5.在javascript当中，正则表达式对象有哪些方法

6.要能够快速的从网络上找到自己需要的正则表达式，并且测试其有限性

3.很常见的正则表达式

.匹配换行符以外的任意字符

\w匹配字母或数字或下划线或汉字

\s匹配任意的空白符

\d配数字

\b匹配单词的开始或结束

^匹配字符串的开始

$匹配字符串的结束

*重复零次或更多次

+重复一次或更多次

？重复零次或一次

{n}重复n次

{n，}重复n次或更多次

{n，m}重复n到m次

\W匹配任意不是字母、数字、下划线、汉字的字符

\S匹配任意的不是空白符的字符

\D匹配任意非数字的字符

\B匹配不是单词开始或结束的位置

[^x]匹配除x以外的任意字符

[^aeiou]匹配除了aeiou这几个字母以外的任意字符

\后面跟特殊字符就变成普通字符了

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

[1-9]表示1-9任意一个数字（次数是一次）

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

[A-Za-z0-9-]表示A-Za-z0-9、-中任意一个字符

怎样创建正则表达式对象，怎样调用正则表达式的方法？

第一种

var regExp = new RegExp("正则表达式"，flags)；

第二种

var regExp = /正则表达式/flags;

关于flags

g：全局匹配

i:忽略大小写

m：多行搜索（ES规范制定后才支持m）当前面是正则表达式时m不能使用

正则表达式对象的test（）方法

true/false=正则表达式.test（用户填写字符串）

true：字符串个数匹配成功

FALSE：失败

邮箱地址的正则表达式

<body>
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var email = document.getElementById("email").value;
                var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok = emailRegExp.test(email);
                if(ok){
                    document.getElementById("emailError").innerText ="邮箱地址合法"
                }else{
                    document.getElementById("emailError").innerText ="邮箱地址不合法"
                }
                document.getElementById("email").onfocus=function (){
                    document.getElementById("emailError").innerText=""

                }
            }
        }
    </script>

    <input type="text" id="email">
    <span id = "emailError" style="color :red; font-size:12px; " ></span>
    <br>
    <input type="button" value="验证邮箱" id="btn">
</body>

扩展字符串的trim

trim()去除字符串的前后空白

<body>
    <script>
     

        window.onload = function(){
            //trim()去除字符串的前后空白
            document.getElementById("btn").onclick = function(){
                var username = document.getElementById("username").value
               alert  ( username.trim());
               
            }
        }
    </script>
    <input type="text" id="username">
    <input type="button" value="获取用户名" id="btn">

</body>

案例：表单验证（java开发会用到类似）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        span{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<script>
    window.onload = function(){
        var usernameEroorSpan = document.getElementById("usernameError") 
        var usernameElt = document.getElementById("username");
        usernameElt.onblur = function(){
            //获取用户名
            var username = usernameElt.value;
            // 去除前后空白
            username =username.trim();
            // 判断用户名是否为空
            
            if(username){
                // 用户名不为空
                // 据需判断长度[6-14]
                if(username.length<6 ||username.length>14){
                    //用户名长度不合法
                    usernameEroorSpan.innerText="用户名长度必须在6-14之间"
                }else{
                    // 用户名长度合法
                    // 判断是否符合正则
                    var regExp = /^[A-Za-z0-9]+$/;
                    var ok = regExp.test(username);
                    if(ok){
                        // 合法

                    }else{
                        // 用户名出现特殊符号
                        usernameEroorSpan.innerText="用户名只能有数字和字母组成"
                    }
                }
            }else{
                //用户名为空
                usernameEroorSpan. innerText="用户名不能为空"
            }

            usernameElt.onfocus=function(){
                
                // 清空不合法的value
                if(usernameEroorSpan.innerText !=""){
                    usernameElt.value=""
                }
                //清空后面的span
                usernameEroorSpan.innerText="";
            } 
        }
        // 获取密码错误提示的span标签
        var pwdErrorSpan= document.getElementById("pswError")
        // 获取确认密码对象
       var userpwd2Elt = document.getElementById("psw2");
       //绑定失去焦点事件
       userpwd2Elt.onblur = function(){
        //获取密码和确认密码
        var userpwdElt = document.getElementById("psw");
        var userpwd =userpwdElt.value
        var userpwd2 =userpwd2Elt.value
      
              if(userpwd != userpwd2){
        //密码不一致
        pwdErrorSpan.innerText = "密码不一致"
       }else{
        //密码一致
       }
       userpwd2Elt.onfocus=function(){
        //清空不合法的value
      if(pwdErrorSpan.innerText !=""){
        userpwd2Elt.value=""
      }
        // 清空不合法的span
        pwdErrorSpan.innerText=""
       }
    }
       //给email绑定blur事件
       var emailElt = document.getElementById("email")
       //获取email的span
       var emailSpan = document.getElementById("emailError")

       emailElt.onblur = function(){
        // 获取email
        var email = emailElt.value;
        // 编写email的正则
        var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        var ok1 = emailRegExp.test(email);
        if(ok1){

        }else{
      emailSpan.innerText="输入不合法"
            
        }
       }
       emailElt.onfocus = function(){
        // 清空错误提示和内容
        if(emailSpan.innerText !=""){
            emailElt.value = ""
        }
        emailSpan.innerText =""

       }
    //  给提交按钮绑定鼠标单击事件
    var submitbtnElt = document.getElementById("submitBth")
    submitbtnElt.onclick = function(){ 
        //触发username userpwd2  email的blue
      //不需要人工操作，使用纯就是代码触发事件
      usernameElt.focus();
      usernameElt.blur();

      userpwd2Elt.focus();
      userpwd2Elt.blur()
;
      emailElt.focus();
      emailElt.blur();
        //当表单所有项都是合法提交表单
        if(usernameEroorSpan.innerText == ""&& pwdErrorSpan.innerText == "" && emailSpan.innerText==""){
           var userformElt = document.getElementById("userform")
           userformElt.action = "http://127.0.0.1:3306/text/student"
           //提交表单
           userformElt.submit()
        }
    }
    }
</script>
<body>
    <!--表单提交应用post，这里为了检测用了get-->
    <!--form本省有submit属性-->
    <form id="userform" method="get">
        用户名<input type="text" name="username" id="username"><span id="usernameError"></span><br>
        密码<input type="password" name="psw" id="psw"><br>
        确认密码<input type="password" id="psw2"><span id="pswError"></span><br>
        邮箱<input type="text"  name="email"  id="email"><span id="emailError"></span><br>
        <!--如果这样写不合法submit也会提交-->
        <!--<input type="submit" value="注册" id="sub">-->
        <input type="button" value="注册" id="submitBth">
      <input type="reset" value="重置" id="rs">
    </form>
</body>

案例：复选框的全选和取消全选

<body>
    <script>
     /*   window.onload = function(){
            var firstChk = document.getElementById("firstChk");
            firstChk.onclick=function(){
                //获取第一个复选框的状态
                // checked选中返回true 未选中返回false
                var aihao = document.getElementsByName("aihao")
                if(firstChk.checked){
                    for(var i=0;i<aihao.length;i++){
                        aihao[i].checked = true
                    }
                }else{
                    for(var i=0;i<aihao.length;i++){
                        aihao[i].checked = false
                    }
            }
        }
    }*/
    //上述代码优化(最上边的选中则所有都选中，最上边的取消则所有都取消)
    window.onload = function(){ 
        var aihaos = document.getElementsByName("aihao")
        var firstChk = document.getElementById("firstChk")
        firstChk.onclick = function(){
     
           for(var i =0;i<aihaos.length;i++){
            aihaos[i].checked = firstChk.checked
           }
        } 
         var all = aihaos.length
         for(var i =0;i<all;i++){
            aihaos[i].onclick = function(){
                var checkCount = 0;
                for(var i =0;i<all;i++){
                    if(aihaos[i].checked){
                        checkCount++
                    }
                }
               /* if(all == checkCount){
                    firstChk.checked = true;
                }else{
                    firstChk.checked = false;
                }*/
                firstChk.checked =(all == checkCount)

            }
         }
    }
  


  </script>
    <input type="checkbox" id="firstChk">
    <input type="checkbox" name="aihao" value="smoking">抽烟
    <input type="checkbox" name="aihao" value="drinking">喝酒
    <input type="checkbox" name="aihao" value="firehair">烫头
</body>

案例：获取下拉列表的选中项

<body>
  <!--<select onchange="alert(this.value)" >
        <option value="01" >河北省</option>
        <option value="02" >河南省</option>
        <option value="04" >山东省</option>
        <option value="05" >山西省</option>
    </select>-->  
    <script>
        window.onload = function(){
            var provinceList = document.getElementById("p")
            provinceList.onchange = function(){
                alert(p.value)
            }
        }
    </script>
    <select id="p" >
        <option value="01" >河北省</option>
        <option value="02" >河南省</option>
        <option value="04" >山东省</option>
        <option value="05" >山西省</option>
    </select>
</body>

周期函数

<body>
    <script>
        //Date可以用来获取时间/日期
        // 获取系统当前时间
        var nowTime = new Date();
        //输出
        document.write(nowTime);
        document.write("<br>")
        // 转换成具有本地语言格式的日期环境
        nowTime = nowTime.toLocaleString();
        document.write(nowTime);
        document.write("<br>")
        document.write("<br>")

        // 自定义日期格式
        var t = new  Date();
        var year = t.getFullYear()
        var month = t.getMonth()
        var dayOfWeek = t.getDay()//获得一周的第几天0-6
        var day = t.getDate();
        document.write(year+"年"+(month+1)+"月"+day+"日")
        document.write("<br>")
        document.write("<br>")
//重点：怎么获取毫秒数从1970年1.1.00:00:00到了当前系统时间的总毫秒数
document.write(new Date().getTime( ));//时间戳

document.write("<br>")
        document.write("<br>")


    </script>
    <script>
        function displayTime(){
            var time1 = new Date();
            
            var strTime = time1.toLocaleString();
           
            document.getElementById("time").innerHTML = strTime;
        }
        function start(){
            //setInterval 隔一定的周期执行函数
        v =    window.setInterval("displayTime()",1000);
        }
        function end(){
            //setInterval的返回值是clearInterval,clearInterval接收到返回值停止setInterval执行
            window.clearInterval(v)
        }
    </script>
    <br><br>
    <input type="button" value="显示系统时间" onclick="start();" >
    <input type="button" value="结束" onclick="end();" >
    <div id = "time"></div>
</body>

内置支持类Array

Array创建数组

<body>
    <script>
       /* var arr = [];
        alert(arr.length)

        var arr2 = [1,2,3,4,5,6]
        alert(arr2.length)

        arr2[7]="test"//不会越界自动扩容
        arr2[8]="ek"
        for(var i =0;i<arr2.length;i++){
            document.write(arr2[i])//123456undefinedtestek
        }
        //另一种创建数组的方法
        var a= new Array();
        var a1= new Array(3)
        var a2= new Array(3,2)
        alert(a.length)//0
        alert(a1.length)//3
        alert(a2.length)//2*/

        var a3 = [1,2,3,9]
        var str = a.join("-")
        alert(str)
        //1-2-3-9
        // zai末尾加一个元素1-2-3-9-10
        a3.push(10)
        alert(a.join("_"))

        //弹出末尾一个元素
        var end =a3. pop();
        alert(end);//10
        alert(a3.jion("-"))//1-2-3-9

        // JS数据结构可以自动模拟栈的结构：后进先出，先进后出

    </script>
</body>

open和close

close：关闭当前打开的窗口

open：打开相应窗口

<body>
    <input type="button" value="开启百度(新窗口）" onclick="window.open('http://www.baidu.com');">
    <input type="button" value="开启百度(当前窗口）" onclick="window.open('http://www.baidu.com','_self');">
    <input type="button" value="开启百度(新窗口）" onclick="window.open('http://www.baidu.com','_blank');">
    <input type="button" value="开启百度(父窗口）" onclick="window.open('http://www.baidu.com'),'_parent';">
    <input type="button" value="开启百度(顶级窗口）" onclick="window.open('http://www.baidu.com','_top');">
<input type="button" value="dakaibiaodan" onclick="window.open('表单.html')">
<input type="button" value="guanbi" onclick="window.close();">
</body>

弹出消息框和确认框（开发会用到）

<body>
    <script>
        function del(){
            if(window.confirm("确认删除")){
                alert("delete data。。。")
            }
        }
    </script>
    <input type="button" value="弹出消息框" onclick="window.alert('消息框');">
    <input type="button" value="弹出确认框（删除）" onclick="del();">
</body>

历史记录（界面后退）

window.history.back()：界面返回上一个运行界面

页面一：

<body>
    <a href="007.html">007</a>
</body>

页面二

<body>
    <input type="button" value="后退" onclick="window.history.back()">
    <input type="button" value="后退" onclick="window.history.go(-1)">

</body>

将当前窗口设置为顶级窗口（开发要用）

固定代码格式：window.top.location=window.self.location;

代码界面一：

<body>
    <div>
    <iframe src="005dingji.html" width="500px" height="500px"></iframe>
</div>

代码界面二：005

<body>
    <div>
        005
        <script type="text/javascript">
           function setTop(){
               if(window.top != window.self){
                  //将当前窗口设置为顶级窗口
                  window.top.location=window.self.location;
                }
           }
        </script>
        <input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话，将它设置为顶级窗口"></div>
</body>