学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

javascript教程(五) 输出

发布时间:2020-04-05 点击:25

    Javascript  输出

    在javascript中,没有直接输出的函数或者功能,但是它可以通过以下方式输出数据给用户:

    1、使用 window.alert() 弹出信息框显示数据。

    2、使用 document.write() 方法将数据写到 HTML 文档中。

    3、使用 innerHTML 将数据写入到 HTML 元素中。

    4、使用 console.log() 将数据写入到浏览器的控制台。

    一、alert信息框

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    window.alert('hello');
    //也可以写成alert('hello');
    </script>
    </body>
    </html>

    当页面一加载就会弹出Javascript信息框,Javascript信息框的样式随浏览器的不同而不同,下面是QQ浏览器的样式.

    二、Javascript  document.write() 写到HTML文档

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    document.write(“hello mihu”);
    </script>
    </body>
    </html>

    上述Javascript代码的功能就是讲hello mihu 渲染到页面中,就像直接编写在html文档中一样。

    PS:注意该代码会直接替换原有页面的所有内容。

    三、Javascript innerHTML 操作HTML元素

    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">我的第一个段落</p>
    <script>
    document.getElementById("demo").innerHTML = "hello mihu";
    </script>
    </body>
    </html>

    上述Javascript代码的功能是根据HTML标签的ID查找id值为demo的标签,然后向其中插入文本“hello mihu”.

    四、Javascript console.log()写到控制台

    <!DOCTYPE html>
    <html>
    <body>
    <p>p hello</p>
    <script>
    console.log(“console hello”);
    </script>
    </body>
    </html>

    PS:想要查看console的数据需要打开浏览器的开发者工具,一般是F12,然后找到控制台选项卡即可打开。

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: