《AngularJS高级程序设计》——5.2 理解script元素

5.2 理解script元素

使用script元素将JavaScript代码添加到HTML文档。有两种使用script元素的方式,你可以在清单5-1中看到二者。第一种方式是使用src属性引用独立的文件,它包含JavaScript语句。我使用AngularJS库文件所做的就是,像这样:

你还可以创建内联脚本,把JavaScript语句放在script元素的标签中间,像这样:

对于实际项目,你将会经常使用外部文件,因为它们易于管理,但对于我在本书创建的该示例,为了便于我演示通常HTML和JavaScript在同一文件中。

本例中内联脚本包含console.log方法的语句,它在JavaScript控制台(console)写入消息。控制台是浏览器为让你显示你的脚本被执行的调试信息所提供的基础(且有用)的工具。每个浏览器都有不同方式显示控制台。对于谷歌浏览器(Google Chrome),你在Tools菜单选择JavaScript控制台。你可以在图5-2中看到控制台是如何显示在Chrome中的。

提示:
注意图5-2所示的Chrome窗口有AngularJS分栏。这是我在第1章中创建的Batarang扩展添加的,用于调试AngularJS应用。
你可以看到调用console.log方法在控制台窗口显示的输出,连同消息源来自哪里的详情(这来自jsdemo.html文件第7行)。在本章中,我不会显示截图,我将只显示示例的结果,所以,举个例子,清单5-1的输出如下:

在章节后面我格式化了一些结果,使之易于阅读。在下面的段落中,我会向你展示JavaScript语言的核心特性。如果你有任何其他现代语言的编程经验,你会发现你很熟悉JavaScript的语法和风格。

时间: 2024-09-13 23:20:20

《AngularJS高级程序设计》——5.2 理解script元素的相关文章

《AngularJS高级程序设计》——导读

前言 AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中,并且得到众多前端工程师的青睐. 本书是AngularJS程序设计的高级指南.全书共25章,分为3个部分,每部分覆盖一组相关话题.第1部分为第1章到第8章,包括AngularJS简介,以及HTML.CSS和JavaScript的基础知识.第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,依次深入介绍每种类型的组件.第3部分为第18

《AngularJS高级程序设计》——5.5 使用变量及类型

5.5 使用变量及类型 在前面的例子中你看到了如何定义变量:你用var关键字,然后可选地在语句中为变量赋值.在函数中定义的变量是本地变量,适合仅在函数内使用.直接定义在script元素中的变量是全局变量,可在任意位置访问,包括同一HTML文档中的其他脚本.清单5-8演示了本地和全局变量的使用. 清单5-8 在文件jsdemo.html中使用本地和全局变量 JavaScript是动态类型语言.这并不说明JavaScript没有类型.它只是说你并非一定要显式声明变量类型,你可以轻而易举地为同一变量赋

《AngularJS高级程序设计》——5.4 定义并使用函数

5.4 定义并使用函数 当浏览器处理HTML文档时,它会一个挨一个地往下读.当其遇到script元素,就立刻按其定义顺序执行所包含的JavaScript语句. 这就是前面的例子中发生的,向控制台写了两条消息.你也可以将多条语句包成函数,在浏览器遇到调用该函数的语句前它不会执行,如清单5-4所示. 清单5-4 在文件jsdemo.html中定义JavaScript函数 定义函数很简单:使用function关键字,后面跟着你想的函数名,然后是一对括号("("和")").

《AngularJS高级程序设计》——2.2 使用AngularJS

2.2 使用AngularJS 对于要创建的基本功能来说,todo.html文件中的静态HTML目前仅作为占位符使用.用户应该能看到待办事项的列表,勾选掉已完成的事项,并创建新事项.在下面各节中,我打算将AngularJS加进来,并应用一些基本特性来为我的待办事项应用赋予生命.简单起见,假定只有一个用户,并且不用考虑保留应用程序中的数据状态.2.2.1 将AngularJS应用到HTML文件将AngularJS加入到HTML文件中是挺简单的,只需简单增加一个script元素来引入angular.

《AngularJS高级程序设计》——5.3 使用语句

5.3 使用语句 基本JavaScript构建块是语句(statement).每个语句代表一个命令,语句通常以分号(;)结尾.分号是可选的,但使用它们可以让你的代码易于阅读且使多个语句在一行内成为可能.清单5-3显示了使用script元素定义的脚本中的两条语句. 清单5-3 在文件jsdemo.html中使用JavaScript语句 浏览器依次执行每条语句.在本例中,我简单向控制台写了两条消息.结果如下:

《AngularJS高级程序设计》——2.3 基本功能之外

2.3 基本功能之外 我定义了基本的MVC构件,这样,就创建了一个本章开始时的静态模拟程序的动态版本.现在我们已经有了一个较为坚固的基础了,就可以使用一些更高级的技术来增添功能并创建一个更为完整的应用.在下面各节中,我将对这个待办事项应用使用不同的AngularJS特性,并解释将在本书中的何处更详细地介绍这些特性. 2.3.1 使用双向模型绑定 在前一节中所使用的绑定被称为单向绑定,其值是从模型中取得的,并用于操作模板中的元素.在Web应用开发中这是相当标准的做法和广泛应用的技术.例如,在使用j

《AngularJS高级程序设计》——第2章 你的第一个AngularJS应用 2.1 准备项目

第2章 你的第一个AngularJS应用 开始使用AngularJS的最好方式就是潜心钻研进去,创建一个Web应用程序.在本章中,我将带你学习一个简单的开发过程,从一个目标应用程序的静态模型开始,使用AngularJS的特性打造出一个动态的Web应用程序,尽管只是一个简单的程序.在第6-8章,我将向你演示如何创建一个更复杂而实际的AngularJS应用程序,但是现在一个简单的例子将足以用于演示一个AngularJS应用的主要组件,并为本书这部分的其他章节做好准备. 2.1 准备项目 在本章中,我

《AngularJS高级程序设计》——第1章 准备 1.1你需要知道哪些知识

第1部分 准备 第1章 准备 AngularJS吸收了服务器端开发技术的一些最好的方面,并使用它们来对浏览器中的HTML进行增强,为更简单而容易地构建富应用程序奠定了基础.AngularJS应用程序是围绕着被称为模型-视图-控制器(MVC)的模式而构建的,该模式的重点在于创建这样的应用程序: 可扩展的:一旦了解了基本原理,就能够轻松理解一个复杂的AngularJS应用是如何工作的--意味着你可以很容易地增强应用程序以便为用户创建有用的新特性. 可维护的:AngularJS应用易于调试和纠错,意味

《AngularJS高级程序设计》——1.5 如何搭建你的开发环境

1.5 如何搭建你的开发环境 从一个浏览器.一个文本编辑器和一个Web服务器就可以开始你的AngularJS开发之旅.客户端Web应用开发的好处之一就是你可以挑选并组合一系列开发工具,以创建一个适合你工作风格和编程实践的环境.在下面的各节中,我将描述我所使用的环境,以便你可以在自己的工作站上重新创建它.1.5.1 选择Web浏览器 AngularJS在任何现代浏览器上都可以工作,你应该在你的用户有可能使用到的所有浏览器上测试你的应用.不管怎样,你需要一个为开发而用的浏览器,以便于搭建出开发环境,