js入门教程.docx

《js入门教程.docx》由会员分享，可在线阅读，更多相关《js入门教程.docx（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript 入门教程 V 1.0编著：朱子浩简介：（1）JavaScript是运行的客户机上的脚本语言（2）JavaScript一般被用来改进网页设计（特效），验证表单，检测浏览器等等Javascript基础语法篇实现：如何将JavaScript嵌入html网页中？Document.write(“HELLO WORLD”);上边的代码运行的结果：HELLO WORLD解释：如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type 属性来定义脚本语言）。这样就可以告诉浏览器，js程序从何处开始,从何处结束。Document.write是js命令

2、，用于向页面输出信息。如果没有标签，那么浏览器会把Document.write(“HELLO WORLD”)当做纯文本输出。那些不支持 js 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签:正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译放置：（1）在html中如何放置js？页面中的脚本会在页面载入浏览器后立即执行。我们并不是想所有的脚本都这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。（2）位于 head 部分的脚本。当脚本被调用时，或者当事件被触

3、发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。Document.write(“HELLO WORLD”);（3）位于 body 部分的脚本。在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。Document.write(“HELLO WORLD”);（4）同时在head和body部分的脚本。你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。Document.write(“head部分”);Document.write(“body部分”);（5）调用外部

4、js脚本。有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。注意：外部文件不能包含 标签。然后把 .js 文件指定给 标签中的 src 属性，就可以使用这个外部文件了：注释：（1）单列注释。/这是标题头document.write(“this is a title”);/这是段落document.write(“this is a content”);（2）多列注释。/*下面的代码将输出一个标题，一个段落*/document.write(“this

5、is a title”);document.write(“this is a content”);变量：（1）什么是变量？变量是存储信息的容器，那么在数学里边也经常使用到变量，我们还记得在数学中我们使用变量是需要先声明一个变量的，那么我们的js脚本语言使用变量只是需要先声明，他们区别只在于声明的方式不同。（2）声明（创建）js变量和赋值。在js中我们使用var声明变量，声明变量的同时我们可以为变量赋一个默认值：Var a;Var b=”student”;Var c=3;那么我们看见以上我们声明了3个变量，一个没有赋值，一个赋的String类型的值，一个是int类型的值，那有些同学就要问了，是不

6、是写错了啊？这里，我很明确的告诉大家，js是一门弱类型的语言，它是不区分类型的，我们也可以不声明，直接使用，那么它会自动为我们声明，不过，鉴于一个编程的严谨性，我建议大家预先声明再使用。当然js也可以重复声明，原来的值是不会丢失的，不过一个优秀的程序员，应该是不会犯这种低级的错误吧。注意：js脚本变量的声明是区分大小写的：var a和var A 是两个不同的变量（3）js变量的运算。Var A=3;Var B;Var C;B=A+3;C=B+8;正如数学一样，在js脚本中，你可以使用变量来做运算。现在上边的例子你猜到B和C的值了吗？运算符：（1）运算符类型。算术运算符赋值运算符比较运算符逻辑运

7、算符条件运算符（2）算术运算符详解。算术运算符用于执行变量与/或值之间的算术运算。给定 y=5，下面的表格解释了这些算术运算符：运算符描述例子结果+加x=y+2 x=7 -减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1+累加x=+yx=6 -递减x=-yx=4 （3）赋值运算符详解。赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符：运算符例子等价于结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=

8、x%=yx=x%yx=0（4）用于字符串的 + 运算符。“+” 运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。Var a=”where are you going?”;Var b=”I will going to school.”;Var c=a+b;那么你猜到c的值了么？c=”where are you going?I will going to school.”;(5)字符串和数字之间的加法运算。Var x=5+5;Document.write(x);Var x=”5”+”5”;Document.write(x);Var x=”5

9、”+5;Document.write(x);Var x=5+”5”;Document.write(x);赶快动手试一下吧。（6）比较运算符。比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面的表格解释了比较运算符：运算符描述例子=等于x=8 为 false=全等（值和类型）x=5 为 true；x=5 为 false!=不等于x!=8 为 true大于x8 为 false小于x=大于或等于x=8 为 false=小于或等于x=8 为 trueVar x=20;If(x21)Document.write(“he is too young!”);（7）逻辑运算符。逻辑运算符用于

10、测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：运算符描述例子&and(x 1) 为 true|or(x=5 | y=5) 为 false!not!(x=y) 为 true（8）条件运算符。JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。Var x=1;Var y=2；X=(y)?value1:value2声明变量x,y；x等于y吗？如果是true返回x的值value1，否则返回x的值value2.逻辑判断：(1)条件判断种类。在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。在 JavaScript

