1.JavaScript介绍

JavaScript语言的诞生主要是为了完成页面的数据验证。因此它运行在客户端，需要浏览器来解析执行JavaScript代码。
JavaScript是弱类型语言
特点：
- 交互性
- 安全性
- 跨平台性

2.JavaScript的用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间；
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<!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.JavaScript的输出

JavaScript没有任何打印或者输出的函数
但是可以通过以下的方式对数据进行输出
- window.alert():弹出警告框
- document.write():将内容写到HTML文档中
- innerHTML：写到HTML元素
- console.log()：写到浏览器控制台

4.JS中的数组与对象的创建

在Js中的数组创建有三种方式

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

// 方式二
var cars = nee Array("Saab","Volvo","BMW");

// 方式三
var cars = ["Saab","Volvo","BMW"];

对象的创建
- 对象由花括号分隔。在括号内部，对象的属性以名称和值的键值对定义

var person = {name:"john", age :19 , id:5566}

5.对象

JavaScript对象是变量的容器

对象属性的访问

// 对象的属性可以通过两种方式访问
  var person = { name : "hello", age :18, id : 5566};
  person.name;
  person["name"];

对象方法

// 对象方法的定义
  var person = {
        name : "john",
        age :18,
        id : 5566,
        getName : function()
        {
              return this.name;
        }
  }
  person.fullname;    // 输出函数表达式
  person.fullname();    // 输出函数执行结果

6.JavaScript作用域

这里需要注意的是，在HTML中，全局变量是window对象：所有数据变量都属于window对象

7.JavaScript事件

HTML事件是发生在HTML元素上的事情，当在HTML页面中使用JavaScript时，可以触发这些事件。
常见的HTML事件
当事件触发时，可以使用JavaScript来做一些功能，例如如下代码表示当点击该按钮时，js代码会修改HTML中id="demo"的元素内容

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

8. null与undefined的异同点

undefined是所有没有赋值的变量的默认值，自动赋值
null主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址

9.JavaScript表单

HTML表单验证可以利用JavaScript来完成,例如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("需要输入名字。");
                return false;
            }
        }
    </script>
</head>

<body>

    <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
        名字: <input type="text" name="fname">
        <input type="submit" value="提交">
    </form>

</body>

</html>