JavaScript基础
web前端有三层：
HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（提升用户体验）
一、JavaScript概述
1、什么是JavaScript：
JavaScript是一种描述性的语言，也是基于对象(Object)和事件(Event Driven)的、并具有安全性能的的脚本语言。它与HTML（超文本标记语言）一起，在一个Web页面中链接多个对象，与Web客户实现交互。
特点：
JavaScript主要用来向HTML页面中添加交互行为。
JavaScript是一种脚本语言，语法和Java类似。
JavaScript一般用来编写客户端的脚本。
JavaScript是一种解释性的语言，边执行边解释。
2、JavaScript历史背景介绍：
一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就轻而易举了。
ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快去追上这个标准。
http://2008.sina.com.cn/
http://2012.sina.com.cn/
上面三个网站可以感受一下网页技术的发展。
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年，JavaScript命运开始改变，那一年，谷歌公司开始带头使用Ajax技术，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如，当我们在百度搜索框搜文字时，输入框下方的智能提示，可以通过Ajax实现。比如，当我们注册网易邮箱时，能够及时发现用户名是否被占用，而不用调到另外一个页面。
2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript越来越被重视。
2010年，人们更加了解HTML5技术，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
如今，WebApp已经非常流行，就是用网页技术开发手机应用。手机系统有iOS、安卓。比如公司要开发一个“携程网”App，就需要招聘三队人马，比如iOS工程师10人，安卓工程师10人，前端工程师10人。共30人，开发成本大；而且如果要改版，要改3个版本。现在，假设公司都用web技术，用html+css+javascript技术就可以开发App。也易于迭代（网页一改变，所有的终端都变了）。
虽然目前WebApp在功能和性能上的体验远不如Native App，但是“WebApp慢慢取代Native App”很有可能是未来的趋势。
3、JavaScript的组成部分：（JavaScript基础分为三个部分：）
（1）ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、关键字、保留字、对象、函数、if语句、for循环语句等。ECMAScript是一个描述，规定了脚本语言的所有属性、方法和对象的标准，因此使用web客户端脚本语言编码时一定要遵循ECMAScript标准。
（2）DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型就可以实现与HTML交互。
（3）BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。是HTML文档对象模型定义的一套标准方法，用来访问和操纵HTML文档。
4、JavaScript的基本结构
结构如下：
<script type='text/Javascript'> <!-- Javascript语句 --> </script>
type是<script>标签的属性，用于指定文本使用的语言类别为JavaScript。
<!--语句-->是注释标签
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> document.write("张无忌") document.write("<h1>周芷若</h1>") </script> </head> <body> </body> </html>
5、执行原理
（1）:浏览器客户端向服务器端发送请求：一个用户在浏览器的地址栏中输入要访问的页面（页面中要包含JavaScript程序）。
（2）:数据处理：服务器端将某个包含JavaScript的页面进行处理。
（3）:发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上而下逐条解析HTML标签和JavaScript，将页面呈现给用户。
好处：
包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信。
JavaScript程序由浏览器客户端执行，而不是由服务器执行的，因此减少服务器的压力。
6、JavaScript的引入方式
（1）:直接使用<script>标签将JavaScript代码加到了HTML文档中。适合js代码较少的情况下。（第4个中的示例）
（2）:使用外部JavaScript文件，将JavaScript代码写入一个外部文件中，以*.js扩展名保存，然后将该文件指定给<script>标签中的src属性。
test.js文件代码 document.write("张无忌") document.write("<h1>周芷若</h1>") test.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="test.js" type="text/javascript">
</script>
</head>
<body>
</body>
</html>
(3) 直接在HTML标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('赵敏')"> </body> </html>
二、JavaScript核心语法
1、变量的声明和赋值
（1）语法：
var 合法的变量名;
var width = 20;
var x,y = 10;
（2）命名规范：
1）区分大小写；大小写字母是不能互相替换的。
JavaScript的关键字，如if和for，永远都是小写的。
内置对象，如Math和Data是以大写字母开头的。
对象的名称通常是小写，如fruit。但其方法经常是多个单词的大小写混合，通常是一个字母小写，之后的单词的首字母是大写，如charAt()。
2）变量、对象和函数的名称
当声明使用的变量、对象或函数是，名称可以包括大写字母、小写字母、数字、下划线和$，但是必须以字母、下划线或$开头。
3）分号
JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾。
4）不能使用关键字；不可以不经过声明而直接使用。
（3）关键字：
break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
2、数据类型：
（1）undefined类型：当声明的变量未初始化时，该变量的默认值时undefined。
例如：var width; 这样声明变量withd，此变量没有初始值，将被赋予值undefined。
（2）null类型：只有一个值的类型是null，是一个表示什么都没有的占位符，用来检测某个变量是否被赋值。
例：alert(null==undefined); //返回值为true
null和undefined这两个值相等，但含义不同，undefined表示的是声明了变量但未对该变量赋值，null表示的是对改变了赋了一个空值。
（3）number类型：可以表示32位整数，又可以表示64位的浮点数。
var iNum = 23;
var iNum = 23.0;
整数也可以表示为八进制或十六进制，八进制首数字必须是0，其后的数字可以是任何八进制数字（0-7）；十六进制首数字也必须是0，后面是任意的十六进制数字和字母（0-9和A-F）。
var iNum = 070；//070等于十进制的56
var iNum = 0x1f; //0x1f等于十进制的31
对于非常大或非常小的数，可以用科学记数法表示浮点数，也是number类型。另外一个特殊值NaN（Not Number）表示非数，它也是number类型。
typeof(NaN); // 返回值是number
（4）String类型：
1）字符串定义：
var str = "This is a string"; //定义了一个字符串str
var oc = "a";
2）字符的属性和方法
有一个length属性。表示字符串的长度（包括空格等），语法：
字符串对象.length;
var str = "This is a javascript";
var sl = str.length;
方法的语法：
字符串对象.方法名();
常用方法：
| 方法 | 描述 |
| toString | 返回字符串 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
| charAt(index) | 返回在指定位置的字符 |
| indexOf(str,index) | 查找某个指定字符串在字符串中首次出现的位置 |
| substring(index1,index2) | 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 |
| split(str) |
将字符串分割为字符串数组 |
| length | 返回长度 |
| trim() | 移除空白 |
| trimLeft() | 移除左边的空白 |
| trimRight() | 移除右边的空白 |
| concat(value，...) | 拼接 |
| slice(start,end) | 切片 |
拼接字符串一般使用“ + ”
slice和substring的区别：
string.slice(start，stop)和string.substring(start,stop): 两者的相同点： 如果start等于end，返回空字符串 如果stop参数省略，则取到字符串末 如果某个参数超过string的长度，这个参数会被替换为string的长度。 substring()的特点： 如果start>stop，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换 slice()的特点: 如果start>stop不会交换两者 如果start<0,则切割从字符串末尾往前数的第abs(start)个字符开始（包括该位置的字符） 如果stop<0，则切割在从字符串末尾往前数的第abs(stop)个字符结束（不包含该位置字符）
（5）boolean类型：称为布尔型数据或逻辑型数据，它有两个值：true和false。
检测变量的具体数据类型：typeof
语法：
typeof(变量或值)
返回结果：
undefined：如果变量是undefined类型的，返回undefined类型的结果。
number：如果变量是number类型的，返回number类型的结果。
String：如果变量是String类型的，返回String类型的结果。
boolean：如果变量是boolean类型的，返回boolean类型的结果。
object：如果变量是null类型，或者变量是一种引用类型，如对象，函数，数组，则返回object类型的结果。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> document.write("<h2>对变量或值调用typeof运算符返回值：</h2>"); var width,height = 10,name = 'rose'; var date = new Date(); //获取日期时间对象 var arr = new Array(); //定义数组 document.write("width:"+typeof(width)+"<br/>"); document.write("height:"+typeof(height)+"<br/>"); document.write("name:"+typeof(name)+"<br/>"); document.write("date:"+typeof(date)+"<br/>"); document.write("arr:"+typeof(arr)+"<br/>"); document.write("true:"+typeof(true)+"<br/>"); document.write("null:"+typeof(null)+"<br/>"); </script> </head> <body> </body> </html> 结果： 对变量或值调用typeof运算符返回值： width:undefined height:number name:string date:object arr:object true:boolean null:object
3、数组
(1)创建数组：
语法：var 数组名称 = new Array(size);
new是用来创建数组的关键字，Array表示数组的关键字，而size表示数组中可存放的元素总数，因此size用整数来表示。
var fruit = new Array(5); //表示创建了一个名为fruit，有5个元素的数组。
（2）为数组元素赋值
在声明数组时，可以直接为数组元素赋值。
语法：var fruit = new Array("apple","orange","peach","bananer");
可以分别为元素赋值：
var fruit = new Array(4);
fruit [0] = "apple";
fruit [1] = "orange";
fruit [2] = "peach";
fruit [3] = "bananer";
除了Array对象外，数组还可以方括号“ [ ]”来定义：
var fruit = ["apple","orange","peach","bananer"];
(3)访问数组元素
可以通过数组的名称和下标直接访问数组元素，访问数组的表示形式：数组名[下标]。例如fruit[0]表示访问数组中的第一个元素，fruit是数组名，0表示下标。
（4）数组的常用属性和方法
数组是JavaScript中的一个对象，它有一组属性和方法。
| 类别 | 名称 | 描述 |
| 属性 | length | 设置或返回数组中元素的数目 |
| join() | 把数组的所有元素放入一个字符串，通过一个分隔符进行分割 | |
| 方法 | sort() | 对数组排序 |
| push() | 向数组末尾添加一个或更多元素，并返回新的长度 |
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var fruit = "apple,orange,peach,bananer"; var arrlist = fruit.split(","); var str = arrlist.join("-"); document.write("分割前:"+fruit+"<br/>"); document.write("使用\"-\"重新链接后:"+str+"<br/>"); </script> </head> <body> </body> </html> 结果： 分割前:apple,orange,peach,bananer 使用"-"重新链接后:apple-orange-peach-bananer
4、运算符
常用运算符：
| 类别 | 运算符号 |
| 算术运算符 | +、-、*、/、%、++、-- |
| 比较运算符 | >、<、>=、<=、==、!= |
| 逻辑运算符 | &&、||、！ |
| 赋值运算符 | = |
5、逻辑控制语句
（1）条件结构
if结构 语法：
if(表达式){
//JavaScript语句1；
}
else {
//JavaScript语句2;
}
如果if或else后只有一条语句，则可以省略大括号；如果if或else有多行执行语句，则JavaScript语句必须括在大括号里面。
（2）switch结构
语法：
switch(表达式){
case值1：
//JavaScript语句1；
break；
case值1：
//JavaScript语句1；
break；
......
default:
//JavaScript语句n;
break;
}
示例：
var weekday = "星期一";
switch (weekday){
case "星期一":
alert("新的一周开始了")
break;
case "星期五":
alert("明天就可以休息了")
break;
default:
alert("努力工作！")
break;
}
（3）循环结构
1）for循环 语法：
for(初始化;条件;增量或增减){
//JavaScript语句；
}
其中，初始化参数告诉循环的开始值，必须赋予变量初始值；条件用于判断循环是否终止，若满足条件，则继续执行循环体中的语句，否则跳出循环；
增量或增减量定义循环控制变量在每次循环式怎么变化，三个条件之间，必须使用（；）隔开。
2）while循环 语法：
while(条件){
//JavaScript语句;
}
其特点式先判断后执行，当条件为真时，就执行JavaScript语句；当条件为假时，就退出循环。
3）do-while循环 语法：
do{
//JavaScript语句；
}while(条件)；
该语句表示反复执行JavaScript语句，知道条件为假时才退出循环，与while循环语句的区别在于，do-while循环语句先执行后判断。
4）for-in循环 语法：
for (变量 in 数组){
//JavaScript语句；
}
for-in 循环常用于数组的操作，其中变量为数组的索引下标。
示例：
var f = ["张无忌","周芷若","赵敏","小昭"]; for (var i in f) document.write(f[i] + "<br/>")
5）中断循环：break、continue
break：可以立即退出整个循环。
continue：只是退出当前的循环，根据判断条件决定是否可以进行下一次循环。
6、注释：
（1）单行注释：单行注释以//开始，以行末结束。
示例：
alert("我是张无忌，喜欢周芷若！")； //在页面上弹出我是张无忌，喜欢周芷若！的提示对话框
（2）多行注释：多行注释以/*开始*/结束，
/* 在页面上输出5次”周芷若我喜欢你！“ */ for (var i = 0; i<=5; i++){ document.write("周芷若我喜欢你！") }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var userName = "rose"; var string1 = "我的名字叫rose"; alert("Hello 张无忌"); alert("我的名字叫"+userName); alert(string1)； </script> </body> </html>
告警对话框是当前运行的网页弹出来的，在对话框做出处理前，当前网页将不可用，后面代码也不会执行，只有告警对话框进行处理后（单击“确定”按钮或直接关闭），当前网页才会继续显示后面的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var people = prompt("请输入你喜欢的人：","张无忌")；
</script>
</body>
</html>
结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="text-align: center">
<script type="text/javascript">
var t = prompt("请输入一个整数：");
if(t>5){
for(var i=t;i>0; i--){
for(var j=0;j<i;j++){
document.write("* ");
}
document.write("</br>");
}
}
else{
for (var k = t; k<0; k--) {
for (var m = 0; m<k; m++) {
document.write("* ");
}
document.write("</br>")
}
for(var n=1;n<=t;n++){
for(var h=0;h=0;h++){
document.write("* ")
}
document.write("</br>")
}
}
</script>
</body>
三、JavaScript常用语法—函数
