javascript基础入门-课件

上传人：9*** IP属地：贵州上传时间：2024-04-01 格式：PPT 页数：117 大小：618.52KB 积分：25 举报 版权申诉

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

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

文档简介

JavaScriptjavascript基础入门ppt课件2021/3/261JavaScriptjavascript基础入门ppt课件主要内容了解JavaScriptJavaScript入门语言基础内置对象对象与DOM图像处理框架表单与事件处理javascript基础入门ppt课件2021/3/262主要内容了解JavaScriptjavascript基础入门一、了解JavaScript

1.了解JavaScript2.JavaScript与Java3.JavaScript与Java不同点

4.JavaScript工作流程

5.JavaScript可以做什么

6.JavaScript不可以做什么javascript基础入门ppt课件2021/3/263一、了解JavaScript1.了解JavaScr了解JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。页面标准行为表示CSS结构HTML……javascript基础入门ppt课件2021/3/264了解JavaScript是一种基于对象和事件驱动并具有安全性JavaScript与Java处于两家不同的公司，属于两种完全不同的产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合Internet应用程序开发，前生是Oak语言。JavaScript是Netscape公司的产品，是一种可嵌入到WEB当中的基于对象和事件驱动的解释性语言，前生是LiveScript。javascript基础入门ppt课件2021/3/265JavaScript与Java处于两家不同的公司，属于两种完JavaScript与Java不同点基于对象和面向对象解释和编译强变量和弱变量代码格式不一样嵌入方式不一样静态联编和动态联编

（对象引用在运行时进行检查，对象引用必须在编译时的进行）javascript基础入门ppt课件2021/3/266JavaScript与Java不同点基于对象和面向对象jaJavaScirpt可以做什么使网页更具有交互性，给用户提供更好，更令人兴奋的体验。确保用户在表单中输入有效的信息，可以节省你的业务开支。即时创建HTML页面。还可以处理表单，设置cookie，创建基于Web的应用程序。javascript基础入门ppt课件2021/3/267JavaScirpt可以做什么使网页更具有交互性，给用户提供JavaScirpt不可以做什么不允许读写客户机器上的文件。不允许写服务器上的文件。不能关闭不是由它打开的窗口。不能从来自另一个服务器的已经打开的网页中读取信息。javascript基础入门ppt课件2021/3/268JavaScirpt不可以做什么不允许读写客户机器上的文件。二.JavaScript入门1.脚本写在哪里？2.第一个JavaScript程序3.在脚本中写注释4.弹出对话框5.关闭一个浏览器窗口javascript基础入门ppt课件2021/3/269二.JavaScript入门1.脚本写在哪里？javascr

脚本写在哪里？

<HTML><HEAD>……...</HEAD><BOYD>……...</BODY></HTML>HTML文档<SCRPT>functionHELLO(){………….}</SCRIPT>src=…javascript基础入门ppt课件2021/3/2610脚本写在哪里？HTML文档<SCRPT>sr第一个JavaScript程序<html><body><scripttype="text/javascript">document.write("HelloWorld!");</script></body></html>javascript基础入门ppt课件2021/3/2611第一个JavaScript程序<html>javascrip在脚本中写注释两种注释示例/*…*/与//…/*ThisisanexampleofalongJavaScriptcomment.Notethecharactersatthebeginningendingofthecomment.*/FunctionEmg(){//ThisiswriteMessage.……}javascript基础入门ppt课件2021/3/2612在脚本中写注释两种注释示例/*…*/与//…jav弹出对话框三种对话框

——常量2.基本数据类型——变量3.转义字符4.表达式5.运算符6.控制语句7.JavaScript函数8.错误处理javascript基础入门ppt课件2021/3/2615三.语言基础1.基本数据类型——常量javascript基基本数据类型

——常量

整型只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“123”。十六进制则是加“0x”：“0xEF”表示十六进制数“EF”。浮点型即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。字符串型是用引号“”“”、“‘’”包起来的零个至多个字符，而且单双引号可嵌套使用。布尔型常用于判断，只有两个值可选：true（表“真”）和false（表“假”）。true和false是JavaScript的保留字。它们属于“常数”。javascript基础入门ppt课件2021/3/2616基本数据类型——常量javascript基础入门pp基本数据类型——变量变量的命名

变量的命名有以下要求：

1.只包含字母、数字和/或下划线；

2.要以字母开头；

3.不能太长；

