Web全栈开发案例教程课件 第5章 浏览器端JavaScript_第1页
Web全栈开发案例教程课件 第5章 浏览器端JavaScript_第2页
Web全栈开发案例教程课件 第5章 浏览器端JavaScript_第3页
Web全栈开发案例教程课件 第5章 浏览器端JavaScript_第4页
Web全栈开发案例教程课件 第5章 浏览器端JavaScript_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

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

文档简介

第5章浏览器端JavaScript浏览器端编程浏览器端JavaScript的特点事件驱动解释基于对象浏览器语言JavaScript在浏览器端的作用操纵DOM元素（改变元素的属性或内容）动态添加网页元素；校验用户输入的表单内容；为静态网页增加一些特效（如动画效果）5.1JavaScript的代码结构JavaScript程序一般由“事件+事件处理程序”组成。根据事件处理程序所在的位置，可分为：使用<script>标记将脚本嵌入到网页中（嵌入式）直接将脚本嵌入到HTML标记的事件中（行内式）通过<script>标记的src属性链接外部脚本文件（链接式）第一个JavaScript程序<html><head><title>第1JavaScript程序</title><script> functionmsg() //此处为注释：建立函数

{alert("Hello,theWEBworld!")}</script></head><body><ponclick="msg()">ClickHere</p></body></html>事件驱动，该程序的执行入口5.1.2

JavaScript

语言基础JavaScript变量弱类型变量，用“var”或“let”关键字，并可以将其初始化为任何值varname="SixHang";varage＝28;letschool="CSU";letmale=true;变量命名规范：驼峰式，例如：sMyString变量的命名原则首字符必须是字母、下划线（_）或美元符（$）变量名不能是关键字或保留字变量名对大小写敏感变量名中不能有空格、回车符或其他标点字符var5zhao; //数字开头，非法vartang-s,tang’s; varthis; //不能使用关键字作变量名运算符运算符是指完成操作的一系列符号，也称为操作符1.算术运算符+、-、*、/、%、++、--

2.比较运算符>、<、>=、<=、==、===、!=、!==3.逻辑运算符&&、||、!4.赋值运算符=+、=、-=运算符（续）5.连接运算符+6.其他运算符?:、typeof、[]、()、new表达式表达式是运算符和操作数的组合JavaScript数据类型字符串（String）varcourse="datastructure“（1）length属性：（2）charAt方法（4）indexOf：用于查找和定位子串（6）substr方法（8）split方法：根据指定的符号将字符串分割成一个数组。数组（array）1.数组的声明（三种方法）varrank=newArray(12);//第1种定义方法varMap=newArray(“China”,“USA”,“Britain”); //第2种定义方法varMap=["China","USA","Britain"]; //第3种定义方法2.数组的常用属性和方法（1）length属性：用来获取数组的长度（2）toString方法：将数组转化为字符串（4）join方法：将数组的内容连接起来，返回字符串（9）slice方法：返回数组的片断。5.1.2

常用JavaScript事件

常用鼠标事件事件名描述onclick单击鼠标左键时触发ondbclick双击鼠标左键时触发onmousedown鼠标任意一个按键按下时触发onmouseup松开鼠标任意一个按键时触发onmouseover鼠标指针移动到元素上时触发onmouseout鼠标指针移出该元素边界时触发onmousemove鼠标指针在某个元素上移动时持续触发常用的HTML事件

事件名描述onload页面完全加载后在window对象上触发onunload页面完全卸载后在window对象上触发onerror脚本出错时在window对象上触发onselect选择了文本框的某些字符或列表框的某项后触发onchange文本框或下拉框内容改变时触发onsubmit单击提交按钮时在表单form上触发onblur任何元素或窗口失去焦点时触发onfocus任何元素或窗口获得焦点时触发onscroll浏览器的滚动条滚动时触发5.1.3事件处理事件是JavaScript和DOM之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码。浏览器中的事件模型分为两种，即捕获型事件和冒泡型事件

5.1.3处理事件的两种方法1.事件处理函数HTML标记事件处理程序

<ponclick=“alert(‘我的内容’+this.innerHTML);”>Clickme</p>以对象属性形式出现的事件处理程序

window.onload=dosome2.通用事件监听程序

oP=document.getElementById("myP");

oP.addEventListener("click",fnClick1,false);

addEventListener的优势‌支持多个监听器‌：同一元素可添加多个同类型事件监听器，不会覆盖已存在的事件句柄。‌‌‌‌事件流控制‌：可精确控制事件在捕获阶段或冒泡阶段执行。‌‌‌捕获阶段：从根节点到目标元素。冒泡阶段：从目标元素到根节点（默认）。‌移除监听器‌：使用

