javascript入门之简单的交互

最新推荐文章于 2024-04-28 10:55:39 发布

琦琦安卓进阶

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量880

点赞数 1

分类专栏： javascript 文章标签： javascript 用户体验前端

本文链接：https://blog.csdn.net/qq_28695619/article/details/54319766

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习javascript的目的是什么？当然是为方便用户和提升用户体验，好的交互性造就了如今热门的前端；现在，我们就开始讲解和分析一下javascript中简单的用户交互。

1.使用javascript输出内容

document.write("javascript入门");//输出内容用双引号括起来，建议用单引号可以避免很多问题的发生
document.write('I love' + str);//变量加字符串，内容之间用+连接
document.write(str + "<br>");//输出HTML标签，并起作用，标签使用""括起来。

该语句的功能是向HTML流中写内容，也可以理解为向网页中输出内容；

2.三种弹出框的学习

（1）alert-警告消息对话框，在访问网页的时候弹出的一个小窗口，上面写着一段提示文字，如果不点击确定就不能进行任何操作。

语法:alert(字符串和变量)

key:用于调试程序，其输出的内容是字符串或变量，与document.write相似

（2）confirm-确认新消息对话框，通常用于允许用户做选择操作，包括一个确认按钮和一个取消按钮

语法:confirm(str);//str,在对话框中需要选择的文本；返回值(boolean)，用户点击了确认按钮返回值为true,否则为false

key:确认消息对话框具有排他性，在完成当前操作前同样不允许执行下一步操作

（3）prompt-弹出消息对话框，通常用于询问一些需要与用户进行交互的信息（包含一个确认按钮，输出按钮和一个文本输入框）

语法:prompt(str1,str2);//str1,显示在消息对话框中的文本,str2,文本框中的内容，返回值，

//点击取消返回null，点击确认返回文本输入框中的内容

key:弹出消息对话框在完全当前操作之前不允许执行下一步操作

3.打开新窗口-用于查找或新建一个浏览器窗口，例子如下

window.open('http://www.csdn.net','_top','left=0,top=100,width=600,height=400,menubar=no,toolbar=no,statu=no,scrillbar=yes')

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

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

窗口名称:可选参数，默认为_blank

_blank:生成一个新窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

_self:在当前窗口访问指定路径或目标页面

key：相同 name（URL）的窗口只能创建一个，要想创建多个窗口则 name（URL）不能相同;name（URL）不能包含有空格。

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

参数值描述

topNumber窗口顶部离开屏幕顶部的像素数

leftNumber窗口左边离开屏幕左边的像素数

widthNumber窗口的宽度

heightNumber窗口的高度

menubaryes,no窗口有没有菜单

toolbaryes,no窗口有没有工具栏

scrollbarsyes,no窗口有没有滚动条

statusyes,no窗口有没有状态栏

4.关闭窗口

语法:window.close();

(窗口对象).close();

使用例子如下

<script type="text/javascript">
     var index = confirm("确认打开新网页？");
     if(index){
         if(confirm("确认关闭当前网页?")){
             var mywin=window.open("http://www.csdn.net","_top");
             window.close();
         } else {
            var mywin=window.open("http://www.csdn.net,"_blink");
         }
     }
  </script>

javascript的事件响应机制

使用javascript创建动态页面的时候,事件是可以被javascript检测到的,网页中的每个元素都可以产生某个触发javascript函数的事件。

具体使用例子

<form>
    <input name="点击我" type="button" value="点击我" onclick/onload等="函数名()"/>
  </form>

key:
onload事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”

①目前试了Firefox、Google Chrome、IE三个浏览器，该事件只对IE起作用。

②onunload事件对于刷新页面和超链接跳转其他页面情况有效，对于关闭页面无效。

③onbeforeunload事件，在离开页面和关闭当前页面的时候都有效果，顾名思义，就是在onunload被执行之前，就被调用

window.onunload = onunload_message;   
     
function onunload_message(){   
        alert("您确定离开该网页吗？");   
 }

琦琦安卓进阶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
javascript入门之简单的交互

javascript入门之简单的交互入门介绍
复制链接

扫一扫

专栏目录

javascript入门之简单的交互

“相关推荐”对你有帮助么？