11、中，我们可以使用下面几种条件语句：If语句：在一个指定的条件成立时执行代码。if.else 语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if.else if.else 语句：使用这个语句可以选择执行若干块代码中的一个。switch 语句：使用这个语句可以选择执行若干块代码中的一个。（2）if详解。语法： if(条件)执行代码块案例： Var a=10;Var b=19;If(a=b)Document.write(“You are too great!”); （3）ifelse详解。 语法：if(条件)条件满足时执行的代码块 else条件不满足时执行的代码块 案例：Var a

12、=10;Var b=19;If(a=b)Document.write(“You are too great!”);elseDocument.write(“I like this”); （4）ifelse ifelse详解。语法：if(条件1)条件1满足时执行的代码块else if(条件2)条件2满足时执行的代码块else都不满足时执行的代码块案例：Var a=10;Var b=19;If(ab)Document.write(“I like this”);elseDocument.write(“It is too bad!”); (5)switch详解。语法：switch(n)Case 1:执行

13、代码块1BreakCase 2:执行代码块2BreakDefault:不满足以上两个case的执行的代码块案例：Var a=10;switch(a)case 1:document.write(“first”);break;case 2:document.write(“second”);break;default:document.write(“other”); 消息框：(1)消息框类别。警告框确认框提示框(2)警告框。Alert(“文本”);(3)确认框。Confirm(“文本”);(4)提示框。Prompt(“文本”,”默认值”);函数：(1)将脚本编写为函数，就可以避免页面载入时执行该脚本

14、。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数可以在页面任何地方定义。案例：Functiontest()Alert(“消息框”); （2）如何定义函数语法：function test(var a,var b)要执行的程序Var a和var b是函数定义的要转入的值或者变量，大括号定义了函数的开始和结束注意：无参函数必须在后边加括号语法：function test()要执行的程序（3）return语句Return语句用来规定函数返回的值，因此,需要返回某个值的

15、函数必须使用这个return语句语法：function prod(a,b)X=a*b;Return x;所以，当您调用prod函数的时候需要传入ab两个参数值（4）javascript变量的生存周期。当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。循环遍历:(1)for循环：将一段代码循环执行指定的次数。语法：fo

16、r(变量=开始值;变量=结束值;变量=变量+进步值)需执行的代码实例：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。For(var i=0;i10;i+)Document.write(“The number is ”+i);Document.write(“”);结果：The number is 0 The number is1 The number is 2The number is 3 The number is 4 The number is 5 The number is 6The

17、number is 7 The number is 8 The number is 9（2）while循环：当指定条件为true时循环执行代码。语法：while(变量=结束值)需要执行的代码实例：while(i10)Document.write(“The number is ”+i);Document.write(“”);结果：The number is 0 The number is1 The number is 2The number is 3 The number is 4 The number is 5 The number is 6The number is 7 The number

18、 is 8 The number is 9（3）dowhile循环语法：do.while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do.while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：do需执行的代码while(变量=结束值)案例：Var i=0;doDocument.write(“The number is ”+i);Document.write(“”);while(i=1)结果：The number is 0; The n

19、umber is 1;（4）break语句详解。案例：Var i=0;For(i:i=10;i+)If(i=3)Break;Document.write(“The number is ”+i);Document.write(“”);结果：The number is 0; The number is 1; The number is 2;（5）continue语句详解: continue 命令会终止当前的循环，然后从下一个值继续运行。案例：Var i=0;For(i:i=5;i+)If(i=3)continue;Document.write(“The number is ”+i);Documen

20、t.write(“”);结果：The number is 0; The number is 1; The number is 2;The number is 4; The number is 5;(6)forin循环详解：声明用于对数组或者对象的属性进行循环操作，循环中的代码每执行一次，就会对数组或者对象的属性进行一次操作。语法：for(变量 in 对象)在此执行代码实例：Var x;Var listtest=new AyyayList();Listttest0=”a”;Listttest1=”b”;Listttest2=”c”;For(x in listtest)Document.write

21、(listtestx+”); 事件：(1)事件是可以被javascript侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件举例： 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键注意：事件通常与函数配合使用，当事件发生时函数才会执行（2）常用事件案例。案例1：onFouces,onBlur和onChange这三个事件通常相互配合来验证表单下面是一个使用 onChange 事件的例子。用户一旦改变了

22、域的内容，checkMail() 函数就会被调用 案例2：onSubmit用于提交表单之前验证表单域, 下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。案例3：onMouseOver和onMouseOut：onMouseOver 和 onMouseOut 用来创建“动态的”按钮下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就

23、会弹出一个警告框： 异常捕获：（1）异常捕获类型。使用Try.catch.异常捕获（主要适用于ie5以上内核的浏览器，也是最床用的异常捕获方式）使用onerror事件异常捕获，这种捕获方式是比较古老的一种方式，目前一些主流的浏览器暂不支持本文基于失效开发的前提，所以这个地方只讲解trycatch异常捕获，有兴趣的同学可以自己找找onerror事件的捕获方式（2）try.catch.异常捕获详解：try部分包含要运行的代码，catch部分包含错误运行时要执行的代码。语法：try/在此执行的代码catch(err)/在此处理错误的代码案例：下面一个例子，由于误写了 alert()，所以错误发生了。

