JavaScript入门（一）JavaScript输出

JavaScript输出

JavaScript没有任何打印和输出函数，但是JavaScript可以通过很多方式进行输出数据。

  • 使用window.alert()弹出警告框
  • 使用document.write()将内容写到文档中
  • 使用innerHTML写入到HTML元素中
  • 使用console.log打印到控制台中

下面依次进行讲解：

window.alert()

使用window.alert()可以再网页中弹出警告框

 

 1 <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <h1>我的第一个网页</h1>
 9         <p>这个网页会弹出警告框</p>
10 
11         <script>
12             // 使用window.alert()弹出警告框
13             window.alert("Hello World");
14         </script>
15     </body>
16 </html>

运行结果：

注意：代码中的橙色部分，与网页中弹出的信息是一致的。

document.write()

使用document.write()将数据写到文档中

 

 1 <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <h1>我的第一个网页</h1>
 9         <p>注意看最后一行字</p>
10 
11         <script>
12             // 使用document.write()显示内容
13             document.write("这是使用documen.write()显示的内容");
14         </script>
15     </body>
16 </html>

 运行结果：

注意：代码中橙色部分和运行结果方框的内容一致，如果直接使用document.write()函数内容将显示在最后一行，使用document.write()应谨慎使用，如果在文档加载后使用它将会覆盖整个网页

innerHTML

使用innerHTML可以改变HTML中元素的内容

 

 1 <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <h1>我的第一个网页</h1>
 9         <p id="demo">点击按钮我就会变</p>
10         <button type="button" onclick="myFunction()">点击</button>
11         <script>
12             function myFunction(){
13                 var str = document.getElementById("demo");
14                 str.innerHTML = "Hello World！！！";
15             }
16         </script>
17     </body>
18 </html>

 

 

 

 运行结果：

 

点击之后：

注意：这里面出现了新的语句“document.getElementById("demo")”这个函数的作用就是获取html元素的id，获取id之后就可以对该元素进行操作。在之后的学习中只要获取“id”就要使用这个语句，所以这个语句非常重要要牢记。

这段代码里面就是使用这个语句获取id，然后通过获取的id对该元素进行操作。

console.log()

使用 comsole.log()可以将数据输出到控制台。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>我的第一个网页</h1>
        <p id="demo">注意控制台</p>
        <script>
            console.log("我在这里");
        </script>
    </body>
</html>

 运行结果：

 

注意：代码中橙色部分和控制台中的内容一致

今天的内容就到此为止，不理解的朋友可以评论

posted @ 2020-12-26 10:29  爱睡觉的神仙  阅读(194)  评论(0)    收藏  举报