针对“建设网站教程(4):JavaScript初级教程”的完整攻略,我提供如下说明。
一、JavaScript是什么?
JavaScript是一种客户端脚本语言,常被用于在网页前端增加交互性和动态效果。它是一种解释性语言,不需要预编译,可以在所有现代的浏览器上执行。
二、 JavaScript基础语法
在JavaScript中,所有语句都必须以分号(;)结尾。JavaScript用{}来表示控制语句的块。下面是一个简单的例子,它输出控制台上的一句话:
console.log("Hello World!");
上述输出语句会在浏览器的控制台上显示出来。
三、变量、运算符和数据类型
1. 变量
JavaScript中的变量定义需要使用关键字var
、let
或const
。其中,var
和let
可以被重新赋值,而const
定义的变量值是不可被重新赋值的。例如,下列代码定义了一个变量x,并给它赋了一个字符串值:
var x = "123";
2. 运算符
JavaScript中的运算符包括算术运算符、比较运算符、逻辑运算符等。例如算术运算符包括+、-、*、/等,比较运算符包括<、>、==、!=等。
3. 数据类型
JavaScript中的数据类型包括数字、字符串、布尔值、null、undefined等。例如,下列代码定义了一个数字类型的变量x和一个字符串类型的变量y:
var x = 10;
const y = "Hello";
四、JavaScript中的流程控制
JavaScript中的流程控制有if语句、while语句、for语句等。以下是if语句的一个例子:
if (x == 10) {
console.log("x等于10");
} else {
console.log("x不等于10");
}
上述代码通过判断变量x是否等于10,来输出不同的结果。
五、 DOM操作
JavaScript最重要的功能之一就是能够访问和修改HTML元素,称为Document Object Model (DOM)。DOM是由HTML、CSS和JavaScript共同构成的一个重要的概念。
下面是一个简单的DOM例子,我们通过JavaScript修改HTML标记内容:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript操作DOM</p>
<script>
document.getElementById("demo").innerHTML = "你好,JavaScript!";
</script>
</body>
</html>
六、 示例一:动态修改图片样式
下面是一个HTML元素的例子,在鼠标经过这个元素的时候,图片以另外一种样式展示:
<!DOCTYPE html>
<html>
<body>
<div>
<img id="myImg" src="example.jpg">
</div>
<script>
var img = document.getElementById("myImg");
img.addEventListener("mouseover", function() {
img.style.border = "5px solid red";
img.style.borderRadius = "50%";
});
img.addEventListener("mouseout", function() {
img.style.border = "none";
img.style.borderRadius = "0%";
});
</script>
</body>
</html>
七、 示例二:倒计时
下面是一个好玩的倒计时的例子,在倒计时结束时,页面上显示一个文本:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="demo"></h1>
<script>
var deadline = new Date("Jan 21, 2022 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var timeLeft = deadline - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + " 天 " + hours + " 小时 "
+ minutes + " 分钟 " + seconds + " 秒 ";
if (timeLeft < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "时间到了,请关注最新动态!";
}
}, 1000);
</script>
</body>
</html>
八、 总结
上述是初学者在学习JavaScript时的一些基础点,包括语法、DOM操作、流程控制以及一些常见应用。学术JavaScript需要不断的反复练习掌握熟练的技巧。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:建设网站教程(4):JavaScript初级教程 - Python技术站