网页制作5Javascript基本语法市公开课获奖课件省名师优质课赛课一等奖课件.ppt

学习目标n了解Javascript概念n学习编写Javascript程序n学习使用Javascript控制流程及函数n学习使用Javascript内置函数n学习使用Javascript系统函数1/38Javascript概述n什么是Javascript?uJavascript是一门基于对象脚本语言u能够用在全部主流浏览器u能够对用户输入进行对应动作,增加交互性u能够实现网页特效2/38在html中嵌入Javascriptn内部嵌入u在html中只要加入标识,然后在标识间插入javascript代码比如:3/38在html中嵌入Javascriptn外部嵌入u能够将javascript代码放在单独文件里,然后在网页中调入。比如:uu1.js文件中写：udocument.write(“helloworld)4/38在html中嵌入Javascriptn直接嵌入u能够直接将代码嵌入html标识中比如:5/38 变 量（1/2）n变量u变量常被用来存放数据u变量名区分大小写u变量名应该是字母,数字或者下划线“_”，长度小于等于255个字符，第一个字符必须为字母或者下划线u不能够使用javascript用到保留字，比如：for、var等比如变量申明（也能够不预先申明）:varusername=“tom”n/注释一行n/*/注释内部多行6/38变量（2/2）n判断以下变量是否有效nabcdefghijklmnopqrstuvwxyz、ab、a+b、_ab、2ab、FOR、var不能接收变量：不能接收变量：2ab、a b、a+b、var能够接收变量：能够接收变量：abcdefghijklmnopqrstuvwxyz、_ab、FOR7/38数据类型（1/3）nJavascript中数据类型u数值:包含整型数和浮点数u字符串型:应该用双引号(“”)或者单引号()括起能够在字符串中加上“n”来代表换行效果u布尔值:使用true或者false表示u空值(null)比如:varprice=10varprice=“10”8/38数据类型（2/3）n整数整数qdate=16qdate=020qdate=0 x10或或0X10q都都是是定定义义date为为16，分分别别使使用用十十进进制制、八八进进制制（以以0零零开头）和十六进制开头）和十六进制n浮点数浮点数qnumber=16.0qnumber=1.6e1q都是定义都是定义number等于等于16，第二种使用指数方法来申明，第二种使用指数方法来申明9/38数据类型（3/3）n字符串:以下四步完全等同。以下四步完全等同。qvarastring=”123”qvarastring=123qastring=”123”qvarastringastring=”123”n布尔数布尔数q表示数据真（表示数据真（true）或者假（或者假（false）。）。q注注意意：大大小小写写敏敏感感，真真是是true，不不是是True。也也不不是是1或或者者0，不过假如将其进行计算，还是相当于，不过假如将其进行计算，还是相当于1和和0。10/38运算符（1/3）n运算符u数值运算符:用于数学运算,如+,-,*,/,%等u赋值运算符:等号在编程语言中为赋值,如a=10u比较运算符:用于条件判断,如=,!=,等u逻辑运算符:用于比较判断,如&(与),|(或),!(非)等u字符串运算符:+号用于字符串运算时,为两个字符串连接u其它运算符:递增运算+,递减运算-11/38运算符（2/3）n例：qa=1+2qb=1+2qc=1+2qalert(a)qalert(b)qalert(c)12/38运算符（3/3）n分为二类：q 对数字而言，加法就是把两个数字加起来。n1+2=3q对字符串而言，加法就是把字符串连接起来。n“a”+”b”=”ab”n“1”+”2”=”12”q另外：把字符串和数字用“+”连结在一起，其结果是一个字符串，不会报错。但不推荐不一样数据类型变量间作运算，以免发生不可预测错误。13/38函 数n函数u函数就是一段可重复使用代码块,它在使用时必须被调用u定义函数function函数名(参数1,参数2,)函数体说明:参数是用来接收外部传给函数值u调用函数调用函数时要直接使用函数名,而且依据函数申明决定是否使用参数14/38程序第一步（1/3）nnnn表示一个按钮对象，按钮对象显示名称为“输出”，当按下鼠标后调用事件函数fun（），不然不执行函数fun（）。15/38程序第一步（2/3）nfunctionfun1()nndocument.write(3);nn表示函数fun1（）主体，中间调用显示数字3。ndocument.write()是文档对象输出函数，其功效是将括号中字符或变量值输出到窗口。16/38程序第一步（3/3）nalert(3);n表示弹出警告窗口，显示数字3。n注意：假如是显示字符，必须有引号。nwindow.open(URL);n表示打开另一新窗口。可在（）中写上打开窗口中显示文件，能够是图片，或者是html文件都可。17/38判断语句（1/2）uif.else语句1)if语句主要用于条件判断,条件为真或者为假时分别执行不一样语句2)基本语法if(条件表示式)条件为真时执行此语句else条件为假时执行此语句18/38判断语句（2/2）nswitchcase语句1）其执行过程是，当变量与case条件值相等时，则执行其后全部语句，而且当碰上下一个case时也不再加以判断相等是否2）基本语法switch（变量名称）case条件值1：执行语句1；breakcase条件值2：执行语句2；breakdefault：执行语句nbreak语句作用：帮助跳出该判断语句，不再执行后面语句。default语句作用：表示默认执行语句，则当全部case值都不满足时则执行该语句。19/38循环语句n循环语句ufor循环1)for循环语句是用来执行指定次数同一段代码2)基本语法for(变量初始值;是否继续循环条件;变量自增)循环代码uwhile循环1)while循环也是用来循环,条件为真时执行指定代码2)基本语法while(是否循环条件)条件为真时循环代码do条件为真时循环代码while(是否循环条件)20/38for循环n语法格式以下：qfor（表示式1；表示式2；表示式3）语句q执行过程以下：q1)先求解表示式1。q2)求解表示式2，若其值为真，则执行内嵌语句，然后执行第3）步；若为假，则结束循环，执行第5）步。q3)求解表示式3。q4)转回第2）步继续执行。q5)循环结束，执行for语句下面语句。nbreak语句：能够用来跳出整个循环。ncontinue语句：能够用来跳出此次循环。21/38 Javascript对象概述n对象概述uJavascript是一门基于对象脚本语言,它将网页每个部分都看成一个对象,对象用来控制javascript控制网页组成部分实体,由属性和方法两部分组成uJavascript对象类型1)关键对象:主要包含javascript最基本数据类型2)浏览器对象:主要包含网页各个组成元素u引用对象路径1)用户创建:使用new语句生成2)由浏览器提供3)使用javascritp自带对象说明:用户能够使用this关键字来表示当前对象22/38使用Javascript关键对象数组（1/3）nArray对象1)Array对象是数组对象,数组是用来存放多个变量集合.2)创建Array对象firstArray=newArray():直接生成Array对象,没指定长度firstArray=newArray(size):生成指定长度Array对象说明:生成了Array对象后能够使用，如firatArrayn(n为数字标示第n个，从0开始，到size-1结束（必须预先申明，但能够不指定size）3)常见数组方法length方法:返回数组长度，即元素个数23/38使用Javascript关键对象数组（2/3）n在申明数组时，还能够在其括号内直接输入值。na=newArray()na0=1na1=2na2=3n等价于：na=newArray(1,2,3)24/38n例：na=newArray()na0=1na1=2na2=3nb=newArray(a,b,c)nalert(a0)nalert(a)nalert(b)其其结结果果在在网网页页上上依依次次弹弹出警告框：出警告框：说明：说明：v使使用用数数组组时时，能能够够写写清清楚楚数数组组下下标标单单个个数数值值使使用用，也也能能够够只只写写数数组组名将数组整个使用。名将数组整个使用。v数数组组赋赋值值时时，假假如如是是数数字字能能够够不不加加引引号号，字字符符则则必必须须加加引引号号，不不然然报错。报错。使用Javascript关键对象数组（3/3）25/38数组函数lengthn例：na=newArray()na0=3na9=1nalert(a.length)n/*注意：其中a.length不能用引号，不然为打印字符串。*/结果显示：分分析析：数数组组下下标标从从0开开始始，到到9结结束束，即即使使中中间间没没存存数数，不不过过还还是是占占用用一一部部分分内内存存空空间间，所所以以长长度度为为10。26/38数组函数数组函数concatn该该函函数数用用来来将将两两个个已已存存在在数数组组连连接接成成一个新数组。一个新数组。27/383.7 数组函数数组函数concatn例：例：nn28/38数组函数数组函数toString和和joinn用来把数组中全部数值连接成一个字符串。nn语法格式如下：n字符串名=数组名.toString()n字符串名=数组名.join(分隔符)n说明：其中，前者为逗号分隔，后者可以设置其分隔符，但默认值也为逗号。分隔符可认为数字或字符串，如为字符串要用引号。29/38数组函数数组函数reversen将将整整个个数数组组中中元元素素次序转置。次序转置。n注意：注意：n是是以以元元素素为为单单位位次次序序转转置置，数数组组元元素本身次序不变。素本身次序不变。所以第二张图正确。所以第二张图正确。30/38数组函数数组函数reversennn31/38使用Javascript关键对象ustring对象(字符串对象)1)字符串对象主要用来处理字符串和子字符串2)创建字符串对象varstring1=“Thisisatest:生成对象并赋值varstring1;string1=“Thisisatest”:直接给变量赋值使之成为字符串对象3)字符串对象属性length属性:用来返回字符串长度，如string1.length=1432/38使用Javascript关键对象ustring对象(字符串对象续)4)字符串对象方法indexOf()方法:返回string对象内第一次出现子字符串字符位置，如string1.indexOf(t)=10substr()方法:返回一个从指定位置开始指定长度子字符串，如string1.substring(1,3)=“his”substring()方法:返回位于string对象中指定位置字符串，如string1.substring(1,3)=“hi”参加示例：打印机参加示例：打印机33/38使用Javascript关键对象uMath对象(数学对象)1)Math对象主要用于提供基本数学函数和常数2)创建Math对象Math对象是不能用var关键字来创建,其属性和方法能够直接使用3)Math对象常见方法random():返回位于0-1之间随机数round():返回四舍五入整数值，如Math.round(1.7)=2abs():返拒绝对值参加示例：计算器参加示例：计算器34/38使用Javascript关键对象uDate对象1)Math对象主要用于取得跟时间或日期相关参数值2)创建Date对象date=newDate():生成Date对象，如q年，月，日day=newDate(,4,15)q年，月，日，时，分，秒day=newDate(,4,15,19,18,23)说明：省略时间只有日期写法，系统自动将时间设置为0时0分0秒。若省略全部datetime信息，则系统自动将当初日期与时间赋予其值。月份设置类似数组下标，0代表1月，1代表2月11代表12月，12则顺延至第二年1月。35/38使用Javascript关键对象nDate对象（续）n3)Date对象常见方法ngetYear():获得当前年份ngetMonth():获得当前月份ngetDate():获得日期ngetHours():获得小时数，二十四小时制ngetMinutes():获得分钟数ngetSeconds():获得秒数ngetDay():取星期，0代表星期日，6代表星期六n又有setYear():设置当前年份，及其他类似设置n引用方法：objectname.functionname()n其中objectname为Date对象变量名，functionname为函数名,即以上所列函数参见示例：日历36/38总结n了解Javascript概念n学习编写Javascript程序n学习使用Javascript控制流程及函数n学习使用Javascript内置函数n学习使用Javascript系统函数n参加示例：提交参加示例：提交37/38练习及提问时间38/38