JavaScript基础教程课件

上传人：老*** IP属地：河南上传时间：2024-01-16 格式：PPT 页数：108 大小：1.24MB 积分：29.98 举报 版权申诉

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

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

文档简介

Web基础之一JavaScript基础2024年1月16日1目标理解什么是

JavaScript如何将JavaScript嵌入到HTML中理解变量、数据类型和运算符掌握if-else和switch语句掌握函数掌握内置对象2024年1月16日2什么是JavaScript

脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力；常见的脚本语言：VBScript，javascriptJavaScript是NetScape公司的产品提供用户交互

动态更改内容数据验证2024年1月16日3将JavaScript嵌入网页可以将JavaScript语句插入HTML文档，方式如下：使用<SCRIPT>标签将语句嵌入文档将JavaScript源文件链接到HTML文档中将脚本代码作为HTML标签的属性值2024年1月16日4使用Script标签JavaScript

代码<HTML><HEAD><SCRIPT

language="JavaScript">document.write("欢迎来到JavaScript

世界");</SCRIPT></HEAD><BODY><P>尽情享受学习的快乐!!!

</BODY></HTML>脚本代码设置语言2024年1月16日5使用外部JS文件外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件<scriptlanguage=“JavaScript”

src=“文件名.js"></script>2024年1月16日6使用外部JS文件JavaScript代码(test.htm)<HTML><HEAD><TITLE>使用外部文件</TITLE><SCRIPTSRC="test.js"></SCRIPT></HEAD><BODY><P>以上文本是通过访问外部JavaScript文件显示的</BODY></HTML>document.write("喂！你好吗?")JavaScript代码(test.js)2024年1月16日7将脚本代码作为HTML标签的属性值在href属性中必须指明是javascript<ahref="javascript:alert(newDate());">当前时间</a>在onclick事件属性中可以不用指明是javascript<FORMMETHOD=POSTACTION=""><INPUTTYPE="submit"onclick="alert(newDate());"></FORM>

把script脚本作为属性值.html2024年1月16日8Javascript的基本格式区分大小写以；作为语句结束符号(;可加可不加)以//或/**/组为注释Javascript的数据类型：基本类型：存储在栈引用类型：是存储在堆中的对象。2024年1月16日9Javascript是弱类型的语言字符串地址null布尔值数字undefined对象对象对象对象对象栈堆2024年1月16日10Javascript的数据类型数据类型说明示例数字型整数或实数。JavaScript中的数字不区分整型和浮点型，所有的数字都是以浮点型来表示的487,25.95逻辑型或布尔型执行逻辑运算。即代表真的“true”和代表假的“false”true或false

字符串型

字符串通常都是用单引号或双引号括起来的。如果在字符串中包括着特殊字符，可以使用转义字符来代替。“Hello”空特殊关键字，表示不存在的值。nullundefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象的属性时，JavaScript才会返回undefined。2024年1月16日11变量Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定；变量名必须以字母或下划线（"_"）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR

和myvar

是不同的变量2024年1月16日12声明变量var

“var”－用于声明变量的关键字“a”－变量名同时声明和初始化变量vara=10;a=10;声明变量声明多个变量varx,y,z=10;赋值不声明变量，直接使用x=10;2024年1月16日13typeof运算符号Typeof对变量的运算结果为以下之一：UndefinedBooleanNumberStringObjecttypeof(null)结果为object，此为历史遗留的错误。观察以下alert的结果variNum;alert(typeof(null));alert(typeof(iNum));iNum=10;alert(typeof(iNum));varbFlag=true;alert(typeof(bFlag));varaStu=newArray();alert(typeof(aStu));alert(typeof("hello"));2024年1月16日14观察以下运行结果varotemp;//varotemp2;alert(typeof(otemp));alert(typeof(otemp2));alert(otemp==undefined);alert(otemp2==undefined);//会导致错误，因为没有定义过的变量只有typeof运算符可以使用，其他运算符都会导致错误。2024年1月16日15声明变量<HTML><HEAD><TITLE>使用变量</TITLE><SCRIPTLANGUAGE="Javascript">varx;x=prompt("淘宝网竟拍，请出一口价",1);document.write("拍卖价格"+x+"<BR>")//"+"用来连接多个字符串document.write("恭喜您，您以最高价拍卖成功！");alert("欢迎下次光临！");</SCRIPT></HEAD></HTML>定义变量赋值输出prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。2024年1月16日16变量a、b和c只能在其各自的函数中被访问变量的作用域脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数1、函数2和函数3访问全局变量gg2024年1月16日17转义字符字符说明示例\b退格符alert(“这是第一句\b

这是第二句”)\f换页符alert(“这是第一局\f

这是第二句”)\n换行符alert(“这是第一局\n

这是第二句”)\r回车符alert(“这是第一局\r这是第二句”)\t制表符alert(“这是第一局\t这是第二句”)2024年1月16日18<HTML><HEAD><SCRIPTLANGUAGE="JavaScript">varx=100;vary;varz;document.write("<H2>竞拍SONY数码相机600万像素"+x+"$起价</H2>");y=prompt("加多少银子？","1");z=x+y;alert("您最终的出价\n"+z+"$");//”\n”用于换行显示</SCRIPT></HEAD><body></body></HTML>Prompt函数返回输入的字符串“+”号的用法-110020

