玩转JavaScript
javascript:运行在浏览器上的脚本语言
网景公司（目前被美国在线收购）
不需要程序员手动编译，编写完代码后，浏览器直接打开解释执行
js的目标程序一普通文本形式保存，这种语言都叫脚本语言
js到底是干啥的？
配合HTML
js包含三块：ECMAScript,DOM,BOM
ECMAScript:是JECMA指定的262表准，js和JScript都遵守这个标准，ECMAScript是js的核心语法
DOM编程是通过javaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的
BOM编程是对浏览器本身操作，例如：前进，后退，地址栏，关闭窗口，弹窗。由于浏览器有不同
的厂家制造，所以BOM缺少规范，一般只有一个默认的行业规范。
在HTML嵌入JavaScript代码的方法？
①
js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应得程序
在js中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick.
事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on，而事件句柄是以HTML标签的属性存在的
原理：οnclick='js代码',页面打开时，js代码并不会执行，只是把这段代码注册到按钮的click事件上了，等到这个按钮发生click之后，注册在onclick上的代码会被浏览器自动调用
-在js中有一个内置的对对象叫做window全部小写，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做：alert，用法是：window.alert("消息");这样就是弹窗了。
-js中的字符串可以使用双引号，也可以使用单引号
-js中的一条语句结束后可以使用分号，也可以不用
window.可以省略
②脚本快（位置随意）
window.alert("hello world!");
暴露在脚本块当中的程序，在页面打开的时候执行，
并且遵守自上而下的顺序依次逐行执行
③（推荐）引入外部独立的文件
标识符和关键字
标识符命名规则：数字，字母，下划线，美元符号
不能以数字开头
严格区分大小写
标识符不能与关键字冲突
标识符命名规范：类名和接口名：驼峰命名法，
方法名和变量名：首字母小写后面单词首字母大写，
常量名：全部大写，单词间用下划线连接
script 中的变量
声明变量：var变量名；
赋值：变量名=值
js是一种弱类型的语言，没有编译阶段，一个变量可以随意赋值，赋什么值都行
var i=100;
i=false;
i="abc"
i=new object();
i=3.14;
重点：js是一种弱类型的编程语言。
js函数初步
等同于Java的方法
格式：
js中的方法不需要指定返回值类型，返回啥类型都行
①function 函数名（形参列表）{ 函数体 }
②函数名=function(形参列表){函数体 ；}
function sum(a,b){
//a和b都是局部变量，他们都是形参（a和b都是变量名，变量名随意）
alert(a+b);
}
函数必须调用才能执行
sum(10,20)
java中得方法有重载机制，js中有吗？
重载：方法名或者函数名一样，形参不同（个数、类型、顺序）
js中如果有同名函数，后面的函数会替代前一个
在js中定义的函数尽量不要重名，在js中分辨函数就靠函数名分辨，
js得去全局变量，和局部变量
①生命周期不一样，在函数体之外声明的变量属于全局变量，全局变量得生命周期是：浏览器打开时声明，关闭时销毁
尽量少用，应为他会一直暂用浏览器得内存空间
②局部变量：函数体内，函数的形参也属于局部变量
局部变量得生命周期是：从函数开始执行时局部变量的内存空间开辟，函数执行结束后，局部变量得内存空间释放
局部变量得生命周期较短
如果变量在声明时没有使用var关键字，无论在哪里声明得都是全局变量
js中得数据类型
赋值时数据还是有类型得
js中数据类型：原始类型，引用类型
原始类型：undefined\Number\String\Boolean\Null
引用类型：Object以及其子类
2、在es规范之后又基于以上的六种类型之外又添加一种Symbol
3、js中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型
typeof运算符的语法格式 typeof 变量名
typeof运算符的运算结果是以下6个字符串之一：全部小写
“undefined”"number" "string" "boolean" "object" "function"
4、在js中比较字符串是否相等使用“==”完成，没有equals
//求和，要求a\b变量将来的数据类型必须是数字，不能是其他类型
function sum(a,b){
if(typeof a=="number" && typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须为数字")；
}
null属于Null类型，但是typeof的结果是object
当一个变量没有手动赋值，系统默认赋值
number类型包括小数，正数，负数，整数，无穷大
NaN:表示not a number,不是一个数值，但属于number类型
、、运算结果本来因该是一个数字，最后算完不是一个数字的时候不是一个数字，就会出现他
+号两端只要有一个不是数字。加号就不会做求和运算，做字符串拼接
Infinity(当除数为0时，结果为无穷大)
isNaN函数？
①isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字
is not a number
②parseInt()函数可以将字符串自动转换成数字，并且取正整数位
③parseFloat()函数将字符串自动转换成数字，
④Math.ceil()函数（Math是数学类，数学类当中有一个函数叫做ceil（），作用是向上取整。）
Math.ceil("2.1")---------3
js中布尔类型：
①true，false
②在布尔类型中有一个函数叫做：boolean()，作用：将非布尔类的数据转换成布尔类型
转换规律：有就转换成true没有就转换成false
String类型：
1.在js当中字符串可以使用单引号，也可以使用双引号
2，创建字符串对象的方式
--var s="abc";
--String是js内置的支持类，可以直接用，String的父类object
var s2=new String("abc");
小string属于原始类型string
大String 属于Object
3.无论大小，他们的属性和函数都是通用的
4.关于String类型的常用属性和函数？
属性：length 获取字符串长度
函数：indexof :获取指定字符串在当前支付穿中第一次出现处的索引
lastIndexof：获取指定字符串在当前支付穿中最后一次出现处的索引
replace：替换
substr ：截取子字符串
substring：截取子字符串
toLowerCase 转换大小写
toUpperCase
split：拆分字符串
alert（“HTTP：//baidu.com”.indexof("http")）-------0
alert（“HTTP：//baidu.com”.indexof("https")）-------(-1)
--判断一个字符串中是否包含某个子字符串？
alert（“HTTP：//baidu.com”.indexof("http")）-------（>=0?包含：不包含）
replace
alert("name=value%name=value%name=value".replace("%","&"))--将%替换成&（只替换第一个）
继续调用replace就会继续替换
正则表达式来实现替换所有
substr和substring有啥区别？
substr(startIndex,length)
alert("abcdefxyz".substr(2,4));//cdef
substr(startIndex,endIndex) 注意：不包括endIndex
alert("abcdefxyz".substring(2,4));//cd
Object类型：
1、Object类型是所有类型的超类，自定义的任何类型，默认继承object
2、object类包括哪些属性？
prototype属性（常用的，主要是这个）：作用是给动态的扩展属性和函数。
constructor属性
3.object类包括那些函数？
toString()
valueof()
toLocaleString()
4.在js中定义的类默认继承object，会继承object类中所有的属性以及函数。
换句话说，自己定义的类中也有prototype属性
5.在js中怎样定义类？怎样new对象？
定义的语法：
①function 类名（形参）{}
② 类名=function（形参）{}
创建对象的语法：new 构造方法名（实参）//构造方法名和类名一致
定义一个函数sayHello
function sayHello(){}
①把sayHello当成一个普通函数来调用sayHello();
②把sayHello当作一个类来创建对象
var obj=new Student();obj是一个引用，保存内存地址指向堆中的对象
JS中类的定义，同时又是一个构造函数的定义
在JS中类的定义和构造函数的定义是放在一起来完成的
function User(a,b,c){abc是形参，局部变量
声明属性this表示当前对象
user类中有3个属性:sno\sname\sage
this.sno=a;
this.sname=b;
this.sage=c;
}
//创建对象
var u1=new User(111,"zansan",30);
//访问对象属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
var u2=new User(222,"zansan",30);
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
Emp=function(ename,sal){ this.ename=ename;this.sal=sal; }
Product =function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice=function(){
return this.price;
}
}
var pro=new Product(111,"xigua1",4.0);
var pri=pro.getPrice();
alert(pri);
可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname=function(){
return this.pname;
}
//调用扩展的函数
var pname=pri.getPname();
alert(pname);
给String扩展一个函数
String.prototype.suiyi=function(){
alert("这个是给String类型扩展的一个函数");
}
"abc".suiyi();
User=function(username,password){
this.username=username;
this.password=password;
}
var u=new User ();
var u=new User("zahng1");
var u=new User("zahng",333);
null NaN undefined区别？
①数据类型不一致 object,number,undefined
②null和undefined可以等同
alert（null==undefined）//true
//在JS中有两个比较特殊的运算符
==；等同运算符：只判断值是否相等
===；全等运算符：既判断值是否相等，有判断数据类型是否相等
JS中常用事件：
1.blur失去焦点
2.foucus获得焦点
3.change下拉列表选项中项改变，或文本框内容改变
4.keydown键盘按下
5.keyup键盘弹起
6.mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
7.load页面加载完毕（页面中的所有元素全部加载完毕之后发生）
8.select文本被选定
任何一个事件都会对应一个事件句柄，事件句柄是在事件前加on
onxxx这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）
回调函数(自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数)
①注册事件的第一种方式，直接在标签中使用事件句柄
function sayHello(){alert ("hello js")}
以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生后，该函被浏览器调用。我们成这个函数为回调函数；
②事件注册的第二种方式（使用纯JS代码完成事件的注册）
var btnobject=document.getElementById("mybtn");
第二部：给按钮对象的onclick属性赋值
btnobj.οnclick=回调函数；//注意千万别加小阔号（回调函数）
这行代码的含义是，将回调函数注册到click事件上
var btnobject1=document.getElementById("mybtn1");
mybtn1.οnclick=function(){
alert("text")
}
这个函数没有名子，叫做匿名函数，这个匿名函数也是一个回调函数
这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用
终极格式
document.getelementbyId("mybtn").οnclick=function(){
alert("hello")
}
关于JS代码的执行顺序
-------------------------------------------------------------
变形（推荐）
JS代码设置节点的属性
//捕捉回车键
运算符之void（javascript:void(0)的用法）
void运算的语法：void（表达式）
运算原理：执行表达式，但不返回任何结果
javascript:的作用是告诉浏览器后面是一个代码而不是一个路径
另外（）里必须有表达式
JS的控制语句
①if
②switch
③while
④do...while
⑤for
⑥break
⑦continue
⑧for...in语句（了解）
⑨with（了解）
//创建JS数组(js中的数组写啥都行，类型随意，元素的个数随意)
var arr=[false，true，1，2，"abc",3.14];
//遍历数组
for(var i=0;i
for(var i in arr){
arr（i）;
}
(i是数组元素的下标，for..in语句可以遍历对象的属性,在对象中是String类型的属性名)
alert(u.username);
alert(u.password);
with(u){alert(password,password);}
以上with语句不推荐使用
-------------------------------------------------------------------------------------------------------------------（DOM）
js包含三块：ECMAScript,DOM,BOM
1， ECMAScript:js核心语法（ES规范/ECMA-262标准）
DOM编程是：文档对象模型：对网页当中的节点进行增删的过程。HTML文档被当作DOM树来看待
BOM编程是：关闭浏览器窗口，打开一个新的浏览器窗口，后退，前进，浏览器地址栏上的地址等，都是BOM编程
2，DOM和BOM的区别和联系？
BOM的顶级对象是window
DOM的顶级对象是document
实际上BOM是包括DOM的！
DOM-设置和获取文本框的value
案例二：将第一个文本框里的内容赋值到第二个文本框内
DOM-innerHTML和innerText操作div和span
innerText和innerHTML都是属性，都是设置元素内部的内容
案例：邮箱验证
去除字符串的前后空白:trim()函数
document.getElementById("aaa").value.trim();
//低版本的IE浏览器不支持字符串的trim函数
//可以自己对String类扩展一个全新的trim函数
String.prototype.trim=function(){
//在当前的方法中的this代表的就是当前字符串
//return this.replace("前空白","").replace("后空白","")
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
案例：
判断所有表单项合法，然后提交表单
document.getElementById("submitbtn").onclick=function () {
//当所有信息合法的时候提交表单
//触发username的blur password2的blur Email的blur
document.getElementById("username").focus();
document.getElementById("username").blur();
document.getElementById("password2").focus();
document.getElementById("password2").blur();
document.getElementById("email").focus();
document.getElementById("email").blur();
if (usernameerrorspan.innerText=="" && passwordspan.innerText=="" && emailerrorspan.innerText=="")
{
var userformEle=document.getElementById("userform");
userformEle.action="http://localhost:8080/jd/save";
userformEle.submit;
}复选框的全选和取消全选
吸烟
喝酒
烫头
获取下拉列表选项中项的value(οnchange=alert("this.value"))
/*
* 关于JS中的内置类：Date，可以用来获取事件和日期
* */
//获取系统当前时间
var nowTime=new Date();
//输出
document.write(nowTime);
//转换成具有本地语言环境的日期格式
nowTime=nowTime.toLocaleString();
document.write(nowTime);
案例：获取系统当前时间（不断更新）
//每格一秒调用函数
function start() {
v= window.setInterval("displayTime()",1000);//每个一秒调用displaytime函数
}
//时间停止函数
function stop() {
window.clearInterval(v);
}
①window.setInterval("displayTime()",1000);//每个一秒调用displaytime函数
②window.clearInterval(v);
数组内置Array
//创建长度为0的数组
var arr=[];
var arr2=[1,2,3,false,"abc",3.14];
//添加元素
arr2[7]="test";
document.write("
");
for (var i=0;i
");
}
//另一种创建数组的对象的方式
var a=new Array();//长度为零
var a2=new Array(3);//长度为3
var a3=new Array(3,2);//长度为2（3和2代表两个元素）
var a=[1,2,3,9];
var str=a.join("-");//”1-2-3-9“
//在数组的末尾添加一个元素(数组长度+1)
a.push(10);
//将数组末尾的元素弹出（数组长度-1）
var endElt=a.pop();
//注意：JS中的数组可以自动模拟栈数据结构：后进先出，先进后出
--------------------------------------------------------------------------------------------------------------(BOM)
1.BOM编程中，window对象是顶级对象，代表浏览器窗口
2.window有open和close方法，可以开启窗口和关闭窗口
window.open('http://www.baidu.com','s_self');
window.close();//关闭当前页
弹出消息框和确认框
window.alert("消息框");
var ok=window.confirm("亲，确认删除数据吗？")
根据这个返回值类型来判断删与不删
history对象
window.history.back();
window.history.go(-1);
设置浏览器地址栏上的URL
①var locationobj=window.location;//获取地址栏的地址
locationobj.herf="http://www.baidu.com"
②window.location.herf="http://jd.com";
③window.location="http://jd.com";
④document.location.herf="http://www.jd.com";
⑤document.location="http://www.jd.com";
总结：有哪些方法可以通过浏览器网服务器发请求？
1，表单from的提交
2，超链接
3，document.location
4,window.location
5,window.open("url")
这几种方式都可以携带数据给服务器，只有通过表单提交的数据才是动态的
将当前窗口设置成顶级窗口
长时间不操作的话，会显示重新登录，但是登录页还是显示在工作区的窗口中，但是其他位置还是正常的。
这样我们就需要将登陆页面设置成顶级窗口
if(window.top!=window.self){
//将当前窗口设置为
window.top.location = window.self.location;
}
将005页面引入到当前网页中
JSON
1.什么是JSON?
JavaScript Object Notation.(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON）
2.JSON是一种标准的轻量级的数据交换格式。特点是：
体积小，易解析
3.在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML
XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML）
HTML和XML有一个父亲：SGML（标准通用标记语言）
HTML主要做页面展示：所以语法松散。很随意
XML主要做数据存储和数据描述：所以语法相当严格。
//创建JSON对象(无类型对象。)
var jsonObj={
"sno":"110",
"sname":"张三"，
"sex" :"男"
}；
//访问json对象的属性
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
var students=[{"sno":"110","sname":"zahngsam","sex":"男"}，{.......},{........}];
案例：
var user={
"son":"001",
"name":"张三",
"sex":"男",
"address":{
"city":"北京",
"street":"大兴区",
"zipcode":"52125"
},
"aihao":["somke","drink"]
}；
//访问人名和城市
alert(user.name+","+user.address.city);
eval函数的作用是：
将字符串当作一段代码解释并执行。
window.eval("var i=100;");
alert("i="+i)//i=100
//java连接数据库，查询数据之后，将数据在Java程序中拼接成JSON格式的”字符串“，将JSON格式的字符串相应到浏览器
//也就是说Java响应到浏览器上的仅仅是一个“JSON格式的字符串”，还不是一个JSON对象
//可以使用eval函数，将json格式的字符串转换成json对象
例子：
var fromjava="{\"name\":\"zzahnsan\",\"password\"：\"123\"}";//这是Jav程序相应过来的json格式的字符串
//将以上格式的字符串转换成json对象
window.eval("var jsonObj="+fromjava);
//访问json对象
alert(jsonObj.name+jsonObj.pasword);//在前端取数据
面试题：
在JS当中：[]和{}有什莫区别？
[] 是数组
{}是JSON
Java中的数组：int [] arr={1,2,3,4,5};
json中的数组：var arr=[1,2,3,4,5];
JSON:var jsonObj={"email":"[email protected]","age":25};
访问JSON对象的属性
json.username
json["username"]
//案例：
var data = {
"toal": 4,
"emps": [
{"sno": "01", "sname": "咋还能", "sex": "男"},
{"sno": "02", "sname": "六的哈", "sex": "女"},
{"sno": "03", "sname": "麻花疼", "sex": "男"}
]
};
window.onload = function () {
var displaybtn = document.getElementById("display");
displaybtn.onclick = function () {
var html = "";
var emps = data.emps;
for (var i = 0; i < emps.length; i++) {
var emp = emps[i];
html += ""
html += ""+emp.sno+" "
html += ""+emp.sname+" "
html += ""+emp.sex+" "
html += " "
}
document.getElementById("emptbody").innerHTML=html;
}
}
员工信息表
编号
姓名
性别