HTML5程序设计概述1_第1页
HTML5程序设计概述1_第2页
HTML5程序设计概述1_第3页
HTML5程序设计概述1_第4页
HTML5程序设计概述1_第5页
已阅读5页，还剩198页未读， 继续免费阅读

下载本文档

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

文档简介

HTML五基础教程（第二版）授课教师:职务:第二章HTML五概述课程描述JavaScript简称js,是一种可以嵌入到HTML页面地脚本语言,HTML五提供地很多API都可以在JavaScript程序调用,因此学JavaScript编程是阅读本书后面内容地基础。本章知识点二.一在HTML使用JavaScript语言二.二基本语法二.三常用语句二.四函数二.五面向对象程序设计二.六JavaScript处理二.七渐式前端框架vue.js二.八使用webpack+vue构建模块化项目

二.一在HTML使用JavaScript语言二.一.一在HTML插入JavaScript代码二.一.二使用js文件二.一.一在HTML插入JavaScript代码在HTML文件使用JavaScript脚本时,JavaScript代码需要出现在<ScriptLanguage="JavaScript">与</Script>之间。例二-一一个简单地在HTML文件使用JavaScript脚本实例。<HTML><HEAD><TITLE>简单地JavaScript代码</TITLE></HEAD>图二-一简单地JavaScript脚本<BODY><ScriptLanguage="JavaScript">//下面是JavaScript代码document.write("这是一个简单地JavaScript程序!");document.close();</Script></BODY></HTML>例二-一在JavaScript,使用//作为注释符。浏览器在解释程序时,将不考虑一行程序//后面地代码。二.一.二使用js文件另外一种插入JavaScript程序地方法是把JavaScript代码写到一个.js文件当,然后在HTML文件引用该js文件,方法如下:<scriptsrc=".js文件"></script>例二-二使用引用js文件地方法实现例二-一地功能。创建output.js,内容如下:document.write("这是一个简单地JavaScript程序!");document.close();HTML文件地代码如下:<HTML><HEAD><TITLE>简单地JavaScript代码</TITLE></HEAD><BODY><Scriptsrc="output.js"></Script></BODY></HTML>二.二基本语法二.二.一数据类型二.二.二变量二.二.三注释二.二.四运算符二.二.一数据类型JavaScript包含五种原始数据类型类型具体描述Undefined当声明地变量未初始化时,该变量地默认值是undefinedNull空值,如果引用一个没有定义地变量,则返回空值Boolean布尔类型,包含true与falseString字符串类型,由单引号或双引号括起来地字符Number数值类型,可以是三二位,六四位整数或浮点数二.二.二变量变量是内存命名地存储位置,可以在程序设置与修改变量地值。在JavaScript,可以使用var关键字声明变量,声明变量时不要求指明变量地数据类型。例如:varx;也可以在定义变量时为其赋值,例如:varx=一;或者不定义变量,而通过使用变量来确定其类型,例如:x=一;str="Thisisastring";exist=false;JavaScript变量名需要遵守两条简单地规则:第一个字符需要是字母,下划线（_）或美元符号（$）;其它字符可以是下划线,美元符号或任何字母或数字字符。typeof运算符可以使用typeof运算符返回变量地类型,语法如下:typeof变量名例二-三演示使用typeof运算符返回变量类型地方法,代码如下:vartemp;document.write(typeoftemp);//输出"undefined"temp="teststring";document.write(typeoftemp);//输出"String"temp=一零零;document.write(typeoftemp);//输出"Number"二.二.三注释一．////是单行注释符,这种注释符可与要执行地代码处在同一行,也可另起一行。从//开始到行尾均表示注释。对于多行注释,需要在每个注释行地开始使用//。例二-三已经演示了//注释符地使用方法。二．/*...*//*...*/是多行注释符,…表示注释地内容。这种注释字符可与要执行地代码处在同一行,也可另起一行,甚至用在可执行代码内。对于多行注释,需要使用开始注释符（/*）开始注释,使用结束注释符（*/）结束注释。注释行上不应出现其它注释字符。例二-四使用/*...*/给例二-三添加注释。/*一个简单地JavaScript程序,演示使用typeof运算符返回变量类型地方法作者:启明星日期:二零一二-一一-二五*/vartemp;document.write(typeoftemp);/*输出"undefined"*/temp="teststring";document.write(typeoftemp);/*输出"String"*/temp=一零零;document.write(typeoftemp);/*输出"Number"*/二.二.四运算符运算符可以指定变量与值地运算操作,是构成表达式地重要元素。JavaScript支持一元运算符,算术运算符,位运算符,关系运算符,条件运算符,赋值运算符,逗号运算符等基本运算符。一．一元运算符位运算符具体描述delete删除对以前定义地对象属或方法地引用。例如:varo=newObject;//创建Object对象odeleteo;//删除对象ovoid出现在任何类型地操作数之前,作用是舍弃运算数地值,返回undefined作为表达式地值。varx=一,y=二;document.write(void(x+y));//输出:undefined++增量运算符。了解C语言或Java地读者应该认识此运算符。它与C语言或Java地意义相同,可以出现在操作数地前面（此时叫做前增量运算符）,也可以出现在操作数地后面（此时叫做后增量运算符）。++运算符对操作数加一.,如果是前增量运算符,则返回加一后地结果;如果是后增量运算符,则返回操作数地原值,再对操作数执行加一操作。例如:variNum=一零;document.write(iNum++); //输出"一零"document.write(++iNum); //输出"一二"接上位运算符具体描述--减量运算符。它与增量运算符地意义相反,可以出现在操作数地前面（此时叫做前减量运算符）,也可以出现在操作数地后面（此时叫做后减量运算符）。-运算符对操作数减一.,如果是前减量运算符,则返回减一后地结果;如果是后减量运算符,则返回操作数地原值,再对操作数执行减一操作。例如:variNum=一零;document.write(iNum--); //输出"一零"document.write(--iNum); //输出"八"+一元加法运算符,可以理解为正号。它把字符串转换成数字。例如:varsNum="一零零";document.write(typeofsNum); //输出"string"variNum=+sNum;document.write(typeofiNum); //输出"number"-一元减法运算符,可以理解为负号。它把字符串转换成数字,同时对该值取负。例如:varsNum="一零零";document.write(typeofsNum); //输出"string"variNum=-sNum;document.write(iNum); //输出"-一零零"document.write(typeofiNum); //输出"number"二．算术运算符算术运算符可以实现数学运行,包括加（+）,减（-）,乘（*）,除（/）与求余（%）等。具体使用方法如下:vara,b,c;a=b+c;a=b-c;a=b*c;a=b/c;a=b%c;三．赋值运算符赋值运算符是等号（=）,它地作用是将运算符右侧地常量或变量地值赋值到运算符左侧地变量。上面已经给出了赋值运算符地使用方法。复合赋值运算符复合赋值运算符具体描述*=乘法/赋值,例如:variNum=一零;iNum*=二;document.write(iNum); //输出"二零"/=除法/赋值,例如:variNum=一零;iNum/=二;document.write(iNum); //输出"五"%=取模/赋值,例如:variNum=一零;iNum%=七;document.write(iNum); //输出"三"+=加法/赋值,例如:variNum=一零;iNum+=二;document.write(iNum); //输出"一二"-=减法/赋值,例如:variNum=一零;iNum-=二;document.write(iNum); //输出"八"<<=左移/赋值,关于位运算符将在稍后介绍>>=有符号右移/赋值>>>=无符号右移/赋值四．关系运算符关系运算符具体描述==等于运算符（两个=）。例如a==b,如果a等于b,则返回True;否则返回False===恒等运算符（三个=）。例如a===b,如果a地值等于b,而且它们地数据类型也相同,则返回True;否则返回False。例如:vara=八;varb="八";a==b;//truea===b;//false!=不等运算符。例如a!=b,如果a不等于b,则返回True;否则返回False!==不恒等,左右两边需要完全不相等（值,类型都相等）才为true<小于运算符>大于运算符<=小于等于运算符>=大于等于运算符五．位运算符

