一、什么是JavaScript？

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

1. JavaScript 是一种轻量级的编程语言。
2. JavaScript 是可插入 HTML 页面的编程代码。
3. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
4. JavaScript 很容易学习。

二、简单实例

JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML 内容

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

<div class="box">
        <img id="change" onclick="changeImg()" src="#.jfif" alt="">
    </div>
    <script>
        function changeImg(){
            ele = document.getElementById("change");
            if(ele.src.match("1")){
                ele.src="2.jfif";
            }else if(ele.src.match("2")){
                ele.src="3.jfif";
            }else if(ele.src.match("3")){
                ele.src="4.jfif";
            }else{
                ele.src="#.jfif";  
            }
        }
    </script>

以上实例中代码 element.src.match("1") 的作用意思是：检索* 里面 src 属性的值有没有包含 1 这个字符串，如果存在字符串1，图片 src 更新为 ./2.jfif

1. 在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()
2. 外部 javascript 文件不使用<script>标签，直接写 javascript 代码
3. HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

三、JavaScript输出

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

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

    <p id="demo">HELLO</p>
    <script>
        window.alert("弹出窗口");
        document.getElementById("demo").innerHTML="Hello"
        document.write(new Date)
        a=5
        b=5
        c=7
        result = a+b+c
        console.log(typeof a)
        console.log("result="+result)
    </script>

四、JavaScript 语法

JavaScript 语法

1. JavaScript 是一个脚本语言。
2. 它是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

1. 在编程语言中，一般固定值称为字面量，如 3.14。
2. 数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。

    <script>
        a=3
        b=0.23
        c=2e5
        console.log(a)
        console.log(b)
        console.log(c)
    </script>

3.字符串（String）字面量可以使用单引号或双引号

    <script>
        a=3
        b="0.23"
        // typeof 是判断字面量的类型
        console.log(typeof a)
        console.log(a)
        console.log(typeof b)
        console.log(b)
    </script>

4.表达式字面量用于计算：

 <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML=4*20;
    </script>

5.数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

6.对象（Object）字面量定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

7.函数（Function）字面量定义一个函数：

function myFunction(a, b) { return a * b;}

JavaScript 变量

1.JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

变量是一个名称。字面量是一个值。

    <p id="demo"></p>
    <script>
        var length;
        length = 6;
        document.getElementById("demo").innerHTML = length;
    </script>

三种变量命名规则：

var firstName='king';//小驼峰

var FirstName='queen';//大驼峰

var first_name='maizi';//下划线法

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

    <script>
        a = 5;
        b = 6;
        console.log("a+b="+(a+b))
        console.log("a*b="+(a*b))
        console.log("a-b="+(a-b))
        console.log("a/b="+(a/b))
    </script>

JavaScript语言有多种类型的运算符：

JavaScript 关键字

JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

    <script>
        var length = 16;                                  // Number 通过数字字面量赋值
        var points = length * 10;                              // Number 通过表达式字面量赋值
        var lastName = "Johnson";                         // String 通过字符串字面量赋值
        var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
        var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
        console.log(typeof length);
        console.log(length);
        console.log(typeof points);
        console.log(points);
        console.log(typeof lastName);
        console.log(lastName);
        console.log(typeof cars);
        console.log(cars);
        console.log(typeof person);
        console.log(person);
    </script>

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用,引用一个函数 = 调用函数(执行函数内的语句)

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 字母大小写

1. JavaScript 对大小写是敏感的。
2. 当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
3. 函数 getElementById 与 getElementbyID 是不同的。
4. 同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Q.E.D.