Day03.JavaScript

  1. 总体知识梳理:

 

2.基本概念:

 

3.引入方式:

 

4.基本语法:

 

5.基本操作:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        

    </head>

    <body>

        <div id="disa"><a>jfjfjfjfjfjfj</a></div>

        <!--

    id:值是唯一的,类似于人的身份证号。实际工作id是程序员用的

    

-->

<input type="text" id="inputs" value="xq" />

    </body>

    <script>

            //var objdiv = document.getElementById("disa");//通过id得到元素对象

            

            objdiv.innerHTML=<a href="#">6666</a>;

            //向相应的开始标签和结束标签中间插入内容

            //插入的内容包括标签,标签被浏览器解释执行,文本直接展示,有值就进行覆盖,无值添加值

            //var context = objdiv.innerHTML;

            //alert(context);

            

            var inputobj = document.getElementById("inputs");

            //var invalue = inputobj.value;//获取表单标签中的值

        ///    alert(invalue);

            

            inputobj.value = "123";

            //alert(invalue);

            

            

        </script>

</html>

 

 

6.函数:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function add(){

                //函数体

                alert(1);

            }

            

            function add(a,b){

                return a+b;

            }

            var sum = add(4,6);

            alert(sum);

            

        </script>

    </head>

    <body>

    </body>

</html>

 

7.事件:

代码:

01.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function fun(){

                alert(123);

            }

        </script>

    </head>

    <body>

        <-- onclick事件,当点击button按钮后执行onclick="fun()"中的fun()方法

-->

<input type="button" value="展示" onclick="fun()" />

 

        <input type="text" value="展示" onblur="fun()"/>

    </body>

</html>

02.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function fun(){

                var val = document.getElementById("inputs").value;

                alert(val);

            }

        </script>

    </head>

    <!--页面加载完成之后执行onload="fun()"中的fun()方法-->

    <body onload="fun()">

        <input type="text" id="inputs" value="xq" />

    </body>

</html>

 

8.定时器:

代码:

01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function fun(){

                setTimeout("fun2()",2000); //定时器,指定时间后去做某事

                

            }

            function fun2(){

                alert(2);

            }

            function fun1(){

                setInterval("fun2()",2000);//周期性调用

                

            }

            function fun2(){

                alert(3);

            }

        </script>

    </head>

    <body>

        <input type="button" value="点击" onclick="fun()" />

<input type="button" value="点击" onclick="fun1()" />

    </body>

</html>

02.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

/*            var t;

            function fun(){

                alert("ok");

                t=setTimeout("fun()",3000);//定时对象

                

            }

            function stopfun(){

                clearTimeout(t);//清除定时任务

            }*/

            

            var t;

            function fun(){

                t=setInterval("fun2()",3000);

            }

            function fun2(){

                alert(4);

            }

            function stopfun(){

                clearInterval(t);//清除定时任务

            }

            

        </script>

    </head>

    <body>

        <input type="button" value="点击" onclick="fun()" />

        <input type="button" value="销毁定时任务" onclick="stopfun()" />

    </body>

</html>

 

9.BOM简介:

代码:

01.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            //alert(0311);

            var flag = confirm("你确定要删除吗?");

            alert(flag);

            

            var val = prompt("请输入:","0311");

            alert(val);

            

 

            var str = "alert(3)";

            eval(str);

        </script>

    </head>

    <body>

    </body>

</html>

02.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function fun(){

                location.href="success.html";

                

            }

        </script>

    </head>

    <body>

        <input type="button" value="跳转" onclick="fun()" />

    </body>

</html>

小温

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: