一、js
1、js介绍
1、定义：用来实现网页的交互，用来获取后端的数据（网页特效、表单验证、数据交互），一种运行在浏览器的编程语言。
2、结构组成：
<style>
.container {
padding: 10px 30px;
}
</style>
<body>
<div class="container">
<h4>体验 Javascript</h4>
<div class="btns">
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</div>
</div>
<script>
// Web APIs 获取 DOM 元素
let buttons = document.querySelectorAll('button')
let prevButton = null
// ECMAScript 语法遍历 DOM 元素
for(let i = 0; i < buttons.length; i++) {
// Web APIs 为 DOM 添加事件监听
buttons[i].addEventListener('click', function () {
if (prevButton) prevButton.style.backgroundColor = ''
this.style.backgroundColor = 'pink'
prevButton = this
})
}
</script>
</body>
2、js书写位置
2、位置：内部、外部、行内
<style>
.container {
padding: 10px 30px;
}
</style>
<body>
<div class="container">
<h4>Javascript 的书写位置有 3 种情况：</h4>
<ul>
这种方式极少用
<li onclick="alter('内联方式js')">内部 Javascript</li>
<li>外部 Javascript</li>
<li>行内 Javascript</li>
</ul>
</div>
<!-- 1. 内部 Javascript 写在 script 标签内部 (上课期间)-->
<script>
alert('llq！')
</script>
<!-- 2. 外部 Javascript 通过 script 的 src 属性引入外部的 .js 文件(实际项目中代码量非常大) -->
<script src="./test.js"></script>
<!-- 3. 行内 Javascript 可以直接写在 HTML 标签中（了解） -->
新建text.js
alter("我是外部的文件") 这是外部的
2、注意：
(1)、书写的位置尽量写到的前面。
(2)、 引入外部js时，，中间不要写内容，没有效果。
3、js的注释
单行//、多行/* */
ctrl+/、 shift+alt+a
4、js结束符
；
<body>
<div class="container">
<h4>JavaScript 结束符</h4>
<p>结束符用来表示一段代码的结束，使用英文的 ; 其含义类似于”句号“</p>
</div>
<script>
alert('一行代码结束了，需要使用结束符');
alert('一行代码结束了，结束符可以省略')
</script>
</body>
加不加都可以，看开发团队需要
5、js输入输出语法
语法：人和计算机能够正常打交道的规则
<body>
<div class="container">
<h4>JavaScript 的输入和输出</h4>
<p>JavaScript 不仅能接受用户输入的内容，还可将它们输出到页面当中</p>
</div>
<script>
// 1. 输出内容（document会输出到body当中）
document.write('要输出的内容')
alter("要输出的内容")//弹出警告输出
console.log("控制台打印输出!f12")
// 2. 输入内容
prompt("输入你的学号")//出现弹窗输入，由用户输入内容
</script>
终止（结束了）；
中止（中间停下来了）；
6、字面量
计算机将现实中的一些事物描述成字面量
1000 数值字面量
"llq" 字符串字面量
二、变量
1、变量含义
存放东西的容器
2、使用
先声明，后使用
声明变量有两部分：关键字 变量名
let 变量名
<script>
// let 变量名
// 1、表示造了一个容器，书面表达是声明了一个变量
let cup
// 2、将水放到了容器中 为变量cup赋值为水
cup = '水'
// 3、 输出到控制台部分
console.log(cup)
// 在声明变量的时候就可以同时赋值
let age =18
// 相当于let cup; cup="水"
// 变量不允许重复声明,但是可以重复赋值
// 一次声明多个变量
// let 变量名，变量名，...
let name ='小米',gender='女'
</script>
小案列：
<script>
// 2、定义变量，保存用户输入的姓名
let name
// 1、出现弹窗
name = prompt('请输入你的姓名：')
// 3、document.write()
document.write(name)
</script>
<script>
let cup1 = '水'
let cup2 = '牛奶'
console.log(cup1,cup2)
let cup3
cup3 = cup1
cup1 = cup2
cup2 = cup3
// console.log(cup1)
// console.log(cup2)
console.log(cup1,cup2)
</script>
3、变量的本质
计算机存储数据的地方，相当于一个空间，是程序在内存中申请的一块用来存储数据的。
4、变量的命名规范
只能是字母、数字、下划线，而且不能以数字开头
区分大小写、不能重复声明、不能是关键字
<script>
// 变量不能以数字开头
// let 1a
// 字母有大写也有小写
let Age = 18
// 字母严格区分大小写，会有明显的区分，是两个变量 </script>
5、let和var的区别
<script>
// 在js中除了使用let声明变量外，还可以使用var
// var是老语法，let是新语法（ES6）
// 现在推荐使用let
var age; //声明变量
age = 18 //赋值
// 但是要注意var太不严谨了
// 1、能够重复声明
var gender
var gender
// 2、变量提升，如果一个变量在没有声明时就可以使用就是
var str
console.log(str)
str = 123
</script>
6、数组
通过数组可以使一个变量中存储许多数据
<script>
let student1 = '张三'
let student2 = '李四'
// 通过【数组】可以使变量中存储【许多数据】
let students = ['张三', '李四', '小明']
// 控制台输出，索引下标(数组中数据的编号)从0开始
console.log(students[2])
console.log(students[3])
// 索引值：数组中数据的编号，从0开始
// 单元值：数组中的具体数据
// 单元值 小明的索引值：2
// 索引值为3的单元值： 小红
</script>
小练习：
<body>
<div class="container">
<h4>数组访问练习</h4>
<p>定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日。</p>
</div>
<script>
// 1、定义一个数组
let weeks = ['星期一', '星期二', '星期三','星期四','星期五', '星期六','星期日']
// 2、在控制台输出星期日，需要通过索引值获取
console.log(weeks[6])
</script>
</body>
数组可以存很多数据，数组字面量用【】中括号表示，'小米'的下标，names[4]
三、常量
1、常量
常量和变量都是用来存储数据的，也都是存在了内存中
变量所存的数据是可以发生变化的
let age =18
age = 20
age = 30
常量的值一旦存储后就不可以被改变！！！
<body>
<div class="container">
<h4>常量</h4>
<p>常量与变量都是 JavaScript 中用来保存数据的”容器“，区别在于常量保存的数据不允许被修改。</p>
</div>
<script>
// const 常量名 = 值
// 1、常量必须有值
const author = 'itcast'
console.log(author)
// 2、值不允许被改变
author = 'it'
</script>
</body>
关于如何在内存中保存工具3种方式：
1、let 定义变量，如果将数据会发生改变，就用let
2、 var 不推荐使用
3、const 定义常量，数据不发生改变
2、数据类型
需要对数据进行分类
(1)、数值类型number
也可以加入算数运算符
<script>
// 1、数值类型
let age = 18
let price = 12.345
let num = - 20
// 检测类型使用：typeof
// typeof age 先检测什么类型，然后再输出
console.log(typeof age)
</script>
(2)、字符串类型String
<script>
// 2、字符串
// 一般是用来标记文本内容的
let name = '小明'
let abc = 10
'abc' //字符串abc
console.log('abc')
// 类型检测
console.log(typeof name)
// 反引号'
</script>
(3)、布尔类型boolean
<script>
// 3、布尔类型 true false
let isCool = true
isCool = false
console.log(typeof isCool)
</script>
(4)、未定义类型undefined
<script>
// 4、未定义undefined
// 一个变量的类型取决于变量的值！
let xyz = 10
console.log(typeof xyz) //number
xyz = 'hahah'
console.log(typeof xyz) //string
xyz = true
console.log(typeof xyz) //boolean
// 请思考abc是什么类型
let uvw
// 为定义类型
console.log(typeof uvw)
// 也可以明确的给一个变量赋值undefined
let ppp = undefined
</script>
(5)、null空
<script>
// 5、null空
// 如果将来学习原型之后，会讲到【原型链】，它的最顶端有个值，为null
// 一般在定义一个数据时，这个数据将来要存对象类型时，我们会先将它初始化为null
let num1 = null
console.log(typeof null) //object对象
// 从本质上来看，是个对象
// 现在开发中一般不推荐使用null
</script>
3、数据运算符
<script>
// 1、数值类型的运算
let num = 10
// 数值类型的数据可以用来做【加减乘除】的运算
console.log(num + 10) //20
console.log(num - 5) //5
console.log(num * 5) //50
console.log(num / 5) //2
console.log(num % 3) //1
// 凡是能够整除的数，余数为0
// 2、进行数学运算时，需要注意优先级
// 先乘除后加减，计算机中仍然使用
let x = 5
let y = 2
let z = 7
x + 5 * y - z //8
// 括号能够提升【优先级】
(x + 5) * y - z //13
// 将来你想要先计算谁，你就给它加括号
// 3 % 7 余数等于3 0余3
// 10 % 3 3余1
// 3、NAN 是 Not a Number的简写
// 什么情况下会不是一个数字？？
// 答：计算机无法进行数字运算时会给出一个结果，即NAN
let name ='小明'
console.log(name - 1) //脾气不错，没有报错
// 会得出结果NAN,计算机无法完成一个运算的时候
let age = NaN
console.log(age - 10) //NAN
</script>
<script>
// 1、字符串的运算
//任何数字 只要加了引号就一定是字符串
//字符串的运算比较简单，主要用于【拼接】
let str = '我叫'
let name = '卢灵秋'
// 使用+号进行拼接，+ 号用途有两种
// 1、用于数学运算，表示两个数字求和
// 2、用于字符串拼接，能够将两段字符串连接起来
let str1 = str + name
console.log(str1) //我叫卢灵秋
console.log(str - 1)
console.log(str + 1)
// +左右只要出现一个字符串，那么+ 表示的含义为拼接
// 列子
let num = '1' + 10 + 5
console.log(num) //1105
// 只要使用了单引号或者双引号 那么就一定是字符串！！
</script>
4、模板字符串反引号``
<script>
// 1、字符串：使用单引号、双引号和反引号都可以定义字符串
// 单双没区别
// 双引号是一种新的(ES6)定义字符串的语法
// 他的优势在于字符串的拼接
/* let srt ='我叫'
let name = '11'
str + name */
let school = '快要'
let html1 = '<a href="http://itcast.cn">去' + school + '工作了</a>'
// console.log(html1)
document.write(html1)
//将内容输出到网页之中
// 一旦使用字符串拼接时，拼接内容越复杂，使用+越容易出错
// 老语法用 + 号，太low了，不方便，容易出错！！、
// 模板字符串啥时候用？？？拼接的时候
// 如果不拼接，模板字符串和单双引没有区别
// 1、语法是使用反引号
let html2 = `<a href="http://itcast.cn">去 ${school} 学习</a>`
document.write(html2)
</script>
<script>
// 1. Javascript 是什么及组成是什么？
// 答：Javascript 是一门实现网页交互，获取后端数据的编程语言，运行在浏览器
// 它是由 ECMAScript（5天） 和 Web APIs 组件。
// 2. Javascript 的输入和输出是什么？
// 输入：prompt() 出现弹窗，由用户输入内容
// 输出：1. document.write() 2. alert() 3. console.log()
// 输入和输出是可以重复执行！！
// 3. 什么是变量？如何使用变量？
// 答：就是一个容器（大白话），本质上是内存中的一个空间
// 答：1. 先声明 let 2. 再赋值 =
// let name = '小明'
// 4. 变量的命名规则是什么？需要注意哪些内容？
// 答：变量名只能是字母、数字、下划线和$且不能数字开头
// 答：1. 区分大小写 2. 不能重复声明 3. 不能是关键字
// 其它：
// 字面量，let 和 var 区别？
/************ 华丽的分隔线 *************/
// 1. 数组是个啥？它有啥用？
// 答：数组就是一个变量，它能够在一个变量中装很多数据
// 2. 数组的语法是啥样的？一些相关术语有哪些？
// 答：通过 [数据1, 数据2, ...]
// 答：相关的术有 索引值、单元值、长度，索引值就是编号（从 0 开始），单元值就是数组中的数据
// 3. 如何才能够获取到数组中的某个单元数据？
// let student = ['张三', '李四']
// 答：students[0]
/************ 华丽的分隔线 *************/
// 1. 什么是常量？如何使用？
// 答：常量与变量类似都是用来存储数据，都是存到了内存当中。
// 答：const 常量名 = 值
// 2. 使用常量时需要注意哪些方面？
// 答：常量必须要有值且值不可被修改！
// 3. let 和 const 都可以存数据，请问使用时如何区分？
// 答：如果将来存的数据会发生改变使用 let ，否则使用 const
/************ 华丽的分隔线 *************/
// 1. Javascript 中有几种具体的数据类型？
// 答：有 6 种，分别为数值 字符串 布尔 未定义 空 对象
// （实际上有更多，目前就学这几个）
// 2. 如何检测变量的数据类型？
// 答： typeof 变量名
// 3. 字符串类型的数据如何定义？
// 答：使用单引号、双引号和反引号
// 4. 字符串在进行拼接时有几个方法？
// 答：1. 使用 + 号（+号左右只要有一个是字符串就会进行拼接）
// 2. 模板字符串（反引号），使用 ${变量名} 即可直接插入到字符串中
// 5. 数据类型包括几种情况？
// 答：3 种情况 正数、负数、小数
// 6. 数值类型在进行数学运算时需要注意什么？
// 答：需要注意优先级（运算的先后顺序），先乘除后加减，使用括号提升优先级
// 7. undefined 和 null 都比较少
// undefined 如果一个变量未赋值，那么它就是 undefined 类型
// null 如果一个变将来想要保存对象，那么会把这个变量初始成 null
// 8. 布尔类型 true 和 false
</script>
\
