javaSctipt基础

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

=====================================
JavaScript 脚本语言
=====================================
什么是JavaScript？
1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
2. JavaScript 通常被直接嵌入 HTML 页面。
3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
特点：
1. 弱类型
2. 基于对象。

在客户端浏览器上执行的脚本：
1. JavaScript 2. VBscript 3 applet （需要安装JDK）

JavaScript语言中包含三个核心：ECMAScript、DOM、BOM

JavaScript是基于对象的脚本语言。

在HTML中如何使用JavaScript
===============================================
*1. 使用<script></script>标签：
属性：
charset（可选）字符集设置、
defer（可选执行顺序）值：defer、
language(已废除)、
src（可选）使用外部的js脚本文件
type(必选)类型：值：text/javascript

2. 在html标签的事件中，超级链接里。
<button onclick="javaScript语言"></button>
<a href="javascript:alert('aa');alert('bb')">点击</a>

3. 外部导入方式（推荐）：
<script type="text/javascript" src="my.js"></script>

JavaScript的语法：
===========================================
1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。

2.他和php一样属于弱类型语言。

3.每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))

4.脚本注释：
// 单行注释
/* 多行注释 */

5.括号表示代码块:{}

6.变量的定义：使用var关键字来声明。
变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。
变量名不可以使用关键字.

typeof函数获取一个变量的类型：
* undefined - 如果变量是 Undefined 类型的
* boolean - 如果变量是 Boolean 类型的
* number - 如果变量是 Number 类型的
* string - 如果变量是 String 类型的
* object - 如果变量是一种引用类型或 Null 类型的

7.JavaScript的数据类型：
Undefined 类型
Null 类型（对象）
Boolean 类型
Number 类型
八进制数和十六进制数 012
浮点数
特殊的 Number 值
String 类型
var s = "hello";
document.write(s+"<br/>");
document.write(s[1]+"<br/>"); //使用下标可以取出对应的字符
document.write(s.length+"<br/>");//求长度

object引用类型
引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。
因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，
ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性
和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。

8. 类型转换：
使用：Number（）、parseInt() 和parseFloat（）做类型转换
Number()强转一个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数

函数isNaN()检测参数是否不是一个数字。 is not a number

ECMAScript 中可用的 3 种强制类型转换如下：
* Boolean(value) - 把给定的值转换成 Boolean 型；
* Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
* String(value) - 把给定的值转换成字符串；

JavaScript的运算符
=====================================================================
1. 一元运算符
*delete：用于删除对象中属性的如：delete o.name; //删除o对象中的name属性
void：void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。
*++ --
一元加法和一元减法
2. 位运算符
位运算 NOT ~
位运算 AND &
位运算 OR |
位运算 XOR ^ (不同为1，相同则为0)
左移运算 <<
右移运算 >>
3. 逻辑运算符
逻辑 NOT ! 运算符非
逻辑 AND && 运算符与
逻辑 OR || 运算符或
4. 乘性运算符：*（乘） /(除) %（取模）求余
5. 加性运算符： + -
*其中+号具有两重意思：字串连接和数值求和。
就是加号”+“两侧都是数值则求和，否则做字串连接
6. 关系运算符 > >= < <=
7. 等性运算符 == === != !==
8. 条件运算符 ? : (三元运算符)
9. 赋值运算符 = += -= *= /= %= >>= <<=
10 逗号运算符
用逗号运算符可以在一条语句中执行多个运算。
var iNum1=1, iNum2=2, iNum3=3;

javaScript（语句流程控制）
====================================================================
1. 判断语句 if语句； if... else ... if ... else if ... else...

2. 多分支语句： switch（）{。 case ：。。。。}
switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}
3. 循环语句（迭代语句）
for：

while

do...while

for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。
var a = [10,20,30,40,50];
//迭代的是数组的下标。
for(i in a){
document.write(a[i]);
}
//输出： 1020304050

4. break 和 continue 语句对循环中的代码执行提供了更严格的控制。

5. with 语句用于设置代码在特定对象中的作用域。

JavaScript的函数：
====================================================
格式： function 函数名（[参数列表..]）{
函数体。。。
[return 返回值;]
}

arguments 对象
在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0]
也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，
第二个参数位于位置 1，依此类推）。

关于参数问题：
函数外面定义的变量是全局变量，函数内可以直接使用。
在函数内部没有使用var定义的=变量则为全局变量，
在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
js函数定义的参数没有默认值

------------------------------------------------------
常用技巧函数：（示例6.html）
1. HTML的标签（节点）操作
document.write(""); //输出的
document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。
如：var id = document.getElementById("hid"); //获取id值为hid的标签对象