removeEventListener()方法移除已添加的事件监听。‌‌‌

事件的应用举例设置鼠标经过时自动选择表单中文本

<inputname="user"type="text"onmouseover="this.focus()"/>

onfocus="this.select()"利用onBlur事件自动校验表单事件对象当在浏览器中发生一个事件时，浏览器会自动创建一个名为“event”的事件对象，在事件处理函数中可以通过访问该对象来获取所发生事件时的各种信息，包括触发事件的HTML元素、鼠标指针位置及鼠标按钮状态等让事件对象兼容IE和Firefox

oP.onclick=function(oEvent){ oEvent=oEvent||window.event; }事件对象的属性。对于鼠标事件来说，其常用的属性是它的位置信息属性。（1）screenX/screenY：事件发生时，鼠标在计算机屏幕中的坐标；（2）clientX/cilentY：事件发生时，鼠标在浏览器窗口中的坐标。事件对象的应用举例验证用户输入的是否为数字

functionIsDigit(){

return((event.keyCode>=48)&&(event.keyCode<=57)); }制作跟随鼠标移动的图片放大效果5.2JavaScriptDOM编程5.2.1动态效果的实现引例：当鼠标滑动到标题文字上时，标题文字和它下方的图片就会发生变化

①获取指定元素设置元素内容设置元素属性DOM（DocumentObjectModule）文档对象模型DOM（DocumentObjectModule）定义了用户操纵文档对象的接口，它使得用户对HTML文档有了空前的访问能力。把使用JavaScript程序操纵DOM节点（HTML元素）的编程称为JavaScriptDOM编程。每个HTML元素都是DOM节点树中的一个DOM节点，因此DOM模型为Javascript访问HTML元素提供了一个编程接口。。1.获取指定元素的方法getElementById() 返回元素如：document.getElementById(“one”)getElementsByName() 返回元素集合一般用于访问表单元素getElementsByTagName()返回元素集合document.getElementsByTagName("p")[3]querySelector() 返回匹配的第1个元素document.querySelector('.item')querySelectorAll() 返回匹配的所有元素集合document.querySelectorAll('.item')注意：上述方法中返回的集合是一个类数组对象（比如HTMLCollection或NodeList），不是数组。可以使用Array.from()或扩展运算符将其转换为数组，然后再使用forEach遍历数组2.访问元素的HTML属性获取元素属性推荐直接用DOM对象.属性名获取getAttribute(name)设置元素属性推荐用DOM对象.属性名=“属性值”setAttribute(name,value)删除元素属性removeAttribute(name)5.2.3访问元素的CSS属性访问CSS样式1.访问元素的CSS样式：style对象oP=document.getElementById("test");alert(oP.style.fontSize);修改元素的CSS样式：如oP.style.color="#f00";

注意：利用style对象访问到的CSS样式都是元素CSS的行内样式，利用style对象设置的样式也是对元素设置了行内样式style对象使用时需注意的问题如果CSS样式属性名称中不带“-”号，例如color，则直接使用style.color就可获得该属性值如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。对于CSS样式中的float属性，不能使用style.float访问，应该使用cssFloat（Firefox）或styleFloat（IE）访问访问CSS样式（续）2.使用className属性更改元素的类名

varmyImg=document.getElementById(“picbox”);

myImg.className=“pic”+str; } 3.使用className属性追加元素的类名

className+=“over“ //追加类名“over”，over前必须有一空格访问CSS样式（续）4.使用replace方法去掉元素的某一个类名this.className=this.className.replace(/over/,""); //用两斜杠“/”将over括起来8.3.4访问元素的内容一般使用innerHTML属性innerHTML可以将元素的内容（起始标记和结束标记之间）改变成其他任何内容（如文本或HTML元素）例如：vara=document.getElementById("aa");alert(aa.innerHTML) //读取元素的HTML内容aa.innerHTML="看见变化了吗？"; //设置元素的HTML内容8.3.5创建和替换元素节点DOM节点的类型

<ahref="iframe.html"target="myTarget">在指定窗口打开</a>ahref="iframe.html"target="myTarget"在指定窗口打开属性节点属性节点文本节点元素节点创建节点createElement方法：创建元素节点createTextNode方法：创建文本节点；

varoP=document.createElement("p");varoCont=document.createTextNode("这是一条感人的新闻");oP.appendChild(oCont);document.body.appendChild(oP);操作节点①appendChild()：为当前节点新增一个子节点，并且将其作为最后一个子节点；②insertBefore()：为当前节点新增一个子节点，将其插入到指定的子节点之前；③replaceChild()：将当前节点的某个子节点替换为其他节点；④removeChild()：删除当前节点的某个子节点8.3.7用DOM控制表单访问表单中的元素

varoForm=document.forms["user"];

varoTextName=oForm.elements[0];

varpasswd=oForm.elements["passwd"];表单中元素的共同属性和方法varoComments=oFments;alert(oComments.type);

varoTextPasswd=oForm.elements["passwd"];oTextPasswd.focus(); 5.2.5使用浏览器对象BOM（浏览器对象模型）JavaScript是运行在浏览器中的windownavigatorlocationdocumentscreenhistoryframesembedslinksformsappletsanchorsimagesBOM的主要对象window对象history对象location对象document对象window.status属性window对象window对象对应着浏览器窗口，使用它可以直接对浏览器窗口进行操作。如：（1）调整窗口的大小和位置；（2）打开新窗口；（3）系统提示框；（4）状态栏控制；（5）定时操作。window对象的方法window对象有如下4个方法用来调整窗口的位置或大小。（1）window.moveBy(dx,dy)（2）window.moveTo(x,y)（3）window.resizeBy(dw,dh)（4）window.resizeTo(w,h)window.open方法打开新窗口用法：window.open([url][,target][,options])options参数可能的选项包括：（1）height:窗口的高度，单位为像素；（2）width：窗口的宽度，单位为像素；（3）left：窗口的左边缘位置；（4）top：窗口的上边缘位置；系统对话框（1）window.alert([message])alert()方法只接受一个参数，即弹出对话框要显示的内容。（2）window.confirm([message])该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。if(confirm("确实要删除这张图片吗？"))alert("图片正在删除…");elsealert("已取消删除！");系统对话框（续）（3）mpt([message][,default])该方法显示一个消息提示框，其中包含一个文本输入框。该方法接受两个参数，第一个参数是显示给用户的文本，第二个参数为文本框中的默认文本（可为空）。整个方法返回字符串，值即为用户的输入。例如：varnInput=prompt("请输入你的名字","");if(nInput!=null)document.write("Hello!"+nInput);status属性状态栏控制（status属性）状态栏的显示信息可以通过window.status属性直接进行修改。例如：window.status="看看状态栏中的文字变化了吗？";定时操作函数定时操作通常有两种使用目的，一种是周期性地执行脚本，另一种则是将某个操作延时一段时间执行，例如迫使用户等待一段时间才能进行操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。需要注意的是，定时操作函数还是利用JavaScript制作网页动画效果的基础用定时操作函数制作动画的步骤首先获取需要实现动画效果的元素，一般用getElementById()方法将实现动画效果的代码写在一个函数里通过setTimeout调用该函数，使其重复执行定时操作函数应用举例动态改变窗口位置和大小

3-26移动窗口.html制作时钟

3-25时钟.html漂移广告

3-28漂浮广告.html打字机效果

3-27打字机.htmllocation对象location对象表示窗口地址栏中的URLlocation对象的作用是分析和设置页面的URL地址比较location对象和超链接

location对象可以动态设置链接的地址地址栏控制（location对象）利用location.href实现跳转菜单<selectname="select"onchange="window.location.href=this.options[this.selectedIndex].value"><option>请选择需要的网址</option><optionvalue="">搜狐</option><optionvalue="">新浪</option></select>location.replace如果不希望用户可以用“后退”按钮返回原来的页面，可以使用replace()方法。例如：<ponclick="location.replace('');">访问搜狐</p>history对象

浏览器后退和前进（history对象）window还有一个非常实用的属性是history。它可以访问历史页面，但不能获取到历史页面的URL，例如：①history.go(-1); //浏览器后退一页②history.go(1); //浏览器前进一页③history.go(0); //浏览器刷新当前页④document.write(history.length); //输出浏览历史的记录总数history对象上面三句的效果还可以分别用back()和forward()实现，代码如下：history.back();history.forward();location.reload();navigator对象navigator对象主要是用来检测客户端浏览器信息的，关于Web浏览器的信息，浏览器的类型、版本信息以及操作系统的类型都可以从该对象中获取。varsUserAgent=navigator.userAgent;document.write(sUserAgent);screen对象screen对象主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，

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

温馨提示

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

最新文档

评论

0/150

提交评论