当前位置：
文档之家› Web前端开发案例教程——HTML+CSS+JavaScript (8)
Web前端开发案例教程——HTML+CSS+JavaScript (8)
第八章
JavaScript基础
学习目标
了解JavaScrip的历史及特点 掌握JavaScript常用的数据类型 掌握JavaScript变量的定义 掌握JavaScript中的操作符及表达式 掌握JavaScript中的分支、迭代结构 掌握JavaScript中内置函数的使用 掌握JavaScript的函数定义及使用
test.js
document.write("Hello World！");
实例8-2：通过<script>标签引用JS文件
结合事件编写简短javascript脚本
…… <body> <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/> </body> ……
/* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” (条件) 多分支语句 switch { //JavaScript ; switch (while 表达式代码 ) 循环语句 for 、 {} case 常量1 : else JavaScript 语句 1; ) for(初始化 ; 条件 ; 增量 { break; { //JavaScript case 代码 常量; 2 : ; JavaScript 代码 } JavaScript语句2; } break; ... 条件) while( { default : JavaScript 3; JavaScript 代码语句 ; } }
实例8-3：简短缩写方式
脚本执行原理
2
发送请求 IE
客户端请求包含JS的页面
1
浏览器输入
IE
解析HTML标签和 JavaScript脚本
应用服务器
返回响应
3
从服务器端下载含 JavaScript的页面
JavaScript基础语法
变量 数据类型 运算符号
核心语法
控制语句
输入/输出
注释
语法约定
变量的声明和赋值
boolean string number null
typeof
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值 string：用单引号或双引号来声明的字符串 boolean：true或false number：整数或浮点数
object：javascript中的对象、数组和null
实例8-1：通过<script>标签嵌入Javascript
外部JS文件
主要作用是代码重用，可以将一些通用的JS函数在多个HTML文档之间实现共享，在减少代 码冗余的同时也便于修改。 8-2.html
…… <script type="text/javascript" src="test.js"></script> ……
实例8-4：简短缩写方式
运算符号
类型
算术运算符 赋值运算符 比较运算符 逻辑运算符 + = > && < || >= ! <= == != * / %
运算符
++ --
注释
单行注释以 // 开始，以行末结束，例如：
alert("恭喜你！注册成功"); //在页同上弹出注册成功的提示框
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示 中间的语句是该程序中的注释。例如：
利用任何编辑器（如Dreamweaver或记事本）创建HTML文档。 在页面中通过<script>标签嵌入JavaScript代码。 将HTML文档保存为扩展名是“.html”的文件，然后使用浏览器可以查看该网页 JavaScript的运行效果。
…… <script language="javascript"> document.write("Hello World！"); </script> ……
…… var oper1 = prompt('请输入第一个数',''); var oper2 = prompt('请输入第二个数',''); var maxNum = oper1; var minNum = oper2; if(oper2 > oper1){ maxNum = oper2; minNum = oper1; } document.write('最大值为:'+maxNum); document.write('<br/>') document.write('最小值为:'+minNum); ……
弱类型语言
基于对象 事件驱动 跨平台性
8.1.2 JavaScript基本结构 JavaScript脚本的基本结构如下
<script language=”javascript”> JavaScript 语句 </script>
• • •
编写JavaScript的步骤如下：
8.1 JavaScript简介
JavaScript是一种基于对象和事件驱动的重要脚本语言， 用于创建具有动态效果、实现人机交互的网页。 JavaScript的功能十分强大，可以实现多种功能，如表单 验证、动态特效等。
8.1.1 JavaScript语言特点 嵌套在HTML中 解释执行
…… var width,height=10,name="rose"; var arrlist=new Date(); document.write(typeof(width)+"<br>"); document.write(typeof(height)+"<br>"); document.write(typeof(name)+"<br>"); ……
先声明变量再赋值
var width;
width = 4;
var － 用于声明变量的关键字 width － 变量名
同时声明和赋值变量
var catName= “小新”; var x, y, z = 10;
不声明直接赋值
Width=5;
数据类型
typeof检测变量的返回值 数据类型
undefined
