Javaweb学习笔记day02--JavaScript

最新推荐文章于 2024-04-01 14:42:43 发布

Mr.W.code

最新推荐文章于 2024-04-01 14:42:43 发布

阅读量748

点赞数 1

分类专栏：笔记 sql java 文章标签： java 游戏游戏开发

本文链接：https://blog.csdn.net/Wynb1020/article/details/121603974

版权

笔记同时被 3 个专栏收录

70 篇文章 2 订阅

订阅专栏

java

37 篇文章 0 订阅

订阅专栏

sql

12 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript概述

概述
是一个脚本语言，直接被浏览器解析执行

发展史

1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN 公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

总结
JavaScript=ecmascript+bom+dom

ECMAScript之html结合

分类
1、内部结合
直接在html中编写js代码

		2、外部结合
			在javas文件中编写js代码，并ton过script标签引入
	
 **1、内部结合**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之html结合</title>
     <!--内部结合-->
    <script>
        console.log("helloworld");
    </script>
</head>
<body>
</body>
</html>

	**2、外部结合**

console.log("helloworld");------demo02.js"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之html结合</title>
    <!-- 外部结合   -->
    <script src="demo02.js"></script>
</head>
<body>

</body>
</html>

总结
内部链接用于自己的脚本代码
外部用于别人的脚本代码

ECMAScript之注释

单行注释：

//

多行注释：

/**/

ECMAScript之变量和常量

语法

 var 变量名 = 值;

 const 常量名 = 值;

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECMAScript之变量和常量</title>
		<script>
			//声明变量
			var num = 1;
			console.log("num = " + num);
			num = 250;
			console.log("num = " + num);
			
			//声明常量
			const num2 = 1;
			console.log("num2 = " + num2);
			num2 = 500;//不可给常量赋值
			console.log("num2 = " + num2);
		
		</script>
	</head>
	<body>
	</body>
</html>

ECMAScript之数据类型

强类型语言
- 定义变量的时候数据类型就已经确定，比如：java
弱类型语言
- 定义变量的时候数据类型可以不确定，比如：javascript
数据类型
- boolean
- null
- number
- string
- 对象
- undefined : 变量类型未定义

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之数据类型</title>
    <script>
     /*   - boolean
        - null
        - number
        - string
        - 对象
        - undefined : 变量类型未定义*/
        // var a;
     var flag =true;
     console.log(typeof (flag));
     //null
     var obj = null;
     console.log(typeof (obj))
     //number
     var num =1;
     console.log(typeof(num));
    //string
     var str ="hello";
     console.log(typeof(str));
     //对象
     var date = new Date();
     console.log(date);
     //undefined
     var a;
     console.log(typeof (a));
    </script>
</head>
<body>

</body>
</html>

ECMAScript之运算符

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之运算符</title>
  <script>
    var num1 =1;
    var num2=1;
    //只比较内容
    console.log(num1 == num2);
    //既比较类型有比较内容
    console.log(num1 === num2);
  </script>
</head>

<body>

</body>
</html>

ECMAScript之流程控制

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之流程控制</title>
    <script>
        100.
        for (var i = 1; i < 100; i++) {
            console.log(i);
        }
    </script>
</head>
<body>

</body>
</html>

ECMAScript之函数

概述

 函数类似于就AV中的方法 ，可以将一些代码进行抽取，达到复用的效果

语法

 function 函数名 （形参列表） 	{
 函数体；
 }

 
 //匿名函数
 var 方法名 =function （形参列表）{
 	函数体;
 }

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript之函数</title>
  <script>
    //方式一
    function add(num1,num2,num3) {
      console.log("num1 ="+num1);
      console.log("num2 ="+num2);
      console.log("num3 ="+num3);

    }
    //方式二
    var add2 =function (num1,num2,num3) {
      console.log("num1 ="+num1);
      console.log("num2 ="+num2);
      console.log("num3 ="+num3);

    }
  </script>
