JavaScript学习笔记--常用的互动方法


Posted in Javascript onDecember 07, 2016

输出内容(document.write)

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用“”括起,直接输出""号内的内容。

<script type="text/javascript">
 document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>

第二种:通过变量,输出内容

<script type="text/javascript">
 var mystr="hello world!";
 document.write(mystr); //直接写变量名,输出变量存储的内容。
</script>

第三种:输出多项内容,内容之间用+号连接。

<script type="text/javascript">
 var mystr="hello";
 document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种:输出HTML标签,并起作用,标签使用“”括起来。

<script type="text/javascript">
 var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
 document.write("JavaScript");
</script>

注意:

在写JS代码的时候,大家可以会发现这样现象:

document.write(" 1  2    3 ");

结果: 1 2 3

无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格。

这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成1个空格。

解决方法:

1、使用输出html标签 来解决

document.write("  "+"1"+"    "+"23");

结果: 1 23

2、使用CSS样式来解决

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

结果: 1  2  3

在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

警告(alert 消息对话框)

我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。

语法:

alert(字符串或变量);

看下面的代码:

<script type="text/javascript">
 var mynum = 30;
 alert("hello!");
 alert(mynum);
</script>

:alert弹出消息对话框(包含一个确定按钮)。

结果:按顺序弹出消息框

JavaScript学习笔记--常用的互动方法

JavaScript学习笔记--常用的互动方法

注意:

在点击对话框"确定"按钮前,不能进行任何其它操作。

消息对话框通常可以用于调试程序。

alert输出内容,可以是字符串或变量,与document.write相似。

确认(confirm 消息对话框)

confirm消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

*语法:8

confirm(str);

参数说明:

str:在消息对话框中要显示的文本

返回值: Boolean值

返回值:

当用户点击"确定"按钮时,返回true

当用户点击"取消"按钮时,返回false

注: 通过返回值可以判断用户点击了什么按钮

看下面的代码:

<script type="text/javascript">
 var mymessage=confirm("你喜欢JavaScript吗?");
 if(mymessage==true)
 { document.write("很好,加油!"); }
 else
 { document.write("JS功能强大,要学习噢!"); }
</script>

结果:

JavaScript学习笔记--常用的互动方法

注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。

提问(prompt 消息对话框)

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

语法:

prompt(str1, str2);

参数说明:

str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改

返回值:

1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null

看看下面代码:

var myname=prompt("请输入你的姓名:");
if(myname!=null)
 { alert("你好"+myname); }
else
 { alert("你好 my friend."); }

结果:

JavaScript学习笔记--常用的互动方法

注:在用户点击对话框的按钮前,不能进行任何其它操作。

打开新窗口(window.open)

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

    1.该名称由字母、数字和下划线字符组成。

    2."_top"、"_blank"、"_selft"具有特殊意义的名称。
       _blank:在新窗口显示目标网页
       _self:在当前窗口显示目标网页
       _top:框架网页中在上部窗口中显示目标网页

    3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

    4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

JavaScript学习笔记--常用的互动方法

例如:打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

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

注意:运行结果考虑浏览器兼容问题。

关闭窗口(window.close)

close()关闭窗口

用法:

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

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

例如:关闭新建的窗口。

<script type="text/javascript">
 var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中
 mywin.close();
</script>

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery动画animate方法使用介绍
May 06 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
详解JavaScript的内置对象
Dec 07 #Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 #Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 #Javascript
jQuery中get方法用法分析
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 #Javascript
jQuery删除当前节点元素
Dec 07 #Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP与以太坊交互详解
2018/08/24 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python游戏地图最短路径求解
2019/01/16 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
教师个人自我评价
2015/03/04 职场文书
2015大学迎新标语
2015/07/16 职场文书
合理化建议书范文
2015/09/14 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书