JavaScript 学习笔记

发表于 2015-06-03 更新于 2020-02-28 分类于 02.学习，笔记， JavaScript 阅读次数：阅读次数：本文字数： 3.5k 阅读时长 ≈ 3 分钟

JavaScript 用法

<script> 标签

1
2
3

<script>
    alert("我的第一个 JavaScript");
</script>

<head> 中的 JavaScript 函数

<!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>

<body> 中的 JavaScript 函数

<!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>

外部的 JavaScript

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

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

JavaScript 输出

写到 HTML 文档

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <p>我的第一个段落。</p>
        <button onclick="myFunction()">点我</button>
        <script>
        function myFunction() {
            document.write(Date());
        }
        </script>
    </body>
</html>

写到控制台

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <script>
        a = 5;
        b = 6;
        c = a + b;
        console.log(c);
        </script>
    </body>
</html>

JavaScript 语句

JavaScript 对大小写敏感

函数 getElementById 与 getElementbyID 是不同的，同样，变量 myVariable 与 MyVariable 也是不同的。
对代码行进行折行

可以在文本字符串中使用反斜杠对代码行进行换行。
1
2
document.write("你好 \
世界!");

JavaScript 注释

JavaScript 单行注释

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 多行注释

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

JavaScript 变量

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

声明（创建） JavaScript 变量
1
var carname="Volvo";

一条语句，多个变量

1	var lastname="Doe", age=30, job="carpenter";

Value = undefined

未使用值来声明的变量，其值实际上是 undefined。
1
var carname;
重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失。
1
2
var carname="Volvo";
var carname;

JavaScript 数据类型

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

JavaScript 拥有动态类型

1
2
3

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 字符串

1
2
3

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字

1 2	var y=123e5; // 12300000 var z=123e-5; // 0.00123

JavaScript 布尔
1
2
var x=true;
var y=false;

JavaScript 数组

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"];

JavaScript 对象

1
2
3

var person={firstname:"John", lastname:"Doe", id:5566};
var name1=person.lastname;
var name2=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。
1
2
cars=null;
person=null;

声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;