3.1.1 什么是JavaScript
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言,不需要编译嵌入在HTTP页面中,把静态页面转变成支持用户交互并响应应用事件的动态页面。
3.1.2 JavaScript的主要特征
解释性、基于对象、事件驱动、安全性(不允许访问本地硬盘,不能写入数据到服务器上,并且不允许对网络文档进行修改和删除)、跨平台
===============================================================================
3.2.1 JavaScript的语法
a.JavaScript区分大小写
b.每行结尾分号可有可无
alert("!")
alert("1");
以上两行代码都是正确的。(最好每行语句结尾加上分号以保证代码的准确性)
c.变量是弱类型,只使用var运算符就可以将变量初始化为任意的值
var username="mrsoft"; //将变量username初始化为mrsoft
var age=20; //将变量age初始化为20
d.使用大括号标记代码块
e.注释
单行注释 //......
多行注释 /*......*/
3.2.2 JavaScript中的关键字(不能用作变量名、函数名以及循环标签)
①关键字(keywords)
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
②保留字(reserved words)
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
3.2.3 JavaScript的数据类型
JavaScript的数据类型比较简单,主要有数值型、字符型、布尔型、转移字符、空值、未定义值6种
a.整型
可以是正整数、负整数和0,并且可以采用十进制、八进制、十六进制。
b.浮点型
由整数和小数部分组成,只能用十进制表示,但是可以采用标准方法科学计数法表示
......
f.未定义值(undefined)
当使用了一个并未声明的变量,或者使用了一个已经声明但没有赋值的变量时,将返回未定义值(undefined)
3.2.4 变量的定义及使用
......
3.2.5 运算符的应用
......
3.3 流程控制语句
......
==================================================================================
3.4.1 函数的定义
函数是由关键字funtion、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。定义函数的基本语法如下:
function functionName([parameter 1,parameter 2]){
statements;
[return expression;]
}
参数说明如下。
·functionName:必选,用于指定函数名。在同一页面中,函数名必须是唯一的,区分大小写。
·parameter:可选,用于指定参数列表。当使用多个参数列表时,参数间用逗号隔开。一个函数最多可以有255个参数。
·statements:必选,是函数体,用于实现函数功能的语句。
·expression:可选,用于返回函数值。expression为任意的表达式、变量、常量。
例如,定义一个用于计算商品金额的函数account(),该函数有两个参数,分别用于指定单价和数量,返回计算后的金额,具体代码如下:
function account(price,number){
var sum=price*number;
return sum;
}
3.4.2 函数的调用
例:account(10.6,10);
==================================================================================
3.5.1 什么是事件处理程序
JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。
3.5.2 JavaScript常用事件
常用的无返回值事件
属性 描述
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
返回鼠标或者键盘的属性
属性 描述
altKey 返回当事件被触发时,"ALT" 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
metaKey 返回当事件被触发时,"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。
在JavaScript中指定事件处理程序时,事件名必须小写,才能正确响应事件。
==================================================================================
3.6 常用对象
3.6.1 Window对象
window对象即浏览器窗口对象,是一个全局对象,是所有对象的顶级对象在JS中有举足轻重的作用。
Window对象提供了许多属性和方法,这些属性和方法被调用来操作浏览器页面的内容。
Window对象同Math对象一样,也不需要new关键字创建对象实例,而直接使用“对象名.成员”的格式来访问其属性和方法。
窗口对象的属性和方法:
格式:
[window.]属性
[window.]方法(参数)
opener.属性
opener.方法(参数)
self.属性
self.方法(参数)
parent.属性
parent.方法(参数)
top.属性
top.方法(参数)
窗口名称.属性
窗口名称.方法(参数)
------------------------------------------
Window对象的常用属性
------------------------------------------
属性 描述
document 当前文件的信息
location 当前URL的信息
name 窗口名称
status 状态栏的临时信息
defaultStatus 状态栏默认信息
history 该窗口最近查阅过的网页
closed 判断窗口是否关闭,返回布尔值
opner open方法打开的窗口的源窗口
outerHeight 窗口边界的垂直尺寸,px
outerWidth 窗口边界的水平尺寸,px
pageXOffset 网页x-position的位置
pageYOffset 网页y-position的位置
innerHeight 窗口内容区的垂直尺寸,px
innerWidth 窗口内容区的水平尺寸,px
screenX 窗口左边界的X坐标
screenY 窗口上边界的Y坐标
self 当前窗口
top 最上方的窗口
parent 当前窗口或框架的框架组
frames 对应到窗口中的框架
length 框架的个数
locationbar 浏览器地址栏
menubar 浏览器菜单栏
scrollbars 浏览器滚动条
statusbar 浏览器状态栏
toolbar 浏览器工具栏
offscreenBuffering 是否更新窗口外的区域
personalbars 浏览器的个人工具栏,仅Navigator
--------------------------------------------------
Window对象的常用方法
--------------------------------------------------
方法 属性
alert(信息字串) 弹出警告信息
confirm(信息字串) 显示确认信息对话框
prompt(提示字串[,默认值]) 显示提示信息,并提供可输入的字段
atob(译码字串) 对base-64编码字串进行译码
btoa(字串) 将进行base-64编码
back() 回到历史记录的上一网页
forward() 加载历史记录中的下一网页
open(URL,窗口名称[,窗口规格])
focus() 焦点移到该窗口
blur() 窗口转成背景
stop() 停止加载网页
close() 关闭窗口
enableExternalCapture() 允许有框架的窗口获取事件
disableExternalCapture() 关闭enableExternalCapture()
captureEvents(事件类型) 捕捉窗口的特定事件
routeEvent(事件) 传送已捕捉的事件
handleEvent(事件) 使特定事件的处理生效
releaseEvents(事件类型) 释放已获取的事件
moveBy(水平点数,垂直点数) 相对定位
moveTo(x坐标,y坐标) 绝对定位
setResizable(true|false) 是否允许调整窗口大小
resizeBy(水平点数,垂直点数) 相对调整窗口大小
resizeTo(宽度,高度) 绝对调整窗口大小
scroll(x坐标,y坐标) 绝对滚动窗口
scrollBy(水平点数,垂直点数) 相对滚动窗口
scrollTo(x坐标,y坐标) 绝对滚动窗口
setInterval(表达式,毫秒)
setTimeout(表达式,毫秒)
clearInterval(定时器对象)
clearTimeout(定时器对象)
home()进入浏览器设置的主页
find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串
print()
setHotKeys(true|false) 激活或关闭组合键
setZOptions() 设置窗口重叠时的堆栈顺序
---------------------------------------------------
由于Window对象的open()方法和close()方法在实际网站开发中经常用到,下面对其进行详细讲解
1. open方法
语法格式:
window.open(URL,窗口名称,窗口风格)
功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。
说明:
open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址;
open方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二个参数);
open方法在打开一个新的浏览器窗口时,还可以指定窗口的风格(第三个参数),
窗口风格有以下选项,这些选项可以多选,如果多选,各选项之间用逗号分隔:
toolbar:指定窗口是否有标准工具栏。当该选项的值为1或yes时,表示有标准工具栏,当该选项的值为0或no时,表示没有标准工具栏;
location:指定窗口是否有地址工具栏,选项的值及含义与toolbar相同;
directories:指定窗口是否有链接工具栏,选项的值及含义与toolbar相同;
status:指定窗口是否有状态栏,选项的值及含义与toolbar相同;
menubar:指定窗口是否有菜单,选项的值及含义与toolbar相同;
scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与toolbar相同;
resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同;
width:以像素为单位指定窗口的宽度,已被innerWidth取代;
height:以像素为单位指定窗口的高度,已被innerHeight取代;
outerWidth:以像素为单位指定窗口的外部宽度;
outerHeight:以像素为单位指定窗口的外部高度;
left:以像素为单位指定窗口距屏幕左边的位置;
top:以像素为单位指定窗口距屏幕顶端的位置;
alwaysLowered:指定窗口隐藏在所有窗口之后,选项的值及含义与toolbar相同;
alwaysRaised:指定窗口浮在所有窗口之上,选项的值及含义与toolbar相同;
dependent:指定打开的窗口为当前窗口的一个子窗口,并随着父窗口的关闭而关闭,选项的值及含义与toolbar相同;
hotkeys:在没有菜单栏的新窗口中设置安全退出的热键,选项的值及含义与toolbar相同;
innerHeight:设定窗口中文档的像素高度;
innerWidth:设定窗口中文档的像素宽度;
screenX:设定窗口距离屏幕左边界的像素长度;
screenY:设定窗口距离屏幕上边界的像素长度;
titleBar:指明标题栏是否在新窗口中可见,选项的值及含义与toolbar相同;
z-look:指明当窗口被激活时,不能浮在其它窗口之上,选项的值及含义与toolbar相同。
open方法返回的是该窗口的引用。
小技巧:该方法经常用于在打开一个网页时自动打开另一个窗口。
2. close方法
语法格式:
window.close()
功能:close方法用于自动关闭浏览器窗口。
-----------------------------------------------
3.6.2 String对象
......
3.6.3 Date对象
......
==================================================================================
3.7 DOM(Document Object Model文档对象模型)技术
3.7.1 DOM的分层结构
......
3.7.2 遍历文档
......
3.7.3 获取文档中的元素
......
3.7.4 操作文档
......