javaweb基础第一天

day03总结

l JavaScript的基础

n JavaScript的变量

n JavaScript的数据类型

n JavaScript的语句

n JavaScript的数组

n JavaScript的函数

n JavaScript内建对象

n JavaScript自定义对象

l BOM的基础

n Window对象

n Navigator

n Screen

n History对象

n Location对象

l DOM的基础

n Document对象

n Element对象

n Node对象

l innerHTML

JavaScript变量.

JavaScript是弱变量类型的语言.弱变量类型：定义变量的时候 变量没有具体的类型.当变量被赋值的时候.变量才会有具体的数据类型.

// 定义变量  在JavaScript中定义所有的变量都使用var. var a = 1; var b = "abc"; var c = true; var d = 'bcd';   // 如果了解变量的具体类型  那么可以使用 typeof alert(typeof(a)); //  output number alert(typeof(b)); //  output string alert(typeof(c)); //  output boolean alert(typeof(d)); //  output string   // 在JavaScript中 定义字符串  可以使用单引号 或者 双引号.

JavaScript中的语句.

l 条件语句

两种：if语句  和 switch语句

if语句:

var i = 6;   if(i>5){ alert("i>5"); }else{ alert("i<=5"); }

switch语句

var a = "2"; // Java中switch作用在什么上? // 在Java中 switch()  可以 byte short char int  不可以 long  String类型也是不可以 但是在JDK1.7中String类型可以作用在switch上. // 在JavaScript中 switch是否可以作用在string上. string在JavaScript中是原始数据类型. switch(a){ case "1": alert("a==1"); break; case "2": alert("a==2"); break; case "3": alert("a==3"); break; default: alert("a是其他值"); }

if语句比较的时候 全等和非全等(===   !==)

var a = "98"; // 与Java不一样的地方.  == 比较的值. 而且可以进行简单的类型转换. // 在JavaScript中有一个 === 全等. (值相等 而且 类型也要相等.) if(a === 98){ alert("a等于98"); }else{ alert("a不等于98"); }

l 循环语句

for  while  dowhile  for in

for语句

var arr = [11,22,33,44]; /* for(var i = 0;i<arr.length;i++){ alert(arr[i]); } */

while语句

var i = 0; while(i<arr.length){ alert(arr[i]); i++; }

dowhile

var i = 0; do{ alert(arr[i]); i++; }while(i<arr.length);

for in

for(var i in arr){ alert(arr[i]); }

JavaScript中的数据类型

JavaScript中5种原始数据类型:

Undefined、Null、Boolean、Number 和 String

// null 和 undefined区别? // 定义变量 变量没有初始化  如果访问了这个对象 对象中的某个属性不存在 访问了对象的不存在的这个属性 undefined // 对象不存在 null   //var div1 = document.getElementById("div1111"); //alert(div1);  // null   var a; if(a == undefined){ alert("a没有初始化"); }   //var div1 = document.getElementById("div1") //alert(div1.href);

JS中的数组.

// 定义数组. var arr1 = [];   // 定义一个空数组 var arr2 = [11,22,33,44];  // 定义了一个有元素的数组. var arr3 = [11,true,'abc']; // 定义一个数组 存入不同的数据类型. 但是一般不建议这样使用.   /* for(var i = 0;i<arr3.length;i++){ alert(arr3[i]); } */ // 定义数组 使用对象定义 var arr4 = new Array(); // 定义了一个空数组. var arr5 = new Array(5); // 定义了一个长度为5的数组. //alert(arr5[0]); // alert(arr4.length); var arr6 = new Array(1,2,3,4,5,6);  // 定义了一个数组  元素 1,2,3,4,5 arr6[100] = 10;   // 数组的长度是以 数组的最大下标值 + 1 alert(arr6.length);   // 面试题 /* 一下的语句那个是错误的(  C  ) A.var a = //; B.var a = []; C.var a = (); D.var a = {}; */

JS中的函数

定义函数:

