JS基础教程零基础学JavaScript.ppt

JS基础教程零基础学JavaScript.ppt

《JS基础教程零基础学JavaScript.ppt》由会员分享，可在线阅读，更多相关《JS基础教程零基础学JavaScript.ppt（70页珍藏版）》请在冰点文库上搜索。

JS基础教程,JS教程目录

（1）,JS介绍JS怎样使用JS在哪使用JS变量JS条件语句JS操作符JS函数JS循环JSFor.InJS事件JS字符串,JS教程目录

（2）,JSDateJSArrayJSBooleanJSMath,JS介绍,JS（JavaScript的缩写）是WEB脚本语言。

JavaScript在成千上万的WEB页中用来增加设计效果，校验表单，辨别浏览器，建立cookies等等。

JavaScript是互联网上最被广泛应用的脚本语言，适用于IE，Mozilla，Firefox，Netscape，Opera等众多主流浏览器。

JS怎样使用,如何在HTML页面中插入JavaScript？

我们通过标签在HMTL页面中插入JavaScript（同时我们也可以使用type属性来定义所要插入的脚本语言）。

和分别标记了JavaScript代码的开始和结束。

格式如下：

.,JS怎样使用实例,Example：

document.write（HelloWorld!

）,JS怎样使用,用分号来终止语句？

与C+和Java语言一样，JavaScript也是使用分号来结束一条语句。

许多的程序员在写JavaScript时都有使用分号来结束语句的习惯，但一般情况下分号只当你需要在同一行写入多条语句时才必须使用。

JS在哪使用,Head部分将脚本中的函数插入head部分，这样就可以确保函数在被调用前已经加载完成。

Body部分Body部分中的脚本将在页面加载到时被执行。

在页面中插入脚本，脚本将伴随页面一起加载。

外部脚本调入外部脚本。

将JavaScript写在一个外部文件中，并将其保存为一个以.js为扩展名的外部JavaScript文件。

JS在哪使用head,在head部分中的脚本：

.,JS在哪使用body,body部分的脚本：

.,JS在哪使用body和head,位于body和head部分的脚本：

.,JS在哪使用外部的脚本,外部的JavaScript,JS变量,变量定义声明变量给变量指定值变量的寿命（有效时间和范围）,JS变量变量,变量是你想要存储数据的“容器”。

变量的值可以在脚本中改变。

你可以调用变量的名称来看看它的值或是改变它的值。

变量名称规则：

区分大小写的。

开始部分必须为一个字母或是下划线。

重点注意！

JS是区分大小写的！

JS变量声明变量,你可以通过的var声明来建立一个变量：

varstrname=somevalue你也可以不用var来建立变量：

strname=somevalue,JS变量给变量指定值,可以用这样的方法来给变量指定值：

varstrname=JavaScript或者这样：

strname=JavaScript变量名称写在表达式的左边，你想要指定的值写在右边。

现在变量名称为strname的变量值为JavaScript。

JS变量变量的寿命（有效时间和范围）,当你在function（函数）里指定一个变量，它就只能在该函数内进行访问。

当你离开函数变量就无效了。

这样的变量可以称作局部变量。

你可以在不同的函数内使用同样名称的变量，因为在函数中只会辨认它所指定的变量（别的函数怎么定义是不管的）如果你在函数外定义一个变量，那页面里所有的函数都可以访问它。

它的有效范围从指定开始直到你关闭页面才会结束。

JS条件语句,JS中的条件语句一般用在针对不同的条件来执行不同的动作。

在JS中有以下一些假设（条件）语句：

if语句-这条语句一般是在代码在只有一个状态为真的情况下就执行的时候使用。

if.else语句-两个状态，一种为真，还有种不为真，分别执行不同动作。

if.elseif.else语句-你想在多个条件中选择一个或几个去执行，就用这个。

Switch语句-在许多条件中选择一个去执行，用这个。

JS条件语句if语句,语法：

if（condition）codetobeexecutedifconditionistrue注意：

if语句应该用小写，使用大写的话会引起JS错误。

