professional-javascript-for-web-developers-3rd-edition's People
professional-javascript-for-web-developers-3rd-edition's Issues
2018-2-4 JS高程 第五章
Object对象
一、在对象最后一个属性后加逗号,在IE7之前和Opera中报错
二、 对象创建步骤:
1. 创建空对象
2. this指向空对象
3. 空对象原型指向构造函数prototype属性
4. 执行构造函数中代码
三、 对象字面量创建创建对象 let obj={name:'xx'}
,不会调用Object构造函数
四、属性名中可以包含非数字、字母(因为是字符串,比如空格),此时得用中括号访问
Array对象
五、Array,ECMAScript中数组可以动态调整大小(String不行,变化之后获得的是另一个字符串)
六、[,,,,,,]这里IE8↓会解析出六个undefined,其他浏览器是五个(忽略最后一个逗号)
七、数组length非只读,会以undefined填充
八、数组的确定:
···
- instanceof 操作符,问题在于网页包含多个框架,也就有了多个不同 的全局环境及Array构造函数
- Array.isArray() 新增,可准确判断,IE9↑
- 不支持Array.isArray()的,参见 22.1.1节
···
九、Object.prototype.toLocaleString() 特定语言环境目的而重载使用 (Date/Number/Array)
十、push()和unshift返回的都是 数组的长度
十一、sort(),函数参数比较时,只函数参数是 数值或valueOf可变为 数值 时可直接返回 a-b实现升序
十二、concat()直接调用获得副本。不改变原数组
slice(a,b)获取a~b-1的副本。不改变原数组
splice() 删除插入。改变!!!
待填
String
一、 双字节字符length也是1
二、slice==subString,负值参数时,slice为负+length,subString为0,subStr-a始b个,第一负+length,第二负为0
三、replace方法,第一参数string或regexp,第二参数string或function
四、fromCharCode()接收字符编码多个,返回字符串,行为大致与charCodeAt()相反
2018-05-07 JS高程 第七章 BOM
1,BOM核心为window对象,表示浏览器的一个实例(只关系浏览器,与网页实际内容无关)
双重身份:
1:ECMAScript访问浏览器的接口
2:ECMAScript规定的Global对象(在nodejs中Global就不是window)
2,由于window身为Global,全局域中定义属性方法都是window的属性
全局域中直接定义和定义在window对象上的属性定义还是有区别:前者不可用delete操作符删除(因为configurable为false)
可以通过 window.xx来进行属性查询-是否定义,这样不会报错,未定义就是undefiend
3,页面中有框架的,则有多个window对象,存储在frames集合中(对全局window来说,就是window.frams)-可通过序号或name属性值 访问
访问框架时最好用 top而不是window对象,因为top始终指向最外层框架(也就是浏览器对象),而在某框架内的window指向的是框架本身而不是浏览器对象
与top相对应的有parent对象->指向父框架(没有就指向最外层框架,也就和top一样)
还有一个self属性,指向window自己:window.self===window
4,框架的name属性,用来表示框架,除非是用window.open()打开的最外层框架,否则它的name属性不会有任何值
5,另外:不同框架由于Global不同(也就是window不同),原生类型的构造函数也不同(也就是top.frames[0].Object!==top.Object)---很容易理解,注意这里影响到跨框架使用instanceOf判断类型
6,window.screenLeft/Top(Chrome/IE/Safari/Opera) window.screenX/Y(Firefox)
值得注意的是:Opera/IE中 window.screenLeft/Top表示的是电脑屏幕左上方到 window(框架window也是如此)指向的页面(注意不是整个浏览器,而是页面) 可见区域的左上方的距离(也就是说,Opera/IE满屏时最外层window的这两个值也不是0)
即使框架设置了外边距发生偏移,Firefox/Chrome/Safari获得的值始终是top.screenX/Y(平时也是这样),只有IE/Opera可以获得框架相对屏幕的实际精确坐标
7,尽管不能跨浏览器精确获得窗口左上坐标,但是通过moveTo/moveBy可以将窗口精确移动到某位置
五大浏览器innerWidth/Height,outerWidth/height值分3类:
1. IE9+ Safari Firefox outerWidth/Height获得的都是浏览器窗口本身尺寸(无论内外层window)
innerWidth/Height表示容器中页面视图区的大小(减去边框宽度)
2. Opera outerWidth/Height表示页面视图容器的大小(单标签对应的页面)
innerWidth/Height同上
3. Chrome outerWidth/Height innerWidth/Height值都是viewport(视口)而非浏览器大小
附:
1,Chrome实测:innerHeight(视口高-不包括工具栏) outerHeight(浏览器窗口高度)
63.0.3239.132 innerWidth (视口宽) outerWidth(浏览器窗口宽)
结论:新版Chrome中(1918,1078),innerWidth/Height表视口宽高,outerWidth/height表浏览器窗口宽高
2,Firefox实测 innerHeight(页面视图区高-不包括滚动条) outerHeight(浏览器高度)
59.0.3 innerWidth(页面视图区宽-不包括滚动条) outerWidth(浏览器宽度)
结论:新版Firefox中(1936,1096),innerWidth/Height表页面视图区(不包括滚动条),outerWidth/Height浏览器窗口宽高(备注:Firefox获取的总宽高似乎总是相比火狐多18px)
3,Opera实测(979 1078) innerHeight(页面视图区-就是单页面容器区-滚动),outerHeight(单页面容器)
(1878 1918) innerWidth、outerWidth同上
结论:新版Opera中,innerWidth/Height表页面视图区,outerWidth/Height表页面视图容器(多了个边框)
4,IE获得的值较怪异,width与Firefox基本一致,但是高度计算出现问题
8、获取视口宽高:document.documentElement.clientWidth/Height(IE6混杂模式中用document.body.clientWidth/Height)可以通过 document.compatMode确定是否是标准模式
Chrome中:
document.documentElement.width小于等于innerWidth小于等于outerWidth
//outerWidth为窗口大小,innerWidth为包括滚动条区域大小,client为视口大小
Firefox中:
与Chrome表现一致
9、window.open(url,target)打开新窗口 target可以是已有窗口的名字,也可以是新窗口的名字,也可以是_parent/_self/_top/_blank
10、通过window.open() 返回值 判断 是否被屏蔽,为防止 抛出错误(try-catch)
11、eval方法或setTimeout中传字符串运行造成性能损失,因为需要再次调用解释引擎
12、严格模式下的 this指向 undefined
13、系统对话框
alert() 警告语句
confirm() 是、否问题
prompt(String,default) 询问句,结果不为 null时 说明有回复
另外,可通过window.print()打开打印 window.find()打开查找(chrome打开此失败)
14,location对象:同时被window.location 和 window.document.location 引用
href: 完整的 url
pathname: url中的目录、文件名
search: 查询字符串
host: 服务器名称和端口号
修改location各属性可以直接改变当前网页,特别的:
location.replace():可以跳转并避免留下记录
location.reload() :可以刷新(默认从缓存,强制从服务器则传true)
2018-04-26 JS高程 第七章 函数表达式
2018-02-24 JS高程 第六章 面向对象的程序设计
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.