黑马程序员毕向东JavaScript从入门到精通3Word格式.docx
《黑马程序员毕向东JavaScript从入门到精通3Word格式.docx》由会员分享,可在线阅读,更多相关《黑马程序员毕向东JavaScript从入门到精通3Word格式.docx(18页珍藏版)》请在冰点文库上搜索。
循环结构
while语句,do-while语句,for,for-in语句(依次访问“对象”中每一个成员属性,将其引用放置到变量中)
break,continue,同java
函数
函数本身就是一个对象,通过函数名调用(注意没括号)JavaScript中函数没有重载形式;
函数中有个局部变量数组arguments,存放传来的参数。
1.普通函数
functionshow(arr){
alert("
Helloworld"
+arr);
returntrue;
}
2.动态函数,通过JS内部类Function类创建:
varshow=newFunction("
x"
"
y"
varsum=x+y;
returnsum"
);
3.匿名函数:
varshow=function{
funcrun!
"
functionshow(){returnalert("
show"
varmethod=show();
//method接受返回值
varmethod=show;
//method指向show对象,即可通过method()方式调用show方法
4.Arguments:
所有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数。
他不是一个数组,如果用typeofarguments,返回的是‘object’。
虽然我们可以用调用数据的方法来调用arguments。
比如length,还有index方法。
但是数组的push和pop对象是不适用的
对象
通过函数可以对对象进行描述
functionPerson(age,name){
this.age=age;
this.name=name;
可以通过p["
age"
]和p.name两种方式调用属性
With语句
在with语句中可以随时使用对象的属性或方法,确定某一个对象作用的范围。
with(stu){
alert(name+"
..."
+age);
等价于:
alert(stu.name+"
+stu.age);
标准容器
1.数组
Array对象,javascript中数据相当于集合,可变长度
·
vararr=[4,23,6,9];
属性:
length---
方法:
pop()---push()---shift()---unshift()---valueOf()---toString()...
1.Map
`vardata={type:
'
person'
id:
id,}`
全局方法
eval(),eval(codeString)将该参数当做JavaScript语句来执行。
内置对象
prototype属性:
返回对象类型原型的引用。
用prototype属性提供对象的类的一组基本功能。
对象的新实例“继承”赋予该对象原型的操作。
Array.prototype.getZuiDa=getMax;
(注意getMax中用this代替对象)
字符串String对象
length。
match()//---
Math对象
提供基本数学函数和常数。
Global对象
封装全局方法。
parseInt()方法,将字符串转换数字(对于toString);
i
isNaN()方法,判断是否数字;
escape()//将参数字符创中特殊字符替换为%加上该字符unicode两位十六进制字符,或%u加上unicode四位十六进制字符。
unescape()//与escape()相反
encodeURI()//encodeURI()函数可把字符串作为URI进行编码
该方法不会对ASCII字母和数字进行编码,也不会对这些ASCII标点符号进行编码:
-_.!
~*'
()。
该方法的目的是对URI进行完整的编码,因此对以下在URI中具有特殊含义的ASCII标点符号,encodeURI()函数是不会进行转义的:
;
/?
:
@&
=+$,#
decodeURI()//与encodeURI相反
Date对象
Date()无参数返回当前时间;
getYear(),getMonth(),getDate(),getDay()分别获取年月日星期(Month从0到11)
window对象
navigator对象//包含关于Web浏览器的信息appName//浏览器名称---appVersion//浏览器版本---platform//操作系统
history对象//包含了用户已浏览的信息
location对象//包含关于当前URL的信息
screen对象//客户屏幕和渲染的信息
event对象//代表事件状态
keyCode//获取按键的unicode编码---returnValue//设置获取事件返回值---srcElement//获取事件源对象
alert()---confirm()//确认窗口---prompt()//可输入对话框窗口---close()---open()---showModalDialog()//模式对话框,返回returnValue,中断脚本执行---showModelessDialog()//非模式对话框,返回打开对话框页面,不中断脚本执行---moveBy()相对给定偏移值移动---moveTo---resizeBy()---setTimeout()//经过指定时间计算表达式---setInterval()//每经过指定时间计算表达式---clearTimeout()//以setTimeout返回值为参数setTimeout()---clearInterval()
事件:
onload()---onunload()--onbeforeunload()
应用:
文本展开收缩:
通过overflow属性的hidden与visible相互变换
通过display属性的block和none相互变换
Location对象
包含了关于当前URL的信息
属性:
hash---host---hostname---href---pathname---port---protocol---search
方法:
reload()---replace(url)//LoadsthespecifiedURLoverthecurrenthistoryentry.---assign(url)
div对象
offsetwidth//div标签宽度---offsetHeight
table对象
rows---rows[0].cells
deleteRow()---rows[0].deleteCell()---insertRow([iIndex])//在firefox中这个参数是必需的---rows[0].insertCell()
select对象
options---selectedIndex//被选中脚标
关于:
可以直接通过将options.length置为0从而删除所有选项。
单选框复选框
属性
checked//单选框复选框状态---
textNode对象
data//textNode对象的值--nodeValue
琐碎:
标签(td)中有innerText属性,表示内部文本,直接被当做字符串使用;
而innerHTML属性则会将属性内容解析后添加到标签中
获取被选中checkbox,通过checked属性状态完成
form对象
onsubmit//若event.returnValue为false则不能提交
正则表达式
两种语法:
1.直接用//包装
2.RegExp对象
test()//返回boolean,查找是否存在模式---
正则表达式验证
1.可以使用string中match方法,如果返回数组为空则不符合,否则符合
2.RegExp的test方法
Dom编程
Documentobjectmodel文档对象模型,将标记性语言的标签封装成对象。
dom三层模型:
dom1:
将html文档封装成对象。
dom2:
将xml文档封装成对象。
dom3:
Dhtml:
htmlcssdomjavascript
html负责将数据进行封装.
dom将标签封装成对象
css负责标签中数据的样式.
javascript将三者进行融合,通过程序设计方式来完成动态效果的操作。
+xmlHttpRequest----->
Ajax
标签存在层次关系(树形结构,除根结点只有一个父节点,多叉树):
html
|----head
|----title
|----base
|----link
|----body
|----div
节点关系
父节点parentNode----子节点childNodes----兄弟节点:
上一个兄弟节点previousSibling----下一个兄弟节点nextSibling
添加删除结点:
appendChild()---removeChild()
DOM对已标记型文档解析的弊端就是文档过大相对消耗资源,对于大型文档可以使用SAX这种方式解析。
空行文本在某些浏览器(如IE)中被解析为空白文本结点
结点类型
1.标签结点,类型1
1.属性结点,类型2(可通过attributes获取属性)
1.文本型结点,类型3
1.注释,类型8
1.document,类型9
获取结点可以通过节点层次关系完成,也可以通过document对象完成。
getElementById()//通过id,如果多个id相同,获取第一个id对应对象
getElementsByName()//通过name,返回对象数组
getElementsByTagName()//通过tagname标签名,返回对象数组
all//获取容器下所有节点,不拿文本节点
all(index)//获取该索引节点
获取事件源对象的两种方式:
1.通过event对象的srcElement属性
2.将事件源对象通过this传入
domforjava(dom4j)
document.cookie
Cookie是document对象的子对象。
由于Http特点(1.支持客户/服务器模式2.简单快速3.灵活4.无连接5.无状态)中无连接无状态的特点,服务器不能够区分出每次访问者之间的不同。
为了解决这个问题,Cookie因而诞生。
Cookie是一小段文本信息,被保存在客户端。
每次浏览器访问服务器时候,会自动提交这段信息给服务器,服务器上的可执行程序就会获得这段信息并且根据该信息进行相应处理。
Cookie优点:
1.可配置到期规则2.不需要任何服务器资源3.简单性4.数据持久性5.文件安全性
限制:
1.大小收到限制(大多数浏览器4K限制,当今8K更为常见)2.用户配置为禁用3.潜在的安全风险
规则:
字符串存储进cookie中时候内容为累加的,各段内容由分号隔开。
索引关键字并不需要遵从JavaScript变量命名规则,可为中文,同一个关键字所具有的值相互覆盖。
字符串长度总和应小于4K
Cookie中不允许出现非英文字母、非数字字符。
Cookie内容:
1.有效期expires=2008年1月1日1:
42:
12//将有效期设置在当前系统时间之前可以删除Cookie
2.域domain
3.路径path=//设置路径后,该Cookie只能被该路径下的页面获取
Cookie有效期,域名,路径可以同时设置,无所谓先后。
Cookie欺骗:
Cookie可以被跨域修改
Json
JSON:
JavaScript对象表示法(JavaScriptObjectNotation)。
JSON是存储和交换文本信息的语法。
类似XML。
JSON-转换为JavaScript对象
JSON文本格式在语法上与创建JavaScript对象的代码相同。
由于这种相似性,无需解析器,JavaScript程序能够使用内建的eval()函数,用JSON数据来生成原生的JavaScript对象。
为什么使用JSON?
对于AJAX应用程序来说,JSON比XML更快更易使用:
使用XML
∙读取XML文档
∙使用XMLDOM来循环遍历文档
∙读取值并存储在变量中
使用JSON
∙读取JSON字符串
∙用eval()处理JSON字符串
JSON语法规则
JSON语法是JavaScript对象表示法语法的子集。
∙数据在名称/值对中
∙数据由逗号分隔
∙花括号保存对象
∙方括号保存数组
∙
JSON名称/值对
JSON数据的书写格式是:
名称/值对。
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
firstName"
:
"
John"
这很容易理解,等价于这条JavaScript语句:
firstName="
JSON对象
JSON对象在花括号中书写:
对象可以包含多个名称/值对:
{"
"
lastName"
Doe"
}
JSON数组
JSON数组在方括号中书写:
数组可包含多个对象:
{
employees"
[
},
Anna"
Smith"
Peter"
Jones"
]
在上面的例子中,对象"
是包含三个对象的数组。
每个对象代表一条关于某人(有姓和名)的记录。
JSON文件
∙JSON文件的文件类型是"
.json"
∙JSON文本的MIME类型是"
application/json"
JSON解析器
提示:
eval()函数可编译并执行任何JavaScript代码。
这隐藏了一个潜在的安全问题。
使用JSON解析器将JSON转换为JavaScript对象是更安全的做法。
JSON解析器只能识别JSON文本,而不会编译脚本。
在浏览器中,这提供了原生的JSON支持,而且JSON解析器的速度更快。
Reveal.js
rvl.io
SlidesarewrittenusingHTMLormarkdownbutthere'
salsoanonlineeditorforthoseofyouwhopreferamoretraditionaluserinterface.Giveitatryatwww.rvl.io.
----www.rvl.io.非常好用,所见即所得
section>
创建一个slide,默认为水平slide。
如果<
嵌套出现,则用来显示垂直slide,即嵌套内的slide为垂直关系。
slide可以使用<
ahref="
#/n/n"
形式跳转,跳到第二排第一张为#/1(或者#/1/0),第二章为#/1/1
注意,slide从0开始计数。
sectiondata-markdown>
不能理解。
。
(
TransitionStyle
Reveal.js提供四种切换格式:
Cube,Page,Concave,Linear
Themes
Reveal.js内置四种主题:
Sky,Beige,Simple,Default
在<
head>
标签中<
link>
加入选定标签(为毛我加了没效果?
?
)
GlobalState
sectiondata-state="
something"
中将something替换为其他class名即可将该class应用在slide上
Customevent(有待测试)
将<
customevent"
中customevent替换为其他事件,可以使事件在该slide浏览时被触发
Cleverquotes
q>
标签使用inline引用
blockquote>
标签使用block引用
Highlight.js
使用highlight.js来实现代码高亮(<
pre>
code>
到<
/code>
/pre>
之间)
Reveal.js已经内置,lib/js/highlight.js
当然,也可以自己配置:
linkrel="
stylesheet"
href="
styles/default.css"
scriptsrc="
highlight.pack.js"
hljs.initHighlightingOnLoad();
Fragmentviews
将class设置为fragment实现下箭头显示nextsibling
PDFExport
没看懂...
其他
新版本可以按b进入暂停模式
node.js
Node.js是一套用来编写高性能网络服务器的JavaScript工具包
Firebug
Console
1.Profile
使用这个功能的方法是,打开console标签,然后点击上面的Profile按钮(上部的按钮顺序是“Inspect|Clear|Profile”)。
Firebug列出调用的所有函数,及其所花的时间。
你可以针对要测试的某个函数,在其前部加上console.profile([title]),在其后部加上console.profileEnd()。
1.BreakPoint
Script标签允许你在任意行暂停执行。
单击行号,就会设置一个断点。
右击行号,就可以设置一个断点出现的条件,只有当条件为真时,程序才会暂停执行。
右面还有一个watch窗口,可以查看当前变量的值。
1.命令行api
1.$(id)相当于document.getElementById()
2.$$(选择器):
返回由指定CSS选择器匹配元素所组成的数组
3.$x(xpath):
返回与给定的XPath表达式相匹配的元素的数组
4.$0:
在HTML面板中选中的元素。
5.$1:
上一次在HTML面板中选中的元素。
6.$n(index)访问最近5个被选中过的元素,index的范围:
0–4。
7.dir(对象):
打印出对象的所有属性的交互清单,与console.dir()相同
8.dirxml(对象):
打印一个HTML或XML元素的XML源码树,与console.dirxml()相同
9.clear():
清屏,与console.clear()相同
10.inspect(object[,tabName]):
用最适合的标签来检查一个对象,或者使用与可选参数tabName相一致的标签
可以使用的标签名字有HTML、CSS、SCRIPT,以及DOM
11.keys(object):
返回一个包含此对象所有属性的名字的数组
12.values(object):
与keys(object)相对,返回一个包含该对象所有属性值的数组
13.debug(fn)---undebug(fn):
在函数的第一行增加或移除断点
14.monitor(fn)---unmonitor(fn):
打开或关闭对一个函数所有调用的日志记录
15.monitorEvents(object[,types])---unmonitorEvents(object[,types]):
开启或关闭对发送到一个对象的所有事件的日志记录
全部可用类型包括:
composition,contextmenu,drag,focus,form,key,load,mouse,mutation,paint,scroll,text,ui,以及xul
16.profile()---profileEnd():
开启和关闭JavaScript概况器
可选参数title将作为概况报告的抬头打印在文本中
17.
1.ConsoleAPI
当打开firebug(也包括Chrome等浏览器的自带调试工具),window下面会注册一个叫做console的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。
下面是这些方法的一个简单介绍,适时地运用它们,对于提高开发效率很有帮助。
1.console.log(object[,object,...])
向控制台输出一条消息。
支持C语言printf式的格式化输出。
2.console.debug(object[,object,...])
向控制台输出一条信息,它包括一个指向该行代码位置的超链接。
3.console.info(object[,object,...])
向控制台输出一条信息,