要比较变量你就必须使用两个等号标记（=）！

JS条件语句If.else,语法：

if（condition）codetobeexecutedifconditionistrueelsecodetobeexecutedifconditionisnottrue,JS条件语句If.elseif.else,语法：

if（condition1）codetobeexecutedifcondition1istrueelseif（condition2）codetobeexecutedifcondition2istrueelsecodetobeexecutedifcondition1andcondition2arenottrue,JS条件语句Switch,如果想在几个代码块中选择一个来运行就使用switch（开关）语句。

它是这样工作的:

首先，有唯一的一个表达式n（大多数为一个变量），它是被赋过值的。

接下来表达式将与每个case（事件）进行比较。

如果吻合就执行该事件内的代码块。

使用break来防止代码执行后自动转向下一个事件。

JS条件语句Switch,语法：

switch（n）case1:

executecodeblock1breakcase2:

executecodeblock2breakdefault:

codetobeexecutedifnisdifferentfromcase1and2,JS操作符,算术运算符赋值运算符比较（关系）运算符逻辑运算符串符（连接作用）条件运算符,JS操作符算术运算符,+加-减*乘/除%余数+递增-递减,JS操作符赋值运算符,OperatorExampleIsTheSameAs=x=yx=y+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x%=yx=x%y,JS操作符比较（关系）运算符,=等于!

=不等于大于=大于等于=小于等于,JS操作符逻辑运算符,&与|或!

非,JS操作符串符（连接作用）,要将两个或多个字符串变量衔接在一起的话就得使用+符号。

要给两个字符串变量中间添加空格就得在表达式里插入空格，或在其中的一个加上（空格）。

Example：

txt1=Whataverytxt2=niceday!

txt3=txt1+txt2Ortxt1=Whataverytxt2=niceday!

txt3=txt1+txt2变量txt3为“Whataveryniceday!

”,JS操作符条件运算符,JS有根据条件不同给变量不同值的条件运算符。

语法：

variablename=（condition）?

value1:

value2Example：

greeting=（visitor=PRES）?

DearPresident:

Dear如果变量visitor的值等于PRES那么greeting的值就为DearPresident。

如果不为PRES那么greeting的值就为Dear,JS弹出框警示框,如果你想保证让用户得到信息就使用警示框。

当警示框弹出，用户必须按“OK”来继续。

语法：

alert（sometext）,JS函数,函数是可再用的代码块，可以在事件触发或是被调用时来执行。

要想让浏览器在加载完页面后马上执行脚本程序，你可以将脚本写入一个函数内。

函数内的一些代码只有在某个事件触发或被调用的时候才会被执行。

你可以在页面中的任何地方调用函数（可以用嵌入外部.js文件的方式让其他页面也可以使用脚本）函数在页面的开始部分定义，在区域。

JS函数Example,Examplefunctiondisplaymessage（）alert（HelloWorld!

）,JS函数定义一个函数,建立函数的语法：

functionfunctionname（var1,var2,.,varX）somecode（var1,var2等一些变量或值可传递给函数使用。

和定义了函数的开始与结束。

）注意：

没有参数的函数必须在函数名称后带上（）；调用的函数名必须和你建立的函数名相一致。

JS函数返回语句,返回语句用来指定从函数中返回的值，所以，要从函数里返回值就必须使用返回语句Example：

返回两个数字的乘积（a和b）:

functionprod（a,b）x=a*breturnx当你调用上面的函数,你必须提供两个参数product=prod（2,3）从函数prod（）返回的值就为6，它会存储在变量product中。

JS循环,在JS中有两种循环：

for-次数循环while-条件循环,JS循环For循环,使用for循环一般是当你事先知道脚本应该执行几次。

语法：

for（var=startvalue;var=endvalue;var=var+increment）codetobeexecuted,JS循环While循环,当条件持续为真的时候循环执行相同的代码，这就是while循环的用途while（var=endvalue）codetobeexecuted注意：

=可以比较任何申明（我的理解是不光可以比较数字类型，字符也可以比较）do.whlie是另外一种形式的while循环。

