初识JavaScript
JS的组成
- ECMAScript：主要规定了js的组成、引入方式、命名规范、输出方式、变量、数据类型、基本语法、操作语句
- DOM： document object model 文档对象模型（可以识别文档，操作HTML）
- BOM： browser object model 浏览器对象模型 （就是浏览器）
页面的加载顺序
先加载css，再加载html，最后加载js，这是一个规范（习惯）。
js代码一般在body的后面
JS的引入方式
- 行内式，和html写在一行
- 内嵌式，内嵌在html结构当中
- 外链式，引用一个js文件
// 行内式
<input type="button" value="按钮" onclick="alert(1)">
// 内嵌式
<script>
alert(2);
</script>
// 外链式
<script src="./demo.js"></script>
JS的注释
- 单行注释是双斜杠
// 单行注释 - 多行注释是双斜杠加两个*号
/* 很多行代码 */
JS的输出方式
- 弹框输出
alert(1); - 在控制台打印
console.log(123); - 在页面中输出
document.write("I LOVE CODING");
获取DOM元素与操作DOM
DOM指的是HTML节点
- 通过id获取元素
document.getElementById("box"); - 修改html标签中的内容
- innerText: 只可以识别文本，不识别标签
document.getElementById("box").innerText = "<h2>硬件一班</h2>" - innerHTML: 可以识别标签
document.getElementById("box").innerHTML = "<h2>硬件一班</h2>"
变量
变量： 可变的量，用来存储值的
变量的作用： 存储值和代表值
声明一个变量 使用var，意思是 起一个名字
// var 变量名 = 变量值； 我起了一个名字代表了一个值
// = 就代表赋值
var a = 1; // 这个 1 是数字
console.log(a);
变量命名规范
在js中严格区分大小写
document documenT string sTring变量遵循驼峰命名法
- 首字母小写，其余每个有意义的单词的首字母大写，尽量不要用拼音
示例：oDiv studentInfo- 由数字、 字母、 下划线、$ 组成，不能使用数字开头。
示例： div1、 _stu、 pro、 student_info、 abc123
- 不能用关键字和保留字
关键字：在js中有特殊意义 比如 var function
保留字： 未来可能作为关键字
基本数据类型
包含： 数字number、字符串string、布尔值boolean、null、undefined
var a = 12.3; // 数字
var b = "123硬件一班_1234"; // 字符串 在引号里面的都是字符串
var n = null; // 空，空值 现在没有给值，以后可能会给
var u = undefined; // 未定义，压根就没有值
var bol = true; // 布尔值 是
var u;
console.log(u); // undefined 我们只声明，没赋值
null 和 undefined
null 是我们没有给这个变量规定数据类型，所以暂时没值
我们在电脑中设置了一个文件，但是不知道他是什么类型(文本、视频、音频等)的文件，那么就是null
我们压根和没定义这个文件，那么他是 undefined
数字、字符串、布尔值简单运算
// 数字与数字之间有 加减乘除
var x = 10;
var y = 20;
console.log( x*y + 1 - 10 );
// 字符串使用加号进行拼接
var str1 = "硬件一班123";
var str2 = "超级强";
console.log(str1 + str2);
// 布尔值有逻辑运算 与 或 非
var t = true;
var f = false;
console.log( t && f); // false
console.log( t || f); // true
console.log( !t ); // false
console.log( !f ); // true
逻辑运算符
布尔值： true false
运算：
- 与（类似于交集） 符号是： &&
- 或（类似于并集） 符号是： ||
- 非（取反） 符号是： !
// 与： 全部是 true 结果是true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
// 或： 有一个是true 结果是true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
// !true === false
// !false === true
console.log(!true); // false
console.log(!false); // true
var t = true;
var f = false;
// ! 取反的操作是优先操作的，其他的从左向右运算
console.log( t && f || f && !t ); // false
console.log( !f || t && t ); // true
基本数据类型检测 typeof
var a = 10; // 数字
var b = "hello"; // 字符串
var c = false; // 布尔值
var d = null; // null
var e; // 如果只声明，不赋值， 那么就是undefined（未定义）
// typeof方法 用来做数据类型检测
// typeof 后面跟上变量名， 那么就得到这个变量的类型
// 得到的结果是一个字符串
console.log(typeof 10); // number
console.log(typeof "hello"); // string
console.log(typeof false); // boolean
console.log(typeof null); // object【在js中是对象的意思,先了解】
console.log(typeof undefined); // undefined
// typeof "number" 得到的是 "string"
console.log(typeof typeof b);
引用数据类型
基本数据类型，存储的就是一个值
引用数据类型，存储的是一个地址空间
引用数据类型分为：
1.对象数据类型 对象、数组、正则..
2.函数数据类型 函数
// 引用数据类型， 又称复杂数据类型
var arr = [1, 1, 2, "aaa", false]; // 数组，[值, 值, 值]，没值为[]
var obj = { name: "硬件一班", age: 10 }; // 对象 {属性名: 属性值}
var reg = /\d+/; // 正则【了解】
var fn = function (){} // 函数
引用数据类型检测
基本数据类型 使用typeof 检测很方便
引用数据类型 检测有局限性，不能检测对象下的细分项
// 接上
console.log(typeof arr); // object
console.log(typeof obj); // object
console.log(typeof reg); // object
console.log(typeof fn); // function
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(reg)); // [object RegExp]
console.log(Object.prototype.toString.call(fn)); // [object Function]
基本操作与运算【练习】
// 数字 number： 正数、负数、0、小数、 NaN（意思是非数字）
// 加减乘除，如果和NaN一起运算，得到的结果就是NaN
// 他是其他数据类型强制转换成数字，没有成功，得到的结果
// NaN: not a number 不是一个有效数字,但它也是数字类型
console.log(2 * 5 + 3); // 13
console.log(10 + NaN); // NaN
console.log(typeof NaN); // number
console.log(Object.prototype.toString.call(NaN)); // [object Number]
// 把字符串强制转换成数字
console.log(Number("123")); // 123
console.log(typeof Number("123"));
console.log(Number("abc")); // NaN
console.log(typeof Number("abc"));
// 字符串
// 加法：和字符串一起执行加法操作，即使有其他数据类型，都会变成字符串拼接
// 减法：当数字和纯数字字符串一起做减法操作，则全部转化为数字，然后再减
console.log("--------------");
console.log("abc" + 1234); // "abc1234"
console.log(1 + "10" + true); // "110true"
console.log(1 + 10 + "a"); // "11a"
console.log("100" - 20); // 80
// "100a" 转化为有效数字会失败，变成NaN, NaN - 20 还是NaN
console.log("100a" - 20); // NaN
console.log(100 - "20" + "1"); // "801"
/*
数字100减字符串20会做 数学运算，得到数字80，加上字符串1，
会字符串拼接,得到字符串801，加上NaN，还是字符串拼接，得 字符串801NaN
*/
console.log(100 - "20" + "1" + NaN); // "801NaN"
/*
数字80 减 字符串20，变成数学减法，得到数字79，
加NaN依然是数学运算，结果是NaN
加减乘除，如果和NaN一起数学运算，得到的结果是NaN
*/
console.log(100 - "20" - "1" + NaN); // NaN
// 布尔值
// 当布尔值做数学运算的时候，会转化为数字
// true 转化为1， false 转化为 0
console.log("-----------------");
console.log(1 + true); // 2
console.log(1 + false); // 1
console.log(false * 2 - true); // -1
console.log(true * 3 + "abc"); // "3abc"
// 取反: 符号是! 当执行取反操作的时候，直接判定布尔值，使用方法Boolean()
// 0 NaN "" null undefined 布尔值是false，其他均为true
// 0 NaN "" null undefined 布尔值是false，其他均为true
// 0 NaN "" null undefined 布尔值是false，其他均为true
console.log("--------------");
console.log(!"abc");
console.log(!!"abc");
console.log(!!"0");
console.log(!!0);
console.log(!!NaN);
console.log(!!"");
console.log(!!null);
console.log(!!undefined);
布尔运算【练习】
与或运算， 各种数据类型都通用
1. 执行“或”操作 ||
- 如果左边的布尔值为true， 那么留下左边的值
- 如果左边的布尔值为false， 那么留下右边的值
- 两边有一个true，结果布尔值就算true，左边true，留左边，否则留右边
2. 执行“与”操作 &&
- 如果左边的布尔值为 true， 那么留下右边的值
- 如果左边的布尔值为 false， 那么留下左边的值
- 两边同时true，结果布尔值算true，左边true，留右边，否则留左边
console.log( true || false ); // true
console.log( true && false ); // false
// 0 NaN "" null undefined 布尔值是false，其他均为true
console.log( "abc" || true ); // "abc"
console.log( "abc" || false ); // "abc"
console.log( "abc" && true ); // true
console.log( "abc" && false ); // false
console.log( 100 && "abc" ); //"abc"
console.log( 100 || 20 ); // 100
console.log( 0 || 20 ); // 20
console.log( 0 && "abc" ); // 0
console.log( NaN && 20); // NaN
console.log( false || 100); // 100
等号比较【练习】
JS中有隐性数据类型转换，这个转换使得js的语法显得不是很严谨（弱类型语言）
java dart 强类型语言
一个等号"="是赋值操作， "==" 是先做转换再比较， "==="必须类型与值完全一致才相等
console.log("1" === 1); // false
console.log("1" == 1); // true
// 字符串 ——> 数字 使用 Number()
// 其他类型 ——> 布尔值 使用 Boolean()
// 一边是字符串，一边是数字，则全部转化为数字再比较
console.log("-------------------");
console.log( "100" == 100 ); // true
console.log( "110" == 100 + 10 ); // true
console.log( "abc100" == 100 ); // NaN == 100 false
console.log( "-1" == -1 ); // true
console.log( "" == 0 ); // true
console.log( "10" == 10.0 ); // true
// 一边是字符串，一边是布尔值
// 字符串变数字， 布尔值变数字，然后再比较
// true 转数字是1， false 转数字是0
console.log("-------------------");
console.log( "123" == true ); // 123 == 1 false
console.log( "1" == true ); // 1 == 1 true
console.log( "" == false ); // 0 == 0 true
// 如果遇到取反操作，则直接判断布尔值
// false有5个： 0 NaN "" null undefined
console.log("-------------------");
console.log( !"a" == false ); // true
console.log( !"" == true ); // true
console.log( !NaN == false ); // false
console.log( !"abc" == !100 ); // false == false true
console.log( !1 == true ); // false
