JavaScript学习手册十五：事件处理

最新推荐文章于 2023-04-17 17:27:16 发布
最新推荐文章于 2023-04-17 17:27:16 发布
阅读量5.1k 收藏 44
点赞数 20
分类专栏： # Web技术应用基础——javascript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45823118/article/details/116097548
版权

事件处理

1.注册事件处理程序

任务描述

1.本关任务：为指定的事件注册事件处理程序。

2.具体要求如下：

  • 通过getElementById()获取id为button2的按钮，赋值给变量button2，然后使用button2.onclick()方法为该按钮绑定事件处理程序listenButton2()；
  • 通过getElementById()获取id为button3的按钮，赋值给变量button3，然后使用button3.addEventListener()方法为该按钮绑定click事件的事件处理程序listenButton3()。

相关知识

  • 页面上的每一个元素，会发生几种不同的事件，比如表单元素，可能会发生提交事件，也可能发生重置事件，我们需要为每一个事件绑定一个事件处理程序，也叫为事件注册事件处理程序。
  • 下面是三种注册事件处理程序的方法。

(1)为JavaScript对象设置一个函数

  • 页面上的元素对应一个JavaScript对象，元素的每一个事件对应对象的一个属性，比如：
<form id="myForm"></form>
var myForm = document.getElementById("myForm");
  • myForm对应页面中id值为myForm的表单，
  • myForm.onsubmit对应表单提交事件，
  • myForm.onreset对应表单重置事件。

通过为这些属性设置一个函数类型的值，实现事件处理程序的注册：

//为表单提交事件注册处理程序
myForm.onsubmit = function() {
    console.log("表单提交的事件处理程序");
}
//为表单重置事件注册处理程序
myForm.onreset = function() {
    console.log("表单重置的事件处理程序");
}

(2)设置HTML标签属性的值为事件处理程序

比如，设置form标签的onsubmit属性的值为事件处理程序：

<form onsubmit="submitForm()"></form>
function submitForm() {
    console.log("表单提交的事件处理程序");
}

这样提交表单时，就会触发submitForm()函数。

(3)调用addEventListener()函数

  • 页面元素对应的JS对象，通过调用addEventListener()函数也可以注册事件处理程序，函数的第一个参数是事件的类型，第二个参数是事件处理程序：
<form id="myForm"></form>
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit",function() {
    console.log("表单提交中");
});

submit表示这是一个表单提交事件，后面的匿名函数即表单提交的事件处理程序。

代码文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="button1" onclick="listenButton1()">按钮1</button>
    <button id="button2">按钮2</button>
    <button id="button3">按钮3</button>
    <script>
        function listenButton1() {
            console.log("监听button1");
        }
        function listenButton2() {
            console.log("监听button2");
        }
        function listenButton3() {
            console.log("监听button3");
        }
		//请在此处编写代码
		/********** Begin **********/
        var button2 = document.getElementById("button2");
        button2.onclick = function(){
            listenButton2();
        }
        var button3 = document.getElementById("button3");
        button3.addEventListener("click",function(){
            listenButton3();
        });
		/********** End **********/
    </script>
</body>
</html>

2.文档加载事件

任务描述

1.本关任务：处理文档加载事件。

2.具体要求如下：

  • 在文档加载完成后（即文档加载事件发生后），在控制台输出Welcome!；
  • 字符串放在英文双引号内。

相关知识

文档，指的是网页上的所有元素构成的一种格式化文本。文档加载事件指浏览器从服务器下载并渲染完文档后发生的事件。

文档加载事件名字为load。

文档加载事件

  1. 当文档加载完成后，就会触发文档加载事件监听程序（即上一关所说的事件处理程序），一般我们会在这个时候监测用户浏览器的类型、版本，从而加载不同的脚本。
  2. 在大多数情况下，文档记载事件绑定在body元素上，表示网页主体加载完成后触发该事件，也有少数情况下绑定在image等元素上，表示相关的元素加载完成后触发该事件。
  3. 文档加载完成后监测用户的浏览器类型并在控制台打印：
