JS笔记

这个笔记主要是针对于我看了JS权威编程指南后偶有感悟写的
由于我昨天已经看了五十页，现在就从中间开始写吧
现在是JS的算术运算：
算术溢出时不会报错，会用Infinity来表示（正无穷大），当然加个负号就是负无穷大了

Var n=17;//利用to.String来转化进制
binary_string=n.toString(2);//转换为"10001"
octal_string="0"+n.toString(8);//转换为"021"
hex_string="0x"+n.toString(16);//转换为"0x11"

更多特定版本的to.String()方法：
数组=>转化=>每个数组元素转化为一个字符串，然后用逗号间隔，最后再合并成一个字符串。
函数类(Function class)=>转化=>返回这个函数定义的表达方式。
日期类(Date class)=>转化=>返回一个可读的日期和时间字符串。
RegExp类=>转化=>将RegExp对象转化为正则表达式直接量的字符串。

对象转化为原始值：
所有对象都继承了两个转化方法：
第一个是to.String(),返回一个反应这个对象的字符串。
第二个是valueOf(),对于valueOf，如果存在任意原始值，它就默认将对象转换为它的原始值。
对象是复合值，而且大多数对象无法真正表示为一个原始值。数组，函数，和正则表达式简单的继承了这个默认方法，valueOf()方法只是简单的返回对象本身。

JavaScript中对象到字符串的转化所需要的步骤：
首先：如果对象具有to.String()的方法，那么首先调用这个方法，如果返回一个原始值，那么JavaScript就将这个值转化为字符串并返回这个字符串的结果。（原始值=>字符串）
第二：如果对象没有to.String()方法，或者这个方法不返回一个原始值，那么就会调用valueOf()方法。如果存在这个方法，则调用。如果返回值是原始值，就把这个值转化为字符串。，并返回这个字符串的结果。
否则：无法从这两个方法之中获得一个原始值，那么将抛出一个类型错误异常。
<在对象到数字的过程中，也是同理，但是首先调用的是valueOf()方法。>
例子：空数组转化为0的过程：空数组=>空字符串=>0.

var o={x:1,y:{z:3}};//一个示例对象
var a=[o,4,[5,6]];//一个包含这个对象的示例数组
o.x=>1
o.y.z=>3
o["x"]=>1
a[1]=>4
a[2]["1"]=>6//表达式a[2]中索引为1的元素
a[0].x=>1//表达式a[0]的x属性

左移<<,将一个值左移一位相当于它乘以2，右移一位除以2（忽略余数）
带符号右移>>
无符号右移>>>

1+2//结果是3
"1"+"2"//结果是"12"
"1"+2//2转换为"2"。结果是12
11<3//结果是false
"11"<"3"//字符串的比较，结果为false，这里比较Unicode码
"11"<3//数字的比较，"11"转换为11.结果为false
"one"<3//数字的比较，"one"转换为NaN，结果false(如果其中一个操作数是NaN，那么结果总是返回false)

JavaScript语句小结
**break break[label] ** 退出最内层循环或者退出switch或者退出label指定的语句
case case expression： 在switch语句中标记一条语句
continue continue[label]； 重新开始最内层的循环或者重新开始label指定的循环
**default ** 在switch语句中标记默认的语句
do/while
for
**function function name(param[],...){body} ** 声明一个函数
**if/else if(expr)statement1 [else statement2] ** 执行statement1或者statement2
label label:statement 给statement制定一个名字

CSS

盒模型，浮动，定位，清除浮动
CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素
使用CSS的overflow属性；
使用CSS的:after伪元素；
使用邻接元素处理；

盒模型
盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。

写出几种IE6 BUG的解决方法

双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码 改
Min-height 最小高度 ！Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

定位
定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative）。
绝对定位
将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。

相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.

1、 get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

2、 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。

3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.

4、get安全性非常低，post安全性较高。
清除浮动有哪些方式？比较好的方式是哪一种？
(Q1)
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
(Q2)比较好的是第3种方式，好多网站都这么用。

Doctype作用？标准模式与兼容模式各有什么区别?
(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作
doctype用来规范浏览器的行为
经过总结使用Ajax可以分为四步，分别如下：
1：创建引擎（xmlHttpRequest对象）
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的，针对IE使用ActiveXObject,针对其他浏览器用xmlHttpRequest,但是如果针对不同版本的的浏览器可以使用“try and catch”语句来进行创建
2：事件处理函数，处理服务器的响应结果。
onreadystatechange事件:该事件处理函数由服务器触发，而不是用户，相当于监听，监听服务器每个动作
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。分别是：
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
status 属性表示状态码，也是用数字表示，分别是：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
responseText属性包含了从服务器发送的数据
每次 readyState 值的改变，都会触发 readystatechange 事件
3：打开一个连接open(method, url, asynch)
允许客户端用一个Ajax调用向服务器发送请求。
三个参数的含义如下：
method：请求类型，类似 “GET”或”POST”的字符串
url：请求路径字符串，指向所请求的服务器上的那个文件（servlet，jsp，action）
asynch：表示请求是否要异步传输，默认值为true(异步)
4：发送数据send(data)
data:向服务器发的数据，如果是get方式data为null就行，即使传了参数，服务器也收不到。如果为post方式在send(data)之前还要设置requestHeader("Content-Type","application/x-www-form-urlencoded")。

  new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

Ajax

第一步：
var xhttp;
if(Window.XMLHttpRequest)
{
    xhttp=new XMLHttpRequest();
}
else
{
    xhttp= new ActiveXObject("Microsoft.XMLHTTP");
}

第二步：
post 发送请求什么时候能够使用呢？
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器，因为post请求没有字符限制。
(3)发送用户输入的加密数据

xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器

get例子：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send(); 

post例子

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。

post表单例子

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); 
async=true 当服务器准备响应时将执行onreadystatechange函数。
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send(); 
asyn=false 则将不需要写onreadystatechange函数，直接在send后面写上执行代码。
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; 

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据，使用responseXML属性得到服务器响应的XML数据。

例子如下：

document.getElementById("demo").innerHTML = xhttp.responseText; 
服务器响应的XML数据需要使用XML对象进行转换。

例子:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("demo").innerHTML = txt; 

第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。
status属性，200表示成功响应，404表示页面不存在。
在onreadystatechange事件中，服务器响应准备的时候发生，当readyState==4和status==200的时候服务器响应准备。

例子：

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 

//函数作为参数调用

Let AJAX change this text.
Change Content

几种浏览器的内核：
一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
2
二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
3
三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
4
四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
接下来是我看JavaScript的一些笔记
Windows对象定义了一些方法，比如alert(),可以弹出一个对话框用来显示一些信息，还有setTimeout(),可以注册一个函数，在给定的一段时间触发一个回调：

setTimeout(function(){ alert("hello word");},2000);//等待两秒，然后说hello

innerHTML的用法：
innerHTML在HTML中是双向功能：获取对象的功能或者向对象中插入内容。

这是内容
 
//我们可以通过下面这句来获取id为aa的对象的内嵌内容；
 document.getElementById('aa').inner[HTML]；

也可以对某对象插入内容

 document.getElementById('abc').inner[HTML]='这是被插入的内容'; //这样就能向id为abc的对象插入内容。