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 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP 高手之路(一)
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
物流经理自我评价
2013/09/23 职场文书
学生出入校管理制度
2014/01/16 职场文书
实习生自我评价
2014/01/18 职场文书
八一建军节活动方案
2014/02/10 职场文书
团队精神口号
2014/06/06 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
售票员岗位职责
2015/02/15 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
网吧管理制度范本
2015/08/05 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书