如何在网页上编写 javascript (1)

📌 相关文章

📜 如何在网页上编写 javascript (1)

📅 最后修改于: 2023-12-03 14:52:58.185000 🧑 作者: Mango

如何在网页上编写 JavaScript

JavaScript 是一种广泛使用的前端编程语言，可以用于在网页上交互性和动态性。本文将介绍如何在网页上编写 JavaScript，让你的网页更加生动有趣。

在网页中嵌入 JavaScript

可以在网页中的 <script> 标签中编写 JavaScript 代码。需要在 HTML 文件的 <head> 或者 <body> 中添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <script type="text/javascript">
      //JavaScript 代码
    </script>
  </head>
  <body>
    <!-- HTML 内容 -->
  </body>
</html>

其中，<script> 标签用于包裹 JavaScript 代码。在网页加载时或被调用时，JavaScript 代码会被执行。可以将 JavaScript 代码写在文件中，如: main.js，然后在 HTML 文件中链接引入：

<script type="text/javascript" src="main.js"></script>

编写 JavaScript 代码

JavaScript 的语法类似于其他编程语言。下面是一些基本的语法和示例。

变量和数据类型

//定义变量
var a = 1; 
let b = 'hello'; 
const c = true; 

//数据类型
typeof a; //number
typeof b; //string
typeof c; //boolean

函数

//定义函数
function myFunction(a, b) {
  return a + b;
}

//调用函数
myFunction(1, 2); //3

条件语句

//if else 语句
let a = 1;
if(a > 0){
  console.log('a is positive');
}else{
  console.log('a is negative');
}

//switch 语句
let fruit = 'banana';
switch (fruit) {
  case 'banana':
    console.log('Yellow');
    break;
  case 'apple':
    console.log('Red');
    break;
  default:
    console.log('Unknown');
}

循环语句

//for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

//while 循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

DOM 操作

可以使用 JavaScript 操作网页中的 DOM 元素，实现动态效果。

<!DOCTYPE html>
<html>
  <body>

    <h1 id="title">Title</h1>

    <button onClick="changeText()">Click Me</button>

    <script type="text/javascript">
      function changeText() {
        document.getElementById("title").innerHTML = "New Title";
      }
    </script>

  </body>
</html>

这里通过 JavaScript 选中了 id="title" 的元素并修改了它的 innerHTML 属性。点击按钮后，网页中的标题会被修改。

总结

本文为您介绍了如何在网页上编写 JavaScript，使您的网页更加生动有趣。本文讲解了在网页中嵌入 JavaScript，以及如何编写 JavaScript 代码。通过本文的学习，你可以更好地应用 JavaScript 到你的网页和 Web 项目中。