什么是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)
模板字符串(反引号字符串)
- 模板字符串就是普通字符串
- 好处:可以换行、模板字符串中间可以解析变量、方便写标签、
- 通常使用(
${变量名}
)