</head>
<body>

</body>
</html>

注意事项

 匿名函数通常是事件监听中使用的。		
 函数调用时有三个形参，调用时可以不传递三个实参

事件概述

概述
- 通过用户的一些行为触发javascript的函数
名词解释
- 事件源 : 事件发生的源头
- 监听器 : javascript函数，用于监听事件发生的组件
- 事件 : 能够触发监听器的一件事
- 事件绑定 : 将事件源和监听器关联起来

事件绑定

概述
- 将事件源和监听器关联起来
分类
- ①使用事件属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
  <script>

      /**
       * 监听器
       */
      function fn1() {
      console.log("点尼玛！！！")
    }

  </script>
</head>
<body>
<!--   事件源   -->
<!--onclick ="fn1()":事件绑定-->
<button  onclick="fn1()">
  点击就送屠龙宝刀!!!!
</button>
</body>
</html>

②使用dom分配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
<!--  使用dom分配-->

</head>
<body>
  <button id="btn">
    点我就送!!!
  </button>
</body>

<script>

  //获取id=btn的按钮对象
  var btnEle =document.getElementById("btn");
  btnEle.onclick =function () {
    console.log("彩笔送去吧！！！！")

  }
</script>
</html>

onload事件

概述
- 监听元素加载完成
需求
- 监听页面加载完成,并给按钮设置点击事件
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
  <script>
    //监听页面加载完成
    window.onload = function () {
      console.log("页面加载完成");
      var btnEle = document.getElementById("btn");
      btnEle.onclick = function () {
        console.log("求我啊~~~");
      }
    }

  </script>
</head>
<body>
<button id="btn">
  速速救老子！！！
</button>
</body>
</html>

焦点事件

概述
- 监听组件获取焦点(onfocus)、失去焦点(onblur)
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
  <script type="text/javascript">
    function fn1(){
      console.log("1获取焦点");
    }

    function fn2(){
      console.log("1失去焦点");
    }

    function fn3(){
      console.log("2获取焦点");
    }

    function fn4(){
      console.log("2失去焦点");
    }
  </script>
</head>
<body>
<input type="text" onfocus="fn1()" onblur="fn2()"/><br/>

<input type="text" onfocus="fn3()" onblur="fn4()"/><br/>
</body>
</html>

onchange事件

概述
- 监听内容改变
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
  <script>
    function fn1() {
      console.log("内容发生改变了！");
    }
    
  </script>
</head>
<body>
<input type="text"  onchange="fn1()"/>

</body>
</html>

onsubmit事件

概述
- 监听表单提交
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <script>
        function fn1(){
            console.log()
            var flag = false;
            if (flag) {
                //如果输入内容合法，允许表单提交
                return true;
            }else {
                //如果输入内容合法，禁止提交
                return false;
            }
        }
    </script>
</head>
<body>
        < onsubmit ="return fn1()">
            消息：<input type="text"name="msg">
            <button type="submit">发送</button>
        </form>   
</body>
</html>

dom介绍

概述

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。
让开发人员通过代码的方式对页面上的元素进行增删改查
dom树
总结
dom树一般有三种类型的节点构成：元素对象、属性节点对象、文本节点对象

Element元素的获取操作

常用方法

方法	说明
getElementByld	根据id属性值获取元素对象
getElementsByTagName	根据标签名称获取多个元素对象
getElementsByName	根据name属性值获取多个元素对象
getElementsByClassName	根据class属性值获取多个元素对象
parentElement	获取父元素

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Element元素的获取操作</title>
		
	</head>
	<body>
		<span id="spn" name="span1" class="spanClass">这是一个span</span><br />
		
		<button onclick="fn1()">getElementById</button><br />
		<button onclick="fn2()">getElementsByTagName</button><br />
		<button onclick="fn3()">getElementsByName</button><br />
		<button onclick="fn4()">getElementsByClassName</button><br />
		<button onclick="fn5()">parent</button><br />
	</body>
	<script>
	
		function fn1(){
			var spanEle = document.getElementById("spn");
			console.log(spanEle);
		}
		
		function fn2(){
			var spanEle = document.getElementsByTagName("span")[0];
			console.log(spanEle);
		}
		
		function fn3(){
			var spanEle = document.getElementsByName("span1")[0];
			console.log(spanEle);
		}
		
		function fn4(){
			var spanEle = document.getElementsByClassName("spanClass")[0];
			console.log(spanEle);
		}
		
		function fn5(){
			var spanEle = document.getElementsByClassName("spanClass")[0];
			var bodyEle = spanEle.parentElement;
			console.log(bodyEle);
		}
	
	</script>
</html>

Element元素的增删查改

常用方法

方法	说明
getElementByld	根据id属性值获取元素对象
getElementsByTagName	根据标签名称获取多个元素对象
getElementsByName	根据name属性值获取多个元素对象
getElementsByClassName	根据class属性值获取多个元素对象
parentElement	获取父元素

需求

给下拉选择框添加一个荆州选项
将下拉选择框中的最后一个选项删除
将下拉选择框中的最后一个选项修改为宜昌

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Element元素的增删改操作</title>
	</head>
	<body>
		<select>
			
			<option>武汉市</option>
			<option>孝感市</option>
			
		</select>
		
		<button onclick="fn1()">添加</button>
		<button onclick="fn2()">删除</button>
		
		<button onclick="fn3()">修改</button>
	</body>
	<script>
		/**
		 * 给下拉选择框添加一个荆州选项 <option>荆州市</option>
		 */
		function fn1(){
			//1.创建option对象 <option></option>
			var optionEle = document.createElement("option");
			//2.创建文本对象 荆州市
			var jingzhou = document.createTextNode("荆州市");
			//3.将荆州市添加到option中 <option>荆州市</option>
			optionEle.appendChild(jingzhou);
			//4.获取select对象
			var selectEle = document.getElementsByTagName("select")[0];
			//5,将<option>荆州市</option>添加到select中
			selectEle.appendChild(optionEle);
		}
		
		
		/**
		 * 将下拉选择框中的最后一个选项删除
		 */
		function fn2(){
			//1.获取所有的option对象
			var optionEles = document.getElementsByTagName("option");
			//2.获取所有的option的长度
			var length = optionEles.length;
			//3.获取最后一个option对象
			var lastOptionEle = optionEles[length-1];
			//4,获取select对象
			var selectEle = document.getElementsByTagName("select")[0];
			//5,将最后一个option对象从select对象中删除
			selectEle.removeChild(lastOptionEle);
		}
		
		
		/**
		 * 将下拉选择框中的最后一个选项修改为宜昌
		 */
		function fn3(){
			//1.获取最后一个option对象
			var optionEles  =  document.getElementsByTagName("option");
			var lastOptionEle = optionEles[optionEles.length - 1];
			//2.准备<option>宜昌市</option>
			var newOptionEle = document.createElement("option");
			newOptionEle.appendChild(document.createTextNode("宜昌市"));
			//3.将最后一个option对象替换为<option>宜昌市</option>
			var selectEle = document.getElementsByTagName("select")[0];
			selectEle.replaceChild(newOptionEle,lastOptionEle);
		}
		
		
		
	
	</script>
</html>

Attribute属性操作

常用方法

方法	说明
setAtrribute	设置属性
getAtrribute	获取属性
removeAtrribute	移除属性
style	设置css样式

