JavaScript基础学习篇
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基础学习篇的更多相关文章
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- 鸟哥Linux私房菜基础学习篇学习笔记3
鸟哥Linux私房菜基础学习篇学习笔记3 第十二章 正则表达式与文件格式化处理: 正则表达式(Regular Expression) 是通过一些特殊字符的排列,用以查找.删除.替换一行或多行文字字符: ...
- 鸟哥Linux私房菜基础学习篇学习笔记2
鸟哥Linux私房菜基础学习篇学习笔记2 第九章 文件与文件系统的压缩打包: Linux下的扩展名没有什么特殊的意义,仅为了方便记忆. 压缩文件的扩展名一般为: *.tar, *.tar.gz, *. ...
- 鸟哥Linux私房菜基础学习篇学习笔记1
鸟哥Linux私房菜基础学习篇学习笔记1 第三章 主导分区(MBR),当系统在开机的时候会主动去读取这个区块的内容,必须对硬盘进行分区,这样硬盘才能被有效地使用. 所谓的分区只是针对64Bytes的分 ...
- 48.javascript基础学习
javascript基础学习: http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...
- 拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录
目录 目录 前言 关于这本书 必看知识点 最后 前言 相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历) ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript 基础 学习 (四)
JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 元素.on事件类型 = null 因为赋值的关系,所以给事件赋值为 null 的时候 事件触发的时候,就没有事件处理 ...
- JavaScript 基础 学习(三)
JavaScript 基础 学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
随机推荐
- windows 10 上office2016 word崩溃的解决方案
方案1:--个人试验可行,把如下路径改成自己系统路径 C:Documents and Settings/Administrator/application/data/microsoft/templat ...
- 【转载】PHP使用1个crontab管理多个crontab任务
转载来自: http://www.cnblogs.com/showker/archive/2013/09/01/3294279.html http://www.binarytides.com/php- ...
- OCJP(1Z0-851) 模拟题分析(六)over
Exam : 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam 以下分析全都是我自己分析或者参考网上的,定有 ...
- JavaScript - 基本概念
相等操作符 == 和 != 是先转换再比较 === 和 !== 是直接比较,不经过转换 中文翻译上来说叫做相等和全等.类型转换简单的概括就是高级转低级,比如说布尔字符串转数字,对象取值再转.相等比较有 ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- hdu 4027 2011上海赛区网络赛G 线段树 成段平方根 ***
不能直接使用成段增减的那种,因为一段和的平方根不等于平方根的和,直接记录是否为1,是1就不需要更新了 #include<cstdio> #include<iostream> # ...
- [Outlook] outlook如何实现自动CC和BCC邮件发送
由于需要在不同机器上发送邮件,最终发送的邮件会在不同的机器上,最终导致邮件丢失,以后想找也找不回来,故在网上搜索一翻,找到解决办法. 1. 实现自动CC邮件发送: 方法:使用outlook的配置规则 ...
- IplImage, CvMat, Mat 的关系
IplImage, CvMat, Mat 的关系 转载来源:http://www.cnblogs.com/summerRQ/articles/2406109.html opencv中常见的与图像操作有 ...
- loadrunner解决在项目中的难点解决
代码如下: vuser_init() { lr_save_string("11041331\",\"11041372\",\"11041373\&qu ...
- 记录java基础的学习过程
标识符(类名:变量.属性.方法名: ) 组成:类名开头不能是数字,只能有字母数字_$组成. 命名规范: 类名每一个单词首字母大写(HelloWorld大驼峰法则), 方法名 属性名 变量名首字母小写之 ...