《JavaScript入门经典(第6版)》——1.7 与用户交互

    xiaoxiao2024-03-28  10

    本节书摘来自异步社区《JavaScript入门经典(第6版)》一书中的第1章,第1.7节,作者: 【美】 Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区“异步社区”公众号查看。

    1.7 与用户交互

    现在来介绍window和document对象的一些方法。首先介绍的这两个方法都能提供与用户交互的手段。

    1.7.1 window.alert()

    即使不知道window.alert(),我们实际上在很多场合已经看到过它了。window对象位于DOM层级的最顶端,代表了显示页面的浏览器窗口。当我们调用alert()方法时,浏览器会弹出一个对话框显示设置的信息,还有一个“确定”按钮。范例如下:

    这是第一个使用句点表示法的范例,其中调用了window对象的alert()方法,所以按照object.metho

    TIPd表示方法就写为window.alert。

    提示:在实际编码过程中,可以不明确书写window.这部分。因为它是DOM层级结构的最顶层(有时也被称为“全局对象”),任何没有明确指明对象的方法调用都会被指向window,所以

    alert("Here is my message");

    也能实现同样功能。请注意要显示的文本位于引号之中。引号可以是双引号,也可以是单引号,但必须有引号,否则会产生错误。

    这行代码在浏览器执行时,产生的弹出对话框如图1.2所示。

    提示:图1.2显示的弹出对话框由运行在Ubuntu Linux下的Chrome浏览器产生。不同操作系统、不同浏览器、不同显示设置都会影响这个对话框的最终显示情况,但它总是会包含要显示的信息和一个“OK”按钮。

    提示:在用户单击“OK”按钮之前,页面上是不能进行其他任何操作的。具有这种行为模式的对话框称为“模态”对话框。1.7.2 document.write()从这个方法名称就可以猜到它的功能。显然它不是弹出对话框,而是直接向HTML文档写入字符,如图1.3所示。

    ..16-0288图1-3.tif

    图1.3 使用document.write()

    说明:实际上,无论从功能来说,还是从编码风格与可维护性来说,document.write都是一种向页面输出内容的笨拙方式,它有很多的局限性。大多数正规的JavaScript程序员都不会使用这种方式,更好的方式是使用JavaScript和DOM。但在本书第一部分介绍JavaScript语言的基本知识时,我们还会使用这个方法。实践

    {JavaScript编写的“Hello World!” !} 在介绍一种编程语言时,如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。

    程序清单1.1 一个alert()对话框中的“Hello World!”

    <!DOCTYPE html> <html> <head>    <title>Hello from JavaScript!</title> </head> <body>    <script>     alert("Hello World!");    </script> </body> </html>

    在文本编辑器里创建一个文档,命名为hello.html,输入上述代码,保存到计算机,然后在浏览器中打开它。

    注意:有些文本编辑器会尝试给我们指定的文件名添加.txt后缀,因此在保存文件时要确保使用了.html后缀,否则浏览器可能不会正常打开它。几乎全部操作系统都允许我们用鼠标右键单击HTML文件图标,从弹出菜单里选择“打开方式…”(或类似的字眼)。另外一种打开方式是先运行喜欢的浏览器,然后从菜单栏里选择“文件”>“打开”,找到相应的文件,加载到浏览器。

    注意:有些浏览器的默认安全设置会在打开本地内容(比如本地计算机上的文件)时显示警告内容,如果看到这样的提示,只要选择允许继续操作即可。这时会看到如图1.2所示的对话框,但其中的内容是“Hello World!”。如果计算机里安装了多个浏览器,可以尝试用它们都来打开这个文件,比较得到的结果。对话框外观可能有细微差别,但信息和“OK”按钮都是一样的。1.7.3 读取document对象的属性正如前文所述,DOM树包含着方法和属性。前面的范例展示了如何使用document对象的write方法向页面输出文本,现在我们来读取document对象的属性。以document.title属性为例,它包含了HTML页面的

    标签中所定义的标题。

    在文本编辑器里修改hello.html,修改对window.alert()方法的调用:

    alert(document.title);

    注意到document.title并没有包含在引号里,这时如果使用引号,JavaScript会认为我们要输出文本“document.title”。在不使用引号的情况下,JavaScript会把document.title属性的值传递给alert()方法,得到的结果如图1.4所示。

    相关资源:《JavaScript入门经典》 扫描版pdf书 配套代码
    最新回复(0)