计算机一下第13周12章javascript基础版

网页设计与制作——网页脚本语言JavaScript王海波Email:网页设计与制作主要内容JavaScript简介JavaScript运行和编辑环境在网页中使用JavaScriptJavaScript编程基础JavaScript的事件驱动JavaScript的对象2023/3/262.JavaScript的作用JavaScript的目的是提供一种足够简单的语言，让开发者能够容易地为网页增加交互效果。JavaScript首次出现时，最初目标是处理表单数据有效性验证的问题，提高表单响应效率。JavaScript将表单有效性验证工作在浏览器内完成，而不需要通过服务器端的程序来进行处理。JavaScript诞生时的名称为LiveScript。在当时计算机界有一门炙手可热的语言——Java。为了推广LiveScript，它被更名为JavaScript。2023/3/262.什么是JavaScriptJavaScript是一种面向对象(ObjectOriented)和事件驱动(EventDriven)的解释性脚本语言。JavaScript特点脚本编写语言面向对象简单性安全性动态性跨平台性2023/3/263.JavaScript特点JavaScript是一种脚本语言，可以用“记事本”等文本编辑器直接对其进行编辑JavaScript是一种解释性语言,其源代码在发往浏览器执行之前不需要编译，由浏览器解释执行。（使用C、C++、Java等语言编写的程序则必须经过编译，将源代码转换为二进制代码之后才可以执行）2023/3/262.JavaScript特点面向对象JavaScript是一种面向对象的语言，它能自已创建或运用JavaScript环境的内建对象。跨平台性JavaScript是依赖于浏览器本身，与操作环境无关，只要浏览器支持JavaScript即可正确执行。2023/3/26二、JavaScript运行和编辑环境运行环境:浏览器编辑环境任何可以编辑HTML文档的文本编辑器或专门的网页编辑器(FrontPage、SharepointDesigner、Dreamweaver、记事本、EditPlus、Ultraedit等。)

2023/3/26在网页中使用JavaScript1三.把JavaScript程序和HTML结合起来的三种方式在标签内添加脚本在HTML元素标签内添加脚本使用<script>标签嵌入脚本程序使用<script>标签将JavaScript的脚本程序包含在HTML中链接外部脚本把脚本保存在一个扩展名为.js的文本文件中，通过<script>标签引用。2023/3/26方法1：在标签内添加脚本方法在HTML元素标签内添加脚本，以响应元素的事件。<inputname=“按钮”type=“button”value=“猛击这里"onClick="JavaScript:alert(‘HelloWorld!')">2023/3/26方法2：使用<script>标签嵌入脚本程序方法：把脚本标记符<script></script>置于网页上的head部分或body部分，然后在其中加入脚本程序。格式：

<scripttype="text/javascript"><!--在此编写javascript代码.//--></script>2023/3/26方法3：链接外部脚本方法当同一段脚本在若干个web页中使用，可以将脚本放在单独的一个后缀是js的文件里，然后在任何需要该文件的web页中调用该文件。引用时，使用script标记符的src属性来指定外部脚本文件的URL。注：可以把.js文件放到网站目录中如“js”的子目录中，这样更容易管理和维护。2023/3/26JavaScript语言基础2四、JavaScript编程基础基本数据类型变量运算符和表达式函数程序结构2023/3/261、基本数据类型数值包括整数和浮点数。如:12.98,6e8,2.6e5等。字符串型用“”号或‘’括起来的任意数量的字符，0个字符也可以。如：“123”,”abc123”,”Thisisabook”布尔型

true或falseNullUndefined2023/3/262.常量和变量常量是保持不变的量。PI=

3.141592654变量主要用于存取数据，提供存放数据的容器。X+10=100X=PI*r22023/3/261)变量的命名JavaScript中的变量命名要注意以下几点：变量对大小写敏感。

例：username和userName是2个变量。必须以字母或下划线_开头，变量名称不能有空格、＋、－、，或其它特殊符号。

例：”username”是一个错误的变量名不能使用JavaScript中的关键字作为变量。

2023/3/262)变量的声明在JavaScript中，变量用关键词var作声明：

如varmBookName;如varmBookName=“JavaScript编程宝典”;2023/3/263.运算符和表达式运算符：是完成操作的一系列符号,也称操作符。算术运算符:+、-、*、/、%、++、--字符串运算符:+（连接两个字符串）位运算符：&,|,^,-,~,<<,>>等比较运算符:<、>、<=、>=、==、!=逻辑运算符:&&、||、!条件运算符：条件？结果1:结果2(若条件为真，则表达式的值为“结果1”，否则为”结果2”)2023/3/263.运算符和表达式表达式它是变量、常量、布尔及运算符的集合表达式可以分为算术表述式、字符串表达式、赋值表达式以及布尔表达式等。2023/3/26例:数字相加2+3例：字符串拼接“中国”+”传媒大学”4.JavaScript中的函数函数是能够完成一定功能的代码块，可以起到代码重用的效果。应用函数实现一定功能时，需要先定义函数，然后调用函数。function

