《JavaScript程序设计案例教程》课件-案例4_第1页
《JavaScript程序设计案例教程》课件-案例4_第2页
《JavaScript程序设计案例教程》课件-案例4_第3页
《JavaScript程序设计案例教程》课件-案例4_第4页
《JavaScript程序设计案例教程》课件-案例4_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

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

文档简介

案例四、金额转换器学习目标知识链接案例实现效果演示目录学完本章节应该能做到的事情学习目标壹学习目标会使用querySelector和querySelectorAll查询接口。理解事件流和事件对象。会字符串连接。PPT模板/moban/会字符串查找。会字符串截取。掌握while和dowhile循环。能动态修改网页的代码。效果演示完成本案例应该具备的知识知识链接贰知识链接列表PPT模板/moban/querySelector和querySelectorAll。事件流和事件对象。字符串连接。字符串查找。字符串截取。while和dowhile循环。动态修改网页的代码。querySelector和querySelectorAll1这两个方法都可以接受三种类型的参数：id(#)、class(.)、标签，很像jquery的选择器0102querySelector：只返回匹配的第一个元素，如果没有匹配项，返回nullquerySelectorAll：返回匹配的元素集合，如果没有匹配项，返回空的nodelistquerySelector和querySelectorAll1<divid="left"> leftpanel</div><divid="right"> rightpanel</div><script> vardiv1=document.querySelector("div"); console.log(div1); varp1=document.querySelector("p"); console.log(p1); vardiv2=document.querySelectorAll("div"); console.log(div2); varp2=document.querySelectorAll("p"); console.log(p2);</script>选择器（queryselector.html）事件流和事件对象2事件流是描述的页面元素从页面接受事件的顺序，事件流包括两种模式：冒泡和捕获。<body> <div> <span>hello</span> </div></body>事件流和事件对象2事件处理函数:就是处理用户操作的函数，不同的操作对应不同的名称。事件绑定：使用户操作时执行开发者指定的代码的操作。0102行内绑定式：在DOM元素中直接绑定动态绑定式：在JavaScript代码中直接绑定03事件监听式：绑定事件监听函数在JavaScript中，有三种常用的绑定事件的方法：事件流和事件对象2行内绑定式（EventInline.html）<buttononclick=”sayhello()”>按钮</button><script> functionsayhello(){ alert(“hello”); }</script>事件流和事件对象2动态绑定式（EventDynamic.html）<buttonid=”btn”>按钮</button><script> document.getElementById(“btn”).onclick=function(){ alert(“hello”); }</script>事件流和事件对象2事件监听式（EventListen.html）<buttonid=”btn”>按钮</button><script> document.getElementById(“btn”).addEventListener(“click”,function(){ alert(“hello”); });</script>事件流和事件对象2addEventListener()函数语法：elementObject.addEventListener(eventName,handle,useCapture);参数说明：elementObject：DOM对象（即DOM元素）。eventName：事件名称。注意，这里的事件名称没有“on”，如鼠标单击事件click，鼠标双击事件doubleclick，鼠标移入事件mouseover，鼠标移出事件mouseout等。handle：事件句柄函数，即用来处理事件的函数。useCapture：Boolean类型，表示是否使用捕获型事件流，false表示是冒泡型事件流，true表示是捕获型事件流，默认为false。事件流和事件对象2冒泡型事件与捕获型事件对比（EventFlow.html）<div> <span>点击从控制台查看事件流</span></div><script> //以下三次绑定中第三个参数，演示冒泡事件时用false,演示捕获事件时用true document.querySelector("body").addEventListener("click",function(e){ console.log("Hi,Iambody"); },false); document.querySelector("div").addEventListener("click",function(e){ console.log("Hi,Iamdiv"); },false); document.querySelector("span").addEventListener("click",function(e){ console.log("Hi,Iamspan"); },false);</script>事件流和事件对象20102作用：描述事件的特征，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息产生时机：当页面中一个事件被触发时0304支持：所有浏览器都支持作用域：event对象必须作为唯一的参数传给事件处理函数，在该函数内起作用（旧的IE浏览器是全局作用域）事件流和事件对象2查看事件对象信息（EventObj.html）<inputid="btn"type="button"value="来啊"/><script>varbtn=document.getElementById("btn");btn.onclick=function(event){console.log(event);}btn.addEventListener("mouseenter",function(event){console.log(event);},false);</script>事件流和事件对象2表4-1事件对象重要的属性和方法属性描述bubbles返回布尔值，表示事件是否是冒泡事件类型。cancelable返回布尔值，表示是否为可取消事件。如果可以阻止事件默认操作，则该事件是可取消的。currentTarget返回其事件监听器触发该事件的元素。eventPhase返回事件传播的当前阶段。target返回触发此事件的元素（事件的目标节点）。timeStamp返回事件生成的日期和时间。type返回当前Event对象表示的事件的名称。initEvent()初始化新创建的Event对象的属性。preventDefault()通知浏览器不要执行与事件关联的默认动作。stopPropagation()不再派发事件。事件流和事件对象2鼠标点击目标和点击坐标（eventObj_click.html）<style> div{ width:300px; height:200px; margin:auto; } #div1{background:#BF5C5E;} #div2{background:#37C365;}</style><divid="div1"> </div><divid="div2"></div><scripttype="text/javascript">vardivs=document.getElementsByTagName("div");divs[0].onclick=divs[1].onclick=function(event){ console.log(event.target);//点击元素

//相对DOM区域坐标

console.log(event.clientX+""+event.clientY); //相对DOM区域坐标（包含滚动条距离）

console.log(event.pageX+""+event.pageY); //相对屏幕的坐标

console.log(event.screenX+""+event.screenY);}</script>事件流和事件对象2按键监听（演示时关闭中文输入法，eventObj_keypress.html） <input><scripttype="text/javascript">vaript=document.querySelector("input");ipt.onkeypress=function(event){ console.log("你在"+event.target+"里按下了键：");console.log(event.keyCode+"=="+event.key);}</script>事件流和事件对象2阻止事件传播（eventObj_stopEventFlow.html）<h2>DOM操作</h2><div><p> <span>hi,welcome</span></p></div><scripttype="text/javascript">varsp=document.getElementsByTagName("span")[0];varpt=document.getElementsByTagName("p")[0];vardv=document.getElementsByTagName("div")[0];

