【JavaWeb】基础知识总结04 JS基础
一.JavaScript简介
1.JavaScript语言是一种面向对象、事件驱动式的网页脚本语言。作用在于交互式操作；表单验证；网页特效；Web游戏；服务器脚本开发等。
2.JavaScript的格式：
JavaScript区分大小写；
JavaScript脚本程序须嵌入HTML文件中，或者外部js文件导入；
每行写一条脚本语句；
语句末尾可以加分号；
JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含标签
示例：
3.声明变量，以下声明均有效：
var stdId;
var name,sex;
var total=3721;
var notNull=true;
var i=j=0;
也可以省略var
m=9
4.在函数里声明一个变量不加var时也被认为是全局变量，故定义在函数外的变量一定是全局变量，定义在函数内的变量不一定不是全局变量。
5.JavaScript语句：
-with语句：（对象操作语句）
.功能：为一段程序建立默认对象
.格式：
with(<对象>) {
<语句组>
}
-for...in语句
.功能：重复执行指定对象的所有属性
.格式：
for(变量in对象) {
<语句组>
}
其他与java基本一致-.-
二.JS各种对象简介
1.对象_默认对象
-日期对象
.格式：日期对象名称=new Date([日期参数])
日期参数:1.省略(最常用)；
2.英文-数值格式: 月 日，公元年[时:分:秒]
如：today=new Date("October1,2008 12:00:00")
3.数值格式:公元年，月，日，[时，分，秒]
如：today=new Date(2008,10,1)
-建立数组对象：
格式1：数组对象名称=new Array([元素个数])
格式2：数组对象名称=new Array([[元素1],[元素2，...]])
格式3：数组名称对象=[元素1,[元素2，...]]
自带方法push()，元素length等，下面介绍4种:
.join([分隔符])数组元素组合为字符串
.toString()以字符串表示数组
.reverse()数组反转
.valueOf()返回数组值
-字符串对象
部分方法：
.charAt(索引)返回索引位置的字符
.indexOf("字串",[索引])返回字串在对象中的索引位置
.lastIndexOf("字串",[索引])返回字串在对象索引的位置(反向搜索)
.repalce("字串1","字串2")字串2替换字串1
.search("字串")返回字串在对象中的索引位置
.substring(索引i,索引j)返回索引i到索引j-1的字串
2.自定义对象
-构造函数定义对象类型；
-建立对象实例。
3.javascript事件处理
.事件处理程序：浏览器响应某个事件，实现用户的交互操作而进行的处理(过程)。
.事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序(函数)，完成时间处理过程。
示例如下:
MyHtml.html
点我啊
4.定时器
用以指定一段特定的时间后执行某段程序。
-setTimeout()
.格式：
[定时器对象名]=setTimeout("<表达式>",毫秒)
.功能：执行<表达式>一次
-setInterval()
.格式：
[定时器对象名]=setInterval("<表达式>",毫秒)
.功能：重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval。
.clearInterval()：终止定时器
.格式：clearInterval(定时器对象名)
5.confirm("<字符串>")会弹出一个对话框，点击确定返回真值，点击取消返回假。
6.screen屏幕对象，描述屏幕的显示及颜色属性。格式：screen.属性。
7.事件对象：当事件发生时，浏览器自动建立该对象，并包含该事件的类型、鼠标坐标等。
事件对象的属性：格式：event.属性。
示例：
function.getEvent(event) {
alert("事件类型："+event.type);
}
document.write("单击...");
document.onmousedown = getEvent;
//此处getEvent不要加()，因为有参数，而且参数由系统传入
8.在js中为某个对象(控件)绑定事件通常可以采取两种手段：
一种是直接在控件中调用处理函数。
一种为获取对象之后使用当前对象的事件属性(onclick等)赋一个处理函数的值。
9.历史对象：
用以存储客户端最近访问的网址清单。格式：history.属性 history.方法(参数)
加上return false可以接解决各个浏览器的兼容问题，否则只有IE正常。
10.链接对象：
-网页中的链接均会被自动看作链接对象，并依顺序，分别表示document.links[0]，document.links[1]...
-定义链接对象的格式：字串.link(属性)
※在页面中用超链接定义的链接均会按顺序存储于document.links集合中
11.form[i].elements[j].focus()选中第i个form中第j个元素为焦点。
12.Cookie
-写入Cookie：
.格式：document.cookie="关键字=值;[expires=有效日期];[...]"
.示例：
var today=new Date();
var expireDay=new Date();
var msPerMonth=24*60*60*1000*31;
expireDay.setTime(today.getTime()+msPerMonth);
document.cookie="name=zhang;expires="+expireDay.toGMTString();
一个月有效期(toGMTString返回的就是cookie所要求的日期格式)
-读取cookie：
.格式：document.cookie
13.有两种类型的cookie：
.持久性cookie，会被存储到客户端的硬盘上。
.会话cookie，不会被存储到客户端的硬盘上，而是放在浏览器进程所处的内存当中，当浏览器关闭则该会话cookie就销毁的。
14.table元素属性中有TABLE.style.display="none"表示隐藏，值为"block"表示展开。
15.在javascript中,函数(function)就是对象。
function add(number) {
alert(number+20);
}
var add=function(number) {
alert(number+20);
}
上面两种情况均会转换为后者进行使用，所以javascript中没有函数重载的概念。
16.在javascript中有一个Function对象，所有自定义函数都是Function对象类型的。
上述例子也能写成这种形式：
var add=newFunction("number","alert(number+20);");
多个参数则写成这种形式：
var add=newFunction("number1","number2","alert(number1+number2);");
-Function所有参数为字符串类型，最后一个字符串参数为函数体，之前的参数均为函数的参数。
17.在javascript中，每个函数都有一个隐含的对象arguments，表示给函数<实际>传递的参数。该对象类似于一个数组，argument[0]表示第一个参数...
例如：
对于varadd=function(number) {
alert(number+20);
}
调用add(1,2)时，arguments长度为2，argument[1]有实际值为2。
18.javascript中每一个函数对象都有一个length属性，表示该函数<期望>接收的参数格式。它与函数的arguments不同，argument.length表示函数实际接收的参数个数。
三.JS数据类型
1.javascript中有5种数据类型：
-Undefined
该数据类型的值只有一个：undefined
-Null
该数据类型的值只有一个：null
-Boolean
该数据类型的值有两个：truefalse
-Number
数字-.-
-String
javascript中没有char数据类型，String可以用单引号或者双引号。
2.typeof 是一元运算符，后跟变量的名称，用于获取变量的数据类型，其返回值有5个：undefined、boolean、number、string和object。
注：null也会返回object
3.在javascript中，如果函数没有声明返回值，那么会返回undefined
4.null与undefined的关系：undefined实际上是从null派生出来的，故null==undefined的结果是true
5.强制类型转换：在javascript中有3种强制类型转换：Boolean(value)，Number(value)，String(value)
6.在javascript中，对于函数中定义的变量来说，加var表示局部变量，不加则表示全局变量。
7.在javascript中，所有对象都是从Object对象继承过来的。Object中的属性时不可枚举的(propertyIsEnumerable 返回false)，因此无法通过for...in语句得到其中的属性。
8.javascript中，可以动态添加对象的属性，也可以动态删除对象的属性。
向对象中添加属性只需要用‘.’或者'[""]'的方式赋值就可以了。如：
object["username"]="haodada";
删除则使用delete关键字就行：
delete object.username;
四.JS对象的定义
1.在javascript中定义对象的最常见的方式
varobject={username:"zhangsan",password:123};
alert(object.username);
alert(object:password);
2.对于javascript数组的sort方法来说，它会先将待排序内容转换为字符串(调用toString方法)，按照字符串的先后顺序进行排序。
3.sort()函数中间可以传递参数，参数为一个比较函数，类似于C++，自写一个compare函数
4.javascript中允许使用匿名函数，类似于java中的匿名类，在使用时写下完整函数声明即可。
5.javascript中定义对象的几种方式(JavaScript中只有对象，没有类)：
①基于已有的对象来扩充属性和方法：
var object = new Object();
object.name="zhangsan";
object.sayName=function(name) {
this.name=name;
alert(this.name);
}
object.sayName="lisi";
②工厂方法：
function createObject() {
varobject=new Object();
object.username="zhangsan";
object.password="123";
object.get=function(){
alert(this.username+","+this.password);
}
returnobject;
}
var object1=createObject();
var object2=createObject();
※也可以加上参数进行创建不同的对象
此方法与java类不同，java类中只占用一份内存；而javascript的这种方法生成几个对象就会有多少份内存。
解决方法：将方法提取出来写在创建函数之外，然后通过引用调用：
function get() {
alert(this.username+","+this.password);
}
function createObject() {
varobject=new Object();
object.username="zhangsan";
object.password="123";
object.get=get;
returnobject;
}
③构造函数方式：
function Person(username,password) {
//在执行第一行代码前，js引擎会为我们生成一个对象
this.username=username;
this.password=password;
this.getInfo=function(){
alert(this.username+","+this.password);
}
//此处有一个隐藏的return语句，用于将之前生成的对象返回
}
var person=newPerson("zhangsan","123");
④原型("prototype")方式：
function Person()
{}
Person.prototype.username="zhangsan";
Person.prototype.password="123";
Person.prototype.getInfo=function() {
alert(this.username+","+this.password);
}
var person=new Person();
person.username="lisi";
person.getInfo();
单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。
此方法创建的对象所有方法和属性的引用都是共享的。如果一个对象改变了属性内容而不是改变索引的话会对所有对象造成影响。
⑤使用原型+构造函数方式来定义对象：
function Person() {
this.username=newArray();
this.password="123";
}
Person.prototype.getInfo=function() {
alert(this.username+","+this.password);
}
var p=new Person();
var p2=new Person();
此种定义方式，对象之间的属性互不干扰，各对象共享同一个方法。
⑥动态原型方式：
function Person() {
this.username=newArray();
this.password="123";
if(typeofPerson.flag=="undefined") {
Person.prototype.getInfo=function(){
alert(this.username+","+this.password);
}
Person.flag=true;
}
}
var p=new Person();
var p2=new Person();
感觉上效果和方法⑤差不多=.=
五.JS对象的继承
1.JavaScript中的继承：
①对象冒充：
function Parent(username) {
this.username=username;
this.sayHello=function(){
alert(this.username);
}
}
function Child(username) {
this.method=Parent;
this.method(username);
deletethis.method;
...
}
※this只在使用new时有效
②call方法方式：
/*call的用法*/
function tset(str1,str2) {
alert(this.name+","+str1+","+str2);
}
var object=newObject();
object.name="zhangsan";
//test.call相当于调用了test函数
test.call(object,"haodada","hello");//将object赋值给了this
/*call方法实现继承*/
function Parent(username) {
this.username=username;
this.sayHello=function(){
alert(this.username);
}
}
function Child(username,password) {
Parent.call(this,username);
...
}
※call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法第1个参数会被传递给函数中的this，从第2个参数开始，逐一赋值给函数中的参数。
③apply方法方式：
function Parent(username) {
this.username=username;
this.sayHello=function(){
alert(this.username);
}
}
function Child(username,password) {
Parent.apply(this,newArray(username));
...
}
※与②方法相比只不过是将参数都集合到了一个数组上。
④原型链(prototypechain)方式：
function Parent() {
}
Parent.prototype.hello="hello";
Parent.prototype.sayHello=function() {
alert(this.hello);
}
function Child() {
}
Child.prototype=new Parent();
//继续扩展属性或者方法：
Child.prototype.world="world";
※无法传递参数。
⑤混合方式()：
function Parent(hello) {
this.hello=hello;
}
Parent.prototype.sayHello=function() {
alert(this.hello);
}
function Child(hello,world) {
Parent.call(this,hello);
this.world;
}
Child.prototype=new Parent();
Child.prototype.sayWorld=function() {
alert(this.world);
}
...
※最为推荐的方法
六.Ajax
1.JavaScript编码规范：通常在JavaScript不希望外界访问的成员和方法名以下划线开始。
2.Ajax(Asynchronous JavaScript and XML),异步的JavaScript与XML
3.Ajax中的一个重要对象是XMLHttpRequest（IE与其他浏览器不兼容），所以在对象赋值时需要进行判断以支持所有浏览器：
var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
function ajaxSubmit() {
if(window.ActiveXObject){
xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest) { //除IE外其他浏览器的实现
xmlHttpReques= new XMLHttpReques();
}
if(null!= xmlHttpRequest) {
//准备向服务器发送请求(还未发送)
xmlHttpRequest.open("GET","AjaxServlet(请求资源的路径)",true);
//最后的参数表示是否以异步方式请求
//关联号ajax的回调函数(状态变化即调用)
xmlHttpRequest.onreadystatechange= ajaxCallback;(自写)
//真正向服务器发送数据
xmlHttpReuqest.send();//如果用post发送则加上附加参数
}
}
function ajaxCallback() {
//readyState的4个状态：1是构造完对象未发送请求，2是请求发送未响应，3是响应收到未处理，4是响应已处理完
if(xmlHttpRequest.readyState== 4) {
//status表示Http响应状态
if(xmlHttpRequest.status== 200) {
//此处可以处理xml
varresponseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML=responseText;
}
}
}4.可以在doGetdoPost中设置不再缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
5.向服务器提交数据
-GET方式：open("GET","AjaxServlet?v1="+v1+"&v2="+v2,true);
//设置回调函数
send(null);
-POST方式：open("GET","AjaxServlet",true);
//设置回调函数
//使用post方式提交，必须加上如下一行
setRequestHeader("Content-Type","application/x-www-form-urlenconded");
//后面参数是form标签中enctype的默认值，不过不设置此格式服务器端会
无法识别上传的数据
send("v1="+v1+"&v2="+v2);
七.其他
1.firefox的使用：
-在控制台中输入以便调试：
function showLog(message) {
//console.log(message);------由于只兼容于firefox，所以在其他浏览器运行会残生错误，故调试后只需注释这一行代码即可完成。
console.info(message);
console.warn(message);
console.error(message);
console.debug(message);
//不同样式的输出
}
function test(name) {
showLog(name);
}
test("hello");
注：以上全部类容总结来自于北京圣思园Java_Web教学视频，总结只是为了方便自己查阅&和大家交流=.=
本文固定链接：http://blog.csdn.net/fyfmfof/article/details/25541159