《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中有这段脚本的一个可工作的副本)。

相关文章
|
1月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
617 24
|
1月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
1月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
95 11
|
3月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
74 11
|
5月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
77 2
2024年5月node.js安装(winmac系统)保姆级教程
|
5月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
119 14
|
5月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
169 12
|
5月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
105 11
|
5月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
6月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
133 3
下一篇
oss创建bucket