JavaScript之快速入门

一、快速入门

1.聊聊JavaScript这个东西

1）概述
JavaScript是目前世界上最流行的脚本语言。
JavaScript与Java并不关联，JavaScript只是为了蹭Java的热度。
网景公司用了10天开发出JavaScript。
一个合格的后端程序员，必须要精通JavaScript。
2）历史

ECMAScript它可以理解为是JavaScript的一个标准。
最新版本已经到了ES6版本，但大部分浏览器还只停留在支持ES5代码上。
注：目前开发环境与线上环境不一致。

2.基本使用及HelloWorld

引入JavaScript及弹出HelloWorld
1）内部标签

<script type="text/javascript">
  //script标签，写JavaScript代码
  alert('hello world');
</script>

注：不用显示定义type，也默认就是javascript。
2）外部引入

<script src="js/index.js"></script>

注：Ⅰscript标签必须成对出现。
Ⅱ在head里或body底部都可以存放。

3.浏览器控制台使用

定义变量：变量类型 变量名 = 变量值;
例：

var score = 66;

条件控制
例：打印分数属于的分数段。

if(score>60&&score<70) {
  alert("60~70");
} else if(score>70&&score<80) {
  alert("70~80");
} else{
  alert("other");
}

JavaScript的多行注释与Java一样：

/*
*
**/

浏览器必备调试须知：
右键——>审查元素 快捷键：F12
1）Element：可分析HTML和CSS。
2）Console（控制台）：这里可以写JavaScript代码，并且输出。
常见命令——在浏览器的控制台打印变量：console.log();与Java的System.out.println();相似。
3）Sources：当前的源码目录。
右侧的调试工具中有监视工具，有打断点的功能，打了断点刷新网页就可以跳转至断点处。半圆形箭头加点（Step over next）是执行到结束，下箭头加点（Step into next）往下走一步，上箭头加点（Step out of current）是往上走一步。用于调试一步一步找错误。
4）Network：网络请求。
5）Application：相当于web里的数据库，将一些简单的数据保存在网页里。
①Local Storage：本地存储，在H5里用的比较多，但现在不怎么用，在VUE里要使用它，如状态管理。
②Session Storage：存Session的。
③Cookies：后面可能用的最多的。

4.数据类型快速浏览

数值、文本、图形、音频、视频…
1）变量：变量类型 变量名 = 变量值;
变量名的命名规则与Java相似：
Ⅰ所有标识符应以字母，美元符 ，下划线 开始。
Ⅱ首字母之后字母，美元符 ，下划线 ，数字的任何组合。
Ⅲ不能使用任何关键字作为变量名。
Ⅳ可以使用中文命名，但一般不建议这样去使用。
2）number
JS不区分小数和整数。
①整数 例：123
②浮点数 例：123.1
③科学计数法 例：1.23e3
④负数 例：-99
⑤NaN not a number
⑥表示无限大 Infinity
3）字符串：用单引号或双引号括起。
例：‘abc’ "abc"
4）布尔值：true false
5）逻辑运算
①&&：两个都为真，结果为真。
②||：一个为真，结果就为真。
③!：真即假，假即真。
6）比较运算符
除了熟知的< > <= >=，还有
①=（不是等于，是赋值）
②== （等于，类型不一样，值一样，结果也会为true）
③=== （等于，类型一样，值一样，结果才为true）
注：这是JS的一个缺陷，坚持不要用==比较。
须知：ⅠNaN === NaN结果为false。NaN与所有的数值都不相等，包括自己。
ⅡisNaN(NaN)结果为true。只能通过isNaN()来判断这个数是否为NaN。
浮点数问题：Ⅰ(1/3)===(1-2/3)结果为false。
ⅡMath.abs(1/3-(1-2/3)<0.00000001)结果为true。
尽量避免使用浮点数进行运算，存在精度问题！
7）null和undefined
①null 空
②undefined 未定义
8）数组
Java中的数组元素必须是相同类型的，JS中不需要这样。
例：

var arr = [1,2,3,4,5,'hello',true,null];
new Array(1,2,3,4,5,'hello',null,false);

注：为了保证代码的可读性，尽量使用[]的方式。
取数组下标：如果越界了，就会undefined。
9）对象
对象是大括号，数组是中括号。
每个属性之间使用逗号隔开，最后一个不需要添加。
例：定义一个叫xiaoming的人的对象。

var person = {
  name: "xiaoming",
  age: 3,
  tags: ['js','java','web']
}

取对象的值：

person.name
person.age

5.严格检查模式strict

如i = 1;没有定义但不会报错，且自动默认为全局变量。
在ES6中一般用let定义局部变量。
‘use strict’;：严格检查模式，预防JavaScript的随意性导致产生的一些，必须写在JavaScript的第一行！
前提：IDEA需要设置支持ES6语法。