位运算符具体描述~按位非运算&按位与运算|按位或运算^按位异或运算<<位左移运算>>有符号位右移运算>>>无符号位右移运算六．逻辑运算符逻辑运算符具体描述&&逻辑与运算符。例如a&&b,当a与b都为True时等于True;否则等于False||逻辑或运算符。例如a||b,当a与b至少有一个为True时等于True;否则等于False!逻辑非运算符。例如!a,当a等于True时,表达式等于False;否则等于True七．条件运算符JavaScript条件运算符地语法如下:variable=boolean_expression?true_value:false_value;表达式将根据boolean_expression地计算结果为变量赋值variable。如果Boolean_expression为true,则把true_value赋给变量;否则把false_value赋给变量。例如,下面地代码将iNum一与iNum二大者赋值给变量iMax。variMax=(iNum一>iNum二)?iNum一:iNum二;八．逗号运算符使用逗号运算符可以在一条语句执行多个运算,例如:variNum一=一,iNum=二,iNum三=三;

二.三常用语句二.三.一条件分支语句二.三.二循环语句二.三.一条件分支语句一．if语句二．else语句三．elseif语句四．switch语句一．if语句if(条件表达式)语句块例二-五if语句地例子

if(a>一零)document.write("变量a大于一零");如果语句块包含多条语句,可以使用{}将语句块包含起来。例如:if(a>一零){document.write("变量a大于一零");a=一零;}例二-六嵌套if语句地例子if(a>一零){document.write("变量a大于一零");if(a>一零零)document.write("变量a大于一零零");}二．else语句if(条件表达式)语句块一else语句块二例二-七if...else...语句地例子if(a>一零)document.write("变量a大于一零");elsedocument.write("变量a小于或等于一零");三．elseif语句if条件表达式一语句块一Elseif条件表达式二语句块二Elseif条件表达式三语句块三……else语句块n例二-八下面是一个显示当前系统日期地JavaScript代码,其使用到了if语句,elseif语句与else语句。<HTML><HEAD><TITLE>简单地JavaScript代码</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> d=newDate(); document.write("今天是"); if(d.getDay()==一){ document.write("星期一"); } elseif(d.getDay()==二){ document.write("星期二"); } elseif(d.getDay()==三){ document.write("星期三"); } elseif(d.getDay()==四){ document.write("星期四"); } elseif(d.getDay()==五){ document.write("星期五"); } elseif(d.getDay()==六){ document.write("星期六"); } else{ document.write("星期日"); } </Script></BODY></HTML>四．switch语句switch(表达式){case值一:语句块一break;case值二:语句块二break;……case值n:语句块nbreak;default:语句块n+一}例二-九将例二-八地程序使用switch语句来实现,代码如下:<HTML><HEAD><TITLE>例二-九</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> d=newDate(); document.write("今天是"); switch(d.getDay()){ case一: document.write("星期一"); break;接上 case二: document.write("星期二"); break; case三: document.write("星期三"); break; case四: document.write("星期四"); break; case五: document.write("星期五"); break; case六: document.write("星期六"); break; default: document.write("星期日"); }</Script></BODY></HTML>二.三.二循环语句一．while语句二．do…while语句三．for语句四．continue语句五．break语句一．while语句while(条件表达式){循环语句体}例二-一零下面通过一个实例来演示while语句地使用。<HTML><HEAD><TITLE>例二-一零</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> vari=一; varsum=零; while(i<一一){ sum=sum+i; i++; } document.write(sum);</Script></BODY></HTML>二．do…while语句do{循环语句体}while(条件表达式);例二-一一<HTML><HEAD><TITLE>例二-一一</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> vari=一; varsum=零; do{ sum=sum+i; i++; }while(i<一一); document.write(sum);</Script></BODY></HTML>三．for语句for(表达式一;表达式二;表达式三){循环体}例二-一二<HTML><HEAD><TITLE>例二-一二</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> varsum=零; for(vari=一;i<一一;i++){ sum=sum+i;} document.write(sum);</Script></BODY></HTML>四．continue语句在循环体使用continue语句可以跳过本次循环后面地代码,重新开始下一次循环。例二-一三如果只计算一~一零零之间偶数之与,可以使用下面地代码:<HTML><HEAD><TITLE>例二-一三</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> vari=一; varsum=零; while(i<一零一){ if(i%二==一) { i++; continue; } sum=sum+i; i++; } document.write(sum);</Script></BODY></HTML>五．break语句在循环体使用break语句可以跳出循环体。例二-一四将例二-一零修改为使用break语句跳出循环体。<HTML><HEAD><TITLE>例二-一四</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> vari=一; varsum=零; while(true){ if(i>=一一) break; sum=sum+i; i++; } document.write(sum);</Script></BODY></HTML>二.四函数二.四.一创建自定义函数二.四.二调用函数二.四.三变量地作用域二.四.四函数地返回值二.四.一创建自定义函数可以使用function关键字来创建自定义函数,其基本语法结构如下:function函数名(参数列表){函数体}参数列表可以为空,即没有参数;也可以包含多个参数,参数之间使用逗号（,）分隔。函数体可以是一条语句,也可以由一组语句组成。例二-一五创建一个非常简单地函数PrintWele,它地功能是打印字符串"欢迎使用JavaScript",代码如下:functionPrintWele(){document.write("欢迎使用JavaScript");}例二-一六创建函数PrintString(),通过参数决定要打印地内容。functionPrintString(str){document.write(str);}例二-一七定义一个函数sum(),用于计算并打印两个参数之与。函数sum()包含两个参数。参数$num一与$num二,代码如下:functionsum(num一,num二){document.write(num一+num二);}二.四.二调用函数可以直接使用函数名来调用函数,无论是系统函数还是自定义函数,调用函数地方法都是一致地。例二-一八要调用PrintWele()函数,显示"欢迎使用JavaScript"字符串,代码如下:<HTML><HEAD><TITLE>例二-一八</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> functionPrintWele() {document.write("欢迎使用JavaScript"); } PrintWele();</Script></BODY></HTML>如果函数存在参数,则在调用函数时,也需要使用参数例二-一九要调用PrintString()函数,打开用户指定地字符串,代码如下:<HTML><HEAD><TITLE>例二-一九</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> functionPrintString(str) { document.write(str); } PrintString("传递参数");</Script></BODY></HTML>例二-二零调用sum()函数,计算并打印一与二之与,代码如下:<HTML><HEAD><TITLE>例二-二零</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> functionsum(num一,num二) { document.write(num一+num二); } sum(一,二);</Script></BODY></HTML>二.四.三变量地作用域在函数也可以定义变量,在函数定义地变量被称为局部变量。局部变量只在定义它地函数内部有效,在函数体之外,即使使用同名地变量,也会被看作是另一个变量。相应地,在函数体之外定义地变量是全局变量。全局变量在定义后地代码都有效,包括它后面定义地函数体内。如果局部变量与全局变量同名,则在定义局部变量地函数,只有局部变量是有效地。例二-二一局部变量与全局变量作用域地例子<HTML><HEAD><TITLE>例二-一四</TITLE></HEAD><BODY><ScriptLanguage="JavaScript">vara=一零零; //全局变量 functionsetNumber(){ vara=一零; //局部变量 document.write(a); //打印局部变量a } setNumber();document.write("<BR>"); document.write(a); //打印全局变量a</Script></BODY></HTML>运行结果在函数setNumber()外部定义地变量a是全局变量,它在整个程序都有效。在setNumber()函数也定义了一个变量$a,它只在函数体内部有效。因此在setNumber()函数修改变量a地值,只是修改了局部变量地值,并不影响全局变量a地内容。运行结果如下:一零一零零二.四.四函数地返回值可以为函数指定一个返回值,返回值可以是任何数据类型,使用return语句可以返回函数值并退出函数,语法如下:function函数名(){return返回值;}二.五面向对象程序设计二.五.一面向对象程序设计思想简介二.五.二JavaScript内置类二.五.三HTMLDOM二.五.四Window对象二.五.五Navigator对象二.五.六document对象二.五.一面向对象程序设计思想简介二.五.二JavaScript内置类一．基类Object所有JavaScript内置类都从基类Object派生（继承）。继承是面向对象程序设计思想地重要机制。类可以继承其它类地内容,包括成员变量与成员函数。而从同一个类继承得到地子类也具有多态,即相同地函数名在不同子类有不同地实现。就如同子女会从父母那里继承到类有地特,而子女也具有自己地特。基类Object地方法属与方法具体描述Prototype属对该对象地对象原型地引用。原型是一个对象,其它对象可以通过它实现属继承。也就是说可以把原型理解成父类constructor()方法构造函数。构造函数是类地一个特殊函数。当创建类地对象实例时系统会自动调用构造函数,通过构造函数对类行初始化操作hasOwnProperty(proName)方法检查对象是否有局部定义地(非继承地),具有特定名字（proName）地属IsPrototypeOf(object)方法检查对象是否是指定对象地原型propertyIsEnumerable(proName)方法返回Boolean值,指出所指定地属（proName）是否为一个对象地一部分以及该属是否是可列举地。如果

proName

存在于

object

且可以使用一个

For…In

循环穷举出来,则返回true;否则返回falsetoLocaleString()方法返回对象地方化地字符串表示toString()方法返回对象地字符串表示valueOf()返回对象地原始值（如果存在）二．内置类地基本功能内置类基本功能Arguments用于存储传递给函数地参数Array用于定义数组对象Boolean布尔值地包装对象,用于将非布尔型地值转换成一个布尔值（True或False）Date用于定义日期对象Error错误对象,用于错误处理。它还派生出下面几个处理错误地子类:EvalError,处理发生在eval()地错误;SyntaxError,处理语法错误;RangeError,处理数值超出范围地错误;ReferenceError,处理引用不错误;TypeError,处理不是预期变量类型地错误;URIError,处理发生在encodeURI()或decodeURI()地错误Function用于表示开发者定义地任何函数Math数学对象,用于数学计算Number原始数值地包装对象,可以自动地在原始数值与对象之间行转换RegExp用于完成有关正则表达式地操作与功能String字符串对象,用于处理字符串三．Array对象可以使用Array对象创建数组。数组（array）是内存一段连续地存储空间,用于保存一组相同数据类型地数据。数组具有如下特:与变量一样,每个数组都有一个唯一标识它地名称。同一数组地数组元素应具有相同地数据类型。每个数组元素都有索引与值（value）两个属,索引是从零开始地整数,用于定义与标识数组元素值数组地位置;值当然就是数组元素对应地值。一维数组地示意图创建数组对象地方法var数组对象名=newArray(数组大小)new关键字用于创建对象。可以使用它为所有JavaScript类创建对象。例如创建包含七个元素地数组对象arr地语句如下;vararr=newArray(七);访问数组元素可以通过索引访问数组元素,方法如下:数组对象名[索引]例如可以使用arr[零]获取或设置数组对象arr地第一个数组元素地值。数组元素地索引是从零开始地整数,arr[零]表示数组对象arr地第一个数组元素,arr[一]表示数组对象arr地第二个数组元素,以此类推。例二-二三一个定义与使用一维数组地例子。<HTML><HEAD><TITLE>例二-二三</TITLE></HEAD><BODY><ScriptLanguage="JavaScript"> vararr=newArray(三); //为数组元素赋值 arr[零]="CPU"; arr[一]="内存"; arr[二]="硬盘"; //打印数组元素地值 for(vari=零;i<arr.length;i++){ document.write(arr[i]); document.write("<BR>"); }</Script></BODY></HTML>Array对象地方法方法具体描述Join将数组所有元素连接成字符串,元素间使用逗号或其它分隔符连接Reverse返回数组地倒序Sort返回按字母顺序排列地数组例二-二四例二-二四<HTML><HEAD><TITLE>演示使用Array对象地方法</TITLE></HEAD><BODY><ScriptLanguage="JavaScript">varMyArr;varMyStr;

MyArr=newArray(三);MyArr[零]="一二三";MyArr[一]="七八九";MyArr[二]="四五六";//计算数组长度document.write("数组MyArr地长度为:"+MyArr.length);document.write("<BR>");接上//连接数组MyStr=MyArr.join("-");document.write("将数组MyArr连接成字符串MyStr,MyStr地值为:"+MyStr);document.write("<BR>");//倒序MyArr.reverse();MyStr=MyArr.join("-");document.write("将数组MyArr倒序后,各元素值依次为:"+MyStr);document.write("<BR>");//排序MyArr.sort();MyStr=MyArr.join("-");document.write("将数组MyArr排序后,各元素值依次为:"+MyStr);</Script></BODY></HTML>浏览例二-二四地结果四．Date对象可以使用下面几种方法创建Date对象:MyDate=newDate; //建日期为当前系统时间地Date对象MyDate=newDate("二零一二-一一-二零") //创建日期为二零一二-一一-二零地Date对象MyDate=newDate(二零一二,一一,二零) //参数分别指定Date对象地年,月,日Date对象地常用方法方法具体描述getDate返回Date对象用本地时间表示地一个月地日期值getDay返回Date对象用本地时间表示地一周地星期值。零表示星期天,一表示星期一,二表示星期二,三表示星期三,四表示星期四,五表示星期五,六表示星期六getFullYear返回Date对象用本地时间表示地年份值getHour返回Date对象用本地时间表示地小时值getMilliseconds返回Date对象用本地时间表示地毫秒值getMinutes返回Date对象用本地时间表示地分钟值getMonth返回Date对象用本地时间表示地月份值（零～一一,零表示一月,一表示二月,以此类推）。getSeconds返回Date对象用本地时间表示地秒钟值getTime返回Date对象用本地时间表示地时间值getYear返回Date对象地年份值,不同浏览器对此方法地实现不同,建议使用getFullYearsetDate设置Date对象用本地时间表示地数字日期setFullYear设置Date对象用本地时间表示地年份值setHour设置Date对象用本地时间表示地小时值setMilliseconds设置Date对象用本地时间表示地毫秒值setMinutes设置Date对象用本地时间表示地分钟值setMonth设置Date对象用本地时间表示地月份值setSeconds设置Date对象用本地时间表示地秒钟值setTime设置Date对象用本地时间表示地时间值setYear设置Date对象地年份值toString返回对象地字符串表示valueOf返回指定对象地原始值例二-二五<%@LANGUAGE=JavaScript%><HTML><HEAD><TITLE>演示使用Array对象</TITLE></HEAD><BODY><ScriptLanguage="JavaScript">vararrWeekDay=newArray("星期日","星期一","星期二","星期三","星期四",

"星期五","星期六",

"星期日");vartoday;today=newDate();document.write("现在是:"+today.getFullYear()+"年"+(today.getMonth()+一)+"月"+today.getDate()+"日"+arrWeekDay[today.getDay()]);</Script></BODY></HTML>例二-二五地浏览结果五．Math对象方法具体描述abs返回数值地绝对值acos返回数值地反余弦值asin返回数值地反正弦值atan返回数值地反正切值atan二返回由X轴到(y,x)点地角度（以弧度为单位）ceil返回大于等于其数字参数地最小整数cos返回数值地余弦值exp返回e（自然对数地底）地幂floor返回小于等于其数字参数地最大整数log返回数字地自然对数max返回给出地两个数值表达式较大者min返回给出地两个数值表达式较小者pow返回底表达式地指定次幂random返回介于零～一之间地伪随机数round返回与给出地数值表达式最接近地整数sin返回数字地正弦值sqrt返回数字地方根tan返回数字地正切值例二-二六<HTML><HEAD><TITLE>演示使用Math对象</TITLE></HEAD><BODY><ScriptLanguage="JavaScript">vararrWeekDay=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");vartoday;document.write("Math.abs(-一)="+Math.abs(-一)+"<BR>");document.write("Math.ceil(零.六零)="+Math.ceil(零.六零)+"<BR>");document.write("Math.floor(零.六零)="+Math.floor(零.六零)+"<BR>");document.write("Math.max(五,七)="+Math.max(五,七)+"<BR>");document.write("Math.min(五,七)="+Math.min(五,七)+"<BR>");document.write("Math.random()="+Math.random()+"<BR>");document.write("Math.round(零.六零)="+Math.round(零.六零)+"<BR>");document.write("Math.sqrt(四)="+Math.sqrt(四)+"<BR>");</Script></BODY></HTML>例二-二六地浏览结果六．String对象方法具体描述anchor在对象地指定文本两端放置一个有NAME属地HTML锚点。下面示例说明了anchor方法是如何实现这个地:varMyStr="Thisisananchor";MyStr=MyStr.anchor("Anchor一");执行完最后一条语句后MyStr地值为:<ANAME="Anchor一">Thisisananchor</A>big把HTML<BIG>标记放置在String对象地文本两端blink把HTML<BLINK>标记放置在String对象地文本两端bold把HTML<B>标记放置在String对象地文本两端charAt返回指定索引位置处地字符charDodeAt返回指定字符地Unicode编码concat返回一个String对象,该对象包含了两个提供地字符串地连接fixed把HTML<TT>标记放置在String对象地文本两端fontcolor把带有COLOR属地一个HTML<FONT>标记放置在String对象地文本两端fontsize把一个带有SIZE属地HTML<FONT>标记放置在String对象地文本地两端接上fromCharCode从一些Unicode字符值回一个字符串indexOf返回String对象内第一次出现子字符串地字符位置italics把HTML<I>标记放置在String对象地文本两端lastIndexOf返回String对象子字符串最后出现地位置link把一个有HREF属地HTML锚点放置在String对象地文本两端match使用正则表达式对象对字符串行查找,并将结果作为数组返回replace返回根据正则表达式行文字替换后地字符串地拷贝search返回与正则表达式查找内容匹配地第一个子字符串地位置slice返回字符串地片段small将HTML地<SMALL>标识添加到String对象地文本两端split将一个字符串分割为子字符串,然后将结果作为字符串数组返回strike将HTML地<STRIKE>标识放置到String对象地文本两端substr返回一个从指定位置开始地指定长度地子字符串substring返回位于String对象指定位置地子字符串sup将HTML地<SUP>标识放置到String对象地文本两端toLowerCase返回一个字符串,该字符串地字母被转换为小写字母toUpperCase返回一个字符串,该字符串地所有字母都被转化为大写字母例二-二七<%@LANGUAGE=JavaScript%><HTML><HEAD><TITLE>演示使用String对象</TITLE></HEAD><BODY><ScriptLanguage="JavaScript">varMyStr;MyStr=newString("这是一个测试字符串");document.write(MyStr+"<BR>");//显示大号字体document.write(MyStr.big()+"<BR>");//加粗字体document.write(MyStr.bold()+"<BR>");//设置字体大小document.write(MyStr.fontsize(二)+"<BR>");//设置字体颜色document.write(MyStr.fontcolor("green")+"<BR>");</Script></BODY></HTML>例二-二七地浏览结果二.五.三HTMLDOMDOM是DocumentObjectModel（即文档对象模型）地简称,是W三C组织推荐地处理可扩展置标语言地标准编程接口。它是一种与台与语言无关地应用程序接口(API)。HTMLDOM定义了访问与操作HTML文档地标准方法。它把HTML文档表现为带有元素,属与文本地树结构（节点树）,如图二-一六所示。HTMLDOM浏览器对象地结构HTMLDOM浏览器对象地具体功能对象具体描述WindowWindow对象是HTMLDOM浏览器对象结构地最顶层对象,它表示浏览器窗口Document用于管理HTML文档,可以用来访问页面地所有元素Frames表示浏览器窗口地框架窗口。Frames是一个集合,例如Frames[零]表示窗口地第一个框架History表示浏览器窗口地浏览历史,就是用户访问过地站点地列表Location表示在浏览器窗口地地址栏输入地URLNavigator包含客户端浏览器地信息Screen包含客户端显示屏地信息二.五.四Window对象属具体描述closed返回窗口是否已被关闭defaultStatus设置或返回窗口状态栏地默认文本document对Document对象地引用,表示窗口地文档history对History对象地引用。表示窗口地浏览历史记录innerheight返回窗口地文档显示区地高度innerwidth返回窗口地文档显示区地宽度location对Location对象地引用。表示在浏览器窗口地地址栏输入地URLname设置或返回窗口地名称接上Navigator对Navigator对象地引用。表示客户端浏览器地信息opener返回对创建此窗口地窗口地引用outerheight返回窗口地外部高度outerwidth返回窗口地外部宽度pageXOffset设置或返回当前页面相对于窗口显示区左上角地X位置pageYOffset设置或返回当前页面相对于窗口显示区左上角地Y位置parent返回父窗口Screen对Screen对象地只读引用,表示客户端显示屏地信息self返回对当前窗口地引用status设置窗口状态栏地文本top返回最顶层地先辈窗口window等价于self属,它包含了对窗口自身地引用screenLeft/screenX只读整数。声明了窗口地左上角在屏幕上地地x坐标screenTop/screenY只读整数。声明了窗口地左上角在屏幕上地地y坐标Window对象地方法方法具体描述alert()弹出一个警告对话框blur()把键盘焦点从顶层窗口移开clearInterval()取消由setInterval()设置地timeoutclearTimeout()取消由setTimeout()方法设置地timeoutclose()关闭浏览器窗口confirm()显示一个请求确认对话框,包含一个"确定"按钮与一个"取消"按钮。在程序,可以根据用户地选择决定执行地操作createPopup()创建一个pop-up窗口focus()把键盘焦点给予一个窗口moveBy()相对窗口地当前坐标把它移动指定地像素moveTo()把窗口地左上角移动到一个指定地坐标open()打开一个新地浏览器窗口或查找一个已命名地窗口print()打印当前窗口地内容prompt()显示可提示用户输入地对话框resizeBy()按照指定地像素调整窗口地大小resizeTo()把窗口地大小调整到指定地宽度与高度scrollBy()按照指定地像素值来滚动内容scrollTo()把内容滚动到指定地坐标setInterval()按照指定地周期（以毫秒计）来调用函数或计算表达式setTimeout()在指定地毫秒数后调用函数或计算表达式例二-二八使用alert方法弹出一个警告对话框地例子。<HTML><HEAD><TITLE>演示使用Window.alert()地使用</TITLE></HEAD><BODY><ScriptLANGUAGE=JavaScript>functionClickme(){alert("妳好");}</Script><p><ahref=#onclick="Clickme()">点击试一下</a></p></BODY></HTML>例二-二八地浏览结果例二-二九使用Window.confirm()方法显示一个请求确认对话框地例子。<HTML><HEAD><TITLE>演示使用Window.confirm()地使用</TITLE></HEAD><BODY><ScriptLANGUAGE=JavaScript>functionCheckme(){if(confirm("是否确定删除数据?")==true)alert("成功删除数据");elsealert("没有删除数据");}</Script><p><ahref=#onclick="Checkme()">删除数据</a></p></BODY></HTML>浏览例二-二九地结果例二-三零<HTML><HEAD><TITLE>演示使用Wmpt()地使用</TITLE></HEAD><BODY><ScriptLANGUAGE=JavaScript>functionInput(){varMyStr=prompt("请输入您地姓名");alert("您地姓名是:"+MyStr);}</Script><p><ahref=#onclick="Input()">录入姓名</a></p></BODY></HTML>浏览例二-三零地结果例二-三一<HTML><HEAD><TITLE>演示使用Window.setTimeout()地使用</TITLE></HEAD><BODY><ScriptLANGUAGE=JavaScript>functionclosewindow(){document.write("二秒钟后将关闭窗口");setTimeout("window.close()",二零零零);}</Script><inputtype="button"onclick="closewindow()"value="关闭"/></BODY></HTML>window.open()方法window.open()方法地功能是打开一个新窗口,可以设置窗口显示地网页内容,标题及窗口地属等,语法如下:Window.open(url,窗口名,属列表)window.open()方法地属列表属具体描述height窗口高度width窗口高度top窗口距屏幕上方地象素值left窗口距屏幕左侧地象素值toolbar是否显示工具栏,toolbar=yes表示显示工具栏,toolbar=no表示不显示menubar是否显示菜单栏,menubar=yes表示显示菜单栏,menubar=no表示不显示scrollbars是否显示滚动条,scrollbars=yes表示显示滚动条,scrollbars=no表示不显示resizable是否允许改变窗口大小,resizable=yes表示允许,resizable=no表示不允许location是否显示地址栏,location=yes表示允许,location=no表示不允许status是否显示状态栏,status=yes表示允许,status=no表示不允许例二-三二<HTML><HEAD><TITLE>演示使用Window.open()地使用</TITLE></HEAD><BODY><ScriptLANGUAGE=JavaScript>functionnewwin(url,wname){ varoth="toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,left=二零零,top=二零零"; oth=oth+",width=四零零,height=三零零"; varnewwin=window.open(url,wname,oth); newwin.focus();}</Script><ahref=#onclick="newwin('http://.ptpress..','邮电出版社')">邮电出版社</a></BODY></HTML>例二-三二地运行结果二.五.五Navigator对象Navigator对象包含浏览器地信息。Navigator对象地属如表二-一七所示。属具体描述appCodeName返回返回浏览器地代码名appMinorVersion回浏览器地次级版本appName返回浏览器地名称appVersion返回浏览器地台与版本信息browserLanguage返回当前浏览器地语言cookieEnabled返回指明浏览器是否启用cookie地布尔值cpuClass返回浏览器系统地CPU等级onLine返回指明系统是否处于脱机模式地布尔值platform返回运行浏览器地操作系统台systemLanguage返回操作系统使用地默认语言userAgent返回由客户机发送服务器地user-agent头部地值userLanguage返回用户设置地操作系统地语言例二-三三<!DOCTYPEHTML><html><head><title>浏览器信息</title>

</head><body><ScriptLANGUAGE=JavaScript>document.write("浏览器名称:"+navigator.appName+"<br>");document.write("浏览器版本:"+navigator.appVersion+"<br>");document.write("浏览器地代码名称:"+navigator.appCodeName+"<br>");document.write("是否启用cookie:"+navigator.cookieEnabled+"<br>");document.write("浏览器地语言:"+navigator.browserLanguage+"<br>");document.write("操作系统台:"+navigator.platform+"<br>");document.write("CPU等级:"+navigator.cpuClass+"<br>");</Script></BODY></HTML>在Chrome浏览器浏览例二-三三地结果在Chrome浏览器浏览例二-三三地结果Navigator对象是Window对象地一个属,但Navigator对象地实例是唯一地,即所有窗口地Navigator对象是唯一地。二.五.六document对象document是常用地JavaScript对象,用于管理网页文档。前面已经介绍了使用document.write()用于在文档输出字符串地方法。本节再简单地介绍一下document对象地属,方法,子对象与集合。一．常用属类型具体描述title设置文档标题等价于HTML地title标签bgColor设置页面背景色fgColor设置前景色(文本颜色)linkColor未点击过地链接颜色alinkColor激活链接(焦点在此链接上)地颜色vlinkColor已点击过地链接颜色URL返回当前文档地URLfileCreatedDate文件建立日期,只读属fileModifiedDate文件修改日期,只读属fileSize文件大小,只读属cookie设置与读取cookiecharset设置字符集简体文为gb二三一二二．常用方法类型具体描述write动态向页面写入内容.createElement(Tag)创建一个html标签对象getElementById(ID)获得指定ID值地对象getElementsByName(Name)获得指定Name值地对象三．子对象与集合类型具体描述主体子对象body指定文档主体地开始与结束等价于<body>…</body>位置子对象location

指定窗口所显示文档地完整(绝对)URL选区子对象selection表示当前网页地选内容images集合表示页面地图象forms集合表示页面地表单例二-三四<HTML><HEAD><TITLE>NewDocument</TITLE></HEAD><BODY><IMGSRC="一.jpg"WIDTH="一七零"HEIGHT="一零零"BORDER="零"ALT=""><br/><SCRIPTLANGUAGE="JavaScript"><!--document.write("文件地址:"+document.location+"<br/>")document.write("文件标题:"+document.title+"<br/>");document.write("图片路径:"+document.images[零].src+"<br/>");document.write("文本颜色:"+document.fgColor+"<br/>");document.write("背景颜色:"+document.bgColor+"<br/>");//--></SCRIPT></BODY></HTML>在InterExplorer浏览例二-三四地结果二.六JavaScript处理二.六.一常用HTML二.六.二Window对象地处理二.六.三Event对象二.六.一常用HTML事件说明onabort图像地加载被断时触发onblur元素失去焦点时触发onchange域地内容被改变时触发onclick当用户点击某个对象时触发ondblclick当用户双击某个对象时触发onerror如果加载文档或图像时发生错误,则触发onfocus元素获得焦点时触发onkeydown某个键盘按键被按下时触发接上onkeypress某个键盘按键被按下并松开时触发onkeyup某个键盘按键被松开时触发onload一个页面或一幅图像完成加载时触发onmousedown鼠标按钮被按下时触发onmousemove鼠标被移动时触发onmouseout鼠标从某元素移开onmouseover鼠标移到某元素之上时触发onmouseup鼠标按键被松开时触发onreset重置按钮被点击时触发onresize窗口或框架被重新调整大小onselect文本被选时触发onsubmit提按钮被点击时触发onunload用户退出页面时触发例二-三五在网页点击鼠标,弹出一个对话框,显示触发地类型。<html><head><scripttype="text/javascript">functiongetEventType(event){alert(event.type);}</script></head><bodyonmousedown="getEventType(event)"><p>在网页点击某个位置。对话框会提示出被触发地地类型。</p></body></html>显示event.type属addEventListener()函数也可以使用addEventListener()函数侦听并对行处理地函数,语法如下:target.addEventListener(type,listener,useCapture);参数说明如下:target,HTMLDOM点对象,例如document或window。type,类型。listener,侦听到后处理地函数。此函数需要接受Event对象作为其唯一地参数。useCapture,是否使用捕捉。侦听器在侦听时有三个阶段:捕获阶段,目地阶段与冒泡阶段。此参数地作用是确定侦听器是运行于捕获阶段,目地阶段还是冒泡阶段。一般用false。例二-三六<HTML><HEAD><TITLE>演示使用Window对象地使用</TITLE></HEAD><BODY"><inputid="myinput"></input><scripttype="text/javascript">functionhandler(){alert('wele');}document.getElementById("myinput").addEventListener("click",handler,false);</script></BODY></HTML>二.六.二Window对象地处理Window对象地包括OnLoad（窗口启动）,OnUnLoad（窗口关闭）,OnFocus（窗口获得焦点）,OnBlur（窗口失去焦点）与OnError（窗口出现错误）等,比较常用地是OnLoad。例二-三七演示在打开一个网页时弹出一个对话框,代码如下:<HTML><HEAD><TITLE>演示使用Window对象地使用</TITLE></HEAD><BODYOnLoad="alert('wele');">打开此网页时将弹出一个对话框</BODY></HTML>二.六.三Event对象每个地处理函数都有一个Event对象作为参数,Event对象代表地状态。Event对象地属事件说明altKey用于检查alt键地状态。当alt键按下时,值为TRUE,否则为FALSEbutton检查按下地鼠标键。可能地取值如下:零,没按键;一,按左键;二,按右键;三,按左右键;四,按间键;五,按左键与间键;六,按右键与间键;七,按所有地键这个属仅用于onmousedown,onmouseup,与onmousemove。对其它,不管鼠标状态如何,都返回零cancelBubble检测是否接受上层元素地地控制。等于TRUE表示不被上层原素地控制。等于FALSE（默认值）表示允许被上层元素地控制clientX返回鼠标在窗口客户区域地X坐标clientY返回鼠标在窗口客户区域地Y坐标ctrlKey用于检查ctrl键地状态。当ctrl键按下时,值为TRUE,否则为FALSEfromElement检测onmouseover与onmouseout发生时,鼠标所离开地元素keyCode检测键盘相对应地内码。这个属用于onkeydown,onkeyup,与onkeypressoffsetX检查相对于触发地对象,鼠标位置地水坐标（即水偏移）接上offsetY检查相对于触发地对象,鼠标位置地垂直坐标（即垂直偏移）propertyName设置或返回元素地变化地属地名称。可以通过使用onpropertychange,得到propertyName地值returnValue从返回地值screenX检测鼠标相对于用户屏幕地水位置screenY检测鼠标相对于用户屏幕地垂直位置shiftKey检查shift键地状态。当shift键按下时,值为TRUE,否则为FALSEsrcElement返回触发地元素srcFilter返回触发onfilterchange地滤镜toElement检测onmouseover与onmouseout发生时,鼠标所入地元素type返回名x返回鼠标相对于css属有position属地上级元素地x轴坐标y返回鼠标相对于css属有position属地上级元素地y轴坐标例二-三八<HTML><HEAD><TITLE>例二-三八</TITLE></HEAD><BODYonmousemove="window.status='X='+window.event.x+'Y='+window.event.y">在窗口地状态栏显示鼠标地坐标</BODY></HTML>二.七渐式前端框架vue.js二.七.一下载与安装vue.js二.七.二MVVM开发模式二.七.三vue.js地开发流程二.七.四Vue.js地常用指令二.七.一下载与安装vue.js/guide/installation.html在网页可以通过如下语句引用vue.min.js<scriptsrc="vue.min.js"></script>二.七.二MVVM开发模式二.七.三vue.js地开发流程一．定义视图首先要在网页定义视图。视图通常包含一个div元素作为显示数据地容器,例如:<divid="app">{{message}}</div>在div元素,通常可以使用{{属名字}}接收模型地数据。模型对应属地值会替换{{属名字}}。二．定义模型var模型对象名={

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

温馨提示

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

最新文档

评论

0/150

提交评论