需求
- 给a标签设置href属性为"http://www.baidu.com"
- 获取a标签的href属性
- 移除a标签的href属性
- 设置a标签中的文本内容的样式：color = “blue”、fontsize=“100px”、fontFamily = “楷体”
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Attribute属性的操作</title>
	</head>
	<body>
		<a>百度一下</a><br />
		<button onclick="fn1()">设置属性</button>
		<button onclick="fn2()">获取属性</button>
		<button onclick="fn3()">移除属性</button>
		<button onclick="fn4()">设置样式</button>
	</body>
	<script>
		/**
		 * 给a标签设置href属性为"http://www.baidu.com"
		 */
		function fn1(){
			//1.获取a对象
			var aEle = document.getElementsByTagName("a")[0];
			//2.设置href属性
			aEle.setAttribute("href","http://www.baidu.com");
		}
		
		
		/**
		 * 获取a标签的href属性
		 */
		function fn2(){
			//1.获取a对象
			var aEle = document.getElementsByTagName("a")[0];
			//2.获取href属性
			var href = aEle.getAttribute("href");
			//3.打印href
			console.log(href);
		}
		
		/**
		 * 移除a标签的href属性
		 */
		function fn3(){
			//1.获取a对象
			var aEle = document.getElementsByTagName("a")[0];
			//2.移除href属性
			aEle.removeAttribute("href");
		}
		
		
		/**
		 * 设置a标签中的文本内容的样式：color = "blue"、fontsize="100px"、fontFamily = "楷体"
		 */
		function fn4(){
			//1.获取a对象
			var aEle = document.getElementsByTagName("a")[0];
			//2.设置样式
			aEle.style.color = "blue";
			aEle.style.fontSize = "100px";
			aEle.style.fontFamily = "楷体";
		}
		
	</script>
</html>

Text文本的操作

常用方法

方法	说明
innerText	添加/获取文本，不能解析html标签
innerHTML	添加/获取文本，可以解析html标签

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text文本的操作</title>
</head>
<body>

<span id="spn">
    这是span
</span><br>
<button onclick="fn1()">innerText1</button>
<button onclick="fn2()">innerText2</button>
<button onclick="fn3()">innerHTML1</button>
<button onclick="fn4()">innerHTML2</button>
</body>
<script>

    /**
     * 往span中添加文本"helloworld"
     */
    function fn1() {
        //1.获取span对象
        var spanEle = document.getElementById("spn");
        //2.往span中添加文本"helloworld"
        spanEle.innerText = "<font color='red'>helloworld</font>";
    }

    /**
     * 获取span中的文本内容
     */
    function fn2() {
        //1.获取span对象
        var spanEle = document.getElementById("spn");
        //2.获取span中的文本内容
        var content = spanEle.innerText;
        //3.打印文本内容
        console.log(content);
    }

    /**
     * 往span中添加文本"helloworld"
     */
    function fn3() {
        //1.获取span对象
        var spanEle = document.getElementById("spn");
        spanEle.innerHTML = "<font color='red'>helloworld</font>";
    }

    /**
     * 获取span中的文本内容
     */
    function fn4() {
        //1.获取span对象
        var spanEle = document.getElementById("spn");
        console.log(spanEle.innerHTML);
    }


</script>
</html>

dom综合案例效果

案例效果

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom综合案例</title>
</head>
<body>

<input type="text" placeholder="请输入姓名">
<input type="text" placeholder="请输入年龄">
<button>添加</button><br><br><br>

<table border="1px" rules="all" cellpadding="10px" cellspacing="0px" width="300px">

    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>
            <button>删除</button>
        </td>
    </tr>


</table>


</body>
</html>

dom综合案例删除功能

代码实现

