《JS基础教程零基础学JavaScript.ppt》由会员分享，可在线阅读，更多相关《JS基础教程零基础学JavaScript.ppt（71页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、JS教程教程目录（目录（1） JS 介绍 JS 怎样使用 JS 在哪使用 JS 变量 JS 条件语句 JS 操作符 JS 函数 JS 循环 JS For.In JS 事件 JS 字符串JS教程教程目录（目录（2） JS Date JS Array JS Boolean JS MathJS 介绍 JS（JavaScript的缩写）是WEB脚本语言。JavaScript在成千上万的WEB页中用来增加设计效果，校验表单，辨别浏览器，建立cookies等等。 JavaScript是互联网上最被广泛应用的脚本语言，适用于IE，Mozilla，Firefox，Netscape，Opera等众多主流浏览器。
2、 JS 怎样使用 如何在HTML页面中插入JavaScript？ 我们通过 标签在HMTL页面中插入JavaScript（同时我们也可以使用 type 属性来定义所要插入的脚本语言）。和分别标记了JavaScript代码的开始和结束。 格式如下： . JS 怎样使用实例 Example： document.write(Hello World!) JS 怎样使用 用分号来终止语句？ 与C+和Java语言一样，JavaScript也是使用分号来结束一条语句。 许多的程序员在写JavaScript时都有使用分号来结束语句的习惯，但一般情况下分号只当你需要在同一行写入多条语句时才必须使用。 JS 在哪
3、使用 Head部分 将脚本中的函数插入head部分，这样就可以确保函数在被调用前已经加载完成。 Body部分 Body部分中的脚本将在页面加载到时被执行。在页面中插入脚本，脚本将伴随页面一起加载。 外部脚本 调入外部脚本。将JavaScript写在一个外部文件中，并将其保存为一个以.js为扩展名的外部 JavaScript 文件。 JS 在哪使用head 在head部分中的脚本： . JS 在哪使用body body部分的脚本： . JS 在哪使用body和和head 位于位于 body 和和 head 部分的脚本：部分的脚本： . . JS 在哪使用外部的脚本 外部的JavaScript J
4、S 变量 变量定义 声明变量 给变量指定值 变量的寿命（有效时间和范围） JS 变量变量 变量是你想要存储数据的“容器”。变量的值可以在脚本中改变。你可以调用变量的名称来看看它的值或是改变它的值。 变量名称规则：区分大小写的。开始部分必须为一个字母或是下划线。 重点注意！JS是区分大小写的！JS 变量声明变量 你可以通过的var声明来建立一个变量： var strname = some value 你也可以不用var来建立变量： strname = some valueJS 变量给变量指定值 可以用这样的方法来给变量指定值： var strname = JavaScript 或者这样： str
5、name = JavaScript 变量名称写在表达式的左边，你想要指定的值写在右边。现在变量名称为strname的变量值为JavaScript。JS 变量变量的寿命（有效时间和范围） 当你在function(函数)里指定一个变量，它就只能在该函数内进行访问。当你离开函数变量就无效了。这样的变量可以称作局部变量。你可以在不同的函数内使用同样名称的变量，因为在函数中只会辨认它所指定的变量（别的函数怎么定义是不管的） 如果你在函数外定义一个变量，那页面里所有的函数都可以访问它。它的有效范围从指定开始直到你关闭页面才会结束。 JS 条件语句 JS中的条件语句一般用在针对不同的条件来执行不同的动作。在
6、JS中有以下一些假设（条件）语句：if 语句语句 - 这条语句一般是在代码在只有一个状态为真的情况下就执行的时候使用。if.else 语句语句 - 两个状态，一种为真，还有种不为真，分别执行不同动作。 if.else if.else 语句语句 - 你想在多个条件中选择一个或几个去执行，就用这个。 Switch 语句语句 - 在许多条件中选择一个去执行，用这个。JS 条件语句if 语句 语法： if (condition) code to be executed if condition is true 注意：if语句应该用小写，使用大写的话会引起JS错误。要比较变量你就必须使用两个等号标记（=
7、）！ JS 条件语句 If.else 语法：语法： if (condition) code to be executed if condition is true else code to be executed if condition is not true JS 条件语句If.else if.else语法：语法：if (condition1)code to be executed if condition1 is trueelse if (condition2)code to be executed if condition2 is trueelsecode to be executed
8、 if condition1 andcondition2 are not trueJS 条件语句Switch 如果想在几个代码块中选择一个来运行就使用switch(开关)语句。 它是这样工作的:首先，有唯一的一个表达式 n (大多数为一个变量)，它是被赋过值的。 接下来表达式将与每个case(事件)进行比较。如果吻合就执行该事件内的代码块。使用break来防止代码执行后自动转向下一个事件。 JS 条件语句Switch语法：语法：switch(n)case 1: execute code block 1 break case 2: execute code block 2 breakdefaul
9、t:code to be executed if n isdifferent from case 1 and 2 JS 操作符 算术运算符 赋值运算符 比较（关系）运算符 逻辑运算符 串符（连接作用） 条件运算符 JS 操作符算术运算符 + 加 - 减 * 乘 / 除 % 余数 + 递增- 递减 JS 操作符赋值运算符 Operator Example Is The Same As = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y JS 操作符比较（关系）运算符 = 等于 != 不等于
10、 大于= 大于等于 = 小于等于 JS 操作符逻辑运算符 & 与| 或! 非JS 操作符串符（连接作用） 要将两个或多个字符串变量衔接在一起的话就得使用 + 符号。要给两个字符串变量中间添加空格就得在表达式里插入空格，或在其中的一个加上（空格）。Example ：txt1=What a verytxt2=nice day!txt3=txt1+ +txt2Ortxt1=What a very txt2=nice day!txt3=txt1+txt2 变量txt3为“What a very nice day!”JS 操作符条件运算符 JS有根据条件不同给变量不同值的条件运算符。语法： variab
11、lename=(condition)?value1:value2 Example： greeting=(visitor=PRES)?Dear President :Dear 如果变量visitor的值等于PRES那么greeting的值就为Dear President 。如果不为PRES那么greeting的值就为DearJS 弹出框警示框如果你想保证让用户得到信息就使用警示框。当警示框弹出，用户必须按“OK”来继续。 语法：alert(sometext) JS 函数 函数是可再用的代码块，可以在事件触发或是被调用时来执行。 要想让浏览器在加载完页面后马上执行脚本程序，你可以将脚本写入一个函数
12、内。 函数内的一些代码只有在某个事件触发或被调用的时候才会被执行。 你可以在页面中的任何地方调用函数（可以用嵌入外部.js文件的方式让其他页面也可以使用脚本） 函数在页面的开始部分定义，在区域。JS 函数ExampleExamplefunction displaymessage()alert(Hello World!)JS 函数定义一个函数 建立函数的语法：function functionname(var1,var2,.,varX)some code （var1,var2等一些变量或值可传递给函数使用。和定义了函数的开始与结束。）注意： 没有参数的函数必须在函数名称后带上()； 调用的函数名
13、必须和你建立的函数名相一致。JS 函数返回语句返回语句用来指定从函数中返回的值，所以，要从函数里返回值就必须使用返回语句Example：返回两个数字的乘积(a和b):function prod(a,b)x=a*breturn x 当你调用上面的函数,你必须提供两个参数product=prod(2,3) 从函数prod()返回的值就为6，它会存储在变量product中。JS 循环 在JS中有两种循环：for - 次数循环 while - 条件循环JS 循环 For 循环 使用for循环一般是当你事先知道脚本应该执行几次。 语法：for(var=startvalue;var=endvalue;va
14、r=var+increment) code to be executed JS 循环 While 循环 当条件持续为真的时候循环执行相同的代码， 这就是while循环的用途 while (var=endvalue) code to be executed 注意：=可以比较任何申明（我的理解是不光可以比较数字类型，字符也可以比较）do.whlie是另外一种形式的while循环。条件判断在执行之后do code to be executed while (var=endvalue)JS 循环 特殊语句 break和continue是两个用在内部循环的特殊语句。 Breakbreak命令会离开当前的
15、循环并接着开始执行下面的循环（如果有的话）。 Continuecontinue命令会跳出当前的循环并继续下面的值。JS 循环 Break Example var i=0for (i=0;i=10;i+)if (i=3)breakdocument.write(The number is + i)document.write() ResultThe number is 0The number is 1The number is 2 JS 循环 Continue Example var i=0for (i=0;i=10;i+)if (i=3)continuedocument.write(The nu
16、mber is + i)document.write() JS For.In for.in声明通过一组元素或对象属性进行循环（重复）。 在for.in循环躯干部分里的代码针对每个元素/属性执行一次。 语法for (variable in object) code to be executedJS For.In ExampleExample 数组使用for.in循环var xvar mycars = new Array()mycars0 = Saabmycars1 = Volvomycars2 = BMWfor (x in mycars)document.write(mycarsx + ) Re
17、sultSaabVolvoBMWJS 事件 通过使用JS我们能够建立动态的web页面。JS能够察觉到事件有动作。 web页中的每个元素都能够有触发JS函数的事件。 事件例子： 鼠标的点击 web页或是图象在加载的时候 移动到热点的时候 （这里我怀疑Mousing是Moving） 在HTML表单中选择一个输入框 提交一份HTML表单 一次击键 注意：注意：事件通常是用函数来组合使用的，而且在事件发生前函数是不会执行的！ JS事件参考 下面的列表列举了可以插入下面的列表列举了可以插入HTML标签标签中来定义事件动作的属性。中来定义事件动作的属性。 onabort 图片下载被打断时 onblur 元
18、素失去焦点时 onchange 框内容改变时 onclick 鼠标点击一个对象时 ondblclick 鼠标双击一个对象时 onerror 当加载文档或图片时发生错误时 onfocus 当元素获取焦点时 onkeydown 按下键盘按键时 onkeypress 按下或按住键盘按键时 onkeyup 放开键盘按键时 onload 页面或图片加载完成时 onmousedown 鼠标被按下时 onmousemove 鼠标被移动时onmouseout 鼠标离开元素时 onmouseover 鼠标经过元素时 onmouseup 释放鼠标按键时 onreset 重新点击鼠标按键时 onresize 当窗口
19、或框架被重新定义尺寸时 onselect 文本被选择时 onsubmit 点击提交按钮时 onunload 用户离开页面时JS事件 onFocus, onBlur and onChange 这些事件经常组合起来使用在表单的验证上。 下面的例子将说明怎样使用onChange事件，当用户改变内容的时候checkEmail()函数就被激活。 ; JS事件 onSubmit onSubmit事件被用来校验“所有“被提交的表单。 下面就是一个怎样使用onSubmit事件的例子。当用户点击提交按钮就会激活函数checkForm()。如果将要提交的值不能被接受，那就会取消提交。checkForm()函数会返
20、回真或假。返回真的话就会提交表单，假就会取消提交： JS事件 鼠标动作 onMouseOver and onMouseOut（鼠标动作） 这两个事件经常用来建立”活力（动感十足）”按钮。 下面就是一个an onMouseOver事件的例子。当鼠标移动到连接上的时候就会出现警告框： JS 捕捉错误 当在网上浏览页面时，我猜各位都见过JS警告框，告诉你有运行错误，并问：”你希望调试吗？“这类错误信息或许对开发者十分有用，但对用户就不是了。当用户见到错误，他们通常会离开页面。 有两种办法来捕捉错误：通过使用try.catch 使用onerror事件 JS 捕捉错误try.catchtry.catch
21、声明可以让你测试出一块区域代码中的错误。尝试（try）运行里面的代码并捕捉(catch)执行中出现的错误 语法try/Run some code herecatch(err)/Handle errors here JS 捕捉错误 throw throw声明可以让你建立例外（情况）。 如果你把throw声明和try.catch声明组合起来使用，你可以控制程序流程并引出精确的错误信息 语法 throw(exception) 例外可以是串，整数，布尔或是对象。 JS Guidelines 使用JS时还应该了解的一些重要信息。 JS是区分大小写的。JS会忽略多余的空白。 在文字串中加入反斜杠来将一段代
22、码拆开。使用双斜杠来添加你脚本的注释。或者使用/*和*/（这个可以建立多行的注释区）。 JS 对象介绍 JS是安置对象的编程语言（面向对象）。注意，对象只是特殊类型的数据。对象有属性和方法。属性是对象的相连值。下面的例子我么使用了字符串对象的长度属性来返回字符的数量： var txt=Hello World!document.write(txt.length) 上面的代码就会输出：12 对象的方法可以执行行为。下面的例子使用了字符串对象的toUpperCase()方法来显示出文字的大写： var str=Hello world! document.write(str.toUpperCase()
23、 上面的代码输出：HELLO WORLD! JS 字符串 字符串对象被用来操作存储的文字片段。 字符串对象属性属性 描述constructor 所建立对象函数的参考 length 返回字符串的字符长度prototype 对象可加入的对象和方法 JS字符串对象参考 （一）字符串对象方法 anchor() 建立一个HTML锚记 big() 显示大一号的字符串 blink() 显示闪烁的字符串 bold() 显示粗体字符串 charAt() 显示指定位置的字符 charCodeAt() 返回指定位置字符的Unicode concat() 接合两条或多条字符串 fixed() 电报形式来显示文字 fo
24、ntcolor() 执行显示字符串的颜色 fontsize() 指定显示字符串的大小 fromCharCode() 获取指定的Unicode值并返回字符串 indexOf() 返回字符串中第一个出现指定字符串的位置 italics() 用斜体显示字符串 lastIndexOf() 返回字符串中最后个出现指定字符串的位置，搜索方向是向后的。JS字符串对象参考（二）link() 字符串以超级链接的形式显示 match() 在字符串中查找指定值 replace() 将字符串中的某些字符替换成其它字符 search() 针对某执行值对字符串进行查找 slice() 将部分字符抽出并在新的字符串中返回剩
25、余部分 small() 显示小一号的字符串 split() 将字符串分配为数组 strike() 字符串以删除的形式显示 sub() 字符串显示成下标 substr() 从字符串头部开始抽取指定数字的字符串 substring() 抽取字符串中指定数字符，并返回剩下的 sup() 上标字符串 toLowerCase() 小写字符串 toUpperCase() 大写字符串 toSource() 显示对象的源代码 valueOf() 返回字符串对象的原始值 JS Date时间对象用来操作日期和时间。定义日期。下面的代码行就定义了一个时间对象（称作myDate）: var myDate=new Da
26、te()操作（设置）时间。在下面的例子中我们设置一个时间对象来指定日期（2010年一月14号）:var myDate=new Date()myDate.setFullYear(2010,0,14)比较时间（日期）。下面的例子将今天的日期和2010年1月14号作比较：var myDate=new Date()myDate.setFullYear(2010,0,14)var today = new Date()if (myDatetoday)alert(Today is before 14th January 2010)elsealert(Today is after 14th January 2
27、010) 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() 从19
28、70年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）
29、 getUTCMilliseconds() 依据国际时间来返回毫秒（0到999） parse() 或得并返回自1970年1月1号凌晨到现在一共花掉了多少毫秒 setDate() 设置日 setMonth() 设置月 setFullYear() 设置年份 setYear() 用setFullYear()来取代 setHours() 设置小时 setMinutes() 设置分钟 setSeconds() 设置秒 setMilliseconds() 设置毫秒 setTime() 依据从1970年1月1号午夜到现在来设置毫秒 JS日期对象参考 方法（3）setUTCDate() 依据国际时间来设置日期
30、 setUTCMonth() 依据国际时间来设置月 setUTCFullYear() 依据国际时间来设置年份 setUTCHours() 依据国际时间来设置小时 setUTCMinutes() 依据国际时间来设置分钟 setUTCSeconds() 依据国际时间来设置秒 setUTCMilliseconds() 依据国际时间来设置毫秒 toSource() 显示对象的源代码 - toString() 将日期对象转换为字符串 toGMTString() 根据格林威治时间将Date日期对象转换为一个字符串。可以使用toUTCString()替代这种方法 toUTCString() 根据通用时间将一
31、个Date日期对象转换为一个字符串 toLocaleString() 根据本地时间将一个Date日期对象转换为一个字符串 UTC() 根据通用时间将日期计算为从1970年1月1日午夜至今所经过的时间（单位：毫秒） valueOf() 返回日期对象的原始值JS日期对象参考 属性 日期对象属性 constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 JS Array阵列(数组)对象用来在一单独的变量名称内存储一系列值。定义数组。下面的代码行定义了称为myArry的数组对象：var myArray=new Array()有两种方法来添加数组值（你可以添加你所需要
32、的值并定义你所想要的变量名称）第一种:var mycars=new Array()mycars0=Saabmycars1=Volvomycars2=BMW还可以通过引入一个整数来控制数组的大小： var mycars=new Array(3)mycars0=Saabmycars1=Volvomycars2=BMW 第二种：var mycars=new Array(“Saab”,“Volvo”,“BMW”) 注意：如果你在数组里指定数字或真/假值那么变量的类型将变为数字型或布尔型替换了字符串型。JS Array访问和修改数组访问数组。你可以指示数组的名称和索引数字来从数组中提出一个单独的元素。索
33、引数字从0开始。正如下面的代码行：document.write(mycars0) 将输出结果：Saab 修改现有的数组值。要修改现有数组的值只需要通过添加指定索引数字里的值mycars0=Opel 现在，下面的代码行：document.write(mycars0) 将输出结果：Opel JS数组对象参考方法数组对象方法 concat() 将两个或两个以上的数组值连接起来，合并后返回结果。 join() 将数组中的所有元素合并起来成为一条字符串。每个元素可以指定他们的分隔标记。 pop() 删除并返回数组最后的元素。push() 在数组的末尾加上一个或多个元素，并且返回新的数组长度值。rever
34、se() 将数组中的排列顺序做反向排列。shift() 删除并返回数组中第一个元素值。slice() 从现有数组中的某个元素开始依次返回。 sort() 对数组中的元素进行排序。 splice() 为数组删除并添加新的元素。toSource() 显示对象的源代码。 toString() 将数组转换为数组，并返回结果。 unshift() 为数组的开始部分加上一个或多个元素，并且返回该数组的新长度。 valueOf() 返回数组对象的原始值。 JS Boolean布尔对象用来把一个非布尔型的值转换为布尔值（真或假） 。布尔对象是布尔值的包装对象。我们用一新关键字定义一个布尔对象。下面的代码定义了
35、一个名为myBoolean的布尔对象：var myBoolean=new Boolean() 注意：如果布尔对象没有初始值或是0,-0,null, ,false,无定义的,或NaN,对象就设置为假.不然它就是真(哪怕是字符串值为“false”)。下面所有的代码建立的布尔对象的值都为false(假): var myBoolean=new Boolean()var myBoolean=new Boolean(0)var myBoolean=new Boolean(null)var myBoolean=new Boolean()var myBoolean=new Boolean(false)var
36、myBoolean=new Boolean(NaN) JS布尔对象参考 下面的就全为true(真):var myBoolean=new Boolean(true)var myBoolean=new Boolean(true)var myBoolean=new Boolean(false)var myBoolean=new Boolean(Richard)布尔对象方法 toSource() 显示对象的源代码toString() 将布尔值转换为字符串，并且返回结果 valueOf() 返回布尔对象的原始值 布尔对象属性 constructor 所建立对象的函数参考prototype 为对象添加属性
37、和方法 JS Math 数学对象允许你来执行一般数学上的任务（一些数学上的运算）。 数学对象包括数学值和函数。你不需要在使用前定义数学对象。 JS提提供了八个能从数学对象直接访问的数学值（常数）。它们是：E,PI,平方,根号,log2,log10,base-2 log of E, and base-10 log of E 。 除了使用数学值还可以用数学对象里的几个函数(方法) 。 JS数学对象参考方法（1） 数学对象方法abs(x) 返回数字的绝对值 acos(x) 返回数字的反余弦值 asin(x) 返回数字的反正弦值 atan(x) 返回位于-PI/2 和 PI/2 的反正切值atan2(
38、y,x) 返回（x，y）位于 -PI 到 PI 之间的角度 ceil(x) 返回 x 四舍五入后的最大整数 cos(x) 返回一个数字的余弦值 exp(x) 返回 Ex 值 floor(x) 返回 x 四舍五入后的最小整数 JS数学对象参考方法（2）log(x) 返回底数为E的自然对数 max(x,y) 返回 x 和 y 之间较大的数 min(x,y) 返回 x 和 y 之间较小的数 pow(x,y) 返回 yx 的值 random() 返回位于 0 到 之间的随机函数 round(x) 四舍五入后取整 sin(x) 返回数字的正弦值 sqrt(x) 返回数字的平方根 tan(x) 返回一个角度的正切值 toSource() 显示对象的源代码valueOf() 返回数学对象的原始值 JS 校验 JS可以用来校验HTML表单提交给服务器的数据（是否符合规范）。 典型的JS检查表单数据有以下：用户是否没有填写必须添加的内容？ 用户是否填写了有效的EMAIL地址？ 用户是否写了有效的日期？ 用户是否在应该填写数字的地方写了文字？