黑猴子的家：JavaWeb 之 Java Script

最新推荐文章于 2024-03-27 00:12:01 发布

黑猴子的家

最新推荐文章于 2024-03-27 00:12:01 发布

阅读量497

点赞数

本文链接：https://blog.csdn.net/qq_28652401/article/details/103523187

版权

1、Java Script 概述

（1）Why?

拨号上网Time:
网速很慢，数据提交到服务器端验证，体验很差
JavaScript横空出世，担当了浏览器端数据验证的重任，从此一发不可收拾
五彩缤纷的现在:
时至今日JavaScript已经不仅仅局限于表单验证，她还能为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

（2）What?

JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
只有当浏览器读取javaScript代码时，才进行解释、执行。所以查看HTML源文件就能查看JavaScript源代码。

2、Java Script 案例

3、Java Script 练习

4、Java Script Hello World 案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <!-- 1.JavaScript代码写在HTML中的script标签中 -->
    <script type="text/javascript">
        //2.借助window.onload事件在文档加载完成后执行程序
        window.onload = function() {
            //3.从文档中获取<button id="btnId">SayHello</button>标签对应的元素节点对象
            var btnEle = document.getElementById("btnId");
            //4.绑定单击事件响应函数
            //给按钮对象的单击事件属性赋值一个函数的引用
            btnEle.onclick = function() {
                //5.在事件的响应函数中弹出警告框
                window.alert("大数据专业");
            };
        };
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

5、Java Script 基本语法案例

（1）变量

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //01.使用var关键字声明变量，声明时不需要指定类型
    var a = 20;
    var b = 'abc';
    var c = true;
    alert(a+" "+b+" "+c);
    //02.变量在使用过程中可以接受不同类型的值
    a = "Hello";
    b = 230.53;
    c = ["good",true,20];
    alert(a+" "+b+" "+c);
</script>
</head>
<body>

</body>
</html>

（2）函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //01.声明函数使用function关键字，不需要指定返回值类型，形参也不需要指定类型
    function sum(a,b) {
        return a+b;
    }
    //02.调用函数：不检查实参的类型，个数
    var result = sum(5,10);
    alert(result);
    result = sum("Hello ","Tom");
    alert(result);
    result = sum("Hello ");
    alert(result);
</script>
</head>
<body>

</body>
</html>

（3）函数是对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用
    function sum(a,b) {
        return a+b;
    }
    alert(sum);
    var ref01 = sum;
    alert("ref01="+ref01);
    var ref02 = sum;
    alert("ref02="+ref01);
</script>
</head>
<body>

</body>
</html>

（4）回调函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //回调函数：声明后，不由自己调用，而是交给系统或其他函数执行的函数
    function callBack() {
        window.alert("I am call back!");
    }
    function call(fun) {
        fun();
    }
    window.callBack();
    call(callBack);
</script>
</head>
<body>

</body>
</html>

（5）this关键字

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //在JavaScript中，任何一个函数都是由对象调用的
    //在函数中可以通过this关键字引用调用这个函数的对象
    var obj01 = {
        name : "obj01 name",
        getName : showName
    };
    var obj02 = {
        name : "obj02 name",
        getName : showName
    };
    function showName() {
        alert(this.name);
    }
    //对象的属性指向了一个函数，所以也是函数的一个引用
    //函数的引用加上()就是执行引用的函数
    obj01.getName();
    obj02.getName();
</script>
</head>
<body>

</body>
</html>

（6）Object

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //在JavaScript中创建对象
    //1.new Object()
    var objByNew = new Object();
    objByNew.userName = "Tom2014";
    objByNew.password = "123456";
    alert(objByNew.userName+" "+objByNew.password);
    //2.JSON格式
    //{属性名01:属性值01,属性名02:属性值02,...}
    var objByJSON = {
            userName : "Jerry",
            password : "654321"
        };
    alert(objByJSON.userName+" "+objByJSON.password);
</script>
</head>
<body>

</body>
</html>

6、Java Script 事件案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    /*
    地雷                  事件监听和响应
    生产                  声明一个事件响应函数
    找一个埋设的位置        从文档中获取一个按钮对象
    埋设                  将响应函数绑定到按钮对象上
    触发引信爆炸          在浏览器捕获到用户对按钮的单击事件时执行响应函数
    */
    window.onload = function(){
        //1.从文档中获取按钮对象
        var btn = document.getElementById("btnId");
        //2.声明一个事件响应函数
        /* function myClick() {
            alert("Bom!");
        } */
        //3.将响应函数的引用赋值给按钮对象的onclick属性——绑定
        /* btn.onclick = myClick; */
        btn.onclick = function () {
            alert("Bom!~~~");
        }; 
    }
</script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

7、Java Script 加载方式案例

（1）load1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 写在HTML标签内，结构与行为耦合，不推荐 -->
    <button onclick="alert('hello~~~')">SayHello</button>
</body>
</html>

（2）load2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 写在script标签内：无法获取button -->
<script type="text/javascript">
    /*
    浏览器加载HTML文件时，是按照从上到下的顺序加载，
    如果遇到script标签，就停下来先执行script标签中的程序，
    执行完程序以后，再回过头来继续加载后面的HTML标签
    */
    //3.使用DOM API从文档中获取id="btnId"按钮对象
    var btn = document.getElementById("btnId");
    alert(btn);
    //4.给按钮对象绑定单击响应函数
    btn.onclick = function() {  
        //5.在响应函数中弹出Hello
        alert("Hello!~~~");
    };
</script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

（3）load3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
<!-- 写在body标签后面，能获取到button，但不符合习惯 -->
<!-- 
    类名：首字母大写，后面驼峰式命名
    变量和方法：首字母小写，后面驼峰式命名
    包：全部小写，单词用.分隔
 -->