html标签对象的操作：
标签对象.innerHTML="内容"；//在标签对象内放置指定内容
标签对象.style.css属性名="值" //改变标签对象的样式。
示例：id.style.color="red";
注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。
如：font-size（css）---> fontSize(JS属性)
标签对象.value； //获取标签对象的value值
标签对象.value=”值“；//设置标签对象的value值

2. 定时相关函数：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数
clearTimeout(iTimeoutID) -- 取消上面的单次定时

setInterval(vCode, iMilliSeconds [, sLanguage]) --无限次定时执行指定函数
clearInterval(iIntervalID)-- 取消上面的多次定时

------------------------------------------------------

JavaScript常用对象
=========================================================
<<JS的第一天作业>>
作业：
1. 做一个全选、全不选、反选
2. 做一随机点名的界面（必做）setInterval,(防止重复)
3. 做一个倒计时的按钮（10,9,8,7,...这是是个灰色不可点击的，当为0是会换成同意字样，并可点击。）
4. 选作：做一个倒计时（时分秒）。可选带暂停效果

预习：1. JS的常用对象。
2. 常用事件。
3. 了解如何自定义对象。

============================================================
==============JS中常用核心对象（引用类型）====================
=============================================================
* Array（数组）
var a= new Array(); //创建一个空数组
a = new Array(10); //创建一个数组单元为10个的数组。
a = new Array(10,20,30);//创建一个指定数组单元的数组。

a=['a','b','c','d']; //快捷定义数组
常用属性：length--获取长度。

常用方法：
toString() 把数组转换为字符串，并返回结果。
sort() 对数组的元素进行排序
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。

。。。。。

* Boolean 布尔值包装类对象
方法：toSource() 返回该对象的源代码。
toString() 把逻辑值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
* Date
var dd = new Date();

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
同上还有很多set方法用来设置。

* Math 对象用于执行数学任务。方法是静态的。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。

max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。

* Number
toString();
toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。

* String 子串处理对象
anchor() 创建 HTML 锚。
*charAt() 返回在指定位置的字符。
charCodeAt()返回在指定的位置的字符的 Unicode 编码。
*indexOf() 检索字符串。
*lastIndexOf() 从后向前搜索字符串。
match() 找到一个或多个正在表达式的匹配。
*replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substr() 从起始索引号提取字符串中指定数目的字符。
*substring() 提取字符串中两个指定的索引号之间的字符。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
*toLowerCase() 把字符串转换为小写。
*toUpperCase() 把字符串转换为大写。
* RegExp
exec()正则匹配
test()
match()
* Global
escape(string) -- 可对字符串进行编码
unescape(string) -- 函数可对通过 escape() 编码的字符串进行解码。
encodeURI(URIstring) -- 函数可把字符串作为 URI 进行编码。
decodeURI(URIstring) -- 函数可对 encodeURI() 函数编码过的 URI 进行解码。
*eval(string) -- 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
getClass(javaobj) -- 函数可返回一个 JavaObject 的 JavaClass。
*isNaN(x) -- 函数用于检查其参数是否是非数字值。
Number(object) --函数把对象的值转换为数字。
*parseFloat(string) -- 函数可解析一个字符串，并返回一个浮点数。
*parseInt(string, radix)

=============================================
第二天：
作业，1. 做一个注册的表单验证，
2. 实时问候：如：早上好！
3. 树形菜单。
4. 显示中文的星期几。
5.（选做）随机更换界面背景。

预习：1.JavaScript对象的定义
2.常用都有哪些事件？

==============================================
事件处理
一、事件源: 任何一个HTML元素（节点） body, div , button p, a, h1 .......
二、事件: 你的操作
鼠标:
*click 单击
dblclick 双击
contextmenu (在body) 文本菜单（鼠标右键使用）
要想屏蔽鼠标右键使用return false

*mouseover 放上
*mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘：
keypress 键盘事件
keyup 抬起
keydown 按下

文档：(主要使用在body标签中)
*load 加载
*unload 关闭
beforeunload 关闭之前

表单：
*focus 焦点
*blur 失去焦点
*submit 提交事件
*change 改变（如下拉框选择事件）
其它：
scroll 滚动事件

*selectd 事件

。。。。

三、事件处理程序
使用一个匿名或回调函数

<body onscroll="test()"> //浏览器的滚动条事件
document.body.scrollTop;//获取滚动条的上距离
document.body.scrollLeft;//滚动条的左距离

有三种方法加事件

第一种：
格式： <tag on事件="事件处理程序" />
*第二种：
<script>
对象.on事件=事件处理程序
</script>
第三种：(火狐不兼容)
<script for="事件源ID" event="on事件">事件处理程序</script>

事件对象：

