JavaScript基础知识语法

什么是JavaScript？

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

JavaScript的组成结构。

JavaScript是由：ECMASCRIPT，BOM，DOM所组成。

ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型，简单说ECMASCRIPT是一种语言标准，而JavaScript是网景公司对ECMASCRIPT标准的一种实现。

BOM (Browser Object Model): 浏览器对象模型有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等。

DOM (Document Object Model): 文档对象模型有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给div 换个位置等。

总的来说： JavaScript就是通过固定的语法去操作 浏览器 与 标签结构 来实现网页上的各种效果。

JS（JavaScript的简称）的书写位置：

与css样式一样，js也分为：行内式，内嵌式，外链式。

行内式js代码使用方法: 需要依靠事件（行为）来触发

第一种方法：
<div onclick="alert('弹话框')">点一下</div>
//写在元素上可以用事件来触发，onclick就是一个鼠标点击事件，后面跟着的alert就是js代码，表示弹出对话框里面内容为"弹话框"。总的意思就是点击“点一下”这个div盒子会弹出一个弹话框上面写着"弹话框"

第二种方法：
<a href="javascript:alert('弹话框');">点一下</a>
//写在a标签中可以用href后直接跟:javascript:(js代码）,因为a标签可以进行点击跳转,所以在其中加入js代码也可以执行,上述代码的意思就是点击a的超链接弹出一个弹话框上面写着"弹话框"

内嵌式js代码使用方法：会在打开页面的时候直接触发

<script type=text/javascript>
    js代码
</script>
//写在HTML中，用script标签包裹，声明内部为js代码，可以书写在body里面或者head里面

外链式js代码使用方法：需要在外部新建一个js文件然后引入了 html 页面，就会在页面打开的时候直接触发

<script src="文件名.js">
    js代码
<script>
//在HTML中用src跟js文件路径导入就可以使用外部的js方法

JS变量

什么是变量：变量是指程序中保存数据的一个容器也是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据，简单来说：我们存储了一个东西放进内存中，需要给这个内存定义一个名称，这次才能方便我们找寻到它。

语法为：var 变量名 = 变量值

var a; //定义一个变量a
a = 1; //给变量a赋值为1

//上面两行代码可以缩写为，意思相同
var a = 1; //定义一个变量的同时赋值给它

 注意：一个变量名只能存储一个值，当再次给一个同名的变量赋值的时候，前面一次的值就被覆盖了，变量名称区分大小写（JS 区分大小写）。

变量命名规则：

                        一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成

                        输入内容严格区分大小写

                        不能由数字开头，不要使用中文汉字命名

                        不能是 保留字 或者 关键字

                        不要出现空格

JS数据类型

JS的数据类型通常分为两大类：基础数据类型与复杂数据类型

//共有五大基础类型

//第一种：数值类型（number）
1，2，3，4，5....一切数字都为数值类型（包括进制）以及NaN（not a number）

//第二种：字符串类型（string）
"1",'1'...都是字符串类型，一切被引号所包裹的内容都是字符串类型

//第三种：布尔类型（Boolean）
只有两个值，true或者false

//第四种：null类型（null）
只有一个值，表示为空的

//第五种：undefined类型（undefined）
只有一个值，表示没有值的意思

**注意null的值==undefined的值，但他们的数据类型是不相等的

//复杂数据类型有很多种在这里我就举例一下

//函数数据类型（funciton）
语法为：
        funciton 变量名（行参）{
            js执行代码
        }
//定义完一个函数类型的时候想要拿出来用就需要调用：变量名（实参）

既然数据类型大概了解了一下，那么怎么判断数据类型呢？ 这里可以用到：typeof，来判断。

// 第一种使用方式
var n1 = 100; //定义一个变量n1里面传递一个参数为100
console.log(typeof n1); //在控制台打印出来（点击F12会弹出控制台），会显示内容为：number

// 第二种使用方式
var s1 = 'abcdefg'; //定义一个字符串类型的变量
console.log(typeof(s1)); //打印会显示内容为：string

 当然如果想判断一个变量是否是纯数字的话，可以使用另一个方法：isNaN（is not a number）。

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //会打印false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //会打印true

那么数据类型是否之间可以转换呢？答案当然是可以的。

数据类型转换

//数据转换为number类型

第一种：Number（变量）//把变量强制转化为数值类型，会保留小数，当遇到不可以转换的返回NaN
例如：number（"100"）

第二种：parseInt(变量) //把变量强制转换为数值类型，从第一位开始检查时是数字就返回，直到找到一个非数字就停止，会取整数，如果开头不是数字就返回NaN
例如：parseInt（"123asd"）,就会返回123数值

第三种：parseFloat（变量） //把变量强制转换为数值类型，从第一位开始检查时是数字就返回，直到找到一个非数字就停止，会保留一位小数，如果开头不是数字就返回NaN
例如：parseFloat（"12.34"）,就会返回12.34数值

