JavaScript基础

为什么要学习JavaScript ?

JavaScript可以实现 验证表单 ，制作特效 等功能，总结起来学习JavaScript的目的基于以下三点 。

1. 客户端表单验证
2. 页面动态效果
3. jQuery的基础

什么的JavaScript ？

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

JavaScript的特点

1. JavaScript主要用来向HTML页面中添加交互行为。
2. JavaScript是脚本语言，语法和Java类似。
3. JavaScript一般用来编写客户端的脚本。
4. JavaScript 是一种解释性语言，边执行边解释。

JavaScript的组成

1. ECMAScrip标准
   ECMAScrip是一种开放的，被国际上广为接受的，标准的脚本语言规范。主要描述一下能容：

• 语法
• 变量和数据类型
• 运算符
• 逻辑控制语句
• 关键字，保留字
• 对象

2. 浏览器对象模型
   浏览器对象模型（Browser Object Model ,BOM）,提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现HTML的交互，如网上常见的弹出窗口，前进后退功能都是浏览器对象控制的。

3. 文档对象模型
   文档对象模型（Document Object Model ,DOM）是HTML文档对象模型，（HTML DOM） 定义的一套标准方法，用来访问和操纵HTML文档，如网上常见的随鼠标移懂，显示大的图片，弹出小提示等都是文档对象的模型。

JavaScript的基本语法结构

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

type：是<script>标签的属性，指定文本使用的语言类别为text/javascript，此属性可以省略
<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

---

向页面 输出可以包含HTML标签的内容

document.write("初学JavaScript");

JavaScript的执行原理

1. 浏览客户端向服务器发送请求：一个用户在浏览器的地址中输入要访问的页面（页面中包含JavaScript的程序）
2. 数据处理：服务器端将某个包含JavaScript的页面进行处理
3. 发送响应：服务器端将包含JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上至下逐条执行HTML标签和JavaScript=，并将页面效果呈现给用户。

在网页中引用JavaScript的方式

1. 内部JavaScript文件

直接使用 <Script>标签将JavaScript代码加入HTMl文档，这是最常用的方式，但这种方式，适用于JavaScript代码较少，并且网站中的每个页面使用的JavaScript代码均不相同的情况。

2. 使用外部JavaScript文件

外部JavaScript文件是将JavaScript代码写入到外部文件中，以 *.js为扩展名保存 ,然后将该文件指定给<script>标签中的src属性，这样就可以使用外部文件。
注意：外部文件不能包含<script>标签，通常将扩展名为 .js的文件放到网站目录中单独存放脚本的子目录中（一般为js），这样容易管理和维护。

3. 直接在HTML标签中

当需要加入简短点JavaScript代码实现一个简单的页面效果

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

三种方式的应用场合

• 内部JavaScript文件适合用于JavaScript特效代码量少，仅用于单个页面
• 外部js文件则适合用于代码较多，重复应用多个页面
• 直接在标签中写JavaScript则适合于极少代码，仅用于当前标签，但是这种方式增加了HTML代码，因此这这种方式在实际应用中比较少

Java的核心语法

JavaScript像Java和C#一样，是一门编程语言，它包含变量的声明，赋值，运算符，逻辑控制语句等基本语法。

1. 变量的声明和赋值

JavaScript是弱类型语言，没有明确的数据类型，在声明的时候变量的类型由付给的变量值决定。

语法：var 合法的变量名；

变量定义(使用var关键字)：变量是存储数据的容器 
var age; //var 是关键字，age是变量名

赋值： 
age = 20;

定义的同时赋值： 
var age=20;

• 可以一次定义多个变量：

	var name="zhangsan", age=18, weight=108;

• 变量名：数字，字母，下划线和”$”符号组成，但是首字母不能是数字，并且不能使用关键字命名。
• 在声明变量的同时赋值，称为变量初始化。
• 注意：JavaScript区分大小写。

2. 数据类型

• Undefined（未定义类型）
• Null（空类型
• Number（数值类型）
• Boolean（字符串类型）
• String（布尔类型）

typeof

• ECMAscript 提供了typeof运算符判断一个值或变量究竟属于哪种数据类型

语法：typeof（变量或值）

typeof运算符返回值如下

• undefined：变量被声明后，但未被赋值
• string：用单引号或双引号来声明的字符串
• boolean：true或false
• number：整数或浮点数
• object：javascript中的对象、数组和null

