在慕课上学完了javascript的入门和进阶课程,感觉学完能对javascript会更加熟悉,感觉一般的使用是够了,但是ajax还有一些更高级的应用需要在用到的时候再去学了,目前的学习笔记如下:
慕课javascript入门课程记录
1.浏览器是按照书写的顺序来解析javascript代码的,因此css文件需要放在前头,但是通过事件调用的代码对位置没有什么要求
2.在页面上输出内容可以使用document.write(),如果需要输出html标签的话,直接在代码里用双括号括起来就行了,例如document.write("
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文档的
标签• 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;
还有网页卷去偏移量等,这些属于页面设计和前端部分的内容,没有记录下来了