JavaScript学习笔记

JavaScript 用法

  1. <script> 标签

    1
    2
    3
    <script>
    alert("我的第一个 JavaScript");
    </script>
  2. <head> 中的 JavaScript 函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
    </script>
    </head>
    <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
    </body>
    </html>
  3. <body> 中的 JavaScript 函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
    </script>
    </body>
    </html>
  4. 外部的 JavaScript

    外部脚本不能包含 <script> 标签。

    1
    2
    3
    4
    5
    6
    <!DOCTYPE html>
    <html>
    <body>
    <script src="myScript.js"></script>
    </body>
    </html>

JavaScript 输出

  1. 写到 HTML 文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction() {
    document.write(Date());
    }
    </script>
    </body>
    </html>
  2. 写到控制台

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一个 Web 页面</h1>
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    </body>
    </html>

JavaScript 语句

  1. JavaScript 对大小写敏感

    函数 getElementById 与 getElementbyID 是不同的,同样,变量 myVariable 与 MyVariable 也是不同的。

  2. 对代码行进行折行

    可以在文本字符串中使用反斜杠对代码行进行换行。

    1
    2
    document.write("你好 \
    世界!");

JavaScript 注释

  1. JavaScript 单行注释

    1
    2
    3
    4
    // 输出标题:
    document.getElementById("myH1").innerHTML="欢迎来到我的主页";
    // 输出段落:
    document.getElementById("myP").innerHTML="这是我的第一个段落。";
  2. JavaScript 多行注释

    1
    2
    3
    4
    5
    6
    7
    /*
    下面的这些代码会输出
    一个标题和一个段落
    并将代表主页的开始
    */
    document.getElementById("myH1").innerHTML="欢迎来到我的主页";
    document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 变量

变量必须以字母开头;变量也能以 $_ 符号开头;变量名称对大小写敏感。

  1. 声明(创建) JavaScript 变量

    1
    var carname="Volvo";
  2. 一条语句,多个变量

    1
    var lastname="Doe", age=30, job="carpenter";
  3. Value = undefined

    未使用值来声明的变量,其值实际上是 undefined。

    1
    var carname;
  4. 重新声明 JavaScript 变量

    如果重新声明 JavaScript 变量,该变量的值不会丢失。

    1
    2
    var carname="Volvo";
    var carname;

JavaScript 数据类型

字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

  1. JavaScript 拥有动态类型

    1
    2
    3
    var x; // x 为 undefined
    var x = 5; // 现在 x 为数字
    var x = "John"; // 现在 x 为字符串
  2. JavaScript 字符串

    1
    2
    3
    var answer="It's alright";
    var answer="He is called 'Johnny'";
    var answer='He is called "Johnny"';
  3. JavaScript 数字

    1
    2
    var y=123e5; // 12300000
    var z=123e-5; // 0.00123
  4. JavaScript 布尔

    1
    2
    var x=true;
    var y=false;
  5. JavaScript 数组

    1
    2
    3
    4
    5
    6
    var cars1=new Array();
    cars1[0]="Saab";
    cars1[1]="Volvo";
    cars1[2]="BMW";
    var cars2=new Array("Saab","Volvo","BMW");
    var cars3=["Saab","Volvo","BMW"];
  6. JavaScript 对象

    1
    2
    3
    var person={firstname:"John", lastname:"Doe", id:5566};
    var name1=person.lastname;
    var name2=person["lastname"];
  7. Undefined 和 Null

    Undefined 这个值表示变量不含有值,可以通过将变量的值设置为 null 来清空变量。

    1
    2
    cars=null;
    person=null;
  8. 声明变量类型

    1
    2
    3
    4
    5
    var carname=new String;
    var x= new Number;
    var y= new Boolean;
    var cars= new Array;
    var person= new Object;
坚持原创技术分享,您的支持将鼓励我继续创作!