<body onload="detectBrowser()"></body>
function detectBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("Opera") > -1) {//判断是否是Opera浏览器
        console.log("Opera");
    };
    if (userAgent.indexOf("Firefox") > -1) { //判断是否是Firefox浏览器
        console.log("Firefox");
    }
    if (userAgent.indexOf("Chrome") > -1) { //判断是否是Chrome浏览器
        console.log("Chrome");
    }
    if (userAgent.indexOf("Safari") > -1) {//判断是否是Safari浏览器
        console.log("Safari");
    }
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
        console.log("IE");
    };
}

代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="loadEvent()">
    <script>
        function loadEvent() {
		//请在此处编写代码
		/********** Begin **********/
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent) {//判断是否是Opera浏览器
            console.log("Welcome!");
        };
        
		/********** End **********/
        }       
    </script>
</body>
</html>

3.鼠标事件

任务描述

1.本关任务：练习鼠标事件的处理。
2.具体要求如下：

  • 第一步：通过id获取button（按钮）元素，赋给变量myButton；
  • 第二步：通过addEventListener为按钮绑定一个事件处理程序，用来处理按钮的鼠标单击事件；
  • 第三步：在事件处理程序中，通过id获取p元素，赋给变量myElement，然后设置当按钮被单击后，p里面的文本被改变为clicked；
  • 字符串类型的参数用""包含在内；

相关知识

鼠标是计算机最常见的外设之一，鼠标事件指用户操作鼠标的过程中触发的事件。

(1)常见的鼠标事件

  • 说到鼠标事件，最常见的无非是鼠标单击事件click，很多按钮都会绑定一个onclick()函数，表示当用户单击鼠标后会执行的函数。其实还有很多鼠标事件，比如双击鼠标、按下鼠标等，下面是一个总结：
    在这里插入图片描述
  • 为页面上的某一个元素绑定一个鼠标事件，当用户在该元素上用鼠标执行了指定的动作后，就会触发指定的鼠标事件处理程序，开始执行函数。

(2)鼠标的按下和释放

  • mousedowm表示鼠标按下的事件，
  • onmousedown是用户按下鼠标后会触发的事件处理程序；
  • mouseup表示鼠标按键释放的事件，
  • onmouseup表示用户释放鼠标按键后会触发的事件处理函数。

下面是一个例子，页面上有一行文字“点我”，用户在文字上按下鼠标按键后，文字会变成“鼠标已经按下”，而用户释放鼠标后，文字会变成“鼠标已经释放”。

html代码如下：

<body>
    <p id="p" onmousedown="downfunc()" onmouseup="upfunc()">
        点我
    </p>
</body>

页面的效果如下：
在这里插入图片描述
事件处理函数的代码如下：

function downfunc() {
    document.getElementById("p").innerText = "鼠标已经按下";
}
function upfunc() {
    document.getElementById("p").innerText = "鼠标已经释放";
}

用户在文字上面先按下鼠标，再释放鼠标，效果如下：
在这里插入图片描述
【我只是截了一个图】

代码文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p id="p">
            text
        </p>
        <button id="but">
            button
        </button>
        <script>
			//请在此处编写代码
			/********** Begin **********/
            var myButton = document.getElementById("but");
            myButton.onclick = function(){
                var myElement = document.getElementById("p");
                myElement.innerText = "clicked";
            }
            
			/********** End **********/
        </script>
    </body>
</html>

4.键盘事件

任务描述

1.本关任务：利用键盘事件判断用户在网页上是否使用了回车键。

2.具体要求如下，请按步骤操作：

  • 获取用户按下的按键的编码，赋值给变量code；
  • 判断code的值是否为13，是则在控制台打印cannot use enter。

相关知识

键盘事件，是指用户敲击键盘上的按键所代表的事件。