sp.addEventListener("click",function(event){console.log("Thisisspantag");event.stopPropagation();//演示时注释掉作对比

});pt.addEventListener("click",function(event){console.log("Thisisptag");event.stopPropagation();//演示时注释掉作对比

});dv.addEventListener("click",function(event){console.log("Thisisdivtag");event.stopPropagation();//演示时注释掉下一句作对比

});</script>事件流和事件对象2阻止浏览器默认动作（eventObj_stopDefault.html）<formaction="/register.php"><inputtype="text"><inputid="submit"type="submit"></form><scripttype="text/javascript">varform=document.querySelector("form");form.addEventListener("submit",function(event){console.log("提交被阻止了。")event.preventDefault();});</script>字符串连接3s1.concat("d","e","f");01加号运算符02concat()方法“abc”+3strArr.join(',')03join()方法字符串连接3加号运算符拼接字符串（stringPlus.html）vars1="abc",s2="def";console.log(s1+s2);//输出字符串“abcdef”vard1=1,d2='2',d3=3;console.log(d1+d2);//输出12console.log(d1+d3);//输出4字符串连接3使用concat()方法把多个字符串连接在一起（concat.html）vars1="abc";vars2=s1.concat("d","e","f");//调用concat()连接字符串console.log(s1);//返回字符串abcconsole.log(s2);//返回字符串“abcdef”字符串连接3借助数组的join方法来连接字符串（join.html）varstrArr=["Java","Script"];console.log(strArr.join(""));//输出JavaScriptconsole.log(strArr.join(','));//输出Java,Scriptconsole.log(strArr.join('|'));//输出Java|Script字符串查找4要查找字符串的第一次出现的起始下标是哪个01charAt()方法02indexOf()方法字符在哪个位置要查找字符串的最后一次出现的起始下标是哪个03lastIndexOf()方法字符串查找4语法：str.charAt(index)index:0到字符串长度-1的一个整数。返回：字符串中的字符从左向右所在位置的索引，第一个字符的索引值为0，最后一个字符（假设该字符位于字符串stringName中）的索引值为stringName.length-1。如果指定的index值超出了该范围，则返回一个空字符串。str="helloworld!";//字符串总长为12//返回第9个字符：rconsole.log(str.charAt(8));//超出长度，返回空串，不是nullconsole.log(str.charAt(16));charAt（charAt.html）字符串查找4indexOf（indexOf.html））str="helloworld!";//字符串总长为12

