professional-javascript-for-web-developers-3rd-edition's People

Watchers

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.

tryingpzm / professional-javascript-for-web-developers-3rd-edition Goto Github PK