JavaScript基础

JavaScript

定义

JavaScript是一种描述语言,也是一种基于对象和事件驱动的,并具有安全性能的脚本语言

组成

一个完整的JavaScript是由以下三部分组成的

1. 核心语法(ECMAScript)

2. 浏览器对象模型(BOM)

3. 文档对象模型(DOM)

基本语法

<script type=”text/Javascript”>

<!—

JavaScript
语句;

-->

</script>

使用脚本的好处

A. 含脚本的页面只要下载一次即可,这样能减少不必要的网络通信

B. 脚本程序是由浏览器客户端执行,而不是由服务器端执行,因此能减轻服务器端的压力

使用js引用的方式

A. 使用<script>标签(通常用于代码较少,并且每个页面代码都不相同的情况)

a) <script type=”text/JavaScript”>

b) <!—

i. Var color=prompt(“请输入颜色”,””);

c) -->

d) </script>

B. 使用外部JavaScript文件

a) <script src=”hello.js” type=”text/Javascript”></script>

C. 直接在HTML标签中

a) <input name=”btn” type=”button”value=”消息” onclick=”javascript:alert(‘欢迎你’);”/>

变量的声明和赋值

声明变量

var合法的变量名; //javaScript是一种弱类型语言,所以允许不声明变量而直接使用

数据类型

undefined(未定义类型)

null(空类型)

number(数值类型)

string(字符串类型)

Boolean(布尔类型)

typeof运算符

typeof(变量或值)

常用的输入/输出

警告(alert)

alert()方法会创建一个特殊的小窗口,该窗口带有一个字符串和一个”确定”按钮

alert(“提示信息”);

提示(prompt)

prompt()方法会弹出一个提示对话框,等待用户输入一行数据

prompt(“提示信息”,”输入框的默认信息”);

系统函数

parseInt()语法

parseInt(“字符串”); //返回一个整数

parseInt()函数首先查看位置0处的字符,判断它是否是一个有效数字,如果不是则返回NaN

parseFloat()语法

parseFloat(“字符串”); //返回一个浮点数

isNaN()语法

isNaN(x);//返回boolean型值

自定义函数

语法

function函数名(参数1,参数2,参数3,…){

javascript语句

}

在javascript中,return用来规定从函数返回的值,因此需要返回某个值的函数必须使用return语句

window对象

常用的属性

名称	说明
Screen	有关客户端的屏幕和显示性能的信息
History	有关客户访问过的URL的信息
Location	有关当前URL的信息

常用的方法

名称	说明
prompt	显示可提示用户输入的对话框
alert	显示一个带有提示信息和一个确定按钮的警示框
confirm	显示一个带有提示信息,确定和取消按钮的对话框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout	在指定的毫秒数后调用函数或计算表达式
setInterval	按照指定的周期(以毫秒计)来调用函数表达式

窗口的特征属性

名称	说明
height width	窗口文档显示区的高度,宽度,以像素计
Left top	窗口的x坐标,y坐标,以像素计
toolbar=yes|no|1|0	是否显示浏览器的工具栏,默认是yes
scrollbars=yes|no|1|0	是否显示滚动条,默认是yes
location=yes|no|1|0	是否显示地址栏, 默认是yes
status=yes|no|1|0	是否添加状态栏, 默认是yes
menubar=yes|no|1|0	是否显示菜单栏, 默认是yes
resizable=yes|no|1|0	窗口是否可调节尺寸,默认是yes
titlebar=yes|no|1|0	是否显示标题栏,默认是yes
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器,默认是no

常用事件

名称	说明
Onload	一个页面或一副图像完成加载
Onmouseover	鼠标移到某个元素上
Onclick	鼠标单击某个对象
Onkeydown	某个键盘按键被按下
Onchange	域的内容被改变

JavaScript中系统内置时间对象

1. Array:用于在单独的变量名中存储一系列的值

2. String:用于支持对字符串的处理

3. Math:使我们有能力执行常用的数学任务,它包含了若干个数字常量和函数

4. Date:用于操作日期和时间

Date对象

语法

var日期实例=new Date(参数); //参数可省略

Get分组的方法

方法	说明
getDate()	返回Date对象的一个月中的每一天,其值介于1~31之间
getDay()	返回Date对象的星期中的每一天,其值介于0~6之间
getHours()	返回Date对象的的小时数,其值介于0~23之间
getMinutes()	返回Date对象的分钟数,其值介于0~59之间
getSeconds()	返回Date对象的秒数,其值介于0~59之间
getMonth()	返回Date对象的的月份,其值介于0~11之间
getFullYear()	返回Date对象的年份,其值为4位数
getTime()	返回自某一时刻(1970年1月1日)以来的毫秒数

定时函数

语法

setTimeout(“调用的函数名称”,”等待的毫秒数”) //只执行函数一次

setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)

history对象

名称	描述
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的下一个URL
go()	加载history对象列表中的某个具体URL

location对象

名称	描述
Host	设置或返回主机名和当前URL的端口号
Hostname	设置或返回当前URL的主机名
Href	设置或返回完整的URL

名称	描述
Reload()	重新加载当前文档
Replace()	用新的文档替换当前文档

Document对象的常用属性

名称	描述
referrer	返回载入当前文档的文档的URL
URL	返回当前文档的URL

Document对象的常用方法

名称	描述
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName() write()	返回带有指定标签名的对象的集合 向文档写文本,HTML表达式或javascript代码

visibility属性

名称	描述
Visible	表示元素是可见的
Hidden	表示元素是不可见的

实例

object.style.visibility=”值”

注意

使用visibility属性设置元素不可见,此元素会占据页面上的空间

Display属性

名称	描述
None	表示此元素不会被显示
Block	表示此元素将显示为块级元素,此元素前后会带有换行符

实例

object.style.display=”值”

DOM的组成

CoreDOM:DOM编程,定义了一套标准的针对任何结构化文档的对象

XMLDOM:定义了一套标准的针对XML文档的对象

HTMLDOM:定义了一套标准的针对HTML文档的对象

常用方法

getAttribute(“属性名”)

setAttribute(“属性名”,”属性值”)

创建和增加节点

名称	描述
createElement(tagName)	按照给定的标签名称创建一个新的元素节点
appendChild(nodeName) insertBefore(newNode,oldNode) cloneNode(deep)	向已存在节点列表的末尾添加新的子节点 向指定的节点之前插入一个新的子节点 复制某个指定的节点

删除和替换节点

名称	描述
removeChild(node)	删除指定的节点
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点

表格对象

类别	名称	描述
属性	rows[]	返回包含表格中所有行的一个数组
方法	insertRow() deleteRow()	在表格中插入一个新行 从表格中删除一行

TableRow对象

类别	名称	描述
属性	cells[]	返回包含行中所有单元格的一个数组
方法	rowIndex insertCell() deleteCell()	返回该行在表中的位置 在一行中的指定位置插入一个空的<td>标签 删除行中指定的单元格

TableCell对象

类别	名称	描述
属性	cellIndex innerHTML align className	返回单元格在某行单元格集合中的位置 设置或返回单元格的开始标签和结束标签之间的HTML 设置或返回单元格内部数据的水平排列方式 设置或返回元素的class属性