JavaScript 基本认识

最新推荐文章于 2024-04-24 16:58:11 发布

原创最新推荐文章于 2024-04-24 16:58:11 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

前端JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了 JavaScript，它是互联网流行的脚本语言，可用于 HTML、Web 及多种设备。说明了它是弱类型、轻量级编程语言，能插入 HTML 页面由浏览器执行。还阐述了其用法，如写在 HTML 中或引用，以及代码在控制台运行、输出语句和注释的相关知识。

JavaScript 简介

JavaScript 是什么？

JavaScript 是互联网最流行的脚本语言，这门语言可用于 HTML 和 Web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言？

HTML 是超文本标记语言，不是编程语言（编程语言可以进行计算）
CSS 是层叠样式表，也不是编程语言
JavaScript 是弱（弱不是强弱，是类型弱）类型的编程语言
JavaScript 是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

JavaScript 是用法？

第一种写在 HTML 中（将script标签放在body的下边）

<!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></body>

  <!-- 这是内部JS -->
  <script>
      
  </script>
</html>

第二种是引用（在script标签中，以src属性引入js文件的路径）

<!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></body>
  <!-- src 用来指定路径 -->
  <!-- ./ 表示当前目录 -->
  <!-- ../ 上一级目录 -->
  <!-- ../../ 上上一级目录 -->
  <script src=""></script>
</html>

JavaScript 代码运行在浏览器的控制台

在这里插入图片描述

JavaScript 是输出语句

使用window.alert()弹出警告框

<!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></body>
  <script>
    // 弹出警示框
    window.alert("hello wrold");
    // alert("hello");
  </script>
</html>

在这里插入图片描述

使用document.write()方法将内容写到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></body>
  <script>
    // 输出内容到 HTML 文档中
    document.write("hello woeld!!!");
  </script>
</html>

在这里插入图片描述

使用innerHTML写入到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>
    <style>
      #box {
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script>
    // 将内容输出到元素中
    document.getElementById("box").innerHTML = "hello world";
  </script>
</html>

在这里插入图片描述

使用console.log()输出到浏览器的控制台

<!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></body>
  <script>
    // 将内容输出到控制台
    console.log("hello world");
  </script>
</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></body>
  <script>
    // 单行注释

    /*
      多行注释
      多行注释
    */

    /**
     * 文档注释，多作用于方法、类等
     */
  </script>
</html>