第四种：除加法以外的数字运算，减，乘，除。//运算符两边都是可运算数字才行，如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN
例如："3" - 1 = a，那么a的值就会为2数值，因为"3"被减号转换为数值3了所以才可以进行运算 

//数据转换为字符串类型

第一种：变量.toString(),有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
例如：console.log(123.toString()),结果会在控制台输出"123"

第二种：String（变量），所有数据类型都可以转换为字符串
例如：console.log(String（132）),结果会在控制台输出"123"

第三种：使用加法运算，进行字符串拼接
例如：'1'+2,结果就会为一个字符串"12"

//其他数据转换成Boolean
在js中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true

js里面也有加减乘除吗？看看有什么区别，顺便也了解一下其他运算符。

数学运算符

    +（加法）
        只有符号两边都是数字的时候才会进行加法运算
        只要符号任意一边是字符串类型，就会进行字符串拼接

    -（减法）
        会执行减法运算
        会自动把两边都转换成数字进行运算

    *（乘法）
        会执行乘法运算
        会自动把两边都转换成数字进行运算

    /（除法）
        会执行除法运算
        会自动把两边都转换成数字进行运算

    %（取余）
        会执行取余运算
        会自动把两边都转换成数字进行运算

赋值运算符

    =（注意：在js里面等于号不是等于的意思而是把等号后面的值赋给等号前面）
        例如：var num = 100 //就是把 100 赋值给 num 变量，那么 num 变量的值就是 100

    +=
       例如： var a = 10;a += 10; console.log(a); //结果为20

        a += 10 等价于 a = a + 10 //相当于把a原本是值重新覆盖为a+10

    -=
        例如：var a = 10;a -= 10;console.log(a); //结果为0

        a -= 10 等价于 a = a - 10

    *=
        例如：var a = 10;a *= 10;console.log(a); //结果为100

        a *= 10 等价于 a = a * 10

    /+
        例如：var a = 10;a /= 10;console.log(a); //结果1

        a /= 10 等价于 a = a / 10

    %=
        例如：var a = 10;a %= 10;console.log(a); //结果0

        a %= 10 等价于 a = a % 10

 比较运算符

    ==
        比较符号两边的值是否相等，不管数据类型
        例如：1 == '1'
        两个的值是一样的，所以得到 true
    ===
        比较符号两边的值和数据类型是否都相等
        例如：1 === '1'
        两个值虽然一样，但是因为数据类型不一样，所以得到 false
    !=
        比较符号两边的值是否不等
        例如：1 != '1'
        因为两边的值是相等的，所以比较他们不等的时候得到 false
    !==
        比较符号两边的数据类型和值是否不等
        例如：1 !== '1'
        因为两边的数据类型确实不一样，所以得到 true
    >=
        比较左边的值是否 大于或等于 右边的值
        例如：1 >= 1 //true
        例如：1 >= 0 //true
        例如：1 >= 2 //false
    <=
        比较左边的值是否 小于或等于 右边的值
        例如：1 <= 2 //true
        例如：1 <= 1 //true
        例如：1 <= 0 //false
    >
        比较左边的值是否 大于 右边的值
        例如：1 > 0 //true
    <
        比较左边的值是否 小于 右边的值
        例如：1 < 2 //true

逻辑运算符

    &&（进行“且”的运算）
        符号左边必须为true 并且右边也是true，才会返回true，只要有一边不是true，那么就会返回false
        例如：true && true //结果true
        例如：true && false //false
        例如：false && true //false
        例如：false && false //false
    ||（进行“或”的运算）
        符号的左边为true 或者右边为true，都会返回true，只有两边都是false 的时候才会返回false
        例如：true || true //true
        例如：true || false //true
        例如：false || true //true
        例如：false || false //false
    !（进行“取反”运算）
        本身是 true 的，会变成 false，本身是 false 的，会变成 true
        例如：!true //false
        例如：!false //true

一元运算符（自增自减运算符）

++（进行自增运算）
    分成两种，前置++ 和 后置++
    第一种：前置++，会先把值自动 +1，再返回
    例如：var a = 10;console.log(++a); // 会返回 11，并且把 a 的值变成 11

    第二种：后置++，会先把值返回，再自动+1
    例如：var a = 10;console.log(a++); // 会返回 10，然后把 a 的值变成 11

--(进行自减运算)
    分成两种，前置-- 和 后置--,和 ++ 运算符道理一样
    第一种：前置--，会先把值自动 -1，再返回
    第二种：后置--，会先把值返回，再自动-1

运算符优先级从高到低

    1 () 优先级最高
    2 一元(单目)运算符:++,--,!
    3 算术运算符: 先*,/,%  再+,-
    4 关系运算符:>,>=,<,<=  
    5 相等运算符:==,===,!=,!==
    6 逻辑运算符:先&&，再||
    7 赋值运算符
      口诀:单目算术位关系，逻辑三目后赋值