4.不能使用JavaScript中的关键字作为变量；变量是区分大小写的，例如，variable和Variable是两个不同的变量变量需要声明没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用：

var<变量>[=<值>]变量作用域。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。

javascript基础入门ppt课件2021/3/2617基本数据类型——变量变量的命名变量的命名有以下要求：jav转义字符由于一些字符在屏幕上不能显示，或者JavaScript语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。

转义字符用斜杠“\”开头：\‘

单引号、\“

双引号、\n换行符、\r回车。于是，使用转义字符，就可以做到引号多重嵌套：’Micro说：”这里是\“JavaScript教程\”

。

javascript基础入门ppt课件2021/3/2618转义字符由于一些字符在屏幕上不能显示，或者JavaScri表达式表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。

varm=1+9;varm=“hello”+”world”;varm=100;varm=false;javascript基础入门ppt课件2021/3/2619表达式表达式在定义完变量后，就可以对它们进行赋值、改变、计算运算符

1算术运算符

JavaScript中的算术运算符有单目运算符和双目运算符。

双目运算符：

+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位与)、<<（左移）、>>（右移）、>>>（右移，零填充）。

单目运算符：

-（取反）、~（取补）、++（递加1）、--（递减1）。2比较运算符

比较运算符它的基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或False值，有８个比较运算符:

<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。

3布尔逻辑运算符

!（取反)、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、|（逻辑或）、^=（异或之后赋值）、^（逻辑异或）、?:（三目操作符）、||（或）、==(等于)、|=(不等于)。javascript基础入门ppt课件2021/3/2620运算符1算术运算符

JavaScript中的算术运算符有单控制语句第一种是选择结构1.单一选择结构（if）2.二路选择结构（if/else）3.内联三元运算符?:4.多路选择结构（switch）第二种类型的程序控制结构是循环结构。1.由计数器控制的循环（for）2.在循环的开头测试表达式（while）3.在循环的末尾测试表达式（do/while）4.对对象的每个属性都进行操作（for/in）javascript基础入门ppt课件2021/3/2621控制语句第一种是选择结构javascript基础入门ppt条件语句基本格式

if（表述式）

语句段１；

else

语句段２；

功能：若表达式为true，则执行语句段１；否则执行语句段２。

javascript基础入门ppt课件2021/3/2622条件语句基本格式

if（表述式）

语句段１；

三元运算符基本格式条件表达式“?<语句1>:<语句2>”，当<条件>为真时执行<语句1>，否则执行<语句2>

eg：varm=5;varn=3;varbol=(m>n)?m:n;javascript基础入门ppt课件2021/3/2623三元运算符基本格式javascript基础入门ppt课件2多目选择基本格式——解决多种条件判断

switch(e){

caser1:（注意：冒号）

...

break;

caser2:

...

break;

[default:

...]

}javascript基础入门ppt课件2021/3/2624多目选择基本格式——解决多种条件判断javascript基础循环语句for基本格式

for（初始化；条件；增量）

{语句集；}

功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体

javascript基础入门ppt课件2021/3/2625循环语句for基本格式

for（初始化；条件；增量）

