JavaScript 入门教程学习摘要笔记

最新推荐文章于 2025-07-24 19:31:14 发布

抓更够

最新推荐文章于 2025-07-24 19:31:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： JavaScript 入门笔记前端

本文链接：https://blog.youkuaiyun.com/weixin_43451006/article/details/98960126

学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨JavaScript的基础知识，涵盖语法、数据类型、函数、变量作用域、DOM操作及常见API使用，适合初学者和进阶开发者巩固技能。

JavaScript简介

近年最受欢迎的一款直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 基于 prototype，而不是基于类的。

javaScript和ECMAScript的关系

ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。

JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 可以在 HTML 文档中放入不限数量的脚本。
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中，或者同时存在于两个部分中。
- 通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
- 把 JavaScript 放到了页面代码的底部，这样就可以确保在
  元素创建之后再执行脚本。

JavaScript输出

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

JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
- 请使用 document.write() 仅仅向文档输出写内容。
- 如果在文档加载完成后使用该方法，会覆盖整个文档。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

JavaScript语法

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

JavaScript字面量

数字（Number）字面量

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

字符串（String）字面量

可以使用单引号或双引号。

表达式字面量

用于计算。

数组（Array）字面量

定义一个数组。

对象（Object）字面量

定义一个对象。

函数（Function）字面量

定义一个函数。

JavaScript变量

用于存储数据值。

变量均为对象。当您声明一个变量时，就创建了一个新的对象。
使用关键字var来定义变量，使用等号来为变量赋值。
必须以字母开头。
也能以 $ 和 _ 符号开头（不过不推荐这么做）。
变量名称对大小写敏感（y 和 Y 是不同的变量）。
重新声明 JavaScript 变量，该变量的值不会丢失
变量声明之后，该变量是空的（它没有值）。

JavaScriptb变量的生存期

局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

JavaScript 操作符

算术运算符

计算值。

赋值运算符

变量赋值。
多种类型的运算符

JavaScript语句

是发给浏览器的命令。

用分号分隔（可选）。
会忽略多余的空格。
在文本字符串中使用反斜杠对代码行进行换行。

JavaScript关键词

JavaScript 语句通常以关键词为开头。

JavaScript 标识符

必须以字母、下划线（_）或美元符（$）开始。

后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。

JavaScript 注释

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

多行注释：以 /* 和 */包围的语句。
用于阻止其中一条代码行的执行（可用于调试）：

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用。

引用一个函数 = 调用函数(执行函数内的语句)。

JavaScript 对大小写敏感

驼峰命名法
- 变量名的第一个单词的首写字母小写，后面的单词的第一个字母均为大写。

JavaScript 字符集

使用 Unicode 字符集。

覆盖了所有的字符，包含标点等字符。

JavaScript数据类型

字符串（String）：是引号中的任意文本，可以使用单引号或双引号。
- 用于存储和处理文本。
- 字符串长度：内置属性 length 来计算。
- 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。
- 数字与字符串相加，返回字符串。
- 转义字符：
数字(Number)：只有一种数字类型，数字可以带小数点，也可以不带。
布尔(Boolean)：只能有两个值：true 或 false，常用在条件测试中。
数组(Array)：数组下标是基于零的。
对象(Object)：由花括号分隔。
- 在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
- 属性由逗号分隔。
- 空格和折行无关紧要。
- 声明可横跨多行。
空（Null）：通过将变量的值设置为 null 来清空变量。
未定义（Undefined）：表示变量不含有值。
注意点：
- NaN 的数据类型是 number。
- 数组(Array)的数据类型是 object。
- 日期(Date)的数据类型为 object。
- null 的数据类型是 object。
- 未定义变量的数据类型为 undefined。
- 如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 Object。
- 可以使用 constructor 属性来查看对象是否为数组或日期。

JavaScript函数

