Web开发技术——JavaScript语法1(操作HTML元素、注释)

JavaScript 通常用于操作 HTML 元素

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素:

例子

通过指定的 id 来访问 HTML 元素,并改变其内容:

<!DOCTYPE html>
<html>
<body>
    <h1>My First Web Page</h1>
    <p id="demo">My First Paragraph</p>
    <script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>
</body>
</html>

JavaScript 由 web 浏览器来执行。在这种情况下,浏览器将访问 id="demo" 的 HTML 元素,并把它的内容(innerHTML)替换为 "My First JavaScript"。

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中:

实例
<!DOCTYPE html>
<html>
<body>
    <h1>My First Web Page</h1>
    <script>document.write("<p>My First JavaScript</p>");</script>
</body>
</html>

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

实例
<!DOCTYPE html>
<html>
<body>
    <h1>My First Web Page</h1>
    <p>My First Paragraph.</p>
    <button onclick="myFunction()">点击这里</button>
    <script>        function myFunction() { document.write("糟糕!文档消失了。"); }</script>
</body>
</html>

Windows 8 中的 JavaScript

提示:微软支持通过 JavaScript 创建 Windows 8 app。

对于因特网和视窗操作系统,JavaScript 都意味着未来。

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World":

document.getElementById("demo").innerHTML="Hello World";

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

提示:您也可能看到不带有分号的案例。

在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。

浏览器会按照编写顺序来执行每条语句。

本例将操作两个 HTML 元素:

实例
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个 HTML 元素的函数:

实例
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var name="Hello";
var name = "Hello";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("Hello \
World!");

不过,您不能像这样折行:

document.write \
("Hello World!");

您知道吗?

提示:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。

JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

例子

下面的例子使用单行注释来解释代码:

// 输出标题:document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:document.getElementById("myP").innerHTML="This is my first paragraph.";

JavaScript 多行注释

多行注释以 /* 开始,以 */ 结尾。

下面的例子使用多行注释来解释代码:

例子
/*下面的这些代码会输出一个标题和一个段落并将代表主页的开始*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

使用注释来阻止执行

例子 1

在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试):

//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
例子 2

在下面的例子中,注释用于阻止代码块的执行(可用于调试):

/*document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";*/

在行末使用注释

在下面的例子中,我们把注释放到代码行的结尾处:

例子
var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它
时间: 2024-08-29 00:32:24

Web开发技术——JavaScript语法1(操作HTML元素、注释)的相关文章

Web开发技术&mdash;&mdash;JavaScript语法4(分支语句、循环语句)

JavaScript If...Else 语句 条件语句用于基于不同的条件来执行不同的动作. 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用以下条件语句: · if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 · if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 · if...else if....else 语句 - 使用该语

Web开发技术&mdash;&mdash;JavaScript语法3(函数、运算符、比较和逻辑运算符)

JavaScript 函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 实例 <!DOCTYPE html> <html> <head> <script>function myFunction() { alert("Hello World!"); }</script> </head> <body> <button onclick="myFunction()"&

Web开发技术 &mdash;&mdash;JavaScript语法2(变量、数据类型、对象)

JavaScript 变量 变量是存储信息的容器. 实例 var x=2; var y=3; var z=x+y; 就像代数那样 x=2 y=3 z=x+y 在代数中,我们使用字母(比如 x)来保存值(比如 2). 通过上面的表达式 z=x+y,我们能够计算出 z 的值为 5. 在 JavaScript 中,这些字母被称为变量. 提示:您可以把变量看做存储数据的容器. JavaScript 变量 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变

Web开发技术&mdash;&mdash;JavaScript HTML DOM1(基础、改变HTML、改变CSS)

JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改

Web开发技术&mdash;&mdash;Javascript对象1(数值,字符串,日期)

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性 属性是与对象相关的值. 访问对象属性的语法是: objectName.propertyName 这个例子使用了 String 对象的 length 属性来获得字符串的长度: var message="He

Web开发技术&mdash;&mdash;Javascript Window BOM

JavaScript Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性. Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量

Web开发技术&mdash;&mdash;Javascript基础

什么是JavaScript JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. Javascript主要用来修改HTML和CSS,使网页产生动态的效果 如何使用Javascript HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部

Web开发技术&mdash;&mdash;Javascript HTML DOM2(事件)

JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 对事件做出反应 我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时. 如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码: onclick=JavaScript HTML 事件的例子: · 当用户点击鼠标时 · 当网页已加载时 · 当图像已加载时 · 当鼠标移动到元素上时 · 当输入字段被改变时

Web开发技术&mdash;&mdash;JavaScript HTML DOM3 (元素)

添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> var para=document.