{语句循环语句while基本格式

while（条件）

语句集；

该语句与For语句一样，当条件为真时，重复循环，否则退出循环。*break和continue语句

与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。

javascript基础入门ppt课件2021/3/2626循环语句while基本格式

while（条件）

语句集；

该do-while循环基本格式

do{……}while(条件);

功能：do...while循环与while循环相似，在循环的末尾检查条件，它总是至少运行一次。javascript基础入门ppt课件2021/3/2627do-while循环基本格式javascript基础入门pfor…in循环JScript提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in循环中的循环计数器是一个字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下标。

//创建具有某些属性的对象

varmyObject=newObject(); myO="James"; myObject.age="22"; myObject.phone="5551234"; //枚举（循环）对象的所有属性

for(propinmyObject){//显示"Theproperty'name'isJames"，等等。

window.alert("Theproperty'"+prop+"'is"+myObject[prop]);}javascript基础入门ppt课件2021/3/2628for…in循环JScript提供了一种特别的循环方式来遍JavaScript函数Function函数名（参数,变元）{

函数体;.

Return表达式;

}

说明：

当调用函数时,所用变量或字面量均可作为变元传递。

函数由关键字Function定义。

函数名：定义自己函数的名字。

参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

通过指定函数名（实参）来调用一个函数。

必须使用Return将值返回。

函数名对大小写是敏感的javascript基础入门ppt课件2021/3/2629JavaScript函数Function函数名（参数,变JavaScript函数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.Length来检查参数的个数。

Functionfunction_Name(exp1,exp2,exp3,exp4){ Number=function_Name.arguments.length; if(Number>1）

document.wrile(exp2); if(Number>2) document.write(exp3); if(Number>3) document.write(exp4); }javascript基础入门ppt课件2021/3/2630JavaScript函数在函数的定义中，我们看到函数名后有参错误处理基本语句try/throw/catchtry{

语句块…thrownewError(“…”);}catch(errMsg){alert(errMsg.message);}eg:functionAge(){try{ varm="age";varn=20;document.write(parseInt(m)+n);//抛出语句

thrownewError("notavalidnumber"); }catch(errMsg){alert(errMsg.message);}}javascript基础入门ppt课件2021/3/2631错误处理基本语句try/throw/catcheg:ja四、内置对象1.对象化编程2.对象的基本知识3.内置对象4.String字符串5.Array数组6.Math7.Date日期8.全局对象9.自定义构造函数10.自定义对象11.expando属性12使用原型对象13.数组对象14.With语句javascript基础入门ppt课件2021/3/2632四、内置对象1.对象化编程8.全局对象javascript基对象化编程JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文文件。javascript基础入门ppt课件2021/3/2633对象化编程JavaScript语言是基于对象的（Object对象的基本知识对象是可以从JavaScript“势力范围”中划分出来的一小块，可以是一段文字、一幅图片、一个表单（Form）等等。每个对象有它自己的属性、方法和事件。对象的属性是反映该对象某些特定的性质的，例如：字符串的长度、图像的长宽、文字框（Textbox）里的文字等等；对象的方法能对该对象做一些事情，例如，表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等等；而对象的事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击连接产生的“点击事件”。不是所有的对象都有以上三个性质，有些没有事件，有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。javascript基础入门ppt课件2021/3/2634对象的基本知识对象是可以从JavaScript“势力范围”内置对象MicrosoftJscript提供了11个内部（或“内置”）对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error以及String对象。每一个对象有相关的方法和属性，这在语言参考中有详细的描述。javascript基础入门ppt课件2021/3/2635内置对象MicrosoftJscript提供了11个String字符串属性length

用法：<字符串对象>.length；返回该字符串的长度。方法charAt()

用法：<字符串对象>.charAt(<位置>)；返回该字符串位于第<位置>位的单个字符。注意：字符串中的一个字符是第0位的，第二个才是第1位的，最后一个字符是第length-1位的。

charCodeAt()

用法：<字符串对象>.charCodeAt(<位置>)；返回该字符串位于第<位置>位的单个字符的ASCII码。

fromCharCode()

用法：String.fromCharCode(a,b,c...)；返回一个字符串，该字符串每个字符的ASCII码由a,b,c...等来确定。

javascript基础入门ppt课件2021/3/2636String字符串属性javascript基础入门ppt课String字符串indexOf()

用法：<字符串对象>.indexOf(<另一个字符串对象>[,<起始位置>])；该方法从<字符串对象>中查找<另一个字符串对象>（如果给出<起始位置>就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。

lastIndexOf()

用法：<字符串对象>.lastIndexOf(<另一个字符串对象>[,<起始位置>])；跟indexOf()相似，不过是从后边开始找。

split()

用法：<字符串对象>.split(<分隔符字符>)；返回一个数组，该数组是从<字符串对象>中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。关于数组，我们等一下就讨论。

javascript基础入门ppt课件2021/3/2637String字符串indexOf()用法：<字符串对象>.String字符串substring()

用法：<字符串对象>.substring(<始>[,<终>])；返回原字符串的子字符串，该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终>-<始>=返回字符串的长度（length）。如果没有指定<终>或指定得超过字符串长度，则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串，则返回空字符串。

substr()

用法：<字符串对象>.substr(<始>[,<长>])；返回原字符串的子字符串，该字符串是原字符串从<始>位置开始，长度为<长>的一段。如果没有指定<长>或指定得超过字符串长度，则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串，则返回空字符串。

toLowerCase()

用法：<字符串对象>.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。

toUpperCase()

用法：<字符串对象>.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。javascript基础入门ppt课件2021/3/2638String字符串substring()用法：<字符串对象Array数组数组的定义方法：var<数组名>=newArray();这样就定义了一个空数组。以后要添加数组元素，就用：<数组名>[<下标>]=...;注意这里的方括号不是“可以省略”的意思，数组的下标表示方法就是用方括号括起来。如果想在定义数组的时候直接初始化数据，请用：var<数组名>=newArray(<元素1>,<元素2>,<元素3>...);javascript基础入门ppt课件2021/3/2639Array数组数组的定义方法：javascript基础入门Array数组例如，varmyArray=newArray(1,4.5,‘Hi’);定义了一个数组myArray，里边的元素是：myArray[0]==1;myArray[1]==4.5;myArray[2]==‘Hi’。但是，如果元素列表中只有一个元素，而这个元素又是一个正整数的话，这将定义一个包含<正整数>个空元素的数组。注意：JavaScript只有一维数组！千万不要用“Array(3,4)”这种愚蠢的方法来定义4x5的二维数组，或者用“myArray[2,3]”这种方法来返回“二维数组”中的元素。任意“myArray[...,3]”这种形式的调用其实只返回了“myArray[3]”。要使用多维数组，请用这种虚拟法：varmyArray=newArray(newArray(),newArray(),newArray(),...);其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”的元素时：myArray[2][3]=...;javascript基础入门ppt课件2021/3/2640Array数组例如，varmyArray=newArArray数组属性length

用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要：myArray[myArray.length]=...。方法join()

用法：<数组对象>.join(<分隔符>)；返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

reverse()

用法：<数组对象>.reverse()；使数组中的元素顺序反过来。如果对数组[1,2,3]使用这个方法，它将使数组变成：[3,2,1]。

slice()

用法：<数组对象>.slice(<始>[,<终>])；返回一个数组，该数组是原数组的子集，始于<始>，终于<终>。如果不给出<终>，则子集一直取到原数组的结尾。

sort()

用法：<数组对象>.sort([<方法函数>])；使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。在这种情况下，80是比9排得前的。如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。<方法函数>比较难讲述，这里只将一些有用的<方法函数>介绍给大家。javascript基础入门ppt课件2021/3/2641Array数组属性javascript基础入门ppt课件2mathMath对象，提供对数据的数学计算。用法为“Math.<名>”这种格式。属性E返回常数e(2.718281828...)。LN2返回2的自然对数(ln2)。LN10返回10的自然对数(ln10)。LOG2E返回以2为低的e的对数(log2e)。LOG10E返回以10为低的e的对数(log10e)。PI返回π（3.1415926535...)。SQRT1_2返回1/2的平方根。SQRT2返回2的平方根。javascript基础入门ppt课件2021/3/2642mathMath对象，提供对数据的数学计算。用法为“Mmath方法abs(x)返回x的绝对值。

acos(x)返回x的反余弦值（余弦值等于x的角度），用弧度表示。

asin(x)返回x的反正弦值。

atan(x)返回x的反正切值。

atan2(x,y)返回复平面内点(x,y)对应的复数的幅角，用弧度表示，其值在-π到π之间。

ceil(x)返回大于等于x的最小整数。

cos(x)返回x的余弦。

exp(x)返回e的x次幂(ex)。

floor(x)返回小于等于x的最大整数。

javascript基础入门ppt课件2021/3/2643math方法javascript基础入门ppt课件2021mathlog(x)返回x的自然对数(lnx)。

max(a,b)返回a,b中较大的数。

min(a,b)返回a,b中较小的数。

pow(n,m)返回n的m次幂(nm)。

random()返回大于0小于1的一个随机数。

round(x)返回x四舍五入后的值。

sin(x)返回x的正弦。

sqrt(x)返回x的平方根。

tan(x)返回x的正切。

javascript基础入门ppt课件2021/3/2644mathlog(x)返回x的自然对数(lnx)。

Date日期这个对象可以储存任意一个日期，从0001年到9999年，并且可以精确到毫秒数（1/1000秒）。在内部，日期对象是一个整数，它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比1970年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。定义一个日期对象：

vard=newDate();

这个方法使d成为日期对象，并且已有初始值：当前时间。javascript基础入门ppt课件2021/3/2645Date日期这个对象可以储存任意一个日期，从0001年到Date日期如果要自定初始值，可以用：

vard=newDate(99,10,1);

//99年10月1日

vard=newDate('Oct1,1999');//99年10月1日等等方法。方法以下有很多“g/set[UTC]XXX”这样的方法，它表示既有“getXXX”方法，又有“setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有“UTC”字母，则表示获得/设定的数值是基于UTC时间的，没有则表示基于本地时间或浏览期默认时间的。javascript基础入门ppt课件2021/3/2646Date日期如果要自定初始值，可以用：javascript基Date日期g/set[UTC]FullYear()

返回/设置年份，用四位数表示。如果使用“x.set[UTC]FullYear(99)”，则年份被设定为0099年。g/set[UTC]Year()返回/设置年份，用两位数表示。设定的时候浏览器自动加上“19”开头，故使用“x.set[UTC]Year(00)”把年份设定为1900年。g/set[UTC]Month()返回/设置月份。g/set[UTC]Date()返回/设置日期。g/set[UTC]Day()返回/设置星期，0表示星期天。g/set[UTC]Hours()返回/设置小时数，24小时制。g/set[UTC]Minutes()返回/设置分钟数。g/set[UTC]Seconds()返回/设置秒钟数。g/set[UTC]Milliseconds()返回/设置毫秒数。

javascript基础入门ppt课件2021/3/2647Date日期g/set[UTC]FullYear()返回/Date日期g/setTime()

返回/设置时间，该时间就是日期对象的内部处理方法：从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟1小时，就用：“x.setTime(x.getTime()+60*60*1000);”（一小时60分，一分60秒，一秒1000毫秒）。getTimezoneOffset()

返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。toString()

返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“FriJul2115:43:46UTC+08002000”。toLocaleString()

返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-2115:43:46”。toGMTString()

返回一个字符串，描述日期对象所指的日期，用GMT格式。toUTCString()

返回一个字符串，描述日期对象所指的日期，用UTC格式。parse()

用法：Date.parse(<日期对象>)；返回该日期对象的内部表达方式。javascript基础入门ppt课件2021/3/2648Date日期g/setTime()返回/设置时间，该时间就全局对象

全局对象从不现形，它可以说是虚拟出来的，目的在于把全局函数“对象化”。在MicrosoftJScript语言参考中，它叫做“Global对象”，但是引用它的方法和属性从来不用“Global.xxx”（况且这样做会出错），而直接用“xxx”。方法eval()

把括号内的字符串当作标准语句或表达式来运行。

isFinite()

如果括号内的数字是“有限”的（介于Number.MIN_VALUE和Number.MAX_VALUE之间）就返回true；否则返回false。

isNaN()

如果括号内的值是“NaN”则返回true否则返回false。

parseInt()

返回把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。

javascript基础入门ppt课件2021/3/2649全局对象全局对象从不现形，它可以说是虚拟出来的，目的在于把全局对象parseFloat()

返回把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

toString()

用法：<对象>.toString()；把对象转换成字符串。如果在括号中指定一个数值，则转换过程中所有数值转换成特定进制。

escape()

返回括号中的字符串经过编码后的新字符串。该编码应用于URL，也就是把空格写成“%20”这种格式。“+”不被编码，如果要“+”也被编码，请用：escape('...',1)。

unescape()

是escape()的反过程。解编括号中字符串成为一般字符串。

javascript基础入门ppt课件2021/3/2650全局对象parseFloat()返回把括号内的字符串转换成自定义构造函数我们已经知道，Array()，Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用function。在function里边用this来定义属性。function<构造函数名>[(<参数>)]{

...

this.<属性名>=<初始值>;

...

}然后，用new构造函数关键字来构造变量：var<变量名>=new<构造函数名>[(<参数>)];构造变量以后，<变量名>成为一个对象，它有它自己的属性——用this在function里设定的属性。javascript基础入门ppt课件2021/3/2651自定义构造函数我们已经知道，Array()，Image()等自定义构造函数例如，下面的示例为pasta对象定义了构造函数。注意this关键字的使用，它指向当前对象。//pasta是有四个参数的构造器。functionpasta(grain,width,shape,hasEgg){this.grain=grain;//是用什么粮食做的？

this.width=width;//多宽？（数值）

this.shape=shape;//横截面形状？（字符串）

this.hasEgg=hasEgg;//是否加蛋黄？（boolean）

this.toString=pastaToString;//这里添加toString方法（如下定义）。

//注意在函数的名称后没有加圆括号；

//这不是一个函数调用，而是对函数自身的引用。}javascript基础入门ppt课件2021/3/2652自定义构造函数例如，下面的示例为pasta对象定义了构造自定义构造函数//实际的用来显示past对象内容的函数。functionpastaToString(){//返回对象的属性。

return"Grain:"+this.grain+"\n"+"Width:"+this.width+"\n"+"Shape:"+this.shape+"\n"+"Egg?:"+Boolean(this.hasEgg);}javascript基础入门ppt课件2021/3/2653自定义构造函数//实际的用来显示past对象内容的函数自定义对象<script

