JavaScript

来源：互联网发布：淘宝代购专柜衣服真假编辑：程序博客网时间：2024/06/05 17:07

u Javascript 的基本介绍：

1 js是用于web开发的脚本语言

脚本语言是什么？

1 脚本语言不能独立使用，它和html/jsp/php/asp/asp.net配合使用；

2 叫脚本语言有自己的变量，函数和控制语句（顺序，分支，循环）；

3 脚本语言实际上是解释性语言（即在执行的时候直接对编码进行执行）；

4 .java->.class->jvm js->浏览器（js引擎来解释执行）。

2 js在客户端（浏览器）执行。

3 因为js是在浏览器解释解释执行，因此不同的浏览器对其支持的不一样。

案例1：

<html>

<head>

window.alert(‘hello!’);

</script>

</head>

<body>

</body>

</html>

u Js规范：

1 js位置可以随意。

2 js必须用

//js代码

</script>

如果没有用<script>包起来，则浏览器会将其视为普通文本。

3在一个html文件中（jsp/php/asp）可以出现多对<script>片段，浏览器会按照先后顺序依次执行。

案例2：

<html>

<head>

var num1=12;

var num2=15;

var result=num1+num2;

window.alert('结果是:'+result);

</script>

</head>

<body>

</body>

</html>

u Js 的变量究竟怎样决定：

1 js是弱类型语言

即：在定义变量的时候，统一用var表示，甚至可以去掉这个关键字。

2 js中的变量的数据类型是由js引擎决定。

Var name=”aaa”; //name是字符串

Var kk=2; //kk是数

Var yy; //未定义

Var name=123; //这时name自动变为数

u Js 的命名规范（变量函数）：

1使用大小写字母，数字，_ ，$ 可以命名；

2不能以数字开头；

3 不能使用js关键字保留字；

4区分大小写；

5单行注释 // 多行： /*注释内容*/

u Js的数据类型：

基本数据类型：

1数值型

Var a=12; //a就是整数

特殊的值：

NaN ( not a number) ：不是一个整数。

Var a=”abc”;

Window.alert( parseInt(a));

Infinit (无穷大)

Window.alert(6/0);

两个函数可以用来判断：NaN infinity

Widow.alert( isNaN(“ABC”) );//返回true

Widow.alert( isFinity(“ABC”) );

2 字符串

3布尔型

u Js数据类型的转换：

1 自动转换

Var a=123;//数值

A=”hello”;//字符串

2强制转换：

Var a=”12345”;//字符串

A=parseInt(a);//转换为数字

Var b=100;//b是数字

B=b+””;变为字符串

u Js运算符：

+，-，*，/,%，++，--，=，>,<,>=,<=,!=

逻辑运算符：&& || ！

在逻辑运算中，0，”” , false , null , undefined ,NaN 均表示 false.

说明一下：（返回的不一定是布尔值，还有可能是对象）

|| 将返回第一个不为false的那个值（对象亦可）,或者是最后一个值（如果全部都是false的情况）。

Var a=2;

Var b=0;

Var c=b||a;

Window.alert(c);

结果输出 2。

Window.prompt() 与 document.write():

Window.prompt(): 接收输入参数值

document.write(): 在页面打印内容

var va1=window.prompt("请输入值");

var va1=window.prompt("请再次输入值");

document.writeln("输入的是:"+(parseFloar(va1)+parseFloar(va2)));

</script>

u Js 自定义函数：

基本语法：

Function 函数名（参数列表）{

//代码

Return 值;//可以选择

}

说明：

1 参数列表：表示函数的输入

2 函数主体:表示为了实现某一功能代码块

3 函数可以有返回值也可以没有

把函数写到js文件myfunction中：

//强调参数中不要带var没有返回类型

function count(num1,num2,operator){

var res=0;

if(operator=="+"){

res=num1+num2;

}else if(operator=="-"){

res=num1-num2;

}else if(operator=="*"){

res=num1*num2;

}else {

res=num1/num2;

}

return res;

}

Html文件中调用js中的函数：

//输入两个数再输入一个运算符，得到运算结果

var num1=window.prompt("请输入一个数");

var num2=window.prompt("请输入第二个数!");

var operator=window.prompt("请输入运算符");

num1=parseFloat(num1);

num2=parseFloat(num2);

document.write("结果为:"+count(num1,num2,operator));

</script>

u Js函数的调用过程：

//abc是一个函数

function abc(num){

if(num>3){

abc(--num); //递归

}

document.writeln(num);

}

输出：3 3 4

强调一下,Js的函数支持可变参数：

Html调用 abc2(5,3,6);

//编写一个函数，可以接收任意多个数，并计算它们的和

