韩顺平javascript笔记(全套)

上传人：5*** IP属地：湖北上传时间：2022-03-06 格式：DOC 页数：73 大小：4.20MB 积分：30 举报 版权申诉

已阅读5页，还剩68页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、韩顺平2011javascript笔记（全）JavaScript1. javascript基本介绍：(1) javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：网页游戏地图搜索股市信息查询web聊天····(2) 在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。(3) javascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。2. 脚本语言：(1) 脚本语言往往不能独立使用(单独使用没有什么意

2、义)，它一般与html/asp/jsp/php(2) 脚本语言有自己的变量，函数，控制语句。(3) 脚本语言是一种解释性语言。3. JS一般在客户端的浏览器执行。但也可以对服务器进行编程(非常少)4. JavaScript简介JavaScript是一种解释型的语言。Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。Javascript的第一个版本出现在Netscape Navigator2浏览器中。人们最初给javascript起的名字是LiveScript。然而由于，当时java技术的正是如日中天，netscape公司给livesc

3、ript改名为javascript，以便是人们更加注意javascript。随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言(1) <script>标记：第一个简单的javascript程序在网页中添加<script></script>标签中添加javascript代码，在<script></script>之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代

4、码，在<script>标记和对应的</script>标记之间包围的代码块，称为脚本块。<script>标记可以放在html页面的头部，即<head></head>之间。<script>标记具有一些属性，其中最重要的属性就是type属性。前面提到了javascript并不是唯一可用的脚本语言，可以的脚本语言需要按不同的方式进行处理。我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。<script type=”text/javascript”><html><head><titl

5、e></title></head><body bgcolor="white"><script type="text/javascript">document.bgColor="red"</script></body></html><html><head><title>Example 1.1 hello world</title><script type="text/javascrip

6、t">document.write("hello world");</script></head><noscript>您的浏览器不支持javascript，请检查浏览器的版本或者安全设置，谢谢</noscript><bodybgcolor></body></html>*<noscript></noscript>是一种防御性编码，如果用户的浏览器不支持javascript或者是设置过高的安全级别，那么就会显示出相应的提示洗洗，避免了在用户不知情下停止运行

7、或者的都错误结果。* (2) 在javascript中用分号表示一个语句的结束(3) Javascript是弱类型语言。什么叫做弱类型语言。在强类型语言中，使用变量之前，必须先声明变量的类型，才能使用。而javascript则不需要这样使用。5. 案例1：你的第一个程序，javascript高手都是从这里开始的，这个程序完成一个非常简单功能，在网页中弹出一个对话框，显示“hello world！”<html><head><title>第一个javascript程序</title><script language="javascri

8、pt">window.alert("hello world");</script></head><body></body></html>(1) js的位置：js的位置可以随意，但是一般用在<head></head>标签(2) js必须用<script language=”javascript”>js代码</script>如果没有使用<script></script>包含起来的话，则浏览器则会视为普通文本6. 案例2：对前面的程序

9、，改成一个简单加法运算程序<html><head><title>第一个javascript程序</title>/*js中的变量定义，变量都用var表示，不管实际类型怎样*/var num1=456;var num2=226;var result=num1+num2;window.alert("结果是"+result);</head><body></body></html>u js的变量的类型是怎样决定？(1) js的数据类型是弱数据类型语言。即在定义变量的时候，统一使用var表示

10、，甚至可以去掉var关键字(2) js中的数据类型是有js引擎来决定的。数据类型可以变化的。var name=”shopping”;/js引擎知道name是字符串name=22;/这时name自动变成了数varkk=2;/kk是整数vary y; /y是undefined类型7. javascript中的标识符标识符指的是javascript中定义的符号，例如，变量名，函数名，数组名等。标识符可以有任意顺序的大小小字母、数字，下划线和美元符号（$）组成，但是标识符不能以数字开头，不能是javascript的保留关键字。8. javascript是严格区分大小写的。javascript中每条语句

11、用分号“;”结束。9. 注释：单行注释/ 多行注释 /* */10. javascript的基本语法-数据类型：Ø 基本数据类型：通过typeof关键字，可以看到数据的类型(1) Number(数值类型)² 整型常量（10进制8进制16进制）16进制以0x或者是0X开头，例如：0x83;8进制必须以0开头：² 实型常量12.32 193.98 5E7等² 特殊数值：NaN(not is a number)、Infinity、isNaN()、isFinite()(2) Boolean(布尔类型)true和false(3) String 字符串“this i