一种：普通方式 function 函数名(参数列表){ 函数体 } 二种:构造方式(动态函数) var 函数名 = new Function(“参数列表”,”函数体”); 三种:直接量方式 var 函数名 = function(参数列表){ 函数体 }

函数中变量作用范围

在JavaScript中存在于两个域的. 全局域和函数域.

特殊的函数

回调函数：作为参数传递的函数 匿名函数：没有函数名的函数 匿名回调函数：这个方法作为参数传递而且还没有方法名 私有函数:定义在函数内部的函数. 保证函数的内部代码私有性。 一个函数执行多个逻辑 返回函数的函数 自调函数:定义()() 第一个小括号是函数定义 第二个小括号是函数调用.

JS中的内置对象.

l Array对象

 常用：

length:计算数组的长度. prototype:原型.

 常用方法

reverse()  :反转 sort() : 排序

l Boolean对象

l  Date对象

  

l Math对象

 

l Number对象

 

l String对象

  常用:

charAt(); indexOf(); split(); match(); substr(); substring();

 

l RegExp对象.

常用的方法:test();

JS的面向对象.

JS不是面向对象的 是基于对象. JS中的函数就是对象.

对象的定义：

一种： var p1 = new Object(); 二种: var p2 = {}; 三种： function P{ }

将三种定义形式.分成两类.

普通形式

var obj = {       name:”张三”,       sayHello:function(){       } }

 

函数形式

function Person(){ this.name = “李四”; this.sayHello = function(){ } } 调用的时候  需要new    var p = new Person();

JS函数中的重载问题.

函数的重载:一个类中的方法名相同，但是参数个数或参数类型不同.

JS中本身没有重载需要使用arguments对象来实现类似与重载的效果 arguments本身就是数组.

arguments存的方法中的参数.

// 使用argument模拟重载效果. function add(){ if(arguments.length == 2){ return arguments[0] + arguments[1]; }else if(arguments.length == 3){ return arguments[0] + arguments[1] + arguments[2]; } }   alert(add(1,2,3));

JS中的继承:

要了解继承就需要先了解prototype属性.在每个函数对象中都有一个prototype的属性.

那么就可以使用prototype对对象进行扩展（包括内建对象）

prototype:原型.作用用类对函数对象.进行扩展.

JS扩展内建对象.

// 扩展Array对象.判断某一个值是否在数组中。 Array.prototype.inArrays = function(val){ for(var i = 0;i<this.length;i++){ if(this[i]==val){ return true } } return false; } var arr = ["red","green","blue"]; alert(arr.inArrays("black"));

JS中的继承：JS中本身没有继承，实现继承的效果. prototype就是一个函数对象的属性.利用了这个属性的扩展功能(扩展了的属性和方法  就可以当成在自己类定义的时候定义的那个属性和方法.)

利用prototype完成继承的效果.

function A(){                   this.aName = “a”;             }             function B(){                   this.bName = “b”;             }             B.prototype = new A();

另一种继承 原型继承.

function A(){} A.prototype = { aName : "a" }   function B(){ this.bName = "b"; }   B.prototype = A.prototype;   var b = new B(); alert(b.bName); alert(b.aName);

BOM:Browser Object Model(浏览器对象模型.)

l Window:对象表示浏览器中打开的窗口 最顶层对象.

l Navigator :浏览器对象.

l Screen: 屏幕对象

l History:浏览器历史对象

l Location:地址对象.

Window对象

 常用的方法：

alert();   :弹出一个提示框. confirm(); :弹出一个确认框 prompt();  :输入框 setTimeout();定时 执行一次就ok了 setInterval();定时 循环执行 clearTimeout();清除定时 clearInterval();清除定时 open():打开一个新窗口 close():窗口关闭了.

案例：open和showModalDialog

History对象：浏览器的历史对象

常用的方法

back() go() forward()

Screen对象:屏幕对象

常用的属性

width height

Location对象：地址对象

常用的属性 href = url

Navigator对象：浏览器对象