js入门

什么是js

• 是一种编程语言
• 在浏览器上运行
• 可以嵌套到html的编程语言
• 主要作用就是实现网站的交互

js语言的组成

引入方式

*<!-- 外联样式：写在js文件中，使用script的src属性导入，写到head标签中,**最推荐使用** -->*
<script src="./01-JS外联写法.js"></script>

<!-- 内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐 -->
<script >alert("这是JS内联样式")</script >

<!-- 行内样式：不推荐，因为不便于维护 -->
<button οnclick="window.alert('')"></button>

变量

• 变量：内存中用来保存数据的一块空间
• 作用：在内存中存储数据

变量

let 名字 = 值

let是关键字，变量的值可以改变

  let name = '张三';
        // let是关键字
        // let name;  声明变量：变量暂时没有被赋值，变量存在
        // name = '张三';  赋值变量：将 '张三' 存入到name变量 
        console.log(name);

        // 变量可以随时修改：重新对变量赋值即可（但是不可重新声明）
        name = '李四';
        console.log(name);

变量的命名规范

• 变量的命名规则：见名知意
• 组成规则：数字、字母（区分大小写）、下划线
• 组成规则：数字不能开头
• 规则：不能使用关键字：系统已经用了做特殊效果的单词：let
• 不要使用中文（中文有字符集问题（乱码））
• 不要使用保留字：系统预留的，暂时没用，未来可能会成为关键字
• 建议使用小驼峰：第一个单词首字母小写，其他单词首字母大写（ let userName;）

var和let的区别

let是ES6语法（当前最新的JS版本），ES5是使用var声明变量。**var可以重新声明变量，而let不行。**但var有缺点。会浪费资源，消耗CPU和内存。建议使用let

交换两个变量的值

数据类型

常用：

• 数字（Number）整数、小数 正数、负数
• 字符串（String）有引号就是字符串
• 布尔（Boolean）true和false

少用：

• underfined 未赋值
• 空值 null 空，特殊对象

控制台显示（颜色）

• 数字（蓝色）
• 字符串（黑色）
• 布尔（深蓝色）
• undefined,null(灰色）
  

typeof可以获取数据类型

 console.log(typeof 1);      // number
 console.log(typeof 'a');    // string
 console.log(typeof true);   // boolean

undefined，null的数据类型为object

算数运算法（实现算数运算）

• // 算术运算：+ 、 - 、 * 、 / 、 %
  // +：左边数据 + 右边数据 求和
  // -：左边数据 - 右边数据 求差
  // *：左边数据 * 右边数据 求积
  // /：左边数据 ÷ 右边数据 求商
  // %：左边数据 % 右边数据 求余

 // + 运算
        let a = 1;
        let b = 2;

        // 字面量求和
        let c = 1 + 1;
        console.log(c);

        // 变量求和
        let d = a + b;      // 表示：将a的值取出来 + b的值取出来
        console.log(d);

        // 求余
        let e = 1 % 5;
        console.log(e);     // 1

        let f = a % b;      // 1 % 2 ==== 1

        // **求余使用最多的场景：求 奇偶数**   数据 % 2 === 1 代表奇数  0 代表偶数

字符串拼接

• 在JS中 +不一定代表算术加法，有可能是字符串的连接符（拼接符）
• 如果+两边只要出现有一个字符串（带引号的家伙），就不会进行算术预算，转成字符串拼接

let a = 1;
let b = "2";
console.log(a + b) //结果等于"11"

特殊

• 在js中，允许除数为0，1 / 0等于无穷
• 负无穷：-infinite
• 正无穷：infinite

符合算数运算符

• 在js中 "="是赋值运算，所以在算数中，先算右边。再把右边的结果返回给左边。
• 便捷运算：如果一个变量已经存在，需要修改这个变量（改变大小），可以采用复合算术运算符。

+=：a += 1 ===== a = a + 1
-=：a -= 1 ===== a = a - 1
*=: a *= 1 ===== a = a * 1
/=：a /= 1 ===== a = a / 1
%=：不会这么用

Math高级算数

最常使用：

• Math.round()四舍五入（通常配合random求伪随机数使用）
• Math.ceil()向上求整
• Math.floor（）向下求整
• Math.random（）伪随机数

常量const关键字

• const是ES6的语法规范（为大型项目而生）
• 有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字。
• 常量为了区分变量（规范）：通常会全大写（const PI = 3.14）

模板字符串（反引号字符串）

• 模板字符串就是普通字符串
• 好处：可以换行、模板字符串中间可以解析变量、方便写标签、
• 通常使用（${变量名}）