第一部分，JavaScript的基本使用：
（1）JavaScript是什么？
JavaScript原名livescript，是一门动态类型，弱类型基于原型的脚本语言。
它是结合HTMl使用的一种脚本语言。（不能单独运行JS文件哦！！！）
注意：别多想了！和Java没一毛钱关系，最多语法看起来有点把像而已，别多想了！！
（2）JavaScript的作用：
第一个：页面特效
第二个：前后交互
第三个：后台开发（node）
（3）JavaScript写在哪里？
第一种：Script标签里
第二个：外部的js文件内
小知识点：
解释型语言：不需要编译，只有在运行你代码的时候才会编译然后运行，也就是每运行一次都要编译一次。（JavaScript是解释型语言）
编译型语言：一次性编译成机器语言，运行一次直接就编译好了，可以直接用了。
（1）JS写在哪？
1.写在script标签里面；
2.写在外部的js文件内，然后引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本使用</title>
</head>
<body>
<!--建议将JS写在body的底部（就像下面这样，靠近body结束标签就称body的底部），因为在这里的在页面加载的同时就会执行这些js事件！-->
<!--第一种使用方法：写在Script标签里面-->
<script>
// 让页面弹出一个123
alert("123");
</script>
<!--第二种使用方法：写在外部的js文件内，然后引入。-->
<script src="js1.js"></script>
</body>
</html>
3.直接写在标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本使用</title>
</head>
<body>
<!--第三种使用方法：直接写在标签内-->
<button onclick="add()">我是按钮</button>
<script>
//add为函数名，注意这样写和常规写事件的不同！
function add() {
alert(123);
}
</script>
</body>
</html>
js文件内容为：
（2）JS一些注意事项：
1.严格区分大小写
2.每一行完整语句后面加分号
3.变量名不能使用关键字和保留字（如：char，byte）以及数字
4.代码要缩进，保持可读性
（3）JS获取和修改元素的方法：
小知识点：元素就是页面里的标签，元素即标签，标签即元素，二者为一物。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS获取元素</title>
</head>
<body id="by1">
<p id="p1" class="p2" name="p3">我是一个段落</p>
<script>
// 注意：JS里面一次只能赋予一个元素事件，不能同时给多个！！！
// 所以：在下面头四种获取元素的方法中，只有id不用加下标，因为id是唯一的，可以保证一次只给一个赋予事件
// 但是，另外三种，通过class，标签名还有name属性获取元素的方法都要加下标，因为这几个都不是唯一的！！
// 第一种获取元素的方法：通过id获取元素
var p11 = document.getElementById("p1"); //var：定义变量名的关键字； p11：变量名
// console.log(p11); 在浏览器页面的控制台打印p11，可以发现p11就是p这个元素（包括里面的文本内容）。
// innerText：JS里修改内容的方法 innerHTML也是修改内容的方法
p11.innerText = "我不是段落";
var by11 = document.getElementById("by1");
console.log(by11.innerHTML); //会发现innerHTML和innerText方法都是获取内容，从而可以修改获取的内容。
console.log(by11.innerText); //但是innerHTML会获取所有内容（包括文本和相应的标签）；但innerText只会获取文本内容。
//所以innerHTML可以改文本同时改标签；但是innerText就只能改文本了！！！
// 第二种获取元素的方法：通过class获取元素 [0]称为下标 ，有两种加下标的方法：
var p11 = document.getElementsByClassName("p2")[0]; //第一种加下标的方法：注意：必须加下标，哪怕要修改的元素只有一个也要加，下标从0开始
p11.innerText("我不是段落啊 Class"); //第二种加下标的方法。 p11[0].innerText()
// 第三种获取元素的方法：通过标签名获取元素
var p11 = document.getElementsByTagName("p")[0];
p11.innerText = "我不是段落啊啊";
//第四种获取元素的方法：通过name的属性值获取元素 一般用于input。
var p11 = document.getElementsByName("p3")[0];
p11.innerText = "我不是一个段落呀呀呀";
// 第五种获取元素的方法：通过CSS选择器(selector)获取元素 分为两种：
// 第一个：通过CSS选择器document.querySelector()这个方法只能获取一个，选择器是可以有多个一样的（比如用类选择器，有多个标签的类属性值一样）
// 但是这个方法只会获取最先获取的一个(代码从上往下执行)，所以不会报错。
// 加下标想指定下面的具有一样类属性值的标签这种方法是没用的，反而会使这个方法都没效果了。
var p11 = document.querySelector(".p2"); //注意：不支持伪类选择器，不支持伪元素
p11.innerText = "我不是一个段落咩咩";
// 第二个：通过CSS选择器document.querySelectorAll()获取所有。 但是JS一次只能赋予一个元素事件，所以又要加下标了哦！
var p11 = document.querySelectorAll(".p2")[0];
p11.innerText = "我不是一个段落哦哦 哦"
</script>
</body>
</html>
第二部分，简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单事件</title>
</head>
<body>
<button id="btn1">我是按钮</button>
<select name="address" id="address"></select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<script>
// 获取元素
var btn = document.getElementById("btn1");
// 第一个：鼠标的单击事件 重点！
btn.onclick = function(){
alert(123);
}
// 第二个：鼠标的双击事件
btn.ondblclick = function () {
alert(321);
}
// 如果对一个元素同时设置单击事件和双击事件，不管这俩谁在上面谁在下面，单击事件都是优先执行，而双击事件不再执行
// 第三个：鼠标滑入事件 重点！
btn.onmouseenter = function (ev) {
btn.innerText = "按钮"
}
// 第四个：鼠标滑出事件 重点！
btn.onmouseleave = function (ev) {
btn.innerText = "我是按钮啊"
}
// 第五个：窗口变换 可以用来判断窗口是否变化，并确定变化的比例值大小。
window.onresize = function (ev) {
console.log("窗口变化"); //在浏览器的控制台，你放大缩小浏览器窗口，会发现改变的次数会变大
}
// 第六个：改变下拉框 可以用来做省级联动（当你选中第一级省份下拉框中的一个值时，第二级市级下拉框变为相应的省的市的下拉框）
var add = document.getElementById("address");
add.onchange = function (ev) {
console.log("下拉框改变了"); //在浏览器控制台，当你点击一个下拉框的的选项时，会发现改变的次数随你点击的次数变大。
//但是次数最多是你下拉框选项的个数，当超出后再点击次数不会增大。
}
</script>
</body>
</html>
拓展：监听事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听事件</title>
</head>
<body>
<button id="btn1">点击按钮</button>
<script>
var btn = document.getElementById("btn1");
// 如果像下面这样，想要通过单击事件实现点击按钮两次。 但是不行，结果只会执行下面那个单击事件
// btn.onlick = function () {
// console.log(1);
// };
// btn.onclick = function () {
// console.log(2);
// };
// 上面不行，引入新方法，使用监听事件！！！
// 通过监听事件可以同一时间给一个元素赋予多个事件，并且都会执行
// 设置一个监听事件 给元素添加一个监听的事件（单击事件）。
btn.addEventListener("click",function () {
console.log(1)
});
btn.addEventListener("click",function () {
console.log(1)
})
</script>
</body>
</html>
第三部分，修改样式：
（1）JS修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改样式</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.getElementsByTagName("div")[0];
box.onclick = function () {
// 格式为：Obj.style[变量] = 变量名 注意这个是针对变量的，在题中有应用！
//格式为：Obj.style.样式 = “样式内容” 这个是针对常量的，就像下面
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "blue"
}
</script>
</body>
</html>
（2）JS操作标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS操作标签属性</title>
</head>
<body>
<div id="div1"></div>
<script>
// 注意：标签属性分为两种：合法属性（如：class,id）和自定义属性（包括合法属性和自定义的属性）
var box = document.getElementById("div1");
//第一种：合法属性：class 下面是JS操作标签合法属性的增删改查！！！
box.className = "div2"; //当标签中不存在class属性时，增加
box.className = "div3"; //当标签中存在class属性时，改
console.log(box.className); //查询 在浏览器控制台可以查看到想要查看的属性值
box.removeAttribute("class"); //删除 在浏览器控制台可以发现class这个属性已经没了
// 第二种：自定义属性 下面是JS操作标签自定义属性的增删改查！！！
box.setAttribute('name',"div2"); //增
box.setAttribute("name","div3"); //改
console.log(box.hasAttribute("name")); //查
box.removeAttribute("name"); //删
</script>
</body>
</html>
第四部分，数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<!--小知识点：JS是弱类型！-->
<!--弱类型：申明变量的时候，不需要对数据类型进行定义；-->
<!--强类型：申明变量的时候，需要对数据类型进行定义。-->
<script>
// 基础数据类型：
// 1.数字
var a = 123;
console.log(typeof a); //在控制台查看变量a是很么数字（number）类型。
// 2.字符串
var b = '123';
console.log(typeof b); //string
// 3.布尔
var c = true;
console.log(typeof c); //boolean
// 4.未定义
var d;
console.log(typeof d); //undefined
// 5.空
var e = null; //null 空属于一个对象，叫空对象。
console.log(typeof e); //注意：null类型进行typeof操作符后，结果是object。原因：null类型被当做一个空对象引用。
// 6.对象数据类型：
// 对象
var f = [1,23,4];
console.log(typeof f); //object
var g = {name : "china",age : 5000};
console.log(typeof g); //object
</script>
</body>
</html>
