1.alert消息弹出框

　　alert(字符串或变量);
  • 消息对话框通常可以用于调试程序。
  • 与document.write 相似。

2.确认：confirm消息对话框

　　confirm（弹出时要显示的文本）；

　　返回值时Boolean值；

　　　　返回值：

　　　　当点击“确定”时，返回“true”;

　　　　当点击“取消”时，返回“false”；

　　　通过返回值可以知道用户点击了哪个按钮。

　　

　　　

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>confirm</title>

   <script type="text/javascript">

   function rec(){

     var mymessage=confirm("请问你是女神/男神吗？");

     if(mymessage==true)

     {

         document.write("我是女神!");

     }

     else

     {

         document.write("不，我是男神!");

     }

   }

   </script>

 </head>

 <body>

     <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />

 </body>

 </html>

3.prompt提问消息对话框：

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

　　prompt(str1, str2);

　str1: 要显示在消息对话框中的文本，不可修改

　str2：文本框中的内容，可以修改
　1. 点击确定按钮，文本框中的内容将作为函数返回值

　2. 点击取消按钮，将返回null

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>prompt</title>

  <script type="text/javascript">

  function rec(){

    var myname=prompt("请输入姓名");

　　 if(myname!=null)

  　　　　{   alert("你好"+myname); }

　　　else

  　　　　{  alert("你好 my friend.");  }

 　　 }

  </script>

</head>

<body>

    <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />

</body>

</html>

效果图如上

4.window.open：打开新窗口

window.open(<URL>, <窗口打开的方法>, <参数字符串>);

　参数说明:

　　URL：打开窗口的网址或路径。

　　窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。

　　参数字符串：设置窗口参数，各参数用逗号隔开。
参数表:





 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>打开新窗口</title>

  <script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

 </script>

 </head>

 <body>

     <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />

 </body>

 </html>




5.window.close:关闭窗口


用法：




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


或


<窗口对象>.close();   //关闭指定的窗口




例如:关闭新建的窗口。






 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>close()</title>

   <script type="text/javascript">

      var mywin=window.open("http://www.imooc.com");

 　　  mywin.close();

   </script>

 </head>

 <body>

 </body>

 </html>






注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。


编程练习






制作新按钮，“新窗口打开网站” ，点击打开新窗口。






任务




1、新窗口打开时弹出确认框，是否打开


提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。


2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/


3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。








自己的答案：




 <!DOCTYPE html>

 <html>

  <head>

   <title> new document </title>

   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

   <script type="text/javascript">  

     // 新窗口打开时弹出确认框，是否打开

     function openWindow(){

         var newwind=confirm("是否打开新窗口？");

         if(newwind==true){

             var open1=prompt("请输入网址");

             if(open1!=null){

                 window.open(open1,'_blank','width=400,height=500','menubar=no,toolbar=no');

             }

             else{

                 window.open('http://www.imooc.com/','_blank','width=400,height=500','men　　　　　　　　　　　　ubar=no,toolbar=no');

             }

         }

         else{

             document.write("我不想打开");

         }

     }

  </script>

  </head>

  <body>

  <input type="button" value="新窗口打开网站" onclick="openWindow()" />

  </body>

 </html>






这个是标准答案：




 <!DOCTYPE html>

 <html>

  <head>

   <title> new document </title>

   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

   <script type="text/javascript">  

     // 新窗口打开时弹出确认框，是否打开

     function openWindow(){

         var newwind=confirm("是否打开新窗口？");

         if(newwind==true){

             var open1=prompt("请输入网址","http://www.imooc.com");

             if(open1!=null){

                 window.open(open1,'_blank','width=400,height=500','menubar=no,toolbar=no');

             }

            /* else{

                 window.open('http://www.imooc.com/','_blank','width=400,height=500','menubar=no,toolbar=no');

             } */

         }

         else{

             document.write("我不想打开");

         }

     }

   </script>

  </head>

  <body>

       <input type="button" value="新窗口打开网站" onclick="openWindow()" />

  </body>

 </html>






两者的不同之处在于：


自己的：在输入框中为空白，单击“取消”按钮会跳到默认页面，单击“确定”无法打开。是不成功的；


