菜鸟学习第二十二天JavaScript深入，

1.JavaScript

1.javascript是一种解释性语言，采用弱类型变量检查变量在使用前不需要声明，javascript采用动态绑定

2.java是编译型语言，采用强类型变量检查变量使用前必须声明，java采用静态编译

3.几种格式：

1）在body中，直接执行

<script language="JavaScript">
    document.write("hello world")
</script>

2）在body中，相比于第一种，现在推荐使用第二种

<script type="text/javascript">
    document.write("hello world1")
</script>

3）hello.js为我们指定的外部文件

<script src="hello.js">
    document.write("hello world2")
</script>

4.使用javascript协议

<a href="JavaScript:alert('hello world2')">请单击</a><br>
<a href="#" onclick="alert('hello world3')">请单击1</a><br>//#代表这个链接没有什么效果，单击链接的时候进行javascript检查
<a href="JavaScript://" onclick="alert('hello world')">请单击</a><br

5.变量声明：var，如果在函数内部变量不加var,那么它也是全局变量。

6.局部变量，在函数内部声明，作用域为函数。全局变量在函数外声明，可在整个脚本中被使用，可在不同的窗口中互相引用（指定窗口名）。

7.JavaScript语句

1）with语句：（对象操作语句），为一段程序建立默认对象，格式：with(<对象>){<语句组>}

<script type="text/javascript">
    with (document) {
        write("with示例:");
        write("<ol>");
        write("<li>hello</li>");
        write("<li>world</li>");
        write("</ol>");

    }
</script><br>

2）for...in:重复执行遍历指定对象的所有属性，格式：for(变量in对象){<语句组>}

<script type="text/javascript">
    function persion(name,sex) { //这个可以看成一个构造函数，name,sex前不要加var，因为这个是函数的参数
        this.name=name;
        this.sex=sex;
    }
    function showProperty(obj,objString) {
        var str="";
        for (var i in obj)
        {
            str+=objString+"."+i+"="+obj[i]+"<br>";
        }
     return str;
    }
    var obj=new persion("彭于晏","男");//建立对象实例
    document.writeln(showProperty(obj,"person"));
</script><br>

8.对象

1）日期对象：

格式：日期对象名称=new Date([日期参数])         

日期参数：1.省略（常用）2.英文-数值格式：月（），日，公元年 [时：分：秒] 3.数值格式：公元年，月，日，[时，分，秒]

<script type="text/javascript">
    var date=new Date();//如果没有参数，不加括号也是对的
    var day=date.getDay();
//因为getDay（）如果是星期天返回的是0，所以进行判断
    if (0==day)
    {
        day="日"
    }