?bug2002024年1月16日19<HTML><HEAD><SCRIPTLANGUAGE="JavaScript">varx=100;vary;varz;document.write("<H2>竞拍SONY数码相机600万像素"+x+"$起价</H2>");y=prompt("加多少银子？","1");z=x+parseFloat(y);alert("您最终的出价\n"+z+"$");//”\n”用于换行显示</SCRIPT></HEAD><body></body></HTML>parseFloat()函数将字符串转换为float数据

parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(notanumber)使用isNaN(z)判断是否为NULL“+”号的用法-22024年1月16日20类型转换－转换为字符串在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。

varsColor="red";alert(sColor.toString());varbFound=true;alert(bFound.toString());

variNum1=10;variNum2=10.6;alert(iNum1);alert(iNum2);alert(iNum1.toString(2));alert(iNum1.toString(8));alert(iNum1.toString(16));alert(iNum2.toString(8));alert(iNum2.toString(16));2024年1月16日21类型转换－转换为数字parseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。variNum1=parseInt("123abc");variNum2=parseInt("0xa");variNum3=parseInt("013");variNum4=parseInt("blue");alert(iNum1);alert(iNum2);alert(iNum3);alert(iNum4);variNum1=parseInt("10",2);variNum2=parseInt("10",8);variNum3=parseInt("10",16);alert(iNum1);alert(iNum2);alert(iNum3);2024年1月16日22强制类型转换Boolean(value)Number(value)String(value)varb1=Boolean("");varb2=Boolean("hello");varb3=Boolean(100);varb4=Boolean(null);varb5=Boolean(0);varb6=Boolean(newObject());alert("b1="+b1);alert("b2="+b2);alert("b3="+b3);alert("b4="+b4);alert("b5="+b5);alert("b6="+b6);非0、非空串、非空对象为true，其他false2024年1月16日23强制类型转换Boolean(value)Number(value)String(value)alert("Number(false)="+Number(false));alert("Number(true)="+Number(true));alert("Number(undefined)="+Number(undefined));alert("Number(null)="+Number(null));alert("Number('3.6')="+Number("3.6"));alert("Number('3.3.3')="+Number("3.3.3"));alert("Number(newObject())="+Number(newObject()));Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效2024年1月16日24引用类型Object类与java中的Object类相似具体有：constructor，prototype，tostring，valueof等方法NewObject()等价于{};2024年1月16日25属性名属性值name“zhangsan”age123getNamefunction(){ aler);}从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。内部如何组织这些属性集的呢？使用类似于java中的Map?为什么使用for循环遍历属性的时候，没有找到constructor属性2024年1月16日26引用类型Boolean：一般不用Number为基本数字类型的包装类有用的方法varoNum=newNumber(99);alert(oNum.toFixed(2));oNum=newNumber(999);alert(oNum.toExponential(2));oNum=newNumber(9999);alert(oNum.toPrecision(6));2024年1月16日27运算符运算符说明示例+加a=5+8-减a=8-5/除a=20/5*乘a=5*19%取模－两个数相除的余数10%3=1++一元自加。该运算符带一个操作数，将操作数的值加1。返回的值取决于

++运算符位于操作数的前面或是后面将返回x自加运算后的值。x++

将返回x

自加运算前的值--一元自减。该运算符只带一个操作数。返回的值取决于--

运算符位于操作数的前面或是后面--x

将返回

自减运算后的值。x--

将返回

自减运算前的值2024年1月16日28算术运算符

运算符示例.html2024年1月16日29比较运算符比较运算符2-1

运算符说明示例==等于。如果两个操作数相等，则返回真。a==b!=不等于。如果两个操作数不相等，则返回真。Var2!=5>大于。如果左边的操作数大于右边的操作数，则返回真。Var1>var2<小于。如果左边的操作数小于右边的操作数，则返回真。Var2<var1<=小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。Var2<=4Var2<=var1>=大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。Var1>=5Var1>=var22024年1月16日30运算符逻辑运算符运算符值说明与(&&)expr1&&expr2只有当expr1

和expr2

同为真时，才返回真。否则，返回假。或(||)expr1||expr2如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。非(!)!expr如果表达式为真，则返回假。如果为假，则返回真。2024年1月16日31等号运算符规则＝＝和！＝在进行运算之前都会进行类型转换，规则如下：如果一个运算数是Boolean则在检查相等之前先把他转换为数字值。False转换为0，true转换为1如果一个运算数是字符串，另一个是数字，则在检查相等之前先把字符串转换为数字值。如果一个运算数是字符串，另一个是对象，则在检查相等之前先把对象调用toString方法转换为字符串。如果一个运算数是对象，另一个是数字，则在检查相等之前先把对象转换为数字值。值null和undefined相等如果两个都是对象，则比较引用值alert(null==undefined);alert(5=="5");alert(false==0);2024年1月16日32全等号＝＝＝在作比较之前，不作类型转换alert(null===undefined);alert(5==="5");alert(false===0);2024年1月16日33条件语句用于测试条件。if(条件)

{

JavaScript代码;

}语法：if

