位置: IT常识 - 正文

JavaScript下部分--头歌(educoder)实训作业题目及答案(javascript局部变量)

编辑:rootadmin
JavaScript下部分--头歌(educoder)实训作业题目及答案

目录

 JSON

第1关: JSON对象

第2关: JSON数组

第3关: JSON字符串

Math、日期和异常处理

第1关: Math类

第2关: Date类

第3关: JavaScript错误

HTML DOM——文档元素的操作(一)

第1关: 通过id获取文档元素

第2关: 通过类名获取文档元素

第3关: 通过标签名获取文档元素

第4关: html5中获取元素的方法一

第5关: html5中获取元素的方法二

第6关: 节点树上的操作

第7关: 属性值的获取

第8关: 属性值的设置

HTML DOM——文档元素的操作(二)

第1关: 创建节点

第2关: 插入节点

第3关: 删除节点

第4关: 替换节点

第5关: 综合练习

事件处理

第1关: 注册事件处理程序

第2关: 文档加载事件

第3关: 鼠标事件

第4关: 键盘事件

第5关: 表单事件

第6关: 拖动事件

第7关: 事件冒泡

浏览器对象模型

第1关: 定时器

第2关: 循环定时器

第3关: location对象

第4关: 对话框

第5关: 窗口


 JSON第1关: JSON对象function mainJs(a,b,c) { //请在此处编写代码/********** Begin **********/ var JSONObject = {"key1":a,"key2":b,"key3":c};//定义JSON对象 delete JSONObject.key3;//删除名字为key3的属性var result = "";for(var att in JSONObject) {//遍历剩余所有的属性result = result+JSONObject[att]+",";}return result.slice(0,-1); /********** End **********/}第2关: JSON数组var myJson = {"category":"computer","detail":"programming","language":["js","java","php","python","c"]}function mainJs(a) {a = parseInt(a); //请在此处编写代码/********** Begin **********/ var result = ""; for(var i = 0;i < a;i++) { result = result+myJson.language[i]+","; } return result.slice(0,-1); /********** End **********/}第3关: JSON字符串var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) { //请在此处编写代码/********** Begin **********///JSON字符串转换为JSON对象 var JSONObject = JSON.parse(JSONString);//修改key1属性的值为参数aJSONObject.key1 = a;//JSON对象转换为JSON字符串并返回 return JSON.stringify(JSONObject); /********** End **********/}Math、日期和异常处理第1关: Math类function mainJs(a) { a = parseInt(a); //请在此处编写代码/********** Begin **********/ var b = Math.ceil(a); var c = Math.floor(a); var d = Math.sqrt(a); var e = Math.round(a); var f = Math.sin(a); return Math.max(b,c,d,e,f)+Math.min(b,c,d,e,f); /********** End **********/}第2关: Date类function mainJs(a) { a = parseInt(a); var date = new Date(a); //请在此处编写代码/********** Begin **********/ var year = date.getFullYear(); var month = date.getMonth(); var cal = date.getDate(); var day = date.getDay(); return year+","+month+","+cal+","+day; /********** End **********/}第3关: JavaScript错误function mainJs(a) { //请在此处编写代码/********** Begin **********/ try { if(a < 0) throw new Error("negative cannot be rooted"); if(a == 0) throw new Error("zero cannot be numerator"); return 1/(Math.sqrt(a)); }catch(err) { return err.message; } /********** End **********/}HTML DOM——文档元素的操作(一)第1关: 通过id获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by id</title></head><body> <a id="a1" src="https://www.google.com">Google</a> <p id="p1">this is a text</p> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var myElement = document.getElementById("a1"); <!---------End---------> myElement.href="https://www.educoder.net"; </script></body></html>第2关: 通过类名获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by name</title></head><body> <img src="" class="myName"/> <form class="myName" id="myForm"></form> <q class="myName">This is quote</q> <p class="myName">This is what you should get</p> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var myElement = document.getElementsByClassName("myName")[3]; <!---------End---------> myElement.innerText="I changed the text"; </script></body></html>第3关: 通过标签名获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by id</title></head><body> <div class="diva"> <a href="https://www.educoder.net">EduCoder</a> <a href="https://www.facebook.com">FaceBook</a> </div> <div class="divb"> <a href="https://www.twitter.com">Twitter</a> <form name="myForm"></form> <a href="https://www.nudt.edu.cn">NUDT</a> </div> <p id="pp">this is a text</p><script><!-- 请在此处编写代码 --> <!---------Begin---------> var temp= document.getElementsByTagName("div")[1]; var myElement = temp.getElementsByTagName("a")[1]; <!---------End---------> myElement.innerText="nudt";</script></body></html>第4关: html5中获取元素的方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>你需要获得的元素是我</p> <p>是楼上</p> <p>是楼上的楼上</p> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var pElement = document.querySelector("p"); <!---------End---------> console.log(pElement); </script></body></html>第5关: html5中获取元素的方法二<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>你需要获得的元素是我</p> <p>包括我</p> <p>还有我</p> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var pElement = document.querySelectorAll("p"); <!---------End---------> console.log(pElement); </script></body></html>第6关: 节点树上的操作<html><head><title>myTitle</title><meta charset="UTF-8"></head><body><div id="div1"><div class="cl1"><p>文本</p><a>超链接</a></div><div class="cl2"><select><option>红</option><option>黄</option><option>蓝</option></select></div></div> <script> var cl2 = document.getElementById("div1").lastElementChild; <!-- 请在此处编写代码 --> <!---------Begin---------> var myElement = cl2.firstElementChild.children[1]; <!---------End---------> myElement.innerText = "绿"; </script></body></html>第7关: 属性值的获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p id="p"></p> <img class="imgClass"/> <a id="a"></a> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var myElement = document.getElementsByClassName("imgClass")[0]; var srcValue = myElement.className; <!---------End---------> console.log(srcValue); </script></body></html>第8关: 属性值的设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p id="p"></p> <form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form> <a id="a"></a> <script><!-- 请在此处编写代码 --> <!---------Begin--------->var myElement = document.getElementById("form1");myElement.method = "post"; <!---------End---------> console.log(document.getElementById("form1").method); </script></body></html>HTML DOM——文档元素的操作(二)第1关: 创建节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p></p> <script> <!-- 请在此处编写代码 --> <!---------Begin---------> var newNode = document.createElement("form"); newNode.method = "post"; newNode.id = "myForm"; <!---------End--------->document.body.appendChild(newNode); console.log(newNode.method); </script></body></html>第2关: 插入节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ul id="ul1"> <li>America</li> <li>Mexio</li> </ul> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var newNode = document.createElement("li"); newNode.innerText = "Canada"; document.getElementById("ul1").appendChild(newNode); <!---------End---------> var out = document.getElementsByTagName("li")[2]; console.log(out.innerText); </script></body></html>第3关: 删除节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ol id="browser"> <li id="chrome">Chrome</li> <li id="firefox">Firefox</li> <li id="opera">Opera</li> <li id="safari">Safari</li> </ol> <script><!-- 请在此处编写代码 --> <!---------Begin---------> var parent = document.getElementById("browser"); var child = document.getElementById("opera"); parent.removeChild(child); <!---------End---------> </script></body></html>第4关: 替换节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ol id="parent"> <a id="old" href="https://www.google.com">Google</a> </ol> <script> var newChild = document.createElement("a"); newChild.innerText = "eduCoder"; newChild.href = "https://www.educoder.net";<!-- 请在此处编写代码 --> <!---------Begin---------> var parent = document.getElementById("parent"); var old = document.getElementById("old"); parent.replaceChild(newChild,old); <!---------End---------> </script></body></html>第5关: 综合练习<html><head><title>myTitle</title><meta charset="utf-8" /></head><body><select id="province" onChange="changeCity()"><option value="BeiJing" id="bj">北京</option> <option value="AnHui" id="ah">安徽</option></select><select id="city"> <option value="BeiJingCity">北京市</option></select><script>function changeCity() { var province = document.getElementById("province"); var city = document.getElementById("city"); var length = city.children.length; for(var i = length-1;i >= 0;i--) { city.removeChild(city.children[i]); } if(province.value == "BeiJing") { var child1 = document.createElement("option"); child1.value="BeiJingCity"; child1.innerText="北京市" city.appendChild(child1); } else { var child1 = document.createElement("option"); child1.value="HuangShanCity"; child1.innerText="黄山市"; city.appendChild(child1);//请在此处编写代码 /*********Begin*********/ var child2 = document.createElement("option"); child2.value="HeFeiCity"; child2.innerText="合肥市"; city.appendChild(child2); /*********End*********/ }}</script></body></html>事件处理第1关: 注册事件处理程序<!DOCTYPE html><html lang="en"><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 = listenButton2; var button3 = document.getElementById("button3"); button3.addEventListener("click",listenButton3); /********** End **********/ </script></body></html>第2关: 文档加载事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body onload="loadEvent()"> <script> function loadEvent() {//请在此处编写代码/********** Begin **********/console.log("Welcome!");/********** End **********/} </script></body></html>第3关: 鼠标事件<!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.addEventListener("click",function() { var myElement = document.getElementById("p"); myElement.innerText="clicked"; }) /********** End **********/ </script></body></html>第4关: 键盘事件<!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关: 表单事件<!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"); var len = ele.value.length; if (len <= 12) { console.log("too short input"); } /********** End **********/ } </script></body></html>第6关: 拖动事件<!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关: 事件冒泡<!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 **********/ window.event?window.event.cancelBubble=true:event.stopPropagation(); /********** End **********/ console.log("parent"); } function click3() { console.log("child"); } </script></body></html>浏览器对象模型第1关: 定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p onclick="handleTimer()">set timer then undo</p> <script> var timeId; function timerTask() { console.log("this is timer task"); } function handleTimer() { //请在此处编写代码/********** Begin **********/ timeId = window.setTimeout(timerTask,2000); /********** End **********/ } </script></body></html>第2关: 循环定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p onclick="task1()">this is task onea</p> <p onclick="task2()">this is task two</p> <p onclick="removeTask1()">try to remove task one</p> <script> var timeId1; var timeId2; function timerTask1() { console.log("timerTask1!"); } function timerTask2() { console.log("timerTask2!"); } function task1() { timeId1 = window.setInterval(timerTask1,2000); } function task2() { timeId2 = window.setInterval(timerTask2,1500); } function removeTask1() {//请在此处编写代码/********** Begin **********/ window.clearInterval(timeId1);/********** End **********/ } </script></body></html>第3关: location对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p onclick="openNew()">Click me to new page!</p> <script> function openNew() { //请在此处编写代码/********** Begin **********/ var loc = window.location; console.log(loc.hostname); loc.href = "https://www.educoder.net/forums/categories/all?order=newest"; /********** End **********/ } </script></body></html>第4关: 对话框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p onclick="inputName()">Click to input name!</p> <script> function inputName() { var result; //请在此处编写代码/********** Begin **********/ result = window.prompt("your name", "XiaoMing"); if (result === null) { console.log("name cannot be null"); } /********** End **********/ } </script></body></html>第5关: 窗口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p onclick="openNewWindow()">open new window</p> <script> var myWindow; function openNewWindow() { //请在此处编写代码/********** Begin **********/ myWindow = window.open("Demo.html", "window_name"); /********** End **********/ } </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/283912.html 转载请保留说明!

上一篇:最高超频记录的CPU是什么(最强超频)

下一篇:bdmcon.exe是什么进程 bdmcon进程有何作用(bds.exe)

  • 小爱同学灵敏度怎么设置(小爱同学灵敏度不高)

    小爱同学灵敏度怎么设置(小爱同学灵敏度不高)

  • 华为mate30pro数据网速太慢怎么办(华为mate30pro数据线连接电脑)

    华为mate30pro数据网速太慢怎么办(华为mate30pro数据线连接电脑)

  • 华为p30手机防水等级是多少(华为P30手机防水性能怎么样)

    华为p30手机防水等级是多少(华为P30手机防水性能怎么样)

  • 手机备份在哪里(百度手机备份在哪里)

    手机备份在哪里(百度手机备份在哪里)

  • oppor17真的不建议买么(oppor17zol)

    oppor17真的不建议买么(oppor17zol)

  • Windows7电脑工具在哪(win7工具菜单在哪)

    Windows7电脑工具在哪(win7工具菜单在哪)

  • 信号栏出现HD(信号栏出现HD怎样关闭)

    信号栏出现HD(信号栏出现HD怎样关闭)

  • 抖音内存怎么越来越大(抖音内存怎么越清理越大)

    抖音内存怎么越来越大(抖音内存怎么越清理越大)

  • 新手机不拆封能放多久(新手机不拆封能激活吗)

    新手机不拆封能放多久(新手机不拆封能激活吗)

  • 华为手机开机屏幕不动了怎么办(华为手机开机屏幕闪烁是什么原因)

    华为手机开机屏幕不动了怎么办(华为手机开机屏幕闪烁是什么原因)

  • 华为耳机保修多久(华为耳机保修多少钱)

    华为耳机保修多久(华为耳机保修多少钱)

  • 快手红v和蓝v有什么区别(快手蓝v变成红v)

    快手红v和蓝v有什么区别(快手蓝v变成红v)

  • snmsung什么牌子的手机(snmsung什么牌子的手机多少钱)

    snmsung什么牌子的手机(snmsung什么牌子的手机多少钱)

  • 苹果8p手机声音越来越小怎么办(苹果8p手机声音很小怎么回事,开最大了)

    苹果8p手机声音越来越小怎么办(苹果8p手机声音很小怎么回事,开最大了)

  • 酷狗音乐自动下载歌曲怎么关闭(酷狗音乐自动下一首怎么设置)

    酷狗音乐自动下载歌曲怎么关闭(酷狗音乐自动下一首怎么设置)

  • qq 浏览器缓存的视频在哪里可以找到(qq浏览器缓存的视频怎么导出来)

    qq 浏览器缓存的视频在哪里可以找到(qq浏览器缓存的视频怎么导出来)

  • 小米手机收音机在哪里(小米手机收音机怎么关掉)

    小米手机收音机在哪里(小米手机收音机怎么关掉)

  • 怎么查停机的手机号码(怎么查停机的手机号欠了多少钱电信)

    怎么查停机的手机号码(怎么查停机的手机号欠了多少钱电信)

  • 华为设置上滑返回(华为怎么设置往上滑返回键)

    华为设置上滑返回(华为怎么设置往上滑返回键)

  • 淘宝主题怎么换成默认(淘宝在哪儿换主题)

    淘宝主题怎么换成默认(淘宝在哪儿换主题)

  • 华为mate30微信视频美颜怎么设置

    华为mate30微信视频美颜怎么设置

  • 手机卡显示hd啥意思(手机卡显示hd是什么)

    手机卡显示hd啥意思(手机卡显示hd是什么)

  • 小遛共享车费退不了吗(小遛共享退了押金还能骑吗)

    小遛共享车费退不了吗(小遛共享退了押金还能骑吗)

  • 高德导航信号弱不能导航怎么解决(导航gps信号弱怎么办)

    高德导航信号弱不能导航怎么解决(导航gps信号弱怎么办)

  • 如何使用excel制作表格(如何使用excel制作坐标)

    如何使用excel制作表格(如何使用excel制作坐标)

  • 爱奇艺季卡是几个月(爱奇艺会员季卡多少钱一张)

    爱奇艺季卡是几个月(爱奇艺会员季卡多少钱一张)

  • linux系统中ctrl和capslock键怎么互换?(linux ctrl c和ctrl z)

    linux系统中ctrl和capslock键怎么互换?(linux ctrl c和ctrl z)

  • 怎么从营业执照上看是不是一般纳税人
  • 个人所得税算错
  • 员工在公司食堂就餐被烫伤医药费由谁承担
  • 税务筹划的12种方法知乎
  • 税控盘专票认证登录密码正确还是登录不上去
  • 车间报销办公费计入什么科目
  • 在建工程账务处理流程
  • 奖品偶然所得个税如何申报
  • 基建项目待摊投资
  • 企业现金股利的支付能力,在很大程度
  • 年所得税12万申报
  • 零报税企业怎么做汇算清缴
  • 新办企业国税报税时间
  • 发票勾选操作失败怎么回事
  • 固定资产装修费用计入房产税吗
  • 小企业会计准则适用于哪些企业
  • 劳务派遣公司开票几个点
  • 1697510490
  • 1697511149
  • 增值税纳税人申报表怎么填写
  • 同一张发票可以分两次报销吗
  • 使用linux命令
  • thinkpade431进去bios设置
  • 入库前的准备
  • 单位银行结算账户属于活期存款账户
  • 不良修复体的危害
  • php link指令
  • vue-admin-master
  • php请求接口数据
  • vue 查询
  • 深度学习实战——不同方式的模型部署(CNN、Yolo)
  • 蓝牙11
  • 货款收不回来会计分录
  • web前端开发规范有哪些
  • 织梦参数配置设置
  • 代理返点怎么算
  • 企业税金总额包括什么
  • vue elementui table
  • 买一赠一的销售方式
  • 电子承兑接收了,但是后来怎么没有了
  • 股东分红的会计分录怎么做
  • 期权费的合理范围计算
  • 货物退回并补货什么意思
  • 超市购物 发票
  • 什么叫生活补助
  • 企业汇算清缴中的职工薪酬指的是管理费用中的吗
  • 初级会计实务中第二章第四节存货(5)费琪
  • 一般纳税人劳务税率是多少?
  • 因管理不善材料被盗应记啥科目
  • 代发工资怎么算税
  • 认缴资金可以增加吗
  • 银行存款账面余额是企业还是银行
  • 怎样分辨假钱
  • 当月财务费用怎么算
  • 费用类科目的明细怎么写
  • 支出费用的区别
  • 金税盘税费减免分录
  • 收入成本的确认条件
  • 复式记账法主要有
  • 改制后企业是否可以剥离资产管理
  • 公司折旧怎么算
  • 如何监测和优化电池寿命
  • ubuntu debain
  • MySQL利用不同的流程语句输出1到200的和
  • mysql三种安装方式
  • 进程lsass.exe
  • ubuntu右上角没有键盘
  • .exe是什么软件
  • 创建nodejs项目的步骤
  • js日历插件日期选择器
  • 怎么把两个文件中的内容合并
  • 解决在基层
  • jquery鼠标点击事件怎么写
  • jquery遍历object
  • Android本地文件怎么显示歌词
  • jquery插件免费下载
  • jquery查找当前元素的父元素
  • android 改变view位置
  • 税务工作的前景怎么样
  • 新华保险有返本金吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设