l 本章简介:
通过了之前的CSS+HTML,我们已经能够做出一个精美、完整的网站了
不过若想要自己的网站能够减轻服务器端负担,曾经用户体验,并具有动态效果
还需学习更多的内容。
今天介绍什么是JavaScript,以及JavaScript的组成、JavaScript的基本语法。
l 本章单词:
DOM: 文档对象类型
BOM 浏览器对象模型
Document 文档
Undefined 未定义的
Alert 警告弹窗
Prompt 提示弹窗
Number 数字
Function 功能,函数
l 10.1 什么是JavaScript
JavaScript在网页制作中有着什么重要的地位,可以实现验证表单,制作特效等功能,总结一共有三点:
1. 客户端的表单验证
2. 页面的动态效果
3. JQuery的基础
JavaScript是一种描述性语言,也是一直基于对象(object)和事件驱动(Event Driven)的,并且具有安全性能的脚步语言。
它与HTML一起,在一个WEB页面中链接多个对象,与WEB客户实现交互。
无论在客户端还是在服务器端,JavaScript应用程序都要下载到浏览器的客户端进行执行,从而减轻了服务器的负担。
特点有四:
JavaScript 主要用来在HTML页面中添加交互行为
JavaScript 是一种脚本语言,语法和java类似
JavaScript 一般用来编写客户端的脚本
JavaScript 是一种解释性语言,边执行,边解释
l 10.2 JavaScript的组成
1. ECMAScript标准
ECMAScript 标准是一种开放的、标准的脚步语言规范,它不任何具体的浏览器绑定。
此标准主要描述了:
l 语法
l 变量和数据类型
l 运算符
l 逻辑控制语句
l 关键字、保留字
l 对象
ECMAScript 标准是一个描述、规定了脚本语言的所有属性,方法和对象的标准,因此在编写Web客户端脚步语言编码时一定要遵循ECMAScript 标准
2.浏览器对象模型
.浏览器对象模型(Browser ObjectModel -BOM),提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互,比如常见的弹窗功能,前进和后退的功能都是浏览器对象控制的。
3.文档对象模型
文档对象模型(Document Object Model -DOM),是HTML文档对象类型(HTML DOM)定义的一套标准方法,用来访问和操纵 HTML文档。
l 10.3 JavaScript基本结构
通常,JavaScript代码都是通过 <script> 标签嵌入HTML文档的,如果需要将多条JavaScript代码嵌入一个文档中,只需要将每条JavaScript代码都封装在<script> 标签中即可。
当浏览器在遇到 <script> 标签时,将逐行读取内容,直到遇到</script>结束标签即可。
<script> document.write("第一章"); //此语句用来向页面输出可以包含HMTL标签的内容。 </script>
l 10.4 JavaScript执行原理
在JavaScript的执行过程中,浏览器客户端与应用服务器采用 请求/.响应模式进行交互
1 浏览器客户端向服务器端发生请求:
用户在浏览器的地址栏中输入要访问的页面(页面中包含JavaScript程序)
2 数据进行处理:
服务器端将某个包含JavaScript的页面进行处理
3 发送响应:
服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端,然后由浏览器客户端从上之下逐条解析HTML标签和JavaScript,最终将页面呈现出来。
使用客户端脚本的好处是在解析包含JavaScript的页面时只需要下载一次即可,这样能减少不必要的网络通信,另外是JavaScript程序由浏览器客户端执行,而不是由服务器端进行执行,所以能减少服务器端的压力。
l 10.5 JavaScript的引入方式
JavaScript作为客户端程序,嵌入网页时有以下三种方式:
1 内部JavaScript文件
直接使用 <script>标签将JavaScript加入HTML文档中,是最常用的方法,但是这种方法通常适用于JavaScript代码少的时候。
2 使用外部JavaScript文件
在实际的工作中,有时会在很多页面中用同样的JavaScript效果。
外部JavaScript文件时将JavaScript代码写入一个外部文件中,然后将该文件指定给“src”属性。
<script src="demo1.js"></script>
3 直接在HTML标签中
有时需要在页面中加入简短的JavaScript代码来实现一个简单的页面效果,
<h1 onclick="javascript:alert('呵呵')"></h1>
内部JavaScript文件适用于JavaScript代码量少,仅用于单个页面。
外部js文件则适用于代码较多,重复应用于多个页面。
直接写在标签中则适用于极少代码,很少使用。
l 10.6 JavaScript语法
JavaScript是一种弱语言类型的语言,没有明确的数据类型,它包含变量的声明,赋值,运算符,逻辑控制语句等基本语法等
在JavaScript中使用 “var“关键子来声明变量
var age = 20;
JavaScript区分大小写,所以大小写不一样的变量名表示不同的变量。
JavaScript允许变量不声明而直接使用,系统会自动声明该变量的数据类型,但是这个方法容易出错,不推荐使用。
l 10.7 JavaScript的数据类型
虽然在声明变量时不需要声明变量的数据类型,而是由赋给变量的值来决定
但是JavaScript也提供了基本的数据类型
1 undefined
此类型只有一个值,即undefined ,当声明的变量未初始化时,该变量的默认值就是
undefined。
2 null
表示什么都没有的 占位符,可以用来检测某个变量是否被赋值。
Undefined 值实际是 null派生而来的,所有他们JavaScript把他们定义为相等的。
var age = null;
3 number
JavaScript最特殊的类型就是 number这个数据类型可以表示为32的整数,也可以表示为64位的浮点数。
var age = 20; var age = 20.5;
4 String
在javscript中,字符串是一组被引号(单引号 or 双引号)括起来的文本。
var name = "javscript";
var name = 'javscript';
此类型也是一个对象,所以它有很多的方法:
IndexOf(str,index): 查找某个字符串在在字符串首次出现的位置
CharAt(index) 返回指定位置的字符
toLowerCase() 把字符串转化为小写
toUooerCase() 把字符串转化为大写
substring(index1 , index2 ) 返回位于位于中间的字符串
split(str ) 将字符串分割成字符串数组。
5 Boolean
Boolean数据类型是常用的数据类型,它有俩个值,true 和 false。
var question = true; var result = false;
6 typeof
如果不知道值属于哪个数据类型,可以使用 “typeof()” 方法进行判断。
l 10.8 JavaScript数组
和java中的数组一样,JavaScript的数组也是具有相同数据类型的一个或者多个值的集合。
数组用一个名称存储一系列的值,用下标区分出数组中的每个值,下标从0开始。
var fruit = new Array("apple","orange","peach","banana");
length属性 设置或者返回数组中元素的数目。
Join()方法 把数组的所有元素放入一个字符串,通过一个分隔符进行分隔
Sort()方法 对数组进行排序
Push()方法 向数组末尾添加一个或多个元素,并返回新的长度。
l 10.8 JavaScript的运算符号
与java的运算符一样,在javscript中根据所执行的运算,常用的运算符有:
算术运算符: +、-、*、/、%、++、--
比较运算符 >、<、>= 、<=、 ==、 !=、 ===、 !==
逻辑运算符 &&、||、!
赋值运算符 =、+=、-=
l 10.9 JavaScript的逻辑控制语句
1.条件结构
分为 if 结构和 switch 结构。
2.循环结构
分为 for、while、do-while、for-in 共四种循环。
同java一样,在javscript中也有两个特殊的语句可以用于循环内部,用来终止循环
Break 可以立即退出整个循环。
Continue 只是退出当前的循环,根据判断条件是否进行下一次循环。
l 10.10 JavaScript的常用输入输出
1. alert(警告)
此方法会创建一个特殊的小对话框,此对话框有一个字符串和一个 “确定”按钮。
alert("提示信息!");
警告对话框是当前运行的网页弹出的,在此对话框关闭前,当前网页无法使用。
2 prompt(提示)
此方法会弹出一个提示对话框,并等待用户输入一行数据。
var color = prompt("你的梦想是什么?","");
如果单击“取消”按钮,或者直接关闭对话框,将返回一个 null,
单击“确定”按钮,将返回一个字符串数据类型数据。
l 10.11 JavaScript的函数
在javscript中,函数类似于java中的方法,是执行特定功能的javscript代码块。
JavaScript中的函数使用更简单,可以直接使用函数名称来调用函数即可。
Javscript中的函数有两种,一种是JavaScript自带的系统函数,另一种是用户自定义函数
1. 系统函数
. parseInt() 函数可以解析一个字符串,并返回一个整数。
var age = parseInt("55kb"); //返回 55
parseFloat() 函数也是解析解析一个字符串,并返回一个浮点数。
var age = parseFloat("89.99ok"); //返回 89.99
isNan() 函数用于检测其参数是否非数字
如果是数字返回 false ,如果不是 数字返回 true。
var f1 = isNaN("21"); //返回值为 flase var f2 = isNaN("21s"); //返回值为 true
2. 自定义函数
同java一样,javscript需要先定义函数,然后才能调用函数。
自定义函数由 function 、函数名、一组参数及置于括号内的待执行的javscript语句组成。
function getAge() { //无参函数 return 20; } function getName( name) { //带参函数 return name; }
要执行一个参数,必须先调用这个函数,当调用函数时,必须指定函数名及后面的参数列表(如果有参数的话),
l 10.12 JavaScript的常用事件
事件是使用javscript实现网页特效的灵魂内容,当与浏览器进行交互时候浏览器就会触发各种事件,来完成网页中的各种特效。
在JavaScript中的事件通常用于处理函数。
Onload 一个页面或者一个图像完成加载
Onclick 鼠标单击某个对象
Onmouseover 鼠标指针移到某个对象上
Onkeydown 某个键盘按键被按下
Onchange 域的内容被改变
l 本章总结:
1. javscript由三部分组成,ECMAScript、DOM和BOM。
2. 在HTML页面中有三种引入 javscript代码的方式。
3. javscript的核心语法有变量的声明和赋值、数据类型、逻辑控制语句、注释。
4. 在javscript中常用的输入输出对话框是 prompt() 和 alert() 方法。
5. 函数分为系统函数和自定义函数,自定义函数需要先创建,在使用。
6. 自定义函数分为有参函数和无参函数。
7. 理解并会使用 各个事件在网页中的应用。