JS基础教程（1）

js引入方式

行内式：经过向html元素行内添加一些js代码，如给div绑定点击事件

<div onclick="alert('这是js代码')">这是一个div</div>
复制代码

内嵌式：在html文档中写一个script标签，把咱们的js带写在script标签内

<script>
    alert('这是内嵌式js代码')
</script>
复制代码

外链式：在html文档中写一个script标签，而且设置src属性，src的属性值引用一个js文件资源，而js代码写在js文件中；

使用外链式引入js文件时，script标签里面不能再写js代码了，即便写了也不会执行。

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

复制代码

不管是内嵌式仍是外链式，都建议把script标签写在body结束标签的前面。

1、 浅谈前端发展史

第一阶段：C/S （client server） -> B / S （browser server）网页制做 技术栈：PhotoShop、HTML、CSS

第二阶段：从静态到动态，从后端到前端 前端开发工程师 先后端分离： 后端：完成数据的分析和业务逻辑的编写（包含API接口编写） 前端：网页制做、JS交互效果、数据的交互和绑定 技术栈：JavaScript 、 Ajax（跨域技术）、jQuery ... 第三阶段：从前端到全端（从PC端到移动端） 技术栈：H五、CSS三、响应式布局开发，Zepto、Hybrid（混合app开发）微信小程序...

第四阶段：从全端到全栈 全栈开发：先后端均可以开发（严格意义讲，一种语言完成前段后开发） 技术栈：NODE（基于js编程语言开发服务器端程序）、Express/Koa...

2、关于浏览器的内核和引擎

webkit（v8引擎）：大部分浏览器 gecko：火狐 trident：IE ...

W3C：万维网联盟，制定编程语言的规范与标准 开发者按照规范编写代码，浏览器开发商也会开发一套按照规范把代码渲染成页面的东西（这个东西就是内核或者引擎）

浏览器内核的做用：按照必定的规范，把代码基于GPU（显卡）绘制出对应的图形和页面等；

为啥会出现浏览器兼容：

1. 部分浏览器会提早开发一些更好的功能，后期这些功能会被收录到W3C规范中，可是再收录以前，会存在必定的兼容性
2. 各个浏览器厂商，为了突出本身的独特性，用其余方法实现W3C规范中个功能； ...

3、JavaScript

JS：轻量级的客户端脚本编程语言、

编程语言 HTML+CSS 是标记语言 编程语言是具有必定逻辑的，拥有本身的编程思想（面向对象【oop】、面向过程编程）

面向对象
C++
JAVA
PHP
C#
JS
...
面向过程：
C
复制代码

2.目前的JS已经不是客户端语言了，基于NODE能够作服务器端程序，因此JS是全栈编程语言

学习JS，咱们学习它的几部分组成 ECMAScript（ES）:js的核心语法 DOM: Document Object Model文档对象模型，提供各类API（属性和方法）让JS能够获取或者操做页面中的HTML元素（DOM和元素） BOM：Browser Object Model 浏览器对象模型，提供各类API让js能够操做浏览器

4、ECMAScript

它是JS的语法规范，JS中的变量、数据类型、语法规范、操做语句，设计模式等等都是ES规定的；

值得注意的是js的注释方式：注释是一项备注内容，给人看的，代码执行时会忽略注释内容。

• 单行注释： // 两个单斜线
• 多行注释：/多行注释内容写在两个星号之间/

5、变量（variable）

它不是具体的值，只是一个用来存储具体值的容器或者代名词，由于它存储的值能够改变，因此称为变量。

基于ES语法规范，在JS中建立变量有如下方式：

var（ES3) function （ES3）建立函数（函数名也是变量，只不过存储的值是函数类型而已） let （ES6）声明变量 const （ES6）建立常量（常量就是恒定不变的值，如光速就是常量） import （ES6）基于ES6的模块处处规范导出须要的信息 class （ES6） 基于ES6建立 类

/*
* 语法：
* var 变量名 = 值
* let 变量名 = 值
* const 变量名 = 值
* function 函数名 () {
*  // 函数体
* }
*
*
*
*/
var n = 13;
n = 15;
alert(n + 10); // => 弹出来25 此时的N表明15

const m = 100;
m = 200; // Uncaught TypeError: Assignment to constant variable (常量存储的值不能被修改，可以被修改的就是变量了)
复制代码

建立变量，命名的时候要遵循一些规范

严格区分大小写 遵循驼峰命名法：按照数字、字母、下划线或者$来命名（数字不能做为开头），命名的时候基于英文单词拼接成一个名字（第一个单词字母小写，其他每个有意义单词的首字母都大写） 不能使用关键字和保留字：在js中有特殊含义的叫作关键字，将来均可能成为关键字的叫作保留字

