二、js中基础知识

　 该篇文章主要是强化一下自己javaScript的基础，让写代码变得更轻松些。基础好的请忽略。
    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，
为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1、在HTML中嵌入js代码的两种方式：

1）插入在标签内部，写在事件句柄后面
<input type="button" value="亲，点击我" onclick="window.alert('hello world!')window.alert('hello')>
2）在独立的脚本块，其中可以编写js代码
<script type="text/javascript">
        window.alert("hello world");
</script>
备注：<script>标签不一定出现在head标签中，可以出现在HTML页面中的任何位置

2、语法规范和书写规范

2.1、javaScript语法规范说明：
1）区分大小写；
2）其中的变量是弱类型；
3）每行结尾的分号可有可无，如果没有浏览器会自动加上
4）{} 括号用于代码块
5) 注释方式和java和c语言相同

2.2、变量的书写规范：
1）首字符必须是字母(大小写均可)、下划线、美元符号
2）其余字母可以使下划线、美元符号、任意字母或者数字字符
3）变量名不能是关键字或者保留字
a、变量声明：var 变量名;
    变量在声明的时候，没有使用var关键字，那么这个变量不管是定义在哪个位置上，都是全局变量
b、变量赋值：变量名=值;
    js中的变量若没有显示的赋值，系统默认赋值underfined; underfined在js中是一个具体的值,表示未定义
c、一行上可以定义多个变量
    var a,b,c=300;//变量a和变量b都是underfined，变量c是300
备注：
    JavaScript也遵守就近原则，全局变量作用域是整个js程序，局部变量只作用于某个函数；
    变量没有定义，直接访问会报错。[结果不是underfined]；
    变量定义之后没有赋值，系统默认赋值underfined；

3、函数语法格式：

    第一种方式：
    function 函数名(形式参数列表){
            函数体由JavaScript语句构成;
    }
    
    示例：
    function testFun(){
        //JS的函数执行结果之后的返回值类型是任意的，而且也可以不返回任何数据
        //return 100;
        //return false;
        //return "abc";
    }
        

    第二种方式：
    函数名 = function(形式参数列表){
            函数体;
    }

备注:
js中的函数没有重载机制,在统一个js代码中，函数名不能重名；
函数必须手动调用的时候才会执行；

 

4、js中的数据类型(5种)：
4.1、String类型(字符串类型)：包括具体的值：'a' 'bsdfasdfasef'   

    js中没有字符类型，只有字符串类型(字符串这种数据类型的数据又可以称为”字符串对象“,虽然被称为字符串对象，但是字符串对象不属于Object类型)
String的属性
1）length属性：
字符串的名字.legth: 获取字符串长度
2）prototype属性：可以动态给String类型的数据扩展方法和属性
示例1：给所有String(字符串动态的扩展一个方法叫做doSome)
    var ename="abdcdf";
    alert(ename.length);//获取字符串长度
    //以下是给所有String(字符串动态的扩展一个方法叫做doSome)
    String.prototype.doSome=function(){
        alert("dosome.....");
    };
    //调用doSome方法
    ename.doSome();
3）String对象中的方法：
toLocaleLowerCase()    把字符串转换为小写。
toLocaleUpperCase()    把字符串转换为大写。
substr()    从起始索引号提取字符串中指定数目的字符。
substring()    提取字符串中两个指定的索引号之间的字符。注意不包括结束下标
replace()    替换与正则表达式匹配的子串。
示例1：
    ename=ename.toUpperCase();
    alert(ename);
示例2：以下替换的时候，只替换第一个”-“,如果想要全部替换的话，的多次使用replace。想要全部替换也可以，但是需要使用正则表达式
    alert("1978-10-10".replace("-",",").replace("-",","));    

  

4.2、Number类型：

Number数据类型的取值：包括具体的值：13、1.0、NaN，Infinity
1）1,3.0,123
2）NaN
    NaN表示Not a Number，不是一个数字，但是NaN本身是一种Number数据类型，计算结果应该返回数字，但是最终结果不是数字的时候，
