一、初始JavaScript
目录
1.输出语句
2.定义变量
3.算术运算符
4.比较运算符
5.逻辑运算符
6.运算符的优先级
7.命名规范
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
在网页中，JavaScript 代码，需要在script标签中定义。
script标签可以放在的网页的任何地方，但是，通常会放到body标签的最下方，
确保JavaScript代码，在网页的内容全部加载完毕后再执行。
1.输出语句
console.log 输出信息
console.warn 输出警告信息
console.error 输出错误信息
console.table 以表格的方式展开对象的成员信息
console.time(name) 开始测试时间
console.timeEnd(name) 结束测试时间
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始JavaScript</title>
</head>
<body>
<!-- 在网页中JavaScript代码需要放置在script标签中运行，script标签可以放置在任何地方，
通常放置在body的最下方，因为JavaScript代码最终的目的是操作DOM，
DOM就是html网页结构，必须要等到DOM加载完毕后，才去执行JavaScript代码 -->
<script>
// 输出语句
console.time('first')
console.log('学习js') //打印消息
console.warn('学习js') //打印警告消息
console.error('学习js') //打印错误消息
console.log('-----------------------------------')
// 定义一个对象
var obj = {
name:'周杰伦',
age:20,
sex:'男'
}
console.log(obj)
console.table(obj) //以表格的方式展开对象的成员信息
console.log('-----------------------------------')
console.timeEnd('first')
// console.time 配合 console.timeEnd 用于测速一段程序的运行时间
</script>
</body>
</html>
控制台显示：
2.定义变量
1.什么变量
就是内存中的一个空间，用于存储数据，数据的种类是不一样的，所以对空间的要求也不一样。
定义不同类型的变量，其实就是定义不同的存储空间，存储不同的数据。
var是定义变量的关键字，定义变量的方式是：var 变量名 = 变量值。
变量名就是变量的标识，用于之后重新获取变量里面保存的值。
注意：js是一门弱类型语言，不像java，C#是强类型语言。
强类型语言，在定义变量的时候，就必须要明确类型，并且之后不能再改变类型。
弱类型语言，在定义变量的时候，不需要明确类型，类型由具体的数据确定，并且之后可以改变类型。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
</head>
<body>
<script>
/* 就是内存中的一个空间，用于存储数据，数据的种类是不一样的，所以对空间的要求也不一样。
定义不同类型的变量，其实就是定义不同的存储空间，存储不同的数据。 */
// var是定义变量的关键字，定义变量的方式是：var 变量名 = 变量值。
// 变量名就是变量的标识，用于之后重新获取变量里面保存的值。
var username = '张三'
var age = 20
// 定义变量的目的：一份数据暂时不需要使用，之后可能需要使用，这个时候会采用变量先将数据保存起来，
// 等需要用的时候，通过变量名就可以直接获取变量里面保存的数据。
console.log(username);
console.log(age);
console.log('------------------');
// 打印username的类型
console.log(typeof username); //string是字符串类型
// 打印age的类型
console.log(typeof age); //number是数字类型
console.log('------------------');
// 重新对变量赋值
username = 30
age = '李四'
console.log(typeof username)
console.log(typeof age)
/*
注意：js是一门弱类型语言，不像java，C#是强类型语言。
强类型语言，在定义变量的时候，就必须要明确类型，并且之后不能再改变类型。
弱类型语言，在定义变量的时候，不需要明确类型，类型由具体的数据确定，并且之后可以改变类型。
*/
</script>
</body>
</html>
控制台显示：
2.类型
number是数字类型，注意：在js中，整型和浮点型的数据都是number类型。
string是字符串类型，由一对双引号 或 单引号 引起来的数据都是字符串。
boolean是布尔类型，布尔类型用于表示：真 或 假。只有两个属性值：true 和 false。
undefined是未定义类型，变量已经定义，但是还没有赋值。
object是对象类型，用于定义复杂的数据格式。
null是空类型，用于表示空对象，所以，null本质上也是object类型，但是不具有object默认的属性和行为。
symbol是ES6新增了一个数据类型，用于确定一个唯一的数据，通常用于给对象添加唯一的属性 或 方法。
ES6指的是ECMAScript2015之后的版本
注意：在js中，每条语句采用分号结尾，分号可以省略。
总结：在js中，数据类型一共有7个。
分别是：number(数字类型)，string(字符串类型)，boolean(布尔类型)，undefined(未定义类型)，
object(对象类型)，null(空对象类型)，symbol(唯一值类型)。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型</title>
</head>
<body>
<script>
// 提示：在js中一条语句的结束符是：分号。可以省略。
// number是数字类型，注意：js中不区分整型和浮点型，统称为：数字类型
var num1 = 100
// typeof关键字，用于返回一个变量的数据类型
console.log(typeof num1);
var num2 = 55.5
console.log(typeof num2);
// string是字符串类型，注意：js中双引号 和 单引号的数据，都表示字符串数据
var str1 = "Hello World";
console.log(typeof str1);
var str2 = '你好 世界'
console.log(typeof str2);
// boolean是布尔类型，用于表示：真、假，只有两个属性值：true表示真，false表示假
var isOK1 = true
console.log(typeof isOK1);
var isOK2 = false
console.log(typeof isOK2);
// undefined是未定义类型，变量已经定义，但是还没有赋值
var abc;
console.log(typeof abc);
// object是对象类型，用于定义复杂的数据格式
var obj = {}
console.log(typeof obj);
// null是空类型，用于表示空对象，所以，null本质上也是object类型，但是不具有object默认的属性和行为。
var obj2 = null
console.log(typeof obj2);
// symbol是ES6新增了一个数据类型，用于确定一个唯一的数据，通常用于给对象添加唯一的属性 或 方法。
var cba = Symbol('你好')
console.log(typeof cba);
</script>
</body>
</html>
控制台显示：
3.算术运算符
算术运算符：+ - * / %
注意：字符串 + 任何数据 都是拼接，重新返回新的字符串。
表达式是从左往右执行，当遇到字符串时，整个表达式才当做字符串处理。
除法运算，除法会保留小数。
parseInt()函数，用于取整数，注意：并不是四舍五入，而且去掉小数。
简写形式：
b += a //b = b + a
b -= 10 //b = b - 10
b *= 2 //b = b * 2
b /= 5 //b = b / 5
b %= 3 //b = b % 3
num++ // num = num + 1
++num //num ++可以放在变量的后面，也可以放在变量的前面
++在变量的后面，表示先返回变量的原值，再加1
++在变量的前面，表示变量的值先加1，再返回变量的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>算术运算符</title>
</head>
<body>
<script>
// 算术运算符包括：+ - * / %
var num1 = 59
var num2 = 6
var s1 = num1 + num2
console.log(s1);
var s2 = num1 - num2
console.log(s2);
var s3 = num1 * num2
console.log(s3);
// 注意：在js中，除法会保留小数
var s4 = num1 / num2
console.log(s4);
// % 是取余运算符，用于获取两数相除后的余数。
// 59 除以 6 商是 9 余数是 5
var s5 = num1 % num2
console.log(s5);
// parseInt()函数，用于将数字取值，去掉所有的小数
var s6 = parseInt(num1 / num2)
console.log(s6);
console.log('-----------------------------');
// 定义一个变量，值是5678，计算出该数据中，每一位数之和，返回千位数+百位数+十位数+个位数
var num = 5678
var qian = parseInt(num / 1000) //获取千位数
var bai = parseInt(num % 1000 / 100) //获取百位数
var shi = parseInt(num % 100 / 10) //获取十位数
var ge = num % 10 //获取个位数
var he = qian + bai + shi + ge
console.log(he);
</script>
</body>
</html>
控制台显示：
4.比较运算符
比较运算符：> >= < <= == != ===(全等于，恒等于) !==(恒不等于)
使用比较运算符的表达式是比较表达式，比较表达式返回的数据类型是boolean类型
注意：采用==比较两份数据是否相等，只比较值，不比较类型。
注意：采用===比较两份数据是否相等，值要相等，类型也要相等。
注意：采用!=比较两份数据是否不相等，只比较值，不比较类型。
注意：采用!==比较两份数据是否不相等，值不相等或者类型不相等。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>算术表达式的简写形式</title>
</head>
<body>
<script>
var num1 = 59
// num1 = num1 + 6
// 简写
num1+=6 //num1 = num1 + 6
console.log(num1);
num1-=7 //num1 = num1 - 7
console.log(num1);
num1*=2 //num1 = num1 * 2
console.log(num1);
num1/=4 //num1 = num1 / 4
console.log(num1);
num1%=9 //num1 = num1 % 9
console.log(num1);
console.log('-----------------------');
var num2 = 5
// num2 += 1
// 如果是对一个变量进行加减1，还可以再简化
num2++ // 相当于 num2+=1 => num2 = num2 + 1
console.log(num2);
// ++可以再后，也可以在前
++num2
console.log(num2);
num2-- // 相当于 num2-=1 => num2 = num2 - 1
console.log(num2);
// --可以再后，也可以在前
--num2
console.log(num2);
console.log('-----------------------');
// ++ 在前和在后，有什么区别
var num3 = 5
// ++ 在后是先返回原值，再加1
console.log(num3++); // 打印5
console.log(num3); // 打印6
// ++ 在前是先加1，再返回新值
console.log(++num3); // 打印7
console.log(num3); // 打印7
console.log('-------------------------------');
var num4 = 7
var num5 = 3
// 7 + 7 + 3 - 3 - 7 + 4
var num6 = num4-- + ++num4 + num5++ - --num5 - num4-- + ++num5;
console.log(num6);
</script>
</body>
</html>
控制台显示：
5.逻辑运算符
逻辑运算符：&&（并且） ||（或者） !（取反）
|| 是或运算符，左右两个表达式，其中一个返回true，整个表达式返回true
&& 是与运算符，左右两个表达式，都返回true，整个表达式才返回true
! 是非运算符，用于将表达式的值取反值，如果表达式返回true，取反就是false
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>比较运算符(关系运算符)</title>
</head>
<body>
<script>
// 比较运算符：> >= < <= == != ===(恒等于) !==(恒不等于)
// 比较运算符，也称之为：关系运算符
// 使用了关系运算符的表达式，称之为：关系表达式，关系表达式的返回值是boolean类型
var num1 = 5
var num2 = 3
var num3 = 5
var num4 = '5' //字符串数据
var s1 = num1 > num2
console.log(s1);
var s2 = num1 >= num3
console.log(s2);
var s3 = num1 < num2
console.log(s3);
var s4 = num1 <= num3
console.log(s4);
var s5 = num1 == num2
console.log(s5);
var s6 = num1 != num3
console.log(s6);
console.log('--------------------');
//注意：==号，只比较值，不比较类型
var s7 = num1 == num4
console.log(s7);
// 注意：===号，既要比较值，也要比较类型
var s8 = num1 === num4
console.log(s8);
// 注意：因为值是相同的，所以返回false
var s9 = num1 != num4
console.log(s9);
// 注意：因为类型不同，所以返回true
var s10 = num1 !== num4
console.log(s10);
</script>
</body>
</html>
控制台显示：
6.运算符的优先级
运算符的优先级：() > 算术运算符 > 关系运算符 > ! > && > ||
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符</title>
</head>
<body>
<script>
// 逻辑运算符：&&(与运算符) ||(或运算符) !(取反运算符)
var b1 = true
var b2 = false
// &&(与运算符)，表示并且，左右两个表达式的值都是true，整个表达式返回true，否则返回false
var s1 = b1 && b2
console.log(s1);
// ||(或运算符)，表示或者，左右两个表达式的值有一个是true，整个表达式返回true，两个都是false，整个表达式返回false
var s2 = b1 || b2
console.log(s2);
// !(取反运算符)，取表达式的反值。
var s3 = !b1
console.log(s3);
var s4 = !b2
console.log(s4);
console.log('--------------------------------');
// 运算符的优先级：() > 算术运算符 > 关系运算符 > ! > && > ||
var num1 = 5
var num2 = 3
var num3 = 5
// 当表达式比较复杂值，使用()去确定优先级。
var s5 = (num1 > num2 && num2 > num3) || (num1 == num3 && (num2 + 3) <= num3)
console.log(s5);
</script>
</body>
</html>
控制台显示：
7.命名规范
变量里面保存的是一份数据，为了方便将来获取里面存储的数据，变量名命名一定要规范。
就是看到变量名就知道里面存储的是什么数据。（见名知意）
在JS中，变量名的规范有：
只能使用：字母、数字、_、$ 做为变量名称。
数字不要开头：例如 var 1a= 100（错误）
不能使用JS的关键字：例如var、let 、const 等关键字，var var = 100（错误）
多个单词组成的变量名，要使用驼峰命名法，第一个单词的首字母小写，其余单词的首字母大写。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命名规范</title>
</head>
<body>
<script>
/*
变量里面保存的是一份数据，为了方便将来获取里面存储的数据，变量名命名一定要规范。
就是看到变量名就知道里面存储的是什么数据。（见名知意）
在JS中，变量名的规范有：
1.只能使用：字母、数字、_、$ 做为变量名称。
2.数字不要开头
3.不能使用JS的关键字
4.多个单词组成的变量名，要使用驼峰命名法，第一个单词的首字母小写，其余单词的首字母大写。
*/
var name = '张三'
console.log(name);
var name2 = '李四'
console.log(name2);
var _age = 20
console.log(_age);
var $sex = '女'
console.log($sex);
//不是使用js的关键字
// var var = 100
//这是规范命名
var myFirstName = '张'
console.log(myFirstName);
//这是不规范命名
var mylastname = '杰'
console.log(mylastname);
//这是不规范命名，变量名要有意义，见名知意
var abc = '小明'
console.log(abc);
</script>
</body>
</html>
控制台显示：
