1 JavaScript概述
1.1 JS概述
JS是一门基于对象和事件驱动的脚本语言, 主要应用在客户端
1.1.1 js特点
解释运行, 不需要编译
基于对象
弱类型
1.1.2 js优点
交互性
安全性
跨平台
1.1.3 js的历史
略
1.2 在html中结合js代码
1.2.1 直接在html中书写js代码
通过<script type="text/javascript"></script>标签, 在这个标签的内部可以书写js代码
1.2.2 引入外部的js文件
通过<script type="text/javascript"src="demo1.js"></script>来引入外部的js文件
注意: 这个标签不能够合并成自闭标签,否则会引入失败.
2 JavaScript语法
2.1 注释
单行注释://js代码
多行注释:/* js代码 */
2.2 数据类型
2.2.1 基本数据类型
Ø 数值类型(number)
Ø 字符串类型(string)
Ø 布尔类型(boolean)
Ø undefined类型
Ø null类型
(1) 数值类型
js中的所有数值在底层都是浮点型, 但是在处理和显示的时候,js会自动的在整型和浮点型之间进行转换
特殊值:
Infinity -- 无穷大
-Infinity -- 负无穷大
NaN -- 非数字 NaN和任何数值都不相等, 包括它本身. NaN和任何数值运算结果都是NaN,如果要判断一个数值是否是一个非数字, 不能用 xx == NaN进行判断, 可以用isNaN(xx)进行判断.
(2) 字符串类型
js中的字符串类型是一个基本数据类型, 字符串常量必须用单引号或双引号引起来
(3) 布尔类型
boolean, 值为true或false.
(4) undefined
undefined类型的值只有一个, 就是undefined. 表示变量未定义, 如果定义一个变量未初始化值, 那么该变量的值就是undefined.
(5) null
null类型的值只有一个, 就是null. 表示空值, 即表示该处的值现在为空
作为函数的返回值, 表示该返回值是一个没有任何内容的空对象
u js中的数据类型的转换
见/resource/数据类型转换.txt
2.2.2 复杂数据类型
复杂数据类型: 对象(普通对象 数组 函数)
2.3 变量的定义
js中有数据类型, 但是在js中变量不区分数据类型, 所以称js是一个弱类型的语言
在js中通过var关键字定义一个变量, 变量没有类型区分, 可以指向任意类型的值
2.4 运算符
JS中的运算符和Java中的大致相同
比较运算符: ==,!=,===,!==
其他运算符: typeOf, delete
2.5 语句
if条件语句
语法和Java中大致相同, 但是判断条件没有类型的限制
switch选择语句
语法和Java中大致相同, 并且也支持字符串类型
循环语句
while(){} do..while(){} for(){} 语法和Java中的很相似, 但是js中不支持增强for循环
2.6 函数
所谓函数就是一组整合在一起的具有功能的代码块, 可以反复调用
2.6.1 通过function关键字来定义一个函数
function 函数名(形参列表){
函数体
}
调用函数: 函数名(实参列表)
2.6.2 通过函数表达式来定义一个函数
var fn = function (形参列表){
函数体
}
调用函数: 函数名(实参列表)
2.7 数组
2.7.1 通过Array()构造函数来创建数组
var arr1 = newArray(1, 3, 5, "abc", true, new Object()); //创建指定初始值的数组
2.7.2 通过数组直接量来创建数组
var arr2 = [1,3, 5, "abc", true, new Object()]; //创建指定初始值的数组
js中的数组的长度是可以被任意改变的
如果数组中某一位置没有赋值, 那么该处的值为undefined
js中的数组的内容可以是不同类型的
js中的数组就是用[]括起来并用逗号分割开的一组内容, 本质上就是一段字符串.
2.8 js中的内置对象
RegExp对象
创建正则对象的两种方式
var reg1 = new RegExp("", "");
var reg2 = /xxx/;
String对象
根据自己的情况选择性练习
var str1 = new String("xxx");
var str2 = "xxx";
Array对象
根据自己的情况选择性练习
var arr1 = new Array();
var arr2 = [];
Date对象
Date对象创建三种方式
var d1 = new Date()
var d2 = new Date(1000)
var d3 = new Date(2017, 3,1);
常用方法: getFullYear()、getMonth()、getDate()、getTimes()
Math对象
根据自己的情况选择性练习
常用方法: random()
Global对象
调用global对象上的属性或方法时, 可以省略global.
常用方法: eval()、parseInt()、parseFloat()
2.9 自定义对象
方式一:
function Person(name, age){}
this.name = name;
this.age = age;
this.run = function(){
alert(this.name+" : "+this.age);
}
}
var p = new Person(“zhangsan”, 18);
alert(p.name);
p.run();
方式二:
var p = {
name:"wangwu",
gender:"nan",
run:function(){
alert(this.name+"~"+this.gender+"~running...")
}
}
alert(p.name);
p.run();
3 DHTML
3.1 DHTML概述
DHTML:Dynamic HTML 即动态的HTML。所谓的动态HTML,其实并不是一门新的语言,它只是将现有的HTML、css、JavaScript进行了整合,实现了利用js动态的操作HTML元素或CSS属性。
在DHTML中,是将html文档中所有的元素都用js对象来进行表示, 用对象来表示元素, 用对象之间的引用关系来表示元素之间的层级关系
用一颗文档结构树来表示整个html文档
对象上可以设计属性和方法, 可以通过操作对象上的属性和方法来改变元素的属性和行为
利用这种方式, 将js和html/css整合在一起, 形成了DHTML技术.
DHTML可以被分为BOM和DOM两部分内容:
BOM: Browser Object Model 浏览器对象模型
DOM: Document Object Model 文档对象模型
3.2 BOM
3.2.1 window对象
window 对象:代表浏览器一个打开的窗口,window对象上提供的常用方法、及子对象有:
alert 方法,消息对话框
confirm 方法,显示一个确认对话框,其中包含一个可选的消息和确定、取消按钮。
close 方法,关闭当前浏览器窗口
location 子对象,包含当前浏览器地址栏url信息
document 子对象,代表浏览器窗口中包含的HTML文档
3.3 DOM
3.3.1 获取HTML文档中的元素
DOM中提供了如下方法来获取HTML元素:
document.getElementById方法,通过id来获取指定元素
document.getElementsByName方法,通过name来获取指定元素组成的集合数组
getElementsByTagName方法,通过标签名来获取指定元素组成的集合数组
3.3.2 增删改HTML文档中的元素
DHTML中提供了如下方法来操作HTML元素:
document.createElement()-- 创建节点
appendChild()-- 添加子节点
insertBefore()-- 插入节点
removeChild() --删除子节点
replaceChild()-- 替换子节点
parentNode属性 -- 获取父节点
3.3.3 属性及事件
常用属性:
value 属性,获取或设置输入控件的value属性的值
innerHTML 属性,获取或设置元素内部的html内容
注意:IE10以下的浏览器中, 不支持Select和table上的innerHTML属性
innerText 属性,获取或设置元素内部的文本内容。
注意:部分浏览器不支持该属性
document.body 属性,获取html文档中的body元素
className 属性,设置或获取对象的类(class属性)。
display 属性,设置或获取对象是否以及如何显示。
checked 属性,设置或获取复选框或单选钮的状态
常用事件:
onblur 事件,当元素对象失去输入焦点时触发
onfocus 事件,当元素对象获得输入焦点时触发
onload 事件,在整个HTML页面加载完成后触发
onclick 事件,当元素对象被点击时触发
onchange 事件,当select下拉选框选项切换时触发
3.4 DOM编程练习
略