JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)_第1页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)_第2页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)_第3页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)_第4页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

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

文档简介

项目1搭建智慧公寓网站首页任务1-1搭建JavaScript开发环境与渲染首页信息1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务概述

本任务要求我们构建一个智慧公寓的首页结构布局，并以此作为掌握前端开发基本技能与实践应用的起点。我们要熟悉并成功安装VisualStudioCode（VSCode）这一强大的前端开发利器，还要能够利用它创建第一个JavaScript程序，体验从代码编写到页面效果展现的全过程。我们需要通过HTML5与JavaScript标签实现智慧公寓首页的结构布局，使用外链式引入所需JavaScript代码，并通过JavaScript的输出语句渲染页面内容与提示信息。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施任务准备：在ch01文件夹创建一个Example1-8的文件夹，并在该文件夹中依次创建Task1.html文件与Task1.js文件。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施1．创建HTML文件

使用VSCode创建一个Task1.html文件，在该文件中使用HTML5标签搭建首页的基本结构，具体代码如例1-8所示。

Task1.html文件示例代码如下所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页</title><style>//省略CSS代码</style></head><body><divclass="header"><h1>智慧公寓</h1><ulclass="nav"><li><ahref="#">首页</a></li><li><ahref="#">分类</a></li><li><ahref="#">公共</a></li><li><ahref="#">联系我们</a></li></ul></div><scriptsrc="./Task1.js"></script></body></html>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施2．创建JavaScript文件

使用VSCode创建一个名为“Task1”的js文件，通过外链式在Task1.html文件中引入该文件。在Task1.js文件中使用document.write()语句动态渲染<content>标签及其子元素，并使用alert()语句实现用户单击超链接“单击查看更多”时，弹出警告框。

Task1.js文件示例代码如下所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施document.write(`<divclass="content"><h2>欢迎来到智慧公寓</h2><p>这里有你需要的所有信息,<ahref="javascript:alert('智慧公寓提示信息')">单击查看更多</a>。</p></div>`)HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施3．在浏览器中运行程序完成HTML结构、CSS样式和JavaScript代码编写后，在浏览器中运行Task1.html文件。当用户单击超链接“单击查看更多”时，会在页面中弹出提示信息为“智慧公寓提示信息”的警告框，警告框显示效果如图所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务总结

通过本任务的实施，我们不仅搭建了JavaScript的开发环境，掌握了VSCode的基本使用，还学会了在HTML中引入Ja

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

温馨提示

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

最新文档

评论

0/150

提交评论