24、不过这一次，catch 部分捕获到了错误，并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。Function test()TryAlerrtt(“welcome dear”);catch(err)Alert(“此页面出现了一个错误，描述：”+err.description);特殊字符：（1）在javascript中我们经常使用反斜杠来插入一些特殊字符，比如在文本字符串中插入省略号、换行符、引号和其他特殊字符。案例：var txt=”what are you going “to” do?”; Alert(“txt”);输出：what are you g

25、oing如何解决这样的问题呢？要解决这个问题，就必须把在 to 中的引号前面加上反斜杠 ()。这样就可以把每个双引号转换为字面上的字符串。案例：var txt=”what are you going “to” do?”; Alert(“txt”);输出：what are you going “to” do?(2)特殊字符的插入是非常简单易懂的，下边这些特殊字符也都可以使用反斜杠添加到文本字符串中。单引号双引号&和号反斜杠n换行符r回车符t制表符b退格符f换页符以上就是javascript基本用法的相关知识点，还是非常简单的吧，相信同学们，看到这里大家一定感慨原来javascript是这么简单啊

26、，那么首先，我要先恭喜各位，已经正式进入javascript编程，但是，我同时也要告诉大家，这是进入javascript编程的基本语法，换句话说，我们还没有进入逻辑语法，高级javascript以及对象，图像的处理。不过大家不用着急，本教程写到这里是希望大家把基础掌握熟练了，这对我们接下来的研究很有帮助。谢谢。Javascript对象篇对象简介：（1）javascript是面向对象的编程语言（oop），对象有自己的属相和方法。字符串对象：（1）属性：属性指与客户有关的值。在下面的例子中，我们使用字符串对象的长度属性来计算字符串中的字符数目。案例：Var txt=”contratulations

27、”;Document.write(txt.length); 输出：15（2）方法：方法指对象可以完成的行为或者功能。在下面的例子中，我们使用字符串对象的 toUpperCase() 方法来显示大写字母文本。案例：Var txt=”contratulations”;Document.write(txt.toUpperCase(); 输出：CONTRATULATIONS日期对象：（1）日期的定义。 Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：Var mydate=new Date();注意：Date 对象自

28、动使用当前的日期和时间作为其初始值。(2)日期对象的操作。在下面的例子中，我们为日期对象设置了一个特定的日期 (2012 年 2 月 2 日)：案例1：var mydate=new Date(); Mydate=setFullYear(2012,1,2);注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 2月，则参数应该是 1。在下面的例子中，我们将日期对象设置为 5 天后的日期：案例2：var mydate=new Date(); Mydate.setDate(mydate.getDte()+5);注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换

29、(3)比较日期。日期对象也可用于比较两个日期。下面的代码将当前日期与 2012 年2 月 2 日做了比较：Var mydate=new Date();Mydate.setFullDate(2012,1,2);Var today=new Date();If(todaymydate)Alert(“today is”+today);elseAlert(“today is”+mydate);数组对象：（1）数组的定义和赋值：数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：Var myarray=new Array

30、();有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。第一种方式：Var mycars=new Ayyar();Mycars0=”Saab”;Mycars1=”Volvo”;Mycars2=”BMW”;也可以使用一个整数自变量来控制数组的容量：Var mycars=new Ayyar(3);Mycars0=”Saab”;Mycars1=”Volvo”;Mycars2=”BMW”;第二种方式：Var mycars=new Ayyar(“Saab”,”Volvo”,”BMW”);注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变

31、量，而不是字符变量。(2)访问数组。通过指定数组名以及索引号码，你可以访问某个特定的元素。案例：document.write(mycars1);输出：Volvo;(3)修改已有数组中的值。只要向指定下标号添加一个新值即可：Mycars0=”Opel”;输出 document.write(mycars0);Opel;逻辑对象：（1）创建Boolean对象Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：Var myboolean=new Boolean();

32、注意：如果逻辑对象无初始值或者其值为 0、-0、null、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 false 时）！下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。var myBoolean=new Boolean();var myBoolean=new Boolean(0);var myBoolean=new Boolean(“”);var myBoolean=new Boolean(null);var myBoolean=new Boolean(false);var myBoolean

33、=new Boolean(NaN);下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。var myBoolean=new Boolean(1);var myBoolean=new Boolean(true);var myBoolean=new Boolean(“true”);var myBoolean=new Boolean(“false”);算数对象：(1) 算数值。Math（算数）对象的作用是：执行普通的算数任务。Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。JavaScript 提供 8 种可被 Math 对象访问的算数值： 常数 圆周率 2 的平方根 1/2 的平方根 2 的自然对数 10 的自然对数 以 2 为底的 e 的对数 以 10 为底的 e 的对数这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应） Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E（2）算数方法。除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。实例1：下面的例子使用了 Math 对象的 round 方法对一个