条件判断在执行之后docodetobeexecutedwhile（var=endvalue）,JS循环特殊语句,break和continue是两个用在内部循环的特殊语句。

Breakbreak命令会离开当前的循环并接着开始执行下面的循环（如果有的话）。

Continuecontinue命令会跳出当前的循环并继续下面的值。

JS循环BreakExample,vari=0for（i=0;i）ResultThenumberis0Thenumberis1Thenumberis2,JS循环ContinueExample,vari=0for（i=0;i）,JSFor.In,for.in声明通过一组元素或对象属性进行循环（重复）。

在for.in循环躯干部分里的代码针对每个元素/属性执行一次。

语法for（variableinobject）codetobeexecuted,JSFor.InExample,Example数组使用for.in循环varxvarmycars=newArray（）mycars0=Saabmycars1=Volvomycars2=BMWfor（xinmycars）document.write（mycarsx+）,ResultSaabVolvoBMW,JS事件,通过使用JS我们能够建立动态的web页面。

JS能够察觉到事件有动作。

web页中的每个元素都能够有触发JS函数的事件。

事件例子：

鼠标的点击web页或是图象在加载的时候移动到热点的时候（这里我怀疑Mousing是Moving）在HTML表单中选择一个输入框提交一份HTML表单一次击键注意：

事件通常是用函数来组合使用的，而且在事件发生前函数是不会执行的！

JS事件参考,下面的列表列举了可以插入HTML标签中来定义事件动作的属性。

onabort图片下载被打断时onblur元素失去焦点时onchange框内容改变时onclick鼠标点击一个对象时ondblclick鼠标双击一个对象时onerror当加载文档或图片时发生错误时onfocus当元素获取焦点时onkeydown按下键盘按键时onkeypress按下或按住键盘按键时onkeyup放开键盘按键时,onload页面或图片加载完成时onmousedown鼠标被按下时onmousemove鼠标被移动时onmouseout鼠标离开元素时onmouseover鼠标经过元素时onmouseup释放鼠标按键时onreset重新点击鼠标按键时onresize当窗口或框架被重新定义尺寸时onselect文本被选择时onsubmit点击提交按钮时onunload用户离开页面时,JS事件onFocus,onBlurandonChange,这些事件经常组合起来使用在表单的验证上。

下面的例子将说明怎样使用onChange事件，当用户改变内容的时候checkEmail（）函数就被激活。

;,JS事件onSubmit,onSubmit事件被用来校验“所有“被提交的表单。

下面就是一个怎样使用onSubmit事件的例子。

当用户点击提交按钮就会激活函数checkForm（）。

如果将要提交的值不能被接受，那就会取消提交。

checkForm（）函数会返回真或假。

返回真的话就会提交表单，假就会取消提交：

JS事件鼠标动作,onMouseOverandonMouseOut（鼠标动作）这两个事件经常用来建立”活力（动感十足）”按钮。

下面就是一个anonMouseOver事件的例子。

当鼠标移动到连接上的时候就会出现警告框：

JS捕捉错误,当在网上浏览页面时，我猜各位都见过JS警告框，告诉你有运行错误，并问：

”你希望调试吗？

“这类错误信息或许对开发者十分有用，但对用户就不是了。

当用户见到错误，他们通常会离开页面。

有两种办法来捕捉错误：

通过使用try.catch使用onerror事件,JS捕捉错误try.catch,try.catch声明可以让你测试出一块区域代码中的错误。

尝试（try）运行里面的代码并捕捉（catch）执行中出现的错误语法try/Runsomecodeherecatch（err）/Handleerrorshere,JS捕捉错误throw,throw声明可以让你建立例外（情况）。

如果你把throw声明和try.catch声明组合起来使用，你可以控制程序流程并引出精确的错误信息语法throw（exception）例外可以是串，整数，布尔或是对象。

JSGuidelines,使用JS时还应该了解的一些重要信息。

JS是区分大小写的。

JS会忽略多余的空白。

在文字串中加入反斜杠来将一段代码拆开。

使用双斜杠来添加你脚本的注释。

或者使用/*和*/（这个可以建立多行的注释区）。

JS对象介绍,JS是安置对象的编程语言（面向对象）。

注意，对象只是特殊类型的数据。

对象有属性和方法。

属性是对象的相连值。

下面的例子我么使用了字符串对象的长度属性来返回字符的数量：

vartxt=HelloWorld!

document.write（txt.length）上面的代码就会输出：

12对象的方法可以执行行为。

下面的例子使用了字符串对象的toUpperCase（）方法来显示出文字的大写：

varstr=Helloworld!

document.write（str.toUpperCase（）上面的代码输出：

HELLOWORLD!

JS字符串,字符串对象被用来操作存储的文字片段。

字符串对象属性属性描述constructor所建立对象函数的参考length返回字符串的字符长度prototype对象可加入的对象和方法,JS字符串对象参考

（一）,字符串对象方法anchor（）建立一个HTML锚记big（）显示大一号的字符串blink（）显示闪烁的字符串bold（）显示粗体字符串charAt（）显示指定位置的字符charCodeAt（）返回指定位置字符的Unicodeconcat（）接合两条或多条字符串fixed（）电报形式来显示文字fontcolor（）执行显示字符串的颜色fontsize（）指定显示字符串的大小fromCharCode（）获取指定的Unicode值并返回字符串indexOf（）返回字符串中第一个出现指定字符串的位置italics（）用斜体显示字符串lastIndexOf（）返回字符串中最后个出现指定字符串的位置，搜索方向是向后的。

JS字符串对象参考

（二）,link（）字符串以超级链接的形式显示match（）在字符串中查找指定值replace（）将字符串中的某些字符替换成其它字符search（）针对某执行值对字符串进行查找slice（）将部分字符抽出并在新的字符串中返回剩余部分small（）显示小一号的字符串split（）将字符串分配为数组strike（）字符串以删除的形式显示sub（）字符串显示成下标substr（）从字符串头部开始抽取指定数字的字符串substring（）抽取字符串中指定数字符，并返回剩下的sup（）上标字符串toLowerCase（）小写字符串toUpperCase（）大写字符串toSource（）显示对象的源代码valueOf（）返回字符串对象的原始值,JSDate,时间对象用来操作日期和时间。

定义日期。

下面的代码行就定义了一个时间对象（称作myDate）:

varmyDate=newDate（）操作（设置）时间。

在下面的例子中我们设置一个时间对象来指定日期（2010年一月14号）:

varmyDate=newDate（）myDate.setFullYear（2010,0,14）比较时间（日期）。

下面的例子将今天的日期和2010年1月14号作比较：

varmyDate=newDate（）myDate.setFullYear（2010,0,14）vartoday=newDate（）if（myDatetoday）alert（Todayisbefore14thJanuary2010）elsealert（Todayisafter14thJanuary2010）,JS日期对象参考方法

（1）,日期对象方法Date（）返回今天的日期和时间getDate（）返回月中的第几天（1到31）getDay（）返回一周中的第几天（0到6）getMonth（）返回月份数（0到11）getFullYear（）返回完整的年份数getYear（）返回年份，可以是两位的或是四位的getHours（）返回日期对象的小时数（0到23）getMinutes（）返回日期对象的分钟（0到59）getSeconds（）返回日期对象的秒（0到59）getMilliseconds（）返回毫秒（0到999）getTime（）从1970年1月1号午夜到现在一共花去的毫秒数getTimezoneOffset（）本地时间和GMT相差多少分钟,JS日期对象参考方法

