本文最后更新于 2022-01-15，文章内容可能已经过时。

简介

JavaScript 是一个脚本语言，弱类型语言，不需要编译即可运行在客户端，需要浏览器来解析执行 js代码 ，JavaScript 与 Java 没有任何关系。

JavaScript 组成部分：

组成部分	作用
ECMA Script	构成了JS核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素

核心(ECMA Script): 这一部分主要是js的基本语法。
BOM(浏览器对象模型): 主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
DOM(文档对象模型): HTML 加载到浏览器的内存中，可以使用 js 的 DOM 技术对内存中的 HTML 节点进行修改，用户从浏览器看到的是 js 动态修改后的页面。

书写位置

内嵌式

理论上JS可以写在页面的任何位置。。。

<script>alert("我是内嵌式")</script>

外链式

在网站根目录新建 js 目录，再新建 index.js 后缀的文件，再像link css那样引入进来。

<script src="js/index.js"></script>

行内式

<input type="button" value="ClickMe" onclick="alert('阿巴阿巴');">

数据类型

数值型 --> number
字符串 --> string
布尔 --> boolean
对象类型 --> object
未定义型 --> undefined

变量

var 变量名称 = 存储的数据;
var a = 1;
var b = "内卷";
var c = true;

检测数据类型

<script type="text/javascript">

    var a;
    alert(typeof a);  // undefined

    a = 123;
    alert(typeof a); // number

    a = "内卷";
    alert(typeof a); // string

    a = true;
    alert(typeof a); // boolean

</script>

运算

算术运算符

+ - * / % ++ --
字面意思

关系运算符

> >= < <= !=
== 等于
=== 恒等于，比较大小同时比较类型

逻辑运算符

&&    与    1 && 1    都为1 输出1
||    或    0 && 0    都为0 输出0
!    非    !0    输出1

三目运算符

条件 ? 表达式1 : 表达式2 ;
条件为true，执行表达式1
条件为false，执行表达式2

if条件

和Java一样

var score = 59;
if (score >= 0 && score <=100) {
    if (score >= 90) {
        alert("优秀");
    } else if (score >= 80) {
        alert("良好");
    } else if (score >= 70) {
        alert("中等");
    } else if (score >= 60) {
        alert("及格");
    } else {
        alert("不及格");
    }
} else {
    alert("数值不合法");
}

switch分支

和Java一样

var score = 59;

// 需要一个整型数值 不想要小数点
// window 对象的 parseInt 方法
score = window.parseInt(score / 10 + "");
 
switch (score) {
    case 10:
    case 9:
        alert("优秀");
        break;
    case 8:
        alert("良好");
        break;
    case 7:
        alert("中等");
        break;
    case 6:
        alert("及格");
        break;
    default:
        alert("不及格");
        break;
}

循环结构

while (循环条件) {
    循环体;
}

do {
    循环体;
} while (循环条件);

for (循环变量赋初值; 循环条件; 循环变量增值) {
    循环语句;
}

console.log (...); 以日志的形式在控制台输出结果

函数

自定义函数

格式：

function 函数名 (形参) {
    函数体;
    return 返回值;
}

调用函数:
函数名(参数);

js中如果出现了同名的函数，后者会把前者覆盖掉，不会像java那样重载

匿名函数

字面意思，没有名字的函数

function (形参) {
    函数体;
}
将匿名函数赋值给一个变量，通过变量名调用函数
var a = function (形参) {
    函数体;
}
调用函数:
a(参数);

轮播图

HTML部分

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        div {
            width: 80%;
            margin: 50px auto;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <img src="images/01.jpg">

    <script>
        // 动态获取页面中的 img 标签 然后修改 img 标签的 src 属性
        // 1.获取 img 标签
        var img = document.getElementById("img");

        // 定义一个变量
        var count = 1;

        // 定义一个函数
        function changeImageSrc() {
            // 每次调用 cont + 1
            count ++;
            img.src = "images/0" + count + ".jpg";

            //在第八张图的时候清零
            if (count == 8) {
                count = 0;
            }
        }
 
        // 2.循环切换图片
        // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔,不断调用第一个参数传入的函数
        window.setInterval(changeImageSrc, 2000);
    </script>
</body>

JS事件

概述

事件源: 被监听的HTML元素(这个事件加给谁)
事件类型: 某类动作，例如点击事件，移入移除事件，键盘输入事件等
执行指令: 事件触发后需要执行的代码，一般使用函数进行封装

语法格式: 事件源.事件类型 = 执行指令

常用的事件

事件名	描述
onload	某个页面或者图像被完成加载
onsubmit	当表单提交时触发该事件
onclick	鼠标点击某个对象
ondbclick	鼠标双击某个对象
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onkeydown	键盘的某个键被按下
onkeypress	键盘的某个键被按住
onkeyup	键盘的某个键被松开
onmousedown	鼠标的某个键被按下
onmouseup	鼠标的某个键被松开
onmouseover	鼠标被移到某个元素上
onmouseout	鼠标从元素上离开
onmousemove	鼠标被移动