学语言，看这里，如何快速掌握JavaScript？

本篇文章是基于会点c语言和会点python基础的，去更容易上手javascript
学习笔记分享✨🌈👏👏👑👑

javascript目录

- 1.安装node.js：
- 2.配置环境变量——创建NODE_HOME :
- 3.变量与常量
- 4.原生数据类型
- 5.模板字符串
- 6.计算字符串的长度
- 7.将字母全部大写
- 8.将字母全部小写
- 9.指定输出字符串（切片）
- 10.分割字符串
- 11.数组
- 12.对象
- 13.if-else if -else
- 14.三目运算符
- 15.switch
- 16.循环
- 17.函数
- 18.js在html中的应用：
- 19. jQuery
- - 19.1 引用：
  - 19.2 使用js修改html内容：
  - 19.3 jquery中选择器的选择
  - - 19.3.1 id选择器
    - 19.3.2 样式选择器
    - 19.3.3 标签选择器
    - 19.3.4 层级选择器
    - 19.3.5 多选择器
    - 19.3.6 属性选择器
    - 19.3.7 相邻关系
    - 19.3.8 找父子和儿子
    - 19.3.9案例
    - 19.3.10 值的操作
    - 19.3.11 案例：
    - 19.3.12 删除内容
- 20.调试问题

1.安装node.js：

node.js官网：https://nodejs.org/en/download/prebuilt-installer

直接点击下载后，配置环境变量

在node根目录下创建两个文件：node_cache 、node_gobal
在这里插入图片描述

找到nodejs文件，鼠标右键，点击属性 -> 编辑文件权限
在这里插入图片描述

测试：查看版本

PS D:\HuiTenp\Downloads> node -v
v20.15.1
PS D:\HuiTenp\Downloads> npm -v

查看版本：node -v

查看npm的版本（新版的node安装自带安装npm）

以管理员身份打开cmd，更改路径。

npm config set prefix "D:\software\nodejs\node_global"
npm config set cache "D:\software\nodejs\node_cache"

2.配置环境变量——创建NODE_HOME :

此电脑（右键）点击属性 -> 高级系统 -> 环境变量 ->系统变量 ->新建，如图：
在这里插入图片描述

此电脑（右键）点击属性 -> 高级系统 -> 环境变量 ->系统变量 ->Path ->编辑 -> 新建环境变量

在这里插入图片描述

配置全局镜像

npm config set registry https://registry.npmmirror.com

安装cpm

npm install -g cnpm

安装webpack

npm install webpack -g

安装完成

在这里插入图片描述

3.变量与常量

// var,let,const
var:全局变量（很少使用）
let：可以重新赋值
const：不可以被改变（数组或对象时，可以被更改）

// 数据类型：let，表示可以将已经被定义的数值，更改 
let num=30; //可以表示let num;
num=31;
console.log(num);

// 数据类型：const，表示不可以将已经被定义的数值更改，会报错
const num=30;  // 且只能先初始化数值 不能const num;这样表示
num=31;
console.log(num);//结果：
Uncaught TypeError TypeError: Assignment to constant variable.at <anonymous> (f:\Desktop\my_study\JavaScript\study\index.js:6:4)at Module._compile (internal/modules/cjs/loader:1358:14)at Module._extensions..js (internal/modules/cjs/loader:1416:10)at Module.load (internal/modules/cjs/loader:1208:32)at Module._load (internal/modules/cjs/loader:1024:12)at executeUserEntryPoint (internal/modules/run_main:174:12)at <anonymous> (internal/main/run_main_module:28:49)
index.js:6

4.原生数据类型

const username="john";                 // string
const age =30;	                       // number
const rate=4.5;	                       // float 不存在浮点数的概念
const isCool=true;	                   // boolean
const x=null;                          // null -》none
const y=undefined;                     // undefined -》none
let z;                                 // undefined -》none// 打印数据类型
console.log(typeof 变量名)

5.模板字符串

在JavaScript中，有多种方式可以格式化字符串以进行打印输出。除了你提到的使用加号（+）拼接字符串和变量的方式之外，还有以下几种常用的方法：

