一、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. Flutter 容器 (1) - Center

    Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...

  2. Vercel托管博客

    背景 本站已托管至Vercel,但作为一名前端小白,昨天帮朋友托管博客到Vercel的过程中到处碰壁,就想写一篇博客记录一下. 注册登录 点击Vercel官网{% btn 'https://verce ...

  3. 下载的附件名总乱码？你该去读一下 RFC 文档了！

    纸上得来终觉浅,绝知此事要躬行 Web 开发过程中,相信大家都遇到过附件下载的场景,其中,各浏览器下载后的文件名中文乱码问题或许一度让你苦恼不已. 网上搜索一下,大部分都是通过Request Head ...

  4. .net Core使用sql语句实现批量修改数据状态

    上图为查出的所有满足条件的数据,要选中若干条数据将其状态设置为作废 一共选中6条数据,当点击确认后修改数据状态. 前端代码 1.安装NuGet包 [Abp.Dapper]于EFCore中, 2.创建文 ...

  5. Orcal语法Merge into用法

    Orcal语法 Merge into 1.语法介绍 MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行 ...

  6. 利用C#实现OPC-UA服务端

    前言 最近接手了一个项目,做一个 OPC-UA 服务端?刚听到这个消息我是一脸懵,发自灵魂的三问“OPC-UA是什么?”.“要怎么做?”.“有什么用?”.我之前都是做互联网相关的东西,这种物联网的还真 ...

  7. IntelliJ IDEA安装Activiti插件并使用

    一.安装Activiti插件 1.搜索插件 点击菜单[File]-->[Settings...]打开[Settings]窗口. 点击左侧[Plugins]按钮,在右侧输出＂actiBPM＂,点击 ...

  8. Jmeter 常用函数（29）- 详解 __eval

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 和 __V 的作用基本一致,执行变量名 ...

  9. CVE-2020-15778 OpenSSH命令注入漏洞复现

    一.漏洞概要 OpenSSH 8.3p1及之前版本中的scp允许在scp.c远程功能中注入命令,攻击者可利用该漏洞执行任意命令.目前绝大多数linux系统受影响. 参考链接:https://githu ...

  10. Java并发---concurrent包

    一.包的结构层次 其中包含了两个子包atomic和locks,另外字concurrent下的阻塞队列以及executor,这些就是concurrent包中的精华.而这些类的实现主要是依赖于volati ...