JavaScript 01 javaScript基础认知/数据类型/运算符
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
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定义的变量有作用域
3.常量
常量概念：不能变化的值，是一个固定值
与变量的区别：常量的值无法改变，强制修改会报错
但是如果在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>`
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |