关于JavaScript学习

： JavaScript初步

对于JavaScript的学习,初步.

1.在网页上弹出alert栏

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--内部结合-->
        <script>

标题

            //js代码,弹出alert栏
            alert("hello world..");
        </script>
    </head>
    <body>
    </body>
</html>

2.关于JavaScript函数的初步学习

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //定义了一个有返回值的函数
            function getsum(i,j)
            {
                return (i+j);
            }
            var sum = getsum(19,11);
            //弹出一个alert栏,展示所得到的和
            alert(sum);
            //********************
            //匿名函数的使用
            //匿名函数; 通常和事件配合起来使用(jq)
            var get1sum = function(i,j)
            {
                return (i+j);
            }
            var sum =get1sum(11,29);
            alert("总和是:"+sum);
        </script>
    </head>
    <body>
    </body>
</html>

3.一个简单的点击事件

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--- 确定事件; 点击,获得焦点....
        - 创建一个函数响应这个事件
-->
        <script>
            function sayHello(){
                alert("hello...");
            }
        </script>
    </head>
    <body>
        <!--点击事件,需要一个函数响应这个事件-->
        <!--通过设置一个按钮,实现点击时对应的函数,该函数通过弹出一个alert栏来显示按钮被点击了-->
        <input type="button" value="点我吧..." onclick="sayHello()"/>
    </body>
</html>

4.图片的切换

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        var i = 1;//定义全局变量
            function next()//该函数完成自加
            {
                i++;
                if(i>=5)//不能让图片的索引超出图片的数量
                {
                    i=1;
                }
                //getElementById 得到标记img的 id
                var obj = document.getElementById("imgId");
                obj.src = "image/"+i+".jpg";
            }

            function before()
            {
                i--;
                if(i==0)
                {
                    i=4
                }
                var obj = document.getElementById("imgId");
                obj.src = "image/"+i+".jpg";
            }
        </script>
    </head>
    <body>
        <img src="image/1.jpg" width="200px" id="imgId"/><br />
        <input type="button"value="上一张" onclick="before()"/>
        <input type="button"value="下一张" onclick="next()" />
    </body>
</html>

5.定时和延时

<html>
    <head>
        <meta charset="UTF-8">
        <title>
        </title>
        <script>
            function sayHello()
            {
                console.log("here is the page");
            }
            setInterval("sayHello()",2000);//定时调用函数,(不停的调用)
            setTimeout("sayHello()"2000);//延时调用函数,只调用一次~
        </script>
    </head>
    <body>
    </body>
</html>

6.判断输入栏是否为空


        <!--1.给注册按钮设置一个点击事件
    2.创建一个checkData()的函数响应这个事件
    3.在checkData()函数体里, 得到用户名输入框对象(document.getElementById("id名")), 得到用户名的值
    4.判断用户名是否为空-->
        <script>
            //创建一个checkData()的函数响应这个事件
            function checkData() {
                //得到用户名输入框对象(document.getElementById("id名"))
                var inputObj =  document.getElementById("usernameId");

                //得到用户名的值;
                var  value = inputObj.value;

                //判断用户名是否为空
                if(value == ""){
                    //用户名为空
                    alert("用户名不能为空!");
                    //不能提交
                    return false;   
                }
            }
        </script>

关于JavaScript学习

关于JavaScript学习

猜你喜欢