language="javascript">

functionStudent(name){

this.name=name;

this.getName=getName;}

functiongetName(){

return

this.name;}

functionButton1_onclick(){

vars=newStudent("lijie",20,"asdad","13971212");

alert(s.getName());

alert(s.name);}</script>javascript基础入门ppt课件2021/3/2654自定义对象<scriptlanguage="javasc使用自己的对象定义了对象构造器后，用new运算符创建对象实例。varspaghetti=newpasta("wheat",0.2,"circle",true);//将调用toString()并显示spaghetti对象的属性。window.alert(spaghetti);javascript基础入门ppt课件2021/3/2655使用自己的对象定义了对象构造器后，用new运算符创建对象expando属性可以给对象实例添加属性(expando属性)以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。spaghetti.color="palestraw";spaghetti.drycook=7;spaghetti.freshcook=0.5;varchowFun=newpasta("rice",3,"flat",false);//chowFun对象或其他现有的pasta对象//都没有添加到spaghetti对象的三个新属性。javascript基础入门ppt课件2021/3/2656expando属性可以给对象实例添加属性(expando属性使用原型对象如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函数或构造器原型对象中。例如：将属性‘foodgroup’加到pasta原型对象中，这样pasta对象的所有实例都可以有该属性，包括那些已经生成的实例。

totype.foodgroup="carbohydrates"现在spaghetti.foodgroup、chowFun.foodgroup，等等均包含值“carbohydrates”。javascript基础入门ppt课件2021/3/2657使用原型对象如果要将对象所有实例的附加属性显示出来，必须将它使用原型对象例如，如果想要能够删除字符串的前后空格（与VBScript的Trim函数类似），就可以给String原型对象创建自己的方法。Stotype.trim=function(){//用正则表达式将前后空格用空字符串替代。

returnthis.replace(/(^\s*)|(\s*$)/g,"");}vars="leadingandtrailingspaces";//显示"leadingandtrailingspaces(35)"window.alert(s+"("+s.length+")");//删除前后空格s=s.trim();//显示"leadingandtrailingspaces(27)"window.alert(s+"("+s.length+")");javascript基础入门ppt课件2021/3/2658使用原型对象例如，如果想要能够删除字符串的前后空格（与VB数组和对象通常，使用点运算符“.”访问对象的属性。例如，myObject.aProperty也可以用索引运算符“[]”访问对象的属性。在这里，是把对象看作一个关联数组。关联数组是一种数据结构，它可以动态地将任意的数据的值与任意的字符串相关联。例如

myObject["notavalididentifier"]="Thisisthepropertyvalue"; myObject[100]="100";索引“[]”字符串文字能被作为数据处理在运行之前并不知道属性名称时，这个差异会有用（比如基于用户输入构造对象时）。要想从一个关联数组提取所有的属性，必须用for…in循环。javascript基础入门ppt课件2021/3/2659数组和对象通常，使用点运算符“.”访问对象的属性。例如，ja数组和对象由于所有的数组也是对象，也支持expando属性。请注意，虽然如此，添加的属性并不以任何方式与length属性相交互。例如：//三个元素的数组varmyArray=newArray(3);myArray[0]="Hello";myArray[1]=42;myArray[2]=newDate(2000,1,1);window.alert(myArray.length);//显示数组的长度3myArray.expando="JScript!";//添加某些expando属性myArray["anotherExpando"]="Windows";//仍然显示3，因为两个expando属性，并不影响长度。window.alert(myArray.length);javascript基础入门ppt课件2021/3/2660数组和对象由于所有的数组也是对象，也支持expando属性。with语句为一个或一组语句指定默认对象。用法：with(<对象>)<语句>;with语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意Math的重复使用：

x=Math.cos(3*Math.PI)+Math.sin(Math.LN10);

y=Math.tan(14*Math.E);当使用with语句时，代码变得更短且更易读：

with(Math){

x=cos(3*PI)+sin(LN10);

y=tan(14*E);

}javascript基础入门ppt课件2021/3/2661with语句为一个或一组语句指定默认对象。javascri五.对象与DOM1、宿主对象2、浏览器对象(Navigator)3、屏幕对象(screen)4、窗口对象(Windows)5、位置对象(Location)6、历史对象(History)7、文档对象(Document)8、文档DOM9、DOM结构图10、添加节点11、删除节点12、插入节点13、替换节点javascript基础入门ppt课件2021/3/2662五.对象与DOM1、宿主对象javascript基础入门p宿主对象使用浏览器的内部对象系统（宿主对象）,可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。浏览器对象(Navigator)

提供有关浏览器的信息屏幕对象(screen)

反映了当前用户的屏幕设置窗口对象(Windows) Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。位置对象(Location) Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。历史对象(History) History对象提供了与历史清单有关的信息。文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。javascript基础入门ppt课件2021/3/2663宿主对象使用浏览器的内部对象系统（宿主对象）,可实浏览器对象(Navigator)属性：appCodeName：返回浏览器的代码名，IE返回MozillaappName：返回浏览器名，IE返回“MicrosoftInternetExplorer”appVersion：返回浏览器版本，包括版本号、语言、操作平台等language：返回浏览器编译语言platform：返回操作平台Navigator对象的plugin属性－以数组表示已安装的外挂程序

description外挂程序模块的描述

外挂程序模块的文件名

length外挂程序模块的个数

name外挂程序模块的名称javascript基础入门ppt课件2021/3/2664浏览器对象(Navigator)属性：javascript基浏览器对象(Navigator)Eg:<Script> varlen=navigator.plugins.length; with(document) { write("你的浏览器共支持"+len+"种外挂插件：<BR>"); write("<TABLEBORDER=0>") write("<CAPTION>外挂插件清单</CAPTION>") write("<TR><TH><TH>名称<TH>描述<TH>文件名") for(vari=0;i<len;i++) write("<TR><TD>"+i+ "<TD>"+navigator.plugins[i].name+ "<TD>"+navigator.plugins[i].description+ "<TD>"+navigator.plugins[i].); }</Script>javascript基础入门ppt课件2021/3/2665浏览器对象(Navigator)Eg:javascript基屏幕对象(screen)属性screen对象－屏幕对象，描述屏幕的显示及颜色属性

availHeight屏幕区域的可用高度

availWidth屏幕区域的可用宽度

colorDepth颜色深度256/816/1632M/32 height屏幕区域的实际高度

width屏幕区域的实际宽度javascript基础入门ppt课件2021/3/2666屏幕对象(screen)属性javascript基础入门p屏幕对象(screen)Eg：

<Script> if(screen.width<800||screen.colorDepth<8) { varmsg="本网站最佳浏览模式为800*600*256"; alert(msg); }</Script>javascript基础入门ppt课件2021/3/2667屏幕对象(screen)Eg：javascript基础入门窗口对象(Windows)属性：

name：窗口名称

status：改变状态栏的信息

self：当前窗口

top：最顶端的框架页