12、s a book”Ø 复合数据类型：Ø 特殊数据类型：(1) undefine的例子：<script language="javascript">var a;window.alert("a的数据类型"+typeof a);</script>(2) null的例子：<script language="javascript">var a=null;window.alert("a的数据类型"+typeof a);</script>11. javascri

13、pt的基本语法-定义变量、初始化、赋值：(1) 定义变量：var a;(2) 初始化变量：在定义变量的时候，就赋值：var a=45;(3) 给变量赋值：先定义变量：varnum;再赋值：num=3312. javascript的基本语法-数据类型转换：(1) 自动转换：javascript的数据类型是动态的请看一个案例：<script language="javascript">/ num先定义成Number数据类型varnum=22;num="hello word"window.alert("num的数据类型"+typ

14、eofnum);</script>(2) 强制转换：请看案例：如何将字符串转换成数字<script language="javascript">/ num先定义成String数据类型var s="123"varnum=parseInt(s);window.alert(typeofnum);</script>13. javascript中的运算符和java中的一样的,但是有几个注意点：(1) 案例一：b先转成9，在比较<script language=”javascript”>var a=9;var b=9i

15、f(a=b)window.alert(“ok”);elsewindow.alert(“faile”);</script>(2) 在逻辑运算中，0、“”、false、null、undefined、NaN均表示false<script language=”javascript”>var a=0;if(a)window.alert(“ok”);elsewindow.alert(“faile”);</script>14. 函数：为完成某一个功能的代码的集合。函数定义： function 函数名(参数列表)语句;/函数(方法)主体return 返回值;函数名位于关键字

16、function之后，为了让代码易于理解，函数名应具有一定的意义。注意点：函数没有返回值类型。形参数不写具体的类型。15. eval()可以将一个字符串当成一个脚本运行例如：<script language=”javascript” type=”text/javascript”>varstr=”window.alert(“ok”)”;eval(str);</script>16. escape()可以将中文或日文转为ascii码：unescape()反之。一般这个函数相互配合，防止在浏览器中出现乱码：<script language=”javascript” typ

17、e=”text/javascript”>varstr=”江西”;var str2=escape(str);/转回来var str3=unescape(str2);</script>17. 数组：(1) 为什么需要数组？将一组数据放在一起，组成集合。它由一对方括号包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据(2) 创建数组：var数组名=元素值，元素值，例如：var a=“shopping”,123,1.1,4.5,true(3) 二维数组：var a=1,2,3,“hello”,”world”,”jiangxi”=Js面向（基于）对象编程一、澄清概念js中

18、基于对象= js面向对象js中没有类class,但是它取了一个新的名字叫原型对象，因此，类=原型对象二、为什么需要对象问题提出：/*张老太养了两只猫：一只名字叫小白，今年3岁，白色，还有一只叫小花，今年10岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入小猫的名字错误时，则显示张老太没有这只猫猫。*/传统方法比较麻烦cat1_name="小白"var cat1_age=3;var cat1_color="白色"/解决办法,把猫的属性集中,创建一种新的数据类(原型对象/类)/用面向对象的方法来解决上面的问题

19、/这里就是一个类cat类function cat()/如果这样用/cat()/函数var cat1 = new cat()/类/这时cat1就是一个对象(实例)="小白"cat1.age=3;cat1.color="白色"/从上面的代码我们可以看出/1.js中的对象的属性可以动态添加/2.属性没有限制window.alert(+cat1.age+cat1.color+cat.hobby);三、类(原型对象)和对象的区别和联系(1) 类是抽象的,概念,代表类事物(2) 对象是具体的,体表一个实体(3) 对象是以类(原型

20、对象)为模板创建起来的实体四、创建对象的方式有五种(1) 工厂方法使用new Object创建对象并添加相关属性.(2) 使用构造函数来定义类(原型对象).(3) 使用prototype(4) 构造函数及原型混合方式.(5) 动态原型方式.目前我们先讲使用构造函数来定义类(原型对象),然后再创建对象实例.基本语法:function 类名/原型对象()创建对象:var 对象名= new 类名()现在对对象特别说明:1. js 中一切都是对象function Person()window.alert(Person.constructor);var a = new Person();window