var n = 12;
var N = 12; // 变量n和变量N不是同一个变量
var studentInfo = 'xyz'; // 驼峰命名法

// 变量要具备语义化
add / create / insert
del (delete) / update / remove(rm)
info / detail
log

复制代码

6、数据类型

数据类型是一门语言进行生产的材料，JS中包含的值有如下这些类型：

基本类型： 数字 number 字符串 string 布尔 boolean null undefined Symbol 表示一个惟一值（ES6新增） 引用数据类型： 对象object 普通对象 数组对象 正则对象 日期对象 ... 函数function

// [基本数据类型]
var n = 13; // => 0 1 -13 13.2都是数字， 此时变量n存储的就是一个数字；中有一个特殊的值：NaN(not a number)，表示不是一个有效的数字，可是仍然是一个数字类型

var s = ''; // =>如 '' '13' "13" "name" "age" JS中全部用单引号或者双引号包裹起来的都是字符串，字符串表示的值是当前引号中包裹的值（一个字符串由零到多个字符串组成）

var  b = true; // => 布尔类型只有两个值 true 真 false表示假

var empty = null; // => 变量empty表示null空

var notDefined = undefined; // 变量notDefined表示undefined（undefined这个单词的意思就是未定义）；

// Symbol: 用来建立一个惟一值，和谁都不会重复。下面等号右侧虽然长的同样，可是s1和s2变量表明两个不一样的值。
var s1 = Symbol('你好');
var s2 = Symbol('你好');

// [引用数据类型]
// => 对象
var obj = {name: '你好', age: 9}; // => 普通对象：由大括号包裹起来，里面包含多组属性名和属性值（name和age叫作属性名（又称键，英文名key），而 '你好'/9叫作属性值（又称值，英文名value），因此对象又叫作键值对集合或者key/value集合）
var obj2 = {}; // => 变量obj2表示空对象；

// => 数组
var ary = [1, 2, 3, 4, 5]; // => 数组对象：用中括号包裹起来，包含0到多项内容，每一项之间用逗号(英文逗号)分隔。
var ary2 = []; // => 变量ary2表示一个空数组

// => 正则：用来匹配字符串的规则
var reg = /^abc$/;  // => 两个斜线中间的叫作元字符

