JavaScript前端开发模块化教程_全套PPT课件.pptx

任务1搭建JavaScript开发环境;;PART1;要想成为Web开发工程师，掌握JavaScript必不可少。正式开始学习JavaScript前端开发之前，需要先配置JavaScript编辑器和Web浏览器，其中JavaScript编辑器用于编写HTML、CSS和JavaScript前端代码，Web浏览器用于Web应用的开发测试。

本任务您将学会如何配置JavaScript前端编码和测试环境，并体验鼠标mouseover、mouseout事件时表格行背景变色效果开发，从此开启您的前端征程。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务2斑马线表格制作;;PART1;表格行较少时，可以直接定义样式表实现斑马线表格，但当表格行较多或者后台生成表格行数不确定时，或者是行可能随时增删的表格，再或者表格需要响应交互事件时，手动设置表格类样式和修改样式，工作量巨大且效率低下，使用CSS3的高级选择器:nth-child()会存在浏览器兼容性问题，JavaScript特别擅长处理重复性任务，能实现比样式表更为丰富的DOM操作。一般当表格第一行有背景色时，从第三行设置背景色，第一行没有背景色时，从第二行设置背景色。本任务完成后的效果如图21斑马线表格最终效果所示。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务3弹出消息框;;PART1;弹出消息框具有alert()和confirm()类型的功能，用于提醒用户或者让用户进行选择操作，本任务模拟app开发弹出消息框组件，单击“弹层”按钮打开对话框，如图，弹出层效果所示，单击对话框右上角“X”、“取消”或者“立即开通”都可以关闭该对话框;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务4图片缩放特效;;PART1;图片缩放特效的应用可以增强页面的动感，吸引用户关注。本任务使用JavaScript技术实现对元素样式的读取和设置，并通过间隙执行setInterval()函数实现动画效果，任务完成后如图，图片缩放特效所示。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务5网页换肤;;PART1;Web界面主要由版式和图文样式决定的，而样式表决定图文样式的决定性因素。更改单个选择器的样式定义会影响局部元素表现，更改系列选择器的样式定义则会引发页面界面的更大范围的变化，把页面共有样式和个性化皮肤分离，通过切换个性???皮肤所对应的样式表文件即可实现网页的换肤功能，进而满足用户界面个性化的需求，提高内容的可读性和适应性，完成后的效果如图51网页换肤界面所示。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务6下拉广告;;PART1;下拉广告是在用户浏览页面时，以全屏方式强制插入一个广告页面或弹出广告窗口，以增加可视区域大小吸引访问者关注，保证广告的传达率，具有一定的强制性，广告持续3秒至5秒的广告逐渐缩成banner尺寸的网络广告形式，或者直接隐藏掉。广告内容有静态的页面，也可以纯动画（gif或者flash）或者视频片段。浏览者可以通过关闭按钮手工关闭广告，也可以主动打开重播广告。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务7轮播图;;PART1;轮播（Carousel）有人叫旋转轮播，也有人叫焦点图，还有人叫幻灯片。无论是淘宝、京东、亚马逊等购物网站，还是中国政府网、凤凰、人民网等政府新闻网站，轮播图几乎成了所有网站是标配，也是网站的一大看点和亮点，轮播默认情况下是循环向右（向后）轮播，如果单击某个指示块，会直接跳转到所单击的那张轮播图，并且图片标题及轮播指示器会同步跳转。轮播图内容可以是图像、内嵌框架、视频或者其他任何类型的内容。如何高效便捷地设计轮播图的HTML结构、样式排版以及javascript控制轮播行为及交互，成了前端工程师修炼的基本功。本任务完成后如图71百度AI轮播效果图所示。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务8滚动公告;;PART1;Web页面的滚动公告非常像银行、医院、政务服务大厅的LED显示屏，会定时显示预设的公告内容，有左右滚动式的，也有上下滚动式的，如凤凰金融APP首页中部“活动”的滚动公告，如图8?1上下滚动公告效果所示。;PART2;;PART3;PART4;PART5;;PART6;;感谢聆听，祝您进步！;任务9贷款计算器;;PART1;贷款计算器根据用户输入的贷款金额、贷款年利率