目录
1，基础概念
2，基本使用
3，基础语法
4，consloe.log 到底有什么用？
5，目前阶段的基础操作
6，现有知识总结
7，jQuery的使用
8，两个案例演示
一，基础概念
前面学习 HTML 和 CSS 时，我们已经能够把一个网页"搭出来"和"美化出来"，但这样的网页还比较静态。
如果希望网页能够响应用户的操作，例如：
点击按钮 → 弹出提示
输入内容 → 获取输入框数据
点击菜单 → 展开内容
点击按钮 → 修改文字、颜色就需要 JavaScript。
JavaScript，简称 JS，是一门脚本语言，最初主要用于浏览器中的网页交互。
JavaScript和Java是什么关系，你就可以理解为周杰和周杰伦，他们完全就是两个不同的东西，只不过在JavaScript刚开始进行创建的时候，就是主线任务是和Java类似，并且名字有Java也是为了蹭Java的流量吧
二，基本使用
先介绍一下consloe.log是用于打印日志的
那我们这里的使用还是跟css一样有三种写法，先分别来展示一下
（1）行内方式
html
<button onclick="alert('hello')">点我</button>JavaScript 直接写在 HTML 标签中。
适合非常简单的代码，但代码复杂以后会很乱。
（2）内部方式
html
<script>
console.log("hello");
</script>通过在body中使用<script>标签写入内容
（3）外部方式
javascript
console.log("hello2");
html
<script src="js2.js"></script>通过创建一个新的js类来进行使用
三，基础语法
这里主要是先学习JavaScript这门语言的一些基础，就像开始学习Java的时候的变量，定义，数组之类的
（1）变量
常用数据类型number，string，boolean，undefined；（在这门语言不跟Java一样，这里定义一个变量不是int，String之类的，而是可以统一使用let）
javascript
let a = 10;
let b = 3.14;
let name = "张三";
let message = 'hello';
let flag = true;
let flag2 = false;
let a;
console.log(a);（2）typeof查看类型
javascript
let a = 10;
let b = "hello";
let c = true;
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);（3）运算符
这里的运算符和Java类似，但是有一个不一样，就是==以及===
==：比较是否相同，但是在比较的时候会进行类型的转换，就好比"10"以及10，是相等的
===：在比较大小的基础上，也看类型是否相同，就向上面那个例子，在===这里就是不相同的
（4）数组
javascript
let arr = [10, "hello", true];
arr.push(200);
arr.splice(1, 1);
arr[0] = 100;数组的设置也很简单以及包容，你的一个数组里面可以包含多种不同的类型的数据
增加元素：push
删除元素：splice（从哪开始，删除几个）
修改元素：直接用下标把你想改的数字写下来就好了
如果你直接写let arr【5】=10；，就是将数组的长度直接设为6，并且除了下标为5的那个内容是10，其他的都是empty
（5）函数
javascript
function add(x, y) {
let sum = x + y;
return sum;
}方法统一使用function 后面就是方法名字以及参数，并且这里的方法的包容性也同样的很高，你在调用的时候不一定说是两个数字相加，也可以两个字符串等等
javascript
add(5, 3);
add("aa", 3);
add("aa", "bb");
add("aa");
add("aa", "bb", "cc");
add(5);像aa和3就会出现字符串相加的情况，像我的函数是两个参数，但是你传了三个，这样就会丢弃最后一个，如果你少填了，空出来的参数就会默认是undefined
（6）对象
javascript
let student = {
name: "张三",
age: 20,
sayHello() {
console.log("hello");
}
};这里的方法最好直接写名字然后跟着对应的操作
四，consloe.log的作用
这个就相当于Java当中的sout（打印），但是这个打印并不会出现在网页上，而是打印在日志中，所以consloe.log最大的作用就是调试，那我现在就来介绍一下如何进行调试，我们进入网页之后，点击键盘上的f12，点击控制台就可以看到我们的日志了
javascript
<script>
console.log("hello");
</script>
<script src="js2.js"></script>
console.log("hello2");在这里就可以看到我刚刚写的两个hello，具体如何操作，先举一个例子
javascript
let arr = [10, 20, 30];
arr.push(40);
console.log(arr);这样我们通过日志就可以看到我们push有没有成功
五，基础操作
现在学习阶段比较常见的可以先认识：
javascript
console.log()控制台打印。
javascript
alert()浏览器弹窗。
javascript
typeof查看数据类型。
javascript
arr.length获取数组长度。
javascript
arr.push()在数组末尾增加元素。
javascript
arr.splice()删除数组元素。
javascript
parseInt()把内容转换为整数。
javascript
Math.random()生成随机数。
javascript
Math.floor()向下取整。
这些操作在后面的案例中会不断重复出现。
六，现有知识总结
我们现在学完这些开始网页交互了吗，还并没有，我们现在学这些东西主要是学JavaScript的一些基础的语法，还没到交互的关系，当只有比如用户点击一个按钮，浏览器接收到点击的信号，JavaScript监听到之后执行对应的代码
七，jQuery
jQuery 本质上还是建立在 JavaScript 之上的工具，它封装了很多常见的页面操作，使得选择 HTML 元素、操作 DOM 和处理事件更加简单
如何导入
我们先进入jQuery的官网，然后进行下载
下载完之后打开右键另存为到你写的代码的那个目录下
然后复制粘贴到你的代码文件目录，并且在代码中进行引入，接下来就可以使用了，代码中的导入最好写在head里面或者body的开头，因为浏览器是代码从上往下进行加载，所以写在开头避免加载出现问题
，
javascript
<script src="./jquery-4.0.0.min.js"></script>基础用法
javascript
$(selector).action();selector是选择哪一个，后面的action是具体要执行的方法
javascript
$("button").hide();这个就是找到button然后对他进行隐藏，这里的选择器和前面css类似，id使用#，class使用. ,直接写就是找到所有的标签，上面这个就是找到所有的p标签
事件
相关理解
要进行网页交互就得先知道用户做了什么动作，比如用户点击了一个什么，输入了一个什么，都是需要捕捉的动作，所以后续我们使用jQuery主要就是带上用户的作用以及这个动作完之后返回什么
javascript
$("button").click(function() {
console.log("点击成功");
});这个就是当用户点击button按钮之后打印一个日志
事件里面的常用方法
javascript
text()
html()
val()text（）是修改文本内容，html（）是修改HTML里面的内容，val（）是获取到用户输入
接下来我用两个小案例来辅助学习
案例1（猜数字）
这个图片是我们要达到的效果，首先就是我们输入数字，产生一个次数以及结果的改变，然后就是重新开始一局之后的数据的刷新
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div>
<button id="reset">重新开始游戏</button><br>
请输入你要猜的数字：<input type="text" id="guessnum"><button id="guess">猜</button><br>
已经猜的次数：<span id="count">0</span><br>
结果: <span id="result"></span>
</div>
<script src="./jquery-4.0.0.min.js"></script>
<script>
let num=Math.floor(Math.random()*100)+1;
let count=0;
console.log(num);
$("#guess").click(function(){
count++;
//拿到用户输入的数字，用val
let usernum=$("#guessnum").val();
if(num>usernum){
$("#result").text("猜小了");
$("#count").text(count);
}else if(num<usernum){
$("#result").text("猜大了");
$("#count").text(count);
}else{
$("#result").text("猜对了");
$("#count").text(count);
}
})
//接下来就是点击重新开始之后的重置
$("#reset").click(function(){
num=Math.floor(Math.random()*100)+1;
console.log(num);
count=0;
$("#guessnum").val("");
$("#count").text("");
$("#result").text("");
})
</script>
</body>
</html>
案例2（留言板）
预期效果，在我们输完之后会在提交下面显示
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表白墙</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 520px;
margin: 30px auto;
text-align: center;
}
h1 {
font-size: 56px;
margin-bottom: 20px;
}
p {
color: #888;
margin-bottom: 25px;
}
.row {
width: 500px;
margin: 15px auto;
display: flex;
align-items: center;
justify-content: center;
}
.row span {
width: 100px;
text-align: left;
font-size: 24px;
}
.edit {
width: 320px;
height: 50px;
font-size: 20px;
padding-left: 10px;
}
.submit {
width: 420px;
height: 60px;
background-color: orange;
color: white;
border: none;
font-size: 28px;
cursor: pointer;
}
.message {
width: 420px;
margin: 10px auto;
text-align: left;
font-size: 20px;
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交，会将信息显示在下面</p>
<div class="row">
<span>谁：</span>
<input class="edit" type="text">
</div>
<div class="row">
<span>对谁：</span>
<input class="edit" type="text">
</div>
<div class="row">
<span>说什么：</span>
<input class="edit" type="text">
</div>
<div class="row">
<input class="submit" type="button" value="提交">
</div>
</div>
<!-- 引入你本地的 jQuery 4.0.0 -->
<script src="./jquery-4.0.0.min.js"></script>
<script>
$(function () {
// 给提交按钮绑定点击事件
$(".submit").click(function () {
// 获取三个输入框中的内容
var from = $(".edit:eq(0)").val();
var to = $(".edit:eq(1)").val();
var message = $(".edit:eq(2)").val();
// 打印到控制台，方便调试
console.log(from);
console.log(to);
console.log(message);
// 如果有内容为空，就不提交
if (from == "" || to == "" || message == "") {
alert("请输入完整内容");
return;
}
// 拼接一段 HTML
var html =
'<div class="message">'
+ from
+ ' 对 '
+ to
+ ' 说：'
+ message
+ '</div>';
// 添加到 container 最后
$(".container").append(html);
// 清空所有文本框
$(":text").val("");
});
});
</script>
</body>
</html>