JavaScript从零开始：引入方式、注释、输入输出

为前端开发的基石，JavaScript编程语言不仅易学易用，还具有强大的跨平台特性。本文将为你详细介绍JavaScript的引入方式、注释以及输入输出，帮助你轻松掌握JavaScript编程的精髓，成为一名炙手可热的前端开发高手！

引入方式：轻松踏入JavaScript的大门

作为JavaScript编程语言的初学者，了解如何引入JavaScript代码是你进入这个神奇世界的第一步。有三种常见的引入方式：

内联方式：将JavaScript代码直接写入HTML文件中的<script></script>标签中。这种方式简单快速，适合小型项目或简单功能的实现。

<!DOCTYPE html>
<html>
  <head>
    <title>内联方式</title>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>

    <script>
      // 在这里编写你的JavaScript代码
    </script>
  </body>
</html>

内部文件方式：将JavaScript代码保存为外部文件，通过<script>标签的src属性引入。这种方式适用于多个HTML文件共享同一段JavaScript代码，提高了代码的复用性和维护性。

<!DOCTYPE html>
<html>
  <head>
    <title>内部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>
  </body>
</html>

外部文件方式：将JavaScript代码保存为独立的外部文件，通过HTML文件的<script>标签的src属性引入。这种方式适合于大型项目，利于代码的模块化管理和团队协作。

<!DOCTYPE html>
<html>
  <head>
    <title>外部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>
  </body>
</html>

注释：注解代码，提升开发效率

在编程过程中，合理使用注释可以方便自己和他人理解代码的逻辑和用途，是良好编程风格的重要一环。在JavaScript中，有两种注释方式：

单行注释：使用//符号进行注释，注释内容从//后开始，直到该行结束。

// 这是一个单行注释

多行注释：使用/* */符号进行注释，注释内容位于/*和*/之间。

/* 
  这是一个多行注释，
  可以跨越多行
*/

通过合理注释，你不仅能提高自己的代码理解和维护效率，还能方便团队协作，使代码更加易于管理。

输入输出：与用户进行互动

在前端开发中，与用户进行互动是至关重要的。JavaScript提供了多种输入输出的方式，使得与用户的交互变得简单而灵活。

弹窗输出：使用alert()函数可以在页面上弹出一个警告框，向用户显示一条消息。

alert("你好，谧夜星球！");

弹窗输入：使用prompt()函数可以在页面上弹出一个对话框，允许用户输入文本。

var name = prompt("请输入用户名：");
alert("你好, " + name + "!");

控制台输出：使用console.log()函数可以将信息输出到浏览器的控制台，方便开发过程中的调试和日志记录。

console.log("你好，谧夜星球！");

页面输出：通过操作HTML元素，可以将信息直接显示在页面上。

document.getElementById("output").innerHTML = "你好，谧夜星球！";

通过合理运用输入输出的方式，你可以实现与用户的互动，接收用户的输入并输出相应的结果，增加页面的交互性和用户体验。

总结：通过本文的介绍，我们已经了解了JavaScript编程语言的引入方式、注释以及输入输出。作为前端开发的基石，JavaScript在网页开发中扮演着重要的角色。希望通过学习JavaScript，能够轻松掌握前端开发的精髓，成为一名炙手可热的前端开发高手！加油！

速生成 Html5 骨架

在 Html 文件中输入 html:5 按下回车键，可快速生成 HTML5 页面模板：

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

html:5

父子关系快速构建

在 html 文件中输入 div#id>ul.list>li.item*5 按下回车键，可快速生成父子关系的结构：

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子关系构建

多个相同标签

重复元素: 使用 * 加上数字来创建多个相同的标签。例如，p*3 后按 Tab 会产生三个 <p> 段落标签。

<p></p>
<p></p>
<p></p>

类与 ID 的添加

类: 在标签名后加 . 再加上类名。如 div.container 生成带有类 container 的 <div> 。

<div class="container"></div>

ID: 使用 # 加上 ID 名。如 div#main 生成 ID 为 main 的 <div> 。

<div id="main"></div>

属性快速插入

属性赋值: 在标签后用方括号 [attr=value] 插入属性。例如，a[href=https://example.com]。

<a href="https://example.com"></a>

组合使用

复合示例: 结合上述技巧，可以创建复杂结构。比如，nav>ul>li.item$*4>a[href=#]{Item $} 会生成一个导航栏，包含 4 个列表项，每个列表项都是一个链接，链接文本分别为 "Item 1" 到 "Item 4"，且每个链接的 href 属性指向不同的 ID。

<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>

自定义 snippets（代码片段）

高级结构: 如果有特定的复杂结构经常使用，可以创建自定义的 Emmet snippets。转到 "文件" > "首选项" > "用户代码片段"，选择或创建 HTML 片段文件，定义自己的缩写和展开结构。

Emmet 命令

Emmet: Wrap with Abbreviation: 选中现有代码后，使用此命令（通过命令面板 Ctrl+Shift+P / Cmd+Shift+P 调出并搜索 “Wrap with Abbreviation” ），可以快速将选中内容包裹在指定标签内。

为一名编程人员，在学习各种编程语言时，会经常翻阅官方的chm帮助手册学习，那么你是否也想制作一个自己的帮助文档呢？下面和我一起做吧！

1.首先制作html文档

如果要用到图片,即将图片和该html文档放到同一个文件夹下,如果要用到css文件,最好也放在同一文件夹下.

2.按以下图步骤操作，工具HTML Help Workshop

软件界面

新建方案

新建方案第二步

输入方案名称

可以新建一个后缀名为hhp的文件，必须和htm文件在同一个目录，名称随意。

如果有，系统会提示已经存在，是否继续使用，点击是。

选择文件类型为html文件

添加需要制作的htm文件

选择点击打开

然后下一步

新建方案完成

点击目录，会弹出一个框

弹框选择确定

会分配一个默认的hhc文件名称，可以修改，然后点击保存

目录新建完之后的界面

插入标题

修改标题的默认图标

然后插入页面，点击否

输入页面的名称，添加页面的相应文件

点击确定

按照以上方法把所有需要添加的文件添加进来，页面名称可以修改

最后点击编译，页面之间的顺序可以用上下左右尖头调整主次

编译完成之后的截图，学会了吧，小伙伴们！

有很多文档资料对于公司或个人来说非常重要，比如整理了好几个月，搜罗整个网络才找到，或者是公司核心资料，如果被他人随意查阅泄漏出去，可能会造成不可估量的损失，利用具有加密功能的软件（明镜防泄密系统）对文件进行加密，在“数据保护策略配置”里，选择要保护的文件类型，然后保存，这样对于要保护的类型的文件即可做到加密保护，不再担忧被泄密了。

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商