一、定义
JavaScript是脚本语言,可以嵌入到html中，是基于对象和事件驱动 的脚本语言。
浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript是一种轻量级的编程语言，JavaScript是可插入 HTML页面的编程代码。
特点：
- 交互性：校验用户在表单中的输入数据
- 安全性：Js不能访问客户端的本地磁盘。
- 跨平台：浏览器中都具备js解析器。
Js能做什么
- 能动态的修改，增加，删除html和css的代码
- 能动态的校验用户输入的表单数据
JavaScript函数和事件：通常，我们需要在某个事件发生时执行代码，比如用户点击按钮时。
如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。
操作HTML元素：JavaScript通常用于操作HTML元素，如需JavaScript访问某个HTML元素，可以使用 document.getElementById(id)方法
BOM是Browswer Object Model的缩写，即浏览器对象模型，主要用来 获取浏览器 的属性和行为，比如获取 浏览器的版本，获取浏览器的历史记录等等。
DOM是Document Object Model的缩写，即文档对象模型，主要用来获取文档中标签的属性和行为，例如获取 Html中某个 input的value值。
在HTML中引入js的方式，在不影响HTML功能的前提下，建议放在html中的 最下面的body和html标签之间，这样 浏览器会在最后 加载 js，可以提升 一些性能。
二、javaScript的基本语法
声明（创建）JavaScript变量：在Js中，无论什么类型的变量 都使用var来声明，
var carname;
（1）基本数据类型
number:数字类型
string:字符串类型
boolean:布尔类型
null:空类型
undefined:未定义
number、boolean、string也是对象，可以调用里面的方法。
类型转换：
number、boolean使用toString()方法转成string
string、boolean使用parseInt()和parseFloat()转换成number
//定义基本类型
var a = 5;
alert(typeof a);
var b = "A";
alert(typeof b);
var c = undefined;
alert(typeof c);
//数字类型转换为字符串
alert(typeof a.toString());
//布尔转换为数字
alert(parseInt(true));
//字符串类型转数字
alert(parseInt("str"))
(2)内建对象
引用类型:
引用类型 通常 叫作类(class),也就是说，遇到引用值，所处理的就是对象。
对象是由 new运算符加上 要 实例化的 对象的名字创建的。
Object对象：Object对象自身用处不大，在ECMAScript中的Object对象与 Java中的 java.lang.Object相似，
ECMAScript中的所有对象都由这个对象继承，Object对象中的所有属性和方法都会出现在其他对象中，所以理解了Object对象，就可以更好的理解其他对象。
var obj =new Object()
Boolean对象：Boolean对象是Boolean原始类型的引用类型，要创建Boolean对象，只需要传递 Boolean值作为参数：
var oBoooleanObject = new Boolean(true)
Boolean对象将覆盖Object对象的VaueOf()放回原始值，即true和false.
Number对象：
String对象：
//Number对象
var num1 = new Number(8);
var num2 = new Number(6);
alert(typeof num1.toString());
alert(typeof num1.valueof());
//String 对象
var str = new String("monkey1024");
alert(str.length); //字符串的长度
alert(str.charAt(3));//返回索引的字符
alert(str.charCodeAt(1));//返回索引字符的Unicode
alert(str.indexOf(n)); //返回字符的索引
var arr = str.split("-");//根据传入的字符将字符串分割为数组
for(index in arr){
alert("split"+arr[index])
}
alert(str.substr(3)); //从起始索引提取字符串中指定数目的字符
alert(str.substring(2,6));//提取字符串中指定索引号之间的字符
alert(str.toUpperCase());//将字符串中的字符转换成大写
//数组对象
var arr = new Array();//空数组
var arr1 = new Array(10);//创建一个长度是10的数组
var arr2 = new Array(8,"java","10");//创建数组直接实例化的元素
var arr= [];//空数组
var arr =[9,6,7,"a","a"] //创建数组直接实例化元素
alert(arr.length);//数组长度
alert(arr.join("-"));//将数组中的元素根据传入的分隔符拼接成一个自付串
alert(arr.pop());//将数组中的最后元素去除并返回
alert(arr.push("css"));//向数组中添加元素
alert(arr.reverse());//翻转数组
alert(arr.sort());//将数组中的元素进行排序
//Date类
var d = new Date();
alert(d);
alert(d.toLocaleString());//获取本地时间格式的字符串
alert(d.getFullYear());//年
alert(d.getDate());//日
alert(d.getTime());//毫秒
var d2 = new Date(365*24*60*60*1000);
alert(d2.toLocaleString());
//Math对象
alert(Math.PI);//圆周率
alert(Math.abs(-1));//绝对值
alert(Math.ceil(3.5));//向上摄入
alert(Math.floor(2.3));//向下射入
alert(Math.pow(2,3));//计算2的3次方
alert(Math.random());//0-1之间的随机数‘
alert(Math.round(1.1)); //四舍五入
//正则对象
var reg = new RegExp();
var reg =/^[A-z0-9_-]+\@[A-z0-9]+\.[A-z]+$/;
var email ="monkey1024@monkey.com";
reg.test(email);
（3）运算符
一元运算符：
delete:删除 以前定义的 对象属性或方法的引用
自增，自减运算符
一元加法和一元减法：一元加法本质上对数字无任何影响，但对 字符串却有 有趣的效果，会把字符串 转换成数字。
位运算符：
Not
AND运算符 由 &表示
OR运算符 由|表示
XOR运算符 由^表示
左移运算符 由<<表示
有符号右移运算符 由>>表示
无符号右移运算符 由>>>
逻辑运算符：
逻辑NOT运算符： !
逻辑AND运算符 ：&& ；逻辑AND运算的运算数 可以 是任何类型的，不止是Boolean值
逻辑OR运算符： ||;逻辑OR运算的运算数
乘法运算符：
乘法运算符 ：乘法运算符 由*号表示，用于两数相乘
除法运算符：
除法运算符：除法运算符由斜杠(/)表示，
取模运算符：除法(余数）运算符由百分号（%）表示
等性运算符：
判断两个变量 是否相等 是程序设计中 非常重要的计算。在处理 原始值时，这种 运算 相当简单，但涉及对象，任务就稍微有点复杂。
ECMAScript提供了 两套等性 运算符：等号和非等号 用于处理原始值，全等号和非全等号用于处理对象。
条件运算符：
variable = boolean_expression?true_value:false_value
复合赋值运算符：
*=,/=, %=,+=,-=,<<=,>>=
void运算符：
没有返回值的意思，一般常用在a标签里，用户点击后不会进行跳转。
类型运算符：
typeof:判断并返回变量的数据类型
instanceof:判断变量是否是某种数据类型
（4）逻辑语句
if语句：
if(condition) statement1
else statement2
迭代语句：
迭代语句又叫循环语句，声明一组要反复执行的命令，直到满足 某些条件为止，循环 通常用于 迭代数组的值，或者执行重复的算数任务。
do-while 语句
while语句
for语句
for(initialization;expression;post-loop-expression) statement
for(i = 0;i<5;i++){
alert(i);
}
for-in语句
for语句时严格的迭代语句，用于枚举对象的属性
for(property in expression) statement
例子：
for(sProp in window){
alert(sProp);
}
//for in 循环 例子 遍历数组
var arr =[1,2,3,4,"js","s"];
for (index in arr){ //index表示数组的下标
alert(index); //输出数组的下标
alert(arr[index]);//输出数据
}
（5）JS函数
在javaScript中的函数跟java中的方法类似，可以将 一些代码 编写 在一个函数 里面，可以被调用执行
注意：一个函数被调用才会被执行。
JavaScript函数定义：
普通方式：
语法： function 函数名(参数列表){函数体}
function method(){
alert("My first Function");
}
method();
匿名函数
语法： function(参数列表){函数体}
var method1 = function(){alert("使用匿名函数的方法");}
method1();
对象函数
语法：new Function(参数1，参数2…函数体);
注意：参数名称 必须使用 字符串形式的写法，最后一个默认是函数体，也需要使用字符串形式
var fn = new Function("a","b","alert(a+b)");
fn(10,4);
函数的参数
- 1、形参不能使用var修饰，直接写参数即可
- 2、形参和实参个数不一定相等
- 3、arguments对象是个数组 会将传递的实参进行封装
function fn(a,b,c){
//arguments是一个内置的额数组对象，会将传递的所有
for(i=0，i<arguments.length;i++){
alert(arguments[i]);
}
}
fn(6,6,6,77,777);
三、ECMAScript面向对象技术
面向对象术语:
**类：**每个对象都由类定义，可以把类看做对象的配方。类不仅要定义对象的接口(interface)(开发者访问的属性和方法），还要 定义对象的内部工作（使属性和方法发挥作用的代码）。编译器和解释程序都根据 类的说明构建对象。
**实例：**程序使用类创建对象，生成的对象叫作类的实例。对类生成的对象 的个数 的唯一限制 来自于运行 代码的 机器的物理内存每个实例的行为相同，但实例处理一组独立的数据，由类创建对象实例的过程叫作 实例化。
对象的构成：在ECMScript中，对象由特性(attribute)构成，特性可以 是原始值，也可以是 引用值。
如果特性存放的是函数，它将 被看作对象的方法（method)，否则 该特性被看作对象的属性（property)
ECMAScript对象应用：对象的创建和销毁 都在JavaScript执行过程中发生，理解这种范式的含义 对理解 整个语言至关重要。
声明和实例化： 对象和创建 方式 是 用 关键字 new 后面 跟上 实例化的类的名字：
var Object = new Object()
var oStringObject = new String();
**对象引用：**在ECMAScript中，不能访问对象的物理表示，只能访问对象的引用。每次创建对象，存储在变量中的都是该对象的引用，而不是对象本身。
对象废除：ECMAScript拥有无用 存储单元收集程序，意味着不必专门 销毁对象 来释放内存。当再没有 对对象的引用时，称该对象被废除了(deference).运用
无用存储单元收集程序时，所有废除的对象都被销毁。废除对象的所有引用时要当心。如果一个对象有两个或更多引用时，则要正确废除该对象，必须将其所有引用都设置为 null。
对象类型：
一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。
本地对象：
Object
Function
Array
String
Boolean
Number
Date
RegExp
Error
EvalError
RangeError
SyntaxError
TypeError
URIError
内置对象：“由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。这意味着开发者不必明确实例化内置对象，它已被实例化。
(它们也是本地对象，根据定义，每个内置对象都是本地对象).
Global对象
Math对象
**宿主对象：**所有非本地对象都是宿主对象(host object),即由WCMAScript实现的宿主环境提供的对象。
所有 BOM和DOM对象都是宿主对象。
四、BOM对象
BOM(浏览器对象模型）中有很多对象，开发者 可以直接使用 这些对象中的方法 来实现一些功能。****）
window对象
window是顶层对象，所有其他的对象都在它下面，包括DOM中的document，在使用时可以省略：
window.alert("window对象");
alert("width"+window.innerWidth+",height"+window.innerHeight);
弹窗的方法
//提示框
alert("提示框")
//确认框
var flag = confirm("是否删除？");
alert(flag);
//输入框
var res = prompt("请输入密码：");
alert(res);
open方法
widow.open（“url地址”）；
可以在新的标签页中弹出 Url中网页，弹出后 之前的网页 还会存在。
定时器方法
可以让函数在指定时间后执行，只执行一次：
//方法1
//setTimeout(函数，3000);只执行一次
var timer=setTimeout(function(){
alert("定时器")
}，3000)；
//clearTimeout：关闭定时器
claerTimeout(timer);
//方法2 setInterval() ,每隔一段时间执行一次
var interval =setInterval(
function(){
alert("setInterval")
},3000
);
//关闭setInterval()定时器方法
clearInterval(interval);
Location对象
获取当前浏览器地址栏的url:
alert(location.href);
//浏览器跳转，产生浏览记录
location.href = "http://www.baidu.com"
location.assign("http://www.qq.com");
//不产生浏览记录
location.replace("http://www.qq.com");
} ,1000
);
history对象
navigator对象
五、javaScript之DOM简介
DOM文档对象模型
DOM文档对象模型 是基于 HTML树的api,这里可以 把HTML结构看成是 一课树形结构，使用DOM可以操作树中的节点，即操作（增删改查）HTML标签。
5.1HTML DOM Document对象
每个载入浏览器的HTML文档都会 成为 Document对象，Document对象 使我们可以从脚本中 对HTML页面中的所有元素 进行访问。
getElementById:根据html标签的id来获取标签 对象
<body>
<!-- DOM文档对象模型是基于HTML树的API,这里可以把HTML结构 看成是一棵树形结构，使用DOM可以操作树中的节点
即操作(增删改查)HTML标签。
-->
<form name="baseInfo" action="#" method="post">
姓名：<input type="text" id="name" value="123"><br>
密码：<input type="password" id="pwd"><br>
<input type="button" id="btn" name="submit" value="提交" >
</form>
</body>
<script type="text/javascript">
//显示用户
var name = document.getElementById("name");
//获取密码
var pwd = document.getElementById("pwd");
//获取按键
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(name.value);
alert(pwd.value);
}
</script>
getElementsByName根据html标签的name来获取一个数组对象，在html标签中name值是可以重复的，所以该对象会返回一个数组对象：
<body>
<!-- getElementByName根据HTML标签的name来获取一个数组对象，在html 标签中的name值是可以重复的，所以该方法 会返回一个 数组对象 -->
<form name="baseInfo" action="#" method="post">
<input type="text" name="monkey1" value="value1" ><br>
<input type="text" name="monkey1" value="value2"><br>
<input type="text" name="monkey" value="value3"><br>
<input type="text" name="monkey" value="value4"><br>
</form>
</body>
<script type="text/javascript">
var arr = document.getElementsByName("monkey");
alert(arr.length);
for(index in arr){
alert(arr[index].value);
}
</script>
getElementsByTagName：根据标签的名字来获取数组对象
5.2HTML DOM Element对象
在HTML DOM(文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有HTML元素是元素节点
- 所有HTML属性是属性节点
- HTML元素内的文本是文本节点
- 注释是注释节点
hasChildNodes:判断当前Html标签对象下是否包含子节点
replaceNode:替换节点
getAttribute:获取标签中的属性
setAttribute给对象添加属性
5.3HTML DOM Event对象
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标按钮的状态。事件通常与函数 结合使用，函数 不会在 事件发生前执行。
事件绑定的几种方式：
1、将事件和响应行为都内嵌到html标签中：
<!-- 1、将事件和响应行为 都内嵌 到html标签中 -->
<input type="button" value="点我" onclick="alert('绑定事件1')"/>
<br>
2、将事件内嵌到html中，响应行为用 javaScript函数进行封装
<script>
function fun(){
alert("事件绑定2");
}
</script>
<input type="button" value="点我" onclick="fun()"/>
//3、将事件和响应行为 与 HTML标签 完全 分离
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("事件绑定3");
}
</script>
<input id="btn" type="button" value="点我"/>
事件的应用
onchange
使用onchange事件实现 城市和区的 二级联动：
<body>
<form>
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
<select id="area">
<option value="sj">松江</option>
<option value="xh">徐汇</option>
<option value="hp">黄埔</option>
</select>
<br>
</form>
</body>
<script type="text/javascript">
//使用onchange事件实现城市和区的二级联动
var select = document.getElementById("city");
select.onchange = function(){
var optionVal = select.value;
var area = document.getElementById("area");
if('bj'==optionVal){
area.innerHTML = "<option>海淀</option> <option>朝阳</option>";
}else if('tj'==optionVal){
area.innerHTML = "<option>南开</option> <option>静海</option>";
}else if('sh'==optionVal){
area.innerHTML = "<option>浦东</option> <option>徐汇</option>";
}else{
alert("error");
}
}
</script>
onfocus和onblur
实现当input获得焦点和失去焦点 分别给用户 一个提示信息。
<body>
<label for="txt">姓名：</label>
<input id="name" type="text"/>
<span id="nameValid"></span>
</body>
<script type="text/javascript">
var txt = document.getElementById("name");
//获取焦点 ： onfcous
txt.onfocus = function(){
//友好提示
var span = document.getElementById("nameValid");
span.innerHTML = "姓名长度最小是8位";
span.style.color = "yellow";
}；
//失去焦点: onblur
txt.onblur = function(){
//错误提示
span.innerHTML = "格式不正确";
span.style.color = "red";
};
</script>
onmouseover和onmouseout
实现一个div元素被鼠标移入时变成粉色 移出恢复原色
<body>
<div id="d1"></div>
</body>
<style type="text/css">
#d1{
background-color: blue;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var d1 = document.getElementById("d1");
d1.onmouseover = function(){
d1.style.background = "Pink";
}
d1.onmouseout = function(){
d1.style.background = "blue";
}
</script>
onload
实现当页面加载完毕后，动态的设置span的内容
<body>
<span id="s1"></span>
</body>
<script type="text/javascript">
window.onload = function(){
var s1 = document.getElementById("s1");
s1.innerHTML ="onload事件";
};
</script>
8785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
