js来源 Javascript作为web标准中的行为标准，最初起名叫LiveScript，它是Netscape开发出来一种脚本语言，其目的是为了扩展基本的Html的功能，验证web页表单信息，为web页增加动态效果。为了赶上java的热潮，Netscape和Sun公司一起开发了一种新的脚本语言，他的语法和Java非常的类似，所以更名为:Javascript。
js历史 因为 JavaScript 1.0 非常成功，成为web的必备组件，Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候，微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉，但也成为 JavaScript 语言发展过程中的重要一步。 在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 中不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。
ECMAScript ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。 正是因为JavaScript 并没有一个标准来统一其语法或特性，所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。 简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。 ECMAScript是标准，javascript是实现
JS组成 JS = ECMAScript + DOM + BOM
ECMAScript（前身为欧洲计算机制造商协会） JavaScript的语法规范 DOM（Document Object Model 的简称） JavaScript操作网页上元素的API BOM（Browser Object Model 的简称） JavaScript操作浏览器部分功能的API
引入方式 内嵌式：直接在html文档中编写js代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> alert("hello") </script>外链式：链入一个外js文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript" src="js/index.js" ></script>输出消息的几种方式
alert() 在页面弹出一个对话框，早期JS调试使用。 confirm() 在页面弹出一个对话框, 常配合if判断使用。 console.log() 将信息输入到控制台，用于js调试。 prompt() 弹出对话框，用于接收用户输入的信息。 document.write()在页面输出消息，不仅能输出信息，还能输出标签。示例：
alert("hello"); confirm("关闭浏览器？"); console.log("hello");按F12选择console或控制台可以看见
prompt("姓名"); document.write("hello") document.write("<h1>hello</h1>")会变化的量。 变量是用来存储数据的容器。
命名规则 驼峰命名规则：userName 遵从规则： 1.变量命名必须以字母或是下标符号”_”或者”$”为开头。 2.变量名长度不能超过255个字符。 3.变量名中不允许使用空格，首个字不能为数字。 4.不用使用脚本语言中保留的关键字及保留符号作为变量名。 5.变量名区分大小写。(javascript是区分大小写的语言)
定义变量
var name;//定义变量给变量赋值
var name;//定义变量 name="yzq"//给变量赋值定义并赋值 在实际的开发中我们一般在定义变量的时候直接赋值
var name="yzq" =号是赋值运算符简单数据类型
数值类型 number字符串类型 String布尔类型 boolean未定义 undefined进制 常用的进制
二进制 基数为2，逢2进1八进制 基数为8，逢8进1十进制 满10进1十六进制 由0-9，A-F组成，字母不区分大小写。浮点数 因为精度丢失问题，所以不要判断计算后的两个浮点数是否相等。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var num=0.07; console.log(num*100);//输出的值为7.000000000000001 </script> </head> <body> </body> </html>数值范围 由于内存的限制，ECMAScript 并不能保存世界上所有的数值 最小值：Number.MIN_VALUE，这个值为： 5e-324 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 无穷大：Infinity 无穷小：-Infinity
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE) console.log(1/0); console.log(-1/0); </script> </head> <body> </body> </html>NaN Not a Number的简写
console.log(“abc”/18); //结果是NaNUndefined和任何数值计算都为NaN; NaN 与任何值都不相等，包括 NaN 本身 isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
isNaN(NaN);// true isNaN(“blue”); // true isNaN(123); // false示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var a="aaaa"/11; console.log(a); console.log(isNaN(a));//true console.log(isNaN(NaN));//true console.log(isNaN(123));//false </script> </head> <body> </body> </html>定义方式 用引号时，可单可双，不可一单一双。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var a="hello"; var b='hello'; console.log(a); console.log(b); </script> </head> <body> </body> </html>转义符 无法输出的字符，先输出/，再输出字符。 例：想在双引号中输出双引号，需要转义符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var a="h'el'lo"; var b='h、/"el\lo'; var c="aaaa\"dsd\'sa";//这里双引号需要转义符 console.log(a); console.log(b); console.log(c); </script> </head> <body> </body> </html>字符串拼接 通过+拼接字符串
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var a="hello"; var b="world"; console.log(a+" "+b); </script> </head> <body> </body> </html>字符串不可变 字符串比较特殊，一旦给值后就无法再修改他的值。如果再赋值，相当于重新创建的一个String对象，而原有的字符串会被回收。
boolean类型有两个字面量：true和false，区分大小写。（大写不对） 虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
注意： true，任何非0数字，任何字符串，任何对象都可以表示true。 例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var a=2; if (a){ alert(a); }else { alert("false") } </script> </head> <body> </body> </html>false、0 、“”、undefined 、null为false 例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> if (""){ alert(true); }else { alert("false") } </script> </head> <body> </body> </html>if判断时会把（）内的值强行转换成boolean类型进行判断。
undefined和null null和undefined有很大的相似性。 null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。 不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。 任何数据类型和undefined运算都是NaN; 任何值和null运算，null可看做0运算。
转换成字符串类型
变量+“” 或者 变量+“abc”String(变量)变量.toSting() 注意：undefined和null不可以，Null和undefined无toString方法。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> a=111; console.log(typeof(a+"")); console.log(typeof(a+"sdas")); console.log(typeof(a+"sdas")); console.log(typeof String(a)); console.log(typeof (a.toString())) </script> </head> <body> </body> </html>转换为number类型
1）变量-*/一个数字（有非数字字符会出现NaN）
<script> var a="1"; console.log(a-0); //1 console.log(typeof (a-0));//number console.log(a/1);//1 console.log(typeof (a-1));//number console.log(a*1);//1 console.log(typeof (a*1));//number console.log("1aa"-1);//NaN </script>2） Number(变量)（有非数字字符会出现NaN）
<script> var a = "1.4"; console.log(Number(a)); //1.4 console.log(typeof Number(a));//number console.log(Number(true))//1 console.log(Number(false));//0 console.log(Number("1aa"));//NaN </script>需要注意的是： Number(“”)返回0 console.log(Number(true))返回1 console.log(Number(false));返回0
3） parseInt()和parseFloat()（译为取整和取浮点数）
var a = "1.4"; console.log(parseInt(a)); //1 console.log(typeof parseInt(a));//number console.log(parseInt(true))//NaN console.log(parseInt(false));//NaN console.log(parseInt("1aa"));//1 console.log(parseFloat("1.221aaa"));//1.221注意： parseInt(“”)和parseFloat(“”)返回NaN parseInt(变量)：如果变量中收割字符为字母则结果为NaN，否则取出现首个非数字前的整数。 parseFloat(变量)：如果变量中收割字符为字母则结果为NaN。否则取出现首个非数字前的浮点数。（没有小数取整）
转换为boolean类型 任何数据类型都可以转换成boolean类型 1）Boolean(变量);
<script> console.log(Boolean("111"));//true console.log(Boolean(0));//false console.log(Boolean(1));//true </script>2）！！变量（两个感叹号 变量）
console.log(!1);//false console.log(!!1);//true console.log(!0);//true console.log(!!0);//false第一个逻辑非操作 会基于无论什么操作数返回一个与之相反的布尔值 第二个逻辑非操作 则对该布尔值求反 于是就得到了这个值真正对应的布尔值
操作符种类 一、算数运算符（+—*/…） a) 一元运算符：正号、负号、++、–、平方等一个变量就能运算 b) 二元运算符：+-*/%等两个变量才能运算 c) 三元运算符： 值1？值2：值3；
二、逻辑运算符（ ||&& ! ）（或且非） 三、比较运算符（<、>、==、>=…） 四、赋值运算符（=、+=、-=、*=、/=、%=）
优先级
优先级从高到底 () 优先级最高 一元运算符 ++ – ! 算数运算符 先* / % 后 + - 关系运算符 > >= < <= 相等运算符 == != === !== 逻辑运算符 先&& 后||
&&和||运算
1）&&链接两个boolean类型，有一个是false结果就是false。两个都为true时才为true。 2）||链接两个boolean类型，有一个是true结果就是true。两个都为false时才为false。
console.log(false && true);//false console.log(true && true);//true console.log(false || true);//true console.log(false || false);//false选择结构
if语句 If语句用法有三种 1．if(条件1){程序1} 2．if(条件1){程序1}else{程序2} 3．if(条件1){程序1}else if(条件2){程序2}…else{程序n}
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码 if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码 if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行
示例：
<script> var a=1; if (a==1){ alert(1); }else if(a==2) { alert(2); }else if (a==3){ alert(3); } </script>switch 语法
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 }工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。 注意： break可以省略，如果省略，代码会继续执行下一个case switch 语句在比较值时使用的是全等（===）操作符，因此不会发生类型转换 （例如，字符串 “10” 不等于数值 10）。
var a = 1; switch (a) { case "1": console.log("字符串1") break; case 1: console.log(1); break; default: console.log("default"); break; }循环结构
for 循环 语法： for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环（代码块）开始前执行 语句 2 定义运行循环（代码块）的条件 语句 3 在循环（代码块）已被执行之后执行
示例：
<script> for(var i=0;i<10;i++){ console.log(i); } </script>for(;;){程序} 死循环;
while 语法 while (条件) { 需要执行的代码 } While 循环会在指定条件为真时循环执行代码块。 示例
<script> var i=0; while (i<5){ i++; console.log(i); } </script>死循环： while(true){ }
do..while 语法： do { 需要执行的代码 } while (条件);
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
示例：
<script> var i = 0; do { console.log(i) } while (i > 0); </script>break和continue break : 立刻跳出循环，不再执行该循环中的任何程序； 示例
<script> var i=0; while (true){ if (i==3){ break; } i++; console.log(i); } </script>continue : 跳出本次循环，进入下一次循环中继续执行程序； 示例：
<script> for (var i = 0; i < 10; i++) { if (i == 5)continue console.log(i); } </script>数组是一种数据类型，可以存储多个数据。
数组的定义 1.字面量定义
var arr={1,2,3};2.对象定义
var arr = new Array(参数); 参数位置一个数值时为数组长度，多个数值时为数组中的元素。数组的操作 获取数组的长度 数组的长度 = 数组名.length； 可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素）
<script> var arr = new Array(1, 2, 3, 4, 5, 6); console.log(arr.length); console.log(arr); arr.length = 3; console.log(arr.length); console.log(arr); </script>获取数组元素 数组中的指定元素 = 数组名[索引值]; 数组的索引代表的是数组中的元素在数组中的位置，从0开始。 如果获取数组中元素是，数组名[索引值]，没有指定索引（元素没那么多），系统不报错，而是给定值为undefined；
示例：
<script> var arr = [1, 2, 3, 4, 5]; console.log(arr[0]);//1 console.log(arr[3]);//4 console.log(arr[5]);//undefined </script>遍历数组 遍历数组就是获取数组中每一个元素 一般通过for循环来遍历数组
示例：
<script> var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } </script>函数是什么 函数就是可重复使用的代码块。
函数的定义 函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname() { 执行代码 }当调用该函数时，会执行函数内的代码。 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。 JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数
示例：
<script> /*定义函数*/ function fn() { alert("我是个函数") } /*调用函数*/ fn(); </script>参数
1）形参 形式上参与运算的变量，无实际值，为实参占位置，就像一`个躯壳一样。（可以理解为函数的内部变量外部无法访问） 2）实参 实际参与运算的变量。形参为他占位置，真实参与运算的变量。
/*定义函数*/ function sum(a,b) { console.log(a+b); } /*调用函数*/ sum(1,2);//传入实际参数返回值 有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
<script> /*定义函数*/ function add(a, b) { return a + b;//将计算后的值返回 } /*调用函数*/ var sum = add(1, 2);//传入实际参数 console.log(sum);//3 </script>注意 1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined 2. 如果函数使用 return语句，那么跟在return后面的值，就成了函数的返回值 3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值 也是：undefined 4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。
变量和作用域（函数中的变量需要函数执行后才能使用）
全局变量（成员变量） 哪里都可以访问到的变量。（进入script立即定义的变量和没有var的变量）
局部变量 函数内部的变量，只有函数内部可以访问到。（函数内部用var定义的变量和形参）
<script> var a = "111";//全局变量 b = "222"//全局变量 function fn() { var c = "333";//局部变量 d = "444";//全局变量 } fn();//函数内的变量必须先初始化（调用函数），然后才能访问 console.log(a);//111 console.log(b);//222 console.log(c);//访问不到，c是局部变量 console.log(d);//444 </script>隐式全局变量
隐式全局变量就是隐藏的全局变量不好被发现。 示例
function fn（）{ var a = b = c = 1; // b和c就是隐式全局变量（等号） var a = 1; b = 2; c = 3; // b和c就是隐式全局变量（分号） var a = 1 , b = 2 , c = 3; // b和c就不是隐式全局变量（逗号） }预解析 js的解析器在页面加载的时候会检查语法是否有错误，并提升变量声明。
<script> console.log(aaa);//这里会输出undefined var aaa=1; </script>在页面加载时，解析器会提升变量声明，但不会提升值 上面的代码在解析过后相当于：
<script> var aaa; console.log(aaa);//这里会输出undefined aaa=1; </script>什么是对象 JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…… 此外，JavaScript 允许自定义对象。 对象具有一定的特性和行为。 javascript是基于对象的语言。只能创建出一类对象（都是Object类型）；
对象的属性和方法 属性是与对象相关的值。 方法是能够在对象上执行的动作。
访问对象的属性 语法 objectName.propertyName
访问对象的方法 语法 objectName.methodName()
创建对象的方法 1.通过new Object创建
<script> /*创建对象*/ var person = new Object(); /*定义属性*/ person.name = "yzq"; person.age = 23; /*定义方法*/ person.work = function () { console.log("工作"); } /*调用对象的属性和方法*/ console.log(person.name); person.work(); </script>2.对象字面量
<script> /*字面量对象*/ var p = { name: "yzq", age: 23, work: function () { console.log("工作"); } } console.log(p.age); p.work(); </script>3.通过函数构造对象
<script> function person(name, age) { this.name = name; this.age = age; this.work = work; function work() { console.log("工作"); } } var p = new person("yzq", 23); console.log(p.name); p.work(); </script>this关键字 this只出现在函数中。 谁调用函数，this就指的是谁。
示例：
function test() { console.log(this); } test(); //window.test(); //上面的this是window，实际是window调用test() /*字面量对象*/ var p = { name: "yzq", age: 23, changeName: function (newName) { this.name = newName; } } p.changeName("喻志强");//changeName中的this就是p console.log(p.name);//输出 喻志强 // 构造函数中的this始终是new的当前对象javascript给我们提供了很多内置对象，我们可以直接调用这些对象的属性和方法。 参考网站
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！
