Web前端开发必知必会 课件-中文版 lesson 11 JavaScript简介_第1页
Web前端开发必知必会 课件-中文版 lesson 11 JavaScript简介_第2页
Web前端开发必知必会 课件-中文版 lesson 11 JavaScript简介_第3页
Web前端开发必知必会 课件-中文版 lesson 11 JavaScript简介_第4页
Web前端开发必知必会 课件-中文版 lesson 11 JavaScript简介_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10JavaScript简介LESSON11CONTENTS01什么是JavaScript02JavaScript语法03JS网页时钟实例JavaScript实例FormValidation表单修改网页内容：WriteVSinnerHTMLClock1时钟1，Clock2时钟2Painting网页画笔

什么是JavaScript是一种基于浏览器的计算机语言，用于改变网页内容、样式实现网页中各种动态的效果表单数据处理处理网页Effects特效或网页API三驾马车之一：HTML+CSS+JS特性：解释性执行跨平台，仅依赖于浏览器01JavaScript语法(1)数据类型string、boolean、nul、number数值，object对象运算符=（赋值）Math:+-*/Boolean：&&，||，！，>,<,==,…（逻辑/关系）条件语句if-else、switch循环for、while、for-in命名规则:（区分大小写）body.style.backgroundColor=“#F0F0F0”;√body.style.backgroundcolor=“#F0F0F0”;

02JavaScript语法(2)变量声明与赋值vara=100;内置对象vartoday=newDate()；函数定义functionsayHello(){

document.write(“Hello!”);}Array数组定义方法：varmycars=newArray();varmycars=newArray(3);varmycars=[“Volkswagen”,”Volvo”,”BMW”]；数组的下标[0]开始:varlen=mycars.length;for(i=0;i<len;i++){document.write(mycars[i]+“<br>”);}JavaScript实例:sayhello!

CodesJS代码在网页中的位置

代码直接嵌入到网页文件中在<head>中在body网页中在</html>之前使用外部链接（在<head>中，或</html>前）<scriptsrc=“路径+js文件"></script>（动态添加/改变）两种基本方法（少用）document.write()在HTML网页中写入（多见）innerHTML获得或修改当前HTML元素获取网页元素p：varmsg=p.innerHTML;修改p：p.innerHTML="Helloworld！";（拓展：appendChild添加子元素）练习1-使用基本JavaScript语句：使用document.write()，添加一个段落p、h1~h6；使用getElementById()获取某个网页对象innerHTML改写网页对象内容练习2：（代码见教材）将文本框中的信息，填写在网页中

使用基本JavaScript语句点击按钮getElementById()获取DOM对象实例：举一反三拓展1、修改网页,单击按钮可以切换背景：1）切换body的背景色，修改字体颜色；2）为欢迎行添加背景颜色；3）点击按钮，原来的英文变为中文，再点击一次切换回中文（if-else）。

拓展2、简化语句（for循环）1）利用循环语句，生成h1～h6；2）循环生成表格单元格/行；3）设置奇偶行背景颜色。内置函数(1)—JavaScript网页时钟数学函数(Math)pow(),random(),round()…随机生成10个数（0~100），然后从小到大排列（例）例如：Math.floor(Math.random()*100+1)日期函数(Date)getMonth(),getDate(),GetTime(),GetHours(),toLocaleDateString()…例如：

var

today=new

Date();03内置函数(2)——定时器函数Web页面动画效果，定时器是必备setInterval():setInterval(函数,毫秒)按照指定周期（毫秒）调用函数或计算表达式，不停地调用，直到clearInterval()被调用或者窗口关闭。setTimeout()setTimeout(代码函数，毫秒数)在指定毫秒数后调用函数或计算表达式，只调用一次（回调自身函数，实现循环调用），例如：Functionmove(){…setTimeout(move,10)}自定义函数函数定义语法格式：

functionfname(参数){

函数体 return返回值;}函数可以没有参数，也可以有多个参数函数在使用之前都需要声明，常见做法：定义函数，然后调用；将匿名函数赋值给变量，使用变量即执行；通过new直接声明执行。JS网页时钟代码

<bodyonload="getCurrentTime()"><!—导入获取当前时间的函数，以显示时钟--><h3>简单电子时钟的设计与实现</h3><hr/><divid="clock"><!--电子时钟区域--> <divclass="box1"id="h"></div> <divclass="box2">:</div> <divclass="box1"id="m"></div> <divclass="box2">:</div> <divclass="box1"id="s"></div> </div> <script>

…… </script></body>Basicclock（JS

codes）if(h<10)h="0"+h;//以确保0-9时也显示成两位数if(m<10)m="0"+m;//以确保0-9分钟也显示成两位数

if(s<10)s="0"+s;//以确保0-9秒也显示成两位数

hour.innerHTML=h;

minute.innerHTML=m;

second.innerHTML=s;setInterval("getCurrentTime()",1000);}//每秒更新一次时间</script><script>varhour=document.getElementById("h");//获取小时区域框对象varminute=document.getElementById("m");//获取分钟区域框对象varsecond=document.getElementById("s");//获取秒区域框对象

functiongetCurrentTime(){//获取当前时间函数vardate=newDate();varh=date.getHours();varm=date.getMinutes();vars=date.getSeconds();varday=date.getDay();说明：0~6共7天，0为周日Q&A尝试完成简单计算器（表单元素，switch语句）尝试生成10个随机

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

温馨提示

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

最新文档

评论

0/150

提交评论