是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数即对象。
包裹在花括号中的代码块。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
变量和参数必须以一致的顺序出现。
通过使用 return 语句实现函数将值返回调用它的地，使用 return 语句时，函数会停止执行，并返回指定的值。整个 JavaScript 并不会停止执行，仅仅是函数。
仅仅希望退出函数时，也可使用 return 语句。返回值是可选的。

全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

JavaScript作用域

为可访问变量，对象，函数的集合。

作用域在函数内修改。

JavaScript运算符

JavaScript运算符学习图

JavaScript流程语句

JavaScript流程语句学习图

JavaScript正则表达式

JavaScript正则表达式学习图

JavaScript JSON

用于存储和传输数据的格式。

通常用于服务端向网页传递数据。
全称 JavaScript Object Notation
是一种轻量级的数据交换格式，是独立的语言。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本 - 可以被任何编程语言读取及作为数据格式传递。
JSON 语法规则
- 数据为键/值对。
- 数据由逗号分隔。
- 大括号保存对象。
- 方括号保存数组。

javascript:void(0) 含义

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
如果是个# ，就会出现跳到顶部的情况，几种解决方法：
- <a href="####">
- <a href=“javascript:void(0)”>
- <a href=“javascript:void(null)”>
- <a href="#" οnclick=“return false”>
- <span style=“cursor:hand”>
要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0)。

JavaScript代码规范

变量名推荐使用驼峰法来命名(camelCase)。
- 应该区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
通常运算符 ( = + - * / ) 前后需要添加空格。
通常使用 4 个空格符号来缩进代码块。
语句规则
- 一条语句通常以分号作为结束符。
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
对象规则
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号，数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行，并以分号作为结束符号。
为了便于阅读每行字符建议小于数 80 个。
- 如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。
命名规则
- 变量和函数为驼峰法（ camelCase）。
- 全局变量为大写 (UPPERCASE )。
- 常量 (如 PI) 为大写 (UPPERCASE )。
- 变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。
使用简洁的格式载入JavaScript文件。
- <script src=“myscript.js”>
使用 JavaScript 访问 HTML 元素。
使用小写文件名。
IIFE（立即执行的函数表达式）：创建一个新的封闭的定义域。
- 仅避免了干扰，也使得内存在执行完后立即释放。
- (function(){}());
严格模式：会阻止使用在未来很可能被引入的预留关键字。
- 最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。
变量声明：总是使用 var 来声明变量，且只用一个 var 关键字声明，多个变量用逗号隔开。
- 把赋值尽量写在变量声明中。
总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。
不要在语句块内声明函数。
为了最大限度地保证扩展性与兼容性，总是首选标准的特性，而不是非标准的特性。
使用闭包。
不要在循环中创建函数或者闭包。
尽量不要使用 evil 函数。
只在对象构造器、方法和在设定的闭包中使用 this 关键字。
首选函数式风格。
尽量不要用switch，j建议用if else替换它。
用数组和对象字面量来代替数组和对象构造器。
统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处。
避免在复杂的情况下使用三元条件判断。

JavaScript函数

JavaScript函数定义

使用关键字function。
可以通过声明定义，也可以是一个表达式。
- 声明语法
函数声明后不会立即执行，会在我们需要的时候调用到。
由于函数声明不是一个可执行语句，所以不以分号结束。
在函数表达式存储在变量后，变量也可作为一个函数使用（匿名函数 (函数没有名称)）。
通过添加括号，来说明它是一个函数表达式：如果表达式后面紧跟 () ，则会自动调用。
函数是对象。

JavaScript函数参数

不会关注有多少个参数被传递，不关注传递的参数的数据类型。
定义时参数没有指定数据类型。
对隐藏参数(arguments)和个数都没有进行检测。
如果函数在调用时缺少参数，参数会默认设置为： undefined。
JavaScript 函数有个内置的对象 arguments 对象 - 包含了函数调用的参数数组。

JavaScript函数调用

JavaScript 函数有 4 种调用方式，每种方式的不同在于 this 的初始化。

一般而言，在Javascript中，this指向函数执行时的当前对象。
作为一个函数被调用。
- 在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。
- 在浏览器中的页面对象是浏览器窗口(window 对象)。
全局对象。
- 当函数没有被自身的对象调用时， this 的值就会变成全局对象。
- 在 web 浏览器中全局对象是浏览器窗口（window 对象）。
- 使用 window 对象作为一个变量容易造成程序崩溃。
函数作为方法被调用。
- 函数作为对象方法调用，会使得 this 的值成为对象本身。
使用构造函数调用函数。
- 如果函数调用前使用了 new 关键字, 则是调用了构造函数。
- 构造函数中 this 关键字没有任何的值。
- this 的值在函数调用时实例化对象(new object)时创建。
作为函数方法调用函数。
- call() 和 apply() 是预定义的函数方法。
- 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
- 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
- 两者的区别在于第二个参数：
  - apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入。
  - call则作为call的参数传入（从第二个参数开始）。
- 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值，即使该参数不是一个对象。
- 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

JavaScript闭包

读取函数内部的变量。
让这些变量的值始终保持在内存中。
使用闭包的注意点
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
全局变量
- 在web页面中全局变量属于 window 对象。
- 可应用于页面上的所有脚本。
- 变量声明是如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。
局部变量（懂，不多说）。

JavaScript字符串函数

JavaScript字符串函数学习图

HTML DOM

DOM（Document Object Model）
文档对象模型：通过它，可访问 JavaScript HTML 文档的所有元素。
![HTM L DOM知识图

查找HTML元素

通过 id 查找 HTML 元素
var x=document.getElementById(“intro”);
- 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
- 如果未找到该元素，则 x 将包含 null。
通过标签名查找 HTML 元素
var x=document.getElementById(“main”); var y=x.getElementsByTagName(“p”);
通过类名找到 HTML 元素
var x=document.getElementsByClassName(“intro”);

HTML DOM改变HTML内容

改变HTML输出流
- document.write();
- 可用于直接向 HTML 输出流写内容。
- 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
改变HTML内容
- document.getElementById(id).innerHTML=new HTML;
- 设置或返回表格行的开始和结束标签之间的 HTML。
改变HTML属性
- document.getElementById(id).attribute=new value;
改变HTML样式
- document.getElementById(id).style.property=new style;

JavaScript数组

JavaScript数组知识图

JavaScript Window对象

JavaScript Window对象学习图

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的窗口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth

Window open() 方法

用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,specs,replace)
- URL - 打开指定的页面的URL。
- name - 指定target属性或窗口的名称。
- space - 一个逗号分隔的项目列表。
- replace
  - true - URL 替换浏览历史中的当前条目。
  - false - URL 在浏览历史中创建新的条目。

Window close() 方法

用于关闭浏览器窗口。

window.close()

Window moveTo() 方法

可把窗口的左上角移动到一个指定的坐标。

window.moveTo(x,y)

Window resizeTo() 方法

用于把窗口大小调整为指定的宽度和高度。

window.resizeTo(width,height)

JavaScript Window Screen

包含有关用户屏幕的信息，这些信息可用来了解客户端硬件的配置。

在编写时可以不使用 window 这个前缀。

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

重定向：

既可以用于具有onclick事件的标签。
也可以用于满足某些条件进行跳转，特点是方便且灵活。
在编写时可不使用 window 这个前缀。

Location hostname 属性

可设置或返回当前 URL 的主机名。

是一个可读可写的字符串。

Location href 属性

可设置或返回当前显示的文档的完整 URL。

是一个可读可写的字符串。

Location pathname 属性

可设置或返回当前 URL 的路径部分。

是一个可读可写的字符串。

Location port 属性

可设置或返回当前 URL 的端口部分。

