2024年最全前端基础（JavaScript）——基础语法（变量(1)，绝对干货

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

console.log(add(1,2,3))
console.log('aa','bb'); // 字符串也行
console.log('1',2)

#### （2）把方法定义成一个常量【常用】

// 定义添加方法，方法定义成一个变量
// 常用，函数是一个对象
let add1 = function (a,b) {
    return a+b;
}
console.log(add1(3,5))

### 2.值的比较—字符串和数字可以比较，===


===可以排除类型不同的情况，

// 字符串和数字是可以比较的
console.log('1'==1); // true
console.log(1==1);
// 排除类型相等的问题
console.log('1'===1); // false

## JSON对象【重要】—{} + []


s和其他语言通讯 用JSON对象：数组对象[] 和 普通对象{}，可以互相嵌套，甚至套本身


{} ====对应java中的实体类，或者map；  
 [] ====对应java中的List 和 数组；  
 {}表示一个对象，用键值对定义,用. 就可以获得— JSON对象

// js和其他语言通讯 用JSON对象：数组对象[] 和 普通对象{}，可以互相嵌套，甚至套本身
// {} ====对应java中的实体类，或者map；
// [] ====对应java中的List 和 数组；
// {}表示一个对象，用键值对定义,用. 就可以获得--- JSON对象
let person = {
    "name":"peter","age":28,"gender":"男",
    "address":[{"1001":'南京'},{"1002":'背景'}]
}
console.log(person.name)
// 获得第一套房子
console.log(person.address[0])

// 表示多个人
let persons = [{"name":"p"},{"name":"s"}];
console.log(persons);

![在这里插入图片描述](https://img-blog.csdnimg.cn/2d92ec384f9b4781b558547fbd683c1f.png)


## js操作标签—控制html元素




| 方法 | 函数 |
| --- | --- |
| 根据id获取元素 | document.getElementById(“username”) |
| 用选择器获取 | document.querySelector(“#username”) |
| 用name获取–多个 | ddocument.getElementsByName(“hobby”) |


### 案例：让选择框 都变成未选择的状态：


![在这里插入图片描述](https://img-blog.csdnimg.cn/6cc1160b76784bccb1f479cf5f7b0d5a.png)

// 3.用name获取--多个
let h = document.getElementsByName("hobby");
h.forEach(ho=>ho.checked=false);

完整代码：

游戏 足球 编程

## 常用事件


### 1.鼠标单击事件–onclick–eat.innerText


鼠标单击一下，增加一个apple，eat.innerText


![在这里插入图片描述](https://img-blog.csdnimg.cn/6cb4727096f244c4806f5f0f995500d2.png)

peter eat Apple
add

### 1.案例：开灯关灯案例—light.src.includes(“off.gif”)


思路，本质是监测鼠标单击，如果单击了就换一下图片


方法一：用includes方法，不能用==，猜测是对比引用指向同一对象？

方案二：顶一个Boolean类型的flag，每次取反

### 2.鼠标失去焦点时间–onblur


usernameInput.onblur


### 3.两个textarea同步–oninput


jianInput.oninput


### 3.案例：两个框同步，类似百度翻译


![在这里插入图片描述](https://img-blog.csdnimg.cn/a73b115215e34ebe9df54170893a6739.png)

### 4.案例：按钮弹框window.alert() + 二次确定confirm(“确定删除”);


![在这里插入图片描述](https://img-blog.csdnimg.cn/abcd68cb649a40f5a108db8f131ab850.png)

按钮
删除

### 5.案例：操作页面—控制浏览器window.open(),close()


![在这里插入图片描述](https://img-blog.csdnimg.cn/dd9d28be9b934c36a177c52263c78e59.png)

访问百度 关闭百度

### 6.案例：刷新页面—location.reload()


![在这里插入图片描述](https://img-blog.csdnimg.cn/ad320a3dbdb649f0b5ccc90795d455fb.png)

跳转到百度 刷新页面

### 7.案例：10s后跳转到百度—location.href = “https://www.baidu.com”;


![在这里插入图片描述](https://img-blog.csdnimg.cn/086c3a512b6b40bea2b2653560475073.png)

10秒后跳转到百度

### 8.案例：购物网站首页图自动切换–setInterval(fun,1000)


![在这里插入图片描述](https://img-blog.csdnimg.cn/62c920db2b744a91a4b69139bf9901e0.png)

## 应用案例


### 1.支付完成后5,4,3,2,1,0跳转到界面


要点：  
 （1）setInterval(fun,1000);要放在后面；  
 （2）用document.write不好看，一行一行打印，要用span

document.write(“

支付完整后”+i+“s后跳转

”);

![在这里插入图片描述](https://img-blog.csdnimg.cn/9a591d958ddc443cbc674a7982563bcc.png)

支付完成

### 2.做一个多选框效果


要点：  
 （1）如果下面的全选，上面的要自动勾选；  
 （2）如果全部勾选，则全部勾选，此时一个不勾选，全选就变成不勾选；  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/41f9dfba898e404fb82368b67308b9f8.png)

全选

---

游戏
足球
编程

### 3.js网络请求初步案例：简体繁体转换—axios


![在这里插入图片描述](https://img-blog.csdnimg.cn/4722f801b88c4dbc88f6e7c43f897e92.png)


ZhChangeServlet.java的代码如下，


易错点：  
 （1）req.getParameter(“jian”); 这里的参数，容易搞错；是前端get的/day06/zh/change?jian=中的jian；  
 （2）String jianStrs = req.getParameter(“jian”);只有这个输入不为null的时候才能进行简体繁体转换；


知识点：  
 （1）@Test注解的使用，把方法转成直接运行版；  
 （2）IOUtils.readLines()方法，更详细的参考下面博客：


[Java基础（maven）——maven新建项目 & 常用IO工具 & Durid数据库工具 & 案例]( )

package com.tianju.servlet;

import com.tianju.util.StringUtils;
import org.apache.commons.io.IOUtils;
import org.junit.Test;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.HashMap;
import java.util.List;

/**
* 简体中文转成繁体中文的servlet
*/
@WebServlet(“/zh/change”)
public class ZhChangeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1.调用方法获得hasMap;
HashMap<String,String> map = zhMap();
// 2.进行简体繁体转换，如果没有找到，为null，则用原来的简体
// 获取前端传的值
String jianStrs = req.getParameter(“jian”);
System.out.println(jianStrs);
if (!StringUtils.isBlank(jianStrs)){
StringBuilder fanStrs = new StringBuilder();
for (int i = 0; i < jianStrs.length(); i++) {
String fan = map.get(jianStrs.charAt(i)+“”);
if (fan==null){
fanStrs.append(jianStrs.charAt(i));
}else{
fanStrs.append(fan);
}
}
// 3.resp到前端
resp.getWriter().write(String.valueOf(fanStrs));
}
}

private HashMap<String,String> zhMap() throws IOException {
    // 1.读取简体繁体对应的文件，转换成hasMap
    List<String> stringList = IOUtils.readLines(
            new FileInputStream("D:\\Myprogram\\idea-workspace\\javaweb0606\\javaweb0606\\src\\main\\resources\\jf\_map\_utf8.txt"),
            "UTF-8");
    HashMap<String,String> map = new HashMap<>();
    for(String s:stringList){
        map.put(s.split(":")[0],s.split(":")[1]);
    }
    return map;
}

// @Test
// public void testZhDemo() throws IOException {
// // 1.读取简体繁体对应的文件，转换成hasMap
// List stringList = IOUtils.readLines(

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

web0606\src\main\resources\jf_map_utf8.txt"),
“UTF-8”);
HashMap<String,String> map = new HashMap<>();
for(String s:stringList){
map.put(s.split(“:”)[0],s.split(“:”)[1]);
}
return map;
}

// @Test
// public void testZhDemo() throws IOException {
// // 1.读取简体繁体对应的文件，转换成hasMap
// List stringList = IOUtils.readLines(

[外链图片转存中…(img-qFn3XWi5-1714980918820)]
[外链图片转存中…(img-YnqDLKVU-1714980918820)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！