Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务18 JavaScript的应用

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

函数：计算机程序中由多条语句组成的逻辑单元
定义：
<script>
function 函数名([参数1,参数2,……]){
函数体
[return 表达式;] }
注意：关键字 function 必须小写
</script>
调用：函数名([参数1,参数2,……])
知识准备
示例：函数的调用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>函数的调用</title> <script>
第八单元 J AVA S C R I P T 基础
任务18 JAVASCRIPT的应用
学习目标
掌握
JavaScript的基本语法 JavaScript的语言基础 JavaScript的函数使用
学习目标
了解:
1. 事件及事件驱动 2. JavaScript对象
任务目标
实战演练——制作商品精选模块
abstract catch default eval float import long
protected switch true while
arguments char delete export for in native public
synchronized try with
boolean class do
知识准备
示例：外链式引入
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外链式引入</title> <script src="18-2.js"></script> </head> <body> <p>此处为网页内容。</p> </body> </html>
function show() { alert("欢迎学习JavaScript！");
//alert()方法可以弹出警告框 } </script> </head> <body>  <input type="button" value="点击我" onClick="show()"> </body> </html>
static throws
void
case debugger
enum finally implements
let private super transient volatile
知识准备
2. JavaScript语言基础
标识符：用来命名变量和函数。命名规则：
第一个字符必须是字母、下划线（_）或美元符号（$）第一个字符其后的字符可以是字母、数字、下划线或美元符号标识符不能和JavaScript中的关键字同名不能包含空格等特殊符号合法：i、user_name、_name、$name、n1 不合法：1a、m n、55、long
任务目标
强化训练——制作焦点图广告
知识准备
1. JavaScript简介
JavaScript：Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。
特点：不需要编译，直接嵌入在HTML页面中，实现实时的、动态的、可交互的网页效果。
作用：表单验证、网页动画效果、焦点图切换效果、浮动广告窗口、旋转文字特效。
知识准备
2. JavaScript语言基础
常量：程序运行时，值不能改变的量为常量（Constant）。
语法格式：const 常量名:数据类型=值;
知识准备
2. JavaScript语言基础
变量：程序中一个已经命名的存储单元，为数据操作提供存放信息的容器。
命名规则：必须以字母或下划线开头，中间可以是数字、字母或下划线变量名不能包含空格、加、减等符号不能使用JavaScript中的关键字 JavaScript的变量名严格区分大小写，如myname不等同myName
document.write("此处为JavaScript代码。"); //输出语句。 </script> </head> <body> <p>此处为网页内容。</p> </body> </html>
知识准备
1. JavaScript简介
Jቤተ መጻሕፍቲ ባይዱvaScript引入方式二：外链式 <head> <script src="js文件的路径"></script> </head>
extends function instanceof
new return
this typeof yield
break const double false goto
int null short throw var
byte continue
else final
if interface package
知识准备
1. JavaScript简介
JavaScript引入方式一：内嵌式 <head> <script>
//此处为JavaScript代码 </script> </head>
知识准备
示例：内嵌式引入
<!doctype html> <html> <head> <meta charset="utf-8"> <title>内嵌式引入</title> <script>
知识准备
2. JavaScript语言基础
变量的声明与赋值：var 变量名; 建议：变量先声明，后使用
var a,b,c; //同时声明a，b，c三个变量。 var a=1,b=2,c=3; //同时声明a，b，c三个变量，并分别对其进行
初始化赋值。
知识准备
3. JavaScript函数
大小写敏感：严格区分字母大小写。如：myname和myName是两个不同的变量。
每行语句结尾的分号可有可无：为了规范，应以分号结束。
注释：
//单行注释文本 /*单行注释文本*/ /*多行注释文本
多行注释文本*/
知识准备
2. JavaScript语言基础
关键字：关键字不能作为变量名和函数名使用。
“18-2.js” 文件代码：
// JavaScript Document document.write("此处为js文件代码。"); //输出语句。
提示：外部脚本不能包含 <script> 标签。
知识准备
1. JavaScript简介
JavaScript基本语法
执行顺序：JavaScript程序按照在HTML文件中出现的顺序逐行执行。