《Web前端设计实训》课件-任务18 JavaScript的应用_第1页
《Web前端设计实训》课件-任务18 JavaScript的应用_第2页
《Web前端设计实训》课件-任务18 JavaScript的应用_第3页
《Web前端设计实训》课件-任务18 JavaScript的应用_第4页
《Web前端设计实训》课件-任务18 JavaScript的应用_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

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

文档简介

任务18JavaScript的应用学习目标掌握JavaScript的函数使用JavaScript的基本语法JavaScript的语言基础1.事件及事件驱动2.JavaScript对象了解:学习目标任务目标实战演练——制作商品精选模块任务目标强化训练——制作焦点图广告知识准备1.JavaScript简介JavaScript：Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。特点：不需要编译，直接嵌入在HTML页面中，实现实时的、动态的、可交互的网页效果。作用：表单验证、网页动画效果、焦点图切换效果、浮动广告窗口、旋转文字特效。知识准备1.JavaScript简介JavaScript引入方式一：内嵌式<head><script>//此处为JavaScript代码</script></head>知识准备示例：内嵌式引入<!doctypehtml><html><head><metacharset="utf-8"><title>内嵌式引入</title><script>document.write("此处为JavaScript代码。");//输出语句。</script></head><body><p>此处为网页内容。</p></body></html>知识准备1.JavaScript简介JavaScript引入方式二：外链式<head><scriptsrc="js文件的路径"></script></head>知识准备示例：外链式引入<!doctypehtml><html><head><metacharset="utf-8"><title>外链式引入</title><scriptsrc="18-2.js"></script></head><body><p>此处为网页内容。</p></body></html>//JavaScriptDocumentdocument.write("此处为js文件代码。");//输出语句。“18-2.js”文件代码：

提示：外部脚本不能包含<script>标签。知识准备JavaScript基本语法执行顺序：JavaScript程序按照在HTML文件中出现的顺序逐行执行。大小写敏感：严格区分字母大小写。如：myname和myName是两个不同的变量。每行语句结尾的分号可有可无：为了规范，应以分号结束。注释：1.JavaScript简介//单行注释文本/*单行注释文本*//*多行注释文本多行注释文本*/知识准备2.JavaScript语言基础关键字：关键字不能作为变量名和函数名使用。abstractargumentsbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumevalexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewithyield

知识准备2.JavaScript语言基础标识符：用来命名变量和函数。命名规则：第一个字符必须是字母、下划线（_）或美元符号（$）第一个字符其后的字符可以是字母、数字、下划线或美元符号标识符不能和JavaScript中的关键字同名不能包含空格等特殊符号合法：i、user_name、_name、$name、n1不合法：1a、mn、55、long知识准备2.JavaScript语言基础常量：程序运行时，值不能改变的量为常量（Constant）。语法格式：const常量名:数据类型=值;知识准备2.JavaScript语言基础变量：程序中一个已经命名的存储单元，为数据操作提供存放信息的容器。命名规则：必须以字母或下划线开头，中间可以是数字、字母或下划线变量名不能包含空格、加、减等符号不能使用JavaScript中的关键字JavaScript的变量名严格区分大小写，如myname不等同myName知识准备2.JavaScript语言基础变量的声明与赋值：var变量名;建议：变量先声明，后使用vara,b,c;//同时声明a，b，c三个变量。vara=1,b=2,c=3;//同时声明a，b，c三个变量，并分别对其进行初始化赋值。知识准备3.JavaScript函数函数：计算机程序中由多条语句组成的逻辑单元定义：<script>

function

函数名([参数1,参数2,……]){

函数体[return表达式;]}</script>调用：函数名([参数1,参数2,……])注意：关键字function

必须小写知识准备示例：函数的调用<!doctypehtml><html><head><metacharset="utf-8"><title>函数的调用</title><script>functionshow(){alert("欢迎学习JavaScript！");//alert()方法可以弹出警告框

}</script></head><body><!--鼠标点击事件调用函数show()--><inputtype="button"value="点击我"onClick="show()"></body></html>知识准备4.事件及事件驱动事件：用户与Web页面交互时产生的操作，比如按下鼠标、移动窗口、选择菜单等。事件驱动：当事件发生后，会由此而引发一连串程序的执行，这些程序称为事件处理程序。常用事件：鼠标事件、键盘事件、表单事件、页面事件知识准备4.事件及事件驱动

类别事件当以下情况发生时，触发此事件鼠标事件onclick鼠标点击某个对象ondblclick鼠标双击某个对象onmousedown某个鼠标按键被按下onmouseup某个鼠标按键被松开onmouseover鼠标被移到某元素之上onmousemove鼠标被移动onmouseout鼠标从某元素移开知识准备4.事件及事件驱动类别事件当以下情况发生时，触发此事件键盘事件onkeydown按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。onkeyup用户放开任何先前按下的键盘键时发生。onkeypress按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。知识准备4.事件及事件驱动类别事件当以下情况发生时，触发此事件表单事件onblur元素失去焦点onchange元素失去焦点且内容发生改变onfocus元素获得焦点onreset表单被重置时onsubmit表单提交时页面事件onload当页面加载完成时onunload当页面卸载时知识准备示例：事件及事件驱动<script>functionchangetext(id){id.innerHTML="鼠标未移开！";//innerHTML属性用于设置或返回指定标签之间的HTML内容。

}functionresettext(id){id.innerHTML="鼠标已移开！";}</script><body><h1onmouseover="changetext(this)"onmouseout="resettext(this)">鼠标已移开！</h1></body>知识准备5.JavaScript对象对象：“一切皆对象”，如字符串、数值、函数、数组等属性：用来描述对象特性的数据，即若干变量方法：用来操作对象的若干动作，即若干函数例如：一个Web页可以看做一个对象，它包含背景色、段落文本、标题等特性，同时又包含打开、关闭和写入等动作。语法：对象名.属性名对象名.方法名知识准备6.内置对象：Array对象类型名称说明属性length获取数组长度（数组元素个数）方法reverse()反转数组的元素顺序sort()对数组的元素进行排序join(分隔字符)将数组内各个元素以分隔符连接成一个字符串，默认按逗号连接push()向数组的末尾添加一个或更多元素，并返回新的长度splice(m,n)删除在m位置的n个元素concat() 连接两个或更多的数组，并返回结果知识准备示例：数组对象的使用<script>varstudent=newArray("张三","李四","王五");varstudent1=newArray("zhangsan","lisi","wangwu");document.write("<ol>");document.write("<li>",student,"</li>");//输出各个元素

document.write("<li>",student.join(),"</li>");//用逗号连接各个元素

document.write("<li>",student.join("、"),"</li>");//用顿号连接各个元素

document.write("<li>",student.reverse(),"</li>");//倒序

document.write("<li>",student.concat(student1),"</li>");//连接两个数组

document.write("<li>",student1.sort(),"</li>");//按字典顺序重新排序

document.write("</ol>");</script>知识准备6.内置对象：String对象类型名称说明属性length用于返回字符串中字符的个数。注：一个汉字也是一个字符方法charAt(index)返回指定索引（index）位置处的字符。第1个字符的索引为0，第2个字符的索引为1，以此类推indexOf(str[,startIndex])返回某个指定的字符串值在字符串中首次出现的位置lastIndexOf(search[,startIndex])从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置substr(startIndex[,length])从起始索引号提取字符串中指定数目的字符substring(startIndex[,endIndex])提取字符串中两个指定的索引号之间的字符split(separator[,limitInteger])把字符串分割为字符串数组search(substr)检索字符串中指定子字符串或与正则表达式相匹配的值replace(substr,replacement)在字符串中查找匹配的子串，并替换与正则表达式匹配的子串toLowerCase()把字符串转换为小写toUpperCase()把字符串转换为大写知识准备示例：字符串对象的使用<script>varstr=newString("Thisisastudent");varfirstIndex=str.indexOf("s");varlastIndex=str.lastIndexOf("s");vararr=newArray();arr=str.split("");len=str.length;result="第一个s的位置是："+firstIndex+"<br>最后一个s的位置是："+lastIndex+"<br>字符串对象的长度是："+len+"<br>数组arr中的各个元素为："+"<br>"+arr[0]+"<br>"+arr[1]+"<br>"+arr[2]+"<br>"+arr[3];document.write(result);document.write("<br>字符串对象的颜色为红色："+str.fontcolor("red"));</script>知识准备6.内置对象：Math对象类型名称说明属性E返回算术常量e，即自然对数的底数（约等于2.718）LN2返回2的自然对数（约等于0.693）LN10返回10的自然对数（约等于2.302）PI返回圆周率（约等于3.14159）方法abs(x)返回x的绝对值ceil(x)返回大于等于x的最小整数floor(x)返回小于等于x的最大整数max(x,y,z,...,n)返回x,y,z,...,n中的最大值min(x,y,z,...,n)返回x,y,z,...,n中的最小值pow(x,y)返回x的y次幂random()返回0~1之间的随机数round(x)返回x四舍五入的取整数sqrt(x)返回数的平方根知识准备示例：Math对象的使用<script>functiongetRandom(min,max){varnum=Math.random();//生成[0~1)之间的随机小数

num=num*(max-min)+min;//取得min到max之间的随机数

num=Math.floor(num);//向下取整

returnnum;}document.write("<b>获取10~20之间的随机数是：</b>"+getRandom(10,20));</script>知识准备6.内置对象：Date对象类型名称说明方法getDate()从Date对象返回一个月中的某一天(1~31)getDay()从Date对象返回一周中的某一天(0~6，0表示星期天，1表示星期一，依次类推)getFullYear()从Date对象以四位数字返回年份getHours()返回Date对象的小时(0~23)getMilliseconds()返回Date对象的毫秒(0~999)getMinutes()返回Date对象的分钟(0~59)getMonth()从Date对象返回月份(0~11)getSeconds()返回Date对象的秒数(0~59)getTime()返回1970年1月1日至今的毫秒数toLocaleDateString()根据本地时间格式，把Date对象的日期部分转换为字符串toLocaleTimeString()根据本地时间格式，把Date对象的时间部分转换为字符串toLocaleString()据本地时间格式，把Date对象转换为字符串知识准备类型名称说明方法setDate()设置Date对象中月的某一天(1~31)setFullYear()设置Date对象中的年份（四位数字）setHours()设置Date对象中的小时(0~23)setMilliseconds()设置Date对象中的毫秒(0~999)setMinutes()设置Date对象中的分钟(0~59)setMonth()设置Date对象中月份(0~11)setSeconds()设置Date对象中的秒钟(0~59)setTime()setTime()方法以毫秒设置Date对象toString()把

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

温馨提示

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

最新文档

评论

0/150

提交评论