在慕课学完javascript的入门课程总结

在慕课上学完了javascript的入门和进阶课程，感觉学完能对javascript会更加熟悉，感觉一般的使用是够了，但是ajax还有一些更高级的应用需要在用到的时候再去学了，目前的学习笔记如下：

慕课javascript入门课程记录

1.浏览器是按照书写的顺序来解析javascript代码的，因此css文件需要放在前头，但是通过事件调用的代码对位置没有什么要求

2.在页面上输出内容可以使用document.write()，如果需要输出html标签的话，直接在代码里用双括号括起来就行了，例如document.write("<inputtype='text' value='点我'>");

3.prompt(str1,str2)，弹出有输入框的对话框，str1是对话框显示的说明信息，str2是对话输入框显示的默认信息，如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入的文本。

4. window.open([URL], [窗口名称], [参数字符串])用来打开一个新窗口，窗口名称参数说明：

_blank：在新窗口显示目标网页_self：在当前窗口显示目标网页_top：框架网页中在上部窗口中显示目标网页，相同名字的窗口只能创建一个，不能包含空格，第三个参数自行搜索

5.html和javascript的解析顺序，看浏览器的不同，解释的顺序会有区别。

6.改变html的样式，Object.style.property=new style;例如：mychar.style.color="red";

7.显示或者隐藏元素，Object.style.display=valuevalue的取值为none时，隐藏对象内容，为block时，显示该元素为块级元素

8.修改标签的className属性，object.className=classname，以此类推，拿到对象以后，访问或者修改对象的属性都可以用object.property的形式来访问或者修改。

javascript进阶课程记录

变量：

变量名必须以字母，下划线或者美元符号开头，只能跟字母，下划线，数字和美元符号，大小写敏感，不要使用关键字和保留字

数组：

创建新数组是空数组，如果输出，则显示underfined，虽然创建数组的时候，指定了长度但实际上，数组是变长的

二维数组的定义方法：

var myarr = new Array();

for(var i=0;i<3;i++){

   myarr[i] = new Array();

   for(var j=0;j<6;j++){

       myarr[i][j] = i*j;

    }

}

或者

var myarr = [[1,2,3],[4,5,6]];

事件：

onselect事件，当文本框或者文本域中的文字被选中时，触发该事件

onchange事件，改变文本框的内容会触发onchange事件

onload事件，页面加载完成后，触发，该属性是body标签内的，先触发了这个事件，再显示网页内容，应该是不同的浏览器不同

onunload事件，当用户退出页面（页面关闭，页面刷新等）的时候，触发

window.onunload = onunload_message;

对象：

javascript中所有的实物都是对象，每个对象带有属性和方法

Date对象

getFullYear和setFullYear获得和设置对当前的年份

getDay返回当前日期是星期几，0表示星期天，1-6表示星期一到六

get/setTime获取或者设置当前时间，19700101以来的毫秒数

字符串：

获取指定位置的字符串方法charAt，标号在0和string.length-1之间，如果不是的话，就会返回一个空字符串

返回指定的字符串首次出现的位置stringObject.indexOf(substring,startpos)substring是需要检索的字符串，startpos是开始检索的位置，如果没找到返回-1

字符串分割stringObject.split(separator,limit)，separator是用来指定分割的符号，limit是分割后返回几部分内容，如果不指定，则无限制，如果把空字符串””作为separator那么每个字符之间都会被分割

字符串提取函数stringObject.substring(startPos,stopPos)startPos是开始位置，stopPos是结束位置，如果不写，默认到字符串的结尾，返回从start(包含)到stop-1处的所有的字符，如果两个参数相等，返回一个空串，如果stop小于start那么这两个参数的位置会自动交换

字符串提取函数stringObject.substr(startPos,length)startPos是截取开始的位置，length是需要截取的长度，如果参数startPos是负数，从字符串的尾部开始算起的位置开始截取，如果startPos为负数，并且绝对值大于字符串长度，startPos为0

Math对象

向上取整方法Math.ceil(x)，返回的是大于或者等于x，并且与x最接近的整数

向下取整方法Math.floor(x)，返回的是小于或者等于x，并且与x最接近的整数

四舍五入方法Math.round(x)，返回与x最接近的整数，对于0.5，该方法将进行上舍入，如果x与两则整数同等接近，则结果接近正无穷方向的数字值

随机数Math.random()，返回一个大于或者等于0但小于1的符号为正的数字值

数组：

数组连接方法arrayObject.concat(array1,array2,…,arrayN)把多个数组连接起来，使用了数组的拷贝

