JavaScript笔记
一、JavaScript基础-开篇介绍
1. JavaScript的组成
- ECMAScript：JavaScript的语法标准
- DOM：JavaScript操作网页上的元素的API
- BOM：JavaScript操作浏览器的部分功能的API
2. JavaScript的语法规范
- 行内式:
<button onclick="alert('今天天气很好！');">今天天气很好！</button>
- 页内式:
</body>
......
<script type="text/javascript">
alert("今天天气很好！");
</script>
</body>
- 外链式格式:
<script type="text/javascript" src="01-js书写格式.js"></script>
注意点:
1.<script></script>标签中的js代码一般写在文档的尾部；网页是从上至下加载,如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
2.外链式的script代码块中不能编写js代码, 即便写了也不会执行,每次加载外链式的js文件都会发送一次请求,推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。
3. Javascript 初体验
- 方式一:在网页中弹出显示框，显示信息
<script>
alert("Hello，JavaScript！");
</script>
- 方式二:在控制台输出消息，一般用来调试程序
<script>
console.log("Hello，JavaScript！");
console.warn("警告输出！");
console.error("错误输出！");
</script>
- 方式三:在网页中弹出输入框，一般用于接收用户输入的信息
<script>
prompt("Hello，JavaScript！");
</script>
- 方式四:在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用
<script>
comfirm("Hello，JavaScript！");
</script>
4. Javascript语法规范:
- 一行代码结束后必须在代码最后加上;如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；
- 严格区分大小写的;
- 忽略多个空格和换行;
5. JavaScript中注释语法
-
// 单行注释
-
多行注释/
注意点：
- 单行注释可以嵌套单行注释、多行注释;
- 多行注释可以嵌套单行注释;
- 多行注释不能嵌套多行注释;
二、JavaScript基础-变量、关键字、标识
1. 如何定义变量?
1)变量名称
var name; //定义一个变量
var name, age, sex; //定义多个变量
- 如何进行变量初始化
var name = "旋之华"; //变量赋值
name = "刘德华"; //如何修改变量值
- 其它表现形式
var num1, num2, num3= 100;// 部分初始化
var num1 = num2 = num3 = 100;// 完全初始化
console.log(num1); // undefined 控制台查看变量的值
2. 关键字和保留字
-
关键字不能用作变量名、函数名；
-
关键字严格区分大小写, 比如：void和Void前者是关键字, 后者不是；
-
关键字：break do instanceof typeof case else new var ......
-
保留字：class enum extends super const export import ......
3. 标识：
-
在JS中所有的可以由我们自主命名的都可以称为是标识符，比如变量名、函数名、属性名都属于标识符
-
命名一个标识符时需要遵守如下的规则：
- 标识符中可以含有字母 、数字 、下划线_ 、$符号
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留字
- 严格区分大小写，比如name和Name是2个不同的标识符
- 标识符一般都采用驼峰命名法
三、JavaScript基础—数据类型
1. 六种数据类型
- Number: 数字类型
// 所有的数值都是Number类型(整数和小数)
console.log(Number.MAX_VALUE); //最大值
console.log(Number.MIN_VALUE); //最小值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(typeof Infinity); // number 无穷大
console.log(typeof -Infinity); // number 无穷小
注意点：当对数值进行计算时没有结果返回，则返回NaN，浮点数的运算可能得到一个不精确的结果。
2）String: 字符集类型
字符串由单引号或双引号括起
3）Boolean: 布尔类型
任何非零数值都是true, 包括正负无穷大, 只有0和NaN是false
任何非空字符串都是true, 只有空字符串是false
任何对象都是true, 只有null和undefined是false
4）undefined: 变量未初始化
没有初始化和没有声明的变量都会返回undefined
undefined是Undefined类型的字面量
- null: 对象类型
null表示的是一个空的对象
6）Arry和Object: 数组类型
2. JS中如何查看数据类型?
typeof 操作符：会将检查的结果以字符串的形式返回给我们；
console.log(typeof 100); // number
var name = "旋之华";
console.log(typeof name ); // string
3. 数据类型转换
- toString():将其它类型的数据转换为字符串类型返回,不会影响到原变量。
var num = 12306;
var str= num .toString(); // string
***注意:null和undefined没有toString()方法，如果强行调用,则会报错***
var num2 = undefined;
var str2 = num2.toString(); // 报错
var num3 = null;
var str3= num3.toString(); // 报错
- String()函数：
某些值并没有toString()方法，这个时候可以使用String()。比如：undefined和null
任何数据和 + 连接到一起都会转换为字符串
var num;
console.log(String(num)); // undefined
-
Number()函数
如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
undefined转换还为NaN， null转换为 0
布尔值 true 转成 1, false 转成 0 -
parseInt()函数和parseFloat()函数
取整和取浮点数
四、JS基础-运算符操作
1. 优先级：() > ++ -- - ~ |>乘法、除法、取模>
2. 加法运算：
- 非Number类型的值进行运算时，会将这些值转换为Number然后在运算
- 任何值和NaN做运算都得NaN
- 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
var res = 100 + '123'; //100123
- 减法运算
字符串做减法也会转换为Number
var res1 = 100 - '123'; //-23