console.log(str.indexOf('ell'));//返回1console.log(str.indexOf('ell',2));//返回-1console.log(str.indexOf('wor',-6));//返回6语法：str.indexOf(searchValue[,fromIndex]);searchValue：一个字符串表示被查找的值。formIndex：可选参数，表示调用该方法的字符串中开始查找的位置，可以是任意整数，默认值是0。如果fromIndex<0则查找整个字符串(如同传进了0)；如果formIndex>=str.length则该方法返回-1。除非被查找的字符串是一个空字符串此时返回str.length。返回：指定值在字符串对象中首次出现的位置，从fromIndex位置开始查找如果不存在则返回-1。字符串查找4lastIndexOf（lastIndexOf.html）str="helloworld!";//字符串总长为12

console.log(str.lastIndexOf('ell'));//返回1console.log(str.lastIndexOf('ell',2));//返回1console.log(str.lastIndexOf('wor',-6));//返回-1语法：str.lastIndexOf(searchValue[,fromIndex]);searchValue：一个字符串表示被查找的值。formIndex：从调用该方法字符串的此位置处开始查找，可以是任意整数，默认值为str.length。如果为负值，则被看作0。如果fromIndex>str.length，则fromIndex被看作str.length。返回：指定值在调用该方法的字符串中最后出现的位置，如果没有找到则返回-1。字符串截取5截取指定长度字符串它还有其他用法，此处不讨论，感兴趣的可自行学习01substr()方法02slice()方法截取指定长度字符串截取指定长度字符串03substring()方法从参数的个数及取值上区分它们字符串截取5varID=;varbirthday=ID.substr(6,8);//生日从第七个字符开始，长度为8console.log(birthday);//返回子字符串“19640307”

vartmp=ID.substr(6);console.log(tmp);//输出：196403075888

tmp=ID.substr(-3);console.log(tmp);//输出：888

tmp=ID.substr(-4,2);console.log(tmp);//输出：58截取身份证号的生日（substr.html）第一个参数表示准备截取的子字符串起始下标，第二个参数表示截取的长度；如果省略第二个参数，则表示截取从起始位置开始到结尾的所有字符；第一个参数为负值，则表示从字符串的尾部开始计算下标位置，即-1表示最后一个字符，-2表示倒数第二个字符，以此类推；字符串截取5varurl="/s";varindex1=url.indexOf("://")+3;varindex2=url.lastIndexOf("/");console.log(index1);//8console.log(index2);//21

console.log(url.substring(index1,index2));//输出

console.log(url.substring(index2,index1));//输出console.log(url.substring(index1));//输出/sconsole.log(url.substring(-3));//输出/s

console.log(url.slice(index1,index2));//输出console.log(url.slice(index2,index1));//输出空字符串console.log(url.slice(-3));//输出m/s截取网址中的域名（substring.html）第一个参数表示起始下标，第二个参数表示结束下标。如果省略第二个参数，则表示截取从起始位置开始到结尾的所有字符；如果参数值为负值，substring()方法强行传递负数，在执行时会被当成0处理。如果第一个参数值比第二个参数值大，substring()方法能够在执行截取之前先交换两个参数第一个参数表示起始下标，第二个参数表示结束下标。与substring相同如果第一个参数值比第二个参数值大，对于slice()方法来说，则被无视为无效，并返回空字符串如果参数值为负值，slice()方法能够把负号解释为从右侧开始定位while和dowhile循环6while(expr)statementwhile和dowhile循环6使用while输出1-100之间的奇数（while.html）varn=1;//声明并初始化循环变量while(n<=100){//循环条件

