《网页设计与制作》课件-第一章 Javascipt简介

第一章Javascipt简介内容提纲Javascript简史Javascript的主要内容在HTML中使用JavascriptJavascript的基本语法变量和变量的作用域数据类型运算符流程控制语句Javascript简史Web前端三层结构层：HTML从语义的角度，描述页面结构样式层：CSS从审美的角度，美化页面行为层：Javascript从交互的角度，提升用户体验JS的作用控制Web前端的结构和样式；给网页添加一些功能、动画特效、交互；对数据进行验证。Javascript简史Javascript简史Javascript的诞生诞生于1995年，由Netscape的LiveScript发展而来的语言，其主要作用是增强网页的交互性。/js/pro_js_history.aspJavaScript与Java什么关系？Javascript与ECMAScriptECMAScript不是一门语言，而是一个标准JavaScript、Jscript、ActionScript等脚本语言都是ECMAScript的实现Javascript简史扩展知识：计算机编程语言分为3类标签语言，如HTML、CSS等解析型语言，如JS、PHP等编译型语言，如C、C++、JAVA等Javascript的主要内容ECMAScript、DOM、BOMECMAScript：ECMAScript定义了Javascript的语法核心和基本对象。（前三章学习）DOM：DocumentObjectModel的缩写，即文档对象模型

。（第五章）BOM：BrowserObjectModel的缩写，即浏览器对象模型。（第四章）在HTML中使用JavascriptJavascript常见的运行环境是客服端浏览器，不需要服务器就能独立运行。Javascript的<script>元素属性。（见书P3）typesrc……网页中使用Javascript的两种方式。内嵌JS见01_03_01.html外链JS见01_03_02.html注意事项见P4在HTML中使用Javascript扩展知识：在开发过程中，我们经常需要在浏览器中显示某个变量值，常用的方法有：window.alert();document.write();console.log();mpt();在HTML中使用Javascript任务1

编写JS代码，分别用内嵌和外链的方式，在浏览器控制台输出“helloJS!”Javascript的基本语法区分大小写：ECMAScript中的一切区分大小写。标识符：标识符指变量、函数、属性、函数参数等。标识符命名规则（见P5）注释：单行注释的标识符（//）。多行注释的标识符（/*…*/）。语句：ECMAScript中的语句以分号“；”结尾。变量什么是变量?从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。

变量变量命名

我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。变量变量命名

变量名字可以任意取，只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。2.驼峰命名，变量名区分大小写，如:A与a是两个不同变量。3.不允许使用JavaScript关键字和保留字做变量名。

下面哪些变量名是合理的？6num%summySumsum+num_mychar$numa1script变量变量声明(确定你的存在)

我们要使用盒子装东西,是不是先要找到盒子,在编程中，这个过程叫声明变量。JS中只支持声明变量，不支持声明常量。语法:

var变量名;

例如： varmynum;//声明一个变量mynum varnum1,mun2;//声明一个变量num1变量变量赋值（多样化的我）

我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?使用“=”号给变量存储内容。例如：

varmynum=5;//声明变量mynum并赋值JS变量的声明和其他语言的变量类型哪里不一样？不用声明变量类型变量Javascript中的变量声明有两种方法：显式声明。用关键字var进行的声明。隐式声明。不用关键字var声明(在开启严格模式下会报错)。变量的作用域变量的作用域

变量声明后才能使用(函数名变量除外)。全局变量(global)的作用域为全局，声明可以是显示的，也可以是隐式的。局部变量(local)的作用域为局部，只在函数的内部有定义；局部变量的声明只能为显示声明。注意：函数内部隐式声明的变量也是全局变量练习：代码01_07_01.html变量的数据类型JavaScript的数据类型由两大类型系统实现。基本类型系统：值类型、引用类型。Typeof操作符来检测变量值的数据类型。变量的数据类型Javascript是一门弱类型语言，无需要声明类型，可保存任何类型的数据。保存的值不同，其数据的类型就不同；无需强制转换。声明后，可随时重新赋值。支持不同类型的数据之间运算，JS引擎对其类型转换。变量的数据类型任务2

定义两个变量a和b，分别赋值为null和’null’。1.判断b的值是否为空值2.判断a和b的值是否相等3.查看a、b变量的数据类型运算符运算符运算符是用来对数值和变量进行运算的符号。运算符所使用的值被称为操作数。一元运算符、二元运算符、三元运算符运算符可作如下分类：算术运算符、赋值运算符、字符串运算符、位运算符、比较运算符、逻辑运算符、逗号运算符运算符(1)算术运算符算符说明例子结果+加X=2,x+24-减X=2,5-x3*乘X=4,x*520/除15/53%求余5%21++递加X=5,x++X=6--递减X=5,x--X=4运算符(2)赋值运算符算符说明例子=x=yX=y+=X+=yX=x+y-=x-=yX=x-y*=X*=yX=x*y/=x/=yX=x/y.=x.=yX=x.y%=X%=yX=x%y运算符(3)字符串运算符JS中使用“+”作为字符串运算符，用于连接两个字符串。

运算符(4)比较运算符数学题，小明考90分，小红考95分，问谁的分数高？算符说明例子==等于，注意和赋值运算符“=”区分开5==8返回false5==‘5’返回true===全等于，要求值、类型都相等5===‘5’返回false!=不等于5!=8返回true5!=‘5’返false!==不全等于，只有在无需类型转换运算数不相等的情况下，才返回true5!==‘5’返回true>大于5>8返回false<小于5<8返回true>=大于或等于5>=8返回false<=小于或等于5<=8返回true运算符(5)逻辑运算符算符说明例子&&逻辑与(AND)x=6，y=3(x<10&&y>1)返回true||逻辑或(OR)x=6，y=3(x==5||y==5)返回false!非(NOT)x=6，y=3!(x==y)返回truexor异或(XOR)x=6，y=3(x<10xory<1)返回true运算符(6)其他运算符算符说明例子，逗号运算符Vara=1,b=2,c=3;?:三元运算符3<6?’对’:’错’运算符课后练习1）在页面上输出“尊敬的XXVIP客户，欢迎您登陆”（xx是本人的名字）2）声明姓名(name)和密码(pwd)两个变量，如果其中有一个变量值为空，则提示“姓名或密码不能为空”，否则提示“登录成功！”3）判断998这个数字是不是偶数？流程控制语句流程控制：控制程序的执行顺序。

顺序结构。分支结构(条件结构或选择结构)。循环结构。流程控制语句-分支结构If分支结构

可以称if语句，根据表达式的布尔值进行分支选择。1.单一条件分支结构If(条件){//表达式为真时执行的语句块}题目：如果你的实训成绩>60,那么恭喜你，你及格了

流程控制语句-分支结构If分支结构

2.双向条件语句if(表达式){//表达式为真时执行的语句块}else{//表达式为假执行的语句块}题目：流程控制语句-分支结构If分支结构

3.多向条件语句if(表达式1){//表达式1为真时执行的语句块}elseif(表达式2){//表达式1为假,表达式2为真时执行的语句块}else{ //表达式1为假,表达式2为假时执行的语句块 }流程控制语句-分支结构任务3：

流程控制语句-分支结构switch分支结构

Switch语句和if语句类似，不同之处switch的条件可有多个值，而不局限于true或false。流程控制语句-分支结构switch分支结构

例题：模拟游戏按键触发，当按下键A时往左；按下键W时往上……流程控制语句-循环语句很多事情不只是做一次，要重复做比如：在操场上跑十圈我们可以使用循环语句来完成这个功能，循环语句就是重复执行一段代码那么，要完成一个循环，需要哪些条件呢？1.需要计算已经跑了几圈，也就是一个计数器2.需要一个循环的退出条件，在这里就是跑够10圈3.计数器需要不断的在改变

你可以1,2,3,4….一直数到10

也可以10,9,8,7…一直到1流程控制语句-循环语句While循环

例题：流程控制语句-循环语句While循环

例题：流程控制语句-循环语句任务4：用whlie循环完成下面两个练习1.输出0-9的数字2.求0-100的所有数之和流程控制语句-循环语句dowhile循环

例题：流程控制语句-循环语句for循环

例题：流程控制语句-循环语句任务5：用for循环完成下面的练习1.输出0-9的数字2.求0-100的所有数之和3.流程控制语句-循环语句break语句

例题：流程控制语句-循环语句continue语句

例题：流程控制语句-循环语句break语句和continue语句区别本章小结Javascript知识体系的组成部分在HTML中使用Javascript的方式Javascript的基本语法Javascript数据类型流程控制语句课后练习P30独立实践2.九九