JavaScript语法专题知识讲座公开课一等奖市优质课赛课获奖课件_第1页
JavaScript语法专题知识讲座公开课一等奖市优质课赛课获奖课件_第2页
JavaScript语法专题知识讲座公开课一等奖市优质课赛课获奖课件_第3页
JavaScript语法专题知识讲座公开课一等奖市优质课赛课获奖课件_第4页
JavaScript语法专题知识讲座公开课一等奖市优质课赛课获奖课件_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

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

文档简介

第一章JavaScript语法课程目标熟悉JavaScript的数据类型： 数值型、字符型、逻辑型、空值掌握JavaScript的表达式与运算符掌握JavaScript控制语句、内部对象掌握JavaScript自定义对象体验项目——<显示问候语> 想知道如何在浏览器中显示早上（中午、晚上）好，同时显示系统的当前日期和星期数吗？打开记事本或者其他文本编辑器，输入相关代码，将其保存为后缀是“.html”的文件，通过浏览器打开该文件，就可以在浏览器窗口中看到如图所示的显示效果:知识结构1.1数据类型1.2表达式与运算符1.3控制语句1.4内部对象1.5自定义对象数据类型 JavaScript是一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript提供的脚本语言编程与C++非常相似，它只是去掉了C语言中有关指针等容易产生错误的内容，并提供了功能强大的类库。JavaScript的格式JavaScript对书写格式有如下要求：JavaScript语言区分大小写。JavaScript脚本程序须嵌入到Html文件中。JavaScript脚本程序中不能包含Html标记代码。使用JavaScript编写程序时，一行只能写一条语句。JavaScript语句末尾可以加分号，此时多条语句可以写在一行，语句中间以分号隔开。JavaScript脚本程序可以独立保存为一个外部文件，其中不包含<script></script>标签。JavaScript脚本程序的几种基本格式： 我们以在浏览器中显示“HelloWorld!!!”为例，说明JavaScript脚本程序的几种基本格式：（1） <script> document.write("HelloWorld!!!"); </script>（2） <scriptlanguage="JavaScript"> document.write("HelloWorld!!!"); </script>（3） <scriptlanguage="JavaScript"type="text/JavaScript"> document.write("HelloWorld!!!"); </script>（4） <scriptlanguage="JavaScript1.2">

document.write("HelloWorld!!!"); </script>（5） <scriptsrc="hello.js"></script> 语句document.write(“HelloWorld!!!”)保存在一个外部文件“hello.js”中（6） <scriptlanguage="JavaScript"> <!-- document.write("HelloWorld!!!"); --> </script>（7）使用JavaScript协议： <ahref="JavaScript:alert('HelloWorld!!!')">请单击</a>或：<ahref="#"onclick="alert('HelloWorld!!!')">请单击</a>或：<ahref="JavaScript://"onclick="alert('HelloWorld!!!')">请单击</a>下面是将JavaScript脚本加入Web文档中的例子：<html><head></head><body><scriptlanguage="JavaScript"> document.write("这是清华培训基地");</script></body></html>基本数据类型JavaScript的四种基本数据类型如下：数值：整数型、浮点数型逻辑值：布尔型（True或False）字符串型空值JavaScript采用弱类型的形式，因而一个数据变量或常量不必先做声明，而是在使用或赋值时确定其数据类型。常量整型常量 其整型常量可以使用十六进制、八进制和十进制的形式表示其值，例如：3721、0007、0xaff、（0Xaff）等实型常量 实型常量是由整数部分和小数部分组成，如12.32、193.98。可以使用科学计数法或标准方法表示：5E7、4e5、12.68等布尔值 布尔常量只有两种状态，True或False。它主要用来表示或说明一种状态，用于控制操作流程字符型常量 是使用单引号（‘’）或双引号（“”）括起来的一个或多个字符。如“ThisisabookofJavaScript”、“3245”、“ewrt234234”等字符型常量中也可以包含转义字符转义字符表转义字符意义\b退格（Backspace）\f换页（FormFeed）\n换行（NewLine）\r返回（CarriageReturn）\t制表符（Tab）\'单引号（'）\"双引号（"）\\反斜线（\）变量 变量的主要作用是存取数据、提供存放信息的容器。 对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 变量命名规则：首字符必须是大写或小写的字母或下划线（_）或美元符（$）。后续的字符可以是字母、数字、下划线或美元符。变量名称不能是保留字。长度可以是任意。区分大小写。约定：集中置顶。使用局部变量。易于理解：studentId避免混乱：usrname、usrName表达式与运算符表达式 在定义完变量后，就可以对它们进行赋值、改变、运算等一系列操作了，这一过程通常由表达式来完成。可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。运算符 运算符是完成操作的一系列符号，在JavaScript中的算术运算符有：“+”、“-”、“*”、“/”等；比较运算符有：“!=”、“==”等；布尔逻辑运算符，如：“！”（逻辑非）、“|”（位或）、“||”（逻辑或）；字串运算符，如：“+”、“+=”等。双目运算符单目运算符操作数1运算符操作数2运算符操作数操作数运算符算术运算符JavaScript中的算术运算符有单目运算符和双目运算符。双目运算符： +（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位与)、<<（左移）、>>（右移）、>>>（右移，零填充）。

