在Python的Web前端开发或者网站建设中，JavaScript扮演着至关重要的角色。作为Web开发的核心技术之一，JavaScript主要用于增强网页的交互性和动态性，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。通过JavaScript，开发者可以实现表单验证、数据处理、动画效果等功能。
虽然JavaScript和Python是两种完全不同的编程语言，具有不同的书写方式。但是，在某些基础语法上，它们还是有很多相似之处。所以，学过Python后会很容易掌握JavaScript。例如，Python和JavaScript都支持动态类型，不需要提前声明变量的类型，此外，两种语言在函数定义、循环和条件语句等方面也有许多共通之处，这有助于学习者快速上手JavaScript。
1、JavaScript概念
JavaScript（简称JS）是一种轻量级的编程语言，几乎所有的现代浏览器都内置了JavaScript引擎，所以不需要额外安装JavaScript环境，就可以在任意浏览器端执行JavaScript代码。JavaScript脚本语言允许开发者为网页添加动态效果和复杂的交互功能。JavaScript是构建网页不可或缺的语言，且与HTML和CSS共同构成了网页开发的三大核心技术。
2、JavaScript书写形式
JavaScript和CSS一样，JavaScript代码也可以通过内联式、内嵌式、外部式3种方式嵌入到HTML代码中，例如：
内嵌式：写于HTML文件里，用<script>标签包住，例如：<script>alert("输出123456")</script>。
内联式：将代码直接写到标签内部，列如：<button onclick="alert('输出123456')">点击按钮弹出提示框</button>。
外部式：通过在外部单独新建一个以“.js”为后缀的文件（在该js文件里保存JavaScript代码），再通过<script>标签引入到HTML文件中。例如：<script src="test.js"></script>。
JavaScript的3种方式嵌入到HTML中的示例代码如下：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的3种嵌入方式</title>
<!--外部式，通过script标签引入外部的JavaScript文件-->
<script src="test.js"></script>
<!--内嵌式，JavaScript代码写于HTML文件里-->
<script>
alert("输出123456")
</script>
</head>
<body>
<!--内联式，直接嵌入到HTML标签内部-->
<input type="button" value="这是一个按钮" onclick="alert('输出123456')">
</body>
</html>
我们把上面的代码保存在本地文件test.html内，鼠标右键点击test.html文件后，选择打开方式为“Microsoft Edge”或者其它任意浏览器，结果在浏览器中会弹出一个对话框输出“输出123456”，或者按页面中的按钮也会再次弹出“输出123456”对话框。
3、JavaScript书写语法
（1）每一行代码都要以英文的分号“;”结尾
在JavaScript中，虽然大多数情况下每一行代码结尾可以省略分号“;”，但为了避免潜在的错误或混淆，最好在每一行代码的末尾使用分号。注意，JavaScript中的所有标点符号必须使用英文状态下的标点符号。
（2）JavaScript中代码的注释
JavaScript同样提供了注释功能，并且可以随意编辑注释内容，浏览器会忽略它，注释主要用于提高代码的可读性和可维护性。在JavaScript中有两种基本注释类型：单行注释和多行注释。
单行注释：使用两个斜杠“//”开头，后面的内容直到该行结束都被视为注释。例如：
// 这是一个单行注释
console.log("输出123456");
多行注释：使用斜杠星号“/*”开头，星号斜杠“*/”结尾，中间的内容都被视为注释。例如：
/* 这是一个多行注释可以跨越多行
console.log("Hello, World!"); */
单行注释适用于简短的注释，比如对某一行代码的快速说明。多行注释可以跨越多行，适合用于函数描述、复杂的算法解释或者临时屏蔽多行代码块。
（3）区分大小写
与Python一样，JavaScript是区分大小写的语言，这意味着关键字、变量、函数名等必须保持一致的大小写格式。
（4）代码块
在JavaScript中，大括号“{}”包裹起来的内容表示代码块
动手练一练：
if(count == 5){
alert(count);
}
（5）空格和换行符
JavaScript会忽略代码之间的空格。多数情况下，JavaScript同样会忽略换行符。但在编写JavaScript代码时，为了提高代码的可读性，尤其是当一行代码过长时，可以适当地换行以增加代码的清晰度，而无需担心代码执行的正确性受到影响。换行可以帮助我们更好地组织和理解代码。
4、JavaScript基础语法
（1）JavaScript的输入语句
在JavaScript中，输入语句通常是指用来获取用户在浏览器中输入的数据。在JavaScript中，我们可以使用prompt()函数来实现这个功能。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的输入语句</title>
</head>
<body>
<script>
// 输入语句
prompt("请输入一些文本")
</script>
</html>
通过浏览器执行以上代码，prompt()函数会弹出一个对话框，该对话框中包含一条消息，并要求用户输入某些内容。
（2）JavaScript的输出语句
JavaScript的输出语句包括：document.write()，alert()，confirm()，console.log()共4种输出方法。
console.log()：使用console对象的log()方法将信息输出到浏览器的控制台。在JavaScript中，控制台打印是一种常用的调试手段，它允许开发者在浏览器的控制台中输出信息，以便于跟踪和调试代码。JavaScript在浏览器控制台中打印信息的方法比较简单，在大多数现代浏览器中，可以通过按F12键或者右键点击页面空白位置选择“检查”（Inspect）来打开开发者工具。接着，在开发者工具中，可以看到多个标签页，如“元素”（Elements）、“控制台”（Console）、“网络”（Network）等，我们点击“控制台”（Console）标签页就可以看到控制台输出的内容。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>console.log()输出示例</title>
</head>
<body>
<body>
<script>
// 输出文本
console.log('你好!');// 输出: 你好!
// 输出变量的值
let name = '张三';
console.log(name); // 输出: 张三
// 输出表达式的结果
let age = 18;
console.log('我今年' + age + '岁了。'); // 输出: 我今年18岁了。
// 输出对象
let person = { name: '李四', age: 22 };
console.log(person); // 输出: { name: '李四', age: 22 }
// 输出数组
let numbers = [7, 8, 9, 10];
console.log(numbers); // 输出: [7, 8, 9, 10]
</script>
</body>
</html>
document.write()：如果你想要在HTML页面中直接显示文本，你可以使用document.write()，但这种方式不推荐，因为它会重写整个页面的内容。
alert()：使用alert()函数，浏览器可以弹出一个警示框。alert()函数用于显示一个简单的对话框，包含一条消息和一个确定按钮。这个对话框通常用于向用户显示警告或错误信息。
confirm()：使用confirm()函数，浏览器可以弹出一个对话框，包含一条消息、一个确定按钮和一个取消按钮。confirm()函数的返回值为true或false，当用户点击“确认”按钮时，confirm()函数会返回true，当用户点击“取消”按钮时，confirm()函数会返回false。允许开发者根据confirm()函数的返回值来执行其他操作。
JavaScript中的4种输出方法示例代码如下：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的输出语句</title>
</head>
<body>
<body>
<script>
//在HTML页面中直接输出文本
document.write("输出123456");
// 控制台输出语法，程序员调试使用
console.log("输出123456");
// 页面弹出警告对话框
alert("alert函数输出123456");
// 页面弹出带有确认和取消按钮的对话框
confirm("confirm函数输出123456");
</script>
</body>
</html>
通过浏览器执行以上代码后，浏览器会先后分别弹出一个alert函数对话框和confirm函数对话框，最后在HTML页面中直接输出文本内容“输出123456”。这时，我们按F12键打开浏览器的控制台，同样可以看到console.log()函数输出的内容“输出123456”。
除了使用console.log()方法在浏览器控制台进行打印操作，JavaScript的console对象还提供了其他几种有用的方法，用于在控制台中输出不同类型的信息：
console.error()：输出错误信息，通常显示为红色文本。
console.warn()：输出警告信息，通常显示为黄色文本。
console.info()：输出一般信息到控制台，通常会以蓝色文本显示，虽然很多浏览器将其与console.log()的输出视为相同。
console.table()：以表格形式输出数据，对于查看对象数组特别有用。
例如，使用console.error()输出错误信息，示例代码如下：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用console.erro方法在控制台输出错误信息</title>
</head>
<body>
<body>
<script>
// 控制台输出错误信息，并且显示为红色文本
console.error("这是一条错误消息。")
</script>
</body>
</html>
通过浏览器执行以上代码后，我们按F12键打开浏览器的控制台，可以看到console.error()函数输出的红色文本内容“这是一条错误消息”。
（3）JavaScript中的变量声明
在JavaScript中，变量可以理解为是一个可以用来存储数据的容器，它可以保存各种类型的数据，如数字、字符串、对象等。变量声明是创建新变量的过程。JavaScript中主要有三种方式来声明变量：var、let和const。每种方式都有其特定的用途和行为。
var变量声明：通过var声明的变量具有函数作用域。这意味着如果在一个函数内部使用var声明一个变量，该变量只在当前函数内部可用。如果在全局作用域中声明，它就是一个全局变量。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用var声明变量</title>
</head>
<body>
<body>
<script>
// 声明全局变量a
var a = 2;
// 定义example()函数
function example() {
var b = 3; // 只在当前函数内部可用
console.log(b); // 输出: 3
console.log(a); // 输出: 2
}
example(); // 必须执行example()函数
console.log(a); // 输出: 2
console.log(b); // 输出错误提示 : Uncaught ReferenceError: b is not defined
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
3
2
2
Uncaught ReferenceError: b is not defined
let变量声明：通过let声明的变量具有块级作用域。这意味着在“{}”代码块（如循环或条件语句）中声明的let变量，只在当前代码块中可见。
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用let声明变量</title>
</head>
<body>
<body>
<script>
// 定义example()函数
function example() {
let a = 3; // 只在当前函数内部可用
console.log(a); // 输出: 3
}
example(); // 必须执行example()函数
console.log(a); // 输出错误提示 : Uncaught ReferenceError: a is not defined
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
3
Uncaught ReferenceError: a is not defined
const变量声明：const用于声明一个不可变的常量，一旦声明，其值就不能改变。与let声明一样，const也具有块级作用域，所以在“{}”代码块中const声明的变量，只在当前代码块中可见，并且const声明的变量一旦赋值后不可重新赋值。const最适合用于那些不应该被重新赋值的变量，比如配置项、API端点、数学常数等。通过使用const，我们可以向其他开发者传达这些变量是不可变的信息，从而提高代码的可读性和可靠性。例如：
动手练一练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用const声明变量</title>
</head>
<body>
<body>
<script>
const PI = 3.14159;
console.log(PI); // 输出: 3.14159
// 下面的代码会抛出错误，因为常量PI是不可变的
PI = 3; // 输出错误提示 : TypeError: Assignment to constant variable.
</script>
</body>
</html>
通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：
3.14159
TypeError: Assignment to constant variable.