一个输入框里能显示出默认的网址；
												


											
JavaScript基础学习篇的更多相关文章
	

    
								
  1. JavaScript 基础学习1-day14
		
    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
    
		
    2. 
						
  2. 鸟哥Linux私房菜基础学习篇学习笔记3
		
    鸟哥Linux私房菜基础学习篇学习笔记3 第十二章 正则表达式与文件格式化处理: 正则表达式(Regular Expression) 是通过一些特殊字符的排列,用以查找.删除.替换一行或多行文字字符: ...
    
		
    3. 
						
  3. 鸟哥Linux私房菜基础学习篇学习笔记2
		
    鸟哥Linux私房菜基础学习篇学习笔记2 第九章 文件与文件系统的压缩打包: Linux下的扩展名没有什么特殊的意义,仅为了方便记忆. 压缩文件的扩展名一般为: *.tar, *.tar.gz, *. ...
    
		
    4. 
						
  4. 鸟哥Linux私房菜基础学习篇学习笔记1
		
    鸟哥Linux私房菜基础学习篇学习笔记1 第三章 主导分区(MBR),当系统在开机的时候会主动去读取这个区块的内容,必须对硬盘进行分区,这样硬盘才能被有效地使用. 所谓的分区只是针对64Bytes的分 ...
    
		
    5. 
						
  5. 48.javascript基础学习
		
    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...
    
		
    6. 
						
  6. 拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录
		
    目录 目录 前言 关于这本书 必看知识点 最后 前言 相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历) ...
    
		
    7. 
						
  7. JavaScript 基础学习（二）js 和 html 的结合方式
		
    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
    
		
    8. 
						
  8. JavaScript 基础 学习 （四）
		
    JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 ​ 元素.on事件类型 = null ​ 因为赋值的关系,所以给事件赋值为 null 的时候 ​ 事件触发的时候,就没有事件处理 ...
    
		
    9. 
						
  9. JavaScript 基础 学习（三）
		
    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【PHP对XML文件的操作技术【完整版】】
			
    无论是c/c++还是java.c#均有对XML文件操作的技术,PHP对XML文件的操作的技术主要有三种: DOM.XPath.SimpleXml. 一.DOM DOM:Document Object  ...
    
			
    2. 
						
  2. sdut 2610:Boring Counting（第四届山东省省赛原题，划分树 + 二分）
			
    Boring Counting Time Limit: 3000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述     In this problem you a ...
    
			
    3. 
						
  3. c++ 调用dll
			
    1.首先写一个dll程序并且输出成dll. 新建win32项目,然后在应用程序类型中选择dll. HelloDll.h: #pragma once #ifndef MYDLL_API_EXPORTS  ...
    
			
    4. 
						
  4. Vmware 中安装Unix
			
    准备 1. ubuntu 14.10 下载地址: 官网下载链接 http://www.ubuntu.com/download/desktop 官方版本库 http://releases.ubuntu. ...
    
			
    5. 
						
  5. 如何通过阅读C标准来解决C语言语法问题
			
    有时候必须非常专注地阅读ANSI C标准才能找到某个问题的答案.一位销售工程师把下面这段代码作为测试用例发给Sun的编译小组. foo(const char **p) {} int main(int  ...
    
			
    6. 
						
  6. Bag-of-words模型
			
    Bag-of-words模型是信息检索领域常用的文档表示方法.在信息检索中,BOW模型假定对于一个文档,忽略它的单词顺序和语法.句法等要素,将其仅仅看作是若干个词汇的集合,文档中每个单词的出现都是独立 ...
    
			
    7. 
						
  7. JQuery经典小例子——可编辑的表格
			
    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
    
			
    8. 
						
  8. SQLServer 维护脚本分享（06）CPU
			
    --CPU相关视图 SELECT * FROM sys.dm_os_sys_info SELECT * FROM sys.dm_exec_sessions SELECT * FROM sys.sysp ...
    
			
    9. 
						
  9. JSTL标签详解以及应用实例
			
    JSTL Apache提供的标签库,jar包:jstl-1.2.jar,如果用MyEclipse,它会自动导入,无需自己导入,如果没有使用MyEclipse那么需要自行导入. ------------ ...
    
			
    10. 
						
  10. SoapUI接口测试之实战运用操作（五）
			
    SoapUI接口测试之实战运用操作(五)
    
			
    11.