<script type="text/javascript">
    //3.使用DOM API从文档中获取id="btnId"按钮对象
    var btn = document.getElementById("btnId");
    alert(btn);
    //4.给按钮对象绑定单击响应函数
    btn.onclick = function() {
        //5.在响应函数中弹出Hello
        alert("Hello!~~~");
    };
</script>
</html>

（4）load4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 使用window.onload -->
<script type="text/javascript">
    //在整个文档加载完成后执行这个函数
    function myPrograme() {
        var btn = document.getElementById("btnId");
        alert(btn);
        //4.给按钮对象绑定单击响应函数
        btn.onclick = function() {
            //5.在响应函数中弹出Hello
            alert("Hello!Success!~~~");
        };
    }
    //将myPrograme绑定到“文档加载完成”这个事件上
    //window代表当前浏览器窗口，它加载HTML文档完成后触发“文档加载完成”这个事件
    window.onload = myPrograme;
</script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

8、DOM

（1）dom.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style/css.css" />
        <script type="text/javascript">
            window.onload = function() {
                var btn01Ele = document.getElementById("btn01");
                btn01Ele.onclick = function() {
                    //查找北京这个城市
                    //<li id="bj">北京</li>
                    //查询元素时通常都是根据元素的特点进行获取
                    //在整个HTML文档中，id属性的值不能重复，否则只有第一个有效
                    //给元素节点对象的变量命名时，最好以Ele或Element结尾
                    var bjEle = document.getElementById("bj");
                    alert(bjEle.firstChild.nodeValue);
                    //<p><b>tt</b></p>
                };
                var btn02Ele = document.getElementById("btn02");
                btn02Ele.onclick = function() {
                    //查找全部城市、游戏和手机
                    var liEleArr = document.getElementsByTagName("li");
                    //alert(liEleArr.length);
                    for(var i = 0; i < liEleArr.length; i++) {
                        alert(liEleArr[i].firstChild.nodeValue);
                    }
                };
                var btn03Ele = document.getElementById("btn03");
                btn03Ele.onclick = function() {
                    //查找所有单选框
                    /* gender:
                    <input type="radio" name="gender" value="male"/>
                    Male
                    <input type="radio" name="gender" value="female"/> */
                    var genderEleArr = document.getElementsByName("gender");
                    alert(genderEleArr.length);
                };
                var btn04Ele = document.getElementById("btn04");
                btn04Ele.onclick = function(){
                    //读取文本框中的输入内容
                    var usernameEle = document.getElementById("username");
                    //读取属性值——元素对象.属性名
                    //文本框的输入内容可以通过value属性进行读写
                    alert(usernameEle.value);
                };
                var btn05Ele = document.getElementById("btn05");
                btn05Ele.onclick = function(){
                    //设置文本框中的输入内容
                    var usernameEle = document.getElementById("username");
                    //设置属性值——元素对象.属性名=新值
                    //文本框的输入内容可以通过value属性进行读写
                    usernameEle.value = "new value";
                };
                var btn06Ele = document.getElementById("btn06");
                btn06Ele.onclick = function() {
                    //读取北京这个城市的文本内容方式一
                    //文本节点对象和文本节点中的文本内容
                    //使用DOM标准中定义的API获取文本值
                    //1.获取文本节点父节点
                    //<li id="bj">北京</li>
                    var bjEle = document.getElementById("bj");
                    //2.调用父节点的 firstChild属性得到它的第一个子节点
                    //alert(bjEle.firstChild.nodeName);#text
                    var textNode = bjEle.firstChild;
                    //3.得到文本节点后再获取节点的值
                    var textContent = textNode.nodeValue;
                    alert("full:"+textContent);
                    //简化写法
                    alert("simple:"+bjEle.firstChild.nodeValue);
                };
                var btn07Ele = document.getElementById("btn07");
                btn07Ele.onclick = function() {
                    //读取北京这个城市的文本内容方式二
                    //1.获取文本节点父节点
                    //<li id="bj">北京</li>
                    var bjEle = document.getElementById("bj");
                    //使用时注意：这是一个属性，不是方法，不要在后面加()
                    //alert("innerHTML="+bjEle.innerHTML);
                    var cityEle = document.getElementById("city");
                    alert(cityEle.innerHTML);
                };
            };
        </script>
    </head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>
                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>
                <br>
                <br>
                <p>
                    你喜欢哪款单机游戏?
                </p>
                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>
                <br />
                <br />
                <p>
                    你手机的操作系统是?
                </p>
                <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
            </div>
            <div class="inner">
                gender:
                <input type="radio" name="gender" value="male"/>
                Male
                <input type="radio" name="gender" value="female"/>
                Female
                <br>
                <br>
                name:
                <input type="text" name="name" id="username" value="abcde"/>
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">查找北京这个城市</button></div>
            <div><button id="btn02">查找全部城市、游戏和手机</button></div>
            <div><button id="btn03">查找所有单选框</button></div>
            <div><button id="btn04">读取文本框中的输入内容</button></div>
            <div><button id="btn05">设置文本框中的输入内容</button></div>
            <div><button id="btn06">读取北京这个城市的文本内容方式一</button></div>
            <div><button id="btn07">读取北京这个城市的文本内容方式二</button></div>
        </div>
    </body>
</html>

（2）style.css

@CHARSET "UTF-8";
body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
button {
    width: 300px;
    margin-bottom: 10px;
}
#btnList {
    float:left;
}
#total{
    width: 450px;
    float:left;
}
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.inner li{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float:left;
}
.inner{
    width:400px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding: 10px;
    float: left;
}