parent：窗口所属的框架页javascript基础入门ppt课件2021/3/2668窗口对象(Windows)属性：javascript基础入门窗口对象(Windows)Eg：<Script> functioncfm() {

if(confirm("确定离开么?")) //关闭当前窗口,下面两个方法都可以

//window.close(); self.close(); else returnfalse } </Script>javascript基础入门ppt课件2021/3/2669窗口对象(Windows)Eg：javascript基础入门窗口对象(Windows)window对象的open()方法：打开一个新窗口参数：

alwaysLowered是否将窗口显示的堆栈后推一层

alwaysRaised是否将窗口显示的堆栈上推一层

dependent是否将该窗口与当前窗口产生依存关系

fullscreen是否满屏显示

directories是否显示连接工具栏

location是否显示网址工具栏

menubar是否显示菜单工具栏

scrollbars是否显示滚动条javascript基础入门ppt课件2021/3/2670窗口对象(Windows)window对象的open()方法窗口对象(Windows)

status是否显示状态栏

titlebar是否显示标题栏

toolbar是否显示标准工具栏

resizable是否可以改变窗口的大小

screenX窗口左边界距离

screenY窗口上边界距离

top窗口上边界

width窗口宽度

height窗口高度

left窗口左边界

outerHeight窗口外边界的高度

personalbar是否显示个人工具栏javascript基础入门ppt课件2021/3/2671窗口对象(Windows)status是否位置对象(Location)属性：

hash锚点名称

host主机名称

hostnamehost:port href完整的URL字符串

pathname路径

port端口

protocol协议

search查询信息方法：

reload()重新加载

replace()用指定的网页取代当前网页，并且当按下浏览器的“后退”键时将不能返回原先的网页javascript基础入门ppt课件2021/3/2672位置对象(Location)属性：javascript基础入位置对象(Location)Eg:<inputtype="button"value="连接到163"onClick="location.href=''"><inputtype="button"value="刷新页面"onclick="location.reload()"/><inputtype="button"value="替换页面"onclick="location.replace('2.html')"/>javascript基础入门ppt课件2021/3/2673位置对象(Location)Eg:javascript基础入历史对象(History)属性：

current当前历史记录的网址

length存储在记录清单中的网址数目

next下一个历史记录的网址

previous上一个历史记录的网址方法：

back()回到上一个历史记录中的网址（和按下“后退”键等效）

forward()回到下一个历史记录中的网址（和按下“前进”键等效）

go(整数或URL)前往历史记录中的网址（如果整数x>0，则前进x个地址，如果整数x<0，则后退x个地址，如果x=0，则刷新当前页面）javascript基础入门ppt课件2021/3/2674历史对象(History)属性：javascript基础入门历史对象(History)Eg:<ahref="history.go(-2)">后退两页</a><ahref="history.back()">后退一页</a><ahref="history.forward()">前进一页</a><ahref="history.go(2)">前进两页</a>javascript基础入门ppt课件2021/3/2675历史对象(History)Eg:javascript基础入门文档对象(Document)属性：

linkColor设置超链接的颜色

alinkColor作用中的超链接的颜色

vlinkColor链接的超链接颜色

links以数组索引值表示所有超链接

URL该文件的网址

anchors以数组索引值表示所有锚点

bgColor背景颜色

fgColor前景颜色

classes文件中的class属性

cookie设置cookiedomain指定服务器的域名

formName以表单名称表示所有表单javascript基础入门ppt课件2021/3/2676文档对象(Document)属性：javascript基础入文档对象(Document)属性：

forms以数组索引值表示所有表单

images以数组索引值表示所有图像

layers以数组索引值表示所有layerembeds文件中的plug-inapplets以数组索引值表示所有appletplugins以数组索引值表示所有插件程序

referrer代表当前打开文件的网页的网址

tags指出HTML标签的样式

title该文档的标题

width该文件的宽度（px）

lastModified文件最后修改时间javascript基础入门ppt课件2021/3/2677文档对象(Document)属性：javascript基础入文档对象(Document)方法：

open()打开文档

close()关闭文档，停止写入数据

clear()清空文档

write()向文档写入数据

writeln()向文档写入数据并换行javascript基础入门ppt课件2021/3/2678文档对象(Document)方法：javascript基础入文档DOMDOM(DocumentObjectModel)文档对象模型，规范于2000年11月，尽管这个规范已经发布了好多年，但是当期使用的许多浏览器任然只具有不完整的DOM-2的支持，好消息是，当今的大多数网上冲浪者都使用IE6+,Firefox或Safari，而这些浏览器都能很好的运行这些脚本。我们将Javascript称为”组合式（snap-together）语言“，因为可以将对象，属性和方法组合在一起来构建出javascript应用程序。还有一种看待HTML页面的方式：将它看做由节点（node）组成的树结构。javascript基础入门ppt课件2021/3/2679文档DOMDOM(DocumentObjectModelDOM结构图<html><head><title>Mypage</title></head><body></body><p>Thisistextonmypage</p></html>htmlbodyheadptitle“Mypage”“Thisistextonmypage”texttextjavascript基础入门ppt课件2021/3/2680DOM结构图<html>htmlbodyheadptitle添加节点Eg：<html><head><scriptsrc="E:\script01.js"></script></head><body><form><p><textareaid="textArea"rows="5"cols="30"></textarea></p><inputtype="submit"value="Addsometexttothepage"/></form></body></html>javascript基础入门ppt课件2021/3/2681添加节点Eg：javascript基础入门ppt课件202添加节点window.onload=initAll;functioninitAll(){document.getElementsByTagName("form")[0].onsubmit=function(){returnaddNode();}}functionaddNode(){ varinText=document.getElementById("textArea").value;varnewText=document.createTextNode(inText);varnewGraf=document.createElement(“p”);

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

温馨提示

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

javascript基础入门-课件

文档简介

温馨提示

最新文档

评论

javascript基础入门-课件

文档简介

温馨提示

最新文档

评论

相关文档