js | 易学教程

代码最简化

阅读更多关于代码最简化

在重构的过程中，站在我个人的角度，针对代码开发的细节，说一说关于代码最简化的小经验。 1、同一个页面上js/css可能被你引入多次？ Ajax已被大家广泛应用，常常用来加载一些html的片段。Html片段可能有js的处理，这个时候可能在html片段中写一些js操作或者引入一些js文件，你可有检查，当前页面是否已经加载了该js。如果同一个页面没有被重新加载，不管以前在页面中有的，还是后来html片段中加载的，都会在当前页面生效。而不是片段中的js作用域只是这个片段。所以js不要重复引入，重复引入很有可能充掉你的全局变量，覆盖原来的同名js方法，也可能造成死循环等等问题。例如jquery文件，如果被多次引用就可能造成js死循环，很多原生的jquery方法不好用。针对这些问题，我们并不是要完全避免在ajax加载的html片段中不写js。而是根据实际情况做合理的安排。第一，千万不要重复加当前页面的js；第二，如果ajax加载的片段只会被当前页面加载一次，并且你写的js只是为当前片段服务，那你可以只在片段中引入；第三，当页面中的js超过20行或者会被多个页面使用的js，建议提取到单独的js文件中；第四，如果js方法是全局的，命名又很大众化像search(), find()，你可要小心了，很可能被别人的js覆盖，你也可能覆盖别人的，怎么办？那就了解一下js面向对象编程吧

(原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null

阅读更多关于 (原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null

html部分代码： JS部分代码：需要实现的效果：点击图片，来回相互切换。我开始的错误做法：代码如上图所示（逻辑上看起来是没有错误的）尝试过程：把JS代码放在</body>闭合标签之前运行是没有问题的，单独写在JS代码文件中，从head标签内引入JS文本，报错Uncaught TypeError: Cannot set property 'onclick' of null 最终解决方案：将JS代码放入window.onload = function(){.........}中，head标签内引入JS文本，便可以正确运行。O(∩_∩)O 第二种方法：如上文尝试过程中提到的，将JS代码写在</body>标签之前总结：如果把js直接写在head标签之内或者写成单独JS文件从head标签引入，浏览器则先执行JS代码，后加载页面，因此报错Uncaught TypeError: Cannot set property 'onclick' of null.将JS代码写在</body>标签之前或者写在window.load = function(){....}中引入html页面，则先加载页面，后执行JS代码，代码则会正常运行。来源： https://www.cnblogs.com/hekai123/p/8991249.html

js 已知对象中的每个成员值，如何找到这个成员所在的对象？

阅读更多关于 js 已知对象中的每个成员值，如何找到这个成员所在的对象？

比如有 { students : [ { id : 1 , name : '张三' } , { id : 2 , name : '李四' } , { id : 3 , name : '王五' } , { id : 4 , name : '孙六' } ] } 想要通过id或者name来找到对应的对象，用ES6的数组方法可以实现： let id = 1 ; let stu = students . find ( function ( item ) { return item . id === id ; } ) console . log ( stu ) ; // { id: 1, name: '张三' } 来源： CSDN 作者：饼小将链接： https://blog.csdn.net/weixin_44710964/article/details/104116103

js动态加载脚本

阅读更多关于 js动态加载脚本

　首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下： [javascript] view plain copy function functionOne(){ alert( "成功加载"); } 　后面的html文件都创建在同一个目录下。方法一：直接document.write 　在同一个文件夹下面创建一个function1.html，代码如下： [html] view plain copy < html > < head > < title > </ title > < script type= "text/javascript" > function init() { //加载js脚本 document.write(" < script src= 'package.js' > <\/script >"); //加载一个按钮 document.write(" < input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\ />"); //如果马上使用会找不到，因为还没有加载进来，此处会报错 functionOne(); } function operation() { //可以运行，显示“成功加载”

js学习笔记（对象~堆和栈）

阅读更多关于 js学习笔记（对象~堆和栈）

对象为什么要用对象让参数更少，代码更简洁什么是对象 1.现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。比如：一个人、一部手机 2.类和对象（1）类：描述一类事物，js里可以自定义类，同时也提供了一个默认的类叫做Obiect 比如：类：人类；对象：一个人 js中的对象 1.js中的对象是无序属性的集合，其属性可以包含基本值、对象或函数 2.对象就是一组没有顺序的值，由一组组键值对构成 3.事物的特征在对象中用属性来表示 4.事物的行为在对象中用方法来表示 js中对象的分类 1.内建对象（内置对象）由ES标准中定义的对象，在任何的ES的实现中都可以使用。Array、Boolean、Date、Math、RegExp、String、Number、Functions、Events 2.宿主对象有JS的运行环境提供的对象，现在主要指由浏览器提供的对象比如：BOM对象、DOM对象 3.自定义对象：我们自己创建的对象对象字面量字面量：10086，‘小花’，true，null，undefined，[]，{} 比如： var pe = { // 属性 name : 'hhhh' , age : 18 , sex : '女' , // 行为 dolt : function ( ) { document . write ( '我会跳舞！' ) ; } }

js缓冲运动

阅读更多关于 js缓冲运动

缓冲运动现象：逐渐变慢，最后停止原理：距离越远，速度越大速度的计算方式： 1，速度由距离决定 2，速度＝（目标值-当前值）/缩放系数说明：速度为正负数时，也决定了物体移动的方向示例：div缓冲运动 Bug: 1,div向右运动时，无法到达指定位置解决：速度向上取整,Math.ceil() 2,div向左运动时，无法到达指定位置解决：速度向下取整，Math.floor() 原因：速度为小数时，造成的总结：但凡做缓冲运动时，速度一定要取整速度为正，向上取整速度为负，向下取整注意：此时不需要用if/else隔开，因为速度最后会变成0,停止下来的 html部分 <input type="button" value="开始移动"　id="btn1" onclick="moveStart();" /> <div id="div1"></div> <div id="div2"></div> <style> #div1 { position:absolute; left:600px; width:100px; height:100px; background:red;} #div2 { width:1px; height:200px; position:absolute; left:300px; background:black;} </style> js部分 <script

js实现打字效果

阅读更多关于 js实现打字效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>js typing</title> 6 </head> 7 <body> 8 <div id='divTyping'></div> 9 <script> 10 var str = 'js 实现的打字效果，感觉蛮有趣的。'; 11 var i = 0; 12 function typing(){ 13 var divTyping = document.getElementById('divTyping'); 14 if (i <= str.length) { 15 divTyping.innerHTML = str.slice(0, i++) + '_'; 16 setTimeout('typing()', 200);//递归调用 17 } 18 else{ 19 divTyping.innerHTML = str;//结束打字,移除 _ 光标 20 } 21 } 22 typing(); 23 </script> 24 </body> 25 </html> 代码很容易懂，原来也没有想象的那么难来源： https://www.cnblogs.com/2YSP/p/9239817.html

动态加载JS代码

阅读更多关于动态加载JS代码

　　到处查资料研究js动态脚本的加载，找到以下7种方法，总有一种适合你！　　首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下： function functionOne(){ alert("成功加载"); } 　　后面的html文件都创建在同一个目录下。方法一：直接document.write 　　在同一个文件夹下面创建一个function1.html，代码如下： <html> <head> <title></title> <script type="text/javascript"> function init() { //加载js脚本 document.write("<script src='package.js'><\/script>"); //加载一个按钮 document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>"); //如果马上使用会找不到，因为还没有加载进来，此处会报错 functionOne(); } function operation() { //可以运行，显示“成功加载” functionOne(); } </script> </head>

JS实现打字效果

阅读更多关于 JS实现打字效果

最近参加了CSDN论坛举办的214情人节活动，就写个了页面，效果见： http://withiter.com/cross.jsp 这里我把代码共享出来，供大家参考： <html> <head> <title>I just wanna stay</title> <style type="text/css"> a { text-decoration: none } </style> </head> <body> <div id="newsticker"> <span id="tickertitle"></span><span style="color:green;" id="typewriter" href="javascript:void(0);"></span> </div> </body> </html> <script type="text/javascript"> var current = 0; var x = 0; var speed = 100; var speed2 = 10000; function initArray(n) { this.length = n; for ( var i = 1; i <= n; i++) { this[i] = ' '; } } typ = new initArray(16); typ[0] = "1) Do you have a

如何在浏览器控制台中引入外部 JS

阅读更多关于如何在浏览器控制台中引入外部 JS

背景在 JS 调试中需要使用外部函数 (例如 md5)，但是却不能在控制台中使用。解决方案例如加入以下 md5 所需 js： < script src = " https://cdn.staticfile.org/blueimp-md5/2.12.0/js/md5.min.js " > </ script > 可在 Chrome Console 中输入： var script = document . createElement ( 'script' ) ; script . src = "https://cdn.staticfile.org/blueimp-md5/2.12.0/js/md5.min.js" ; document . getElementsByTagName ( 'head' ) [ 0 ] . appendChild ( script ) ; 测试：本方法在 Chrome、Edge、Firefox上均可使用。其他浏览器未经测试不代表不能使用，具体请自行测试。 Chrome： Edge： Firefox：参考文章：https://www.zorkelvll.cn/blogs/zorkelvll/articles/2018/11/17/1542461611996 来源： CSDN 作者：果光链接： https://blog.csdn.net

订阅 js