JavaScript 输出段落。
"); 注意:只能在HTML输出中使用document.write。如果在文档加载后使用该方法, 则会覆盖整个文档。 ②JavaScript可对事件反应。例如: 说明:alert函数在JavaScript中并不常用,但它对于代码测试非常方便。 onclick事件只是即将在本书学到的众多事件之一。 ③JavaScript可改变HTML内容。使用JavaScript来处理HTML内容是非常强大 的功能。例如: x=document.getElementById("div") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容 JavaScript开发中会经常看到document.getElementById("someid")。这个方法是 HTMLDOM 中定义的。DOM(DocumentObject Model,文档对象模型)是用于访问 基于Web技术的物联网应用开发 12 8 HTML元素的正式W3C标准。 2.JavaScript的作用 (1)校验用户输出的内容。 (2)有效地组织网页内容。 (3)动态地显示网页内容。 (4)弥补静态网页不能实现的功能。 (5)动画显示。 3.JavaScript与Java的区别 JavaScript与Java区别如表5-1所示。 表5-1 JavaScript与Java的区别 序 号JavaScript Java 1 在客户端运行时被解释 由编写者编译后变成机器代码,运行在服务器端或 客户端 2 程序源代码嵌入在HTML文件中由Java开发的Applets与HTML无关 3 弱数据类型严格的数据类型 4 由美国Netscape公司的Brenddan Eich发明 由美国Sun microsystems 公司的JamesGosling 发明 5 只能在浏览器中应用可作为独立的应用程序 6 只作用于HTML的对象元素只作用于HTML的对象元素外的元素,如多媒体 5.1.2 引入JavaScript文件 1.添加嵌入脚本 嵌入脚本位于HTML 文档之内,同嵌入样式表相似。HTML 中的脚本必须位于 标签之间。会告诉JavaScript在何处开始 和结束。脚本可被放置在HTML页面的或中。 一些老的示例可能会在我是图片1
页面显示效果如图5-1所示。 图5-1 按钮调用函数页面显示 2)中的JavaScript函数 例5-2 把一个JavaScript函数放置到HTML页面的部分,该函数会在单击 按钮时被调用。我是图片1
2.从外部文件加载脚本 同为页面添加样式表一样,从外部文件加载脚本通常比在HTML中嵌入脚本要好一 些。这样做的好处是,可以在需要某一脚本的每个页面加载同一个JavaScript文件。需要 对脚本进行修改时,可以仅编辑一个脚本,而不必在各个单独的HTML页面更新相似的脚 本。无论是加载外部脚本还是添加嵌入脚本,均使用script(脚本)元素。 外部JavaScript文件的文件扩展名是.js。如需使用外部文件,请在 可以将脚本放置于或中,放在 第 5 章 JavaScript编程 13 1 程序运行效果如图5-2所示。 图5-2 JavaScript 元素输出 JavaScript由Web浏览器执行。在这种情况下,浏览器将访问id="demo"的HTML 元素,并把它的内容(innerHTML)替换为“安全”。更改HTML元素的innerHTML属性 是在HTML中显示数据的常用方法。 2)使用document.write写到HTML输出 例5-4 直接把元素写到HTML文档输出。
安全防护功能
页面运行效果如图5-3所示。 图5-3 JavaScript 文档输出 注意:在HTML文档完全加载后使用document.write将删除所有已有的HTML,所 以请使用document.write仅仅向文档输出写内容。 例5-5 在HTML文档完全加载后使用document.write将删除所有已有的HTML。安全防护功能
基于Web技术的物联网应用开发 13 2 页面运行效果如图5-4所示。 单击“单击这里”按钮后,出现如图5-5所示的效果。 图5-4 文档输出调用前 图5-5 文档输出调用后 3)使用window.alert写入警告框 例5-6 使用警告框来显示数据。安全防护功能
显示效果如图5-6所示。 图5-6 警告框显示数据 第 5 章 JavaScript编程 13 3 4)使用console.log写入浏览器控制台 在浏览器中可使用console.log方法来显示数据。 例5-7 在谷歌浏览器(chrome)中,通过F12来激活浏览器控制台,并可在菜单中选 择“控制台”查看数据。安全防护功能
页面显示效果如图5-7所示。 图5-7 控制台查看数据 2.JavaScript语句 1)JavaScript程序 计算机程序是由计算机“执行”的一系列“指令”组成的。在HTML中,JavaScript语 句是由Web浏览器“执行”的“指令”组成的。在编程语言中,这些编程指令称为语句。 JavaScript程序就是由一系列的编程语句组成的。 说明:在HTML中,JavaScript程序由Web浏览器执行。 2)JavaScript语句 JavaScript语句由值、运算符、表达式、关键词和注释构成。大多数JavaScript程序都 包含许多JavaScript语句。这些语句会按照它们被编写的顺序逐一执行。例如: 基于Web技术的物联网应用开发 13 4 document.getElementById("demo").innerHTML="查看火焰传感器状态"; 说明:JavaScript程序常被称为JavaScript代码。 3)分号 分号用于分隔JavaScript语句。通常在每条可执行的语句结尾添加分号。例如: a=5; b=6; c=a+b; 使用分号的另一用处是在一行中编写多条语句。 说明:在JavaScript中,用分号来结束语句是可选的。 4)JavaScript代码 JavaScript代码是JavaScript语句的序列。浏览器会按照编写顺序来执行每条语句。 例如,下面语句将操作两个HTML元素,效果如图5-8所示。 document.getElementById("demo").innerHTML="安防控制界面"; document.getElementById("mydiv").innerHTML="能耗管控界面"; 图5-8 JavaScript 语句使用 5)JavaScript代码块 JavaScript语句可以用花括号组合在代码块中。代码块的作用是定义一同执行的语 句。JavaScript函数是将语句组合在块中的典型例子。 下面的例子可操作代码块中的两个HTML元素的函数。代码块使用后显示如图5-9 所示,JavaScript代码改变元素如图5-10所示。 function myFunction() {d ocument.getElementById("demo").innerHTML="语句1"; document.getElementById("myDIV").innerHTML="语句2"; } 后面章节将详细的讲解更多函数的知识。 6)JavaScript对英文字母大小写敏感 JavaScript对英文字母大小写是敏感的。当编写JavaScript语句时,请留意是否关闭 第 5 章 JavaScript编程 13 5 英文字母大小写切换键。例如,函数getElementById与getElementbyID 是不同的,变量 myDiv与MyDiv也是不同的。 图5-9 JavaScript 代码块使用 图5-10 JavaScript 代码改变元素 7)空格 JavaScript会忽略多余的空格。可以向脚本添加空格提高其可读性。例如,下面的两 行语句是等效的。 var x="2"; var x="2"; 8)对代码行进行折行 如果JavaScript语句太长,对其进行折行的最佳位置是某个运算符。下面的例子会正 确地显示。 document.getElementById("demo").innerHTML= "基于Web 技术的物联网应用开发"; 也可以在文本字符串中使用反斜杠(\)对代码进行换行。 例如,以下是正确写法。 document.write("基于Web 技术的\ 物联网应用开发"); 以下是错误写法。 document.write \ ("基于Web 技术的物联网应用开发"); 3.JavaScript注释 像其他所有语言一样,JavaScript的注释在运行时也是被忽略的。注释只给程序员提 供消息。JavaScript注释可用于提高代码的可读性。 JavaScript注释有两种:单行注释和多行注释。 1)单行注释 单行注释以//开头。下面的例子使用单行注释来解释代码。