<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>javascript输出</title>

    </head>

    <body>

        <h3>1.window.alert() 弹出警告框。</h3>

        <p style="cursor: pointer;color: red;" onclick="outPut1()">点我</p>

        <!-- onclick="outPut1()"鼠标点击就执行outPut1()函数 -->

        <script type="text/javascript">

            function outPut1(){

                window.alert("AWSL！");/* 弹窗内容 */

                /* alert("AWSL！")，效果是一样的； */

            }

        </script>

        <p>--------------------------------</p>

        <h3>2.document.write() 将内容写到 HTML 文档中。</h3>

        <script type="text/javascript">

            document.write("<p>我是写入内容！</p>");/* 输出内容 */

            /* 这里不用加函数，003一文中说过，如果写在函数中，当函数被调用时，会覆盖整个文档； */

        </script>

        <p>--------------------------------</p>

        <h3>3.innerHTML 写入到 HTML 元素。</h3>

        <p id="demo1" onclick="outPut3()" style="color: red;cursor: pointer;">点我</p>

        <script type="text/javascript">

            function outPut3(){

                var x = document.getElementById('demo1');

                x.innerHTML='我是通过innerHTML写入的内容！';

            }

            /*

            document.getElementById('demo1').innerHTML='我是通过innerHTML写入的内容！';

            可以不用函数直接输出，这样就没有鼠标点击触发的效果；

            */

        </script>

        <p>--------------------------------</p>

        <h3>4.console.log() 写入到浏览器的控制台。</h3>

        <p>浏览器中(Chrome,IE,UC)使用 F12 或 网页 右键>检查 来启用调试模式，

            在调试窗口中点击 "Console" 菜单。</p>

        <p onclick="outPut4()" style="color: red;cursor: pointer;">点我</p>

        <script type="text/javascript">

            function outPut4(){

                console.log('测试控制台输出内容！');

            }

            /*

            console.log('测试控制台输出内容！');

            同上，可以不用函数直接输出；

            */

        </script>

    </body>

</html>

JavaScript004，输出的更多相关文章

  1. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  2. Android Studio 多个编译环境配置 多渠道打包 APK输出配置

    看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...

  3. nodejs进阶(1)—输出hello world

    下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var  http  =  require ...

  4. .NET Core的日志[2]:将日志输出到控制台

    对于一个控制台应用,比如采用控制台应用作为宿主的ASP.NET Core应用,我们可以将记录的日志直接输出到控制台上.针对控制台的Logger是一个类型为ConsoleLogger的对象,Consol ...

  5. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

  6. node中子进程同步输出

    管道 通过"child_process"模块fork出来的子进程都是返回一个ChildProcess对象实例,ChildProcess类比较特殊无法手动创建该对象实例,只能使用fo ...

  7. Java程序：从命令行接收多个数字，求和并输出结果

    一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码:   //王荣荣 2016/9/23     ...

  8. 【夯实PHP基础】nginx php-fpm 输出php错误日志

    本文地址 原文地址 分享提纲: 1.概述 2.解决办法(解决nginx下php-fpm不记录php错误日志) 1. 概述 nginx是一个web服务器,因此nginx的access日志只有对访问页面的 ...

  9. 【SAP业务模式】之ICS（六）：发票输出类型

    这篇开始主要讲述发票输出类型: 首先我们新建一个发票类型,用于公司间的发票MIV,而标准的发票类型还是F2保持不变: 一.新建发票类型: 目录:SPRO-销售与分销-出具发票-开票凭证-定义出具发票类 ...

随机推荐

  1. JS中根据某个值进行大小排序

    //从大到小排序 function compareBigToSmall(property){ return function(a,b){ var value1 = a[property]; var v ...

  2. [转帖]前端 crypto-js aes 加解密

    前端 crypto-js aes 加解密 2018.04.13 11:37:21字数 891阅读 59767 https://www.jianshu.com/p/a47477e8126a 原来前端也有 ...

  3. ASP.NET请求过程-基本过程

    客户端发送请求到达服务器 输入域名->DNS解析->指定IP 服务器(如果网页直接输入IP地址则直接到服务器)->请求到达服务器->HTTP.SYS接受HTTP请求->转 ...

  4. Python开发【第三章】：函数介绍

    一. 函数介绍 1.函数是什么? 在学习函数之前,一直遵循面向过程编程,即根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复 ...

  5. javascript 写一个ajax 自动拦截，并下载数据

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. MySQL存储的字段是不区分大小写的，你知道吗？

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 00 简单回顾 之前写过一篇关于mysql 对表大小写敏感的问题,其实在mysql中字段存储的内容是不区分大小写的,本篇进 ...

  7. angular 源码 <一> rotuerLinkActive

    这几篇,查看angular 源码. rotuerLinkActive 是路由的样式设置. 它的值是 css 的一个类.或者几个类. 主要代码如下 @Input() set routerLinkActi ...

  8. python爬视频实例

    例:抓取PhotoShop视频教程 网址http://www.mxiaobei.com/?id=424 import requests import re from bs4 import Beauti ...

  9. Citrix ADC 12.1 / NetScaler 12

    Citrix ADC 12.1 / NetScaler 12 参考 https://www.carlstalhood.com/netscaler-menu/netscaler-12/ Core – C ...

  10. map自定义键值类型

    map自定义键值类型 改变Map的默认比较方式 https://www.cnblogs.com/zjfdlut/archive/2011/08/12/2135698.html 大家知道,STL中的ma ...