JavaScript

一、JavaScript调试方法

alert(msg):可以打印出msg起到print的作用
document.write(msg):将调试信息以列表的形式放置在页面中
自定义异常
1. throw new Error("....")
2. try{}catch(exception){}用exception.message打印错误信息

二、基本语法

1.大小写敏感

2.按照在HTML文件中的顺序逐步执行，不调用不执行

3. 每行不是必须要分号而是可以用分号收尾

三、标识符

第一个字符必须是字母、下划线或美元符号其后面的字符可以是字母、数字或下划线、美元符号

定义常量关键字const,定义变量关键字var，可以不用var定义变量但是这样子开发时不容易发现错误,规则类似C语言

typeof可以返回变量的字符串信息

this关键字可以指代当前对象

new关键字可以用来创建对象

if，while，switch用法等同于C语言

with和comment语句

with(默认对象){
    程序
}
例子：
with(document){
    write("<p>可以直接调用write方法哦</p>")
}

comment就是注释，不展示不执行
//这是单行注释
/*
--
-这是多行注释-
--
*/

四、事件驱动之常用事件

JavaScript函数也就成了EventHandler，通过事件与处理器绑定

事件	描述	事件关联的对象
onabort	图像加载被中断	image
onblur	元素失去焦点	window及所有表单子组件
onchange	用户改变域的内容	window及所有表单子组件
onclick	鼠标点击某个对象	link及所有表单子组件
ondblclick	鼠标双击某个对象	link及所有表单子组件
onerror	当加载文档或图像时发生某个错误	image、window
onfocus	元素获得焦点	window及所有表单子组件
onkeydown	某个键盘的键被按下	image、link及所有表单子组件
onkeypress	某个键盘的键被按下或按住	image、link及所有表单子组件
onkeyup	某个键盘的键被松开	image、link及所有表单子组件
onload	某个页面或图像被完成加载	document
onmousedown	某个鼠标按键被按下	document，link及所有表单子组件
onmousemove	鼠标被移动	document，link及所有表单子组件
onmouseout	鼠标从某元素移开	document，link及所有表单子组件
onmouseover	鼠标被移到某元素之上	document，link及所有表单子组件
onmouseup	某个鼠标按键被松开	document，link及所有表单子组件
onreset	重置按钮被点击	重置按钮
onresize	窗口或框架被调整尺寸	window
onselect	文本被选定	form表单
onsubmit	提交按钮被点击	form表单
onunload	用户退出页面	document

五、脚本函数的使用

函数的定义方法

function 函数名(参数1，参数2)
{
    函数语句体
    return 值
}

可以通过时间响应体、链接href属性调用函数

常用内置函数

函数	说明
parseInt(String,n)	将字符型转为整型，n表示进制，非必须，若不是数字开头返回NaN
parseFloat(String)	将字符串转为浮点型，若不是数字开头返回NaN
isNaN(Num)	用于检验某个值是否为NaN
isFinite(Num)	检验某个表达式是否为无穷大
encodeURI(URL)	用于返回一个URL字符串编码后的结果
decodeURI(URL)	用于将已编码的URI字符解码成最初的字符串
eval()	求字符串中表达式的值

六、JavaScript内置对象

1.Array对象

声明赋值方法

var a=new Array(n) //n为数组个数
var a=new Array()
var a=new Array(元素一，元素二，元素三)

下标从1开始，到数组长度-1结束

常用属性length表示数组长度，即元素个数

Array对象的常用方法：

方法	说明
reverse()	倒序数组对象
sort()	按字典顺序对数组元素进行重新排序
join(分隔符)	将数组内各个元素以分隔符连接成一个字符串，默认按逗号连接
push()	在数组尾部添加数组元素
splice(m,n)	删除在m位置开始的n个元素
concat()	将一个或若干个数组和某个数组连接为数组

2.String对象

已经有字符串类型了为什么还要字符串对象？

字符串类型使string，字符串对象类型是object，他们都可以正常输出，可以调用属性以及方法，字符串对象可以自定义属性和方法

常用属性

length表示字符串长度

处理字符串方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

处理字符串显示方法

方法	描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
italics()	使用斜体显示字符串。
small()	使用小字号来显示字符串。

3.Math对象

Math对象包含用来进行数学计算的属性和方法,具体如下：

