JavaScript

一、JavaScript概述

1、JavaScript历史

● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。

● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对

象的语言,而且无需编译，可由浏览器直接解释运行。

● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以

利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改

为JavaScript。

2、JavaScript简介及作用

● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能

（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运

行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

作用：

1.响应客户端鼠标和键盘事件

2.客户端页面表单数据验证

3.使用JavaScript动态的改变页面标签的样式

3、JavaScript与html,css关系

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的

就是增 强Web客户交互。弥补了HTML的缺陷。

 

二、JavaScript基本语法

1、变量

● 声明变量用var关键字

例如 var name;

● 声明变量的同时对其赋值

var test=“THIS IS A BOOK”

2、数据类型

JavaScript支持的数据类型

1、数值型(number)：

其中包括整型数和浮点型数。

2、布尔型(boolean)：

即逻辑值，true或flase。

3、字符串型：

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。

（使用单引号来输入包含引号的字符串。）

4: undefined类型

5: Object类型

3、算数运算符

4、赋值运算

5、逻辑运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5 ，下面的表格解释了比较运算符

 

6、条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法：

var result = (条件表达式)?结果1:结果2

当条件成立返回?后的内容，否则返回:后的内容

7、控制语句

第一种是选择结构

1.单一选择结构（if）

2.二路选择结构（if/else）

3.多路选择结构（switch）

第二种类型的程序控制结构是循环结构。

1.由计数器控制的循环（for）

2.在循环的开头测试表达式（while）

3.在循环的末尾测试表达式（do/while）

4.break continue

三、函数

1、定义函数

函数定义的基本语法：

function functionName([arguments]){

javascript statements

[return expression]

}

function: 表示函数定义的关键字;

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，同样是可选的的语句。

2、函数调用

由函数来调用

<script

type="text/javascript">

function fun(){

alert(“test”);

}

fun();//函数名调用

function fun2(){

fun();//在其他函数中调用

}

</script>

3、全局函数

• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，

则字符串开头的数字部分被转换成整数，如果以字母开头，则返回

“NaN”。

• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的

数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

• typeof (arg)返回arg值的数据类型。

• eval(arg) 可运算某个字符串。

4、内置对象

1、Array数组

属性

length ：数组的长度，即数组里有多少个元素。

方法

join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔

符>置于元素与元素之间。

reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数

组变成：[3, 2, 1]。

sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺

序排列。

对数字排序需要调用排序函数。

function sortNumber(a,b){

return a - b;

}

2、Date

● 获取日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

3、Math

Math 对象，提供对数据的数学计算。

属性

PI 返回π（3.1415926535...)。

方法

Math.abs(x) 绝对值计算；

Math.pow(x,y) 数的幂；x的y次幂

Math.sqrt(x) 计算平方根；

Math.ceil(x) 对一个数进行上舍入

Math.floor(x) 对一个数进行下舍入。

Math.round(x) 把一个数四舍五入为最接近的整数

Math.random() 返回 0 ~ 1 之间的随机数

Math.max(x,y) 返回 x 和 y 中的最大值

Math.min(x,y) 返回 x 和 y 中的最小值

5、事件

● 一些常用的事件:

onclick()鼠标点击时；

onblur()标签失去焦点;

onfocus()标签获得焦点;

onmouseover()鼠标被移到某标签之上;

onmouseout鼠标从某标签移开;

onload()是在网页加载完毕后触发相应的的事件处理程序;

onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

四、DOM对象

1 、 内置对象类型

字符串对象 数组 日期 算数

2 、 HTML DOM对象概述

1 Document Object Modal 文档 对象 模型

2 JavaScript是一种面向对象的语言，操作网页时，把网页中每一个标签，都视为一个对象。把这一类标签对象统称为DOM对象。

3 JavaScript要想对网页中标签进行操作，那么就要获取到要操作的标签。（要操作，先得到）

4 拿到标签后，通过 .属性 进行操作。

3 、 找到HTML标签的四种方法

document对象表示我们整个HTML网页文件，网页加载完毕后，生成document对象。

有四种方法来做这件事：

通过 id 找到 HTML 标签

document.getElementById(“id");

通过标签名找到 HTML 标签

document.getElementsByTagName("p");

通过类名找到 HTML 标签

document.getElementsByClassName("p");

通过name找到 HTML 标签

document.getElementsByName(“name");

4 拿到标签对象后的操作内容

1 对标签属性进行操作

2 对标签体中的内容进行操作

3 对标签的css属性进行操作

5、DOM - 改变HTML

● Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

document.getElementById(“username").value=“new value";

document.getElementById("image").src=“new.jpg";

• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(“div”).innerHTML=new HTML

6、DOM - 改变CSS

● html dom允许 javaScript改变html标签的样式。

语法：

document.getElementById("id").style.property=new style;

例：

document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

7、计时

● 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法:

setTimeout(“函数”,”时间”)未来的某时执行代码

clearTimeout()取消setTimeout()

setInterval(“函数”,”时间”)每隔指定时间重复调用

clearInterval()取消setInterval()