类型

• Undefined（未定义类型）：变量没有初始值，将被赋予值undefined
• Null（空类型）：表示一个空值，与undefined值相等
• Number（数值类型）：var iNum=23; //整数var iNum=23.0; //浮点数
• Boolean（字符串类型）：true和false
• String（布尔类型）：一组被引号（单引号或双引号）括起来的文本

3. 数组

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

New创建数组的关键字，Array表示数组的关键字，size表示数组的长度

数组赋值语法：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 ";

访问数组： 数组名[下标]

数组常用的方法和属性

（1） length：返回数组中元素个数，返回值为整型
（2） join：通过一个指定的分隔符，把数组元素放在一个字符串中
语法：join（分隔符）

4. 运算符号

• == 表示等于，用于一般比较，比较时可以转换数据类型
• ===表示恒等，用于严格比较，只要数据类型不匹配就返回false
• !==表示不恒等

逻辑控制语句

在JavaScript中，逻辑控制语句是用于控制程序的语句

一. 条件结构

1. if结构

		if(条件)
		{
		   //JavaScript代码;
		}
		else
		{
		  //JavaScript代码;
		}

2. switch结构

	switch (表达式)
	{    
		case 常量1 : 
	        JavaScript语句1;
		break;
	    case 常量2 : 
			JavaScript语句2;
	 	break;
	         ...
	    default : 
	        JavaScript语句3;    
	}

二. 循环结构

1. for循环

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

2. while循环

	while(条件)
	 {
	      JavaScript代码;
	 }

3. do - while循环

	do{
		JavaScript语句
	}while（条件）;

4. for - in循环

var fruit=[ "apple", "orange", "peach","banana"]; 
for(var i in fruit){
       document.write(fruit[i]+"<br/>");
}

5. 中断循环

• break ：可以立即退出整个循环
• continue ：只能退出当前循环，根据判断条件决定是否决定进行下一次循环

6. 注释

• 单行注释以 // 开始，以行末结束
• 多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释

关键字和保留字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

常用的输入和输出

1. 警告框

alter（"提示信息"）

2. 提示框
   prompt（）方法会弹出一个提示对话框，等待用户输入的一行数据

prompt（"提示信息","输入框的默认信息"）

语法约定

1. 大小写区分

JavaScript区分大小写
JavaScript的关键字永远都是小写
内置对象都是大写字母开头
对象的名称通常以小写开头

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

与Java语法基本相同

3. 分号

JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将行代码的末尾看作该语句的结尾。为了代码的规范，不推荐不带分号；

Chrome开发人员工具

• Elements：用于查看和编辑当前页面中的HTML和CSS元素.

• Console：用于显示脚本中所输出的调试信息，或运行测试脚本等.

• Sources：用于查看和调试当前页面所加载的脚本的源文件.

• Network：用于查看HTTP请求的详细信息，如请求，响应及返回内容等。

• Timeline：用于查看脚本的执行时间，页面元素渲染时间等信息.

• Profiles：用于查看CPU执行时间与内存占用等信息.

• Resource：用于查看当前页面所请求的资源文件，如HTML，CSS样式等。

• Audits:用于优化前端页面，加速网页加载速度等.

调试步骤

1. Chrome开发人员工具
2. 停止断点调试
3. 单步调试，不进入函数体内部
4. 单步调试，进入函数体内部
5. 跳出当前函数
6. 禁用所有的断点，不做任何调试

alert（）

可以通过alter（）将不确定的信息已展示框方式展示，以此来判断出现错误的位置

JavaScript常用语法——函数

函数类似于Java中的方法，是执行功能的JavaScript的代码块
Java中函数有两种：一种是JavaScript自带的系统函数，另一种是用户自行创建的自定义函数

常用系统函数

1. parseInt (“字符串”)
   将字符串转换为整型数字
   如: parseInt (“86”)将字符串“86“转换为整型值86
2. parseFloat(“字符串”)
   将字符串转换为浮点型数字
   如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
3. isNaN()
   用于检查其参数是否是非数字

自定义函数

1. 定义函数

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

• function是定义函数的关键字，必须有
• 参数1，参数2，参数3都是函数的参数
• “{”和“}”代表方法的开始和结束
• return语句是规定函数的返回值

2. 调用函数

函数调用一般和表单元素的事件一起使用，调用格式

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

3. 变量的作用域
   全局变量
   局部变量

事件