JavaScript学习笔记

JavaScript学习笔记

六月 28, 2019

[TOC]

前言

​ 借着这次学校安排的生产实习，对JavaScript进行系统性的学习一下，下面是我在学习过程中对知识点的总结和对JavaScript这门脚本语言的理解，你在学习总共会发现，它有太多C语言的影子，也有Python和swift的影子，如果对这些语言有所了解的你，学习它你会感觉很轻松。爱学习的你加油！

用法

script标签

  • HTML 中的脚本必须位于<script> 与 </script>标签之间。

  • 标签<script>与</script>标记脚本的开始与结束。

  • 脚本可被放置在 HTML 页面的<body>和<head> 部分中。

  • 脚本也可以单独写成一个文件，外部的JavaScript文件扩展名为.js

  • 引用外部JavaScript必须在head标签里的<script>标签的’src’属性中添加文件相对路径。外部的脚本里不包含<script>标签。

  • HTML不限制脚本数量，通常把它放在<head>部分中，或者放在页面底部。这样不会干扰页面内容。

  • JavaScript 对大小写是敏感的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/dome.js"></script>
    <title>Day5</title>
</head>

<body>
    <div>
        <h1>今天学习JavaScript！</h1>
        <p id="dome1">JavaScript是让网页有自己的行为,能改变网页的内容。</p>
        <button type="button" onclick="displayDate()">显示时间</button>
        <button type="button" onclick="alert('这是一个javascript脚本！')">弹出提示</button>
        <button type="button" onclick="window.alert('这是一个javascript警告！')">弹出警告</button>
    </div>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
// alert("这是一个javascript脚本！");// 显示一个提示框
document.writeln("<h1>今天学习JavaScript！</h1>" + "<br/>");//在浏览器输出内容
document.writeln("<h1>今天学习JavaScript！</h1>");
function displayDate() {
    document.getElementById("dome1").innerHTML = Date();
} //获取系统时间并替换所选id的标签内容
var a = 5;
var b = 6;
var c = a + b;
console.log(c);

函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

当用户点击按钮时，某个事件发生时执行代码。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

常见的HTML事件

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

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

读者请用上面的代码自行测试

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

输出

显示数据

  • JavaScript 没有任何打印或者输出的函数。

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

    • 使用 window.alert() 弹出警告框。

  • alert()小括号里可以含有HTML标签。

  • 使用 document.write() 方法将内容写到 HTML 文档中。

    • 用 document.write()时希望 仅仅向文档输出写内容。

      如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

    • 在网页上显示时间document.write(Date())

  • 使用 innerHTML 写入到 HTML 元素。

    • 使用 console.log() 写入到浏览器的控制台。

读者请用上面的代码自行测试

操作HTML元素

  • 使用 document.getElementById(id) 方法从 JavaScript 访问某个 HTML 元素。
  • 使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
1
2
3
4
var ID = documnet.getElementById("dome1");
   function displayDate(ID) {
      ID.innerHTML = Date();
   } //获取系统时间并替换所选id的标签内容

语法

字面量

在编程语言中，一般固定值称为字面量，如 π。

数字（Number）

  • 可以是整数或者是小数，或者是科学计数(e)。

字符串（String）

  • 可以使用单引号或双引号:

    1
    2
    var a="亦可";
    var b='亦可';

表达式

  • 用于计算

    1
    2
    5+6;
    7+8;

数组（Array）

  • 定义一个数组

    1
    var num = [1,2,4,5,6,7]

对象（Object）

  • 定义一个对象：

    1
    var people = {ID:"12",name:"亦可",sex:"男"，age:"22"}

函数（Function）

  • 定义一个函数：

    1
    function fun(a,b){return a+b;}

变量

  • 在编程语言中，变量用于存储数据值。

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

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

  • 重新声明 JavaScript 变量，该变量的值不会丢失

  • 未使用值来声明的变量，其值实际上是 undefined。

操作符

和其它语言一样差不多，没有太多的新内容。

赋值，算术和位运算符 = + - * / 在 JS 运算符中描述
条件，比较及逻辑运算符 == != < > 在 JS 比较运算符中描述

关键字

JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。以下是 JavaScript 中最重要的保留字（按字母顺序）：

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

注释

  • 双斜杠 // 后的内容将会被浏览器忽略

  • 多行注释以/*开始，以*/结尾。

  • 使用注释来阻止执行

数据类型

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

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

    • 对象：由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔，对象键值对的写法类似于： Python中的字典，C 语言中的哈希表，Java 中的哈希映射。对象也是一个变量，但对象可以包含多个值（多个变量）。
    • Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
    • 声明新变量：使用关键词 "new" 来声明其类型：

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

  • Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

  • JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

    1
    2
    3
    4
    5
    var e= new String;
    var x= new Number;
    var y= new Boolean;
    var c= new Array();
    var p= new Object;

语句

  • JavaScript 语句是发给浏览器的命令，是告诉浏览器要做的事情。
  • 每条可执行的语句结尾添加分号分隔 JavaScript 语句。
  • 用分号来结束语句是可选的。
  • 代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。
  • JavaScript 会忽略多余的空格，可以向脚本添加空格，来提高其可读性。
  • 文本字符串中使用反斜杠对代码行进行换行。

