HTML 知识(四)：JavaScript

1. JavaScript 简介

JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

2. 输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

2.1 window.alert

弹出警告框来显示数据：

<script>
    window.alert("我是谁")
</script>

效果：

2.2 document.write

<script>
    document.write(Date());
</script>

效果：

2.3 innerHTML

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

效果：

2.4 console.log

<script>
    console.log("我是谁")
</script>

效果：

3. 变量

变量是用于存储信息的"容器"。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

var x=5;
var y=6;
var z=x+y;

4. 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

4.1 字符串

var carname="Volvo XC60";
var carname='Volvo XC60';

4.2 数字

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

4.3 布尔

var x=true;
var y=false;

4.4 数组

    var cars=new Array();
    cars[0]="Saab";
    cars[1]="Volvo";
    cars[2]="BMW";

4.5 对象

    var person={
        firstname : "John",
        lastname  : "Doe",
        id        :  5566
    };

5. 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

看一段代码：

<script>
    function myFunction()
    {
        alert("Hello World!");
    }
</script>
<button onclick="myFunction()">点我吧</button>

函数语法：

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
// 执行代码
}

带参数的函数：

function myFunction(var1,var2)
{
代码
}

6. 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

7. 解析json

<p id="demo">我的第一个段落</p>
<script>
    var text = '{ "sites" : [' +
        '{ "name":"Runoob" , "url":"www.runoob.com" },' +
        '{ "name":"Google" , "url":"www.google.com" },' +
        '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>