一、js引入方式

  1. <!--行内式：通过向 html 元素行内添加一些 js 代码，如给 div 绑定点击事件-->
  2. <div onclick="alert('这是js代码')">这是一个div</div>
  1. <!--内嵌式：在 html 文档中写一个 script 标签，把我们的 js 写在 script 标签内-->
  2. <script>    alert('这是内嵌式js代码')    </script>
  1. <!--外链式：在 html 文档中写一个 script 标签，并且设置 src 属性-->
  2. <script src="js/1.js"></script>

无论是内嵌式还是外链式，都建议把 script 标签写在 body 结束标签的前面。

二、JavaScript

JS的组成

  • ECMAScript（ES）:js的核心语法
  • DOM: Document Object Model文档对象模型，提供各种API（属性和方法）让 JS 可以获取或者操作页面中的HTML元素（DOM和元素）
  • BOM：Browser Object Model 浏览器对象模型，提供各种 API 让 js 可以操作浏览器

三、ECMAScript

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

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

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

四、变量（variable）

它不是具体的值，只是一个用来存储具体值的容器或者代名词，因为它存储的值可以改变，所以称为变量。
基于 ES 语法规范，在 JS 中创建变量有以下方式：

  • var（ES3)
  • function （ES3）创建函数（函数名也是变量，只不过存储的值是函数类型而已）
  • let （ES6）声明变量
  • const （ES6）创建常量（常量就是恒定不变的值，如光速就是常量）
  • import （ES6）基于ES6的模块规范导出需要的信息
  • class （ES6） 基于ES6创建 类
  1. /*
  2. * 语法：
  3. * var 变量名 = 值
  4. * let 变量名 = 值
  5. * const 变量名 = 值
  6. * function 函数名 () {
  7. *  // 函数体
  8. * }
  9. */
  10. var n = 13;
  11. n = 15;
  12. alert(n + 10); // => 弹出来25 此时的 N 代表15
  14. const m = 100;
  15. m = 200; // Uncaught TypeError: Assignment to constant variable (常量存储的值不能被修改，能够被修改的就是变量了)

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

  • 严格区分大小写
  • 遵循驼峰命名法：按照数字、字母、下划线或者$来命名（数字不能作为开头），命名的时候基于英文单词拼接成一个名字（第一个单词字母小写，其余每一个有意义单词的首字母都大写）
  • 不能使用关键字和保留字：在 js 中有特殊含义的叫做关键字，未来都可能成为关键字的叫做保留字
  1. var n = 12;
  2. var N = 12; // 变量 n 和变量 N 不是同一个变量
  3. var studentInfo = 'xyz'; // 驼峰命名法
  5. // 变量要具有语义化
  6. add / create / insert
  7. del (delete) / update / remove(rm)
  8. info / detail
  9. log

五、数据类型