语句如果要执行多个语句，必须将这些语句放在一对大括号({})内。但如果只要执行一个语句，则可以省略大括号2024年1月16日34<HEAD><SCRIPTLANGUAGE="JavaScript">functioncalcu(){varnumb1=lc.num1.value;varnumb2=lc.num2.value;if((numb1!="")&&(numb2!="")){vartotal=parseFloat(numb1)*parseFloat(numb2);lc.result.value=total;if((total>500)&&(total<=1000))alert("购买总价超过500\n支付时将赠送超级Q币2枚！");if((total>1000)&&(total<=2000))alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！");if((total>2000))alert("购买总价超过2000\n请直接与贵宾台联系！");}}</SCRIPT></HEAD>….其他代码略，同上例2024年1月16日35ifelse语句2-1if(条件){//JavaScript代码;}else{//JavaScript代码;}语法：2024年1月16日36switch语句switch(表达式){

case常量1:

JavaScript语句;

break;

case

常量2:

JavaScript语句;

break;

...

default:JavaScript语句;}语法：swtich示例.html2024年1月16日37数组

声明数组

var

数组名=newArray(数组大小);

例：var

emp=newArray(3)添加元素

emp[0]=“AA";

emp[1]=“BB";

emp[2]=“CC";AABBCCemp

也可以声明数组并赋初值：例：varemp=newArray(“AA”，“BB”，“CC”)；2024年1月16日38<HTML><HEAD><TITLE>使用数组</TITLE><SCRIPTLANGUAGE="JavaScript">varemp=newArray(3);emp[0]="RyanDias";emp[1]="GrahamBrowne";emp[2]="DavidGreene";document.write("数组emp中的数据为:<HR>");document.write(emp[0]+"<BR>");document.write(emp[1]+"<BR>");document.write(emp[2]+"<BR>");</SCRIPT></HEAD></HTML>数组2024年1月16日39数组常用属性

length

：返回数组中元素的个数?应该是最大下标值+1常用方法方法说明join将数组中的元素组合成字符串reverse颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个sort对数组元素进行排序2024年1月16日40<HTML><HEAD><SCRIPTLANGUAGE="JavaScript">varemp=newArray(3);emp[0]="RyanDias";emp[1]="GrahamBrowne";emp[2]="DavidGreene";emp.sort(

);document.write(“排序结果是：<HR>");document.write(emp[0]+"<BR>");document.write(emp[1]+"<BR>");document.write(emp[2]+"<BR>");varx=emp.join();document.write(x);</SCRIPT></HEAD></HTML>数组排序2024年1月16日41循环for循环do-whilewhile

For循环演示.htmlDo-while循环演示.html2024年1月16日42函数定义函数：function

函数名(参数1,参数2，…){

语句;}调用函数：

函数调用一般和表单元素的事件一起使用，调用格式为：

事件名＝“函数名”

;functionsum(one,two){varresult=one+two;

returnresult;}<INPUTname=“add”type=“button”value=“加法"onClick="sum(2，5)">表示单击此按钮时，调用函数sum()执行2024年1月16日43JavaScript函数内置函数

eval

函数：用于计算字符串表达式的值

isNaN函数：用于验证参数是否为NaN（非数字）JavaScript代码<SCRIPTLANGUAGE="JavaScript">varstr1=prompt(“输入一个表达式，我给您计算","1+1");varresult=eval(str1);document.write(str1+"="+result);varx=prompt("输入一些数据","0");if(isNaN(x))

alert(x+"不是一个数字");else

alert(x+"是一个数字");</SCRIPT>Eval示例.html2024年1月16日44函数的应用num1num2result函数.html2024年1月16日45Javascript函数特性－无重载但在javascript中定义两个名字相同的函数不会引发错误。他将会调用后定义的函数。functiondoAdd(iNum){alert(iNum+1000);}functiondoAdd(iNum){alert(iNum+100);}doAdd(100);2024年1月16日46Javascript函数特性

利用arguments模拟重载Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数。开发者定义的函数在调用时可以接受任意的参数，不会引发错误。遗漏的参数以undefined传递给函数，多余的参数被忽略，但可以使用arguments数组接受。functionsayHello(){if(arguments[0]=="exit"){return;}alert(arguments[0]);}sayHello();sayHello("zhangsan");sayHello("exit");2024年1月16日47Javascript函数特性

利用arguments模拟重载functiondoAdd(){if(arguments.length==1){alert(arguments[0]);}elseif(arguments.length==2){alert(arguments[0]+arguments[1]);}}doAdd(30);doAdd(30,30);2024年1月16日48Function类Varfunction_name=newFunction(arg1,arg2,…,argN,function_body);例：varsayHello=newFunction("sName","alert(\"Hello\"+sName)");sayHello("zhangsan");2024年1月16日49借助Function来理解函数vardoAdd=newFunction("iNum","alert(iNum+100)");doAdd=newFunction("iNum","alert('hello'+iNum)");doAdd(1);由以上可见，函数名只是指向函数对象的一个引用值，同样的，我们也可以使用不同的变量指向同一个函数。2024年1月16日50借助Function来理解函数vardoAdd=newFunction("iNum","alert(iNum+100)");doAdd=newFunction("iNum","alert('hello'+iNum)");varotherAdd=doAdd;doAdd(1);otherAdd(9);2024年1月16日51把函数作为参数传给其他函数varsayHello=newFunction("sName","sMessage","alert('Hello'+sName+','+sMessage)");functioncallOtherFunc(fnCall,vArg1,vArg2){fnCall(vArg1,vArg2);}callOtherFunc(sayHello,“zhangsan”,“good”);

alert(callOtherFunc.toString());2024年1月16日52函数：指针functionmyFunction()

{

alert("Old");

}

myFunction();//输出"Old"

myFunction=function()

{

alert("New");

};

myFunction();//输出"New"可见，函数的名字相当于一个指针2024年1月16日53函数：指针functionmyFunction()

{

alert("Old");

}

varsavedFuncion=myFunction;

myFunction=function()

{

alert("New");

};

myFunction();

//输出"New"

savedFuncion();

//输出"Old"2024年1月16日54基于对象的JavascriptJavaScript中的对象是由属性(properties)和方法(methods)两种基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象；由浏览器环境中提供；创建新对象。2024年1月16日55Javascript的内部对象Object、Array、Function、String、Boolean、Number、Date、RegExp、Math、Global、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError2024年1月16日56对象操作语句－for..in格式如下：For（属性名in已知对象名）优点：无需知道对象中属性的个数即可进行操作。例：FunctionshowData(object){for(varX=0;X<30;X++)document.write(object[i])；}FunctionshowData(object){for(varxinobject)document.write(object[i])；}2024年1月16日57对象操作语句－with语句在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with(object){...}

所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。with(o){name="李四";age=100;height=12.3;}2024年1月16日58再论数组//定义方法1

varaColors=newArray();aColors[0]="red";aColors[1]="green";aColors[2]="blue";for(varxinaColors){alert(aColors[x]);}//定义方法2varaColors2=newArray("red","green","blue");//定义方法3

varaColors3=["red","green","blue"];2024年1月16日59再论数组数组的大小是动态变化的varaColors3=["red","green","blue"];aColors[6]="gray";for(varx=0;x<aColors.length;x++){alert(aColors[x]);}for(varxinaColors){alert(aColors[x]);}2024年1月16日60再论数组数组的toString方法和valueOf方法varaColors3=["red","green","blue"];aColors[10]="gray";alert(aColors.toString());字符串和数组之间的转换：splitvaraColors3=["red","green","blue"];varsString=aColors.toString();alert(sString);varaColors4=sString.split(",");for(vari=0;i<aColors4.length;i++){alert(aColors4[i]);}2024年1月16日61再论数组Javascript中，可以把数组看成是一个栈varaColors=newArray();aColors.push("red");aColors.push("green");aColors.push("blue");for(vari=0;i<aColors.length;i++){alert(aColors[i]);}varsColor=aColors.pop();alert("sColor:"+sColor);2024年1月16日62再论数组结合shift()和unshift()，以及push和pop，可以把数组看成是一个队列Shift：删除数组中的第一个元素Unshift：把一个元素放在数组的第一个位置varqueue=["red","green","blue"];queue.push("white");alert(queue.toString());queue.shift();alert(queue.toString());queue.unshift("yellow");alert(queue.toString());queue.sort();alert(queue.toString());queue.reverse();alert(queue.toString());2024年1月16日63String

对象创建字符串有两种不同方法：使用var语句

varnewstr=“这是我的字符串"创建String对象varnewstr=newString(“这是我的字符串")2024年1月16日64String

对象名称说明属性length返回字符串的长度

方法big(

)增大字符串文本blink(

)使字符串文本闪烁（IE浏览器不支持）bold(

)加粗字符串文本

fontcolor(

)确定字体颜色

italics(

)用斜体显示字符串

indexOf(“子字符串”，起始位置

)查找子字符串的位置strike(

)显示加删除线的文本

sub(

)将文本显示为下标

……toLowerCase(

)将字符串转换成小写

toUpperCase(

)将字符串转换成大写语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果没找到，返回－1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);//返回结果为2，起始位置是02024年1月16日65<SCRIPTLANGUAGE="JavaScript">functioncheckEmail(){vare=document.myform.email.value;

if(e.length==0)//检测长度是否为0，即是否为空

{alert("电子邮件不能为空!");return;}if(e.indexOf("@",0)==-1)//检测是否包含”@”符号

{alert("电子邮件格式不正确\n必须包含@符号！");return;}if(e.indexOf(".",0)==-1)//检测是否包含”.”符号

{alert("电子邮件格式不正确\n必须包含.符号！");return;}document.write("恭喜您！，注册成功！");}检查电子邮件email是否包含“@”和”.”String

对象返回结果-1表示没找到“@”字符字符串对象.htm2024年1月16日66Math对象名称说明属性PI∏

的值，约等于3.1415LN1010的自然对数的值，约等于2.302EEuler

的常量的值，约等于2.718。Euler的常量用作自然对数的底数abs(y)返回y的绝对值sin(y)返回y的正弦，返回值以弧度为单位。cos(y)返回y的余弦，返回值以弧度为单位tan(y)返回y的正切，返回值以弧度为单位min(x,y)返回x和y

两个数中较小的数max(x,y)返回x和y两个数中较大的数

random返回0-1的随机数方法round(y)四舍五入取整sqrt(y)返回y的平方根Math.random()：产生0－1的随机小数Math.round()：四舍五入取整，如9.34取整为92024年1月16日67<HTML><HEAD><METAhttp-equiv="refresh"content="2"><TITLE>自动刷新</TITLE><SCRIPTlanguage="JavaScript">document.write("2秒自动刷新，随机显示图片");vari=0;i=Math.round(Math.random()*8+1);document.write("<IMGwidth=640height=433src="+i+".jpg>");</SCRIPT></HEAD><BODY>

</BODY></HTML>Math

对象假定随机产生的数字i=3，上述代码即为：<IMGwidth=640height=433src=3.jpg>显示第三幅图片（3.jpg）如何实现每隔2秒刷新网页Math.round(Math.random()*8+1)产生1-9的数字2024年1月16日68Date对象Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数var日期对象=newDate(年、月、日等参数)例：varmydate=newDate(“July29,1998,10:30:00”)如果没有参数，表示当前日期和时间例：vartoday=newDate(

)

2024年1月16日69Date对象Data方法的分组：方法分组说明setxxx这些方法用于设置时间和日期值getxxx

这些方法用于获取时间和日期值Toxxx这些方法用于从Date对象返回字符串值parsexxx&UTCxx这些方法用于解析字符串2024年1月16日70Date对象用作Date方法的参数的整数：值整数Seconds和minutes0至59

Hours0至23Day0至6（星期几）Date1至31（月份中的天数）Months0至11（一月至十二月）2024年1月16日71Date对象Set方法：方法说明setDate设置Date对象中月份中的天数，其值介于1至31之间。setHours设置Date对象中的小时数，其值介于0至23之间。setMinutes设置

Date对象中的分钟数，其值介于0至59之间。setSeconds设置Date对象中的秒数，其值介于0至59之间。setTime设置

Date对象中的时间值。setMonth设置Date对象中的月份，其值介于1至12之间。2024年1月16日72Date对象Get方法：方法说明getDate返回Date对象中月份中的天数，其值介于1至31之间getDay返回Date对象中的星期几，其值介于0至6之间getHours返回Date对象中的小时数，其值介于0至23之间getMinutes返回Date对象中的分钟数，其值介于0至59之间getSeconds返回Date对象中的秒数，其值介于0至59之间getMonth返回Date对象中的月份，其值介于0至11之间getFullYear返回Date对象中的年份，其值为四位数getTime返回自某一时刻（1970年1月1日）以来的毫秒数2024年1月16日73Date对象方法说明ToGMTString使用格林尼治标准时间(GMT)数据格式将Date对象转换成字符串表示ToLocaleString使用当地时间格式将Date对象转换成字符串表示To方法：Parse

方法和UTC方法方法说明Date.parse(datestring)用日期字符串表示自1970年1月1日以来的毫秒数

Date.UTC(year,month,day,hours,min.,secs.)Date对象中自1970年1月1日以来的毫秒数

2024年1月16日74<HTML><BODY><scriptlanguage="javaScript">varnow=newDate();varhour=now.getHours(

);if(hour>=0&&hour<=12) document.write("上午好!")if(hour>12&&hour<=18)document.write("下午好!");if(hour>18&&hour<24)document.write("晚上好!");document.write("<P>今天日期:"+now.getYear()+"年“

+(now.getMonth()+1)+"月"+now.getDate()+"日");document.write("<P>现在时间:"+now.getHours()+"点"+now.getMinutes()+"分");</script></body></HTML>Date对象获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字0－11，注意＋1日期对象1.htm2024年1月16日75Date对象setTimeout的用法：

setTimeout（“调用的函数”,”定时的时间”）例：

varmyTime＝setTimeout（”disptime()”,1000）;clearTimeout（myTime）;本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime()函数显示时间每隔1000毫秒调用函数disptime()执行关闭定时器2024年1月16日76Date对象10-8JavaScript代码<SCRIPTlanguage="JavaScript">functiondisptime(){vartime=newDate();//获得当前时间varhour=time.getHours();//获得小时、分钟、秒varminute=time.getMinutes();varsecond=time.getSeconds();varapm="AM";//默认显示上午:AMif(hour>12)//按12小时制显示{hour=hour-12;apm="PM";}if(minute<10)//如果分钟只有1位，补0显示minute="0"+minute;if(second<10)//如果秒数只有1位，补0显示second="0"+second;document.myform.myclock.value=hour+":"+minute+":"+

second+""+apm;varmyTime=setTimeout("disptime(

)",1000);}</SCRIPT>无边框的文本框myclock使用定时器函数，每隔1秒调用disptime()函数刷新显示获得小时、分钟、秒根据12小时制调整时间和AM/PM标志确保分钟和秒显示位数为2位varmyTime=setTimeout("disptime(

)",1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示2024年1月16日77Date对象<STYLEtype="text/css"></STYLE></HEAD><BODYonLoad="disptime()"><FORMNAME="myform"><INPUTname="myclock"type="text"value=""></FORM>设置样式：无边框的文本框Onload()事件，页面加载就调用函数：disptime（显示时间）2024年1月16日78DatevardDate=newDate();alert(dDate.toString());alert(dDate.toDateString());alert(dDate.toLocaleDateString());alert(dDate.toLocaleTimeString());dDate=newDate(2007,7,7);2024年1月16日79thisthis这个词在function中有特别的意义。它指向了调用函数的那个对象。varoCar=newObject();oCar.color="red";oCar.showColor=function(){alert(this.color);};oCar.showColor();2024年1月16日80functionshowColor(){alert(this.color);};varoCar1=newObject();oCar1.color="red";oCar1.showColor=showColor;varoCar2=newObject();oCar2.color="blue";oCar2.showColor=showColor;oCar1.showColor();oCar2.showColor();this这个词在function中有特别的意义。它指向了调用函数的那个对象。2024年1月16日81this关键字functionEmployee(name,salary,mySupervisor)

{

=name;

this.salary=salary;

this.supervisor=mySupervisor;

}

varboss=newEmployee("John",200);varmanager=newEmployee("Joan",50,boss);

varteamLeader=newEmployee("Rose",50,boss);

aler+"isthesupervisorof"+);

aler+"\'ssupervisoris"+);2024年1月16日82定义类或对象的方法－工厂方法前提：对象的属性可以在对象对象创建后动态定义。varoCar=newObject();oCar.color="red";oCar.doors=4;oCar.mpg=20;oCar.showColor=function(){alert(this.color);};oCar.showColor(oCar);functioncreateCar(){varoCar=newObject();oCar.color="red";oCar.doors=4;oCar.mpg=20;oCar.showColor=function(){alert(this.color);};returnoCar;}varoCar=createCar();oCar.showColor();2024年1月16日83functioncreateCar(sColor,iDoors,iMpg){varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.showColor=function(){alert(this.color);};returnoCar;}varoCar=createCar("black",5,30);oCar.showColor();functionshowColor(){alert(this.color);}functioncreateCar(sColor,iDoors,iMpg){varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.showColor=showColor;

returnoCar;}varoCar=createCar("yellow",3,6);oCar.showColor();2024年1月16日84函数示例6.html函数示例7.html2024年1月16日85定义类或对象的方法－构造函数方式functionCar(sColor,iDoors,iMpg){this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.showColor=function(){alert(this.color);}};varoCar1=newCar("red",5,6);varoCar2=newCar("blue",8,9);oCar1.showColor();oCar2.showColor();alert(typeofCar);alert(typeofnewCar());当这个函数创建的时候有一个同名的对象也被创建。2024年1月16日86函数：原型functionFish(name,color)

{

=name;

this.color=color;

}

Ftotype.livesIn="water";

Ftotype.price=20;varfish1=newFish("mackarel","gray");

varfish2=newFish("goldfish","orange");

varfish3=newFish("salmon","white");for(vari=1;i<=3;i++)

{varfish=eval("fish"+i);

//只是取得指向这条鱼的指针

aler+","+fish.color+","+fish.livesIn+","+fish.price);

}输出："mackarel,gray,water,20"

"goldfish,orange,water,20"

"salmon,white

water,20"当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。2024年1月16日87用prototype给对象添加函数functionEmployee(name,salary)

{

=name;

this.salary=salary;

}

Etotype.getSalary=functiongetSalaryFunction()

{

returnthis.salary;

}Etotype.addSalary=functionaddSalaryFunction(addition)

{

this.salary=this.salary+addition;

}2024年1月16日88用prototype给对象添加函数varboss1=newEmployee("Joan",200000);varboss2=newEmployee("Kim",100000);varboss3=newEmployee("Sam",150000);输出：alert(boss1.getSalary());

//输出200000alert(boss2.getSalary());

//输出100000alert(boss3.getSalary());

//输出1500002024年1月16日89定义类或对象的方法－原型方式functionCar(sName){=sName;Ctotype.showName=function(){aler);}}varoCar=newCar("benz");oCar.showName();varyourCar=newCar("haha");yourCar.showName();oCar.showName();//输出”haha”每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象2024年1月16日90定义类或对象的方法－原型方式functionCar(){};Ctotype.color="red";Ctotype.doors=4;Ctotype.mpg=23;Ctotype.drivers=newArray("mike","tom");Ctotype.showColor=function(){alert(this.color);}varoCar1=newCar();varoCar2=newCar();oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push("jim");//改变oCar1.drivers,结果确把oCar2也改变了alert(oCar2.drivers);每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象2024年1月16日91定义类或对象的方法－混合构造函数和原型方式functionCar(sColor,iDoors,iMpg,aDrivers){this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.drivers=aDrivers;};Ctotype.showColor=function(){alert(this.color);}varoCar1=newCar("red",5,3,newArray("Tom","Jack"));varoCar2=newCar("blue",5,3,newArray("Mike","Jim"));oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push("Jim");alert(oCar2.drivers);构造函数的方式定义属性；用原型方式定义方法；推荐使用！2024年1月16日92定义类或对象的方法－动态原型方式functionCar(sColor,iDoors,iMpg,aDrivers){this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.drivers=aDrivers;if(typeofCar._initialized=="undefined"){Ctotype.showColor=function(){alert(this.color);}Car._initialized=true;}};varoCar1=newCar("red",5,3,newArray("Tom","Jack"));varoCar2=newCar("blue",5,3,newArray("Mike","Jim"));oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push("Jim");alert(oCar2.drivers);2024年1月16日93进一步认识prototype问题：资源耗费太大varstr="hello";str+="world";因此：优点是资源耗费较小，但是语义不够清楚。vararr=newArray();arr[0]="hello";arr[1]="world";varstr1=arr.join("");alert(str1);2024年1月16日94进一步认识prototypefunctionStringBuffer(){this._strings=newArray();}StringBtotype.append=function(str){this._strings.push(str);}StringBtotype.toString=function(){returnthis._strings.join("");}

varbuffer=newStringBuffer();buffer.append("hello");buffer.append("world");alert(buffer.toString());2024年1月16日95进一步认识prototype为本地类创建新的方法Ntotype.toHexString=function(){returnthis.toString(16);}variNum=15;alert(iNum.toHexString());2024年1月16日96通过对象

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

JavaScript基础教程课件

文档简介

温馨提示

最新文档

评论

JavaScript基础教程课件

文档简介

温馨提示

最新文档

评论

相关文档