《web前端开发技术进阶》实验报告

实验报告1

实验项目：	JavaScript事件案例
实验地点：		实验时间
实验目的： 在web应用中，原生js是十分重要的内容，js事件是在操作dom元素及书写js函数时比补考少的知识，本实验主要涉及js的点击事件、获取焦点及失去焦点事件、String对象、DOM对象、form表单元素的综合知识。
实验步骤和内容 1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡。     function on(){         var img= document.getElementById("light");         img.src="img/on.gif";}     function off(){         var img= document.getElementById("light");         img.src="img/off.gif";} 效果展示：        2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写。      function lower(){        var input= document.getElementById("name");        input.value =input.value.toLowerCase();}     function upper(){         var input= document.getElementById("name");         input.value =input.value.toUpperCase();} 效果展示：       点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态。     function checkAll(){         var hobbys=document.getElementsByName("hobby");         for(let i=0;i<hobbys.length;i++) {             hobbys[i].checked=true; }}     function reverse(){         var hobbys=document.getElementsByName("hobby");         for(let i=0;i<hobbys.length;i++){            //if(hobbys[i].checked)           // {            // hobbys[i].checked=false;           // }else{           //  obbys[i].checked=true;// }           hobbys[i].checked=!hobbys[i].checked; } } 效果展示：
三、出现问题及解决方法： 在事件处理程序中，this通常指向触发事件的元素。但在某些情况下（例如，在回调函数或箭头函数中），this的指向可能会发生变化。 解决方法：在事件处理程序中，尽量使用事件对象的currentTarget属性来获取触发事件的元素，而不是依赖this。或者如果你确实需要使用this，并且遇到了指向问题，考虑使用.bind(this)或闭包来确保this的正确指向。 不同的浏览器可能对某些事件或事件属性有不同的支持情况，导致代码在某些浏览器上无法正常工作。 解决方法：使用现代化的工具库（如jQuery、Modernizr等）来处理跨浏览器兼容性问题。对不同的浏览器进行充分的测试，并查找并应用相关的polyfill或解决方案来解决特定的问题。查阅相关文档和社区资源，了解不同浏览器对事件处理的支持情况。
四、实验总结（通过本次实验你学到了什么，知识点总结及感想） 通过JavaScript事件案例的学习，我深刻体会到了事件处理在前端开发中的重要性。事件处理是实现交互功能的关键，它使得网页能够响应用户的操作并做出相应的反馈。 通过学习和实践，我不仅掌握了事件处理的基本知识和技巧，还学会了如何运用事件处理来解决实际开发中遇到的问题。 同时，我也认识到了JavaScript的强大和灵活性。它提供了丰富的API和强大的功能，使得我们能够创造出各种复杂的交互效果。然而，这也意味着我们需要不断学习和探索，以充分利用JavaScript的潜力。 总的来说，JavaScript事件案例的学习让我对前端开发有了更深入的了解，并激发了我对编程的兴趣和热情。我相信在未来的学习和工作中，我会继续深入探索JavaScript的奥秘，并不断提升自己的编程能力。

实验报告2

实验项目：	Vue指令
实验地点：		实验时间
实验目的： Vue指令是