指定分隔符连接数组元素 arrayObject.join(分隔符)，用指定的分隔符把数组的每个元素分隔开

倒置数组顺序方法arrayObject.reverse()，将数组的顺序倒序，并不会改变原来的数组，不会创建新的数组

选定指定元素arrayObject.slice(start,end)会截取从start(包含)到end(不包含)的所有元素，如果end没有给定，将会从start一直到末尾，可以使用负数，从尾部开始选取元素

数组排序方法arrayObject.sort(方法函数)根据给定的方法来给数组排序，如果没指定就按照Unicode码顺序排序

方法函数的返回值如下

A和B比较

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示A 和 B 具有相同的排序顺序。
 若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

浏览器对象

window对象：主要学习计时器

setInterval(代码,交互时间)在执行时，从载入页面后每隔指定时间执行代码，代码就是函数

clearInterval(id_of_setInterval)取消定时器，参数是每次调用setInterval的时候返回的一个id值

setTimeout(代码,延迟时间)在延迟时间到到了之后，执行代码，这是一次性的定时器

clearTimeout(id_of_setTimeout)取消一次性定时器，参数是每次调用setTimeout的时候返回的一个id

history对象：

history对象记录了用户曾经浏览过的页面URL，并可以实现浏览器的前进与后退功能

history对象的属性：length，返回浏览器历史列表中的URL数量

history对象的方法：back()加载history列表中的前一个URL相当于window.history.go(-1)，forward()加载history列表中的下一个URL相当于window.history.go(1)，go()加载history列表中的某个具体的页面，0表示当前页面

使用方法：window.history.[属性\方法]

location对象

location用于获取或设置窗体的URL，并且可以用于解析URL

例如：想要获取到主机名，用location.hostname即可

方法：

assign()加载新的文档，reload()重新加载当前文档，replace()用新的文档替换当前文档

navigator对象：

navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

navigator.userAgent在主流的浏览器中返回的信息：

screen对象：

用于获取用户的屏幕信息

属性有：

DOM

document.getElementsByName(name)通过name拿到对象数组

document.getElementsByTagName(TagName)通过标签名拿到对象数组，返回元素的顺序是他们在文档中的顺序

elementNode.getAttribute(name)元素的节点，可以使用该方法获取到属性的值，name为属性的名字

elementNode.setAttribute(name,value)元素的节点，可以使用该方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

节点的属性：

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是#text
4. 文档节点的 nodeName 永远是#document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

子节点：

elementNode.childNodes获取到节点下的子节点的数组，注意：这里不同的浏览器计算子节点的方式不太一样

上述图，IE算三个子节点，但是其他浏览器可能算七个子节点，如果需要找到实际的节点，可以通过节点类型nodeType属性来过滤

node.firstChild属性，返回第一个子节点，如果没有返回null

node.lastChild属性，返回最后一个子节点，如果没有返回null

elementNode.parentNode属性，访问父节点，父节点只能有一个

elementNode.nextSibling属性，返回某个节点之后紧跟的节点（处于同一树层级中），如果无此节点，返回null

elementNode.previousSibling属性，返回某个节点之前紧跟的节点（处于同一树层级中）如果无此节点，返回null

appendChild(newnode)在指定节点的最后一个子节点列表之后添加一个新的子节点，创建一个新节点使用document.createElement()，设置完相关属性后，添加到最后

insertBefore(newnode,node)在已有的子节点前插入一个新的子节点，例如otest.insertBefore(newnode,node)表示在otest节点下，在子节点node的前面，加入newnode节点

nodeObject.removeChild(node)从nodeObject的子节点列表中删除某个节点(node)，如删除成功，此方法可返回被删除的节点，如失败，返回null

nodeObject.replaceChild(newnode,oldnode)实现子节点的替换，返回被替换的对象的引用

document.createElement(tagname)创建元素节点，返回一个元素对象，参数为需要创建的元素的类型

document.createTextNode(data)创建新的文本节点，返回新创建的Text节点，data是字符串值，可规定此节点的文本

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及Safari：

•  window.innerHeight - 浏览器窗口的内部高度

•  window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

•  document.body.clientHeight

•  document.body.clientWidth

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth

   ||document.body.scrollWidth;

var h=document.documentElement.scrollHeight

   ||document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth

   || document.body.offsetWidth;

var h= document.documentElement.offsetHeight

   || document.body.offsetHeight;

还有网页卷去偏移量等，这些属于页面设计和前端部分的内容，没有记录下来了