结果就是NaN
3）Infinity
    infinity汉语意思是无穷无限大；除数是0的时候，结果一定是Infinity

4.3）Boolean 包括具体的值：ture false，  

//boolean类型  
var boo=true;
//表示的是字符串true
var boo="true";

var a=true;
var b=true;
alert(a==b);//true
        
a="abc";
b="daf";
alert(a==b);//false
        
a=true;
b=1;
alert(a==b);//true 1和true是等量关系
alert(a === b);//false 1和ture虽然是等量关系，但是数据类型不同
        
a=true;
b=true;
alert(a === b);//true

4.4）Object 包括具体的值：new Object(),new Date(), new Employee(),null.....

    js也是面向对象的编程语言;js中自定义的函数，函数名本身就是类名;
js中定义类的2种方法：
1）方法一：
    function User(id,name){
        //属性
        //id，name都是user类的属性
        this.id=id;
        this.name=name;
        //方法
        this.shopping=function(){
            alert(this.name+"is shopping");
        };            
    }
        //创建对象，类似java
        var user=new User();
        user.shopping();
        
        user=new User(110,"zhangsan");
        user.shopping();

2）js中定义类的第二种方法：
    Employee=function(id,name){
        this.id=id;
        this.name=name;        
    }
    var e=new Employee(111,"lisi");
    alert(e.id+","+e.name);
    //给Employee动态扩展一个方法：
    Employee.prototype.work=function(){
            alert(this.name+"is working!");
    };
    //调用扩展的方法
    e.work();

4.5）Undefined 包括具体的值：underfined    
    Undefined数据类型只有一个值，这个值就是underfined；只声明没有给变量赋值或者手动赋值undefined，变量的值都是undefined；
5、运算符
5.1、typeof运算符：typeof运算符在程序运行阶段动态判断变量的数据类型

1）如何使用：typeof 变量名
2）typeof 运算符运算结果是以下六种结果之一：
"undefined"  "number" "string" "objcet" "boolean" "function"
备注：typeof运算结果是字符串类型
示例：
function sum(a,b){
    if((typeof a)!="number" || (typeof b)!="number"){
        alert("参数必须提供数字类型");
        return;
    }
        //执行到此处说明参数类型正常
        return a+b;    
    }

typeof(1): number
typeof(NaN): number
typeof(Number.MIN_VALUE): number
typeof(Infinity): number
typeof("123"): string
typeof(true): boolean
typeof(window): object
typeof(document): object
typeof(null): object
typeof(eval): function
typeof(Date): function
typeof(sss): undefined
typeof(undefined): undefined
详述：
a、常规数字和特殊的数字的 typeof 返回值为number
javaScript中特殊的数字类型包括：
Infinity               表示无穷大特殊值
NaN　　　　　　　　　　　　特殊的非数字值
Number.MAX_VALUE　　　　　可表示的最大数字
Number.MIN_VALUE　　　　　可表示的最小数字（与零最接近）
Number.NaN　　　　　 　　　特殊的非数字值
Number.POSITIVE_INFINITY　表示正无穷大的特殊值
Number.NEGATIVE_INFINITY  表 示负无穷大的特殊值
b、
对于字符串类型,typeof 返回的值是 string。比如typeof("123")返回的值是string。
对于布尔类型,typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。比如：typeof(sss)、typeof(undefined)都返回undefined。

5.2、JS中的= == ===的区别

=  赋值：
== 比较值是否相当
=== 比较值是否相同，同时要求数据类型也相同（更加严格）
underfined,null,NaN各自的数据类型不同：
alert(typeof underfined);//"underfined"
alert(typeof null);//"object"
alert(typeof NaN);//"number"

underfined 和null属于：值相等
alert(underfined==null);//true
alert(null==NaN);//false
alert(underfined==NaN);//false   

5.3void运算符

   void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值。
例如，从 HTML 的 <a> 元素调用 JavaScript 函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果
示例：
<a href="javascript:void(0);" onclick="alert('execute js code!')">
    只执行一段js代码，不进行页面跳转，还想保留超链接的样式，需要使用void运算符
