JavaScript 是一种广泛用于网页开发的客户端脚本语言，具有解释型、面向对象、弱类型等特点。本文详细介绍了 JavaScript 的基础知识，包括其历史背景、与 Java 的区别、基本语法（变量、数据类型、运算符）、控制语句（选择结构、循环结构）、函数定义与调用、事件处理机制以及内置对象（String、Array、Date、Math）。此外，还涵盖了 HTML DOM 操作（查找元素、修改内容样式）和计时器功能（setTimeout、setInterval），旨在帮助初学者掌握 JavaScript 核心概念并应用于实际开发中。
JavaScript(简称 Js)是当前最流行、应用最广泛的客户端 (网页) 脚本语言，用来在网页中添加动态效果与交互功能，在 web 开发中拥有举足轻重的地位。
JavaScript、HTML、CSS 共同构成网页：
JavaScript 原名: LiveScript，是由美国网景 (Netscape Communications Corporation) 开发的一种用于对网页操作的脚本语言，LiveScript 也是面向对象的。后来 sun 公司与网景合作更名为 JavaScript。
脚本语言: 无需编译，可以由某种解释器直接执行 (sql python html css JavaScript)，直接由某种解释器 (引擎) 解释执行，逐行从上到下解释执行。
JavaScript 和 Java 完全是两种不同的语言
区别
JavaScript 程序不能独立运行，只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中，借助浏览器环境来运行。
在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签，我们可以在 <script> 标签中编写 JavaScript 代码，具体步骤如下：
<head> 标签或者 <body> 标签中插入 <script> 标签；<script> 标签中写 JavaScript 代码。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// JavaScript 代码写的地方
alert("你好 JavaScript")
</script>
</head>
<body>
</body>
</html>
注：alert('welcome!'); 提示对话框。
JavaScript 代码不仅可以放在 HTML 文档中也可以放在 JavaScript 脚本文件中。JavaScript 脚本文件，扩展名是 .js，使用任何文本编辑器都可以编辑。
具体步骤如下：
.js 文本；alert("你好");；<script type="text/javascript" src="test.js"></script>；注: 定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
JavaScript 代码可以写在 HTML 文档 <head> 标签与 <body> 标签中，写在不同标签中的执行顺序不同。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
alert("写在<head>标签中");
</script>
</head>
<body>
<script>
alert("写在<body>标签中");
</script>
</body>
</html>
由效果图可以看出，在 HTML 文档中先执行在 <head> 标签中的 JavaScript 代码，后执行 <body> 标签中的代码。
声明变量用 var 关键字：
var name;
声明变量的同时对其赋值：
var name = "小明";
算数运算符用来执行常见的数学运算，例如加法、减法、乘法、除法等。
var x = 10; var y = 4;
console.log("x + y =", x + y); // 输出：x + y = 14
console.log("x - y =", x - y); // 输出：x - y = 6
console.log("x * y =", x * y); // 输出：x * y = 40
console.log("x / y =", x / y); // 输出：x / y = 2.5
console.log("x % y =", x % y); // 输出：x % y = 2
注：在 JavaScript 中的不同
var a = "10"; var b = 5; var c = 10; var d = "a";
// + 字符串连接 加法运算
// alert(c-b); 减法
// alert(a-b); // 5 "字符串 (数字)" - 数值 = 数值 会把表达式中的数字 字符串尝试类型转换
// alert(d-c); // NaN 字符串不能转换为数值返回 NaN
// alert(a==c); true 只比较值是否相等
// alert(a===c); false 全等 比较值和类型
赋值运算符用来为变量赋值。
var x = 10; x += 20; console.log(x); // 输出：30
var x = 12, y = 7; x -= y; console.log(x); // 输出：5
x = 5; x *= 25; console.log(x); // 输出：125
x = 50; x /= 10; console.log(x); // 输出：5
x = 100; x %= 15; console.log(x); // 输出：10
JavaScript 中的 + 和 += 运算符除了可以进行数学运算外，还可以用来拼接字符串。
var x = "Hello "; var y = "World!";
var z = x + y; console.log(z); // 输出：Hello World!
x += y; console.log(x); // 输出：Hello World!
自增、自减运算符用来对变量的值进行自增 (+1)、自减 (-1) 操作。
var x;
x = 10; console.log(++x); // 输出：11 console.log(x); // 输出：11
x = 10; console.log(x++); // 输出：10 console.log(x); // 输出：11
x = 10; console.log(--x); // 输出：9 console.log(x); // 输出：9
x = 10; console.log(x--); // 输出：10 console.log(x); // 输出：9
比较运算符会比较左右两侧的数据，最后返回一个布尔值 (true 或者 false)。
var x = 25; var y = 35; var z = "25";
console.log(x == z); // 输出：true
console.log(x === z); // 输出：false
console.log(x != y); // 输出：true
console.log(x !== z); // 输出：true
console.log(x < y); // 输出：true
console.log(x > y); // 输出：false
console.log(x <= y); // 输出：true
console.log(x >= y); // 输出：false
逻辑运算符通常来组合多个表达式，逻辑运算符的运算是一个布尔值 (true/false)。
var year = 2021; // 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
console.log(year + " 年是闰年。");
} else{
console.log(year + " 年是平年。");
}
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法：
var result = (条件表达式)?结果 1:结果 2
当条件成立返回 ? 后的内容，否则返回 : 后的内容。
代码示例：
var c = 1; var b = 2; var a = c > b ? c : b; // a = b;
JavaScript 中的选择结构和其他语言是相通的也是一样的。
函数定义的基本语法：
function functionName([arguments]) {
javascript statements;
[return expression]
}
function: 表示函数定义的关键字；functionName: 表示函数名；arguments: 表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空；statements: 表示实现函数功能的函数体；return expression: 表示函数将返回 expression 的值，同样是可选的语句。代码示例：
function sayHello(name){
alert("Hello " + name);
return 0;
}
函数调用：
<script> 标签中直接调用代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(text){
alert(text);
}
test("函数在<script>标签中调用");
function a(){
test("函数在其他函数中调用");
}
a();
</script>
</head>
<body>
<input type="button" value="测试" onclick="test('组件调用函数')"/>
</body>
</html>
parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字分别转换成整数，如果以字母开头，则返回 'NaN'；parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回'NaN'；typeof (arg) 返回 arg 值的数据类型；eval(arg) 可运算某个字符串；alert(String) 可以在浏览器中弹出一个提示框，里面的内容是 String；console.log(String) 在控制面板上打印 String。JS 事件（event）是当用户与网页进行交互时发生的事情，例如单击某个链接或按钮，在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
常用事件:
onclick() 鼠标点击时onblur() 标签失去焦点onfocus() 标签获得焦点onmouseover() 鼠标被移到某标签之上onmouseout() 鼠标从某标签移开onload() 是在网页加载完毕后触发相应的事件处理程序onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<!-- 点击事件 -->
onclick:<input type="button" value="onclick" onclick="test('pink')" />
<br />
<!-- onblur() 标签失去焦点 -->
onblur:<input type="text" onblur="test('red')" />
<br />
<!-- onfocus() 标签获得焦点-->
onfocus:<input type="text" onfocus="test('blue')"/>
<br />
<!-- onmouseover() 鼠标被移到某标签之上 -->
onmouseover:<input type="text" onmouseover = "test('black')"/>
<br />
<!-- onmouseout 鼠标从某标签移开-->
onmouseout:
onchange:
属性
方法
charAt(n): 返回该字符串位于第 n 位的单个字符。indexOf(char): 返回指定 char 首次出现的位置。lastIndexOf(char): 跟 indexOf() 相似，不过是从后边开始找。substring(start,end): 返回原字符串的子字符串，该字符串是原字符串从 start 位置到 end 位置的前一位置的一段。substr(start,length): 返回原字符串的子字符串，该字符串是原字符串从 start 位置开始，长度为 length 的一段。split(分隔符字符): 返回一个数组，该数组是从字符串对象中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。var string = new String("String 字符串 r2323");
console.log(string.charAt(2)); // 打印结果是：e
console.log(string.indexOf('r'));//打印结果是：3
console.log(string.lastIndexOf('r')); //打印结果是：9
console.log(string.substring(2,5)); // 打印结果是:rin
console.log(string.substr(2,3));//打印结果是:rin
console.log(string.split('r'));//打印结果是:一个数组:'st' 'ing 字符串' '2323'
数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。
创建 Array 对象的语法格式如下：
var arr = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：
[下标] = 值;
如果想在定义数组的时候直接初始化数据，请用：
var arr = new Array(, , ...);
还可以 var arr = [, , ...];
var a = new Array();
a[0] = 1;
a[1] = "aaa";
a[5] = true;
var b = new Array(1,2,3,4,5);
var a = [1,2,3,4,5];
a[5] = 3;
属性
方法
join(): 返回一个字符串，该字符串把数组中的各个元素串起来，用置于元素与元素之间。reverse(): 使数组中的元素顺序反过来。如果对数组 [1, 2, 3] 使用这个方法，它将使数组变成：[3, 2, 1]。sort(): 使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺序排列。function sortNumber(a,b){ return a - b; }代码演示:
var arr = [1, 11, 12, 55, 66, 8, 7, 9];
console.log(arr.join()); //打印结果:1,11,12,55,66,8,7,9
var str = "Hello World";
var reversedStr = str.split("").reverse().join("");
console.log(reversedStr); // Output: "dlroW olleH"
console.log(arr.sort()); // Output: [1,11,12,55,66,7,8,9] 这里是根据字符计算的
arr.sort(function(a, b) { return a - b; });
console.log(arr); // Output: [1, 7, 8, 9, 11, 12, 55, 66]
//反序排列
arr.sort(function(a, b) { return b - a; });
console.log(arr); // Output: [66, 55, 12, 11, 9, 8, 7, 1]
获取日期
new Date() 返回当日的日期和时间getFullYear() 返回四位数字年份getDate() 返回一个月中的某一天 (1 ~ 31)getMonth() 返回月份 (0 ~ 11)getDay() 返回一周中的某一天 (0 ~ 6)getHours() 返回 Date 对象的小时 (0 ~ 23)getMinutes() 返回 Date 对象的分钟 (0 ~ 59)getSeconds() 返回 Date 对象的秒数 (0 ~ 59)代码演示：下代码是一个简单时间表的制作
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function addTextToDiv() {
var myDiv = document.getElementById('myDiv');
var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
var day = currentDate.getDate();
var hour = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
myDiv.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minutes + ":" + seconds;
}
setInterval("addTextToDiv()",1000);
</script>
</head>
<body onload="addTextToDiv()">
<div>
Math 对象，提供对数据的数学计算。
属性
方法
Math.abs(x) 绝对值计算；Math.pow(x,y) 数的幂；x 的 y 次幂Math.sqrt(x) 计算平方根；Math.ceil(x) 对一个数进行上舍入Math.floor(x) 对一个数进行下舍入Math.round(x) 把一个数四舍五入为最接近的整数Math.random() 返回 0 ~ 1 之间的随机数Math.max(x,y) 返回 x 和 y 中的最大值Math.min(x,y) 返回 x 和 y 中的最小值如果我们想对标签进行操作，我们就得找到他们，那我们怎么找到他们呢？
有四种方法可以找到他们：
document.getElementById("id");document.getElementsByTagName("p");document.getElementsByClassName("p");document.getElementsByName("name");Html dom 允许 JavaScript 改变 html 标签的内容。改变 HTML 标签的属性 document.getElementById("username").value="new value";
代码演示：演示代码就让通过 js 修改按钮的 value 值，让按钮的 value 值从测试变到按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
document.getElementById("button").value = "按钮";
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test()"/>
</body>
</html>
代码演示：修改图片
document.getElementById("image").src="new.jpg";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
document.getElementById("img").src = "img/3.jpg";
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test()"/>
<img src="img/1.jpg"/>
</body>
</html>
修改 HTML 内容的最简单的方法是使用 innerHTML 属性 document.getElementById("div").innerHTML=new HTML
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
document.getElementById("div").innerHTML = "加油胜利就在前方";
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test()"/>
<div>你好，登山者</div>
</body>
</html>
这里只是举例说明了这几个，我们还有更多的操作，自己动动手，去发现更多吧。
html dom 允许 JavaScript 改变 html 标签的样式。
这里演示上面的文案修改颜色
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
document.getElementById("div").innerHTML = "加油胜利就在前方";
}
function color(){
document.getElementById("div").style.color = "pink";
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test()"/>
<div>你好，登山者</div>
<input type="button" value="修改颜色" onclick="color()"/>
</body>
这里用一个实例：使一个 div 的背景颜色修改并且循环。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var color = ['red','green','blue'];
var i = 0;
function test(){
var obj1 = document.getElementById("text");
var obj2 = document.getElementById("button");
obj1.style.backgroundColor = color[i];
i++;
if(i==color.length){ i=0; }
obj2.value = color[i];
}
</script>
</head>
<body>
<div></div>
<input type="button" value="red" onclick="test()"/>
</>
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法:
setTimeout("函数","时间") 未来的某时执行代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout 示例</title>
<script>
function showMessage() {
alert("这是一个 setTimeout 示例！");
}
// 调用 showMessage 函数，在 3 秒后显示消息
setTimeout("showMessage()", 3000);
</script>
</head>
<body>
<h1>setTimeout 示例</h1>
<p>页面加载后将在 3 秒后显示一条消息。</p>
</body>
</html>
clearTimeout() 取消 setTimeout()
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout 和 clearTimeout 示例</title>
<script>
var timeoutID;
function showMessage() {
alert("这是一个 setTimeout 示例！");
}
function setupTimeout() {
timeoutID = setTimeout(showMessage, 3000);
}
function cancelTimeout() {
clearTimeout(timeoutID);
alert("定时器已取消！");
}
</script>
</head>
<body>
<h1>setTimeout 和 clearTimeout 示例</h1>
<p>页面加载后将在 3 秒后显示一条消息。</p>
<button onclick="setupTimeout()">设置定时器</button>
<button onclick="cancelTimeout()">取消定时器
setInterval("函数","时间") 每隔指定时间重复调用clearInterval() 取消 setInterval()代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
<br />
<br />
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="停止" onclick="stopTime()"/>
<input type="button" value="复位" onclick="fuwei()"/>
<script>
var num = 0;
var textobj = document.getElementById("text");
textobj.value = 0;
var index;
(){
num++;
textobj. = num;
}
(){
index = (,);
}
(){
(index);
}
(){
num = ;
textobj. = ;
}
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online