手机版

JavaScript学习笔记-常用交互方法

时间:2021-09-07 来源:互联网 编辑:宝哥软件园 浏览:

输出内容(文档.写)

Document.write()可用于将内容直接写入HTML输出流。简单来说就是直接在网页中输出内容。

第一个:输出内容用“”括起来,直接输出“”中的内容。

脚本类型=' text/javascript ' document . write('我爱JavaScript!');//内容用“”括起来,直接输出“”中的内容。/script第二个:通过变量输出内容

脚本类型=' text/JavaScript ' var mystr=' hello world!';document . write(mystr);//直接写变量名,输出变量中存储的内容。/script第三个:输出多个内容,内容之间用数字连接。

脚本类型=' text/JavaScript ' var mystr=' hello ';document . write(mystr‘我爱JavaScript’);//多项内容用数字连接。/script第四个:输出HTML标签,这是有效的,标签用""括起来。

脚本类型=' text/JavaScript ' var mystr=' hello ';document . write(mystr ' br ');//输出hello后,输出一个新的行字符文档. write(' JavaScript ');/script注意:

写JS代码的时候,可以发现这个现象:

document . write(' 1 2 3 ');结果: 1 2 3无论输出内容中有多少空格,显示的结果似乎只有一个空格。

这是因为浏览器显示机制将多个连续的空格显示为一个用于手动键入空格的空格。

变通方法:

1.使用输出html标记来解决这个问题

document . write(' ' 1 ' ' ' ' 23 ');

结果: 1 232。用CSS样式来解决

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

结果: 1 2 3添加“空白: pre;”输出样式属性时。这种风格意味着“空白空间将由浏览器保留”

警告(警报消息对话框)

当我们访问网站时,有时会弹出一个小窗口,上面写着一条信息。如果你不点击“确定”,你就不能在网页上做任何事情。这个小窗口是用alert实现的。

语法:

Alert(字符串或变量);

看看下面的代码:

脚本类型=' text/JavaScript ' var mynum=30;alert('hello!');alert(mynum);/script note :alert弹出消息对话框(包括一个ok按钮)。

结果:依次弹出消息框

注意:

在单击对话框中的“确定”按钮之前,您不能做任何其他事情。

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

警报的输出内容可以是字符串或变量,类似于document.write.

确认(确认消息对话框)

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

*语法:8

确认(字符串);

参数描述:

字符串:要在消息对话框中显示的文本

返回一个布尔值:

返回值:

当用户点击“确定”按钮时,它返回真

当用户单击“取消”按钮时,返回false

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

看看下面的代码:

脚本类型=' text/JavaScript ' var my message=confirm('你喜欢JavaScript吗?');if(my message==true){ document . write('很好,加油!');} else {document.write('JS功能强大,所以要学习!');}/脚本结果:

注意:消息对话框是独占的,也就是说,用户在单击对话框按钮之前不能执行任何其他操作。

提问(提示信息对话框)

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

语法:

提示(str1,str 2);

参数描述:

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

返回值:

1.单击“确定”,文本框中的内容将作为函数返回。2.单击取消,将返回空值

请看下面的代码:

Var myname=prompt('请输入您的姓名: ');if(myname!=null){ alert(' hello ' my name);}else {alert('你好,我的朋友。);}结果:

注意:在用户单击对话框中的按钮之前,不能执行其他操作。

打开一个新窗口

Open()方法可以找到现有的或新创建的浏览器窗口。

语法:

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

参数描述:

URL:可选参数,要在窗口中显示的网页的URL或路径。如果省略此参数或其值为空字符串,窗口将不会显示任何文档。

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

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

2._top '、' _blank '和' _selft '有特殊含义。_blank:在新窗口中显示目标网页_self:在当前窗口中显示目标网页_top:在框架网页的上窗口中显示目标网页

3.只能创建一个同名窗口。如果要创建多个窗口,名称不能相同。

4 .名称不能包含空格。

参数字符串:可选参数,设置窗口参数,用逗号分隔每个参数。

参数表:

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

脚本类型=' text/JavaScript ' window . open(' http://www . Baidu.com ',' _ blank ',' width=300,height=200,menubar=no,toolbar=no,status=no,scroll bar=yes ')/脚本注意:

关上窗户

关闭()关闭窗口

用法:

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

或者

窗口对象。close();//关闭指定的窗口

例如,关闭新创建的窗口。

脚本类型=' text/JavaScript ' var mywin=window . open(' http://www . Baidu.com ');//将新键入的wmywindow对象存储在变量mywin.close()中;/script注意,上面的代码打开了一个新窗口并将其关闭,但是打开的窗口看不到。

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流,希望多多支持我们!

版权声明:JavaScript学习笔记-常用交互方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。