JavaScript基础

前言

JavaScript在网页制作中占有非常重要的地位，可以实现验证表单、制作特效等功能，总结起来学习JavaScript的目的主要基于一下三点:
1.客户端表单验证
2.页面动态效果
3.jQuery基础

---

---

一、什么是JavaScript?

JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动(Event Driven)的，并具有安全性能的脚本语言。

JavaScript特点

1、向HTML页面中添加交互行为
2、脚本语言，语法和Java类似
3、解释性语言，边执行边解释

JavaScript的组成

尽管ECMAScript是一个重要的标准，但它并不是JavaScript唯一的部分，当然，它也不是唯一被标准话的部分。

1.ECMAScript标准

ECMAScript是一种开放的、被国际上广为接受的、标准的脚本语言规范。它不与任何具体的浏览器绑定。
ECMAScript标准主要描述了以下内容:
1.语法
2.变量和数据类型
3.运算符
4.逻辑控制语句
5.关键字、保留字
6.对象

2.浏览器对象模型(BOM)

浏览器对象模型(Browser Objecr Model,BOM)，提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。

3.文档对象模型(DOM)

文档对象模型(Document Object Model,DOM)，是HTML文档对象模型(HTML DOM) 定义的一套标准方法，用来访问和操纵HTML文档。

JavaScript的基本结构

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

它的位置并不是固定的，可以包含在文档中的任何地方，只要保证这些代码在被使用之前已经读取并加载到内存即可。

JavaScript的执行原理

在网页中引用JavaScript的方式

1.内部JavaScript文件

<script>
	<!—
          JavaScript 语句;
    —>
</script>

2.使用外部Javascript文件

<script src="export.js"  type="text/javascript"></script>

3.直接在HTML标签中

<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你')"/>

---

二、JavaScript的核心语法

变量的声明和赋值

使用关键字var声明

var 合法的变量名;

注意：变量可以不经过声明而直接使用，但是这种方法很容易出错，也很难查找排错，因此不推荐使用。

数据类型

在声明变量时不需要声明变量的数据类型，而由赋给变量的值决定。但在JavaScript中提供了常用的基本数据类型:

数据类型	描述
undefined	变量没有初始值，将被赋予值undefined
null	表示一个空值，与undefined值相等
number	整数或浮点数
boolean	true和false
string	一组被引号（单引号或双引号）括起来的文本

1.typeof运算符

判断一个值或变量究竟属于哪种数据类型

typeof(变量或值)

2.undefined类型

undefined类型只有一个值，及undefined。

var width;	//声明了变量width,且未赋初始值，将被赋予值undefined

3.null类型

只有一个值的类型是null，是一个表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值。

alert(null==undefined);	//返回值为true

4.number类型

JavaScript中定义的最特殊的类型是number类型，这种类型既可以表示32位的整数，又可以表示64位的浮点数。

var iNum=23;
var iNum=23.0;

5.String类型

JavaScript语言中的String也是一种对象，和Java中的String对象相似。它也有一个length属性，表示字符串的长度(包括空格等):

字符串对象.length;
var str = "this is JavaScript";
var strLength = str.length;

字符串对象使用语法:

字符串对象.方法名();

String对象常用方法

方法	描述
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

6.boolean类型

boolean类型数据称为布尔型数据或逻辑型数据，boolean类型是ECMAScript中最常用的类型之一，它只有两个值：true和false。

var flag = true;
var cars = false;

数组

1.创建数组

var 数组名称 = new Array(size);

2.为数组元素赋值

//方法一
var fruit= new Array("apple", "orange", " peach","banana");
//方法二
var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";
//方法三
var fruit= ["apple", "orange", " peach","banana"];

3.访问数组元素

数组名[下标];	//下标从0开始

4.数组的常用属性和方法

类别	名称	描述
属性	length	设置或返回数组中元素的数目
	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
方法	sort()	对数组排序
	push()	向数组末尾添加一个或更多 元素，并返回新的长度

运算符号

常用的运算符

