>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26173 个阅读者 刷新本主题
 * 贴子主题:  JavaScript 输出数据的方式 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-15 16:01:30     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript  输出

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

JavaScript 显示数据

     JavaScript 可以通过不同的方式来输出数据:    
  • 使用 window.alert() 弹出警告框。
  • 使用   document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

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

范例

< !DOCTYPE  html >

     < html >
     < body >

     < h1 >我的第一个页面 < /h1 >
     < p >我的第一个段落。 < /p >

     < script >
        window.alert(5 + 6);
     < /script >

    < /body >
     < /html >

操作 HTML 元素

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

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

范例

< !DOCTYPE  html >
< html >
     < body >

                 < h1 >我的第一个 Web 页面 < /h1 >
                 < p  id= "demo" >我的第一个段落 < /p >

                 < script >
         document.getElementById("demo").innerHTML = "段落已修改。";
               < /script >

     < /body >
< /html >

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

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

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

在本文中

          在大多数情况下,在本文中,我们将使用上面描述的方法来输出:

         上面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:                    

写到 HTML 文档

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

范例

< !DOCTYPE  html >
< html >
     < body >

     < h1 >我的第一个 Web 页面 < /h1 >
     < p >我的第一个段落。 < /p >
     < script >
         document.write(Date());
     < /script >

    < /body >

< /html >

                                    
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小      请使用 document.write() 仅仅向文档输出写内容。

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

范例

< !DOCTYPE  html >

     < html >
     < body >

         < h1 >我的第一个 Web 页面 < /h1 >
         < p >我的第一个段落。 < /p >
         < button  onclick= "myFunction()" >点我 < /button >

         < script >
           function myFunction() {
       document.write(Date());
            }
       < /script >

    < /body >
    < /html >

写到控制台

     如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

     浏览器中使用 F12 来启用调试模式, 在调试窗口中点击"Console" 菜单。                    

范例

< !DOCTYPE  html >

     < html >
     < body >

         < h1 >我的第一个 Web 页面 < /h1 >

         < script >
             a = 5;
             b = 6;
             c = a + b;
             console.log(c);
     < /script >

     < /body >
     < /html >

您知道吗?

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 程序中调试是测试,查找及减少bug(错误)的过程。






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-20 10:49:41 重新编辑]
  Java面向对象编程-->Java常用类(下)
  JavaWeb开发-->使用Session(Ⅰ)
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->Socket用法详解
  精通Spring-->Vue组件开发高级技术
  Vue3开发-->绑定CSS样式
  Webpack 插件开发指南
  不可错过的几种JS优化技巧
  勇闯28个关卡学会HTML与HTML5基础
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  JavaScript输出格式化日期和时间
  Vue项目的性能优化之路
  前端图片压缩库images-quickly-compress
  JS对树形数据的遍历和过滤,
  14个JavaScript优化建议
  jQuery 遍历过滤:缩小搜索元素的范围
  CSS3 2D 转换
  JavaScript 函数定义
  JavaScript HTML DOM EventListener
  JavaScript基础入门
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。