单目运算符 ~（取补）、++（递加1）、--（递减1）比较运算符 比较运算符的基本操作过程是：首先对它的操作数进行比较，然后返回一个布尔值True或False。

>（大于）、<（小于）、 <=（小于等于）、 >=（大于等于）、 ==（等于）、!=（不等于）、 ===（值及类型等于）、!==（值及类型不等于）

布尔逻辑运算符 在JavaScript中增加了几个布尔逻辑运算符 !（逻辑非）、&=（与之后赋值）、&（位与）、 |=（或之后赋值）、|（位或）、 ^=（异或之后赋值）、^（位异或）、 ?：（三目操作符）、||（逻辑或）、==（等于）、!=（不等于）其中三目操作符的主要格式如下：操作数？结果１：结果２

若操作数的结果为真，则表达式的值为结果1，否则为结果2。控制语句 JavaScript常用的程序控制结构及语句 if语句的基本格式如下： if（表达式） { 语句段； }if-else语句的基本格式如下： if（表达式） { 语句段1； } else { 语句段2； }若表达式的值为True，则执行语句段1；否则执行语句段2。if-else语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。表达式中必须使用关系运算来实现判断，它是由一个布尔值来估算的。它将零和非零的数分别转化成False和True。若if后的语句有多行，则必须使用花括号将其括起来。if语句的嵌套if-else-if语句的基本格式如下：if（表达式1） 语句1；elseif（表达式2） 语句2；……elseif（表达式n） 语句n；else 语句n+1；

for循环for循环语句的基本格式： for（初始化；条件；增量） { 语句集； }功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。说明：初始化参数：告诉循环的开始位置，必须赋予变量的初值。条件：用于判别循环的条件。若条件满足，则执行循环体，否则跳出。增量：主要定义循环控制变量在每次循环时按什么方式变化。三个主要语句之间，必须使用分号分隔。

