JavaScript概括

（1）JavaScript是脚本语言，跨平台、面向对象，不需要编译，由浏览器直接解析并执行。

（2）Java是编译语言，跨平台、面向对象，需要编译成字节码文件才能运行

（3）常用作用：改变页面内容、对表单进行校验、修改指定元素的属性值

（4）JavaScript中的语句要以分号 ;为结束符，如果一行上写多个语句时，必须加分号用来区分多个语句。

（5）单行注释：// 注释内容

（6）多行注释：/* 注释内容 */

JavaScript引入方式

链接方式

1
2
3
4
<!--引入本地js-->
<script src="js/test.js"></script>
<!--引入外部js-->
<script src="http://xxx.test.js"></script>

嵌入方式

1
2
3
4
<!--嵌入js-->
<script>
	alert("hello world")
</script>

输出语句

方法简介
window.alert()写入警告框
document.write()写入到 HTML 输出
console.log()写入浏览器控制台

变量

JavaScript的变量名区分大小写，可以使用数字、字母、下划线_ 、 $组成，不能以数字开头

使用var定义

使用var定义的作用域是全局变量，变量可以重复定义

1
var 变量名 = 数据值;

使用let定义变量

ECMAScript 6 新增，用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明

1
let 变量名 = 数据值;

使用const定义只读的常量

ECMAScript 6 新增，使用const声明一个只读的常量，一旦声明，值就不能改变

1
const 常量名 = 数据值;

数据类型

数据类型描述
number数字型（整数、小数、NaN(Not a Number)）
string字符型、字符串，单双引皆可 在 js 中 双引号和单引号都表示字符串类型的数据
boolean布尔型。true，false
null对象为空
undefined声明了变量，但没赋值（未初始化） 则该变量的默认值是 undefined 函数无明确的返回值时，返回的也是undefined。

运算符

大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===

运算符举例
一元运算符++，–
算术运算符+，-，*，/，%
赋值运算符=，+=，-=…
关系运算符>，<，>=，<=，!=，==，===…
逻辑运算符&&且，||或，!
三元运算符条件表达式 ? true_value : false_value
运算符描述
==等于，判断类型是否一样，如果不一样，则进行类型转换再去比较其值
===全等于，判断数据类型是否一样，如果不一样，直接返回false，再去比较其值
1
2
3
4
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false

流程控制

if-else

1
2
3
4
5
6
7
8
var a = 10;
if(a > 5){
  console.log("a > 5");
}else if(a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch-case

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.alert("请输入1或2或3")
var num = 3;
switch (num) {
    case 1:
        alert("输入了1");
        break;
    case 2:
        alert("输入了2");
        break;
    case 3:
        alert("输入了3");
        break;
    default:
        alert("输入有误");
        break;
}

for 循环

1
2
3
4
5
6
var sum = 0;
//建议for循环小括号中定义的变量使用let
for (let i = 1; i <= 10; i++) {
	sum += i;
}
alert(sum);

while 循环

1
2
3
4
5
6
7
var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

do while 循环

1
2
3
4
5
6
7
8
var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

函数

JavaScript 函数通过 function 关键词进行定义，函数（就是Java中的方法）是被设计为执行特定任务的代码块；

函数定义

1
2
3
4
5
6
7
8
// 方式一
function 函数名(参数列表){
    要执行的代码
}
// 方式二
var 函数名 = function (参数列表){
    要执行的代码
}

函数调用

1
函数名称(实际参数列表);

常见事件

事件属性名说明
onclick鼠标单击事件，常用于按钮的点击响应操作
onblur失去焦点事件，常用用于输入框失去焦点后验证其输入内容是否合法。
onfocus获得焦点事件
onload完成事件，某个页面或图像被完成加载，常用于做页面js 代码初始化操作
onsubmit表单提交事件，常用于表单提交前，验证所有表单项是否合法。
onchange内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

对象

JavaScript 提供了很多对象供使用者来使用，总共分类三类：基本对象、BOM 对象、DOM对象

基本对象

JavaScript 语言的基本构成单位，包括数据类型（number、string、boolean、null 和 undefined）、全局对象（例如 Object、Array、Date 等）和一些特殊对象（例如 RegExp、Error 等）

BOM 对象

BOM 全称是 Browser Object Model，即浏览器对象模型，BOM 是非标准化的，不同浏览器可能有不同的实现，包含了一些用于操作浏览器窗口、历史记录、浏览器地址栏等信息的对象，例如 window、navigator、location、history 等

对象名称描述
Window浏览器窗口对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性
Navigator浏览器对象，包含有关浏览器的信息，例如浏览器类型、版本和操作系统等
Screen屏幕对象，包含有关客户端屏幕（显示器）的信息，例如宽度、高度、可用宽度和可用高度等
History历史记录对象，与当前浏览器窗口关联的浏览历史记录的 JavaScript 接口
Location地址栏对象，提供了当前浏览器窗口中加载的文档的信息，例如 URL、域名、路径、哈希值等

DOM对象

DOM 全称是 Document Object Model，即文档对象模型，DOM 是标准化的，不同浏览器的实现基本相同，定义了操作 HTML 文档的标准编程接口，开发者可以通过 DOM 对象来改变 HTML 文档中的页面内容、样式、结构等。常见的 DOM 对象包括 document、element、text、attribute 等

对象名称描述
Document整个文档对象，表示 HTML 或 XML 文档，包括所有元素、属性、事件和方法
Element元素对象，表示 HTML 或 XML 文档中的元素，可以通过标签名、类名、ID 等方式获取
Attribute属性对象，表示 HTML 或 XML 元素的属性，可以通过元素对象的 getAttribute() 和 setAttribute() 方法进行操作
Text文本对象，表示 HTML 或 XML 文档中的纯文本内容，可以通过元素对象的 childNodes 属性访问到
Comment注释对象，用于在 HTML 或 XML 中添加注释内容，格式为<!--comment-->

系统当前时钟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <p id="showTime"></p>
    <script>
        var t = null;
        t = setTimeout(time, 1000);

        function time() {
            clearTimeout(t);
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.getElementById("showTime").innerHTML = "<span style='color: blue;'>" + y + "年" + mt + "月" + day + "</span>" + "-" +
                "<span style='color: red;'>" + h + "时" + m + "分" + s + "秒</span>";
            t = setTimeout(time, 1000);
        }
    </script>
</body>
</html>