Math对象的属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math对象的方法

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

4.Date对象

关于日期时间的对象

Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

七、JavaScript浏览器对象

1.navigator对象

window.navigator 对象包含有关访问者浏览器的信息。navigator本身也是一个对象

navigator对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。
mimeTypes	浏览器支持的Mime类型

navigator对象方法

方法	描述
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	规定浏览器是否启用数据污点 (data tainting)。
preference()	用于取得浏览器的爱好设置

2.window对象

Window 对象表示浏览器中打开的窗口，如果html中带中frame标签则会有另外的windows对象

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象)
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参数 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
localStorage	在浏览器中存储 key/value 对。没有过期时间。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
sessionStorage	在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
atob()	解码一个 base-64 编码的字符串。
btoa()	创建一个 base-64 编码的字符串。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。该方法已经使用了 scrollTo() 方法来替代。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
stop()	停止页面载入。
postMessage()	安全地实现跨源通信。

3.location对象

location对象包含当前URL的信息,在window.location中

Location 对象属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

4.history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

5.Document对象

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

Document 对象属性和方法

HTML文档中可以使用以下属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

属性 / 方法	避免的原因
document.attributes	文档没有该属性
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点

6.image对象

Image 对象

Image 对象代表嵌入的图像，是document对象下级的

<img> 标签每出现一次，一个 Image 对象就会被创建。

Image 对象的属性

属性	描述
align	设置或返回与内联内容的对齐方式。
alt	设置或返回无法显示图像时的替代文本。
border	设置或返回图像周围的边框。
complete	返回浏览器是否已完成对图像的加载。
height	设置或返回图像的高度。
hspace	设置或返回图像左侧和右侧的空白。
id	设置或返回图像的 id。
isMap	返回图像是否是服务器端的图像映射。
longDesc	设置或返回指向包含图像描述的文档的 URL。
lowsrc	设置或返回指向图像的低分辨率版本的 URL。
name	设置或返回图像的名称。
src	设置或返回图像的 URL。
useMap	设置或返回客户端图像映射的 usemap 属性的值。
vspace	设置或返回图像的顶部和底部的空白。
width	设置或返回图像的宽度。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
title	设置或返回元素的 title。

Image 对象的事件句柄

事件句柄	描述
onabort	当用户放弃图像的装载时调用的事件句柄。
onerror	在装载图像的过程中发生错误时调用的事件句柄。
onload	当图像装载完毕时调用的事件句柄。

7、form对象⭐

form对象代表html表单，由<form>标记对构成

Form 对象集合

集合	描述
[elements]	包含表单中所有元素的数组。

Form 对象属性

属性	描述
acceptCharset	服务器可接受的字符集。
action	设置或返回表单的 action 属性。
enctype	设置或返回表单用来编码内容的 MIME 类型。
id	设置或返回表单的 id。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。
name	设置或返回表单的名称。
target	设置或返回表单提交结果的 Frame 或 Window 名。
elements	表示表单中的所有组件，每个组件通过数组索引来调用

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

Form 对象方法

方法	描述
reset()	把表单的所有输入元素重置为它们的默认值。
submit()	提交表单。

Form 对象事件句柄

事件句柄	描述
onreset	在重置表单元素之前调用。
onsubmit	在提交表单之前调用

使用方法

确定是页面中哪个form

document.forms[索引值].属性

document.forms[索引值].方法(参数)

document.表单名称.属性

document.表单名称.方法(参数)

对form中元素进行定位

document.forms[索引值].表单元素对象名称

document.forms[索引值].elements[索引值]

document.表单对象名称.表单元素对象名称

document.表单单项名称.elements[索引值]

PS:附上html窗口规则参数列表

规则参数	用法(0表示no；1表示yes)
directories	是否连接工具栏
fullscreen	是否全屏显示
location	用于设置是否显示网址栏
menubar	用于设置是否显示菜单栏
scrollbars	用于设置如果网页内容超过窗口大小，是否显示滚动条
titlebar	用于设置是否显示标题栏
toolbar	用于设置是否显示工具栏
status	用于设置是否显示状态栏
resizable	用于设置是否可以改变窗口尺寸
height	用于设置窗口的高度
width	用于设置窗口的宽度
left	用于设置窗口的右边界
top	用于设置窗口的上边界