为什么学习JavaScript？
JavaScript在网页中占据非常重要的位置，可以实现验证表单、制作特效等功能
1、客户端表单验证
在登录注册时，如果某项信息格式输入错误，或没有输入内容，表单页面将及时给出错误提示，这减轻了服务器端的压力，这是JavaScript最常用的场合
2、页面动态效果
在JavaScript中，可以编写响应鼠标单击等事件代码，创建动态页面特效，从而高效控制页面的内容。例如：层的切换特效、级联菜单特效等，它们可以在有限的页面空间里展现更多的内容，增加客户端的体验，从而使我们懂得网站更加有动感、有魅力、吸引更多的浏览者
什么是JavaScript
JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安全性能的脚本语言，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担
特点：
JavaScript主要用于在HTML页面中添加交互行为
JavaScript是一种脚本语言，语法和Java类似
JavaScript一般用来编写客户端的脚本
JavaScript是一种解释性语言，编执行边解释
JavaScript的组成
1、ECMAScript标准
ECMAScript是一种开发的、被国际上广为接受的、标准的脚本语言规范。它不与任何具体的浏览器绑定
ECMAScript主要描述了一下内容：
语法
变量和数据类型
运算符
逻辑控制语句
关键字、保留字
对象
ECMAScript是一个描述，规定了脚本语言的所有属性、方法和对象的标准，因此在使用Web客户端编写脚本语言编码时一定要遵循ECMAScript标准
2、浏览器对象模型
浏览器对象模型（Browser Object Model，BOM），提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTM的交互，例如：网上常见的弹出窗口、前进后退等功能都是浏览器对象控制的
3、文档对象模型
文档对象模型（Document Object Model，DOM），是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操作HTML文档，如：网上商城常见的随鼠标移动显示大的图片、弹出小提示等都是文档对象的功能
JavaScript的基本结构
通常，JavaScript代码是用<script>标签嵌入HTML文档中的。如果需要将多条JavaScript代码嵌入一个文档中，只需要每条JavaScript代码都封装在<script>标签中即可。浏览器将检查JavaScript语句的语法，如果有任何错误，则会警告框中显示；如果没有错误，则浏览器将编译并执行语句
1、JavaScript的基本结构
<script type="text/Javascript">
JavaScript语句
</script>
其中type是<script>标签得属性，用于指定文本使用的语言类别为text/JavaScript
document.write()用来向页面输出可以包含HTML标签得内容
2、JavaScript的执行原理
在JavaScript的执行过程中，浏览器客户端与应用服务器端采用请求/响应模式进行交互，如图所示：
处理过程
（1）、浏览器客户端向服务器发送请求：一个用户在浏览器的地址栏中输入要访问的页面
（2）、数据处理：服务器端将某个包含JavaScript的页面进行处理
（3）、发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户
（4）、包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信
（5）、JavaScript程序由浏览器客户端执行，而不是有服务器端执行的因此能减轻服务器端的压力
在网页中引用JavaScript的方式
嵌入网页时有以下三种方式：
内部JavaScript文件
使用外部JavaScript文件
直接在HTML标签中
1、内部JavaScript文件
直接使用script标签将JavaScript代码加入HTML文档中
2、使用外部JavaScript文件
注意：外部文件不能包含<script>标签，通常将扩展名为.js的文件放到网站目录中单独存放脚本的子目录中，这样便于维护和管理
3、直接在HTML标签中
例如：
三种方式的应用场合：
内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面
外部js文件则适用于代码较多，重复应用于多个页面
直接在标签中写JavaScript则适用于极少代码，仅用于当前标签，但是这种方式增加了HTML代码
变量的声明和赋值
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定
语法：var 合法的变量名；
变量命名规则：可以由数字、字母、下划线和”$“符号组成，但首字母不能是数字，并且不能使用关键字命名；可以在声明变量时赋值，大小写不同的变量名表示不同的变量
规范：
千万要注意JavaScript区分大小写，特别是变量的命名、语句关键字等，这种错误有时很难查找
变量可以不经过声明直接使用，但这种方法很容易出错，也很难查找排错，因此不推荐使用，在使用变量之前，请先声明后使用
数据类型
常用的基本数据类型：
undefined（未定义类型）
null（空类型）
number（数值类型）
String（字符串类型）
boolean（布尔类型）
1、typeof
用来判断一个值或变量究竟属于那种数据类型
语法：typeof（变量赋值）
返回结果：
undefined：如果变量是undefined类型的，则返回undefined类型的结果
number：如果变量时number类型的，则返回number类型的结果
String：如果变量是String类型的，则返回String类型结果
boolean：如果变量是boolean类型的，则返回boolean类型的结果
object：如果变量是null类型的，或者变量是一种引用类型，如对象、函数、数组，则返回object类型的结果
2、undefined类型
undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined
3、null类型
只有一个值的类型是null，是个表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值
4、number类型
既可以表示32位的整数，又可以表示64位的浮点数，整数也可以表示为八进制或十六进制，八进制首数组必须是0，后面的数组任意（0~7），十六进制首字母必须是0，后面任意（0~9和A~F），NaN（Not a Number）表表示非数
5、String类型
在JavaScript中，字符串是一组被引号（单引号或双引号）括起来的文本，不对字符或字符串加以区别
JavaScript语言中的String也是一种对象，length表示字符串的长度（包括空格）
语法：字符串对象.length;
使用字符串对象的语法：字符串对象.方法名（）；
toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写
6、boolean类型
称为：布尔类型数据或逻辑型数据，只有两个值：True和False
数组
JavaScript中的数组也是具有相同数据类型的一个或多个值的集合。数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组下标从0开始
1、创建数组语法：var 数组名称=new Array(size)；
其中，new是用来创建数组的关键字，Array表示数组的关键字，而size表示数组中可存放的元素总数
2、为数组元素赋值语法：var fruit new Array("apple"，"orange"，"peach"，“banana”);
或者：var fruit =[“apple”，“orange”，“peach”，“banana”]；
3、访问数组元素可以通过数字的名称和数组下标直接访问数组的元素，访问数组的表示形式：数组名[下标]；
4、数组的常用属性和方法
join的使用方法：join（分隔符）；
运算符号
==表示等于，===表示恒等于，！==表示不恒等于，都是用于比较，但是==用于一般比较，===用于严格比较，==在比较时可以转换数据类型，===严格比较，只要数据类型不匹配就返回false
逻辑控制语句
1、条件语句
（1）、if结构
语法：if（表达式）{
//JavaScript语句1；
}else{
//JavaScript语句2；
}
（2）、switch语句
语法：switch（表达式）{
case 值1：
//JavaScript语句1；
break；
case 值2：
//JavaScript语句2；
break；
case 值3：
//JavaScript语句3；
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（）方法会弹出一个提示对话框，等待用户输入一行数据
语法：prompt（“提示信息”，“输入框的默认信息”）；
prompt（）方法的第一个参数值显示在对话框上，通常是一些提示信息；第二个参数出现在用户输入的文本框，且被选中，作为默认值使用。如果省略第二个参数，则提示对话框的输入文本框中会出现“underfined”，可以将第二个参数的值设置为空置字符串
语法约定
1、大小写区分
JavaScript的关键字永远是小写的
内置对象，如Math和Date是以大写字符开头的
对象的名称通常是小写
2、变量、对象和函数的名称
与Java的命名规范类似，当声明使用变量、对象或函数时，名称可以包括大写字母、小写字母、数字、下划线和美元符号（$），但必须以字母、下划线或美元符号（$）开头
3、分号
JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾
Chrome开发人员工具
1、语法错误的排除
chrome的开发工具常用八个大模块，主要功能如下：
Elements：用于查看和编辑当前页面中的HTML和CSS元素
Console：用于显示脚本中所输出的调试信息，或运行测试脚本等
Sources：用于查看和调试当前页面所加载的脚本的源文件
NetWork：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等
TimeLine：用于查看脚本执行时间、页面元素渲染时间等信息
Profiles：用于查看CPU执行时间与内存占用等信息
Resource：用于查看当前页面所请求的资源文件，如HTML、CSS样式文件等
Audits：用于优化前段页面，加速网页加载速度等
2、逻辑错误的排除
（1）、确定断点得到位置
（2）、单步调试
（3）、修改错误
常用系统函数
1、parseInt（）
parseInt()函数课解析一个字符串，并返回一个整数
语法：parseInt（“字符串”）；
2、parseFloat()
parseFloat()函数可解析一个字符串，并返回一个浮点数
语法：parseFloat(“字符串”)；
parseFloat()函数与parseInt（）函数的处理方式相似，从位置0开始查看每一个字符，直到找到一个非有效的字符为止，然后把该字符的字符串转换为浮点数
3、isNaN（）
isNaN（）函数用于检查其参数是否是非数字
语法：isNaN（x）；
如果x是特殊的非数字值，则返回是true，否则返回false；
自定义函数
1、定义函数
function是定义函数的关键字，必须有
参数1、参数2等是函数的参数，本身没有类型的检查和限定，函数中的参数是可选的，分为有参函数和无参函数
“{”和“}”定义了函数的开始和结束
return语句用来规定函数返回的值
2、调用函数
要执行一个函数，必须先调用这个函数，当调用这个函数时，必须指定函数名及其后面的参数。函数的调用一般和元素的事件结合使用
语法：事件名=“函数名（）”；
变量的作用域
JavaScript根据作用范围不同分为局部变量和全局变量
局部变量是在函数内声明的变量，，只有在该函数中且位于该变量之后的代码中可以使用这个变量，如果在之后的其他函数中声明了与这个局部变量同名的变量，则后声明与这个局部变量毫无关系
全局变量是在所有函数在外的脚本中声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码
网友评论