酷酷是懒虫

这个屌丝很懒，什么也没留下！

热门标签

JavaScript青少年简明教程：输入输出

作者：酷酷是懒虫 | 2024-08-03 08:25:00

踩

JavaScript的输入输出情况相对复杂，因为它依赖于其运行的宿主环境（如Web浏览器或Node.js）来提供具体的输入输出机制。JavaScript的核心规范（ECMAScript）本身并不直接提供输入和输出功能，而是通过宿主环境提供的API来实现。

在此仅介绍JavaScript通常在浏览器（Web浏览器）环境的情况

在Web浏览器中，JavaScript通常与ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）一起使用。这些API允许JavaScript与网页文档和浏览器本身进行交互，从而实现输入输出功能。

prompt()方法：属于BOM（浏览器对象模型）。通过浏览器弹出一个对话框，让用户输入信息。这是JavaScript中最简单的输入方式，但通常不推荐在生产环境中使用，因为它会阻塞用户界面。

let name = prompt("Enter your name:");

console.log("Hello, " + name);

alert()方法：属于BOM（浏览器对象模型）。通过浏览器弹出一个对话框，显示信息给用户。这主要用于显示警告或提示信息。

alert("This is an alert!");

console.log()方法：是宿主环境（如浏览器的 BOM 或 Node.js 的全局对象）提供的功能。将信息输出到浏览器的控制台。这对于开发者调试代码非常有用。

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

调试JavaScript代码时console.log()比较常用，因此多给出一些例子：

1.打印（显示）字符串：

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

这将在控制台中输出字符串"Hello, World!"。

2.打印（显示）变量的值：

let name = "John";

console.log("My name is", name);

这将在控制台中输出"My name is John"。

3.打印多个值：

let x = 10;

let sum = x + y;

console.log("The sum of", x, "and", y, "is", sum);

这将在控制台中输出"The sum of 10 and 20 is 30"。

4.打印（显示）对象：

let person = { name: "Alice", age: 25 };

console.log(person);

这将在控制台中输出对象的内容：

{ name: "Alice", age: 25 }

通过使用console.log()方法，你可以输出各种类型的信息和变量值，以便在开发过程中进行调试和查看程序的执行结果。

要查看 console.log() 的显示结果，需要打开开发者工具，切换到控制台。

使用DOM（文档对象模型），JavaScript可以操作HTML文档，实现网页的动态交互和数据展示。通过HTML表单元素（如输入框、下拉列表等）获取用户输入的值。JavaScript可以获取这些表单元素的值，并进行进一步处理。下面介绍一些与之相关的常用的方法。

☆document.write()和document.writeln()这两个方法，可以将文本信息直接输出到浏览器窗口中，document.write()方法会直接将指定的内容插入到当前文档中，而document.writeln()方法会在插入的内容的末尾添加一个换行符。如：

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

但通常不推荐使用，因为它们会重写整个页面内容（除非在文档加载完成之前使用）。

☆选择HTML元素的方法：

getElementById(): 通过ID选择单个元素

getElementsByClassName(): 通过类名选择元素集合

getElementsByTagName(): 通过标签名选择元素集合

querySelector(): 使用CSS选择器选择单个元素

querySelectorAll(): 使用CSS选择器选择元素集合

示例、将内容插入到指定的元素中，从而实现页面内容的动态更新。


<input type="text" id="nameInput">
<button onclick="sayHello()">Say Hello</button>
<script>
  function sayHello() {
    let name = document.getElementById("nameInput").value;
    alert("Hello, " + name + "!");
  }
</script>

☆修改元素内容的方法

可以改变元素的文本内容或HTML内容：

textContent: 设置或获取元素的文本内容

innerHTML: 设置或获取元素的HTML内容

示例


    <div>
        <p id="displayText">这是初始文本内容。</p>
        <button id="changeTextBtn">更改文本</button>
    </div>
    <script>
        // 获取需要操作的元素
        const displayText = document.getElementById('displayText');
        const changeTextBtn = document.getElementById('changeTextBtn');
 
        // 定义一个函数来更改文本内容
        function changeText() {
            displayText.textContent = "这是新的文本内容！";
        }
 
        // 为按钮添加点击事件监听器
        changeTextBtn.addEventListener('click', changeText);
    </script>

其中，addEventListener()是 JavaScript 中用于为 DOM 元素添加事件监听器的重要方法。这个方法允许你指定元素应该监听的事件类型，以及当该事件发生时应该执行的函数。

【基本语法：
element.addEventListener(eventType, listener[, options]);
参数解释：
eventType：一个字符串，指定事件的类型（如 "click", "mouseover", "keydown" 等）。
listener：当指定事件发生时要调用的函数。
options（可选）：一个对象，指定监听器的特性。
以后还将介绍addEventListener()方法，在此不多说了。】

本节最后，给出一个输入一个数计算其平方的完整例子：


<!DOCTYPE html>
<html lang="zh">
<head>
  <title>计算平方</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body>
  <div>
    <label for="number">请输入一个数：</label>
    <input type="number" id="number" />
    <button onclick="calculateSquare()">计算平方</button>
    <p id="result">平方值为：</p>
  </div>
 
  <script>
    function calculateSquare() {
        var number = document.getElementById('number').value; // 获取用户输入
        var resultElement = document.getElementById("result"); //显示位置  
        if (number) { // 确保输入不为空  
            var square = number * number; // 计算平方  
            document.getElementById('result').innerText = "平方值为" + square; // 显示结果  
        } else {  
            alert('请输入一个数字！');  
        }       
    }
  </script>
</body>
</html>

运行效果：

DOM（文档对象模型）功能十分强大，在处理HTML文档时很有用，在此不多说了，后面还将专门介绍。

还可参见 JavaScript简介与实验基础 https://blog.csdn.net/cnds123/article/details/109165450

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/922217