语句标识符

语句 描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do … while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for … in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if … else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

对象

创建对象

使用new关键字创建对象，new关键字可以省略，JavaScript 变量均为对象,对象也是一个变量，但对象可以包含多个值（多个变量）。首字母需要大写,

1
2
3
4
5
6
7
<script>
var people = nwe Object;
  people.name :"亦可";
  people.age: "22";
  people.page:"yike.ml"
  
</script>

可以使用字符来定义和创建 JavaScript 对象:

1
2
3
4
5
6
7
<script> 
var people ={
   name:"亦可",
	 age:"22",
	 page:"yike.ml"
}
</script>

JavaScript 对象是变量的容器。

访问对象属性

可以通过两种方式访问对象属性:

person.name;

person["name"];

对象访问方法

可以使用以下语法创建对象方法：

methodName : function() { code lines }

可以使用以下语法访问对象方法：

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

有多种方式可以创建，使用和修改 JavaScript 对象。

同样也有多种方式用来创建，使用和修改属性和方法。

定时器

avaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

停止

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval(“javascript function”,milliseconds);

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
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 500px;
        height: 500px;
        border-radius: 10%;
    }
    </style>
</head>
<body>
    <!-- <script>
        window.alert(Math.floor(Math.PI)); //向下取整
        window.alert(Math.ceil(Math.PI));//向上取整
        window.alert(Math.round(Math.PI)); //四舍五入
        </script> -->
        <div id="box" onmousedown="check()"> </div>
        <input type="button" onclick="check()"  value="点击更换背景颜色">
        <script>
        var arr=['red','blue','orange','pink','purble'];
        var box1=document.getElementById("box")
        function check()
        {
            var x=Math.floor(Math.random()*4);
            box1.style.background=arr[x];
        }
    setTimeOut("check()",2000)
   var time= setInterval("check()",2000)//定时器
    clearInterval(time);      
        
        </script>
</body>
</html>

改变 HTML 样式

语法:

1
document.getElementById(id).style.property=新样式

property—属性

事件

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听

语法：

1
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

可以使用函数名，来引用外部函数

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单击事件</title>
</head>
<body>
        <div id="div"> 这是个各盒子</div>
    <!-- 要同时调用两个函数要在onclick里面添加两个函数用逗号隔开 -->
    <button id="input" >单击事件</button>
    <button id="input1" >双击事件</button>
    <button id="input2" >鼠标右键事件</button>
    <button id="input3" >鼠标按下事件</button>
<script>
var input = document.getElementById("input");
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var div = document.getElementById("div");
function fun(){
 div.innerHTML='单击事件';
div.style.background="red";
}
function fun1(){
div.innerHTML='双击事件';
div.style.background='pink';
}
function fun2(){
div.innerHTML='鼠标右键事件';
div.style.background='pink';
}
function fun3(){
div.innerHTML='鼠标按下事件';
div.style.background='pink';
}
input.addEventListener('click',fun);
input1.addEventListener('dblclick',fun1);
input2.addEventListener('contextmenu',fun2);
input3.addEventListener('mousedown',fun3);

</script>
</body>
</html>

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件。

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
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

移出事件

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
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

setAttribute() 方法

setAttribute() 方法创建或改变某个新属性。

如果指定属性已经存在,则只设置该值。

参数 类型 描述
attributename String 必须。你要添加的属性名称。
attributevalue String 必须。你要添加的属性值。

语法：

1
element.setAttribute(attributename,attributevalue)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yike.ml</title>
</head>
<body>

<input value="OK">

<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
};
</script>

</body>
</html>

  1. 1. 前言
  2. 2. 用法
    1. 2.1. script标签
    2. 2.2. 函数和事件
      1. 2.2.1. 常见的HTML事件
    3. 2.3. onload 和 onunload 事件
    4. 2.4. onchange 事件
    5. 2.5. onmouseover 和 onmouseout 事件
    6. 2.6. onmousedown、onmouseup 以及 onclick 事件
  3. 3. 输出
    1. 3.1. 显示数据
    2. 3.2. 操作HTML元素
  4. 4. 语法
    1. 4.1. 字面量
      1. 4.1.1. 数字（Number）
      2. 4.1.2. 字符串（String）
      3. 4.1.3. 表达式
      4. 4.1.4. 数组（Array）
      5. 4.1.5. 对象（Object）
      6. 4.1.6. 函数（Function）
    2. 4.2. 变量
    3. 4.3. 操作符
    4. 4.4. 关键字
    5. 4.5. 注释
    6. 4.6. 数据类型
  5. 5. 语句
    1. 5.1. 语句标识符
  6. 6. 对象
    1. 6.1. 创建对象
    2. 6.2. 访问对象属性
    3. 6.3. 对象访问方法
  7. 7. 定时器
    1. 7.1. avaScript 计时事件
    2. 7.2. 停止
  8. 8. 改变 HTML 样式
  9. 9. 事件
    1. 9.1. 事件冒泡或事件捕获
    2. 9.2. 移出事件
  10. 10. setAttribute() 方法