JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>>
本章目录
1.1 JavaScript 概述
1.1.1 JavaScript 简介
JavaScript 诞生于 1995 年，主要是进行用户输入的合法性验证
在 1995 年之前，Web 页面的一些验证工作都是由服务器端的语言来实现，这就要求用户输入的数据必须先通过网络传输到服务器端，服务器端进行相应的处理后，再将结果反馈给客户端
1.1.2 JavaScript 的概念和执行原理
JavaScript 是一种轻型的、解释性的脚本语言，是一种由浏览器内的解释器执行的程序语言
当客户端向服务器端请求页面时，服务器端将整个页面包含 JavaScript 的脚本代码发送到客户端，浏览器从上往下逐行读取并解析其中的 HTML 或脚本代码
1.1.3 JavaScript 脚本代码的位置
通常可以在 3 个地方编写 JavaScript 的脚本代码
- <script></script> 标签中直接编写脚本程序代码
- 脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
- 将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
HTML 文件混合方式
示例：
<body>
<script type="text/javascript">
document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
</script>
</body>
JS 文件引用方式：
- 创建 JavaScript 文件，命名为demo1.js html
- 页面，在 <script> 标签中引用 JavaScript 文件
<body>
<script src="../js/demo1.js" type="text/javascript"></script>
</body>注意：带有 src 属性的 <script> 标签不应该在 <script></script> 标签之间包含任何额外的 JavaScript 代码，否则嵌入的代码会被忽略
HTML 代码嵌入方式
将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
<body>
<a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>1.1.4 实践练习
1.2 JavaScript 核心语法
1.2.1 变量
变量有三种使用方式:
- 先声明再赋值 如：var message; message="hi";
- 同时声明和赋值变量 如：var message="hi";
- 不声明直接赋值 如：message="hi";
变量可以不经声明而直接使用，但是这种方法很容易出错，因此不推荐使用。对变量的输出测试可以采用 alert() 弹出对话框的方式
变量命名规则:
- 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
- 其他字符可以是字母、下划线、美元符号或数字
- 区分大小写
- 不能与关键字同名，如 while、for 和 if 等
示例：
<body>
<script type="text/javascript">
var x=2;
var y=3;
var z=x+y;
alert("x="+x+",y="+y+",z="+z);
</script>
</body>
1.2.2 数据类型
JavaScript 中有 5 种简单数据类型，也称为基本数据类型
- undefined
- null
- boolean
- number
- string
另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型
|
数据类型 |
数据值 |
typeof |
|
number类型 |
浮点数、整数 |
number |
|
boolean类型 |
true、false |
boolean |
|
string类型 |
单引号或双引号引起来的若干字符 |
string |
|
null类型 |
只存在一个值null，表示对象不存在 |
object |
|
undefined类型 |
只存在一个值undefined，表示未赋值或未声明的变量 |
undefined |
示例：
<body>
<script type="text/javascript">
var str="message";
document.write(typeof str+"<br/>");
var other;
document.write(typeof other+"<br/>");
var numb=10.0;
document.write(typeof numb+"<br/>");
var date=new Date();
document.write(typeof date+"<br/>");
var bool=1<2;
document.write(typeof bool);
</script>
</body>
1.2.3 JavaScript 注释
JavaScript 与很多语言一样，如 Java、C# 都支持同样的注释形式
- 单行注释：//
- 多行注释： /* 注释内容 */
示例：
// 声明并初始化一个变量
var v = 5;
/* 使用 for 循环输出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/
1.2.5 实践练习
1.3 顺序结构和选择结构
1.3.1 顺序结构
顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行
示例：
<body>
<script type="text/javascript">
document.write(" 程序开始执行……<br/>");
document.write(" 程序正在执行中……<br/>");
document.write(" 程序执行完毕……<br/>");
</script>
</body>
1.3.2 选择结构
- 选择结构：需要根据特定的条件执行不同的语句
- JavaScript中选择结构使用if语句和switch语句
- if 语句有 3 种形式：单分支、双分支和多分支
1、if单分支语句：
if( 条件表达式 ) {
语句或语句块
}
示例：
<body>
<script type="text/javascript">
var undf;
if(typeof undf=="undefined") {
undf="Hello World ！ ";
}
document.write(" 名称是："+undf);
</script>
</body>
2、if 双分支语句
if( 条件表达式 ) {
语句或语句块 1
} else{
语句或语句块 2
}
示例：
<script type="text/javascript">
var x=-4,y;
if(x>0){
y=x;
}else{
y=-x;
}
document.write(x+' 的绝对值是：'+y);
</script>
如何用“变量 = 布尔表达式？语句 1: 语句 2”的条件表达式来简化上述示例中的代码？
3、if 多分支语句
if( 条件表达式 1){
语句或语句块 1
}
else if( 条件表达式 2){
语句或语句块 2
}......
else if( 条件表达式 n){
语句或语句块 n
}
else{
语句或语句块 n+1
}
示例：
Date 是 JavaScript 的内置对象，通过它可以获取时间
<body>
<script type="text/javascript">
var time=new Date(); // 创建 Date 对象
var hour=time.getHours(); // 当前小时
if(hour<=11){
document.write(" 早上好 ");
}else if(hour<=18){
document.write(" 下午好 ");
}else{
document.write(" 晚上好 ");
}
</script>
</body>
4、switch 语句
switch（表达式）{
case 取值 1：语句或语句块 1; break;
case 取值 2：语句或语句块 2; break;
......
case 取值 n：语句或语句块 n; break;
default: 语句或语句块 n+1; break;
}
示例：
var time=new Date();
var week=time.getDay();
var weekstr;
switch(week){
case 1: weekstr=" 一 ";
case 2: weekstr=" 二 ";
case 3: weekstr=" 三 ";
case 4: weekstr=" 四 ";
case 5:
weekstr=" 五 ";
document.write(" 今天是星期 "+weekstr+", 努力工作吧！ ");
break;
default:
document.write(" 今天是周末，放松一下吧！ ");
break; }
1.3.3 实践练习
1.4 循环结构
1.4.1 while 循环语句
JavaScript中，循环结构有 while 循环、do-while 循环和 for 循环
1、while 循环语句
while（条件表达式）{
语句或语句块
}
示例：
<table border="1" width="100%">
<tr align="center">
<td> 摄氏温度 </td>
<td> 华氏温度 </td>
</tr>
<script type="text/javascript">
var f; // 华氏温度
var c=0; // 摄氏温度
var count=1; // 条目
while(count <= 10 && c <= 250){
f=c*9/5.0+32; // 转换关系
document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
c=c+20;
count++;
}
</script>
</table>
2、do-while循环语句
do{
语句或语句块
}while( 条件表达式 );
示例：
<script type="text/javascript">
var i=1;
var num=1;
do{
i++;
num=num*i;
}while(i<5);
document.write("i="+i+",num="+num);
</script>
3、for循环语句
for( 初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式 ){
语句或语句块
}
示例：
<table border="1" width="100%">
<tr align="center">
<td> 摄氏温度 </td>
<td> 华氏温度 </td>
</tr>
<script type="text/javascript">
var f;// 华氏温度
for(var c=0,count=1;count<=10&&c<=250;c=c+20,count++){
f=c*9/5.0+32; // 转换关系
document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
}
</script>
</table>
1.4.4 break 语句和 continue 语句
JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环
示例：
var i=1;
var sum=0;
while(i<=20){
if(i%2!=0){
i++;
continue; // 是奇数就结束本次循环，开始下一次循环
}
sum=sum+i;
if(sum>30){
document.write(" 当加到："+i+" 时，累加和已经超过 30");
break; // 累加和超过 30，跳出循环
}
i++;
}
1.4.5 实践练习
总结：
- JavaScript是由浏览器的解释器解释执行的程序语言
- JavaScript脚本在客户端执行，从而间接地提升了Web服务器的性能
- JavaScript的变量是采用弱类型的形式 JavaScript中有五种简单数据类型
- JavaScript用typeof操作符来检测给定变量的数据类型
- JavaScript的运算符有算术运算符、赋值运算符、比较运算符和逻辑运算符
- JavaScript的流程控制语句有顺序结构、选择结构和循环结构。
- JavaScript中选择结构有if和switch。循环结构有while、do…while和for
JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】的更多相关文章
- JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
- JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
- JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
随机推荐
- 节省内存的循环banner（一）
循环banner是指scrollview首尾相连,循环播放的效果,使用非常广泛.例如淘宝的广告栏等. 如果是简单的做法可以把所有要显示的图片全部放进一个数组里,创建相同个数的图片视图来显示图片.这样的 ...
- 【Linux】【Shell】【Basic】流程控制
1. 选择执行: 1.1. if 单分支的if语句: if 测试条件 then 代码分支 fi 双分支的if语句: if 测试条件; then 条件为真时执行的分支 else 条件为假时执行的分支 f ...
- java异常处理中throws和throw的使用
异常介绍: 运行时异常.非运行时异常 在编写可能会抛出异常的方法时,它们都必须声明为有异常. 一.throws关键字 1.声明方法可能抛出的异常: 2.写在方法名后面: 3.可声明抛出多个异常,异常名 ...
- Django auth
auth是django一个自带的用户验证系统,使用它可以减少我们的开发流程. 基本使用 大体流程: 自定义类 from django.contrib.auth.models import Abstra ...
- 【软件安装与配置】【Java】Eclipse For Java EE的安装
Eclipse For Java EE的安装 哔哩哔哩:萌狼蓝天 微信公众号:萌狼蓝天 博客:萌狼工作室 00 提前说明 因为编程涉及的环境配置资源比较多,所以我专门创建了一个文件夹(Developm ...
- 面渣逆袭：Java集合连环三十问
大家好,我是老三.上期发布了一篇:面渣逆袭:HashMap追魂二十三问,反响很好! 围观群众纷纷表示 不写,是不可能不写的,只有卷才能维持了生活这样子. 当然,我写的这一系列,不是背诵版,是理解版,很 ...
- java多线程5：线程间的通信
在多线程系统中,彼此之间的通信协作非常重要,下面来聊聊线程间通信的几种方式. wait/notify 想像一个场景,A.B两个线程操作一个共享List对象,A对List进行add操作,B线程等待Lis ...
- Redis主从 部署和配置
目录 一.主从简介 主从介绍 主从原理 二.主从部署 环境介绍 主从配置 临时主从 三.主从测试 一.主从简介 主从介绍 Redis都是主节点.每个从节点只能有一个主节点,而主节点可以同时具有多个从节 ...
- 效验pipeline语法
目录 一.简介 二.配置 一.简介 因为jenkins pipeline不像JAVA之类的语言那样应用广泛,所以没有相关的代码检测插件. 2018年11月初,Jenkins官方博客介绍了一个VS Co ...
- <转>单机版搭建Hadoop环境
安装过程: 一.安装Linux操作系统 二.在Ubuntu下创建hadoop用户组和用户 三.在Ubuntu下安装JDK 四.修改机器名 五.安装ssh服务 六.建立ssh无密码登录本机 七.安装ha ...