if(n%2==1)console.log(n); n++;//递增循环变量}while和dowhile循环6dostatementwhile(expr)while和dowhile循环6使用do/while输出1-100之间的奇数（dowhile.html）varn=1;//声明并初始化循环变量do{if(n%2==1)console.log(n);n++;//递增循环变量}while(n<=100)//循环条件动态修改网页的代码70102方法一：DOM元素操作在案例“百花争妍”中有讲到方法二：使用innerHTML属性本节讲述，注意与innerText的区别动态修改网页的代码7<head><script> functionmyFunction(){ x=document.getElementById("demo"); x.innerHTML="<spanstyle=''>hi,icandoit!</span>"; }</script></head><body> <pid="demo">js能够改变html的代码。</p> <buttontype="button"onclick="myFunction()">点击这里</button></body>动态改变HTML代码（innerHTML.html）动态修改网页的代码7动态改变元素内的文本（innerText.html）<head><script> functionmyFunction(){ x=document.getElementById("demo"); x.innerText="<spanstyle=''>hi,icandoit!</span>"; }</script></head><body> <pid="demo">js能够改变这里的文本，但是不会解释执行HTML代码。</p> <buttontype="button"onclick="myFunction()">点击这里</button></body>完成本章综合案例案例实现贰设计思路1金额转换器设计上分为数字金额区、汉字金额显示区、按钮区，当点击按钮区数字键时输入区的数字发生变化，同时汉字金额显示区更新翻译结果，如果输入错误可以从后边删除错误的数字或者直接清空（即复位为0）。实现步骤--设计页面架构2divspaninputspan10个button实现步骤--设计页面架构2<divclass="area"><span>金额转换器</span><inputtype="number"value="0"step='1'min='0'id="money"/><spanid="rst">0元</span><button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button><button>0</button><button>C</button><button>Back</button></div>实现步骤--美化元素2/*采用网格布局，把界面设计成7行3列的布局*/.area{display:grid;width:300px;height:700px;grid-template-columns:repeat(3,33.3%);grid-template-rows:repeat(7,100px);margin:auto;border:5pxsolid#99c965;padding:10px;background:#d5d1a4;}实现步骤--美化元素2/*标题和翻译结果都水平居中，文字垂直居中*/.area>span{text-align:center;line-height:100px;}/*标题独占一行，是通过跨3列的样式实现的*/.area>span:first-child{grid-column-start:1;grid-column-end:4;background:#e0cc97;border:1pxsolid#ddd;margin-bottom:5px;}实现步骤--美化元素2/*金额的输入框也是独占一行，是通过跨3列的样式实现的*/.area>input{grid-column-start:1;grid-column-end:4;}实现步骤--美化元素2/*翻译后的汉字金额也独占一行，是通过跨3列的样式实现的*/.area>span:nth-child(3){grid-column-start:1;grid-column-end:4;background:#666;border:1pxsolid#ddd;margin:5px0px;color:#fff;}实现步骤--美化元素2经样式处理后的效果图实现步骤--事件的绑定2功能按钮Back作用是删除最后一位数字；功能按钮C作用是清除所有输入的数字，恢复为0；所有数字按钮点击时在数字的最后增加相对应的数字。这些按钮共用一个事件处理函数。varmoney=document.querySelector("#money");//数字框varbtns=document.querySelectorAll('button');//获取所有按钮for(varbtnofbtns){//循环绑定按钮单击事件

btn.onclick=btnclick;//所有按钮共享一个事件处理函数}functionbtnclick(e){vartxt=e.target.innerHTML;//获取按钮上的文字，作为处理的依据

if(txt=="Back"){//删除最后一个数字的按钮

if(money.value.length>1){money.value=money.value.substr(0,money.value.length-1);}}elseif(txt=="C"){//清空数字，即复位为0money.value=0;}else{//0-9的数字按钮

if(money.value=="0")money.value=txt;elsemoney.

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

温馨提示

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

最新文档

评论

0/150

提交评论