// => 函数：须要屡次重复使用的代码或者有特定功能的代码能够封装成一个函数；
function fn () {// => 函数体}
// function 叫作关键字，用于声明函数变量
// fn 叫作函数名，函数名也须要知足变量声明的条件（本质上函数名也是变量名，只不过这个变量名表明的是一个函数数据类型的值）
// () 【声明函数时】fn后面的这个小括号表示的是形参入口
// {} 写在函数中的{}表示函数体，这里面写须要执行的代码

// ....
复制代码

7、JS代码运行及经常使用输出方式

alert方法(函数): 在浏览器中经过弹窗的方式输出（浏览器提示框）

var num = 12;
alert(num); // alert() 读做：alert方法执行【写在方法名后面的“()”读做 “执行” ，就是把alert函数里面的代码执行一遍】。把想输出的东西放在小括号里；

var course = 'js基础课程';
alert(course);


console.log方法：在浏览器控制台输出日志。console是浏览器的开发者工具的一个页卡（在浏览器中按下F12按键【部分电脑须要按下Fn和F12】）


// console.log() 读做console.log方法执行，把想要输出的变量或者内容放在小括号里。
var name = '你好';
console.log(name);


innerHTML/innerText属性； 修改元素中的HTML或者文本；


var box = document.getElementById('box'); // => 在document（整个HTML文档中）下通查找id为box的元素。

// 语法：元素对象.innerHTML/innerText = '想要显示的内容'; 【想要显示的内容必须是一个字符串类型的值】
box.innerHTML = '<h1>js基础</h1>';
box.innerText = '<h1>js基础</h1>';

// box.innerHTML/box.innerText = '字符串' 读做：将box的innerHTML或innerText修改成 '字符串'

// => 咱们发现一样是包在字符串里面的内容，经过innerHTML的方式浏览器会将<h1>识别成HTML内容；可是innerText不能识别，而是你字符串里面写什么，页面就输出什么；
复制代码

8、有效数字检测、数据类型转换、数据类型检测

有效数字检测

有效数字检测 isNaN() 方法；非有效数字：NaN(not a number)

isNaN(须要检测的值)：检测当前是不是一个有效数字，若是是一个有效数字，isNaN执行后就会获得一个false，不然isNaN执行后获得一个true；（咱们获得的这个false或者true称为isNaN函数的返回值【就“结果”的意思】） 语法：isNaN(须要检测的值)

var num = 12;
 var result1 = isNaN(12); // -> 检测num变量存储的值是否为非有效数字，12是数字，因此isNaN执行后获得一个false；
 var result2 = isNaN('13'); // -> false
 var result3 = isNaN('你好'); // -> true 由于汉字不是数字
 var result4 = isNaN(false); // -> false
 var result5 = isNaN(null); // -> false;
 var result6 = isNaN(undefined); // -> true
 var result7 = isNaN({name: '你好'}); // -> true
 var result8 = isNaN([12, 23]); // -> true
 var result9 = isNaN([12]); // -> false
 var result10 = isNaN(/^$/); // -> true
 var result11 = isNaN(function () {}); // -> true
复制代码

思考：为啥小括号里洗的不是数字也能获得结果？这是isNaN的检测机制：

一、首先验证当前要检测的值是否为数字类型的，若是不是，浏览器会默认的把值转换为数字类型

把非数字类型的值转换为数字：

• 其余基本类型转换为数字：内部隐式调用Number方法

Number(须要转换的值); 是强制转换 [字符串转数字]：若是字符串里面都是数字，那么返回这个数字，若是有非数字的因素会返回NaN.

Number('13') // -> 13
    Number('13px') // NaN 字符串中px不是数字
    Number('13.5') // 13.5 能够识别小数点
复制代码

[布尔值转数字]
Number(true); // -> 1
Number(false); // -> 0

[null、undefined转数字]
Number(null); // 0
Number(undefined); // NaN

- 引用数据类型转数字：先调用引用数据类型值的toString方法将引用数据类型转化为字符串，而后再将字符串转换为数字。

[对象转数字]
Number({}) // NaN; 其内部机制：({}).toString() -> '[object Object]' -> Number('[object Object]') -> NaN

[数组转数字]
Number([12, 23]) // NaN; 内部机制：[12, 23].toString() -> '12, 23' -> Number('12, 23') -> NaN

[正则]
Number(/^\d$/) // NaN; 内部机制：/^\d$/.toString() -> '/^\d$/' -> Number('/^\d$/') -> NaN

复制代码

二、当前检测的值已是数字类型，是有效数字就获得一个false，不是就会获得一个true；（在数字类型中只有NaN不是有效数字，其他的都是有效数字） Number(1); // false Number(NaN); // true

三、NaN的比较

NaN == NaN // 返回false；（ == 是比较运算符，一个等号是赋值；）
这是由于啥呢？由于NaN只是表示非数字，字符串 'a' 是非数字，'张三'也是非数字。可是 a 和 张三不相等。



if (Number(num) == NaN) {
    // if 是js中用来作判断的语言结构，小括号里表示条件，若是条件成立就执行花括号里面的代码
    alert('你好');
}

// 上面花括号里面的代码永远不会执行，由于Number方法获得的结果只有两种状况，要么是数字，要么是NaN。若是获得一个数字，数字和NaN不相等，若是是NaN，NaN和NaN也不相等。

复制代码

数据类型转换（parseInt、parseFloat方法）

做用和Number方法类似，都是把非数字类型值转换为数字，区别在于Number方法是强制转换，即要求被转字符串中必须都是数字，若是不知足这一条件直接获得NaN，而parseInt和parseFloat则是非强制转换。

parseInt：把一个字符串中的整数解析出来
parseFloat：把一个字符串中整数和小数包含小数点都解析出来



parseInt('13.5') // 13
parseFloat('13.5') // 13.5



parseInt('width: 13.5px'); // NaN
parseFloat('width: 13.5px'); // NaN

复制代码

注意：不管是parseInt仍是parseFloat都是从字符串的最左边开始查找有效数字，直到遇到第一个非有效数字字符就中止查找，若是第一个就不是有效数字，那么直接回返回NaN，而且中止查找。

数据类型检测： 检测数据类型一共有四种方式：

typeof
instanceof
constructor
Object.prototype.toString.call()
复制代码

咱们这里先讲typeof 运算符

语法：typeof 被检测的值返回被检测值的数据类型；

console.log(typeof 1); // number
console.log(typeof 'zhufengpeixun'); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof /^/); // object

// 思考？typeof 运算符的返回值是个什么数据类型？
var result = typeof 1;
console.log(typeof result); // string
复制代码

typeof 是有局限性的，检测基本数据类型时，typeof检测null会返回object，由于null是空对象指针。同时，typeof检测引用数据类型时，不能具体区分是哪种对象数据类型（对象、数组、正则等）只会统一返回object