数据类型
1.1-数据类型介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.为什么需要有数据类型？
* 每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
2.什么是数据类型？
* js编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。
*/
console.log( '123' )//打印 黑色 123
console.log( 123 )//打印 蓝色 123
console.log( 'true' )//打印 黑色 true
console.log( true )//打印 蓝色 true
console.log( '武汉前端' )//打印 武汉前端
console.log( 武汉前端 )//程序报错 Uncaught ReferenceError: 武汉前端 is not defined
</script>
</body>
</html>
1.2-五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//1. string类型 : 字符串 一切以 单引号'' 双引号"" 反引号``包起来的内容
//作用 : 用于展示文本
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>
</body>
</html>
1.3-typeof检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<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>
</body>
</html>
变量
问题1：为什么要学习变量？
-
需求：弹出一个输入框，让用户输入自己的年龄，我们
如何拿到用户输入的数据，并且显示在网页呢？- 使用变量就可以获取到用户输入的数据
问题2：变量的作用？
- ==将数据存储在内存中==
问题3：变量原理
- 变量原理：内存中一块存储数据的空间
1.1-变量声明/取值/赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//变量作用： 在内存中存储数据
//1.声明变量 ： 在内存中开辟一个空间
let age
//2.变量赋值
// = : 赋值运算符（把右边的数据放入左边的变量中）
age = 18
//3.变量取值 ： 读取变量(容器)中存储的数据
document.write( age )
//变量可以在声明的时候赋值
let name = '班长'//等价于 (1) let name (2)name = '班长'
document.write( name )
</script>
</body>
</html>
1.2-变量使用注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
1.变量作用 ： 在内存中存储数据
2.变量语法：
2.1 声明变量 ： let 变量名;
2.2 变量赋值 : 变量名 = 值;
2.3 变量取值 : 变量名
3.变量使用注意点：
3.1 变量不能重复声明，程序会报错
3.2 变量重复赋值，会先销毁旧值，然后存入新值
3.3 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值
*/
//声明变量并且赋值
let num1 = 10;
/* 注意点1 ： 变量不能重复声明，否则程序会报错 */
// let num1 = 20;
/* 注意点2 ： 变量重复赋值，会先销毁旧值，然后存入新值 */
num1 = 20;
/* 注意点3 ： 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值 */
let num2 = num1;
console.log(num1,num2);
</script>
</body>
</html>
1.3-变量命名规则与规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
1.变量(letiable)作用 ： 在内存中 存储数据
2.变量语法
a. 声明变量 ： let 变量名;
b. 变量赋值 ： 变量名 = 值
c. 变量取值 : 变量名
2.变量补充说明
a. 变量初始化
语法： let 变量名 = 值;
b. let变量 不允许重复声明
c. 变量重新赋值
语法 : 变量名 = 值;
特点 : 先销毁旧值，然后存入新值
d. 变量的值是另一个变量
语法 : 变量名a = 变量名b
特点 : 将变量b中的数据， 拷贝一份赋值给a
3.变量命名规则
* 3.1规则：必须要遵守，否则会报错。由语法决定
* 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
* 2.不能以JS的关键字作为变量名
* 3.js是严格区分大小写的， 例如：age与Age这是两个不同的变量名
* 3.2规范: 大家都遵守的一种编码习惯，主要是为了提高代码的易读性
* 1.起名要有意义，最好用英语名词作为变量名
* * 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写
*/
//存名字
let name = '坤哥'
//存年龄
let age = 30
//存性别
let gender = '男'
//存女朋友
let girlFriend = '代码'
</script>
</body>
</html>
1.4-变量练习：交换两个变量的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//需求：交换两个变量里面的值
let num1 = 10
let num2 = 20
//思考：能否直接交换
// num1 = num2
// num2 = num1
// console.log( num1,num2)//20 20
//正确方式：使用临时变量交换
let temp = num1
num1 = num2
num2 = temp
console.log( num1,num2 )//20 21
</script>
</body>
</html>
1.5-常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<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>
</body>
</html>
1.6-字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
js中的数据有两种使用方法
第一种 : 先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
第二种 : 不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据（字面量是数据）
*/
// name是变量, '张三'是字面量
let name = '张三'
console.log( name )//变量取值,控制台打印'张三'
console.log( '李四' )//字面量(又叫直接量)
//字面量举例
console.log( 123 )//数字字面量
console.log( '123' )//字符串字面量
console.log( true )//布尔字面量
console.log( [10,20,30] )//数组字面量
console.log( {name:'ikun'} )//对象字面量
</script>
</body>
</html>
