建设网站教程(4)：JavaScript初级教程

2023年5月18日上午12:44 • JavaScript

针对“建设网站教程(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>