//错误写法，Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
function deleteUser(obj) {
    console.log("deleteUser..." + obj);
    //obj就是button对象
    //1.获取button所在的tr对象
    var trEle = obj.parentElement.parentElement;
    //2.获取table对象
    var tableEle = document.getElementsByTagName("table")[0];
    //3.将tr对象从table对象中移除
    tableEle.removeChild(trEle);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom综合案例</title>
</head>
<body>

<input type="text" placeholder="请输入姓名">
<input type="text" placeholder="请输入年龄">
<button>添加</button><br><br><br>

<table border="1px" rules="all" cellpadding="10px" cellspacing="0px" width="300px">

    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>
            <button onclick="deleteUser2()">删除</button>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>
            <button onclick="deleteUser2()">删除</button>
        </td>
    </tr>


</table>
</body>
<script>


    /**
     * 删除方式一
     * @param obj
     */
    function deleteUser1(obj) {
        console.log("deleteUser..." + obj);
        //obj就是button对象
        //1.获取button所在的tr对象
        var trEle = obj.parentElement.parentElement;
        //2.获取table对象
        var tableEle = trEle.parentElement;
        //3.将tr对象从table对象中移除
        tableEle.removeChild(trEle);
    }

    /**
     * 删除方式二
     * @param obj
     */
    function deleteUser2() {
        //event : 当前发生的点击事件对象
        var buttonEle = event.target;
        console.log(buttonEle);
        //1.获取button所在的tr对象
        var trEle = buttonEle.parentElement.parentElement;
        //2.获取table对象
        var tableEle = trEle.parentElement;
        //3.将tr对象从table对象中移除
        tableEle.removeChild(trEle);
    }


</script>
</html>

总结

方式一：将button对象通过deleteUser1的参数this对象传递。
方式二：将button对象通过event.target来获取

dom综合案例添加

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom综合案例</title>
</head>
<body>

<input type="text" placeholder="请输入姓名" id="name">
<input type="text" placeholder="请输入年龄" id="age">
<button onclick="addUser2()">添加</button>
<br><br><br>

<table border="1px" rules="all" cellpadding="10px" cellspacing="0px" width="300px">

    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>
            <button onclick="deleteUser1(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>
            <button onclick="deleteUser2()">删除</button>
        </td>
    </tr>


</table>
</body>
<script>

    /*
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>
                <button οnclick="deleteUser1(this)">删除</button>
            </td>
        </tr>
     */
    function addUser1() {
        console.log("addUser1..");
        //获取输入框中的内容
        var nameInputEle = document.getElementById("name");
        var ageInputEle = document.getElementById("age");
        var name = nameInputEle.value;
        var age = ageInputEle.value;


        //1.创建tr对象
        var trEle = document.createElement("tr");
        //2.创建姓名的td对象
        //2.1,姓名的td
        var nameTdEle = document.createElement("td");
        nameTdEle.appendChild(document.createTextNode(name));
        //2.2,年龄的td
        var ageTdEle = document.createElement("td");
        ageTdEle.appendChild(document.createTextNode(age));
        //2.3,button的td
        var buttonTdEle = document.createElement("td");
        var buttonEle = document.createElement("button");
        buttonEle.setAttribute("onclick", "deleteUser1(this)");
        buttonEle.appendChild(document.createTextNode("删除"));
        buttonTdEle.appendChild(buttonEle);
        //3,将所有的td添加到tr对象中
        trEle.appendChild(nameTdEle);
        trEle.appendChild(ageTdEle);
        trEle.appendChild(buttonTdEle);
        //4,将tr添加到table对象中
        var tableEle = document.getElementsByTagName("table")[0];
        tableEle.appendChild(trEle);
    }


    /*
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>
                <button οnclick="deleteUser1(this)">删除</button>
            </td>
        </tr>
     */
    function addUser2() {
        //获取输入框中的内容
        var nameInputEle = document.getElementById("name");
        var ageInputEle = document.getElementById("age");
        var name = nameInputEle.value;
        var age = ageInputEle.value;

        var tableEle = document.getElementsByTagName("table")[0];
        //获取table标签的文本内容
        var content = tableEle.innerHTML;

        tableEle.innerHTML = content + "<tr>\n" +
            "            <td>" + name + "</td>\n" +
            "            <td>" + age + "</td>\n" +
            "            <td>\n" +
            "                <button οnclick=\"deleteUser1(this)\">删除</button>\n" +
            "            </td>\n" +
            "        </tr>";
    }


</script>
</html>