首页 > 网络编程 > JavaScript > javascript技巧 > js引入与输入输出

JS的引入与输入输出示例详解

2025-05-26 14:24:21 作者：-代号9527

这篇文章主要介绍了JS的引入与输入输出示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1、常用工具与插件

1.1 Snipaste

一个前端截图软件：

常用快捷键（搭配Fn）：

截图：F1
截图定在屏幕上：F3 ，选中后ESC退出
取颜色：截图时，鼠标定到想要颜色的区域，看到颜色值，按shift切换成GBG/HEX格式，按C复制

1.2 Error Lens

一个报错提示插件：Error Lens

效果：

1.3 One Dark Pro

一个代码颜色插件：

安装后，设置自己喜欢的颜色主题：

1.4 Live Server

一个左边写代码，右边预览的分屏插件

安装完成后，右键Open with Live Server，然后Win + ➡️，出现在右边

2、JavaScript

2.1 JS介绍

JavaScript是一种运行在客户端(浏览器) 的编程语言，实现人机交互效果，相比，HTML则是一种标记语言。JavaScript可以实现：

网页特效：监听用户的一些行为让网页作出对应的反馈，如轮播图
表单验证：针对表单数据的合法性进行判断

数据交互：获取接口返回的数据, 渲染到前端页面
服务端编程：node.js

<!--JS参考网站：MDN-->
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

2.2 JS的组成

JS有两部分：

ECMAScript：规定了js基础语法，比如：变量、分支语句、循环语句、对象等
Web APIs ：
- DOM ，操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM，操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器

3、JS初体验

以下，用三件套，做一个点击哪个按钮，哪个按钮变黄的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yellow {
            color: #fc0;
        }
    </style>
</head>
<body>
    <button class="yellow">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.yellow').className = ''
                this.className = 'yellow'
            })
        }
    </script>
</body>
</html>

4、JS的书写位置

和CSS对应，JS也有三种书写位置：

4.1 内部JS

直接写在html文件里，用script标签包住，位置在</body>上面

<!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>
  <!-- 行内JS -->
  <script>
    // 页面弹出警示框
    alert('Hello World!')
  </script>
</body>
</html>

将 <script> 放在HTML文件的body底部附近的原因是让浏览按照代码在文件中的顺序先加载 HTML，否则上来就是JS，像前面入门案例中的document.querySelectorAll('button')就会有问题

4.2 外部JS

代码写.js结尾的文件里，通过script标签，引入到html页面中

<!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>
  <!-- 外部JS -->
  <script src="./js/my.js"></script>
</body>
</html>

注意，使用外部JS的方式后，script标签中间无需写代码，否则会被忽略，相比前面的行内JS，JS代码很多时，外部JS代码结构更清晰

4.3 内联JS

代码写在标签内部

<body>
	<button onclick="alert('逗你的~~')">点我月入百万</button>
</body>

5、JS中的注释与结束符号

注释：

单行，//，Ctrl + /

多行，/* */，shift + alt + A

结束符号：

封号；结尾
封号可省略，浏览器可以自动推断语句的结束位置，要么都加，要么都不加（建议不加）

6、JS的输出

6.1 语法1：document.write

document.write
作用：向html的body内输出内容，且如果输出的内容写的是标签，也会被解析成网页元素

<body>
  <script>
    // document.write可以输出文字，也可以输出标签
    document.write('输出普通文字')
    document.write('<h1>输出h1标签</h1>')
  </script>
</body>

6.2 语法2：alert(’ ')

alert
作用:页面弹出警告对话框

<body>
  <script>
    alert('弹出内容')
  </script>
</body>

6.3 语法3：console.log

console.log
作用：控制台输出语法，调试代码使用

<body>
  <script>
    console.log("debug")
    console.log('debug')
  </script>
</body>

7、JS的输入

prompt，翻译：提示，显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

<body>
  <script>
    prompt('请输入你的姓名')
  </script>
</body>

8、JS代码执行顺序

JavaScript 代码执行顺序：

按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被优先执行

到此这篇关于JS的引入与输入输出的文章就介绍到这了,更多相关js引入与输入输出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！