JavaScript的基本语法

最新推荐文章于 2025-06-29 17:54:55 发布

小袁儿

最新推荐文章于 2025-06-29 17:54:55 发布

阅读量386

点赞数 7

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42535142/article/details/135352695

本文详细介绍了JavaScript的三种编写位置、noscript元素的作用、不同交互方式（如alert、console.log等）、Chrome调试工具的使用，以及JavaScript语句的分号和注释规则，以及VSCode插件在开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JavaScript的编写方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  
  <!-- 1.编写位置一: 编写在html内部(了解) -->
  <a href="#" onclick="alert('百度一下')">百度一下</a>
  <a href="javascript: alert('百度一下')">百度一下</a>

  
  <!-- 2.编写位置二: 编写在script元素之内 -->
  
  <a class="google" href="#" >google一下</a>
  <script>
    // 1.获取元素
    var google = document.querySelector('.google');
    // 2.绑定事件
    google.onclick = function () {
      alert('google一下');
    }
  </script>
  

  <!-- 3.编写位置三: 独立的js文件 -->
  <a class="bing" href="#">bing一下</a>
  <script src="./js/bing.js"></script>

</body>
</html>

bing.js

// 获取元素
var bingAEl = document.querySelector(".bing")

// 监听元素的点击
bingAEl.onclick = function() {
  alert("bing一下")
}

二、<noscript>元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <noscript>
    <h1>您的浏览器不支持JavaScript, 请打开或者更换浏览器~</h1>
  </noscript>

  <script>
    alert("您的浏览器正在运行JavaScript代码")
  </script>

</body>
</html>

三、JavaScript编写的注意事项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a class="bing" href="#">bing一下</a>

  <script src="./js/bing.js"></script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <h1 class="title">我是标题</h1>
  <p>我是段落, 哈哈哈哈</p>

  <!-- 普通的元素 -->
  <script>
    var titleEl = document.querySelector(".title")
    alert(titleEl)
  </script>
  
</body>
</html>

四、JavaScript的交互方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*  */
  </style>
</head>
<body>
  
  <!-- <input type="text"> -->

  <script>
    // 1.交互方式一: alert函数
    alert("Hello World");

    // 2.交互方式二: console.log函数, 将内容输出到控制台中(console)
    // 使用最多的交互方式
    console.log("Hello Coderwhy");

    // 编写的JavaScript代码出错了
    // message.length

    // 3.交互方式三: document.write()
    document.write("Hello Kobe");

    // 4.交互方式四: prompt函数, 作用获取用户输入的内容
    var result = prompt("请输入你的名字: ");
    alert("您刚才输入的内容是:" + result);

  </script>
</body>
</html>

五、Chrome的调试工具

六、JavaScript语句和分号

七、JavaScript的注释

/**
 * 和某人打招呼
 * @param {string} name 姓名
 * @param {number} age 年龄
 */
function sayHello(name, age) {

}

sayHello('Hello', 18)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>
    // 1.单行注释

    // 2.多行注释
    /* 
     我是一行注释
     我是另外一行注释
    */

    // 3.文档注释
    /**
     * 和某人打招呼
     * @param {string} name 姓名
     * @param {number} age 年龄
     */

     
    function sayHello(name, age) {

    }

    sayHello()

    
  </script>
</body>
</html>

八、VSCode插件和配置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {

    }
  </style>
</head>
<body>
  

  <script>

    // console.log("Hello World")

    // 推荐方式一: log -> enter
    console.log("Hello World");

    // 推荐方式二: react插件 -> clg -> enter
    console.log("Hello World")

    // 函数
    function sayHello() {
      
    }

  </script>
</body>
</html>