（2）,getUTCDate（）依据国际时间来得到月中的第几天（1到31）getUTCDay（）依据国际时间来得到现在是星期几（0到6）getUTCMonth（）依据国际时间来得到月份（0到11）getUTCFullYear（）依据国际时间来得到完整的年份getUTCHours（）依据国际时间来得到小时（0-23）getUTCMinutes（）依据国际时间来返回分钟（0到59）getUTCSeconds（）依据国际时间来返回秒（0到59）getUTCMilliseconds（）依据国际时间来返回毫秒（0到999）parse（）或得并返回自1970年1月1号凌晨到现在一共花掉了多少毫秒setDate（）设置日setMonth（）设置月setFullYear（）设置年份setYear（）用setFullYear（）来取代setHours（）设置小时setMinutes（）设置分钟setSeconds（）设置秒setMilliseconds（）设置毫秒setTime（）依据从1970年1月1号午夜到现在来设置毫秒,JS日期对象参考方法（3）,setUTCDate（）依据国际时间来设置日期setUTCMonth（）依据国际时间来设置月setUTCFullYear（）依据国际时间来设置年份setUTCHours（）依据国际时间来设置小时setUTCMinutes（）依据国际时间来设置分钟setUTCSeconds（）依据国际时间来设置秒setUTCMilliseconds（）依据国际时间来设置毫秒toSource（）显示对象的源代码-toString（）将日期对象转换为字符串toGMTString（）根据格林威治时间将Date日期对象转换为一个字符串。

可以使用toUTCString（）替代这种方法toUTCString（）根据通用时间将一个Date日期对象转换为一个字符串toLocaleString（）根据本地时间将一个Date日期对象转换为一个字符串UTC（）根据通用时间将日期计算为从1970年1月1日午夜至今所经过的时间（单位：

毫秒）valueOf（）返回日期对象的原始值,JS日期对象参考属性,日期对象属性constructor所建立对象的函数参考prototype能够为对象加入的属性和方法,JSArray,阵列（数组）对象用来在一单独的变量名称内存储一系列值。

定义数组。

下面的代码行定义了称为myArry的数组对象：

varmyArray=newArray（）有两种方法来添加数组值（你可以添加你所需要的值并定义你所想要的变量名称）第一种:

varmycars=newArray（）mycars0=Saabmycars1=Volvomycars2=BMW还可以通过引入一个整数来控制数组的大小：

varmycars=newArray（3）mycars0=Saabmycars1=Volvomycars2=BMW第二种：

varmycars=newArray（“Saab”,“Volvo”,“BMW”）注意：

如果你在数组里指定数字或真/假值那么变量的类型将变为数字型或布尔型替换了字符串型。

JSArray访问和修改数组,访问数组。

你可以指示数组的名称和索引数字来从数组中提出一个单独的元素。

索引数字从0开始。

正如下面的代码行：

document.write（mycars0）将输出结果：

Saab修改现有的数组值。

要修改现有数组的值只需要通过添加指定索引数字里的值mycars0=Opel现在，下面的代码行：

document.write（mycars0）将输出结果：

Opel,JS数组对象参考方法,数组对象方法concat（）将两个或两个以上的数组值连接起来，合并后返回结果。

join（）将数组中的所有元素合并起来成为一条字符串。

每个元素可以指定他们的分隔标记。

pop（）删除并返回数组最后的元素。

push（）在数组的末尾加上一个或多个元素，并且返回新的数组长度值。

reverse（）将数组中的排列顺序做反向排列。

shift（）删除并返回数组中第一个元素值。

slice（）从现有数组中的某个元素开始依次返回。

sort（）对数组中的元素进行排序。

splice（）为数组删除并添加新的元素。

toSource（）显示对象的源代码。

toString（）将数组转换为数组，并返回结果。

unshift（）为数组的开始部分加上一个或多个元素，并且返回该数组的新长度。

valueOf（）返回数组对象的原始值。

JSBoolean,布尔对象用来把一个非布尔型的值转换为布尔值（真或假）。

布尔对象是布尔值的包装对象。

我们用一新关键字定义一个布尔对象。

下面的代码定义了一个名为myBoolean的布尔对象：

varmyBoolean=newBoolean（）注意：

如果布尔对象没有初始值或是0,-0,null,false,无定义的,或NaN,对象就设置为假.不然它就是真（哪怕是字符串值为“false”）。

下面所有的代码建立的布尔对象的值都为false（假）:

varmyBoolean=newBoolean（）varmyBoolean=newBoolean（0）varmyBoolean=newBoolean（null）varmyBoolean=newB