属性：
1. srcElement
2. keyCode

事件 event window.event

1. srcElement 代表事件源对象
2. keyCode 事件发生时的键盘码 keypress , keydown keyup
3. clientX, clientY
4. screenX, screenY
5. returnValue
6. cancelBubble;

document.getElementById("one").offsetHeight; //获取one对应对象的高度
=============================================
第三天：
作业，1. 完善注册的表单验证提示，
2. 横向的菜单特效
3. 为图片轮换播放添加按钮
5.（选做）滚动图片替换
6.（选做）键盘事件的处理（通过键盘事件移动图层）

预习：1.JavaScript中的其他事件：（滚动事件，键盘事件。。）
2.DOM节点的定义？
3.DOM节点的常用操作？（增、删，获取）

========================================================================
一、DOM
作用：
DOM （Document Object Model）文档对象模型
1. document 文档 HTML XML 文件（标记语言）
<body>
<div>

<a href="#">wwww</a>
</div>
</body>
节点
根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
1. 整个文档是一个文档节点(根节点)
2. 每个 HTML 标签是一个元素节点
3. 包含在 HTML 元素中的文本是文本节点
4. 每一个 HTML 属性是一个属性节点
5. 注释属于注释节点

2. 父、子和同级节点
节点树中的节点彼此之间都有等级关系。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

1. 在节点树中，顶端的节点成为根节点
2. 根节点之外的每个节点都有一个父节点
3. 节点可以有任何数量的子节点
4. 叶子是没有子节点的节点
5. 同级节点是拥有相同父节点的节点

3。获取节点的方式：
array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组
object getElementById("id名"); //获取id名的唯一节点对象

示例：
document.getElementsByTagName("li"); //所有所有li节点
document.getElementById("lid"); //获取id值为lid的唯一节点
document.getElementById("uid").getElementsByTagName("li");
//获取id值为uid中所有li子节点
document.getElementsByTagName("ul")[0].getElementsByTagName("li");
//获取第一个ul节点中所有li子节点

4. Object 对象（HTML元素转成的对象(js对象)）
注意：如果使用js操作HTML文档，就需要选将HTML文档结构转成Js对象
a. 操作属性:
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
节点类型如下：
元素类型节点类型
元素1
属性2
文本3
注释8
文档9
其他属性：（针对于节点）
childNodes 返回节点到子节点的节点列表。
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。
nextSibling 返回节点之后紧跟的同级节点。
parentNode 返回节点的父节点。
textContent设置或返回节点及其后代的文本内容。

b. 操作内容
innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签
innerHTML //获取的是显示的内容，会包含HTML
outerText
outerHTML
表单
value
c. 操作样式
aobj.style.backgroundColor="red";
aobj.style.fontSize="3cm";
className
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
e. 操作节点：
appendChild() 向节点的子节点列表的结尾添加新的子节点。
cloneNode()复制节点。
removeChild()删除（并返回）当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
hasAttributes() 判断当前节点是否拥有属性。
hasChildNodes() 判断当前节点是否拥有子节点。
insertBefore() 在指定的子节点前插入新的子节点。

f. 创建节点：
* createElement() 创建元素节点
createAttribute() 来创建属性节点可以：元素节点.属性名=值；
createTextNode() 来创建新的文本节点可以：元素节点.innerHTML=文本内容；

有了以上三点的操作之前先转成对象
转成对象的两种形式：
1. 标记名(多个)、 id（唯一）、 name（多个）
document中的三个方法
var objs=document.getElementsByTagName("div"); //获取多个
var objs=document.getElementById("one");//获取一个
var objs=document.getElementsByName("two");

2. 通过数组
document.title=
document.body=[object]
window.frames=[object]
document.all=[object]
document.embeds=[object]
document.scripts=[object]
document.applets=[object]
document.images=[object]
document.forms=[object]
document.anchors=[object]
document.styleSheets=[object]
document.links=[object]

有七种访问方式(针对用form表单的其中访问方式)

//获取myform2中的username值是lisi的方式？

*alert(document.forms[0].username.value);
alert(document.forms["frm2"].username.value);
alert(document.forms.item(0).username.value);
alert(document.forms.item("frm2").username.value);
alert(document.forms.frm2.username.value);
*alert(document.frm2.username.value);
alert(document["frm2"].username.value);

//1.
//*alert(document.forms[1].username.value);
//2.
//*alert(document.forms["myform2"].username.value);
//3.
//*alert(document.myform2.username.value);
//4.
//alert(document.forms.item(1).username.value);
//5.

DOM
===================================================================================
一、将文档想成一个倒树，每一个部分（根、元素、文本（内容），属性，注释）都是一节点。

二、只要知道一个节点，按关系找到其它节点

父节点： parentNode

子节点（第一个，最后一个） childNodes firstChild lastChild

同胞（同辈）节点（上一个，下一个）nextSibling previousSibling

三、找到节点：
1. document中的三个方法可以获取到节点
var objs=document.getElementsByTagName("div");
var objs=document.getElementById("one");
var objs=document.getElementsByName("two");

获取到的标记名(多个)、 id（唯一）、 name（多个）

每个节点中的内容
节点类型nodeType、节点名nodeName，节点值nodeValue

四、每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

nodeName属性含有节点的名称。
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
五、注释：nodeName所包含的XML元素的标签名称永远是大写的。
对于文本节点，nodeValue属性包含文本。
对于属性节点，nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。

nodeType属性可返回节点的类型。
最重要的节点类型是：
元素类型节点类型
元素1
属性2
文本3
注释8
文档9

可以在一个文档流中

1. 创建节点
document.createElement("img")
appendChild();
insertBefore();

2. 添加到文档流中
3. 删除节点
removeChild();
==================================================================
第四天：2012-06-08
作业：
1. 使用DOM操作实现表格的隔行变色效果（斑马线）
2. 做一个DOM示例，实现为ul标签中所有li标签添加鼠标移入和移出事件，（改变字体颜色）。
3. 做一个浮动广告。（漂浮移动的效果）
4. （选做）做一个省和城市选择的级联操作。
5. 做一个DOM示例，实现实现节点的创建和删除操作。

预习：
1. window 对象常用的属性和方法都有哪些？
2. document对象常用的属性和方法都有哪些？
3. 如何实现节点的创建和删除操作。

=================================================================
BOM 浏览器对象

一、浏览器本身自己就有一些对象，不用创建就可以使用

window : 当前浏览器窗体的

属性：

status
opener
closed

方法：
alert();
confirm();
setInterval(function(){

},100);
clearInterval();

setTimeout("aaa()", 3000)
clearTimeout();

open() //开启新窗体的

document
frames
location
history
screen
...

[window.]成员

document.write();
==================================================
第五天：2012-06-11
作业：
1. 使用DOM实现在线图片的浏览，可以下一张，上一张的操作
（扩展。点击图片也可以，分左右边）。

2. 做一个按钮【选择地区】，点击后出现一个浮动层，可选择地区，并改变按钮上的字。

3. 使用DOM自己做一遍表格的操作实现表格的增、删、查操作。

4. （选做）使用Ajax实现一张表格数据的加载。
5. （选做）做一个JQuery技术实现表格的增、删、查操作。

预习：
1. Ajax的实现步骤？
2. XMLHttpRequest 对象的三个重要的属性：onreadystatechange、readyState和status分别表示什么意思？
3. 如何使用JQuery？
4. 使用JQuery获取元素节点对象的方式都有哪些？
==================================================

AJAX
---------------------------------------
var xmlhttp;

1. 创建请求对象
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 设置回调函数（监听）
xmlhttp.onreadystatechange=函数名；
或
xmlhttp.onreadystatechange=function(){
函数体。。。
}

3. 初始化：
xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php

4. 发送：
xmlhttp.send();

HTML DOM
------------------------------------
一、相关概念：
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM是属于XML DOM的，是XML DOM针对于HTML的应用。

二、常用的HTML DOM 对象：
1. document:
每个载入浏览器的 HTML 文档都会成为 Document 对象。
1.1 集合属性：
*forms[] 返回对文档中所有 Form 对象引用。（示例2、3.html）
*images[] 返回对文档中所有 Image 对象引用。(示例4.html)
links[] 返回对文档中所有 Area 和 Link 对象引用。

1.2 常用属性：
*cookie 获取当前域名下的cookie值的，是以字串形式返回的。
domain 返回当前文档的域名。
title 返回当前文档的标题。
URL 返回当前文档的 URL。

1.3 常用的方法
*getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
*getElementsByTagName() 返回带有指定标签名的对象集合。
write() 向文档写 HTML 表达式或 JavaScript 代码。
*writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

2. form:
2.1 属性：

2.2 常用方法：
reset() 把表单的所有输入元素重置为它们的默认值。
submit() 提交表单。

三、 BOM：
-----------------------------------
1. window 对象
1.1 集合：
frames[] 返回窗口中所有命名的框架。

1.2 属性：
document 对 Document 对象的只读引用。
history 对 History 对象的只读引用。(历史记录)
其中history的方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

location 用于窗口或框架的 Location 对象。（URL地址栏）
主要用于界面的跳转和刷新等操作

name 设置或返回窗口的名称。
Screen 对 Screen 对象的只读引用（获取浏览器的各种尺寸信息）
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。