数据类型是一门语言进行生产的材料，JS 中包含的值有以下这些类型：
基本类型：number、string、boolean、null、undefined、Symbol
引用数据类型：对象object包括：
普通对象、数组对象、正则对象、日期对象、函数function……

  1. // [基本数据类型]
  2. var n = 13; // => 0 1 -13 13.2都是数字，此时变量 n 存储的就是一个数字；数字中有一个特殊的值：NaN(not a number)，表示不是一个有效的数字，但是仍然是一个数字类型
  4. var s = ''; // =>如 '' '13' "13" "name" "age" JS 中所有用单引号或者双引号包裹起来的都是字符串，字符串表示的值是当前引号中包裹的值（一个字符串由零到多个字符串组成）
  6. var b = true; // => 布尔类型只有两个值 true 真 false 表示假
  8. var empty = null; // => 变量 empty 表示 null 空
  10. var notDefined = undefined; // 变量 notDefined 表示 undefined（undefined 这个单词的意思就是未定义）；
  12. // Symbol: 用来创建一个唯一值，和谁都不会重复。下面等号右侧虽然长的一样，但是 s1 和 s2 变量代表两个不同的值。
  13. var s1 = Symbol('珠峰');
  14. var s2 = Symbol('珠峰');
  16. // [引用数据类型]
  17. // => 对象
  18. var obj = {name: '珠峰培训', age: 9}; // => 普通对象：由大括号包裹起来，里面包含多组属性名和属性值（name 和 age 叫做属性名（又称键，英文名 key），而 '珠峰培训'/9叫做属性值（又称值，英文名 value），所以对象又叫做键值对集合或者key/value集合）
  19. var obj2 = {}; // => 变量 obj2 表示空对象；
  21. // => 数组
  22. var ary = [1, 2, 3, 4, 5]; // => 数组对象：用中括号包裹起来，包含0到多项内容，每一项之间用逗号(英文逗号)分隔。
  23. var ary2 = []; // => 变量 ary2 表示一个空数组
  25. // => 正则：用来匹配字符串的规则
  26. var reg = /^abc$/;  // => 两个斜线中间的叫做元字符
  28. // => 函数：需要多次重复使用的代码或者有特定功能的代码可以封装成一个函数；
  29. function fn () {// => 函数体}
  30. // function 叫做关键字，用于声明函数变量
  31. // fn 叫做函数名，函数名也需要满足变量声明的条件（本质上函数名也是变量名，只不过这个变量名代表的是一个函数数据类型的值）
  32. // () 【声明函数时】fn后面的这个小括号表示的是形参入口
  33. // {} 写在函数中的 {} 表示函数体，这里面写需要执行的代码
  35. // ....

七、JS代码运行及常用输出方式

  • alert方法(函数): 在浏览器中通过弹窗的方式输出（浏览器提示框）
  1. var num = 12;
  2. alert(num); // alert() 读作：alert方法执行【写在方法名后面的“()”读作 “执行” ，就是把alert函数里面的代码执行一遍】。把想输出的东西放在小括号里；
  4. var course = '珠峰培训js基础课程';
  5. alert(course);
  • console.log方法：在浏览器控制台输出日志。console是浏览器的开发者工具的一个页卡（在浏览器中按下F12按键【部分电脑需要按下Fn和F12】）
  1. // console.log() 读作 console.log 方法执行，把想要输出的变量或者内容放在小括号里。
  2. var name = '珠峰培训-马宾';
  3. console.log(name);
  • innerHTML/innerText属性； 修改元素中的 HTML 或者文本；
  1. var box = document.getElementById('box'); // => 在document（整个HTML文档中）下面查找 id 为 box 的元素。
  3. // 语法：元素对象.innerHTML/innerText = '想要显示的内容'; 【想要显示的内容必须是一个字符串类型的值】
  4. box.innerHTML = '<h1>珠峰培训js基础课程第一周</h1>';
  5. box.innerText = '<h1>珠峰培训js基础课程第一周</h1>';
  7. // box.innerHTML/box.innerText = '字符串' 读作：将 box 的 innerHTML 或 innerText 修改为 '字符串'
  9. // => 我们发现同样是包在字符串里面的内容，通过 innerHTML 的方式浏览器会将<h1>识别成 HTML 内容；但是 innerText 不能识别，而是你字符串里面写什么，页面就输出什么；

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

有效数字检测

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

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

  1. var num = 12;
  2.  var result1 = isNaN(12); // -> 检测 num 变量存储的值是否为非有效数字，执行后得到一个 false；
  3.  var result2 = isNaN('13'); // -> false
  4.  var result3 = isNaN('笔记'); // -> true 因为汉字不是数字
  5.  var result4 = isNaN(false); // -> false
  6.  var result5 = isNaN(null); // -> false;
  7.  var result6 = isNaN(undefined); // -> true
  8.  var result7 = isNaN({name: '培训'}); // -> true
  9.  var result8 = isNaN([12, 23]); // -> true
  10.  var result9 = isNaN([12]); // -> false
  11.  var result10 = isNaN(/^$/); // -> true
  12.  var result11 = isNaN(function () {}); // -> true

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

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

  1. 把非数字类型的值转换为数字：
  2. - 其他基本类型转换为数字：内部隐式调用Number方法
  4. Number(需要转换的值); 是强制转换
  5. [字符串转数字]：如果字符串里面都是数字，那么返回这个数字，如果有非数字的因素会返回NaN.
  6. ```javascript
  7.     Number('13') // -> 13
  8.     Number('13px') // NaN 字符串中 px 不是数字
  9.     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

  2. 2、当前检测的值已经是数字类型，是有效数字就得到一个 false，不是就会得到一个 true；（在数字类型中只有 NaN 不是有效数字，其余的都是有效数字）<br />Number(1); // false<br />Number(NaN); // true
  4. 3、NaN 的比较
  6. NaN == NaN // 返回 false；（ == 是比较运算符，一个等号是赋值）<br />这是因为什么呢？因为 NaN 只是表示非数字，字符串 'a' 是非数字，'张三'也是非数字。但是 a 和 张三不相等。
  8. ```javascript
  9. if (Number(num) == NaN) {
  10.     // if 是 js 中用来做判断的语言结构，小括号里表示条件，如果条件成立就执行花括号里面的代码
  11.     alert('珠峰10年，专注前端');
  12. }
  14. // 上面花括号里面的代码永远不会执行，因为 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 被检测的值返回被检测值的数据类型；

  1. console.log(typeof 1); // number
  2. console.log(typeof 'zhufengpeixun'); // string
  3. console.log(typeof true); // boolean
  4. console.log(typeof null); // object
  5. console.log(typeof undefined); // undefined
  6. console.log(typeof {}); // object
  7. console.log(typeof []); // object
  8. console.log(typeof /^/); // object
  10. // 思考？typeof 运算符的返回值是个什么数据类型？
  11. var result = typeof 1;
  12. console.log(typeof result); // string
  14. // 面试题
  15. console.log(typeof typeof 1); // string

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