《JavaScript和jQuery实战手册(原书第2版)》——2.6节教程:使用变量创建消息

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.6节教程:使用变量创建消息,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.6 教程:使用变量创建消息
在这个教程中,我们将使用变量在Web页面上显示一条消息。
注意: 为了学习本章中的教程,你需要从本书配套Web站点http://sawmac.com/js2e/下载教程文件。请参见1.3节中 “注意”部分的详细说明。

  1. 在文本编辑器中打开chapter02目录下的文件use_variable.html。
    这个页面只是一个基本的HTML文件,其中带有一些简单的使用CSS的设计。它还没有任何的JavaScript。我们可以使用变量在Web页面上显示消息。
  2. 找到< h1>标签(在文件中部略微偏下的位置),添加开始< script>标签和结束< script>标签,代码如下所示:
    <h1>Using a Variable</h1>
    <script>
    </script>

现在,我们应该熟悉这段HTML了:它只是让页面准备好等待编写脚本。
注意: 这个页面使用HTML5作为doctype。如果你使用XHTML 1.0或HTML 4.01,像下面这样把type=”javascript”添加到< script>标签:< script type=”text/javascript”>。这个步骤不是为了使脚本能够工作而必需的,只是为了让页面能够通过W3C验证器(参见本书“前言”部分以了解更多关于验证的内容)。

  1. 在< script>标签之间输入:
    var firstName = 'Cookie';
    var lastName = 'Monster';

这就创建了两个变量firstName和lastName,并且在其中存储了两个字符串值。接下来将把两个字符串加在一起,并且在Web页面上显示结果。

  1. 在两个变量声明下面输入:
    document.write('<p>');

第1章已介绍过,document.write()命令直接把文本添加到Web页面。在这个例子中,我们使用它来把HTML标签显示在页面上。我们为该命令提供了一个字符串'

',它输出的字符串正是我们在HTML代码中录入的内容。提供HTML标签作为document.write()命令的部分也没问题。在这个例子中,JavaScript为段落添加了一个开始标签,以存储要在页面上显示的文本。
注意: 有比document.write()效率更高的方法可以把HTML添加到Web页面。我们将在本书4.7节学习。

  1. 按回车键后输入如下JavaScript代码:
    document.write(firstName + ' ' + lastName);

这里使用在步骤3中所创建的变量中所存储的值。+操作符允许把几个字符串组合到一起,产生一个较长的字符串,然后document.write()命令把该字符串显示到页面。在这个例子中,对于存储在firstName中的值'Cookie',先添加了一个空格字符,然后,再添加lastName的值'Monster'。结果就是字符串'Cookie Monster'。

  1. 再次按下回车键后输入document.write('');。
    完成后的脚本如下所示:
    <script type="text/javascript">
    var firstName = 'Cookie';
    var lastName = 'Monster';
    document.write('<p>');
    document.write(firstName + ' ' + lastName);
    document.write('</p>');
    </script>
  1. 在Web浏览器中预览页面,享受劳动成果(如图2-2所示)。
    单词“Cookie Monster”应该出现在标题 “Using a Variable”的下方。如果你没有看到任何内容,可能是由于代码存在录入错误。把你录入的脚本和上面的脚本进行比较,并参考1.6小节介绍的关于使用Firefox、Safari、Chrome或IE 9调试脚本的技巧。
  2. 返回文本编辑器,把脚本的第二行代码改为:
    var lastName = 'Jar';

保存页面并在Web浏览器中预览。瞧,现在的消息是Cookie Jar(文件complete_use_variable.html中有这段脚本的一个可工作的副本)。

相关文章
|
15天前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
27 0
JavaScript基础知识-变量的声明提前
|
1月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
28 1
|
22天前
|
JavaScript NoSQL 前端开发
|
26天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
1月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
14 1
|
1月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
15 1
|
18天前
|
存储 JavaScript 前端开发
|
18天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
28 0
|
28天前
|
JavaScript 前端开发
揭秘JavaScript变量的三大守护神:从var到let,再到const,究竟隐藏了哪些秘密?
【8月更文挑战第22天】在JavaScript中,`var`、`let`和`const`用于声明变量,但各有特点。`var`有函数作用域并会被提升至作用域顶部。`let`提供块级作用域且存在暂时性死区,不允许提前访问。`const`同样拥有块级作用域,用于声明常量,一旦初始化便不可改变。现代开发倾向于使用`let`和`const`以获得更清晰的作用域控制和避免潜在错误。
26 0
|
28天前
|
JavaScript 前端开发
揭开JavaScript变量作用域与链的神秘面纱:你的代码为何出错?数据类型转换背后的惊人秘密!
【8月更文挑战第22天】JavaScript是Web开发的核心,了解其变量作用域、作用域链及数据类型转换至关重要。作用域定义变量的可见性与生命周期,分为全局与局部;作用域链确保变量按链式顺序查找;数据类型包括原始与对象类型,可通过显式或隐式方式进行转换。这些概念直接影响代码结构与程序运行效果。通过具体示例,如变量访问示例、闭包实现计数器功能、以及动态表单验证的应用,我们能更好地掌握这些关键概念及其实践意义。
21 0