</a>

6、常见函数、单引号和双引号的使用、流程控制
6.1、常见函数
1）isNaN()：该函数的作用是用来判断数据是否是一个数字，不是数字是true，是数字是false

 window.onload = function() {
        var iNumber=Number(prompt("输入一个5到100之间的数字",""));
        if(isNaN(iNumber)){
            document.write("请确认您的输入正确");
        }else if (iNumber>100||iNumber<5) {
            document.write("您的输入的数字不在5和100之间");
        }else {
            document.write("您的输入的数字是"+iNumber);
        }
}

2）parseInt()：该函数将非数字转换成数字，不保留小数位

    var price="100";
    price=parseInt(price);//将字符串price转换成Number类型的数字
    alert(price+1);//101
    price="3.25";
    price=parseInt(price);
    alert(price+1);//4 自动进行了四舍五入；

3）parseFloat():该函数可以将非数组转化为数字，但是保留小数

    price="3.95";
    price=parseFloat(price);
    alert(price);//3.95

6.2、单引号和双引号的使用

1）只使用字符的字符串，单引号和双引号没有区别
2）在单引号包括的字符串中可以直接用双引号，在双引号包括的字符串中可以直接用单引号
<input type="button" onclick="alert("1")">-------------------不正确
<input type="button" onclick="alert('1')">-------------------正确
3）如果在双引号包括的字符串中用双引号，需要用反斜杠转义，注意是""   ;同样在单引号包括的字符串中用单引号，也需要转义“”
var str = "abc"def"ghi"
用反斜杠来禁止解析双引号
4）如果要用反斜杠，则输入‘\’

6.3、流程控制
1）if else

window.onload = function() {
    var iNumber=Number(prompt("输入一个5到100之间的数字",""));
    if(isNaN(iNumber)){
        document.write("请确认您的输入正确");
    }else if (iNumber>100||iNumber<5) {
        document.write("您的输入的数字不在5和100之间");
    }else {
        document.write("您的输入的数字是"+iNumber);
    }
}

2）while

var i=isum=0;
while(i<=100){
    isum +=i;
    i++;
}
alert("isum-->"+isum);

7、数组的使用：初始化、赋值、遍历、数组中常用方法

1）静态初始化
    var myArray=[1,2,3,44];
2）动态初始化
    var myArray=new Array(5);//动态分配5个控件，没有手动赋值，系统默认赋值underfined
    遍历：
    for(var i=0;i<myArray.length;i++){
            alert("elt:"+myArray[i]);//undefined
    }
    赋值：[js数组中的数据类型不一定统一]
            myArray[0]=false;
            myArray[1]="abc";
            myArray[2]=1.0;
            myArray[3]=new Object();
3）遍历
    for(var i=0;i<myArray.length;i++){
            alert("elment:"+myArray[i]);
    }    
4）数组中常用方法    
a、join()：以特殊符号链接数组中的每一个元素，最后生成一个字符串
var a=[1,'abc',false,3.0];
var str=a.join("-");
b、reverse()：反转数组中的元素
a.reverse();
c、pop()：其取值为：数组最后边的元素， 且执行后数组最右边的元素会被删除
d、push()：添加元素
e、toString()：取值为：数组的每个元素，且各个元素用,  隔开

8、JS对日期的处理

//获取系统当前日期
var nowTime=new Date();
alert("系统当前日期-->"+nowTime);

//将系统时间转换成具有本地语言环境的时间
var strNowTime=nowTime.toLocaleString();
alert("本地语言环境的时间-->"+strNowTime);

//可以获取日期的年月日时分秒，自己添加格式：
var year=nowTime.getYear();
alert("year-->"+year);

//避免千年虫问题
year=nowTime.getFullYear();//这个方法更通用
alert("FullYear-->"+year);

//获取毫秒:getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
var time=nowTime.getTime();
alert(time);

9、js中的事件
9.1、onload事件
页面加载的时候就自动显示出当前系统的时间,并且每隔一秒钟刷新一下页面

<script type="text/javascript">
    //onload事件句柄需要编写到body标签中
    function displayTime(){
        //1.获取div元素
        var timeDiv=document.getElementById("timeDiv");
        //2.获取系统时间
        var nowTime=new Date();
        var strNowTime=nowTime.toLocaleString();
        //3.将系统时间设置到div元素中
        //innerHTML属性用来 设置或返回行的开始标签和结束标签之间的 HTML
        timeDiv.innerHTML=strNowTime;
    }
    //4.每隔1秒调用displayTime函数
    function start(){
        //设置每隔特定时间执行特定函数
        window.setInterval("displayTime()",1000);
    }
</script>

9.2、onclick事件(涉及div和span、innerHTML和innerText区别)

<html>
<head>
<title>使用js的DOM操作div和span元素</title>
<script type="text/javascript">
            /*
            1、innerHTML
            用法一：将后面的字符串当做HTML代码解释并且执行
                divElt.innerHTML="<font color='red'>hello World</font>"; 效果为将hello World字体颜色置为红色显示出来
            用法二：显示标记之间得所有内容，包括代码本身
                alert(divElt.innerHTML);效果为 <font color='red'>hello World</font>
            2、innerText:即使后面指定的字符串是HTML代码，也只是当做普通字符串来处理
                divElt.innerText="<font color='red'>测试</font>";效果为：<font color='red'>测试</font>
            3、div会独占一行，span被用来组合行内元素
            */
            function setDiv(){
                //获取div元素
                var divElt=document.getElementById("myDiv");
                //可以通过innerHTML属性设置元素中的HTML代码，也可以获取该元素中的HTML代码
                //divElt.innerHTML="<font color='red'>hello World</font>";
                divElt.innerText="<font color='red'>测试</font>";
                //获取div元素中的HTML代码
                alert(divElt.innerHTML);//当为：<div id="myDiv"></div> 结果为： <font color='red'>hello World</font>
            }
        </script>
</head>
<body id="body1">
    <input type="button" value="设置div中的文本" onclick="setDiv();" />
    <!-- <div id="myDiv"></div> -->
    <span id="myDiv"></span>
</body>
</html>

9.3、失去焦点事件onblur(涉及正则表达式简单应用)

