版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
信息安全技术应用ApplicationofInformationSecurityTechnology任务导入《前端技术开发》任务导入任务导入任务描述1我们为非遗网站的首页添加一个轮播图。另外有两个方向键，可以实现手动切换播放。感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》信息安全技术应用ApplicationofInformationSecurityTechnology变量和常量《前端技术开发》前端技术开发目录Hello,world!1定义变量2定义常量3数据类型41Hello,world!前端技术开发Hello,world!Web前端技术1<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>/*此处可以插入js代码*/</script></head><body><script>/*此处也可插入js代码*/</script></body></html><!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>console.log('Hello,world!');</script></head><body></body></html>Hello,world!Web前端技术12定义变量前端技术开发定义变量Web前端技术2变量是用来存储数据的容器。可以将任何类型的数据（例如，数字、字符串、布尔值、对象、数组等）存储在变量中。一旦你给一个变量赋值，你可以随时更改它的值。letage=25;console.log(age);//输出：25age=30;console.log(age);//输出：30定义变量Web前端技术2var和let的区别：1.作用域：var具有函数作用域，而let则具有块作用域。2.重复声明：var允许在同一个作用域内重复声明同一个变量，而let则不允许重复声明。vara=5;vara=4;console.log(a);//4letb=3;letb=6;console.log(b);//错误3定义常量前端技术开发定义常量Web前端技术3常量与变量不同，一旦被赋值，就不能更改。尝试更改常量的值会导致错误。constPI=3.14159;console.log(PI);//输出：3.14159PI=3.14;//这会导致错误4数据类型前端技术开发数据类型Web前端技术4Javascript是一种弱类型的编程语言，这意味着在声明变量时，不需要指定变量的类型。例如，我们可以声明一个名为name的变量，并将其值设置为“John”。JavaScript会自动将name变量视为字符串类型。此外，JavaScript还支持对象类型，可以将多个值存储在一个对象中。例如：letperson={ name:"John", age:30, isStudent:false};console.log();//输出："John"数据类型Web前端技术4JavaScript中的数组是一种特殊的对象，用于表示和操作有序的数据集。它们用于存储多个值在单个变量中，并且可以轻松地添加、删除和修改这些值。letarr1=[1,2,3,4,5];//字面量语法创建数组letarr2=newArray(1,2,3,4,5);//使用Array构造函数创建数组console.log(arr1[0]);//输出1arr1[0]=10;//修改数组中的元素console.log(arr1[0]);//输出10deletearr1[0];//删除数组中的元素console.log(arr1[0]);//输出undefined感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》信息安全技术应用ApplicationofInformationSecurityTechnology分支和循环《前端技术开发》前端技术开发目录分支语句1for循环2while循环3数组遍历41分支语句前端技术开发分支语句Web前端技术1在JavaScript中，if-else语句是一种控制流程结构，它允许基于某个条件执行特定的代码块。以下是其基本语法：if(condition){ //代码块在条件为真时执行}else{ //代码块在条件为假时执行}分支语句Web前端技术1也可以使用elseif来检查第二个条件：if(condition1){ //代码块在condition1为真时执行}elseif(condition2){ //代码块在condition2为真时执行}else{ //默认代码块，当上面的条件都不满足时执行}2for循环前端技术开发for循环Web前端技术2循环语句允许程序员重复执行一段代码，直到满足特定的条件，大致可分为for循环和while循环。for循环是一种常见的循环类型，允许设置一个计数器，并基于该计数器的值重复执行代码块。以下是for循环的一个例子：for(leti=0;i<5;i++){ console.log(i);}for循环Web前端技术2for...of循环是for语句的一种变体，常用于遍历可迭代对象（如数组、字符串、Map、Set等）的元素。以下是for...of循环的一个例子：constarr=[1,2,3,4,5];for(constvalueofarr){ console.log(value);}3while循环前端技术开发while循环Web前端技术3while循环则会一直执行，直到给定的条件不再满足。以下是while循环的一个例子：leti=0;while(i<5){ console.log(i); i++;}4遍历数组前端技术开发遍历数组Web前端技术4在轮播图中，切换到最后一副图片后，下一幅图片应该是第一张，我们使用分支来判断：constimages=[//图片列表 //...略];current=0;//当前显示的索引while(true){//进入循环 current++; if(current>=images.length){ current=0; }}任务实施Web前端技术在实际应用中，可以进一步简化代码：constimages=[//图片列表 //...略];current=0;//当前显示的索引while(true){//进入循环 current=(current+1)%images.length}感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》信息安全技术应用ApplicationofInformationSecurityTechnology函数和DOM《前端技术开发》前端技术开发目录函数1获取元素2修改属性3任务实施41函数前端技术开发函数Web前端技术1函数是一段可重复使用的代码块，它可以接受输入（称为参数），执行一些操作，并返回结果（称为返回值）。函数在JavaScript中非常核心，因为它们允许我们封装代码，使其更易于重用和维护。函数Web前端技术1函数是一段可重复使用的代码块，它可以接受输入（称为参数），执行一些操作，并返回结果（称为返回值）。函数在JavaScript中非常核心，因为它们允许我们封装代码，使其更易于重用和维护。functiongreet(name){return"Hello,"+name+"!";}console.log(greet("Alice"));//输出:Hello,Alice!函数Web前端技术1函数的参数可以有默认值。这意味着如果调用函数时没有提供某个参数的值，那么该参数将使用其默认值。这是从ES2015（也称为ES6）开始引入的新特性。functiongreet(name="World"){return"Hello,"+name+"!";}console.log(greet("Alice"));//输出:Hello,Alice!console.log(greet());//输出:Hello,World!2获取元素前端技术开发获取元素Web前端技术2DOM（文档对象模型）是用于操作HTML和XML文档的编程接口。DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。下面是一些常用的查询接口：接口含义getElementById返回具有指定ID的元素。getElementsByClassName返回一个类数组的对象，包含所有具有指定类名的元素。getElementsByTagName返回一个类数组的对象，包含所有具有指定标签名的元素。querySelector返回匹配指定CSS选择器的第一个元素。querySelectorAll返回一个NodeList对象，包含所有匹配指定CSS选择器的元素。获取元素Web前端技术2其中querySelector和querySelectorAll是HTML5中新增的标准，功能最强大，鼓励使用。//获取id为header的元素letheader=document.querySelector('#header');//获取所有class为section的元素letsections=document.querySelectorAll('.section');//获取所有p标签letp=document.querySelectorAll('p');3修改属性前端技术开发修改属性Web前端技术3元素身上的style属性决定了它的外观。所有CSS中可以定义的属性在style中都有：<pid="text">Thisisatestmessage.</p><script> lettext=document.querySelector('#text'); text.style.color='blue'; text.style.fontSize='20px';</script>#text{ color:blue; font-size:20px;}修改属性Web前端技术3CSS的属性名称中出现“-”分割的单词，在style中的属性名称就按照小驼峰命名法处理：CSS属性DOM中的style属性background-colorbackgroundColorfont-sizefontSize…………4任务实施前端技术开发任务实施Web前端技术4准备好3到5幅图片，图片的尺寸尽量保持一致。在页面上放置一个固定尺寸的图层作为窗口，窗口的尺寸也和图片的尺寸保持一致。将所有图片塞入一个容器（也是图层），让图片水平排列。下面是代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JavascriptDemo</title><style>.carousel{width:500px;height:280px;margin:auto;}.carousel>img{width:500px;height:280px;display:block;float:left;}</style></head><body><divclass="carousel"><imgsrc=""id="carousel-image"></div></body></html>任务实施Web前端技术4窗口初始化后，使用DOMAPI获取图片元素，设置src属性。<script>constimages=['pic/sample1.jpg','pic/sample2.jpg','pic/sample3.jpg',];letcurrent=0;constimage=document.querySelector('#carousel-image');image.src=images[current];</script>感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》信息安全技术应用ApplicationofInformationSecurityTechnology定时器《前端技术开发》前端技术开发目录setTimeout1setInterval2区别与转换3任务实施41setTimeout前端技术开发setTimeoutWeb前端技术1setTimeout(function,milliseconds);//function是你想要在时间过后执行的函数。//milliseconds是希望等待的毫秒数。setTimeout是JavaScript中用于在指定时间后执行函数的方法。这是异步编程的一部分，这意味着setTimeout不会阻止代码的其余部分继续执行。setTimeoutWeb前端技术1setTimeout(function(){console.log('Thiswillprintafter2seconds.');},2000);下面的例子中，消息将在2秒后打印到控制台。setTimeoutWeb前端技术1lettimer=setTimeout(function(){console.log('Thiswillprintafter2seconds.');},2000);clearTimeout(timer);setTimeout返回值是定时器的标识符，可用来停止计时。下面的定时器不会发生，因为创建之后立刻被clearTimeout清除了。2setInterval前端技术开发setIntervalWeb前端技术2setInterval是JavaScript中的一个内置函数，用于定期执行代码或函数。setInterval(function,delay);//function：要定期执行的函数或代码。//delay：两次执行之间的时间间隔，以毫秒为单位。setIntervalWeb前端技术2例如，每隔一秒在控制台输出"Hello!"setInterval(function(){console.log("Hello!");},1000);setIntervalWeb前端技术2lettimer=setInterval(function(){console.log("Hello!");},1000);clearInterval(timer);setInterval返回值是定时器的标识符，可用来停止计时。下面的定时器不会发生，因为创建之后立刻被clearInterval清除了。3区别与转换前端技术开发区别与转换Web前端技术3setTimeout和setInterval的区别主要在于执行次数：setTimeout的本质是延迟执行，只执行一次。它通常在指定的延迟时间后执行一次回调函数。而setInterval的本质是定时执行，会不断重复执行，直到被取消。setTimeout转setInterval：第一次定时器回调函数的最后清除定时。setInterval转setTimeout：创建递归函数进行模拟。区别与转换Web前端技术3setTimeout(function(){console.log("Hello!");},2000);lettimer=setInterval(function(){console.log("Hello!");clearTimeout(timer);},2000);等价区别与转换Web前端技术3setInterval(function(){console.log("Hello!");},2000);functionsayHello(){console.log("Hello!");setTimeout(sayHello,2000);}sayHello();等价4任务实施前端技术开发任务实施Web前端技术4使用setInterval定时更新carousel-container的位置，使它不断向左。需要注意的是，最后一张图片播放完毕之后，再次把carousel-container复原，继续播放第一张图片。//之前的代码，略//开启定时器setInterval(function(){current=(current+1)%images.length;image.src=images[current];},5000);感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》项目八
非遗首页的制作信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》JavaScript基础任务8.2制作非遗首页前端技术开发任务引入一页眉导航轮播图主要内容页脚非遗首页的原型图将首页内容划分为不同的区域，分步实现任务描述1.按照线框图实现非遗网站首页的布局2.准备素材丰富页面的内容3.将轮播图按照要求嵌入首页任务实施二3124创建导航栏区域，使用CSS设置样式使用HTML、CSS创建主要内容使用HTML创建页眉页脚区域，并设置CSS样式创建轮播图并设置样式，使用JavaScript实现创建导航栏创建主要内容创建页眉页脚区域创建轮播图任务实施二要点：1.横向布局2.垂直对齐3.背景样式设置4.溢出设置1.创建页眉区域 <divclass="header"> <divclass="container"> <imgid="logo"src="res/logo.png"> <h1>中国非物质文化遗产</h1> <inputtype="text"id="txtSearch"placeholder="站内搜索"> </div> </div>任务实施二要点：1.无序列表样式2.列表项浮动设置3.超链接样式2.创建导航栏区域 <divclass="nav"> <divclass="container"> <ulclass="navbar"> <liclass="active"><ahref="#">首页</a></li> <li><ahref="#">机构</a></li> <li><ahref="#">资讯</a></li> <li><ahref="#">调研</a></li> <li><ahref="#">指南</a></li> </ul> </div> </div>任务实施二要点：1.CSS设置元素样式2.JavaScript实现图片轮播效果3.创建轮播图区域 <divclass="carousel"> <divclass="arrow-left"><</div> <imgid="img-carousel"> <divclass="arrow-right">></div> </div>任务实施二要点：1.层布局4.创建主要内容区域<divclass="containermain"> <!--图片新闻--> <div><h2class="title">图片新闻</h2></div> <!--热点关注--> <div><h2class="title">热点关注</h2></div> <!--公示公告--> <div><h2class="title">公示公告</h2></div></div>感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》信息安全技术应用ApplicationofInformationSecurityTechnology事件《前端技术开发》前端技术开发目录事件的概念1绑定事件2取消事件3任务实施41事件的概念前端技术开发事件的概念Web前端技术1在JavaScript中，事件是一个非常重要的概念，它指的是在特定时间或条件下发生的事情。事件可以由用户与网页的交互触发，例如点击按钮、移动鼠标或按下键盘等。也可以由浏览器自动触发，例如页面加载完成或浏览器窗口大小改变等。事件在JavaScript中通常与事件处理程序一起使用，事件处理程序是一段代码，当特定事件发生时会被调用。例如，当用户点击一个按钮时，可以触发一个“click”事件，并执行相应的事件处理程序。事件的概念Web前端技术1常见的事件事件含义click鼠标单击dblclick鼠标双击mousemove鼠标移动mouseenter鼠标移入元素范围mouseout鼠标移除元素范围keydown键盘按下keyup键盘弹起2绑定事件前端技术开发绑定事件Web前端技术21.在标签内声明事件回调函数在HTML中，我们经常需要为元素添加事件监听器，以便在用户与页面交互时执行某些操作。例如，当用户点击一个按钮时，我们可能希望执行某些JavaScript代码。为了实现这个功能，我们可以使用HTML的事件属性来声明回调函数。<buttononclick="myclick()">Clickme</button><script>functionmyclick(){ console.log('Hello,world!');}</script>绑定事件Web前端技术22.使用“on”前缀声明事件回调函数在标签内声明回调函数的缺陷在于很难批量修改。其实，事件也可以通过Javascript动态添加，它使得代码更加清晰和易于理解。<buttonid="btn">Clickme</button><script>constbtn=document.querySelector('#btn');btn.onclick=function(){ console.log('Hello,world!');}</script>绑定事件Web前端技术23.使用addEventListener声明事件回调函数addEventListener方法用于在元素上添加事件监听器。这个方法接受两个参数：事件名称和回调函数。当指定的事件被触发时，这个回调函数就会被执行。//获取元素varbutton=document.querySelector('#myButton');//定义事件回调函数functionhandleClick(){alert('按钮被点击了！');}//添加事件监听器button.addEventListener('click',handleClick);绑定事件Web前端技术2使用addEventListener多重绑定//获取元素varbutton=document.querySelector('#myButton');//两个回调函数button.addEventListener('click',handleClick1);button.addEventListener('click',handleClick2);绑定事件Web前端技术2使用addEventListener监听自定义事件：//获取元素varbutton=document.querySelector('#myButton');//两个回调函数button.addEventList
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 新规则碰撞测试题及答案
- 如何针对信息系统项目管理师考试制定个性化复习计划试题及答案
- 2025年新媒体传播专业考试试题及答案
- 山东教师考试试题及答案
- 福建会考地理试题及答案
- 环境科学与管理知识点详解及练习题集
- 强化练习软件设计师试题及答案集合
- 赋权与公共政策创新试题及答案
- 西方政治制度中的创新生态环境研究试题及答案
- 机电工程后的未来科技探索的试题及答案
- 码头水手作业安全操作规程
- 2023企业法律顾问协议范本
- 工程变更矩阵图
- 水闸施工规范SL 27-2014
- -装饰装修工程技术标
- 要素表及要素式判决书
- 2022年南通如皋市医疗系统事业编制乡村医生招聘笔试试题及答案解析
- GB/T 9652.1-2007水轮机控制系统技术条件
- 初中英语八下unit默写手册
- 法学本科毕业论文
- 敏捷项目管理：敏捷革命课件
评论
0/150
提交评论