JavaScript快速入门 有这一篇就够！

JavaScript概述

---

▐ JavaScript的历史

JavaScript 原名其实叫 LiveScript，是由美国网景公司（Netscape）开发的一种用于对网页操作的脚本语言；LiveScript也是面向对象的的语言，后来Sun ( java )公司觉得可以利用LiveScript为java的普及做铺垫，于是和网景公司合作，将名字改为JavaScript；

脚本语言是指有某种解释器直接可以运行的，不需要编译，如sql，html，css，javaScript...

▐ Java和JavaScript

JavaScript和Java是两种不同的语言，虽然都带有java，但二者没有任何联系.

 •  javaScript是嵌入在网页中，对网页进行各种操作的，是一种脚本语言,无需编译.

 •  java是一种后端高级语言，是需要编译的.

▐ JavaScript与CSS、HTML的关系

 •  html是网页的基本内容  ( 标签，文本 )

 •  css是网页外观  ( 样式 )

 •  JavaScript是网页的行为，为网页添加各种的动态操作效果.

而HTML、CSS、JavaScript 也被称为前端三剑客.

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂     

基本语法

---

▐ 脚本写在哪里 ？

javaScript脚本写在一组<script>标签 中，此标签可以放在head中或body中，但一般习惯放在head中，此外，还可以将脚本写在外部的 js文件中，在 html页面中导入外部的 js文件.

▐ 变量

 •  声明变量用 var关键字

var name;

 •  声明变量的同时对其赋值

var name = "LiMing" ;

这里使用var声明变量时无需指定类型，这里var的类型由值决定。

▐ 数据类型

 •  数值型（number）：包括整型数和浮点型数.

 •  布尔型（boolean）：true / false  ( 判断时也可用0表示假，非0表示真，和C语言一样 )

 •  字符串型：使用单引号或双引号说明.

 •  undefined类型：值不明确的，声明了一个变量却没有为变量初始化赋值.

 •  Object类型：对象类型.

    js也是面向对象的语言，前期我们主要使用内置的对象，我们不自己定义对象

▐ 运算符

    特别注意在JavaScript中算术运算符 " + " 和 比较运算符  " === "

 •  " = " 赋值运算    " == " 比较值是否相等     " === " 全等，值和类型都要相等.

 •  " + " 既可以算术相加，也可以连接         

var a = 10;
var b = 5;
var c ="5";
			
//字符串数字可以参与算术运算
alert(a+b);//加法运算 15
alert(a+c);//连接 105
alert(a+c*1);//15 (如果想让字符串也进行算术运算,可以*1)
			

//  ==比较值是否相等  ===全等,值和类型都要相等
alert(b==c); //true
alert(b===c);//false (类型不同)

 这里隐式的将 "5"转为数值类型 5

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂   

函数

---

▐ 函数的声明和调用

		<script>
			//声明函数
			function test(){
				alert("你好");
			}
			//调用函数
			test();
		</script>

我们的函数也可以有参数列表和返回值

 function test(a,b){
	return a+b;
 }
alert(test(1,"8"));//18 这里+指连接

▐ 全局函数

 •  alert   弹出框

 •  confirm   确认对话框

 •  prompt   输入对话框

 •  typeof   返回参数数据类型

 •  eval   将某个字符串当做js脚本运行

 •  parseInt   将参数转为整数

 •  parseFloat   将参数转为浮点数

对于parseInt，parseFloat 如果参数是字符串数字，则转换为整数或浮点数，如果其中有非数字，则返回 NaN（Not a number）

		<script>
			alert("a");//弹出框显示：a
			
			//确认对话框 true/false
			var res = confirm("您确定要退出吗？")
			alert(res);//选择确定弹出true 取消则false
			
			//输入对话框
			var name=prompt("请输入姓名:");
			alert(name);//弹出输入内容，或null
			
			//typeof 返回参数数据类型
			var a = "1";
			alert(typeof(a));//弹出String
			
			//将参数转为整数，如参数是浮点数保留整数部分
			var b = "5";
			alert(5+parseInt(b));//10

			//将参数转为浮点数
			var a = "5.5";
			alert(5+parseFloat(a));//10.5
			
			//eval:可以将某个字符串当做js脚本运行
			var a =5;
			var s="alert(a)";
			eval(s);   //弹出框显示：5
		</script>

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂ 

         

内置对象

---

▐ Array数组

 •  如何定义数组 ?  

var a =new Array();       //方式1
var b =new Array(1,2,3,4);//方式2
var c =[1,2,3,4,5];       //方式3

 •  JavaScript语言定义数组时无需指定长度。

 •  我们为数组添加值时不一定要按顺序添加。

var a =new Array();
  a[0]=0;
  a[1]=1;
  a[2]=2;
  a[5]=5;
console.log(a);

    注意：此时数组的长度是取决于最大索引，即数组长度为6

 •  数组中的常用属性：

length            获取数组的长度

join                将数组转为字符串

reserve         逆序操作

var d =[1,2,3,4,5,6,7];
console.log(d.length); // 7
console.log(d.join("")); // 1234567
console.log(d.reverse()); // [7, 6, 5, 4, 3, 2, 1]

sort             使数组中的元素按照一定的顺序排列（对数字进行排序时需要调用排序函数）

var e =[2,5,1,6,3,4];
console.log(e.sort(numbersort));//在sort内部调用自定义的比较函数，每次传入两个值
//自定义对数字排序的比较函数
function numbersort(a,b){
    return a-b;
}

▐ String字符串

• 字符串中的方法相对简单，我们直接上代码：

			var s="abcdefg";
			console.log(s.length);
			console.log(s.charAt(2));
			console.log(s.indexOf("d"));//首次出现位置
			console.log(s.substring(0,4));//截取，不包含结束位置
			console.log(s.substr(1,4));//指定位置，截取几个字符

• 控制台输出结果

• 方法详解

▐ Date获取日期

var date =new Date();
console.log(date);

常用方法：

▐ Math数学计算

常用方法：

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂   

事件

---

▐ 常用事件   

 •  onclick       鼠标单击事件

 •  ondblclick   鼠标双击事件

 •  onfocus      聚焦事件 --- 当输入框获得鼠标焦点是触发事件

 •  onblur         失焦事件 --- 当输入框失去鼠标焦点是触发事件

 •  onmousemove    鼠标移入事件

 •  onmouseout        鼠标移出事件

 •  onload                 当网页内容加载完毕后触发事件

 •  onchange            当输入框/下拉框失去鼠标焦点且内容发生改变时触发事件