js | 易学教程

JS 预编译

阅读更多关于 JS 预编译

第一步：语法分析第二步：预编译第三步：解释执行　　1. 语义分析　　　　语义分析是通篇执行的一个过程。不如有一篇代码，在执行时是解析一行执行一行，但在执行之前系统执行的第一步它会扫描一遍，看看有没有低级的语法错误，比如少些个符号，带个特殊字符之类的。此时通扫一遍，但是不执行，这个通篇扫面的过程叫语义分析，通篇扫面后就会预编译，然后解释一行执行一行，也就是解释执行。　　2. 预编译　　　　 1. imply global ：暗示全局变量：即任何变量，如果变量未经声名就赋值，自变量就为全局对象所有 a = 10; // 这种应该就是 imply global 了 console.log(a); // 打印 10 window.a; // 10 说明 window 属性上有 a var b = 20; // 声名了 b, 此时 window 也有了 b 　　　　2. 一切声名的全局变量，全是 window 的属性　　　　3. 函数声名提升：如果写了一个函数声名，无论写在哪里，浏览器都会把这个函数提到逻辑的最前面。函数声名整体提升　　　　 4. 变量声名提升所以系统只提升变量，而不是变量带着值一起提 var a = 123; // 上面的变量声名分为两步 var a; // 第一步，声名变量 a = 123; // 第二步，变量赋值 console.log(a

JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测

阅读更多关于 JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测

变量命名变量名：字母数字下划线美元符$ jquery: $ $.each() $ === jQuery underscore( js的一个函数库) : _ _.each() 关键字 : if for 保留字 : class 推荐有意义的命名： buttonCancel button_cancel btnCancel 数据类型和堆栈基本类型（可以修改） : 4 str true undefined null 引用类型（不能修改） : { } [ ] var score = 40; score = 50; 上面属于覆盖，不属于修改 var str = "hello"; var newStr = str.replace("h", ""); document.write( str + "/" + newStr); 字符串操作返回新的字符串，原字符串没有改变 var obj = {}; console.log(obj); obj.name = "cyy"; obj.age = 25; obj.name = "cyy2"; delete obj.age; console.log(obj); 引用类型的属性可以添加，可以修改，可以删除 var name = "cyy"; name.age = 25; console.log(name.age);//undefined

JS预编译

阅读更多关于 JS预编译

JS预编译 js运行三部曲语法分析预编译解释执行 ** 预编译 ** 预编译发生在函数执行前的一刻。简单现象：函数声明整体提升, 变量声明提升（定义赋值不提升） ** 预编译过程（四部曲）：** 1.创建AO对象（Activated Object）（执行期上下文） 2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined。 3.将实参值和形参统一。 4.在函数体里面找函数声明，值赋予函数体。 function fn(a){ console.log(a); var a =123; console.log(a); function a(){}; console.log(a); var b = function(){}; console.log(b); function d(){}; } fn(1); //解析一、预编译过程： 1.创建AO对象，找形参和变量声明，将变量和形参名作为AO属性名，值设置为undefined。 AO{ a:undefined, b:undefined, } 2.形参和实参统一 AO{ a:1, b:undefined, } 3.找函数声明，值赋予函数体 AO{ a:function a(){}, b:undefined, d:function d(){}; } 二、执行过程 1.第一个console.log(a):function

js异步加载的5种方式

阅读更多关于 js异步加载的5种方式

方案1： $(document).ready 点评： 1、需要引用jquery 2、兼容所有浏览器。方案2 ： <script>标签的async="async"属性 async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。点评： 1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。 2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。方案3 ： <script>标签的defer="defer"属性 defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。方案4：动态创建<script>标签示例： <!DOCTYPE html> < html > < head > < script type = "text

js实现web网页版台球游戏

阅读更多关于 js实现web网页版台球游戏

js桌球小游戏在线试玩地址： http://keleyi.com/game/13/ 游戏截图：完整代码，保存到html文件可以试玩： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js实现web页面台球游戏特效 - 柯乐义</title> 6 <link href="http://keleyi.com/game/13/css/keleyi.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="http://keleyi.com/game/13/js/keleyi.js"></script> 8 </head> 9 <body> 10 <div id="table"> 11 <div id="scoreBoard"><

js异步

阅读更多关于 js异步

默认情况下的javascript是同步加载的，这里的加载可以理解成为解析执行。也就是js加载时是阻塞的，先加载完js，在加载css和dom。过多js加载会影响页面效率，一旦网速不好，那么整个网站将会等待js加载而不进行后续渲染工作。所以这时就会设置异步加载常见的异步加载有三种方法： 1.在script标签中设置defer，等待dom解析完成才会执行，但是这个方法有局限性，只有IE才能用 <script defer></scrpit> 2.async,等待dom加载完成才会执行 <script async></script> 3.动态添加script标签 function loadScript(url,callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){//兼容IE script.onreadystatechange = function(){ if(script.readyState =="complete" || script.readyState == "loaded"){ obj[callback]() } } }else{ script.onload = function(){ obj

js 一些知识点

阅读更多关于 js 一些知识点

1，什么是命名空间，变量污染，变量声明提升？如何检查一段代码执行后是否声明了全局变量？ 2，隐式转换的种种规则 3，关于对象，对象的属性可能有哪些特性(attribute)？什么是原型链？如何检测某一属性是在对象中还是原型链中？如何检测是否是普通对象或空对象？写一个工厂模式？(工厂模式也有很多细节，具体可以参考《javascript模式》一书，不是《javascript设计模式》) 4，变量类型检测、特性检测以及异常避免 5，setTimeout的特性 6，数组几个API的手工实现 7，事件 8，正则表达式，至少要明白$1和\1的意思和几个API的用法。 DOM操作 1，实现一些API如getElementsByClass（有很多细节，参见司徒正美的博客） 2，各种宽度高度(clientHeight之类)的含义及各浏览器之间的差异性 3，实现一个带回调函数的插入DOM节点API（须考虑script标签、documentFragment） CSS操作 1，如何操作CSS的伪类和伪元素？ 2，如何检测改浏览器是否支持某个CSS3的特性？ ajax操作 1，get和post的区别及使用要点 2，http协议，包括格式、状态码，cookie操作 3，跨域 4，转换JSON的几种方式来源： https://www.cnblogs.com/asmg/p/3573870.html

js基础知识

阅读更多关于 js基础知识

2.10 1.js常见的三种输出语句 console.log() 在浏览器的控制台输出 Alert() 弹出一个对话框 document.write()在页面输出 2.script标签是否可以在html中任意放置。不可以，跟内容的执行顺序有关。如果想任意放置script标签，需要在里面写window.onload. Html中内容的执行顺序 1.解析html结构 --浏览器的一个解析器解析标签从上到下 2.引入样式文件css文件和脚本文件js文件 3.解析和执行脚本代码 ----浏览器中的js引擎执行的 4.加载图片（视频和音频）资源 5.加载css的样式代码 6.执行window.onload操作所有文档加载完成之后再执行跟html中内容的加载顺序有关。 Window.onload的优势 1.将里面的代码放在最后执行 2.形成私有作用域保护里面的变量不受外部影响 3.每个js文件只能有一个window.onload 最后面的会覆盖掉前面的。三 web前端的三个层（三件套/三剑客） 1.html 结构层 2.css 表现层 3.js 行为层开发过程中要保持三者分离。尽量不要耦合在一起。这叫结构和行为耦合，避免这种写法。阻止超链接刷新页面。四 1.变量的存储方式。 2.作用域的问题 3.函数的问题 4.数据类型 1)变量的存储方式浏览器在执行js代码的过程中

js的各种继承

阅读更多关于 js的各种继承

1、实例，原型对象，构造函数之间的关系如图:借用__proto__一级一级实现原型链（一般最后为Object.prototype.__proto__ = null） 2、原型链继承:将父类构造函数的实例变成子类的原型代码： <script> function Parent() { this.parentName = 'zzz'; } Parent.prototype.getParent = () => { return 'parent' }; function Child() { this.childName = '233'; } Child.prototype = new Parent(); Child.prototype.getChild = () => { return 'Child' }; let child = new Child(); console.log(child); </script> 结构如下：作用：父类的方法和属性存在于原型两种，可以调用；缺点：父类中存在引用类型时，原型链调用会共享一个引用类型 2、es6语法实现继承代码： <script> class Parent { constructor() { this.parentName = 'zzz'; } getParent() { return 'parent'; } } class Child

js中的 == 与 === 、永远不要使用 ==

阅读更多关于 js中的 == 与 === 、永远不要使用 ==

前言：　很久没有复习基础了，所以导致做项目的时候被坑，咳咳，基础还是很重要的。　　=== 是没有强制类型转换的，和其他大部分语言的 == 是一样的。而js中 == 是有类型转换的，这也是js饱受诟病的原因之一。那么 == 的转换规则是什么呢？　　比如说 "true" == true 就是错的， Boolean("false") == false 也是错的。　　也就是说，对于 == 是有一定的类型转化的。 '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true 　　比如，这里的一个是string，一个是布尔值，就都会向数字进行转化，那么"true"转化为了 NaN, 而 true 转化为了0，自然就是不相等了。而Boolean("false")为true，所以也是不相等的。　　基础：　　js中提供了两组操作符，相等和不相等 --- 先转换再比较，全等和不全等 --- 仅比较而不转换。　　1. 相等和不相等　　相等即 ==

订阅 js