<script>for(vari=5;i>0;i--){ document.write("i=",i,"<BR>");}</script>while循环while循环语句的基本格式： while（条件） { 语句集； }while循环语句与for循环语句一样，当条件为真时，重复循环，否则退出循环。<script> vari=5; while(i>0) { document.write("i=",i,"<BR>"); i--; }</script>do...while语句do…while语句的基本格式： do{

语句集； }while（表达式）<script> vari=5; do{ document.write("i=",i,"<BR>"); i--; }while(i>0)</script>break和continue语句 与C++语言相同，使用break语句使得循环从for或while循环中跳出，continue语句使得程序跳过循环内剩余的语句而进入下一次循环。 下面的例子使用break语句跳出循环，实现在while循环中只显示i=5、i=4，当i=3时跳出循环。<script> vari=5; while(i>0) { if(i==3) break; document.write("i=",i,"<BR>"); i--; }</script> 下面的例子将用continue语句，实现在while循环中显示i=4、i=2、i=1、i=0，当i=3时不输出，直接进入下次的循环。<script> vari=5; while(i>0) { i--; if(i==3) continue; document.write("i=",i,"<BR>"); }</script>内部对象 JavaScript是基于对象的（Object-Based），而不是面向对象的（Object-Oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 虽然JavaScript语言是一门基于对象的语言，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，编写功能强大的Web文档。对象的基础知识对象的基本结构 JavaScript中的对象是由属性（properties）和方法（methods）两个基本元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象由浏览器环境中提供创建新对象 一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。有关对象的操作语句for...in语句with语句this关键字new运算符对象属性的引用对象属性的引用可由下列三种方式之一实现：使用点（.）运算符通过对象的下标实现引用通过字符串的形式实现对象的方法的引用在JavaScript中对象方法的引用是非常简单的，比如： ObjectName.methods()假如引用university对象中的showmy()方法，则可使用： document.write(university.showmy())若引用Math内部对象中的cos()方法，则可以用： with(Math) document.write(cos(35)); document.write(cos(80));若不使用with则引用时相对要复杂些： document.write(Math.cos(35)) document.write(Math.cos(80))自定义对象 使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求助于其它多媒体工具，就能完成许多复杂的工作。对象的定义JavaScript对象的定义，其基本格式如下：functionObject（属性表）p1=prop1p2=prop2...this.meth=functionName1;this.meth=functionName2;...以下是一个关于university对象的定义：functionuniversity(name,city,Url){ =name; this.city=city; this.Url=Url;}创建对象实例一旦对象定义完成后，就可以为该对象创建一个实例了： NewObject=newObject(); 其中NewObject是新的对象，Object是已经定义好的对象。用上面的university对象创建实例：varU1=newuniversity("陕西省","西安市","");varU2=newuniversity("西安电子科技大学","西安","");

对象方法的使用 在对象中除了使用属性外，有时还需要使用方法。对象的方法就是一个函数FunctionName，通过它实现自己的意图。<script> functionuniversity(name,city,Url) { =name; this.city=city; this.Url=Url; this.showuniversity=showuniversity; } functionshowuniversity() { varstr=+""+this.city+""+this.Url; document.write("<LI>"+str); } varU1=newuniversity("陕西省","西安市",""); varU2=newuniversity("清华IT","北京","http:///"); U1.showuniversity(); U2.showuniversity();</script>

利用对象原型（prototype）为默认对象定义属性

对象原型（prototype）的好处是可以接收变量传来的值，例如下例中将实现一个字符串的替换，其中的对象原型用于接收一个函数的返回值。<script> Stotype.replaceAll=strReplace; functionstrReplace(findText,replaceText) { varstr=newString(this); while(str.indexOf(findText)!=-1){ str=str.replace(findText,replaceText); } returnstr; } myStr="告诉你—如果你正在做WEB开发,那么"+"JavaScript"+"会让你事半功倍,功力大增."; document.write("<LI>原稿是：<BlockQuote>"+myStr+"</BlockQuote>"); document.write("<LI>利用replace()将「你」改成「您」："+"<BlockQuote>" +myStr.replace('你','您')+"</BlockQuote>"); document.write("<LI>利用自定义的字符串方法-全部取代" +"<BlockQuote>"+myStr.replaceAll('你','您')+"</BlockQuote>");</script>实践项目——<显示问候语> 首先输入JavaScript标记，然后用newDate()生成一个日期对象。由于需要显示早上（中午、晚上）

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

温馨提示

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

最新文档

评论

0/150

提交评论