一、javascript简介
1、什么是javascript?
是由网景公司制订的一种嵌套在html文件中的脚
本语言,由浏览器解释执行。其作用是:
a、数据验证(比如表单提交时,对表单中的数据
进行合法性验证,比如用户名是否填写等)。
b, 操作网页、实现动态交互效果(比如,点击一个
按钮,弹出一个窗口)。
c,获得浏览器的一些内部信息(比如,浏览器的类型、
版本等)。
d,ajax核心技术之一(在ajax技术当中,需要使用
javascript整合其它的一些技术)
2、javascript的组成
a,ECMAScript: 这是一个规范,由ECMA(欧洲计算
机制造工业协会)制订。该规范定义了脚本语言的
语言基础部分(数据类型、流程控制、关键字、
运算符及运算规则等等)。
该规范,各个浏览器都会严格遵守。
b,DOM(文件对象模型):这也是一个规范,由w3c(万维网联盟)制订。
该规范定义了浏览器如何将一个html文件转换成
一棵dom树,以及,如何操作这棵树(包括对树
如何遍历、查询、删除、添加、修改树中的节点)。
可以这样认为,DOM是开发人员操作网页的一套接口。
该规范,各个浏览器支持程度不一。
c,BOM(浏览器对象模型):不是规范,但是各个浏览器基本上都支持。
我们将浏览器内置的一些对象,包括Window、
Navigator、Location、Screen、Document、
History、XmlHttpRequest等等统称为Browser
Object Model。
一、ECMAScript(语言基础)
1、标识符
a_$开头,后面可以接a_$及数字。
"a_$"指的是字母、下划线和"$"。
2、关键字和保留字
不能使用关键字和保留字作为标识符。
3、语句
以";"结尾。如果不加";"也能运行,由
js引擎负责判断,但是容易出错。所以,
建议一条语句结束,一定加上";"。
4、大小写敏感。
5、数据类型
1)简单数据类型
a,number
a1,不管是整数还是小数,都是number类型。
a2,number类型有一个对应的包装类Number。
最大值:Number.MAX_VALUE
最小值:Number.MIN_VALUE
如果一个值超出了最大值或者最小值的范围,
会显示Infinty,-Infinty。
a3,number类型如何转换成字符串?
toString()
a4,对于浮点运算,有误差。
a5,isNaN函数:当一个值是非数字是,返回true。
b,string
b1,字符串是一种基本类型,要用',或者"引起来。
b2,字符串也有对应的包装类String。
b3,常用属性和方法
length属性 返回字符串的长度
charAt(index) 返回指定位置的字符,下标从0开始。
substring(from, to) 返回子字符串
indexOf(str) 指定字符串在原字符串中
第一次出现的位置。
lastIndexOf(str) 指定字符串在原字符串
中最后一次出现的的位置。
match(regexp) 返回匹配指定正则表达式的
字符串,返回的结果是一个数组。
var str2 = 'asd212abc345';
//js引擎会将/[0-9]+/包装成RegExp对象
//(即正则表达式对象)。
//"g"在这儿的作用是搜索所有的字符,否则
//找到一个符合条件的数字后,不再向下
//搜索。
var reg2 = /[0-9]+/;
var arr = str2.match(reg2);
search(regexp) 返回按照正则表达式检索
到的字符串位置
str2.search(reg2)
toLowerCase/toUpperCase 返回小写/大写形式
replace(regexp,'abc') 替换符合reg正则表
达式规定的字符串
str2 = str2.replace(reg2,'888');
split 分割字符串,返回一个字符串数组。
c,boolean
c1,只有两个值 true,false。
c2,布尔类型的特殊用法
以下几种情况,结果为true。
不为空的字符串。
不为0的数字
对象
null,undefined结果为false。
如果有需要,js引擎会将任意类型的
值转换成boolean类型的值,
通过调用Boolean()函数来实现转换。
c3,布尔类型也有一个包装类Boolean。
d,null
d1,使用typeof测试类型时,返回object。
d2,只有一个值null。
e,undefined
e1,只有一个值undefined。
e2,变量没有赋值。
2)复杂数据类型(Object类型的子类型)
a,数组
a1,数组的大小可变、存放的数据可以任意。
a2,创建数组。
第一种方式:
var arr = new Array();
arr[0] = 12;
arr[2] = 'abc';
第二种方式:
var arr = [];
var arr = [1,2,3];
数组的长度可以通过length属性获得。该
属性可读也可以写。
a3,不规则数组。
var arr = new Array();
arr[0] = [1,2,3];
arr[1] = [11,22];
arr[2] = [33];
a4,数组常用的方法。
toString方法, 返回数组的字符串表示
concat方法, 用于连接两个数组,生成一个新
的数组。
join方法,用于将数组中的各个元素连接
成字符串。可以指定连接的字符串。
reverse方法,对原数组进行反转。
slice用于截取数组的一部分并以数组的形式返回
sort()排序
b,函数
b1、如何定义一个函数
function 函数名(参数){
//函数体
}
要注意:
函数不能添加返回类型的声明。
可以有返回值。
b2、函数其实质是一个对象,是Function
类型的实例。函数名是一个变量,指向了
该实例。
b3、函数不能重载
如果有多个函数名相同,则最后一个函数会
覆盖前面的函数。不能够通过函数参数的个数
来区分不同的函数。因为函数参数是通过
arguments对象来传递的。
b4、变量的作用域
js引擎在执行js代码之前,会先进行预编译:
会将变量的声明以及函数的定义存放到相应的
活动对象上面。
活动对象不能够直接访问到,但是,js引擎
可以访问。
全局活动对象:
js引擎在执行<script>之后,会创建一个
全局活动对象。
局部活动对象:
js引擎在碰到一个函数之后,会为该
函数创建一个局部活动对象。
接下来,js引擎开始执行js代码,在执行时,
遇到变量或者函数,需要从相应的活动对象
上查找该变量或者函数。如果局部活动对
象上找不到,则查找上一级活动对象,一直
到全局。
c、Math
ceil():上舍入
floor():下舍入
random():0<=随机数<1
二、Dom模型(w3c dom模型)
1、什么是dom模型?
Document object model(文档对象模型),其作用是,
将一个结构化的文档(比如xml,html)转换成一棵树。
通过对树的操作来间接实现对文档的操作。
2、w3c dom模型:
w3c定义了浏览器如何将一个html文件转换成一棵
树,并且,也定义了树的操作(包括增加节点、删除
节点、修改节点以及查找、遍历节点的相关方法)。
1)浏览器如何将html文件转换成一棵树(了解)
Node
Document
HTMLDocument
HTMLBodyElement
Element
HTMLElement
HTMLFormElement
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
2)dom操作
(1)查找节点
a,document.getElementByIdx_x(id);
document是dom树的根节点。该方法只会返回
一个节点。
找到节点后,可以使用以下几个重要属性:
innerHTML属性:
可以设置或者读取某个标记之 间的内容。
value属性:
可以设置或者读取节点的value值。
className属性:
给节点的class属性赋值
b, node.getElementsByTagName_r(tagName);
返回从node开始,所有标记名称为tagName的节点。
c,遍历的方式
因为浏览器兼容性问题,建议少用。
parentNode
previousSibling
nextSibling
childNodes
firstChild
lastChild
(2)创建节点
document.createElement_x(tagName);
创建节点之后,必须添加到dom树,否则,
浏览器不会显示该节点。
(3)添加节点
node.appendChild(newNode);
将newNode作为node的最后一个孩子进行添加。
node.insertBefore(newNode,refNode);
将newNode添加到refNode前面。
node.replaceChild(newNode,refNode);
使用newNode替换refNode。
(4)删除节点
node.removeChild(childNode);
删除node下面的子节点childNode。
(5)样式操作
方式一:给节点的class属性赋值,即
node.className = 's1';
这行代码的作用,就是设置节点的class
属性值是's1'。
方式二:修改节点的style属性。
node.style.backgroundColor = 'red';
要注意:如果要修改的样式属性名称包含
"-"号,则必须除掉"-"号,然后后面的第
一个字符变成大写。
3)禁止浏览器的默认行为:
a,两种默认行为:
点击链接,浏览器会向href指向的地址发请求。
点击提交按钮,浏览器会将表单中的数据提交。
b,禁止方式:
<a href="del.do"
onclick="return
false;">删除</a>
<form
action="regist.do"
onsubmit="return false;">
<input type="submit"
value="确认"/>
</form>