项目14-JavaScript脚本编程.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/1/5,#,初,识,JavaScript,|,JavaScript,数据类型和数据基本操作,|,JavaScript,流程控制,|JavaScript,函数,|JavaScript,对象,|JavaScript,事件,|JavaScript,完成图片轮番播放,JavaScript,脚本,编程,知识,目标,JavaScript,语法,知识,01,.,02,.,JavaScript,对象概念,能力,目标,掌握,JavaScript,的基本语法,01,.,02,.,掌握,JavaScript,对象的应用,任务,1,初,识,JavaScript,01,02,03,JavaScript,基本,结构,JavaScript,脚本的位置,JavaScript,常用的输出语句,任务,1,初识,JavaScript,-01,JavaScript,基本结构,在,HTML,中使用,JavaScript,的语法很简单，只要用,标记嵌入程序代码,就,可以,了，基本结构如下。,JavaScript,语句,;,随着,Web,技术的发展，,HTML5,的普及，浏览器性能的提升，嵌入,JavaScript,脚本代码,基本,格式,又有了新的写法，就是省略,type=“text/javascript”,，这是因为新版本的浏览器一般,将,嵌入,的脚本语言，默认为,type=“text/javascript”,，因此在编写代码时可以省略,type,属性。,任务,1,初识,JavaScript,-02,JavaScript,脚本的,位置,如果,要在开始显示网页时就运行,JavaScript,程序，那么程序的内容必须写在,标记,中。如果希望按照网页加载顺序显示，就可以将程序写在,标记中,。,JavaScript,代码放在一个,.js,为扩展名的文件中，通过,标签，当这些,JavaScript,文件,链接到,HTML,文档中，基本语法格式如下。,任务,1,初识,JavaScript,-03,JavaScript,常用的输出语句,alert,(),用于弹出一个警告框，确保用户可以看到某些提示信息，利用,alert(),可以很方便,的输,出,一个结果，因此经常用于测试程序,。,console.log(),用于在浏览器的控制台中输出内容。在网页浏览器中按,F12,启动开发者工具,，,打开,浏览器调试界面。在最上方的菜单中选择控制台,console,，可以打开控制台，看到,这个,console.log,(),语句输出的内容,。,document.write(),用于在页面中输出内容。如果输出的内容中含有标签，该标签会被,浏览器,解析,。,任务,2 JavaScript,数据类型,和,数据基本操作,01,02,数据类型,数据基本操作,删除用户,任务,2,JavaScript,数据类型和,数据基本,操作,-01,数据类型,JavaScript,值类型,(,基本类型,),包括：字符串（,String,）、数字,(Number),、布尔,(Boolean),、,对,空（,Null,）、未定义（,Undefined,）、,Symbol,。,Symbol,是,ES6,引入了一种新的原始数据类型，表示独一无二的值,。,引用数据类型：对象,(Object),、数组,(Array),、函数,(Function),。,任务,2,JavaScript,数据类型和数据基本操作,-02,数据基本,操作,术运算,符：,+,、,-,、*、,/,、,%,、,+,、,-,赋值运算符：,=,、,+=,、,-=,、*,=,、,/=,、,%=,比较运算符：,、,=,、,=,、,!=,、,=,、,=,、,!=,逻辑运算,符：,&,、,|,、,!,字符串运算符：,+,、,+=,=,和,=,有何区别？,=,：判断值是否相等，,=,：判断值相等类型也相同，绝对等于,（值和类型均相等）。,!=,不绝对等于（值和类型有一个不相等，或两个都不相等）,任务,3 JavaScript,流程控制,01,02,条件语句,循环语句,删除用户,任务,3,JavaScript,流程控制,-01,条件语句,if,语句：只有当指定条件为,true,时，使用该语句来执行代码。,if.else,语句：当条件为,true,时执行代码，当条件为,false,时执行其他代码。,if.else if.else,语句：使用该语句来选择多个代码块之一来执行。,switch,语句：使用该语句来选择多个代码块之一来执行。,任务,3,JavaScript,流程控制,-02,循环语句,JavaScript,支持不同类型的循环，主要有,for,、,for.in,、,while,、,do.while,其中还会,配合,使用,break,、,continue,等语句。,for,：循环代码块一定的次数，用于循环次数已知的情况。,for/in,：循环遍历对象的属性。,while,：当指定的条件为,true,时循环指定的代码块。,do/while,：同样当指定的条件为,true,时循环指定的代码块。,任务,4 JavaScript,函数,0,2,0,3,0,4,调用语法,调用带参数的函数,带有返回值的函数,0,1,函数定义,05,关于匿名函数,任务,4,JavaScript,函数,-01,函数定义,使用函数前要先定义，函数定义有三个部分,:,函数名,参数列表,函数体。定义函数的格式,：,function,函数名,(,参数,1,参数,2.),函数执行部分,;,return,表达式,;,任务,4,JavaScript,函数,-02,调用语法,函数,名,(,实参,1,实参,2,.,);,示例：,关于函数的定义和调用,/,函数的定义,function display,（）,alert(hello);,/,函数的调用,display,（）,任务,4,JavaScript,函数,-03,调用带参数的函数,在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用,。,可以,发送任意多的参数，由逗号,(,),分隔。,function myFunction(name,job),。变量,和,参数,必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推,。,实例,点击这个按钮，来调用带参数的函数。,点击这里,function myFunction(name,job),alert(Welcome +name+,the +job);,上面的函数在按钮被点击时会提示,Welcome Harry Potter,the Wizard,。,任务,4,JavaScript,函数,-04,带有返回值的函数,有时，我们会希望函数将值返回调用它的地方。通过使用,return,语句就可以实现,。,在,使用,return,语句时，函数会停止执行，并返回指定的值。,语法,function myFunction(),var x=5;,return x;,上面的函数会返回值,5,。,任务,4,JavaScript,函数,-05,关于匿名函数,var i=function(),alert(hello);,;,i();,var i=10;,变量可以保存数据，也可以保存地址。,function display(),在,window,对象下添加一个叫,display,的变量，它指向了这个函数的首地址,，,Window.i=display,，让,window,对象下的,i,指向这个函数的首地址，,display()=i();,任务,5 JavaScript,对象,0,2,0,3,0,4,对象,属性,访问对象属性,对象方法,0,1,对象定义,05,访问对象方法,任务,5,JavaScript,对象,-01,对象,定义,使用字符来定义和创建,JavaScript,对象，例如,var person=firstName:John,lastName:Doe,age:50,eyeColor:blue;,定义,JavaScript,对象可以跨越多行，空格跟换行不是必须的，例如,var person=,firstName:John,lastName:Doe,age:50,eyeColor:blue,;,任务,5,JavaScript,对象,-02,对象属性,可以说,JavaScript,对象是变量的容器,。但是，我们通常认为,JavaScript,对象是键值,对,的,容器,。键值对通常写法为,name:value(,键与值以冒号分割,),。键值对在,JavaScript,对,象,通常称为 对象属性。,JavaScript,对象是属性变量的容器。对象键值对的写法类似于,：,PHP,中的关联数组、,Python,中的字典、,C,语言中的哈希表、,Java,中的哈希映射、表,任务,5,JavaScript,对象,-03,访问对象属性,你可以通过两种方式访问对象属性，例如,person.lastName;,或者,personlastName;,任务,5,JavaScript,对象,-04,对象方法,对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加,(),调用,(,作为一,个,函数,),。下面示例访问了,person,对象的,fullName(),方法。,name=person.fullName,();,如果你要访问,person,对象的,fullName,属性，它将作为一个定义函数的字符串返回，,例如：,name=person.fullName;,任务,5,JavaScript,对象,-05,访问对象,方法,你可以使用以下语法创建对象方法：,methodName:function()code lines,你可以使用以下语法访问对象方法：,objectName.methodName,(),通常,fullName(),是作为,person,对象的一个方法，,fullName,是作为一个属性,。,有,多种方式可以创建，使用和修改,JavaScript,对象。同样也有多种方式用来创建，使用,和,修改,属性和方法。,任务,6 JavaScript,事件,01,02,JavaScript,的常用事件,JavaScript,三种绑定事件的方式,删除用户,任务,6,JavaScript,事件,-01JavaScript,的常用,事件,事件,说明,onLoad,页面加载完毕后,一般用于,body,元素,onUnload,页面关闭后一般用于,body,元素,onBlur,失去焦点,onFocus,获得焦点,onClick,点击,onMouseOver,当鼠标经过时,onMouseOut,当鼠标离开时,onMouseDown,当鼠标按下时,onMouseUp,当鼠标抬起时,onMouseMove,当鼠标移动时,onChange,当内容改变时,onSelect,当内容被选中时,onkeypress,当键盘点击时,onkeydown,当键盘按下时,onkeyup,当键盘抬起时,.,触发顺序：,onkeydown,、,onkeypress,、,onkeyup,onSubmit,当表单提交时,onReset,当表单重置时,任务,6,JavaScript,事件,-02JavaScript,三种绑定事件的方式,（,1,）直接在,DOM,里绑定事件,function clickone()alert(hello);,（,2,）脚本里面绑定,document.getElementById(btn).onclick=function,（）,alert(hello);,（,3,）通过侦听事件处理相应的函数,document.getElementById(btn).addeventlistener(click,clickone,false);,function clickone()alert(hello);,任务,7,JavaScript,完成图片轮番播放,01,02,任务需求,关键代码,删除用户,任务,7,JavaScript,完成图片轮番,播放,-01,任务需求,对前面芙蓉商城制作中首页的中间部分的图片做成,3,张“图片轮换”效果，要求每隔,3,秒,轮,换,一张,。,任务,7,JavaScript,完成图片轮番,播放,-02,关键代码,var now=1;,function showpic(),for(var i=1;i4;i+),if(now=i),document.getelementbyid(pic+i).style.display=block;,else,document.getelementbyid(pic+i).style.display=none;,now+;,if(now=4),now=1;,settimeout(showpic(),3000);,感谢聆听,