JS前置知识
什么是JS语言
javascript是一种运行在客户端 的脚本语言
客户端：即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。
脚本语言：也叫解释型语言，特点是执行一行，解释一行，如果发现报错，代码就停止执行 。
javascript的三个组成部分：ECMAScript、BOM、DOM
ECMAScript：定义了javascript的语法规范。
BOM：一套操作浏览器功能的API。
DOM：一套操作页面元素的API。
script标签
书写Javascript代码有两种方式，第一种是直接在script标签中书写，第二种是将代码写在js文件中，通过script进行引入。
直接在script中书写javascript代码：
<script>
alert("今天天气真好呀");
</script>
通过script标签引入一个JS文件，需要指定src属性
<script src="test.js"></script>
<font color="red">tips：如果script标签指定了src属性，说明是想要引入一个js文件，这个时候不能继续在script标签中写JS代码，即便写了，也不会执行。</font>
script标签的书写位置，建议写在</body>标签的前面。
输入输出语句
在实际开发，基本不能使用3、4、5,因为用户体验不好。
- console.log 控制台输出日志
- document.write 往页面中写入内容
- alert 弹框警告
- confirm 确认框
- prompt 输入框
注释
不被程序执行的代码。用于程序员标记代码，在后期的修改，以及他人的学习时有所帮助，在JS中，分为单行注释和多行注释
// 这是单行注释，只能注释一行,所有的代码均使用单行注释
/*
这是多行注释，不能嵌套，多行注释只用来写文档说明
*/
注释的作用：
1. 模块划分，方便代码查找和维护
2. 用于解释复杂代码的逻辑，方便维护和后期开发。
变量
变量，可以变化的量，变量是在计算机中存储数据的一个标识符。可以把变量看成存储数据的容器。
变量与字面量：
字面量：10、20、“abc”、true这种从字面上就能看出来类型和值的量叫做字面量。
变量：可以变化的量。
变量的声明与赋值
1.变量可以同时声明并赋值。
2.先声明后赋值
3.不声明，直接赋值
4.既不声明，也不赋值
5.同时声明多个变量
变量的命名规则与规范
命名规则（必须遵守）：
1.由字母、数字、下划线、$符号组成，开头不能是数字。
2.不能使用关键字和保留字
3.区分大小写
命名规范（建议遵守）：
1. 命名要有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
变量练习
//交换两个变量的值（掌握）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 12;
var b = 13;
// var tmp = a;
// a = b;
// b = tmp;
//使用加法完成交换
// a += b; // 12 + 13
// b = a - b; // 12 + 13 - 13 --> b = 12
// a -= b; // 12 + 13 - 12 --> 13
//使用数组完成交换1
// a = [a,b]; //[12,13]
// b = a[0]; //b = [12,13][0] -->b = 12
// a = a[1]; //a = [12,13][1] -->a = 13
//使用数组完成交换2
a = [b,b=a][0];
console.log("a = " + a + ",b = " + b);//a = 13 b = 12
</script>
</body>
</html>
tips:javascript是一种弱类型语言，不管声明什么类型的变量，都是用var，并且变量的类型是可以变化的。
var age = 90;
age = "张三";
数据类型
基本数据类型包括了：number、string、boolean、undefined、null
如何查看数据类型
使用typeof关键字查看数据类型
typeof name;
typeof(name);
Number类型
进制
1. 十进制，我们平时使用的就是十进制，进行运算时，八进制和十六进制的值最终都会转换成十进制。
2. 八进制，0开头的数值，数值序列：0-7
3. 十六进制，0x开头的数值，数值序列：0-9A-F
进制了解即可，基本都是使用十进制，稍微了解一下进制之间的转换。
浮点数
科学计数法：
var num = 5e+3;
var num1 = 5e-2;
//如何表示0.003和20000？
浮点数的精度问题：
0.1 + 0.2 = ? // 0.30000000000000004
0.07 * 100 = ? //7.000000000000001
浮点数在运算的时候会出现精度丢失的问题，因此在做比较运算的时候，尽量不要用小数进行比较。
数值范围
javascript不能表示世界上所有的数，因此在javascript中，数值大小是有一定限制的。
Number.MIN_VALUE :5e-324
Number.MAX_VALUE :1.7976931348623157e+308
Infinity :正无穷
-Infinity ：负无穷
数值判断
1. NaN:表示一个非数值，当无法运算或者运算错误的时候，会得到一个NaN，NaN是number类型，表示一个非数值。
2. NaN不等于NaN
3. isNaN用来判断是否是一个数字，当返回true的时候，表示不是一个数字，返回false表示是一个数字。
String类型
字面量
字符串的字面量：“abc” 、 ‘abc’ 字符串可以是双引号，也可以是单引号引起来。
字符串长度
length属性用来获取字符串的长度
var str = "abckjdlkfjd";
str.length;//字符串的长度
字符串拼接
拼接字符串使用+号
//思考：
console.log(11 + 11);
console.log("hello" + " world");
console.log("100" + "100");
console.log("11" + 11);
- 两边只要有一个是字符串，那么+就是字符串拼接功能
- 两边如果都是数字，那么就是算术功能。
boolean类型
boolean类型只有两个字面量，true和false，区分大小写。
所有类型的值都可以转化成true或者false
NaN、""、undefined、null、false、0 这6个值可以转换成false，其余的都是true。
undefined类型与null类型
undefined表示一个声明了没有赋值的变量
null表示一个空的对象。
undefined派生自null。
undefined == null ：true
undefined === null ：false
类型转换
如何使用谷歌浏览器，快速的查看数据类型？
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的，这个在调试过程中时非常有用的。
转换成字符串类型
- toString()
- String()
- /+ ""
转换成数值类型
- Number()
- parseInt
- parseFloat
- +num, -0等运算
转换成布尔类型
- Boolean
- !!
运算符
一元运算符
思考：
var a = 1; var b = ++a + ++a; console.log(b);
var a = 1; var b = a++ + ++a; console.log(b);
var a = 1; var b = a++ + a++; console.log(b);
var a = 1; var b = ++a + a++; console.log(b);
逻辑运算符
&&:只要有一个值为假，结果就是假。找假值
||:只要有一个值为真，结果就是真。找真值
!:取反
## 运算符的优先级
- () 优先级最高
- 一元运算符 ++ -- !
- 算数运算符 先* / % 后 + -
- 关系运算符 > >= < <=
- 相等运算符 == != === !==
- 逻辑运算符 先&& 后||
选择语句
if..else
//语法
if(condition) {
statement1
} else if (condition) {
statement2
} else {
statement3
}
switch..case
//语法
switch (expression) {
case value:
statement
break; // break 关键字会导致代码执行流跳出 switch 语句
case value:
statement
break;
default:
statement
}
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var day = prompt('请输入一个数字');
var result = day % 7;
switch(result){
case 0:
alert("今天星期天");
break;
case 1:
alert("今天星期一");
break;
case 2:
alert("今天星期二");
break;
case 3:
alert("今天星期三");
break;
case 4:
alert("今天星期四");
break;
case 5:
alert("今天星期五");
break;
case 6:
alert("今天星期六");
break;
default:
alert("请输入合法的数字");
break;
}
</script>
</body>
</html>
三元运算符
表达式1 ? 表达式2 : 表达式3
var sex = sex == 1 ? '男':'女';
实例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var num2 = Math.round(Math.random() * 100);
console.log(num2);
var num1 = prompt("请输入一个0~100的数字");
// if (num1 >= num2) {
// alert("你赢了");
// }else {
// alert("你输了");
// }
//判断条件 ? 条件成立时执行的代码 ： 条件不成立时执行的代码
num1 > num2 ? alert("你赢了") : alert("你输了");
</script>
</body>
</html>
循环语句
while循环
while(expression) {
statement
}
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i = 0;
var sum = 0;
// while(true) {
// i ++;
// sum += i;
// if (i == 100) {
// break;
// }
// }
//使用while循环计算1~100的和
while(i <100) {
i ++;
sum += i;
}
console.log(sum);
</script>
</body>
</html>
网友评论