JavaScript基础知识大全攻略
介绍
JavaScript作为一种强大的脚本语言，已经成为web开发过程中必不可少的一部分。JavaScript语言的优势是允许网页载入其他的脚本来改变客户端的样式、行为和响应，达到动态网页的效果。本文档主要目的是为了大家提供一份JavaScript的基础知识手册，便于大家学习，也便于作者自己查看。
语法
JavaScript有自己特殊的语法，以下是一些基础的语法：
注释
JavaScript使用两种注释来进行说明，一种是单行注释//，一种是多行注释/* ... */。
// 这是单行注释
/*
这是多行注释
可以换行
*/
变量
在JavaScript中，我们可以使用var、let和const关键字来声明变量。其中var和let都可以声明可变变量，const关键字用来声明不可变量。
var a = "hello";
let b = "world";
const c = 123;
a = "hi"; // a现在的值是"hi"
b = "there"; // b现在的值是"there"
c = 456; // 报错，c是一个常量，不能修改它的值
数据类型
JavaScript中有许多数据类型，包括字符串（string）、数字（number）、布尔值（boolean）、数组（array）等。
let str = "Hello, world!"; // 字符串类型
let num = 123; // 数字类型
let bool = true; // 布尔值类型
let arr = ["apple", "banana", "orange"]; // 数组类型
console.log(str); // 输出 "Hello, world!"
console.log(num); // 输出 123
console.log(bool); // 输出 true
console.log(arr); // 输出 ["apple", "banana", "orange"]
运算符
JavaScript中有许多运算符，包括加号（+）、减号（-）、乘号（*）、除号（/）等。
let a = 1 + 2; // a的值为3
let b = 3 - 1; // b的值为2
let c = 2 * 3; // c的值为6
let d = 6 / 2; // d的值为3
示例
示例1：使用JavaScript实现一个简单的计算器
<!DOCTYPE html>
<html>
<head>
<title>JavaScript计算器</title>
</head>
<body>
<h1>JavaScript计算器</h1>
<input type="text" id="num1" placeholder="请输入第一个数">
<select id="operator">
<option value="+">加号</option>
<option value="-">减号</option>
<option value="*">乘号</option>
<option value="/">除号</option>
</select>
<input type="text" id="num2" placeholder="请输入第二个数">
<button onclick="calculate()">计算</button>
<p>计算结果：<span id="result"></span></p>
<script>
function calculate() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let operator = document.getElementById("operator").value;
let result;
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
}
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>
上面的代码实现了一个简单的带有加减乘除功能的计算器，用户输入两个数和一个运算符，点击计算按钮即可得到相应的结果。
示例2：使用JavaScript实现动态网页效果
<!DOCTYPE html>
<html>
<head>
<title>JavaScript动态效果</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<h1>JavaScript动态效果</h1>
<div id="box"></div>
<script>
let box = document.getElementById("box");
let left = 0;
let top = 0;
setInterval(function() {
box.style.left = left + "px";
box.style.top = top + "px";
left += 5;
top += 3;
}, 50);
</script>
</body>
</html>
上面的代码实现了一个小球移动的动态效果，通过设置定时器，并不断改变小球元素的位置，达到动画效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript基础知识大全 便于大家学习，也便于我自己查看 - Python技术站
微信扫一扫 
支付宝扫一扫 