高二下北京理工大学出版社移动Web前端开发课件第7章 利用 JavaScript 完成交互
2023-01-09
|
58页
|
64人阅读
|
0人下载
普通
内容正文：
本章简介：
Web 前端工程师有三大必须掌握的技能知识：表达网页结构和内容的 HTML、美化网页和描述样式的 CSS、实现网页交互和行为的 JavaScript。其中 JavaScript 作为面向 Web 设计的编程语言，被广泛应用在各类网站中，并且随着 Ajax 技术的崛起，HTML5 标准的诞生，服务器端 JS 的出现，使得业内开发者前所未有地重视 JavaScript 技术。想要更好地交互效果，提升用户对 Web 应用的体验，JavaScript 的学习就势在必行。
第7章 利用 JavaScript 完成交互
课堂学习目标
理解 JavaScript 语言及使用方式。
掌握 JavaScript 基础语法。
掌握 JavaScript 流程控制语句。
掌握 JavaScript 中函数的书写和使用。
掌握 JavaScript 事件响应编程。
掌握 JavaScript 中 DOM 对象。
能够利用 JavaScript 语言完成 Web 中简单的交互。
能够利用 JavaScript 语言制作 Web 中常见的特效。
7.1 【案例17】体验JavaScript
案例分析——“西游人物”交互对话
实现步骤
知识点讲解——变量、数据类型与流程控制
案例练习
7.1.1 案例分析——“西游人物”交互对话
本案例中，设定情景西行取经的师徒四人来到了聊天室，每一位在线观众都有一次提问机会，用户在文本框输入内容后，可以单击师徒四人对应的按钮，提交问题。回答方式是每个人固定好的台词加上观众提问的问题。效果如图 7.1 所示。
1．需求分析
图 7.1 西游人物交互对话效果
根据最终效果，对案例进行分析，通过以下几个方面实现。
（1）HTML 部分。表单元素：文本框和按钮；div 元素。
（2）CSS 部分。为 HTML 用到的元素进行样式设置。
（3）JavaScript 部分。实现单击不同的人物按钮做出回复，回复内容包括三部分：自我介绍，重复来宾的问题，固定的回复台词。
2．设计思路
（1）设计输入框、人物选择按钮、布局回答显示区域。
（2）利用 CSS 美化页面。
（3）通过编写 JavaScript 实现问答功能。
7.1.2 案例实现
1.HTML 部分
新建 xyrw.html 文件，完成问题区域和回答区域的 div 布局，添加按钮、输入框等 HTML元素，同时设置元素的 id 属性。代码如下。
<!DOCTYPE html>
<html>
<head>…</head>
<body>
<div id="questionAndAnswer">
<span> 来宾提问： </span><input type="text" name="" id="question">
<button onclick="fnTalk（‘tsz’） " > 唐三藏 </button>
<button onclick="fnTalk（‘swk’） "> 孙悟空 </button>
<button onclick="fnTalk（‘zbj’） " > 猪八戒 </button>
<button onclick="fnTalk（‘swj’） " > 沙悟净 </button>
</div>
<div id="answer"></div>
</body>
</html>
2.JavaScript 部分
继续编辑 xyrw.html 文件，完成页面中的互动效果，代码如下：
function fnTalk（uName） {
var ans=document.getElementById（“answer"） ;
var qu=document.getElementById（“question"） .value;
var str="";
if（qu==""） {str=" 你还没有提问。 "}
else{
if（uName==’ tsz’） {
…
}else if（uName==’ swk’） {…
}else if（uName==’ zbj’） {
…
}else if（uName==’ swj’） {
…
}else{str=" 部分摘自今何在《悟空传》 ";}
}
ans.innerHTML=str;
}
详见辅助代码。
7.1.3 知识点讲解——变量、数据类型与流程控制
1.JavaScript 基础知识
Javascript 是 由 Netscape 公 司 创 造 的 一 种 脚 本 语 言。 它 曾 经 几 次 改 名， 最 终 才 定 为JavaScript。作为一门独立的编程语言，JavaScript 自然可以做很多事情，不过它最主流的应用还是在 Web 上——创建交互网页效
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。