JS啊，是一门神奇的语言，弱类型的语言，可以对网页内的内容进行自动化，或者说修改，是很方便的一门语言，既然说到弱类型，那我们说说什么是弱类型，有弱类型，那自然就有强类型了，先举反例，Java就是一门强类型语言，它需要你自动声明变量的类型
例如
int a = 1;
而弱类型js是这样的，
var a = 1;
let b = 1;
上述两个代码有很明显的不同，Java是已经指定好了类型，而js是依靠右边的变量类型自动确定的。 好，知道了变量类型，那我们先了解一下定义域 在Java中的定义域很好理解，博主的理解是这样的，分为局部和全局两种 局部，就是指在代码块中的内容
例如
// 能跨越整个类的，自然就是全局变量了
// 在示例中，变量b勉强算是全局变量了
int b = 1;
{
// 这是一段局部代码块
int a = 1;
}
再看js，js也差的不是很多，不过js可能会比较混乱，也是全局和局部两种
// 在js中，变量名 = value就是全局变量，也不会报错
a = 1;
// 这里的a相当于一个全局变量
function print(){
// b就是一个局部变量了，声明在代码块或函数中的都算局部变量，当然，这里没有说到其他情况
int b = 1;
// 如果是这样，这个值就依然是全局变量了,c还是全局变量
c = 1;
console.log("Hello World");
}
全局变量和局部变量的区别在于作用域，全局是作用于整个代码的，而局部只在那个范围有效，出范围可能就会报Error了，视情况使用
这里讲一个Java的难点,就是在函数(function)中的局部变量的两种情况
比如一个方法
public void print(int a,int[] arr){
// 已知a是一个基本数据类型，而arr是一个引用数据类型，它们在传进来后也是不同的
// 假设传入的a=1,我们在这里修改，不会变化外面的，因为它是基本数据类型
// 所传入的只是内容，不是真正的,如果需要在函数内修改，我们可以把数据return
a = 2;
// 如果是arr，就不一样了，因为它是引用数据类型，可以说，存储的就是本身
// 在这里修改arr数组的第一个元素，外面的arr也会变化
arr[0] = 1;
}
接下来到js的数组了，java的数组不作详细介绍，因为js的数组比较特殊 数组，其实是一组存储相同类型的一个组，也可以称为列表，当然，在python里就叫列表(list)
// arr就是一个数组，这样写是一种简便的方法，数组也属于对象的一种，所以可以通过对象来创建
let arr = [];
let arr = new Array();
// 数组添加元素
arr.push(value);
arr[arr.length] = value;
// 数组删除
arr.pop()
// 数组修改
arr[索引号] = value;
数组的删除和添加都是最后一个位置，如果需要删除其他的，可以考虑创建一个新数组，或者考虑其他情况,数组的添加，添加到第一个可以使用unshift方法 复习一下Dom对象和Bom对象，这俩连在一起复习好了 Dom其实操作者都是Document(文档) Bom是Window，是浏览器来操作 大差不差，但主体不同
<body>
<h1>这是一个标签,我想用javascript获取它的元素</h1>
</body>
<script>
let h1 = document.querySelector("h1");
</script>
很多情况都是用js中的document.querySelector("value名或.类名或#id名") 如果这个类名或id名或value有多个，querySelector就只能得到一个了，还有一个方法可以获取所有 querySelectorAll("value名或类名或#id名")，这个的返回值是一个数组，使用方法与上面的相同，当然
如果你想修改元素内容，可以用被获取的元素名.style.方法名
当然，这得看这个元素是不是这样修改的，也有元素是这样的,value.方法名
<script>
let h1 = document.querySelector("h1");
h1.style.color = "red";
</script>
将上述的h1标签的颜色改为red(红色) 这里的话，简单整一个小案例，在点击按钮后，将输入框置为passwd，并将旁边的图片替换
<body>
<input type="text">
<img src="京东闪电背景图.png" alt="一张平平无奇的img">
<button>点击替换图片,并让Input输入框改为密码形态</button>
</body>
<script>
let button = document.querySelector("button");
let img = document.querySelector("img");
let input = document.querySelector("input");
// 添加一个监听事件addEventListener
button.addEventListener("click", function () {
// click 单击事件
img.src = "../13/3.webp";
input.type = "password";
})
</script>
这里的路径大家可以自由调整，这是最基础版的了，读者还可以对这段代码进行升级，例如单击跳过去，单击又转回来，变成原来的。 这里再提供一种思路，如果有多张图片想要改变呢，这时候我们可以准备一个数组，在里面存放图片的地址字符串
这里在给出一个广告删除的案例，比如我们有时候不是会看到许多的广告吗？可以点击广告右上角的x号关闭，或者在指定时间后自动删除，这就很方便了，这里会用到一个Bom中的方法 setTimeout,在指定时间后执行里面的代码
<body>
<div style="width: 100px;height: 100px;background-color: red;position: relative;">
<span style="position: absolute;right:0;top: 0;">x</span>
</div>
</body>
<script>
let div = document.querySelector("div");
let span = document.querySelector("span");
// 在javaScript里的时间，1000毫秒是1秒，所以3000毫秒是3秒
// setTimeout是一个定时器函数，就是会在3秒后将上述的div隐藏起来
setTimeout(function () {
div.style.display = "none";
}, 3000)
// 下面是一个单击事件，隐藏div内容
span.addEventListener("click", function () {
div.style.display = "none";
})
</script>
再来一个案例，移动天使，当鼠标在电脑上移动后，就会有一个小天使一直跟随着你的鼠标移动
利用到了pageX,pageY，这两个是追踪鼠标位置的，然后我们需要获取天使图片的位置，让图片的位置跟随着鼠标即可(html代码中的图片路径需要修改成自己的)
<body>
<img src="../15/angel.gif" alt="angle">
</body>
<script>
// 当鼠标在当前Dom(页面模型对象)移动时，我们需要操作
// e可以获取当前对象的各种属性,包括标签等，这里我们只得到鼠标的坐标(x,y)
document.addEventListener("mousemove", function (e) {
// 原理：当鼠标在移动时，让图片的横坐标和纵坐标等于图片本身
let img = document.querySelector("img");
// 难点在于px别忘了加上
img.style.left = e.pageX + "px";
img.style.top = e.pageY + "px";
})
</script>
文字留言板，不说常用吧，但是经常会使用到，这里就简单实现它的增加和删除操作(不推荐新手看这里) 有点难度,如果前面了解的还不错可以看看
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>添加</button>
<ul>
</ul>
</body>
<script>
let textarea = document.querySelector("textarea");
let button = document.querySelector("button");
let ul = document.querySelector("ul");
button.addEventListener("click", function () {
let li = document.createElement("li");
li.innerHTML = `${textarea.value}--<a>删除</a>`;
ul.appendChild(li);
let a = document.querySelectorAll("a");
for (let i = 0; i < a.length; i++) {
a[i].addEventListener("click", function () {
a[i].parentNode.parentNode.removeChild(a[i].parentNode);
})
}
})
</script>
