JavaScript 01
今日目标：javaScript基础认知、数据类型、变量&常量、运算符&表达式
一、javaScript基础认知
1.javaScript概念
负责网页的动效与交互，是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
作用：
网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据,渲染到前端)
组成结构：
DOM操作文档，对页面元素进行控制 BOM浏览器对象模型
2.javaScript书写位置
对比CSS
三种引入方式：
1.行内js 代码写在标签内部 vue阶段使用较多
<!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>Document</title> </head> <body> <button onclick="alert('所有的惊喜我都留在后面呢！')">点击我，给你惊喜！</button> </body> </html>
2.内部js用script标签中（不带src属性），写在body标签底部，结束标签上（放在底部是因为标准流执行代码是从上到下执行的，只有在下面才可以获得到数据）
<!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>Document</title> </head> <body> <script> alert('你好，欢迎看我的博客~') </script> </body> </html>
3.外部js 通过script src引入（注意：引用外部的script中不能（在html页面中）写代码,会执行外部引用的，内部的不执行）
<!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>Document</title> </head> <body> <!-- 外联 --> <script src="./my.js"> //下面这条命令不会被执行 alert('你好，欢迎看我的博客~') </script> </body> </html>
3.js注释
单行 // 快捷键：ctrl+/ 块注释： / * */ 快捷键：alt+shift+a
注释的作用：方便程序员查看代码和理解代码，注释之后的内容不会被浏览器解析
4.javaScript结束符
符号是英文的； 代表语句的结束。
js引擎在执行语句代码时，默认是可以在一行显示，但是要以分号分隔。不打分号，我们要换行，js引擎解析时候会默认为;号
实际开发中可以加分号 也可以不加，需要按照团队进行判断和添加。
5.输入和输出语法
什么是语法：人和计算机打交道的规则约定
输出语句
语法1： 可以向body内输入内容 document.write（‘hello js’）
语法2：页面弹出提示框 alert(‘你必拿下’)
语法3：console.log(‘控制台打印输出’)
<!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>Document</title> </head> <body> <script> document.write('hello js'); alert('你必拿下'); console.log('控制台才可以看到'); </script> </body> </html>
代码的执行先alert 才看的到页面中显示的hello js
输入语句
语法1：在页面弹出对话框，提示用户输入内容 promet(‘在这里输入内容’)
<!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>Document</title> </head> <body> <script> prompt('我们必将成功对不对！'); </script> </body> </html>
二、数据类型
1.数据类型概念
因为js不能识别所有的数据类型,任何变成语言编译器不同。都有属于自己的数据类型，编译器会进行分类，分类之后的数据成为数据类型。
分类原因：更加充分和高效的利用内存
数据细分：
1.数字型 number类型 整数，小数，分数，正数。用于数据计算
2.字符串类型 string类型 ’‘ ‘’ ‘’ 包裹起来的字符串类型，引号可以是嵌套的
3.布尔类型boolean 只有true 与false(用于判断)
4.undefined 未定义 固定的值 表示没有值，值不存在
5.null空值
<!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>Document</title> </head> <body> <script> //1. 数字型 number类型 整数，小数，分数，正数 console.log(777); // 用于数据计算 //2. 字符串类型 string类型 ’‘ '' '' 包裹起来的字符串类型 // 引号可以是嵌套的 console.log("今天必须到23.30才'回去"); console.log("111"); //3. 布尔类型boolean 只有true 与false(用于判断) console.log(true); // 4.undefined 未定义 固定的值 表示没有值，值不存在 console.log(undefined); //5.null空值 console.log(null); </script> </body> </html>
控制台console中查看
2.通过typeof查看数据类型
<!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>Document</title> </head> <body> <script> //1. 数字型 number类型 整数，小数，分数，正数 console.log(typeof 777); // 用于数据计算 //2. 字符串类型 string类型 ’‘ '' '' 包裹起来的字符串类型 // 引号可以是嵌套的 console.log( typeof "今天必须到23.30才'回去"); console.log( typeof "111"); //3. 布尔类型boolean 只有true 与false(用于判断) // 使用 typeof 关键字检测数据类型 // 用法1： console.log(typeof true); // 4.undefined 未定义 固定的值 表示没有值，值不存在 console.log(typeof undefined); //5.null空值 console.log(typeof null); </script> </body> </html>
就是在输出前面加上typeof 即可查看数据的类型
三、常量&变量
1.变量是什么？
变量是计算机用来存储数据的容器
2.变量的基本使用
1.变量的使用：
先声明变量，后就可以对变量进行赋值操作
声明变量：let 变量名
两部分构成：声明关键字、变量名（标识）
变量的赋值； 变量名=值 （值给变量）
变量的优化写法： let 变量名=值
2.变量的连写
let age = 18, sex = ‘女’, name = ‘坤坤’
中间用空格隔开即可，
推荐写法：
//一行定义一个变量 let age = 18 let sex = ‘女’ let name = ‘坤坤’
3.变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在计算机内存中申请存放的一个存放数据的储存空间
变量值的判断案例
<!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>Document</title> </head> <body> <script> // 使用变量保存数据 // let name = prompt('请输入你的姓名') // document.write(name) // console.log(name); while (true) { // prompt('输入你的姓名')前加上+就是将输入的值转化为了数值型 let uname = prompt('请输入我们的暗号') // 两个==代表输入内容相等的时候 ===代表全等的时候 if (uname === 123) { document.write(`${uname}，暗号正确！`) break } else { alert('请输入正确的暗号！') } } </script> </body> </html>
数值交换案例
<!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>Document</title> </head> <body> <script> // 作用原理:使用另外一个变量接受数据作为临时变量,之后将临时值赋值给需要变化的变量 let num1 = 10; let num2 =20; let temp =num1; num1 = num2; num2 = temp; document.write(num1,num2) </script> </body> </html>
常量是什么？
就是不可以变化，不可以被修改的量。在javaScript中用const代表常量。
举个第二天的例子
4.变量的命名和规范
规则：
不能用关键字(关键字：有特殊含义的字符)
1.1 JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量
命名需要有语义化
推荐使用小驼峰命名法（连写单词，第二单词首字母大写）
拓展let 与 var 的区别（了解）
1.var可以先使用，再声明。let先使用会报错
2.var可以重复定义的。let不可重复重复变量
3.var没有块级作用域，let定义的变量有作用域
5.常量
常量概念：不能变化的值，是一个固定值
与变量的区别：常量的值无法改变，强制修改会报错
但是如果在for里面它是一个全新的块级作用域，const不会报错（javaSceipt 05 有这个例子）
<!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>Document</title> </head> <body> <script> // 变量可以重复修改值,常量不可变化 const c =3.1415926 // 最终导出的还是上面的值 c = 10 console.log(c) </script> </body> </html>
四、运算符&表达式
概念：
运算符：可以用来运算的符号 + - * /
表达式：由运算符组成的式子，是一段可以用来求值的代码
<!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>Document</title> </head> <body> <script> let a = 10; // 数字相加 console.log(a + 10); </script> </body> </html>
1.算数运算符 + - * / %（具体运算参考小学二年级）
注：取一般用来判断是否被整除
拓展:连接符(+)：
数字相加计算，字符串相加为拼接（注意括号里面试反引号）
字符串连接案例
<!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>Document</title> </head> <body> <script> let name = prompt('请输入姓名') let age = prompt('请输入年龄') //书写格式：`${变量名}` (注意加上反引号``) document.write(`大家好,我叫${name},今年${age}岁了`) </script> </body> </html>
用户订单案例
注意：table是写在script标签里面，table标签外需要加上反引号``
<!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>Document</title> <style> table { width: 500px; margin: 100px auto; /* 表格合并,表格重复的边框显示单个 */ border-collapse: collapse; text-align: center; } table, tr, th, td { border: 1px solid #000; } </style> </head> <body> <script> let price = prompt('请输入商品的价格:'); let amount = prompt('请输入商品的数量:'); let address = prompt('请输入所在地址'); let total = price * amount; console.log(price.amount, address, total); // document.write写多项数据使用反引号 document.write(`<table> <caption> <h2>商品订单</h2> </caption> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收获地址</th> </tr> <tr> <td>Macboobair M1</td> <td>${price}</td> <td>${amount}</td> <td>${total}</td> <td>${address}</td> </tr> </table> ` ) </script> </body> </html>
2.赋值运算符 += -= *= /= %
简单点来说就是将语句简化输出，举个例子
<!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>Document</title> </head> <body> <script> //赋值运算符 作用：快速的进行赋值操作 += -= *= /= %= let number =10; number*=5//a= a*5 console.log(number); </script> </body> </html>
3.一元运算符
概念：一个数参与运算，以此类推2个数参与运算就是二元，往后同理
作用：
1.自增 符号++
2.自减 符号–
隐藏操作 ++可前置也可以后置，单独使用没有任何区别
举个栗子
<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>Document</title> </head> <body> <script> let number = 1; // number = number + 1; // number+=1 // 一元写法 number++ console.log(number); // 隐藏操作 ++可前置也可以后置，单独使用没有任何区别 // 前置先自增/自减后输出 let age = 10; console.log(++age+1);//12 // 后置 先输出再自增/自减 // console.log(age+++1);//11 // console.log(age);//11 </script> </body> </html>
4.比较运算符（> < >= <= != !==）
使用场景：比较两个数据大小是否相等
返回结构：都是布尔型数据只有true与false
举个栗子
<!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>Document</title> </head> <body> <script> // 使用场景：比较两个数据大小是否相等 // 返回结构：都是布尔型数据只有true与false console.log( 1 > 2);//false console.log(150>= 100);//true // 一个等号是赋值 // console.log(150 ='150');//报错 // 两个等号是比较值 console.log(150== '150' );//true // 三个等号是全等,看值和类型 console.log(1 ==='1');//false // !=比较的是值 !==比较的是值和类型 console.log(12!==13);//true console.log(12!='12');//false console.log(12!=='12');//true // 拓展面试题:字符串比较的是ASCLL码 // 小写的a为97大写的A为65,a-z递增 // null 和 undefined的值相等，类型不相等 console.log(null == undefined);//true console.log(null === undefined);//false </script> </body> </html>
5.逻辑运算符
使用场景：处理多重条件判断的时候
返回值：布尔类型 true和false
`<!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>Document</title>` `</head>` `<body>` <script> `// 逻辑与&& 一假则假（全部满足）` `console.log(true && false);//false` `console.log(1 !='1' && 2 ==='2');//false` `// 逻辑或|| 一真则真（满足一个就可以）` `console.log(false || true);//true` `console.log('a' ==='a' || 2>5);//true` `// 逻辑非！ 取反` `console.log(!false);//true` `</script>` `</body>` `</html>`