键盘事件有三种：

  1. 按键按下：keydown，用户按下键盘上的键；
  2. 按键释放：keyup，用户释放按键；
  3. 点击按键：keypress，用户按下并且释放了按键。

（1）点击按键

  • keypress表示用户点击某个按键的事件，该事件会触发onkeypress()事件处理程序，onkeypress()有一个event参数，其中event.which表示点击的按键的编码。这个编码是该按键的unicode编码。
  • 需要注意的是，按下键盘上的A时，keyCode值是a的编码，只有同时按下shift和A，keyCode的值才是A的编码。

下面是一个例子，当用户点击键盘上的按键时，会打印出该按键的编码值：

<body onkeypress="keyEvent(event)">
    <p>
        keypress event
    </p>
</body>
<script>
    function keyEvent(event) {
        console.log("编码是:"+event.which);
    }
</script>

比如我们按下B时，控制台如下：
在这里插入图片描述
同时按下B和shift，控制台如下：
在这里插入图片描述

（2）按下按键

keydown表示用户按下按键，同上面一样，它也有一个event.which表示按下的按键的编码。

<body onkeydown="downEvent(event)">
</body>
<script>
    function downEvent(event) {
        console.log("编码是:"+event.which);
    }
</script>

如果你按下按键后没有释放，控制台将会一直进行打印，比如按下的是1，控制台的打印结果如下：
在这里插入图片描述
灰色的数字20表示这条信息已经打印了20次。

（3）释放按键

keyup表示用户释放按键，可以有一个参数event，event.which表示释放的按键的编码。

<body onkeyup="upEvent(event)">
</body>
<script>
    function upEvent(event) {
        console.log("编码是:"+event.which);
    }
</script>

比如，当用户按下1时，控制台没有输出，释放1后，控制台输出如下：
在这里插入图片描述

代码文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body onkeypress="pressEvent(event)">
        <script>
        	function pressEvent(event) {
				//请在此处编写代码
				/********** Begin **********/
                var code = event.which;
                if(code==13){
                    console.log("cannot use enter");
                }
                
                
				/********** End **********/
    		}          
        </script>
    </body>
</html>

5.表单事件

任务描述

1.本关任务：使用change事件检验用户的输入。

2.具体要求如下：

  • 通过id属性获取id为input的文本框，赋值给变量ele；
  • 获取输入框中当前文本的长度，赋值给变量len；
  • 判断len的值是否小于等于12，是则打印出too short input；
  • 字符串参数务必置于双引号之内。

相关知识

  1. 表单，即form，是页面最基本的元素之一，通常，用户的输入会放置在表单里面，然后提交给后台。
  2. form有很多子元素，分别表示不同类型的用户输入：例如input表示文本等类型；select表示下拉列表；button表示按钮。
  3. 这些子元素可以被绑定一些事件，比如change表示用户的输入发生了改变。这些事件是表单元素特有的。

（1）change事件

  • change事件表示当前元素失去焦点并且元素的内容发生了改变。失去焦点，指光标不在该元素上，比如光标本来在文本输入框里面，当用户在页面的其他地方点击了鼠标，文本框就会失去焦点。

下面是一个例子：当用户输入文本，并且鼠标点击页面上的其他地方后，我们将在控制台打印出用户的输入。

<body>
    <form>
        <input id="t1" type="text" onchange="changeEve()"/>
    </form>
    <script>
        function changeEve() {
            var e = document.getElementById("t1");
            console.log(e.value);
        }
    </script>
</body>

比如当用户输入I changed后，在页面的其他地方点击鼠标，控制台如下：

（2）select事件

  • select事件：文本框中的文本被用户选中时发生。
  • 只能作用在<input type="text">的文本框里面，可以用window.getSelection().toString()获取选择的文本。

下面的例子：当用户选择了一段文本后，我们在控制台打印出用户选择的文本：