函数名（参数1,参数2，…）{语句段;…return表达式;}2023/3/264.JavaScript中的函数说明函数由关键字function定义。函数名：调用函数时引用的名称。函数名对大小写是敏感的。参数表:调用函数时接受传入数值的变量名。大括号中的语句是函数的执行语句，当函数被调用时执行。如果需要返回值，可以使用return语句，需要返回的值放在return之后。如果return后没有指明数值或没有使用return语句，则函数返回值为不确定值。2023/3/265.程序结构在所有的编程语言中，基本的程序结构只有三种：2023/3/26顺序结构条件结构循环结构语句A语句B语句C语句A语句B语句C判断语句A语句B语句C条件结构中的基本语句——if基本格式if（表述式）

{

语句段１；

}else{

语句段２；

}功能若表达式为true，则执行语句段１；否则执行语句段２循环结构forwhiledowhile循环结构中的基本语句——for基本格式for（初始化参数；条件；增量）{语句段；}功能实现条件循环，当条件成立时，执行语句段，否则跳出循环体。循环结构中的基本语句——while基本格式while（条件）

{

语句段；

}该语句与for语句一样，当条件为真时，重复循环，否则退出循环。

循环结构中的基本语句——dowhile语句格式

do{

语句段;}while(条件)说明首先执行循环体语句，再判别条件。如果表达式的值为真，则执行循环体语句，否则退出循环。2023/3/26JavaScript中的对象3JavaScript中的对象JavaScript中的对象分为三类：JavaScript中的对象JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。属性：用来描述对象特性的一组数据方法：用来操作对象的若干动作访问对象的属性或方法对象名.属性对象名.方法BOM模型和DOM模型BOM:BrowserObjectModel,提供了访问浏览器各种功能部件的途径DOM:DocumentObjectModel,提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单、表格、图像等各种HTML元素以及内容。浏览器对象模型——BOM模型window对象是顶层对象，其它对象都是window对象的子对象。浏览器对象模型——BOM模型对象含义常用属性或方法window表示浏览器窗口alert():创建一个具有说明信息的对话框open():打开另一个浏览器窗口close():关闭浏览器窗口setInterval():设置计时器clearInterval():清除计时器document当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象（如图像、表单等）write()：向当前窗口输出内容getElementById():获得网页中的指定id的元素浏览器对象模型——BOM模型对象含义常用属性或方法history记录浏览器的浏览历史back():返回当前页面之前的页面forword():前进到当前页面之后的页面location存储当前显示的网页的地址href属性：表示浏览器的URL地址navigator提供浏览器的各种信息，如浏览器名称、版本等screen提供显示器屏幕相关的信息，如宽度、高度文档对象模型——DOM模型DOM将把整个页面规划成由节点层级构成的文档。HTML文档中的所有节点组成了一个文档树JavaScript内置对象字符串对象String日期对象Date数学对象Math数组对象Array2023/3/26JavaScript内置对象——字符串对象StringString对象，用来存放字符串属性length:表示字符串中所有字符的个数，包括所有符号。例如：str是一个表示“网页设计与制作”的字符串str.length

的值将是：7方法：substring(start,end)indexOf(str)2023/3/26JavaScript内置对象——日期对象DateDate对象用于处理日期和时间。mDate=newDate();//创建代表当前时间的变量mDate=newDate(“2014/05/20”);//创建代表2014年5月20日的时间变量2023/3/26JavaScript内置对象——日期对象DateDate对象的主要方法：getFullYear()：获得日期中的年getMonth()：获得日期中的月getDate()：获得日期中的日getHours():获得日期中的小时getMinutes()：获得日期中的分钟getTime():获得距离1970年1月1日的毫秒数2023/3/26JavaScript内置对象——数学对象MathMath对象提供了一些数学常量和各种数学处理方法，如求绝对值、最大值、最小值、四舍五入等。Math对象的一些方法：abs(x):返回x的绝对值log(x):返回x的自然对数max(x,y):返回x和y的较大值round(x):对x进行四舍五入，返回整数部分random():返回0.0——1.0之间的随机数2023/3/26JavaScript内置对象——数组对