一、document.write() 输出内容

document.write() 可用于直接在网页中输出内容。

方式1：输出内容用""括起，直接输出""号内的内容。

方式2：通过变量，输出内容。

方式3：输出多项内容，内容之间用+号连接。

方式4：输出HTML标签，并起作用，标签使用""括起来。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document.write输出内容</title>
  6.   <script type="text/javascript">
  7.     document.write("<声声慢> ");    //方式1
  8.     var mystr1="寻寻觅觅 ";
  9.     var mystr2="冷冷清清 ";
  10.  
  11.     document.write(mystr1);         //方式2
  12.     document.write(mystr1+mystr2+"凄凄惨惨戚戚 ");      //方式3
  13.     document.write("乍暖还寒时候"+"</br>");             //方式4
  14.     document.write("最难将息");
  15.  
  16.   </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>

运行效果：

<声声慢> 寻寻觅觅 寻寻觅觅 冷冷清清 凄凄惨惨戚戚 乍暖还寒时候
最难将息

二、alert消息对话框

alert输出内容，可以是字符串或变量，与document.write 相似。

语法: 

  1. alert(字符串或变量);  
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>函数调用</title>
  6.    <script type="text/javascript">
  7.       function add()        //定义函数
  8.       {
  9.           var sum;
  10.           sum = 2 + 3;
  11.           alert(sum)
  12.       }
  13.    </script>
  14. </head>
  15. <body>
  16.    <form>
  17.        <!--调用函数-->
  18.       <input type="button"  value="点击我" onclick="add()" />
  19.    </form>
  20. </body>
  21. </html>

运行效果：

三、confirm消息对话框

  1. confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)

语法:

  1. confirm(str);
  1.  

参数说明:

　str：在消息对话框中要显示的文本

  1.  

返回值：返回true或false

  1. 当用户点击"确定"按钮时，返回true
  2. 当用户点击"取消"按钮时，返回false
  3.  
  4. （注: 通过返回值可以判断用户点击了什么按钮。）
  1.  
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>confirm</title>
  6.   <script type="text/javascript">
  7.   function rec(){
  8.       //定义confirm消息对话框
  9.     var mymessage=confirm("请问你是女士吗？");
  10.     if(mymessage==true)
  11.     {
  12.         document.write("你是女士!");
  13.     }
  14.     else
  15.     {
  16.         document.write("你是男士!");
  17.     }
  18.   }
  19.   </script>
  20. </head>
  21. <body>
  22.     <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
  23. </body>
  24. </html>

运行效果：

四、prompt 消息对话框

prompt弹出消息对话框，通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

  1.  

语法:

  1. prompt(str1, str2);
  1.  

参数说明：

  1. str1: 要显示在消息对话框中的文本，不可修改
  2. str2：文本框中的内容，可以修改
  1.  

返回值:

  1. 1. 点击确定按钮，文本框中的内容将作为函数返回值
  2. 2. 点击取消按钮，将返回null
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>prompt</title>
  6.   <script type="text/javascript">
  7.   function rec(){
  8.     var score; //score变量，用来存储用户输入的年龄值。
  9.     score = prompt("请输入你的年龄：");     //定义prompt消息对话框
  10.     if(score>=25)
  11.     {
  12.        document.write("努力奋斗哦!");
  13.     }
  14.     else if(score>=18)
  15.     {
  16.        document.write("好好享受青春时光噢!");
  17.     }
  18.     else
  19.     {
  20.        document.write("做个快乐的孩子!");
  21.     }
  22.   }
  23.   </script>
  24. </head>
  25. <body>
  26.     <input name="button" type="button" onClick="rec()" value="点击我，输入年龄!" />
  27. </body>
  28. </html>

运行效果：

五、打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

  1. window.open([URL], [窗口名称], [参数字符串])

六、关闭窗口（window.close）：

语法

  1. window.close();   //关闭本窗口

或

  1. <窗口对象>.close();   //关闭指定的窗口
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>close()</title>
  6.   <script type="text/javascript">
  7.     //   window.open()  //打开空白页
  8.      var mywin=window.open("http://www.baidu.com", "_blank", "height=500 width=400")   //打开窗口：百度
  9.      /*定义关闭窗口的函数*/
  10.      function Close(){
  11.          mywin.close();    //关闭窗口
  12.      }
  13.  
  14.   </script>
  15. </head>
  16. <body>
  17.     <input type='button' name='Buttn' value="点击我，关闭窗口" onClick="Close()">
  18. </body>
  19. </html>

运行效果：

参考：https://www.imooc.com

JS -- 基础语法1的更多相关文章

  1. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  2. 【JS基础语法】---学习roadmap---6 parts

    JS基础语法---roadmap Part 1 - 2: Part 3 - 4:   Part 5 - 6

  3. 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点

    css3拓展: <display:none>  将某个元素隐藏       <visibility:hidden>  也是将某个元素隐藏 <display:block&g ...

  4. JS基础语法（二）

    目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...

  5. JavaScript01 js基础语法,数据类型

    JavaScript的概述: 1.组成 三部分组成 ecmaScript 基础语法 (es5) dom document object model 文档对象模型 (操作html文档内容) bom bo ...

  6. JavaScript学习笔记 - 进阶篇（1）- JS基础语法

    前言 JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么? 在JavaS ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  8. JS基础语法

    1.注释语法://单行注释./*多行注释*/. 2.输出语法:{1.alert("要输出的字符串"):.alert(输出其类型):  2.confirm():弹出一个可以和用户交互 ...

  9. Vue.js基础语法（三）

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...

  10. Vue.js基础语法（一）

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...

随机推荐

  1. 代码优化实战，3行代码解决了一百个if else！

    事情是这样的,前段时间做代码review的时候,发现项目中有一个方法代码量超鸡儿多,而且大部分都是写的参数校验的代码,得,我们先抓着缕一缕需求先. 产品需求 找到产品要到了需求文档,需求是这样得: e ...

  2. 用Python爬取股票数据，绘制K线和均线并用机器学习预测股价（来自我出的书）

    最近我出了一本书,<基于股票大数据分析的Python入门实战 视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中用股票范例讲述Pyth ...

  3. SQL Server 异常代码处理

    SQL Server使用TRY...CATCH 结构实现TSQL语句的错误处理,TRY命令负责监控语句执行的情况,如果有TSQL语句发生异常,并且严重级别(Severity Level)大于10,并且 ...

  4. c# Attribute会不会影响性能

    Attribute很方便,标记一个类,设置这个类的额外信息,而不用另外设计存储这个信息. 那么频繁大量使用Attribute会不会影响类的性能. 为此,简单测试. 代码: 略............. ...

  5. 基于pcntl的PHP进程池

    想必大家都知道可以通过多进程或者多线程的方式实现异步. PHP多进程编程当前主要有这几种方式, 1>基于pcntl实现多进程,这也是PHP自带的多进程玩法 2>Swoole自己修改PHP内 ...

  6. JDK1.8源码学习-Object

    JDK1.8源码学习-Object 目录 一.方法简介 1.一个本地方法,主要作用是将本地方法注册到虚拟机中. private static native void registerNatives() ...

  7. exe调用DLL的方式

    假设被调用的DLL存在一个导出函数,原型如下: void printN(int); 三种方式从DLL导入导出函数 生成DLL时使用模块定义 (.def) 文件 在主应用程序的函数定义中使用关键字__d ...

  8. 关于MapReduce默认分区策略

    MapReduce默认分区策略 mapreduce 默认的分区方式是hashPartition,在这种分区方式下,KV对根据key的hashcode值与reduceTask个数进行取模,决定该键值对该 ...

  9. Robot Framework（4）——Selenium2Library关键字

    在第一讲的时候,已经安装了Selenium2Library这个库,这一篇主要来整理介绍一下Selenium2Library中的常用关键字,为我们之后的web自动化打好基础 一.browserManag ...

  10. Shell编程—sed和gawk

    1文本处理 1.1sed 编辑器 sed编辑器被称作流编辑器(stream editor),和普通的交互式文本编辑器恰好相反.在交互式文本编辑器中(比如vim),你可以用键盘命令来交互式地插入.删除或 ...