学语言，看这里，如何快速掌握JavaScript？
本篇文章是基于会点c语言和会点python基础的，去更容易上手javascript
学习笔记分享✨🌈👏👏👑👑
javascript目录
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那个标签的里面。DOM
var 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>
20.调试问题
调试：没有可用的调试程序，无法发送“variables”
解决：代码最后添加且打上断点
debugger;
原文地址：https://blog.csdn.net/weixin_74994771/article/details/140731947
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！