模板字符串（Template Literals）
模板字符串使用反引号（`）包围，并允许在字符串中嵌入表达式。表达式需要放在${}之中。

例如：
```
const username = "John";
const age = 30;
console.log(`My name is ${username} and I am ${age} years old.`);
```
使用.format()方法（不直接支持于标准JavaScript，但可以用于某些库或通过自定义实现）
JavaScript的标准库并不直接支持类似Python的.format()方法，但是可以使用第三方库如lodash或自己实现一个函数来达到类似的效果。

自定义.format()示例：
```
function format(str, ...args) {return str.replace(/{(\d+)}/g, (match, number) => args[number]);
}const username = "John";
const age = 30;
console.log(format("My name is {0} and I am {1} years old.", username, age));
```
使用数组和.join()方法
这种方式是将所有要输出的部分存储在一个数组中，然后使用.join()方法将它们连接成一个字符串。

例如：
```
const username = "John";
const age = 30;
const parts = ["My name is", username, "and I am", age, "years old."];
console.log(parts.join(" "));
```

使用printf风格的库
虽然JavaScript标准库不包含printf风格的函数，但可以通过引入一些库（如printf-js）来实现。

例如：

const printf = require('printf-js').printf;const username = "John";
const age = 30;
console.log(printf("My name is %s and I am %d years old.", username, age));

在现代的JavaScript开发中，模板字符串是最常用和推荐的方式，因为它简洁且易于阅读。

6.计算字符串的长度

const s="Hello world!"
console.log(s.length); //计算字符串的长度

7.将字母全部大写

const s="Hello world!"
console.log(s.toUpperCase()); //将字母全部大写

8.将字母全部小写

const s="Hello World!"
console.log(s.toLowerCase()); //将字母全部小写

9.指定输出字符串（切片）

const s="Hello World!"
// substring(0,5)相当于python的切片s[:5],下标索引都是从0开始，js是使用,号隔开，python是使用:隔开
console.log(s.substring(0,5).toUpperCase());

10.分割字符串

const s="Hello World!"
console.log(s.split(""));  //默认分割，分割每一个字符
console.log(s.split(" "));  //指定分割，和python一致（这里指定的是空格为分割点）

浏览器运行
在这里插入图片描述

11.数组

// 定义一个数组，就相当于python中的列表，原理和python一致
const numbers1 = [1,2,3,4,5];
const numbers2=new Array(1,2,3,4,5); // Array是构造函数，里面的数值被作为参数传入构造函数
console.log(numbers1);

也可以使用索引的方式访问数组

// 定义一个数组，就相当于python中的列表
const numbers=new Array(1,2,3,4,5);numbers.push("你好"); //末尾追加元素
numbers.unshift("世界") //在数组头部添加元素
numbers.pop() //删除数组末尾的元素
numbers.splice(2,1) //numbers.splice(索引位置,1)：索引为2的元素删除，删除的是元素“3”
//判断这个数据是不是数组
console.log(Array.isArray(numbers)) //返回true，错误则返回false
console.log(numbers.indexOf(2)) //查看元素索引
console.log(numbers);

12.对象

// 对象相当于python的字典，以键值对的形式实行
const person={firstname:"john", lastname:"dose",age:30,hobbies:["music","movies","sports"],address:{street:"20 main st",city:"bostion",state:"ma",},
};
console.log(person)
console.log(person.firstname) // 可以使用.名称的方式取出键值对

直接告知数据名等于对象容器 -> 直接使用

const {firstname,lastname,address: {city},
}=person
console.log(city);

添加数据

person.school="anhuiyoudian";

json数据转换

//对象数组
const todos=[{id:1,text:"Take out trash",isCompleted:true,},{id:2,text:"Meeting with boss",isCompleted:true,},{id:3,text:"Dentist appt",isCompleted:false,},
]
// 使用JSON.stringify()方法，将数据转换成json格式数据
const todoJSON =JSON.stringify(todos)
console.log(todoJSON)
console.log(todos)
debugger;

13.if-else if -else

const x="10";
//不考虑x的数据类型“==”
if (x==10){console.log("x is 10");
};
//考虑x的数据类型“===”
if (x===10){console.log("x is 10");}
else if(x==="10"){console.log("x's docker is 10");
}
else{console.log("x is not 10");
}
debugger;

14.三目运算符

const x=11;
const color=x>10?"red":"blue"; //相当于c语言的三目运算符
console.log(color);
debugger;

15.switch

const x=9;
const color="green";
switch(color){case "red":console.log("color is red");break;case "blue":console.log("color is blue");break;// 默认default:console.log("color is not red or blue");break;
}
debugger;

16.循环

1.for

// 相当于c语言的for循环
for (let i =0;i<=10;i++){console.log(`For Loop Number:${i}`);  // 格式化输出
};
debugger;

例子：

// 相当于c语言的while循环
//对象数组
const todos=[{id:1,text:"Take out trash",isCompleted:true,},{id:2,text:"Meeting with boss",isCompleted:true,},{id:3,text:"Dentist appt",isCompleted:false,},
]
// 利用for循环
for (let todo of todos){console.log(todo.text); //循环遍历每个数组中的字典text中的内容
}
debugger;

或：

// 利用for循环
for (let i=0;i<todos.length;i++){console.log(todos[i].text); //循环遍历每个数组中的字典text中的内容
}
debugger;

2.while

// 相当于c语言的while循环
let i=0;
while (i<10){console.log(`while loop number :${i}`);i++;
};
debugger;

17.函数

function func(){函数的内容···
}

18.js在html中的应用：

1.添加标签和数据

DOM，就是一个模块，模块可以对HTML页面中的标签进行操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}</style>
</head>
<body><ul id="city"><!-- <li>北京</li> --></ul><script type="text/javascript">// 定义数组var cityList=['北京','上海','深圳']// 利用for循环取出数组每个元素。// 循环索引for(var idx in cityList){// 取出元素var text=cityList[idx];// 创建<li></li>var tag=document.createElement("li");// 在li标签中写入内容tag.innerText=text;// 添加到id=city那个标签的里面。DOMvar parentTag=document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
</html>

单击:onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}</style>
</head>
<body><!-- onclick是单击列表 --><input type="button" value="点击添加" onclick="addCityInfo()"><ul id="city"><!-- <li>北京</li> --></ul><script type="text/javascript">// 定义函数function addCityInfo(){// 创建li标签var newTag=document.createElement("li");newTag.innerText="联通"; //给标签添加数据// 添加到id=city那个标签的里面var parentTag=document.getElementById("city");parentTag.appendChild(newTag);}</script>
</body>
</html>

双击:ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}</style>
</head>
<body><!-- onclick是单击列表 --><input type="button" value="点击添加" ondblclick="addCityInfo()"><ul id="city"><!-- <li>北京</li> --></ul><script type="text/javascript">// 定义函数function addCityInfo(){// 创建li标签var newTag=document.createElement("li");newTag.innerText="联通"; //给标签添加数据// 添加到id=city那个标签的里面var parentTag=document.getElementById("city");parentTag.appendChild(newTag);}</script>
</body>
</html>

提示框和不能为空

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}</style>
</head>
<body><input type="text" placeholder="请输入内容" id="txtUser"><!-- onclick是单击列表 --><input type="button" value="点击添加" onclick="addCityInfo()"><ul id="city"><!-- <li>北京</li> --></ul><script type="text/javascript">// 定义函数function addCityInfo(){// 1.找到输入框标签var txtTag=document.getElementById("txtUser");// 2.获取input框中用户输入的内容var newString=txtTag.value;// 3. 判断用户输入是否为空，只有不为空才能继续if (newString.length>0){// 4.创建li标签var newTag=document.createElement("li");newTag.innerText=newString; // 5.给标签添加数据// 6.添加到id=city那个标签的里面var parentTag=document.getElementById("city");parentTag.appendChild(newTag);// 7.将input框内清空txtTag.value="";}else{// 8. 中断运行过程，显示提示框alert("输入不能为空");}}</script>
</body>
</html>

效果图：

在这里插入图片描述

19. jQuery

19.1 引用：

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

19.2 使用js修改html内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内容修改</title><style>body{margin: 0;}</style>
</head>
<body><h1 id="text">中国联通</h1><script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script><script type="text/javascript">// 方法1：使用：document.getElementById('属性')，再次使用.innerHTML修改内容document.getElementById('text').innerHTML="中国移动";//方法2：使用js第三方库jquery的$查找属性然后.text修改文本$("#text").text("中国移动")</script>
</body>
</html>

19.3 jquery中选择器的选择

19.3.1 id选择器

<h1 id="txt">中国联通</h1>

引用js的第三方库jquery

$("#txt")

19.3.2 样式选择器

<h1 class="txt">中国联通</h1>

引用js的第三方库jquery

$(".txt")

19.3.3 标签选择器

<h1 id="txt">中国联通</h1>

引用js的第三方库jquery

$("h1")

19.3.4 层级选择器

<h1 id="c1">中国联通</h1>
<div class="c2"><div class="c3"><a></a></div>
</div>

引用js的第三方库jquery

$(".c2 .c3 a") // 类c2标签下的类c3标签下的所有a标签

19.3.5 多选择器

<h1 id="c1">中国联通</h1>
<div class="c2"><div class="c3"><a></a></div>
</div>
<div id="c2"><div class="c3"><a></a></div>
</div>

引用js的第三方库jquery

$("#c2,.c3,a") // 多选择器，用逗号分隔

19.3.6 属性选择器

<input type="text" name="n1"/>
<input type="text" name="n1"/>
<input type="text" name="n2"/>

引用js的第三方库jquery

$("input[name="n1"]") // 选择属性为name="n1"

19.3.7 相邻关系

<div><div>北京</div><div id="c1">上海</div><div>深圳</div>
</div>

引用js的第三方库jquery

$("#c1").prev // 上一个
$("#c1").next // 下一个
$("#c1").next.next // 下一个下一个

19.3.8 找父子和儿子

<div><div><div>北京</div><div id="c1"><div>龙华区</div><div class="p">福田区</div><div>龙岗区</div></div><div>深圳</div><div>上海</div></div><div>赣州</div><div>南昌</div><div>南京</div></div>
</div>

引用js的第三方库jquery

$("#c1").parent()  // 父亲 “北京”
$("#c1").parent().parent()  // 父亲的父亲 div$("#c1").children()  // 所有儿子
$("#c1").children(".p")  // 所有儿子的p类属性$("#c1").find(".p")  // 去所有子孙中寻找class="p"
$("#c1").find("div")  // 去所有子孙中寻找div

19.3.9案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航</title><style>body{margin: 0; /* 去除body内边距*/}.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px dotted #dddddd;cursor: pointer;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><div class="menus"><div class="item"><div class="header" οnclick="clickMe(this);">上海</div><div class="content hide"><a href="#">宝山区</a><a href="#">青浦区</a><a href="#">浦东新区</a><a href="#">浦和区</a></div></div><div class="item"><div class="header" οnclick="clickMe(this);">深圳</div><div class="content hide"><a href="#">龙华区</a><a href="#">龙岗区</a><a href="#">宝安区</a><a href="#">福田区</a></div></div></div><script src="C:\Users\Bin\Desktop\my study\django+前端+数据库\bootstrap-3.4.1-dist\bootstrap-3.4.1-dist\js\bootstrap.js"></script><script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script><script type="text/javascript">function clickMe(self){var hasHide=$(self).next().hasClass("hide");if(hasHide){$(self).next().removeClass('hide');}else{$(self).next().addClass("hide");}}</script>
</body>
</html>

效果图
在这里插入图片描述

19.3.10 值的操作

<div id='c1'>内容
</div>

$("#c1").text() //获取文本内容
$("#c1").text("休息") //设置文本内容

<input type="text" id="c2"/>

$("#c1").val()
$("#c1").val("输入文本") //设置id的值

19.3.11 案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航</title><style>body{margin: 0;}.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px dotted #dddddd;cursor: pointer;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><input type="text" id="txtUser" placeholder="用户名"><input type="text" id="txtEmail" placeholder="邮箱"><input type="button" value="提交" onclick="getInfo()"><ul id="view"></ul><script src="C:\Users\Bin\Desktop\my study\django+前端+数据库\bootstrap-3.4.1-dist\bootstrap-3.4.1-dist\js\bootstrap.js"></script><script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script><script type="text/javascript">function getInfo(){// 取出id为#txtUser和#txtEmail的内容var username=$("#txtUser").val();var email=$("#txtEmail").val();//按这个格式输出var dataString=username+"-"+email;// 创建li标签，在li的内容写入内容var newli=$("<li>").text(dataString);// 将新创建的li标签添加到ul里面$("#view").append(newli);}</script>
</body>
</html>

效果图：
在这里插入图片描述

19.3.12 删除内容

<!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><ul><li>百度</li><li>谷歌</li><li>搜狗</li></ul><script src="C:\Users\Bin\Desktop\my study\django+前端+数据库\bootstrap-3.4.1-dist\bootstrap-3.4.1-dist\js\bootstrap.js"></script><script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script><script type="text/javascript">// 点击这个标签可以删除内容$("li").click(function(){$(this).remove();})</script>
</body>
</html>