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. 华为Mate8 NFC 时好时坏，怎么解决呢？
			
    拿起手机朝桌子上磕几下,nfc就好用了.这是花粉总结的,我也试过,很灵.注意要带套,摄像头朝下,头部低一点往下磕.因为nfc芯片在头部,估计是接触不良.
    
			
    2. 
						
  2. Spring+Hibernate+Oracle中的Clob操作配置
			
    bean对象配置: <!-- 此处用于指定当前JDBC的实现,详见下面注解① --> <bean id="nativeJdbcExtractor" class=& ...
    
			
    3. 
						
  3. hdu 2232 矩阵 ***
			
    一天四个不同的机器人a.b.c和d在一张跳舞毯上跳舞,这是一张特殊的跳舞毯,他由4个正方形毯子组成一个大的正方形毯子,一开始四个机器人分别站在4 块毯子上,舞蹈的每一步机器人可以往临近(两个毯子拥有同 ...
    
			
    4. 
						
  4. Eclipse查看JDK源码
			
    设置 点 "window"-> "Preferences" -> "Java" -> "Installed JR ...
    
			
    5. 
						
  5. JSON数据解析（转）
			
    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种理想的数据交换格式. 本文将主要介绍在Android ...
    
			
    6. 
						
  6. visio如何让动态连接线的单箭头变成双箭头？
			
    1 选中线,右击,然后选择“格式”,“线条” 2 3
    
			
    7. 
						
  7. 在Salesforce中通过编写C#程序调用dataloadercliq的bat文件取触发调用data loader来批量处理数据
			
    通过这篇文章 http://www.cnblogs.com/mingmingruyuedlut/p/3413903.html 我们已经知道了Data Loader可以对Salesforce的Objec ...
    
			
    8. 
						
  8. barabasilab-networkScience学习笔记1-网络科学简介
			
    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...
    
			
    9. 
						
  9. UML九种图详解-外链
			
    http://blog.csdn.net/fanxiaobin577328725/article/details/51591482
    
			
    10. 
						
  10. SQLServer批量创建有规则的数据
			
    根据需求要生成从kkk001,kkk002开始的100个递增账号 手插要死人的,用SQL脚本轻松完成: declare @a int ) ) begin ) ) end declare:申明变量, @ ...
    
			
    11.