<body>
    <input type="text" value="赵钱孙李，周吴郑王" onselect="selectEve()"/>
    <script>
        function selectEve() { 
            console.log(window.getSelection().toString());
        }
    </script>
</body>

比如我们选择了郑王，然后松开鼠标，控制台的输出如下：
在这里插入图片描述

（3）submit事件

表单的提交事件。

  • 表单里面包含了用户输入的信息，最终要传到后台的服务器进行处理，这样就有一个表单的提交过程，submit即表单提交事件。
  • 通常情况下，在submit的事件处理函数中，校验用户的输入是否符合要求，比如密码的长度够不够。

下面的例子，用户提交表单时，用js校验用户输入的密码长度是否达到6位。

<body>
    <form onsubmit="subEve()">
        <input type="password" id="pw"/>
        <input type="submit" value="提交" />
    </form>
    <script>
    function subEve() {
        var content = document.getElementById("pw").value;
        if (content.length < 6) {
            window.alert("密码不可以小于6位");
        }
    }
    </script>
</body>

这时，用户在密码输入框输入123，点击提交，页面会弹出一个警告框如下：
在这里插入图片描述

代码文件

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>Title</title>
	</head>
	<body>
    	<form>
        	<input id="input" type="text" onchange="changeEvent()" />
			<input id="input2" type="text"  />
    	</form>
    	<script>
    		function changeEvent() {
			//请在此处编写代码
			/********** Begin **********/
            var ele = document.getElementById("input").value;
            var len = ele.length;
            if (len <= 12) {
                console.log("too short input");
            }
			/********** End **********/
    		}
    	</script>
	</body>
</html>

6.拖动事件

任务描述

1.本关任务：学习处理拖动事件。

2.具体要求如下：

  • 在第一个Begin和End中间设置p元素为可拖动的；
  • 在第二个Begin和End中间使用event.target.innerText在控制台打印p元素里面的内容；

相关知识

（1）元素的拖放

鼠标指向元素，按下鼠标，然后移动鼠标到另一个地方释放，即拖动元素。

  • 相比html4以及之前的版本，html5增加了一个全新的属性draggable，表示元素是否支持拖动，默认的情况下，图片和超链接元素是支持拖动的，其他元素不支持。

将元素的draggable属性设置为true，即表示元素支持拖动。如：下面设置了p元素支持拖动：

<p id="p1" draggable="true">
    元素支持鼠标的拖动
</p>

也可以用下面的JavaScript代码设置p为可拖动的：

document.getElementById("p1").draggable = true;

(2)ondrag

  • ondrag()是元素正在拖动时触发的事件处理程序。如果元素一直在拖动的过程中，ondrag()会每隔350ms被触发一次，比如，在下面的例子中，我们一直在拖动p元素，控制台会一直打印拖动的信息：
<body>
    <div>
        <p ondrag="dragging(event)" draggable="true">拖动我!</p>
    </div>
    <script>
    function dragging(event) {
        console.log("正在拖动");
    }
    </script>
</body>

拖动不放下，控制台如下：
在这里插入图片描述
111表示这条信息已经打印了111次。

(3)ondragstart

用户开始拖动元素时触发，可以带有一个event参数，其中的event.target表示拖动的元素，比如，下面的例子中，用户开始拖动元素时，触发了ondragstart程序，我们尝试打印一下event.target的内容：

<body>
    <p ondragstart="dragStart(event)"  draggable="true">拖动我!</p>
    <script>
        function dragStart(event) {
            console.log(event.target);
            console.log("你要拖动的文本的内容是："+event.target.innerText);
        }
    </script>
</body>

拖动文本，效果如下：
在这里插入图片描述
第一行是要拖动的文本元素，第二行显示了文本里面的内容。

代码文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
        	<!-- 请在此处编写代码 -->
            <!---------Begin--------->
            <p ondrag="dragging(event)" id="p1" draggable="true">drag me</p>
            <!---------End--------->
        </div>
        <script>
            function dragging(event) {
			/********** Begin **********/
            
            console.log(event.target.innerText);
        }
            
            
			/********** End **********/
            }
        </script>
    </body>
</html>

7.事件冒泡

任务描述

1.本关任务：阻止事件冒泡的发生。

2.具体要求如下：

  • 在id为div2的元素上面阻止click事件的冒泡。

相关知识

(1)文档树

在前面的学习中，我们说过，文档元素之间有层次关系，比如：

<body>
    <div onclick="clickParent()">
        <p onclick="clickChild()">点我</p>
        <p id="p">content</p>
    </div>
    <script>
        function clickChild() {
               console.log("子");
        }
        function clickParent() {
               console.log("父");
        }
</script>
</body>

对应这样一个模型：
在这里插入图片描述
其中，箭头的方向是子节点的方向，而反过来则是父节点的方向。比如，两个p元素的父节点（父元素）都是div元素。

(2)事件冒泡

  • 在上面的例子中，点击p元素里面的内容，显然会触发p元素的事件处理程序clickChild。然后，因为p元素是放在div里面的，点击p元素相当于点击了div元素，会触发div的事件处理程序clickParent，这个过程被称为事件冒泡。
  • 事件冒泡是指，某个事件触发了某个元素的事件处理程序，接下来，就会自动沿着节点树往根节点的方向依次触发经过的路径上的所有元素的某个事件的处理程序。

比如上面的例子中，用鼠标点击p标签里面的文字点我，控制台的打印结果如下：

在这里插入图片描述
第一行是子元素的click事件的事件处理程序的输出，第二行是父元素的，这里有一个先后的顺序，即从子元素一直到根节点。

(3)事件冒泡的控制

事件冒泡不是所有的时候都受到欢迎，有的时候需要控制它的发生，使用event.stopPropagation()即可。

比如，对于上面的例子，我们在子元素的事件处理程序clickChild()的最后一行添加一行代码：

function clickChild() {
   console.log("子");
   window.event?window.event.cancelBubble=true:event.stopPropagation(); 
}

这个时候再次点击p里面的内容，控制台的输出如下：
在这里插入图片描述
可以看出，事件没有冒泡到父元素上面。所以，想要在哪里停止事件的冒泡，就在它的子元素的事件处理程序的最后调用event.stopPropagation()即可。

代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1" onclick="click1()">
        <div id="div2" onclick="click2()">
            <p id="p" onclick="click3()">click me!</p>
        </div>
    </div>
    <script>
        function click1() {
            console.log("root");
        }
        function click2() {
			//请在此处编写代码
			/********** Begin **********/
            
            event.stopPropagation();
            
			/********** End **********/
            console.log("parent");
        }
        function click3() {
            console.log("child");
        }
    </script>
</body>
</html>

【小白今天吃了冒菜，蹭了室友的油条，(●’◡’●)，真好吃，吼吼吼吼~晚上又蹭了室友的菠萝，可甜可甜了，就是贵了点，不然我也想整一个了，偷偷告诉你们（四块钱一斤呢，一块单卖4元钱，/(ㄒoㄒ)/）】

句子君：

“看到路上尽情歌唱的，在路口弹着吉他的青年，感受到的是对梦想和远方的呼唤，在狭长的胡同小巷，看到的是生活的不易却乐观待人，面对起落却能够每天燃起新的希望，迎接新的挑战，因为还可以为想成为的人，想做的事而奋斗，甘之如饴。”

少年游四方
关注
  • 20
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
EduCoder js学习手册15 答案
zcy_inspire的博客
05-28 2129
EduCoder js学习手册15 事件：指用户在网页上的操作或者网页元素加载过程中发生的事情。 比如，用鼠标点击了一个按钮，按下了回车键，鼠标移动到图片上，这些都是事件。 可以看出的是，每一个事件都和一个页面上的元素关联，或者和整个页面关联，也就是和body关联。当这些事件发生时，关联的元素就会调用JavaScript中的一个函数处理该事件，即对事件做出反应。 我们把这样的函数叫做事件监听程序，当函数被调用时，称函数被触发。 我们用一辆行驶中的汽车来比喻，元素好比是汽车上的各种装置，例如方向盘、刹车、喇叭
JS学习手册十五 事件处理
zcy_inspire的博客
06-19 1593
事件：指用户在网页上的操作或者网页元素加载过程中发生的事情。 比如，用鼠标点击了一个按钮，按下了回车键，鼠标移动到图片上，这些都是事件。 可以看出的是，每一个事件都和一个页面上的元素关联，或者和整个页面关联，也就是和body关联。当这些事件发生时，关联的元素就会调用JavaScript中的一个函数处理该事件，即对事件做出反应。 我们把这样的函数叫做事件监听程序，当函数被调用时，称函数被触发。 注册事件处理程序 为JavaScript对象设置一个函数 页面上的元素对应一个JavaScript对象，元素的每一个
JavaScript 学习笔记（十五）
12-11
事件 事件是DOM（文档对象模型）的一部分。事件流就是事件发生顺序，这是IE和其他浏览器在事件支持上的主要差别。 一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定的事件目标（document对象）的顺序触发。 过程：按照DOM的层次结构像水泡一样不断上升至顶端。（从里面的div触发事件再到body，到html最后直到document最顶端）。 2、捕获型事件 可以说跟冒泡是正好相反的，事件从最不精确的对象开始触发，然后直到最精确。 3、DOM事件流 DOM同时支持以上两种事件模型，其中捕获型事件先发生，从document对象开始，最后在docu
JavaScript学习手册（50）
czzyw的博客
05-07 65
Immediately - Invoked Function Expression ()()匿名函数自调用 理解 作用 隐藏实现 不会污染外部（全局）命名空间 用它来编码js模块 var a=4 console.log(a) (function(){ var a=1 function test(){ console.log(++a) } function test2(){ console.log('test2()') } window.$=function(){ //向
javascript学习笔记
阿瑶的博客
06-14 415
阿瑶的js学习笔记
js（十五）---事件处理模式和事件委托
Shine_twinkle的博客
01-02 277
事件处理模式 上一篇已经说了这个事件的冒泡和捕获，就是没有仔细介绍一下，它是如何进行的。我们都知道事件是先捕获后冒泡的，所以我们仔细研究一下，这个是如何变化的。 接下来用一个例子，说明一下： .box1{ width: 200px; height: 200px; background-color: red;
EduCoder_web实训作业--JavaScript学习手册十五：事件处理
weixin_45803282的博客
01-14 4484
今天是web的最后一个了。 庆祝！！！ 还没有关注公众号的同学们，快关注啊！ 在今年春节时期，我会给大家一点小小的福利。真的很小啊，不要抱有过多期望，但是重在参与。期待你的参与！ 第一关 //请在此处编写代码 /********** Begin **********/ document.getElementById("button2").onclick=function(){ listenButton2(); } documen.
JavaScript学习手册（15）
czzyw的博客
05-03 245
方法 如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法（method）。调用这个函数就说调用对象的方法。 注意：它只是名称上的区别并没有其他的区别。 枚举对象中的属性 使用for in 语句 for（ var 变量 in 对象）{ } 对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的一个属性的名字赋值给变量。 每日一句 万句言语吃不饱，一捧流水能解渴。 ...
Javascript学习——事件处理
qq_57985179的博客
10-18 108
一、事件基础 （1）事件类型 1、冒泡型 事件从最特定的目标向最不特定的目标（documentx对象）触发，也就是事件从下向上进行响应，这个传递过程被形象地称为冒泡2、捕获型 事件从最不特定的目标（document>对象）开始触发，然后到最特定的目标，也就是事件从上向下进行响应。3、混合型 W3C的DOM事件模型支持捕获型和冒泡型两种事件流，但是捕获型事件流先发生，然后才发生冒泡型事件流。两种事件流会触及DOM中的所有层级对象，从document对象......
头歌-JavaScript基础
somewon的博客
04-17 4109
第2关：JavaScript 数据类型转换。第1关：JavaScript 数据类型介绍。JavaScript 学习手册五：JS数组。JavaScript 学习手册八：JS函数。第1关：数组的创建、读写和长度。第3关：数组的遍历和多维数组。第5关：数组的应用——内排序。第1关：用函数语句定义函数。第2关：用表达式定义函数。第2关：数组元素的增减。第4关：数组的常用方法。第3关：JSON字符串。第4关：未定义的实参。第6关：对象作为参数。第2关：JSON数组。第1关：JSON对象。
js实训答案
10-03
实训答案，上机实训的所有答案，简易购物车等。
Javascript_事件处理
08-02
Javascript_事件处理，讲解了JAVASCRIPT事件开发中注意的事项，步骤，有条理的讲解
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十五：事件处理
最新发布
01-20
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十五：事件处理。源码txt格式。
JavaScript完全学习手册
07-22
资源名称：Javaｓｃｒｉｐｔ完全学习手册内容简介：本书分4篇14章，介绍Javaｓｃｒｉｐｔ的知识，全书内容包括：Javaｓｃｒｉｐｔ语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
javascript完全学习手册1 源码
04-12
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 8350
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
JavaScript学习手册十三：HTML DOM——文档元素的操作（一)
qq_45823118的博客
04-24 7934
HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关
JavaScript学习手册八：JS函数
qq_45823118的博客
04-20 5945
JS函数1、用函数语句定义函数任务描述相关知识用函数语句定义代码文件2、用表达式定义函数任务描述相关知识用表达式定义代码文件3、函数的调用任务描述相关知识函数的调用代码文件4、未定义的实参任务描述相关知识用函数语句定义代码文件5、实参对象任务描述相关知识实参对象代码文件6、对象作为参数任务描述相关知识对象作为参数代码文件7、函数对象任务描述相关知识函数对象作为另一个函数的参数代码文件 1、用函数语句定义函数 任务描述 本关任务：用函数语句定义一个函数。 具体要求如下： 定义一个名字为mainJs()的函数
JavaScript学习手册五：JS数组
qq_45823118的博客
04-18 5339
JS数组1、数组的创建、读写和长度任务描述相关知识代码文件2、数组元素的增减任务描述相关知识代码文件3、数组的遍历和多维数组任务描述相关知识代码文件4、数组的常用方法任务描述相关知识代码文件数组的创建、读写和长度任务描述相关知识代码文件 1、数组的创建、读写和长度 任务描述 本关任务：掌握创建数组的方法，获取数组的元素和长度。 本关的编程任务是补全右侧代码片段中begin至end中间的代码，具体要求如下： 已知两个数组array1和array2，参数a是一个整数，先判断a的值与数组array1的长度值
任务描述 本关任务:读取wjcl
11-19
本次任务的目标是读取wjcl文件。这个任务需要我们使用适当的工具和技能来打开和阅读wjcl文件的内容。首先，我们需要确定我们具有打开和读取该文件类型的合适软件或应用程序。然后，我们可以使用这些工具来打开文件并浏览其内容。在读取wjcl文件时，我们可能需要注意文件的编码格式以确保正确的显示和阅读内容。另外，我们可能也需要根据文件的内容来执行相应的操作或者进行分析处理。在完成读取wjcl文件的任务后，我们可以根据文件的内容来做出相应的反馈或者进一步的处理。总之，完成本次任务需要我们具备一定的计算机操作技能以及对文件读取的理解和处理能力。希望大家能够顺利完成这个任务，读取wjcl文件并根据需要进行相应的处理和反馈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少年游四方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值