大家好, 我是'菜鸟' 今天给大家带来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>
03-变量
-
变量的作用
- ==将数据存储在内存中==
-
变量原理:内存中一块存储数据的空间
-
1.1-变量声明/取值/赋值
<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>
以上是今天的js基础内容, 咱们下期见~
-