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. WMSYS.WM_CONCAT 函數的用法
			
    select t.rank, t.Name from t_menu_item t; 10 CLARK    10 KING    10 MILLER    20 ADAMS    20 FORD    ...
    
			
    2. 
						
  2. 分享一个最近研究的手机QQ3.0的协议(版本1.4)
			
    最近闲来有事, 分析了一个非常低端(非常低端的意思是说你不应该对她是否能取代你现有的QQ客户端作任何可能的奢望,她只是一个实验性的东西)的手机QQ的协议, 是手机QQ3.0,      所用到的TCP ...
    
			
    3. 
						
  3. 随机生成字符串-php-js
			
    js <script language="javascript"> function randomString(len) { len = len || 32; var  ...
    
			
    4. 
						
  4. [Linux] 解压tar.gz文件，解压部分文件
			
    遇到数据库无法查找问题原因,只能找日志,查找日志的时候发现老的日志都被压缩了,只能尝试解压了   数据量比较大,只能在生产解压了,再进行查找 文件名为*.tar.gz,自己博客以前记录过解压方法: h ...
    
			
    5. 
						
  5. 注解：【有连接表的】Hibernate单向1->N关联
			
    Person与Address关联:单向1->N,[有连接表的] Person.java package org.crazyit.app.domain; import java.util.Hash ...
    
			
    6. 
						
  6. 注解：【有连接表的】Hibernate单向1->1关联
			
    Person与Address关联:单向1->1,[有连接表的] (使用较少!) Person.java package org.crazyit.app.domain; import javax. ...
    
			
    7. 
						
  7. 以管理身份运行cmd
			
    搜索出cmd程序,然后右键-以管理员身份运行
    
			
    8. 
						
  8. Java学习笔记（五）——数组
			
    一.数组使用方法 1. 声明数组 语法: 数据类型[ ] 数组名: 或者   数据类型 数组名[ ]: 其中,数组名可以是任意合法的变量名 2. 分配空间 简单地说,就是指定数组中最多可存储多少个元素 ...
    
			
    9. 
						
  9. Linux编程(3) MakeFile
			
    1. 在Linux中,make工具可以维护程序模块关系和生成可执行程序.它可根据程序模块的修改情况重新编译链接生成中间代码或最终的可执行程序.执行make命令,需要一个名为Makefile的文本文件, ...
    
			
    10. 
						
  10. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目
			
    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...
    
			
    11.