CSS的三种书写方式
<!-- 内部模式 -->
<script>
alert('hello 70')
</script>
<!-- 外部模式 -->
<script src="js/我的第一个js文件.js">
alert('我就是玩儿')
</script>
<!-- script标签有了src之后: 内部不能写代码(不会执行) -->
<!-- 内联模式(行内) -->
<button onclick="alert('我是内联模式')">点我</button>
注意事项：
书写的位置尽量写到文档末尾 </body> 前面
外部 js 标签中间不要写代码，否则会被忽略
--------------------------------------------------------------
JavaScript 注释
<script>
// 单行注释
符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A
</script>
-----------------------------------
结束符
但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）
alert(1); alert(1)
alert(2); alert(2)
---------------------------------------------------------------------
JavaScript 输入输出语法
<script>
// 1. 输出: document.write('内容'), 向body输出
document.write('你好,js')
// 特点: 可以有标签
document.write('<span>我是小马哥</span>')
// 2. 控制台输出: console.log('内容'), 给程序员看的
console.log('控制台输出')
// 3. 输入数据: prompt('提示信息')
// prompt('请输入你的名字')
// 如何输出用户输入的内容呢?
console.log(prompt('请输入你的名字'))
// 先接收用户输入的内容: 然后控制台输出
document.write(prompt('请输入你的名字'))
</script>
--------------------------------------------------
字面量
我们工资是： 1000 此时 1000 就是 数字字面量
'黑马程序员' 字符串字面量
-------------------------------------------------------------------
变量
<script>
// 1. 声明变量: let 变量名
let name
let age
// 2. 变量赋值: 变量名 = 值
name = '小马哥'
age = 18
document.write(name)
// 取出name变量中保存的数据: '小马哥', 输出到body
console.log(name)
console.log(age) // 变量的寻找: 向前找
// 变量的价值: 保存数据(一份), 可以重复使用
// 3. 变量声明和赋值
let gender = '男'
// 声明了一个容器: gender, 里面存放了一个字: '男'
document.write(gender)
// 4. 变量的修改: 变量名 = 新值 (特别注意: 重新赋值 不要let了)
age = 19
console.log(age)
</script>
----------------------------------------------
用户输入改变变量
// 需求: 用户输入名字, 然后输出到页面
// 1. 用户输入: 保存到变量
let name
name = prompt('请输入你的名字')
// 2. 输出
document.write(name)
------------------------------------
变量命名与规范
<script>
// 规则: 必须遵守
// 1.1 关键字不能当做名字
// let let
// let is disallowed as a lexically bound name
// 1.2 组成: 数字\字母\下划线\$都可以, 数字不能开头
// let 1a_$
// Invalid or unexpected token
// 1.3 严格区分大小写
let a, A
// 规范: 不报错, 容易挨揍
// 2.1 见名知意
let username
// 2.2 小驼峰: 多个单词, 除了第一个单词, 其他首字母大写
let heiMaChengXuYuan
let blackHorseProgrammer
</script>
----------------------------
变量数组简单了解
<script>
// 数组: Array, 数据组合,一个变量,可以同时保存多个数据(顺序)
let arr = []
console.log(arr)
// 数组里面的每个数据: 元素
let arr1 = ['陈辉', '李磊', '杨康', '成世民', '刘明']
console.log(arr1)
// 数组访问: 一次只能取出里面的 一个 数据: 数组名[下标]
arr1[0]
console.log(arr1[0]) // 第一个元素
console.log(arr1[4])
// 案例: 计算星期
let day = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
console.log(day[6])
// 查看数组长度: length属性, 数组.length
console.log(day.length)
</script>
--------------------------------------------------------
数据类型 基本数据类型
<script>
// 1. 数字型(number): 正负数\整数和小数
let num1 = 1 // 正整数
let num2 = 1.23 // 小数
let num3 = -1 // 负数
console.log(num1, num2, num3)
// 数字: 在控制台输出是蓝色
// 2. 字符串(string): 只要有引号, 一定是字符串: 单引号'' 双引号"" 反引号``
let str1 = '中国人'
let str2 = "1"
let str3 = `10亿中国人`
console.log(str1, str2, str3)
// 字符串: 在控制台输出是黑色
// 引号嵌套问题: 使用反斜杠\(转义), 用引号嵌套(外部使用一种, 里面使用另外一种)
let str4 = 'I\'m Mark'
let str5 = "I'm Mark"
console.log(str4, str5)
// 字符串合并: +
console.log(str1 + str2)
</script>
------------------
字符串
<script>
// 需求: 定义两个变量, 一个保存姓名(字符串), 一个保存年龄(数字)
// 输出: 我叫 XXX, 今年 XX 岁
let name = '小马哥'
let age = 33
// 因为字符串有5部分: 需要拼接
// console.log('我叫' + name + ',今年' + age + '岁')
// 模板方法: `` 中间放变量的使用: ${}
console.log(`我叫 ${name}, 今年 ${age} 岁`)
document.write(`<span>${name}</span>`)
</script>
-------------------------------------------------
布尔类型
<script>
// 布尔: 代表真假(是否), 只有true和false
let b1 = true
let b2 = false
console.log(b1, b2)
// 控制台输出: 蓝色
</script>
-------------------------------------------------
检测类型
<script>
let num = 1
let str = 'abc'
let bl = true
let un
let nu = null
// typeof检测数据类型, 得到数据对应的英文描述
// 语法: typeof 变量 typeof(变量)
typeof num
console.log(typeof num) // number
console.log(typeof str) // string
console.log(typeof bl) // boolean
console.log(typeof un) // undefined
console.log(typeof nu) // object(对象)
// 未来使用
// if (typeof num === 'number') {
// // 说明: num中存的是数字
// console.log(num + 1)
// } else {
// // 说明: num不是数字
// console.log(`${num}不是一个数字,请重新输入`)
// }
</script>
-----------------------------
数据类型转换
<script>
// prompt()接收到的数据一定是字符串
// let user = prompt('请输入你的年龄')
// console.log(user)
// 隐式转换: 系统内部转换(自动转换)
// +: 两边如果出现字符串, 最终都会成为拼接运算( 把另外一种非字符串的变成字符串 )
console.log('100' + 10)
// 其他数学运算: - * / %(取余), 会将其他类型转成数字
console.log('100' - 10)
// 变量之前放一个+, 可以将数据强制变成数字类型(显式转换: 代码更加安全)
let str = '100'
let num = 10
console.log(str + num)
console.log(+str + num)
</script>
------------------------------------
数据显式转换
<script>
// 1. 字符串转数字: Number(字符串), 出来的是数字
console.log(Number('123')) // 123 数字
console.log(Number('123px')) // NaN 数字(代表不是数字)
// 规则: 如果字符串去掉引号是一个有效数字, 就可以变成数字; 否则就是NaN
console.log(Number('')) // 0
// parse系列转数字: 专门针对 css中带单位的字符串数据(WebAPIs使用很多)
// parseInt()转整数
// parseFloat()转小数
console.log(parseInt('123')) // 123
console.log(parseInt('123px')) // 123
console.log(parseInt('123.123px')) // 123
console.log(parseFloat('123.123px')) // 123.123
// 规则: 必须以数字开头, 到有效数字截止
// 2. 转字符串: String(数据) 变量.toString()
let num = 100
let bl = true
console.log(String(num))
console.log(String(bl))
console.log(num.toString())
console.log(bl.toString())
// 变字符串规则: 数据 + 引号 即可
let num1 = prompt('请输入数字') // 10
let num2 = prompt('请输入数字') // 20 字符串
console.log(Number(num1)) // 10
console.log(Number(num2)) // 20 数字: 改变只是当时有效, 不会影响数据本身
// 如果想修改变量: 给变量重新赋值
num1 = Number(num1)
num2 = Number(num2)
console.log(num1 + num2) // 1020 字符串
</script>