//getYear返回的是减去1900的年份，所以我们要加上，getMonth返回的是0-11，所以+1
    document.writeln("现在时刻"+(date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+"星期"+
        day+"  "+date.getHours()+":"+date.getMinutes()+";"+date.getSeconds()+":"
    )

</script>

2）数组对象：

建立数组对象：

格式1：数组对象名称=new Array([元素个数])

格式2：数组对象名称=new Array([元素1][，元素2.元素3，。。。])

格式3：数组对象名称=([元素1]，[元素2，元素3，。。。])

使用push（）；方法为数组增加元素

length();获取数组长度

join([分隔符])；数组元素组合为字符串，并用分隔符分隔（默认，分隔）

toString（）；字符串形式也是用，隔开

reverse（）；数组反转

valueOf（）；返回数组值

3）二维数组

var demo=new Array[3];
demo[0]=new Array("demo0",0);
demo[1]=new Array("demo1",1);
demo[2]=new Array("demo2",2);
for（var i;i<demo.length();i++）
{
        for（var j=0;j<demo[i].length;j++）

          {
              document.write("demo["+i+"]["+j+"]"+demo[i][j]+"<br>");

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

 4)字符串对象：

创建：

字符串对象名称=new String(字符串常量)

字符串变量名称=“字符串常量”

属性：字符串对象名称.属性

方法：字符串对象名称.方法

5）自定义对象

1.构造函数定义对象类型，建立对象的实例

<script type="text/javascript">
    function persion(name,age) {
        this.name=name;
        this.age=age;
        this.eat=eat;//关键在于这个eat是什么，如果是方法，那么就是这个对象的方法，如果是属性，那么就是这个对象的属性

    }
    function eat() {
        document.write("eat"+"<br>")
        
    }
    var persion1=new persion("zhangsan",20);
    var persion2=new persion("lisi",22);
    var persion3=new persion("wangwu",23);
    with (document) {
        write(persion1.name+":"+persion1.age+"<br>");
        write(persion2.name+":"+persion2.age+"<br>");
        write(persion3.name+":"+persion3.age+"<br>")

    }
</script>

6)事件处理程序：

1.浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。

2.事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理的过程。

function mOver(object)
{
object.color="red";
}
function mOut(object)
{
object.color="blue";
}

<font style="cursor:hand" 
onclick="window.location.href='www.baidu.com'"
onmouseover="mOver(this)" onmouseout="mOut(this)"//onmouseover为鼠标放上去事件，onmouseout为鼠标离开事件，this表示当前font元素所对应的对象，然后作为参数调用方法，所以调用了font对象的color，并设置了值为red。
>
欢迎访问

</font>

7）定时器

1.setTomeout();用于指定在一段特定的时间后执行某段程序，格式：[定时器对象名=]setTimeout("<表达式>"，毫秒)：执行表达式一次

2.setInterval();用于重复执行表达式,直至窗口，框架被关闭或执行clearInterva（）终止定时器：[定时器对象名=]setInterval("<表达式>"，毫秒)。表达式也可以是方法比如function中的方法

3.innerHTML:获取元素中的所有HTML文本

8）JavaScript内置对象

1）文件对象

2）锚点对象

3）链接对象

4）框架对象

5）表单对象

6）位置对象

9)窗口对象

<script type="text/javascript">
    <!--confirm弹出窗口不把窗口关闭就没法操作后面的,返回值觉得程序后续流程-->
    if (confirm("你想继续吗？"))
    {
        window.location.href="http://www.baidu.com";

    }
    else
    {
        alert("bye");
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkPassword(object) {
            if (object.value.length<=4)//当前元素值的长度
            {
                alert("密码长度过短");
                object.focus();//鼠标焦点重新定位到object元素上
                object.select();//重新被选中
            }
        }
    </script>
</head>
<body>
<!--onblur是指鼠标焦点离开，this代表当前元素对象-->
密码：<input type="password" onblur="checkPassword(this)">

</body>
</html>

10）屏幕对象

screen.属性

11）事件对象

<body>
<!--onmousedown绑定方法getEvent不需要加（）,还有一种绑定事件方法就是给控件添加-->
<script type="text/javascript">
    function getEvent(event)
    {
        alert("事件类型："+event.type)
    }
    document.write("单击、、");
    document.onmousedown=getEvent;
</script>
</body>

 这种方式必须掌握：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<!--如果body没有指定onload，页面加载就触发事件，那么script必须放在后面，因为页面加载从上到下，如果放在上面button1还不存在-->
<body>
<input type="button" id="button1" value="button1">
<script type="text/javascript">
    var bt=document.getElementById("button1");
    bt.onclick=bt1click;
    function bt1click() {
        alert("按钮被点击")
    }
</script>
</body>
</html>

12）历史对象

<body>
<a href="#" onclick="history.back();">返回</a>
<!--如果浏览器不兼容使用下面的方法-->
<!--<a href="#" onclick="window.history.back(-1);return false;">返回</a>-->
</body>

<body>
<a href="js5.html">单击</a>

</body>

12)位置对象location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="setInterval('countto()',1000)">
<script type="text/javascript">
    var sec=5;
    setTimeout(countto,3000);
    function countto() {
        if (sec>0)
        {
            document.getElementById("num").innerHTML=sec--;
        } else
            {
                location.href="http://www.baidu.com";
            }
    }

</script>
5秒后前往<br>
<h1 id="num" size="7">5</h1>
</body>
</html>

13)链接对象：子串。link(属性)

document.links.length:获取当前页面链接对象的集合

