zoukankan      html  css  js  c++  java
  • 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 赋值给它
  • 相关阅读:
    AngularJS XMLHttpRequest
    AngularJS服务
    angularJS过滤器
    AngularJ控制器
    angular Scope(作用域)
    angular Model 指令
    angular指令
    微信小程序调用微信支付
    微信小程序一直保持登陆状态
    微信小程序ajax请求数据及一些方法
  • 原文地址:https://www.cnblogs.com/cmhunter/p/4159835.html
Copyright © 2011-2022 走看看