function abc2(){

//在js中有一个arguments可以访问所有传入的值

//window.alert(arguments.length);

//遍历所有的参数

for(var i=0;i<arguments.length;i++){

document.write("&nbsp"+arguments[i]);

window.alert(arguments[i]);

}

u js中的数组：

数组用于存放一组数据，js中的数组可以存放各种数据类型（引用类型，复杂类型，符合类型）

var all_weight=0;

var avg_weight=0;

var weights=[3,5,1,3.4,2,5];

for(var i=0;i<weights.length;i++){

all_weight += weights[i];

}

//如果想知道数据类型

//document.write(avg_weight.constructor);

avg_weight=all_weight/weights.length;

//avg_weight=new Number(avg_weight);

document.writeln("平均体重是:"+avg_weight.toFixed(2)); //toFixed用于保留小数位

</script>

u 数组中的内存分析：

var myvar=900;

function abc(val){

val=90;

}

abc(myval);

document.write(myval);

输出：900

var myarr=[456,90,900];

funtion abc(arr){

arr[0]=35;

}

abc(myarr);

document.write(myarr);

输出：35 90 900。

Js数组中的值是引用传递（地址传递）。

u 数组的引用：

数组的名称[下标]

例如：var a=[23,”hello”,4.5];

访问a[2]=4.5;

访问a[3]? 则输出： undefined

Js的数组可以动态增长：

//数组的长度是动态的

var a=[2,3];

window.alert(a.length);

a[2]=4;

window.alert(a.length);

对字符串分割生成一个字符串数组：

//数组的分割

var str="hello word everyone !";

var arr=str.split(" "); //split() 字串分割函数

for (var i=0;i<arr.length ;i++ ){

document.write(arr[i]+" ");

}

u js面向对象编程：
张老太养了两只猫：一只名字叫小白，今年3岁，白色。还有一只叫小花，今年10岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入的小猫名字错误，则显示张老太没有这只猫

/*张老太养了两只猫：一只名字叫小白，今年3岁，白色。

还有一只叫小花，今年10岁，花色。请编写一个程序，当

用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。

如果用户输入的小猫名字错误，则显示张老太没有这只猫*/

var cat1_name="小白";

var cat1_age=3;

var cat1_color="白色";

//解决办法，把冒得属性集中，创建一种新的数据类型（原型对象/类）

//用面向对象的方法解决上面的问题

//这就是一个cat类

function Cat(){

}

//如果你这样用

//Cat(); //函数

//这时就是一个对象（实例）

var cat1=new Cat();

cat1.name="小白";

cat1.age=3;

cat1.color="白色";

//从上面的代码可以看出

//1.js的对象属性可以动态添加

//2.属性没有限制

document.write(cat1.name+cat1.age+cat1.color);

</script>

u 创建对象的方式有五种：

1.工厂方法—是用new Object创建对象并添加相关属性；

2.是用构造函数来定义（原型对象）；

3.是用 prototype;

4.构造函数及原型混合方式；

5.动态原型方式。

基本语法：

function 类名/原型对象名(){};

var 对象名 = new类名();

对象特别说明：

在js中一切皆是对象.

function Person(){};

var a=new Person();

document.writeln(a.constructor); //a像的构造实例

document.writeln(typeof a); //a的类型是什么

var b=123;

document.writeln(b.constructor);

document.writeln(typeof b);

var c="qqq";

document.writeln(c.constructor);

document.writeln(typeof c);

补充说明：

var abc=89;

function test(){

//在函数里如果你不带var则表示使用外面的abc，全局变量

//带上var则表示在test()中定义一个新的变量

// var abc=800;

abc=900;

}

test();

document.write(abc);

u 访问对象属性方法有两种：

1.普通方式：

对象名.属性名

2.动态访问:

对象名[“属性名”]

function Person(){};

var p = new Person();

p.name="小明";

document.writeln(p.name);

var b="na"+"me";

document.writeln(p[b]);

document.write(p["name"]);

u 对象的引用问题：

//b=a 传的是地址

function Person(){};

var a=new Person();

a.age=10;

a.name="小明";

var b=a;

b.name="小白";

document.write(a.age+"<br/>"+a.name+"<br/>"+b.name+"<br/><br/>");

//a=null;

delete a.age;//通过delete可以删除对象的属性

document.write(a.age+"<br/>"+a.name+"<br/>"+b.age+"<br/>"+b.name);js提供一种方式主动释放内存：delete对象名.属性名

u this:

使用this来解决：

function Person(){

this.name=”abc”;

this.age=23;

}

var p1=new Person();

var p2=new Person();

document.write(p1.name+” ”+p2.name);

u 权限说明：

//this属性

function Person(){

var name="小黑"; //如果这样使用属性是私有的

var age=23;

this.name2="小白"; //使用this属性是公开的

this.age2=19;

this.show=function(){ //这个就是Person的一个公开方法

document.write("name:"+name+"age:"+age+"<br/>");

}

function show2(){ //这是Person类的一个私有方法，只能在类内部使用

document.write("show2:"+"name:"+name+"age:"+age+"<br/>")

}

var p1=new Person();

//document.write(p1.name+"<br/>");//错误

//p1.show2(); //这里会报错

p1.show1();

document.write(p1.name2+"<br/>");

u 一句话：

哪个对象实例调用this所在的函数，那么this就代表哪个对象实例

this不能再类定义的外部使用

function test1(){

alert(this.v);

}

var v=90;

//window.test1();//<==>test1();

//test1();

function Person(){

this.method=function(){

window.alert(this.v);

}

var p=new Person();

p.v="hello!";

p.method();

u 对象—成员函数(方法)：

//对象函数

function Person( name,age ){

//使用传入的实际参数去初始化属性

this.name=name;

this.age=age;

//输出自己的名字

this.show=function(){

document.write("名字:"+this.name);

}

//计算1加到1000的结果

this.jisuan=function(n){

var res=0;

for(var i=1;i<=n;i++){

res+=i;

}

return res;

}

var p1=new Person("宋江",80);

var p2=new Person("林冲",18);

p1.show();

document.write("<br/> res="+p1.jisuan(100));

u 给对象添加方法的两种方式：

//给对象赋函数的方法1

function Person(){

this.name="abc";

this.age=90;

}

function show(){

window.alert("hello"+this.name);

}

var p = new Person(); //创建一个P对象

p.abc=show(); //将show()方法赋给p.abc

p.abc(); //调用

//给对象赋函数的方法2

function Person(){

this.name="abc";

this.age=90;

}

var p = new Person(); //创建一个P对象

p.abc=function show(){ //将show()方法赋给p.abc

window.alert("hello"+this.name);

}

p.abc(); //调用

3前面的几种方法有一个问题，每个对象独占函数代码，如果对象很多则会影响效率

用原型法解决：多个对象可以共享函数

function Dog(){};

var dog1 = new Dog();

dog1.shout=function(){

window.alert("小狗");

}

dog1.shout();

var dog2=new Dog();

dog2.shout(); //这里会报错

window.alert(dog1.shout==dog2.shout);

//希望所有的对象共享一个函数

function Dog(){};

//使用prototype[类] 去绑定shout

Dog.prototype.shout=function(){

window.alert("小狗");

}

var dog1 = new Dog();

dog1.shout();

var dog2=new Dog();

dog2.shout(); //这里ok

window.alert(dog1.shout==dog2.shout); //返回true证明是共享的

补讲 == 号的作用：

1 当==的两边都是字符串的时候，则比较内容是否相等

2 当==两边是数字，则数的大小是否相等

3 当==两边是对象或者是对象函数则比较地址是否相等

u 加深对类和对象的认识：
如何给类添加方法（如何给类的所有对象添加方法）

//体验一下Array

var arr=new Array(3);

arr[0]="刘备";

arr[1]="关羽";

arr[2]="张飞";

//遍历

for(var i=0;i<arr.length;i++){

document.write("<br/>"+arr[i]);

}

//Array提供的方法颠倒数据

arr.reverse();

//遍历

for(var i=0;i<arr.length;i++){

document.write("<br/>"+arr[i]);

}

//如何给Array添加一个find(val)方法

Array.prototype.find=function(val){

for(var i=0;i<this.length;i++){

if(val==this[i]){

return i;

}

return -1;

}

document.writeln("<br/>下标："+arr.find("关羽"));

u 成员函数细节：

1 成员函数的参数列表可以是多个

function函数名(参数列表){

}

2 成员函数可以有返回值也可以没有，最多只有一个

3 js中不支持函数的重载：

//js没有重载的概念，只有最后一个有效，前面的会被覆盖

function test(a){

document.write("<br/>输出："+a+"hello");

}

function test(a,b){

document.write("<br/>输出："+a+b+c);

}

function test(a,b){

document.write("<br/>输出："+a+"&nbsp"+b);

}

test("a");

结论：js在调用函数的时候是根据函数名来调用，如有多个重复的，只认最后的

u 闭包：

function a(){

var i=0;

function b(){

alert(++i);

}

return b;

}

var c=a();

c();

javascript闭包就是在一个作用域中保存了一份他从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁

这样在执行完 var c=a() 后，变量C实际上是指向了函数b,b中用到了变量i再执行c()后就会弹出一个窗口显示i的值（第一次为1），这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

闭包的作用就是在a执行完并返回后，闭包使得javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。