21、.alert(a.constructor);/a 对象实例的构造函数window.alert(typeof a);/a 的类型是什么var b=123;window.alert(b.constructor);window.alert(typeof b);var c="123"window.alert(c.constructor);window.alert(typeof c);/思考:如何判断一个对象实例是不是Person类型?if(a instanceof Person)window.alert("a 是 Person1");if(a.construct

22、or=Person)window.alert("a 是 Person2"); 五、补充说明(全局变量与局部变量的区别)/全局变量var abc=89;function test()/在函数里,如果不带var,则表示使用全局的abc变量/如果带var,则表示在test()中,定义了一个新的abc变量(局部变量)abc=900;test();window.alert(abc);访问对象的属性有两种方法:(1) 普通方式对象名.属性名(2) 动态访问对象名“属性名”function person()var p1= new person();="阿华&qu

23、ot;window.alert();/普通方式window.alert(p1"name");var val="na"+"me"window.alert(p1val);/动态方式对象引用问题的说明(图)js还提供一种方式,主动释放对象内存delete 对象名.属性、;/这样就会立即释放对象的这个属性的空间六、 this问题的提出:function Person();var p1=new Person(); = "老韩"p1.age = 30;window.alert(+&q

24、uot; "+p1.age);var p2 = new Person();window.alert();/这里会输出什么呢?(undefine);这里我们可以看到 window.alert()会输出 undefined在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性比如:当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?使用this 来解决function Person()="abc"this.age=30;var p1 = new Pers

25、on();var p2 = new Person();window.alert(+" "+);可能有人会这样去思考问题/*有些同学可能会这么想:function Person()var name="abc"/私有的,只能在内部使用var age=30;/私有的,只能在内部使用2="abc2"/2 表示name2这个属性是公开的this.show=function ()/函数这就是Person类里面的一个公开的方法window.alert("name"

26、+name+"age"+age);function show2()/这就是Person类里面的一个私有的方法,只能在类内部使用,/如要一定要使用,只能通过公开方法(特权方法)来调用私有方法来实现window.alert("show2()"+name+"age"+age);var p1=new Person();p1.show();/p1.show2();/这里会报错/window.alert(+" "+p1.age);/错误的记住一句话:哪个对象实例调用this所有的函数,那么this就代表哪个对象实

27、例This注意事项: This不能放在类的外部使用,否则调用就变成window调用了对象-成员函数给一个对象添加(指定)函数的几种方式1.通用常用方式:function Person()="abc"this.age=30;this.show=function ()window.alert("name:"++" "+"age:"+this.age);var p1 = new Person();p1.show();2.方式二:function Person()=&q

28、uot;abc"this.age=30;function show1()window.alert("name:"++" "+"age:"+this.age);window.alert(show1);/这个解释下面的p2.show=show2的疑惑.这个输出的是上面/的函数代码.(构造函数)var p2 = new Person();p2.show=show1;/记住不要加括号p2.show();3.方式三:function Person()="abc"this.age=

29、30;var p3 = new Person();p3.show=function show2()window.alert("name:"++" "+"age:"+this.age);p3.show();加强思考题看它们会输出什么?题1.function Person()="abc"this.age=30;function show1()window.alert("name:"+);var p2 = new Person();p2.show=

30、show1;show1();/注意思考会输出什么?提示谁调用它.this就代表谁答案:name:空白(undefined)题2.function Person()="abc"this.age=30;Var name="abc2"function show1()window.alert("name:"+);var p2 = new Person();p2.show=show1;show1();答案:nane:abc24.方式四:前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影

31、响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：function dog()/使用prototype去绑定一个函数给totype.shout=function()window.alert('小狗');var dog1=new dog();dog1.shout();var dog2 = new dog();dog2.shout();/okwindow.alert(dog1.shout=dog2.shout);/返回true/扩展var dog3 = new dog();var dog4 = new dog();v

32、ar dog5 = dog4;window.alert(dog3=dog4);/ false 不是同一个地址window.alert(dog4=dog5);/ true对代码原理说明图：补讲 = 号的作用1. 当 = 的两边都是字符串的时候，则比较内容相等否。2. 如 = 的两边都是数字的时候，则数的大小是否相等。3. 如 = 的两边是对象或对象中的函数属性，则比较地址是否相等。六、加深对类和对象的认识如何给类添加方法（如何给某类型的所有对象添加方法）/创建Person实例/*function Person()var P1=new Person();P1.name = "sp

33、"window.alert(P1.name);*/初步体验Object类,通过Object直接创建对象/Object超类/*var P1 = new Object();P1.name = "abc"window.alert(P1.name);window.alert(P1.constructor);*/*var i = new Number(10);/我们可以给类添加方法.Ntotype.add=function(a)return this+a;window.alert(i.add(10).add(30);var b= 90;window.ale

34、rt(b.add(40);*/*请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法时候,如果能找到val则返回其下标,否则返回-1;*/体验一下array;var arr = new Array(3)arr0 = "George"arr1 = "John"arr2 = "Thomas"/遍历该数组for(var i=0;i<arr.length;i+)document.write('name:'+arri+" ");document.w

35、rite("<br/>");/使用array的方法,我们颠倒顺序arr.reverse();for(var i=0;i<arr.length;i+)document.write('name:'+arri+" ");/现在我们一起看看如何给所有array对象添加一个方法find(val);Atotype.find=function(val)/遍历数组 thisfor(var i=0;i<this.length;i+)if(val=thisi)return i;return -1;do

36、cument.write("下标为"+arr.find("Thomas");document.write("下标为"+arr.find("jime"); 闭包这个知识点，在讲到封装的时候再说！成员函数的细节1. 成员函数的参数可以是多个Function 函数名（参数.）2. 成员函数可以返回值,也可以没有,但是有的话,最多只有一个Function 函数名(参数列表)语句;/函数主体return 返回值;3. js中不支持函数的重载,具体案例function test(a,b)window.alert("

37、hello");function test(a)window.alert(a);function test(a,b)window.alert(a+""+b);/test(23);window.test(3,"hello");结论:1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则认最后那一个函数. 2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量(本质上他们是属于window对象的) 面向对象综合案例游戏的分析:1. 看看如何通过按钮来控制mario的位置2. 设计相关的对象(Mario x,

38、y.)基本代码给大家:要求:1. mario碰到边界给一个提示 2. mario 可以去找另外一个物体u Js的内部类Javascript中本身有提供一些,可以直接使用的类, 这种类就是内部类, 主要有:Object/Array/Math/Boolean/String/RegExp/Date/Numberu 内部类的分类从使用的方式看，分为静态类和动态类静态类使用类名. 属性/方法比如:Math.abs(-11)动态类使用 var 对象=new 动态类() 对象. 属性/方法比如: /显示当前的日期 var nowDate=new Date(); window.alert(nowDat

39、e.toLocaleDateString();u Math类几个常用的方法:/*alert(Math.ceil(4.5); / 5alert(Math.floor(4.5); / 4alert(Math.round(4.77); / 5/返回1到100的随机数alert(Math.round(Math.random()*100);u Date类u String类u Array类常用方法:myArrl.pop()/出栈myArrl.push()/入栈。Array类没有下标越界问题 Boolean类 Number类1. 题答案： var b=23; b.toString(2);/ b.toStri

40、ng(16); js系统函数-*-最后总结：内部类和系统函数多查查javascript参考手册 js的事件驱动程序1.原理2. 入门案例Js中事件主要分成4种案例1，监听鼠标点击事件，并能够显示鼠标点击的x , y一个事件可以被多个函数监听如下：<html><head><title></title><script language="javascript" type="text/javascript"><!-function test4(e)window.alert("ok1&

41、quot;);function test5(e)window.alert("ok2");/-></script></head><body><!-如何通过修改style来改变style-><div id="div1" class="style1">div1</div><input type="Button" onclick="test4(this),test5(this)" value="黑色"

42、/></body></html>Window有三个事件onload 页面一打开onbeforeunload 关闭页面前onunload 关闭页面后<body onload="test7()" onbeforeunload="test8()" onunload="test8()">oncontextmenu 不使用右键onselectstart 不允许选中拷贝<body oncontextmenu="return test9()" onselectstart="

43、;return test11()" onload="test7()" onbeforeunload="test8()" onunload="test10()"> Javascript-dom编程 Dom开山篇1. Dom编程重要的作用是可以让用户对网页元素进行交互操作。2. Dom编程用来做一些网页游戏3. Dom编程也是ajax的重要基础Dom的原理图：如何把html文档，映射成dom树：案例：乌龟抓鸡。从dom编程的角度，就会把该html文档，当做dom树如下图： bom-Born(BrowserObject

44、Model)浏览器对象模型因为做浏览器的厂家很多，W3C定义了一个做浏览器的规范，规定： Window 对象1. confirm():<html><head><title></title><script language="javascript" type="text/javascript"><!-function test()var res = window.confirm("你确定删除吗？");if(res)window.alert("删除");

45、elsewindow.alert("没有删除");/-></script></head><input type="button" value="删除记录" onclick="test()"/><body></body></html>2. setInterval() :该函数可以根据指定的时间，循环的执行某个函数，或者表达式。题一、要求：每隔一秒钟弹出 helloworld<script language="javascr

46、ipt" type="text/javascript"><!- function sayHello() window.alert("hello!"); setInterval("sayHello()",1000);/-></script>3. setTimeout() :在指定的毫秒数后调用函数或计算表达式（但是只调用一次）题一、要求：在5秒钟后弹出 helloworld function sayHello() window.alert("hello!"); setTime

47、out("sayHello()",5000);4. clearTimeout() 5. moveTo() 和moveBy() 案例： window.moveTo(100,100); /这个是相对于屏幕左上角0，0坐标 window.moveBy(100,100);/这个是相对当前窗口的左上角0，0坐标6.resizeBy() 和resizeTo()案例： window.resizeTo(100,100); /把窗口的大小调整到指定的宽度100和高度100。 window.resizeBy(100,100);/把窗口再增加100，1007. open()开一个新窗口windo

48、w.open("event1.html","_blank");8. opener父窗口和子窗口通信 hello 显示打开一个新窗口父窗口：-代码如下：<html><head><title></title><script language="javascript" type="text/javascript"><!- var newWindow; function test2() /newWindow其实就是指向新窗口的引用 newWindow=win

49、dow.open("newWindow.html","_blank"); function test3() newWindow.document.getElementById("myspan2").innerText=$("info2").value; function $(id) return document.getElementById(id); /-></script></head><body>我是父窗口<input type="button&quo

50、t; value="打开新窗口" onclick="test2()"/><input type="text" value="" id="info2"/><input type="button" value="发送给子窗口" onclick="test3()"/><br/><br/><span>接收的信息是：</span><span id="my

51、span">信息</span></body></html>子窗口：-代码如下：<html><head><title></title><script language="javascript" type="text/javascript"><!- function test2() var msg=window.document.getElementById("info").value; opener.document.g

52、etElementById("myspan").innerText=msg; function test3() newWindow.document.getElementById("info2").value=$("info").value; function $(id) return document.getElementById(id); /-></script></head><body>我是新窗口<input type="text" value="&q

53、uot; id="info"/><input type="button" value="发送给父窗口" onclick="test2()"/><br/><br/><span>接收的信息是：</span><span id="myspan2">信息</span></body></html>1. 登录窗口land.html<script language="javascri

54、pt"><!- function checkuser() if($("uname").value="shunping"&& $("pwd").value="123") return true; else $("uname").value="" $("pwd").value="" window.alert("用户名或密码错误"); return false; function $(

55、id) return document.getElementById(id); /-></script><form action="landok.html">u:<input type="text" id="uname"/><br/>p:<input type="password" id="pwd"/><br/><input type="submit" onclick=" retur

56、n checkuser()" value="登录"/><br/>2. 登录成功窗口landok.html<script language="javascript"><!- function tiao() window.open("landother.html","_self"); clearInterval(mytime); setTimeout("tiao()",5000); /setTimeout("javascript:window.

57、open("landother.html")",5000); function chengesec() $("myspan").innerText=parseInt($("myspan").innerText-1); var mytime=setInterval("chengesec()",1000); function $(id) return document.getElementById(id); /-></script>登录成功<span id="myspan">5</span>秒后自

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

韩顺平javascript笔记(全套)

文档简介

温馨提示

最新文档

评论

韩顺平javascript笔记(全套)

文档简介

温馨提示

最新文档

评论

相关文档