14）关于ip地址效果演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function movenext(object,index) {
            if (object.value.length==4)
            {
                document.forms[0].elements[index+1].focus();

            }



        }
        function showresult() {
            var f=document.forms[0];
            var result="";
            for (var i=0;i<4;i++)
            {
                if (i<3)
                {
                    result+=f.elements[i].value+".";
                }
                else
                {
                    result+=f.elements[i].value;
                }
            }
            alert(result);
        }
    </script>
</head>
<body onload="document.forms[0].elements[0].focus();">
<form>
    <input type="text" size="3" maxlength="4" onkeyup="movenext(this,0)">-
    <input type="text" size="3" maxlength="4" onkeyup="movenext(this,1)">-
    <input type="text" size="3" maxlength="4" onkeyup="movenext(this,2)">-
    <input type="text" size="3" maxlength="4" onkeyup="movenext(this,3)">
    <input type="button" value="显示" onclick="showresult();">
</form>

</body>
</html>

14）Cookie对象

格式：document.cookie="关键字=值[|;expires=有效日期][;...]"

有效日期格式：Wdy，DD-Mon-YY HH:MM:SS GMT

Wdy/Mon：英文星期/月份

还包含path，domain，secure属性

<script type="text/javascript">
    var today=new Date();
    var expireDay=new Date();
    var msperMonth=24*60*60*1000*31;
    expireDay.setTime(today.getTime()+msperMonth);//一个月之后过期
    document.cookie="name=zhangsan;expires="+expireDay.toGMTString();
    document.writeln("cookie已经写到硬盘上了");
    document.writeln("内容是："+document.cookie);
    document.writeln("有效日期是：");
    document.writeln(expireDay.toGMTString());

</script>

有两种cookie，一种是持久性cookie，会被存储到客户端的硬盘上，一种是会话cookie，不会被存储到客户端的硬盘上，而是放在浏览器进程所处的内存中，当浏览器关闭，则该会话cookie就销毁了

15）根据提交介于4-15的数字来动态创建表格，并且包含全选和隐藏显示表格功能

begin.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript">

    function result() {
        var mytext=document.getElementsByName("text1")[0];
        if (mytext.value.length<1)
        {
            alert("输入不能为空");
            mytext.focus();
            return false;
        } 
        
        for (var i=0;i<mytext.value.length;i++)
        {
            var f="0123456789";  
            if (f.indexOf(mytext.value.charAt(i))==-1)
            {
                alert("输入内容必须为数字");
                return false;
            }
        }
        if (mytext.value<4||mytext.value>15)
        {
            alert("超出范围！");
            mytext.value=10;
            return false;
        }
        return true;
    }
</script>
<body>
<form name="form1" action="end.jsp" onsubmit="return result();">
    请输入4-15数字：<input type="text" name="text1">
    <input type="submit" value="submit">
</form>

</body>
</html>

end.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">

        function clickall() {
            var c=document.getElementsByName("all")[0];
            var click=document.getElementsByName("click");
            if (c.checked)
            {
                for (var i=0;i<click.length;i++){
                    click[i].checked=true;
                }

            }
            else
                {
                    for (var i=0;i<click.length;i++){
                        click[i].checked=false;
                    }
                }

        }
        function change() {
            with (document) {
                var m=getElementById("button1");
                var t=getElementById("table");
                if (m.value=="隐藏")
                {
                    t.style.display="none";//display的值为none表示不显示，block表示显示
                    m.value="展开";
                }
                else
                    {
                        t.style.display="block";
                        m.value="隐藏";
                    }
            }
            
        }
    </script>
</head>
<body>
<%int r=Integer.parseInt(request.getParameter("text1"));%>
<table border="1" align="center" width="60%">
    <tr>
        <td>
            <input type="checkbox" name="all" onclick="clickall()">全选
        </td>
        <td>
            <input type="button" value="隐藏" id="button1" onclick="change()">
        </td>
    </tr>
</table>
<table border="1" align="center" width="60%" id="table">
    <%for (int i=0;i<r;i++){%>
    <tr>
        <td>
            <input type="checkbox" name="click">
        </td>
        <td>
            <%=i%>
        </td>
    </tr>
<%}%>
</table>

</body>
</html>