<html>
    <head>
        <title>正则表达式</title>
        <script type="text/javascript">
            /*
                1、正则表达式是一门独立的学科，和任何编程语言无关，
                最初使用在医学方面，表示神经传输符号，在现代计算甲编程中也可以使用大量的正则表达式
                2、在编程中使用正则表达式最主要是用来做字符串模式匹配的。尤其在JavaScript中使用正则表达式居多
                3、在正则表达式中规定了一些特殊的符号，每一个符号都具有特殊的含义
                4、在实际开发中我们可以从网络中搜索相关的常用的正则表达式，直接使用
                但是使用前，需要进行反复的测试；javaScript程序员更应该研究在js中如何使用正则表达式而不是研究正则表达式该如何写
                5、常见的正则表达式符号：
                    ^    字符串的开始
                    &    字符串的结束
                    s    空白
                    +    出现1-N次
                    *    出现0-N次
                    {2,5} 出现[2-5]次    
                    ？    出现至少1次
                    [0-9] 0-9的数字任意出现一个
                    [0-9a-zA-Z]{3,}  0-9a-zA-Z 之前的字符至少出现3次
                    
                6、在js中怎么创建正则表达式对象？正则表达式对象中那个方法最常用？
                    创建正则表达式对象有两种方式:
                        第一种方式：【常用】
                            var regexp=/正则表达式/flag;
                        第二种方式：
                            var regexp=new RegExp("正则表达式","flag");    
                            
                        注：flag可选值：i、g、m
                                i：忽略大小写
                                g:当前行所有数据
                                m:支持多行搜索
                                i,g,m    可以合并使用
                    正则表达式对象中有一个很重要的方法：叫做test
                        语法格式：
                            var regexp=/正则表达式/;
                            var retValue=regexp.test(字符串);
                            retValue的值可能是true;true表示正则表达式符合正则表达式
                            retValue的值也可能是false;false表示正则表达式不符合正则表达式
                            
            
            */
            function checkEmail(email){
                //这个也是重点：
                var reg = new RegExp("^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式对邮箱地址格式验证
                alert(email);
                var ok=reg.test(email);//正则表达式有一个test()方法
                var emailError=document.getElementById("emailError");
                if(ok){
                    emailError.innerHTML="";
                }else{
                    emailError.innerHTML="<font color='red'>邮箱地址格式错误</font>";
                }
                
            }
        </script>
    </head>
    <body>
        邮箱地址<input type="text" name="email" onblur="checkEmail(this.value);" />
        <span id="emailError"></span>
    </body>
</html>

9.4、获取焦点事件onfocus(登录表单验证)

<!DOCTYPE html>
<html>
  <head>
    <title>表单验证.html</title>
  </head>
  <body>
    <script type="text/javascript">
        /*
            验证功能描述：
                1、用户名不能为空
                2、用户名长度6-14
                3、密码不能为空
                4、密码至少6位
                5、密码和确认密码必须一致
        */
        String.prototype.trim=function(){
            return this.replace(/^s+/,"").replace(/s+&/,"");
        };
        function checkName(username){
            var ok=false;
            username=username.trim();//去除前后的空白
            var nameError=document.getElementById("nameError");
            if(username==""){
                nameError.innerHTML="<font color='red'>用户名不能为空</font>";
                ok=false;
            }else if(username.length<6 || username.length>14){
                nameError.innerHTML="<font color='red'>用户名长度必须6-14</font>";
                ok=false;
            }else{
                nameError.innerHTML="";
                ok=true;
            }
            return ok;
        }
        function clearNameError(){
            var nameError=document.getElementById("nameError");
            nameError.innerHTML="";
        }
        function checkUserpswd(){
            var ok=false;
            var pswdError=document.getElementById("pswdError");
            if(pswd==""){
                pswdError.innerHTML="<font color='red'>密码不能为空</font>";
                ok=false;
            }else if(pswd.length<6){
                pswdError.innerHTML="<font color='red'>密码不能少于6位</font>"
                ok=false;
            }else{
                pswdError.innerHTML="";
                ok=true;
            }
            return ok;
        }
        function clearPswdError(){
            var pswdError =document.getElementById("pswdError");
            pswdError.innerHTML="";
        }
        function isSame(){
            var ok=false;
            //获取密码
            var userpswd=document.getElementById("userpswd").value;
            //获取确认密码
            var confirmpswd=document.getElementById("confirmpswd").value;
            //比较
            var confirmPswdError=document.getElementById("confirmPswdError");
            if(userpswd != confirmpswd){
                confirmPswdError.innerHTML("<font color='red'>密码和确认密码不一致"</font>);
                ok=false;
            }else{
                pswdError.innerHTML="";
                ok=true;
            }
            return ok;
        }
        function clearSameError(){
            var confirmPswdError=document.getElementById("confirmPswdError");
            pswdError.innerHTML="";
        }
        function checkAll(){
            var username=document.getElementById("username").value;
            var userpswd=document.getElementById("userpswd").value
            if(checkName(username) && checkUserpswd(userpswd) && isSame()){
                document.forms["userForm"].action="http://localhost:8080/oa/register";
                document.forms["userForm"].method="get";
                document.forms["userForm"].submit();
            }
        }
    </script>
    <form name="userForm">
        用户名
            <input
                type="text"
                id="username"
                name="username"
                onblur="checkName(this.value);"
                onfocus="clearNameError();"
                />
            <span id="nameError"></span>
            <br>
        密码    
            <input
                type="password"
                id="userpswd"
                name="userpswd"
                onblur="checkUserpswd(this.value);"
                onfocus="clearPswdError();"/>
            <br>
            <span id="pswdError"></span>
        确认密码    
            <input
                type="password"
                id="confirmpswd"
                name="confirmpswd"
                onblur="isSame();"
                onfocus="clearSameError()"/>
            <span id="confirmPswdError"></span>
            <br>
            <input type="button" value="注册" onclick="checkAll()">
    </form>
  </body>
</html>

9.5、表单提交事件onsubmit

<html>
    <head>
        <title>表单验证</title>
        <!--
            1、表单验证的时候，尽量不要在点击注册按钮的时候才验证，最好用户填写一个
            验证一个，这样设计比较人性化。
            2、表单提交事件：submit,事件句柄：onsubmit,这个事件句柄需要编写到form标签中    
                <form onsubmit="return true;">提交表单
                <form onsubmit="return true;">不提交表单
        -->
    </head>
    <body>
        <script type="text/javascript">
            var usernameOk=false;
            function checkUsername(username){
                //alert(username);
                //验证用户名不能为空
                //if(username.length==0){}
                var usernameErrorMsg=document.getElementById("usernameErrorMsg");
            }
            function checkUserName(username){
                var usernameErrorMsg=document.getElementById("usernameErrorMsg");
                if(username=="usernameErrorMsg"){
                    usernameErrorMsg.innerHTML="<font color='red'>用户名不能为空</font>";
                }else if(username.lenght<6 || username.length>14){
                    usernameErrorMsg.innerHTML="<font color='red'>用户名长度必须在[6-14]之间</font>";
                }esle{
                    usernameErrorMsg.innerHTML="";
                    usernameOk=ture;
                }
            }
            function cleckNameError(){
                    var usernameErrorMsg=document.getElementById("usernameErrorMsg");
                    usernameErrorMsg.innerHTML="";
            }
            function checkAll(){
                return false;
            }
        </script>
        <form
            name="username"
            method="get"
            action="http://localhost:8080"
            onsubmit="return checkAll();">
            用户名
                <input
                type="text"  
                name="username"
                onblur="checkUserName(this.value);"
                onfocus="cleckNameError();"/>
                <!--
                    其中的this代表文本框对象，
                -->
                <span id="usernameErrorMsg"></span><br>
            <input type="submit" value="注册" />
        </form>
    </body>
</html>

10、js中的DOM对象和BOM对象
10.1、DOM对象：创建元素，并追加元素

<html>
  <head>
    <title>js中通过DOM创建元素，并追加元素</title>
    <script type="text/javascript">
        function addElt(){
            //alert("test");
            //向div节点中追加一个子节点font
            //1、获取div节点
            var myDiv=document.getElementById("myDiv");
            //2、创建font节点
            var fontElt=document.createElement("font");//重点方法
            fontElt.innerHTML="测试";
            fontElt.color="red";
            //3、将font节点追加到div节点中
            myDiv.appendChild(fontElt);//重点方法
        }
    </script>
  </head>
  <body>
      <input type="button" value="给div添加font标签" onclick="addElt();" />
      <div id="myDiv">
      </div>
  </body>
</html>

document.location.href="http://www.baidu.com";
document.location="http://www.baidu.com";

10.2、BOM对象：window是BOM对象(Browser Object Model)，代表整个浏览器窗口

BOM对象：window是BOM对象(Browser Object Model)，代表整个浏览器窗口
window对象中的函数：eval()、open()、setInterval()、window.alert()、window.confirm()、window.open()
window.location.href="http://www.baidu.com"
window.location="http://www.baidu.com"

1）eval函数

<!DOCTYPE html>
<html>
  <head>
    <title>eval函数</title>
    <script type="text/javascript">
        //eval函数的作用：将普通字符串当做js代码解释执行
        window.eval("var i=100;")
        //以上的程序等同于 var i=100;
        alert(i);
        /*
           重点：
               java程序连接数据库之后，查询数据然后拼接成一个json格式的字符串发送给浏览器，浏览器只是接受到一个普通的json格式的字符串，然后在js中
               使用eval函数，将json格式的字符串转换成json对象
        */
        var javaSendStr="var o={"usercode":110,"username":"zhangsan"};";
        window.eval(javaSendStr);
        alert(o.usercode+","+o.username);
    </script>
  </head>
  <body>
  </body>
</html>

API地址： https://www.w3cschool.cn/javascript/js-window.html