JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 搭建JavaScript开发环境与渲染首页信息(任务1-任务实施)

项目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