是一个可读可写的字符串。
如果端口号就是80（这是默认的端口号)，无需指定。

Location protocol 属性

可设置或返回当前 URL 的协议。

是一个可读可写的字符串。

JavaScript Window History

包含浏览器的历史。

在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

History back() 方法

可加载历史列表中的前一个 URL（如果存在）。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

History forward() 方法

可加载历史列表中的下一个 URL。

该方法的效果等价于点击前进按钮或调用 history.go(1)。

history.length

如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3。

history.state属性

返回当前页面的state对象。

popstate事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。
注意：页面第一次加载的时候，在load事件发生后，Chrome和Safari浏览器（Webkit核心）会触发popstate事件，而Firefox和IE浏览器不会。

history.pushState()

用来在浏览历史中添加记录。

不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。
接受三个参数，依次为：
- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

history.replaceState()

修改浏览历史中当前纪录。

参数和pushState()一模一样。

URLSearchParams API

用于处理URL之中的查询字符串，即问号之后的部分。
（其中还有好多学问，具体就不一一例举了）

JavaScript Window Navigator

包含有关访问者浏览器的信息。

在编写时可不使用 window 这个前缀。
警告
- 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
  - navigator 数据可被浏览器使用者更改。
  - 一些浏览器对测试站点会识别错误。
  - 浏览器无法报告晚于浏览器发布的新操作系统。

JavaScript 弹窗

三种消息框：警告框、确认框、提示框。

警告框

常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。
window.alert(“sometext”);
可以不带上window对象，直接使用alert()方法。
弹窗使用反斜杠 + “n”(\n) 来设置换行。

确认框

通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
window.confirm(“sometext”);
可以不带上window对象，直接使用confirm()方法。

提示框

经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
window.prompt(“sometext”,“defaultvalue”);

JavaScript计时事件

在一个设定的时间间隔之后来执行代码。

Window setInterval() 方法

可按照指定的周期（以毫秒计）来调用函数或计算表达式。

会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
setInterval(code,millisec,lang)

Window clearInterval() 方法

可取消由 setInterval() 设置的 timeout。

参数必须是由 setInterval() 返回的 ID 值。
clearInterval(id_of_setinterval)

Window setTimeout() 方法

用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(code,millisec,lang)（其参数说明和setInterval()方法相同）。

Window clearTimeout() 方法

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

window.clearTimeout(timeoutVariable)
如果函数还未被执行，可以使用 clearTimeout() 方法来停止执行函数代码。

JavaScript Cookies

存储 web 页面的用户信息。

Cookies 是一些数据, 存储于你电脑上的文本文件中（不能存放重要信息的原因）。
cookie是有大小限制的，每个cookie所存放的数据不能超过4kb，如果cookie字符串的长度超过4kb，则该属性将返回空字符串。
想要cookie能在浏览器关掉之后还可以使用，就必须要为该cookie设置有效期，也就是cookie的失效日期。
不同的域之间是不能互相访问 cookie的(当然可以通过特殊设置的达到cookie跨域访问)。
一个网页所创建的cookie只能被与这个网页在同一目录或子目录下得所有网页访问，而不能被其他目录下得网页访问。
同个网站可以创建多个cookie，而多个cookie可以存放在同一个cookie文件中。
浏览器可以通过设置来接受和拒绝访问cookie。
出于功能和性能的原因考虑，建议尽量降低cookie的使用数量，并且要尽量使用小cookie。
在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie信息的存储都是采用未编码的方式。
在设置cookie信息以前要先使用escape()函数将cookie值信息进行编码，在获取到 cookie值得时候再使用unescape()函数把值进行转换回来。
- document.cookie = name + “=” + escape (value);
- return unescape(document.cookie.substring(c_start,c_end));

使用 JavaScript 创建Cookie

document.cookie=“username=John Doe”;

为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除。
- document.cookie=“username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT”;
使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
- document.cookie=“username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/”;