程序员scholar
  • 前端三剑客
  • JavaScript
scholar
2024-07-18
目录

简介和用法

# 简介和用法

# 1. JavaScript简介

# 1.1 什么是JavaScript

JavaScript简称为JS，是由网景公司（Netscape）开发的一种客户端脚本语言。它的主要特点是不需要编译，可以直接嵌入HTML页面并在浏览器中运行。JavaScript是一种轻量级、解释型、面向对象的语言，广泛用于Web开发。

​ Web前端三层：

  • 结构层 HTML 定义页面的结构
  • 样式层 CSS 定义页面的样式
  • 行为层 JavaScript 用来实现交互，提升用户体验

# 1.2 JavaScript作用

  • 在客户端动态的操作页面
  • 在客户端做数据的校验
  • 在客户端发送异步请求

# 2. JavaScript基本用法

# 2.1 基本结构

JavaScript代码可以嵌入到HTML文档的<script>标签中，通常放置在<head>或<body>中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        // 弹出警告框，显示 "Hello World !"
        alert("Hello World !");
        
        // 输出信息到浏览器的控制台
        console.log("Hello World !");
        
        // 将信息写入到页面中
        document.write("Hello World !");
    </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出信息的三种方式：

  1. alert()：弹出警告框

    alert("Hello World!");
    1

  2. console.log()：输出到浏览器的控制台

    console.log("Hello World!");
    1

  3. document.write()：输出到页面

    document.write("Hello World!");
    1

# 2.2 转义符

由于字符串中经常会有一些特殊字符，比如换行、引号等，为了让字符能够正常显示，此时需要使用转义符。常用转义符包括：

  • \n：换行

    console.log("Hello\nWorld!");
    1

  • \t：缩进

    console.log("Hello\tWorld!");
    1

  • \"：双引号

    console.log("He said, \"Hello World!\"");
    1

  • \'：单引号

    console.log('It\'s a sunny day!');
    1

# 2.3 注释

JavaScript支持两种注释方式：

  • 单行注释：以 // 开始，以行末结束

    // 这是一个单行注释
console.log("This is a single-line comment");
    1
    2

  • 多行注释：以 /* 开始，以 */ 结束

    /*
 * 这是一个多行注释
 * 可以跨越多行
 */
console.log("This is a multi-line comment");
    1
    2
    3
    4
    5

# 2.4 语法约定

编码规范：

  • 区分大小写：变量名、函数名等区分大小写。

  • 代码缩进：使用适当的缩进提高代码可读性。

  • 每行一条语句：建议每行只写一条语句，语句结束以分号结尾。

    var name = "Alice";
var age = 25;
    1
    2

  • 语句结束符：如果不以分号结尾，则以行末作为语句的结束。

    var name = "Alice"
var age = 25
    1
    2

  • 代码执行顺序：从上往下，从左往右。

    var a = 5;
var b = 10;
var sum = a + b; // 从上往下，从左往右
console.log(sum); // 输出 15
    1
    2
    3
    4

# 2.5 引用方式

引用JavaScript有四种方式：

# 1. 内联方式

在页面中使用 <script> 标签，在标签体中编写JS代码。<script> 标签可以放在页面的任意位置，但通常放在 <head> 中或页面底部。

<script type="text/javascript">
    // 内联JavaScript代码
    console.log("This is inline JavaScript");
</script>
1
2
3
4

# 2. 行内方式

在普通标签中编写JS代码，一般需要结合事件属性，如 onclick、onmouseover 等。

<input type="button" value="点我" onclick="alert('Hello')"/>
<!-- 使用超链接的href属性执行JS时，必须添加javascript前缀 -->
<a href="javascript:alert('World')">我是超链接</a>
1
2
3

# 3. 外部方式

使用单独的 .js 文件定义JavaScript代码，然后在页面中使用 <script> 标签引入外部脚本文件。

<script type="text/javascript" src="path/to/file.js"></script>
1

注意：如果某个 <script> 标签用于引入外部JS文件，则该标签体中不能再写JS代码。

<!-- 正确的用法 -->
<script type="text/javascript" src="path/to/file.js"></script>

<!-- 错误的用法 -->
<script type="text/javascript" src="path/to/file.js">
    console.log("This will not work");
</script>
1
2
3
4
5
6
7

# 4. 动态引入方式

通过 JavaScript 代码动态创建 <script> 标签来引入外部JS文件。这种方式常用于按需加载脚本文件。

<script type="text/javascript">
    // 定义一个函数，用于动态加载JavaScript脚本
    function loadScript(url) {
        // 创建一个新的 <script> 元素
        var script = document.createElement("script");
        // 设置 <script> 元素的类型为 "text/javascript"
        script.type = "text/javascript";
        // 设置 <script> 元素的 src 属性为传入的 URL
        script.src = url;
        // 将 <script> 元素添加到 <body> 中
        document.body.appendChild(script);
    }
    // 调用 loadScript 函数，动态加载指定的 JavaScript 文件
    loadScript("path/to/dynamicScript.js");
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这四种引用方式可以灵活使用，根据不同的需求选择合适的方式来引用JavaScript脚本文件。

# 2.6 自定义代码片段

在VSCode（Visual Studio Code）中自定义代码片段可以大大提高你的编码效率。以下是具体的步骤：

1. 打开用户代码片段设置

image-20240718103541079

2. 选择或创建一个代码片段文件

  1. 在弹出的列表中选择你想要自定义代码片段的语言，比如 javascript.json。
  2. 如果你想为一个特定的项目创建代码片段，也可以选择 New Global Snippets file 或 New Snippets file for <project> 来创建一个新的代码片段文件。

3. 编辑代码片段文件

代码片段文件是一个JSON格式的文件，以下是一个代码片段的示例：

{
    "Print to console": {
        "scope": "javascript,typescript",
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}
1
2
3
4
5
6
7
8
9
10
11
  • "Print to console": 代码片段的名称，可以是任何描述性文字。
  • "scope": 指定代码片段适用的语言范围。如果不写 scope，代码片段将默认适用于所有语言文件。
  • "prefix": 触发代码片段的前缀。当你输入这个前缀时，VSCode会提示这个代码片段。
  • "body": 代码片段的主体，可以是一个字符串数组，每行一个字符串。你可以使用 $1, $2 等占位符来表示光标位置，$0 表示最后的光标位置。
  • "description": 对代码片段的描述，显示在代码提示列表中。

HTML代码片段

{
    "HTML Boilerplate": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <title>$1</title>",
            "</head>",
            "<body>",
            "    $2",
            "</body>",
            "</html>"
        ],
        "description": "HTML5 Boilerplate"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

JavaScript代码片段

{
    "Function": {
        "prefix": "func",
        "body": [
            "function $1($2) {",
            "    $3",
            "}"
        ],
        "description": "Create a JavaScript function"
    }
}
1
2
3
4
5
6
7
8
9
10
11

4. 使用代码片段

  1. 在你的代码编辑器中，输入代码片段的前缀（例如log或html5）。
  2. 你会看到一个自动完成的提示，选择它并按下 Tab 键，代码片段就会自动展开。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05
移动端开发之响应式布局
变量和数据类型

← 变量和数据类型→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar