大家好, 我是'bukuaile' 今天给大家带来js基础的知识~
1.1 js三个组成部分
-
ECMAScript - JavaScript的核心
ECMAScript定义了JavaScript的语言规范
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
-
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
-
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等1.2 js三种书写位置
1.2 js三种书写位置
JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.行内样式：不推荐，因为不便于维护
<button onclick="window.alert('js行内写法')">欢迎来到美丽的中国</button>
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
<script >alert("这是JS内联样式")</script >
3.外部样式：写在js文件中，使用script的src属性导入
<script src="./01-JS外联写法.js"></script>
1.3-输入与输出语句
//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");
//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到美丽的中国");
//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("中国最牛逼的");
//输入语句1：在网页弹出一个输入框，可以用来输入数据
prompt("深圳的前端平均薪资是多少呀？");
02-数据类型
1.1-五种基本数据类型
<script>
/*
1. js五种基本类型语法
2. string number boolean undefined null 类型作用
*/
//1. string类型 : 字符串 一切以 单引号'' 双引号"" 反引号``包起来的内容
//作用 : 用于展示文本
console.log("程序员")
console.log("武汉前端")
console.log(`颜值担当`)
console.log('我"爱"前端')//嵌套字符串
//2. number类型 : 数值 一切数学中的数字。
//作用 : 用于数学计算
console.log(123) //整数,默认正整数
console.log(-123) //负数
console.log(9.9) //小数
console.log(Infinity) //特殊数值,无穷大
//3. boolean类型 : 布尔 只有两个值 : true(真) false(假)
//作用 : 用于条件判断 true:条件成立 false:条件不成立
console.log(true)
console.log(false)
//4. undefined : 未定义 只有一个值 undefined
console.log( undefined )
//5. null : 空值 只有一个值 null
console.log( null )
</script>
1.2-typeof检测数据类型
<script>
//(1) typeof 数据 (2) typeof (数据)
//语法结果：得到一个字符串来告诉你这个数据是什么类型。
console.log( typeof 123 )//'number'
console.log( typeof '123' )//'string'
console.log( typeof true )//'boolean'
console.log( typeof undefined )//'undefined'
console.log( typeof null )//'object'
</script>
<script>
//变量作用： 在内存中存储数据
//1.声明变量 ： 在内存中开辟一个空间
let age
//2.变量赋值
// = : 赋值运算符（把右边的数据放入左边的变量中）
age = 18
//3.变量取值 ： 读取变量(容器)中存储的数据
document.write( age )
//变量可以在声明的时候赋值
let name = '班长'//等价于 (1) let name (2)name = '班长'
document.write( name )
</script>
1.2-常量
<script>
/*
变量 : 值可以修改, 使用let声明
常量 : 值不可以修改,使用const声明
* 例如 let G = 9.8 let PI = 3.14
*/
//变量可以修改值
let age = 18
age = 19
console.log(age)
//常量不可以修改值
const G = 9.8
G = 10//程序报错
console.log(G)
</script>
04-运算符与表达式
<script>
/*
1.运算符 : 有运算作用的符号
2.算术运算符 : 用于 数学算术运算
+ - * / %(求模运算,相当于取余数)
3.表达式 : 由运算符组成的式子
4.算术表达式 ： 由算术运算符组成的式子 例如 1+1
重点： 任何表达式,都一定会有运算结果
*/
//将表达式的结果存入变量
let num = 1 + 1
console.log(num) //2
//直接打印表达式结果
console.log(10 - 1) //9
console.log(10 % 3) // 10除以3, 余数 1
</script>
1.2-赋值运算符
<script>
/*赋值运算符
= += -= *= /= %=
*/
//+=
let num1 = 10;
num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
console.log ( num1 );//20
//-=
let num2 = 70;
num2 -= 10; //相当于 num2 = num2 - 10;
console.log(num2);//60
//*=
let num3 = 20;
num3 *= 4; //相当于 num3 = num3 * 4;
console.log(num3);//80
// /=
let num4 = 90;
num4 /= 3;//相当于 num4 = num4 / 3
console.log(num4);//30
let num5 = 10;
num5 %= 3; // num5 = num5 % 3;
console.log(num5);//1
</script>
1.3-自增自减运算符
<script>
//1.自增运算符 ++
//自增表达式: num++
let num1 = 10;
num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
console.log ( num1 );//11
//2.自减运算符 --
//自减表达式： num--
let num2 = 20;
num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
console.log ( num2 );//12
</script>
1.4-关系运算符
<script>
/**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
* 八种： > >= < <= == != ===全等 !== 不全等
* 2.关系表达式：由关系运算符组成的式子 例如: 2 > 1
* 只要是表达式，就会有运算结果
* 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
*/
//1.基本使用
console.log ( 5 > 3 );//true 成立
console.log ( 100 < 1 );//false 不成立
//2.相等与不等:只比较数据的值，不比较数据的类型
//注意：一个 = 号表示赋值运算符 两个 == 是比较运算符，它们作用不一样，不要搞混淆了
console.log ( 1 == 1 );//true 常用
console.log ( "1" == 1 );//true 他们的值一样，只是数据类型不一样
//3.全等不全等： 先比较数据的值，再比较数据的类型
console.log ( "1" === 1 );//false 两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立
</script>
1.5-逻辑运算符
<script>
/*
0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
1.逻辑运算符：多个条件之间的关系
2.逻辑运算符只有三种
* && :逻辑与 ，读作并且
* || :逻辑或，读作或者
* ! :逻辑非，读作取反
* true（真）变false（假），false（假）变true（真）
* 3.逻辑表达式: 表达式1 逻辑运算符 表达式2
*/
//1.逻辑与&&结果： 一假为假 （左右两边同时成立，才为真，否则为假）
//表达式1 && 表达式2 运算结果
//真 真 真
//真 假 假
//假 真 假
//假 假 假
console.log ( 100 > 50 && 10 > 9 );//true 左右两边同时成立
console.log ( 100 > 500 && 10 > 9 );//false 因为左边不成立
//普通丈母娘找女婿 ： 有房 有车 有存款 三个条件都要满足，缺一不可
//2.逻辑或 ||结果 : 一真则真 （左右两边同时为假，才为假，否则为真）
//表达式1 || 表达式2 运算结果
//真 真 真
//真 假 真
//假 真 真
//假 假 假
console.log ( 100 > 500 || 10 > 9 );//true 只要有一边为真则为真
console.log ( 100 > 500 || 8 > 9 );//false 只有两边都不成立才为假
//我的丈母娘找女婿 ： 要么有房 要么有车 要么有存款 三个条件满足任何一个即可
//3.逻辑非！ ： 又叫做取反 真变假 假变真
// ！ 表达式 结果
// 假 真
// 真 假
let res = !false;
console.log ( res );//true 假变真，真变假
console.log ( ! ( 2 > 1 ) );//false 2>1的结果是true 与true相反的就是false
//有的丈母娘找女婿 ：只要不是外地的。 `非xxxx`类似于一种否定逻辑
</script>
