zoukankan      html  css  js  c++  java
  • JavaScript 输出

    JavaScript 没有任何打印或者输出的函数。

    JavaScript 显示数据

    JavaScript 可以通过不同的方式来输出数据:

    • 使用 window.alert() 弹出警告框。
    • 使用 document.write() 方法将内容写到 HTML 文档中。
    • 使用 innerHTML 写入到 HTML 元素。
    • 使用 console.log() 写入到浏览器的控制台。

    使用 window.alert()

    你可以弹出警告框来显示数据:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>我的第一个页面</h1>
     6 <p>我的第一个段落。</p>
     7 
     8 <script>
     9 window.alert(5 + 6);
    10 </script>
    11 
    12 </body>
    13 </html>

    操作 HTML 元素

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

    请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>我的第一个 Web 页面</h1>
     6 
     7 <p id="demo">我的第一个段落</p>
     8 
     9 <script>
    10 document.getElementById("demo").innerHTML = "段落已修改。";
    11 </script>
    12 
    13 </body>
    14 </html>

    以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

    document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

    innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

    写到 HTML 文档

    出于测试目的,可以将JavaScript直接写在HTML 文档中:

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p>我的第一个段落。</p>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>
     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>我的第一个 Web 页面</h1>
     6 
     7 <p>我的第一个段落。</p>
     8 
     9 <button onclick="myFunction()">点我</button>
    10 
    11 <script>
    12 function myFunction() {
    13        document.write(Date());
    14 }
    15 </script>
    16 
    17 </body>
    18 </html>

    控制台

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    
    </body>
    </html>

    请使用 document.write() 仅仅向文档输出写内容。

    如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

  • 相关阅读:
    hdu 5723 Abandoned country 最小生成树 期望
    OpenJ_POJ C16G Challenge Your Template 迪杰斯特拉
    OpenJ_POJ C16D Extracurricular Sports 打表找规律
    OpenJ_POJ C16B Robot Game 打表找规律
    CCCC 成都信息工程大学游记
    UVALive 6893 The Big Painting hash
    UVALive 6889 City Park 并查集
    UVALive 6888 Ricochet Robots bfs
    UVALive 6886 Golf Bot FFT
    UVALive 6885 Flowery Trails 最短路
  • 原文地址:https://www.cnblogs.com/20gg-com/p/6076315.html
Copyright © 2011-2022 走看看