类别	运算符号
算术运算符	+、-、*、/、%、++、–
比较运算符	>、<、>=、<=、、!=、=、!==
逻辑运算符	&&、或、!
赋值运算符	=、+=、-=

逻辑控制语句

1.条件结构

与Java一样，JavaScript的条件结构也分为if和switch结构。

if(){
	//JavaScript语句1;
}else{
	//JavaScript语句2;
}

switch(表达式){
	case 值1:
		//JavaScript语句1;
		break;
	case 值2:
		//JavaScript语句2;
		break;
	...
	default:
		//JavaScript语句n;
		break;
}

2.循环结构

1)for循环

for(初始化;  条件;  增量)
 {
	   //JavaScript代码;
 }

2)while循环

while(条件)
 {
      //JavaScript代码;
}

3）do-while循环

do{
	//JavaScript代码;
}while(条件);

4)for-in循环

for(变量 in 对象){
	//JavaScript代码;
}

5)中断循环

语句	描述
break	立即退出整个循环
continue	退出当前的循环，根据判断条件决定是否进行下一次循环

注释

	//单行注释

	/*
		多行注释
		......
	*/

常用的输入/输出

1.警告(alert)

此方法会创建一个特殊的小对话框，该对话框带有一个字符串和一个“确定”按钮。

alert("提示信息");

在程序中可以通过alert()方法将不确定的数据以信息框的方式展示，以此来判断出现错误的位置。

2.提示(prompt)

此方法会弹出一个提示对话框，等待用户输入一行数据。

prompt("提示信息","输入框的默认信息");

语法约定

1.区分大小写

JavaScript区分大小写，大写字母和小写字母是不能互相替换的，几个基本规则如下:

1. JavaScript的关键字永远都是小写。
2. 内置对象是以大写字母开头的。
3. 对象的名称通常是小写。但其方法经常是多个单词的大小写混合，通常第一个字母是小写，之后单词的首字母是大写。

2.变量、对象和函数的名称

与Java的命名规范类似，当声明使用变量、对象或函数时，名称可以包括大写字母、小写字母、数字下划线和美元符号($)，但时必须以字母、下划线或美元符号开头。

3.分号

JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将本行代码的结尾看作该语句的结尾，不推荐使用，因为不属于规范的代码编写风格，建议结尾加上分号。

---

三、JavaScript常用语法—函数

JavaScript中的函数有两种，一种是JavaScript自带的系统函数，另一种是用户自行创建的自定义函数。

常用系统函数

JavaScript提供了两种把非数字的原始值转换成数字的函数，即parseInt()和parseFloat()。还提供了一个检查是否是非数字的函数isNaN()，通常用于逻辑判断。

1.parseInt()

parseInt()函数可解析一个字符串，并返回一个整数。

parseInt("字符串");

在判断字符串是否为数字前，parseInt()和parseFloat()都会分析该字符串。

2.parseFloat()

parseFloat()函数可解析一个字符串，并返回一个浮点数。

parseFloat("字符串");

3.isNaN()

isNaN()函数用于检查其参数是否是非数字。

isNaN(x);	//如果x是特殊的非数字值，则返回true；否则返回false

isNaN()函数通常用于检测parseInt()和parseFloat()的结果，以判断它们表示的是否是合法的数字。

自定义函数

1.定义函数

在JavaScript中，自定义函数由关键字function、函数名、一组参数及置于括号中的待执行的JavaScript语句组成。

function 函数名(参数1,参数2,参数3...){
	//JavaScript语句;
	[return 返回值]
}

2.调用函数

要执行一个函数，必须先调用这个函数，当调用函数时，必须指定函数名及其后面的参数(如果有参数)。函数的调用一般和元素的事件结合使用。

事件名="函数名()";

变量的作用域

根据变量作用范围不同，可分为全局变量和局部变量。

全局变量：是在所有函数之外的脚本中声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码。

局部变量：是在函数内声明的变量。

事件

事件时使用JavaScript实现网页特效的灵魂内容，当与浏览器进行交互的时候浏览器就会触发各种事件，来完成网页中的各种特效。

名称	说明
onload	一个页面或一副图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

在JavaScript中事件通常用于处理函数。

---