JavaScript学习笔记（复习资料）
5星
- 浏览量: 0
- 大小:None
- 文件类型：TXT
简介：
JavaScript：定义行为和动作（基于对象和事件驱动的客户端编程语言；在Web开发中广泛应用）。基于对象：网页中的所有元素都被模拟为虚拟对象，并非真实存在的实体，因此无需创建实例可以直接访问。事件驱动：JavaScript的行为主要受事件的触发影响，在执行流程上具有明确的方向性。解释执行：程序逻辑按顺序处理指令，先进行的部分将被后续的操作优先取代。开发人员通常利用各类文本编辑器编写JavaScript代码，这些代码随后由浏览器解析并执行各项操作。JavaScript广泛应用于以下功能：承担着控制文档呈现方式以及内容展示的任务；负责浏览器的管理；实现与 HTML 表单之间的数据传输；处理用户操作并完成各种运算和计算任务。单击事件：被设置为按钮启动时的动作；其属性值指定执行JavaScript脚本；在需要时显示提示信息；区分大小写字母；默认情况下无需明确指定引号类型
特定标记块：页面中专门集中编写JavaScript的区域。该技术手段通过特定标记块来组织和管理JavaScript代码内容。函数声明的基本结构是通过function关键字引入，后面跟函数名称和可选的参数列表。函数体内部包含执行JavaScript指令的逻辑，通常以花括号包裹，并在末尾使用return语句指定返回值。
特别说明，在JavaScript中，无需通过class关键字定义类来声明方法。任何需要函数行为的地方都可以直接将函数声明语句插入到代码流中进行处理。
调用流程方面，首先明确在脚本执行过程中，通过预先声明的函数名称触发其定义的行为块。该过程无需添加额外的例子或解释；相反，它直接按照预设逻辑自动启动，并且会即时执行相应的指令序列。
2.js文件：在网页外专门保存独立的JS脚本文件--值得参考。
注意事项：所有HTML、CSS和JavaScript代码必须使用UTF-8编码进行保存（适用于Window系统）。
使用js文件引入网页：[removed][removed]
注意：一旦在src属性中定义了值，其中包含的JavaScript代码将不再有效。
解释执行：程序可以通过直接编写在JS文件中的语句进行解析与运行。
3. ***调试***
|--①.错误信息仅在运行程序期间才会被显示-->只有在执行时才会报错
|--②.该错误信息无法显示则表示方法无明显效果-->错误信息，浏览器页面看不到--没效果
| 解决：控制台--（工具-->JavaScript控制台或F12）
| 包含错误信息；指向出错位置的超链接--提供错误信息并指示出错位置
|--③.用于显示特定变量或对象的内容--打桩：在指定变量位置输出内容
console.log(内容);-->出现在控制台-->日志
4. 变量：在JS中无需明确声明数据类型，其类型由赋值操作决定。所有变量都必须使用var进行声明。
|--字符串数据类型：用于存储不可变的文本字符串，支持多字符操作和正则表达式匹配等高级功能特性。
|--数值数据类型：涵盖整数、浮点数等多种数值表示方式，支持基本运算及精度控制参数设置。
|--布尔数据类型：包含三种基础布尔值true（有效）、false（无效）以及null（缺失或未定义）。特别地，当数值等于0、-0、无法转换为有效的布尔值时，将被赋以false逻辑状态。其余合法数值则默认设为true有效状态。
数据类型的隐式转换：数字与字符串结合时，会将数值型数据转成字符形式；数字遇到布尔类型的数据时，真值会被转换为对应的数值型数据：True变为1，False变为0；字符与布尔类型结合时，会将真值转译成对应的字符形式：True表示为true，False则用false来表示；两个布尔类型的变量相加时，系统会将它们分别转成整数类型的数据。True对应于1，False对应于0。
数据类型的转换函数：(无需对象调用的全局函数)
- `toString()`: 将其转为字符串表示。该功能适用于所有数据类型，输出结果必然是 string 类型；
- `parseInt()`: 强制将其解析为整数形式。若无法成功解析，则返回 NaN（not a number）值；
- `parseFloat()`: 强制将其转为浮点数值型。当转换失败时，该函数也会返回 NaN(Not a Number)；
- `typeof()`: 用于查询当前数据类型的详细信息。
- `isNaN()`: 判断一个变量是否为NaN值的专有方法。
- `[removed]()`: 此处注释内容已删除
*当输入为字符串类型时，此函数将返回 true；若输入为 null，则返回 false。值得注意的是，该函数不支持对布尔类型的检查；
- `isNan()`: 该辅助函数的主要作用是验证输入是否为空字符串。对于那些原本属于数字类型但被误认为是字符串的数值型数据，此方法无法进行类型判断
*特别地：
- 当输入为 string 类型时，`isNan()` 将返回 false；
- 如果传入的是 boolean 类型变量，则该函数会返回 false。这是因为将布尔值直接参与数字符算或比较操作时，系统会将其自动转换为数值类型（true 转换为 1，false 转换为 0）；
- `NaN`: 在进行任何数字运算或比较操作时，`NaN` 值都会导致结果变为 NaN。例如：
- 将一个 NaN 值与任意其他数值进行加减乘除运算后，结果仍将是 NaN；
- 当两个 NaN 值进行比较时，也会返回 false
*此外，在某些编程环境中（如 JavaScript），若将 `NaN` 与其他非数字类型的数据结合使用时，可能会引发意想不到的错误。因此，在实际应用中需要特别注意其特殊性质。
注：所有从页面加载进入 JavaScript 的变量均为字符串类型。
获取目标元素：通过定位到主元素结构等同于掌握了网页的整体框架。当前页面的工作表基于 document 对象，在执行查找操作时需要依赖 document 对象。精确查找某个ID的元素应采用$document.getElementById(id名)；
null和undefined是两种特殊标识符，在JavaScript中具有独特的含义。
在数据类型为Object的情况下，null被定义为表示未赋值状态的特殊值。而undefined则表示在声明变量时既未进行赋值也未曾定义过该属性。
|--“==”为判断两个运算数是否相等的操作符。该操作符会自动执行数据类型的转换。当经过类型转换后的运算数相等时返回true；否则返回false。
|--“===”则不进行数据类型的转换，只有在无需类型转换且原始运算数就相等的情况下才会返回true，其他情况均返回false。
附：if(null)、if(defined)和if(NaN)都与if(false)具有相同的执行效果。
-----猜数字游戏-----
在失去聚焦状态下判断是否正确。
当焦点被丢失时，游戏会判断猜测结果的对错。具体来说，获得焦点的事件命名为onfocus，而失去焦点则为onblur。
当前显示的内容对象即为此元素。使用该对象进行操作不仅方便快捷，而且能够继承所有属性。
在前端优化方面，建议尽可能地采用三目运算来替代传统的if else语句，这样可以使代码更加简洁高效。
|--获取索引值：通过x.indexOf(关键字)或指定起始位置调用。
| 每次仅返回第一个发现的索引值。
|--字符替换：使用x.replace()进行一次基本的字符串修改，不会改变原始字符串的内容。
| 此处仅执行单次替换操作。
|--查找与替换：通过while循环实现多次查找及修改操作。
|
|--String对象的常用方法有：
| --转换大小写：将字符串转换为全大写或小写形式。
| --获取特定位置的一个字符：使用x.charAt(index)方法提取所需字符。
| --返回对应字符的Unicode编码值：通过x.charCodeAt(index)获得字符代码信息。
| --查找指定字符串的位置，可选起始索引参数以优化搜索效率。
| --提取子字符串：通过指定开始和结束位置获取所需部分内容。
| --替换子字符串：根据找到的位置对特定文本进行修改操作。
| |--String与正则表达式
| --$str.match($regExp);--搜索字符串中的所有匹配项
| 返回：如果没有发现任何匹配结果，则会返回空值；如果有多个匹配结果，则以一个数组形式进行存储。
|
| --$str.replace($regExp, $替换值)--在原字符串中找到所有与正则表达式匹配的文本后，将这些文本替换成指定的新内容。注意：使用该方法时，原字符串中的所有替换不会保留下来，并且返回的结果会覆盖整个原始字符串的内容。
|
| 强调：$str.replace()方法不支持模式匹配功能，默认只能处理字符级别的匹配逻辑。
|
| --正则表达式语法说明--其中属性后缀有以下两种：
$g: 表示执行全局匹配，即在所有可能的匹配位置上进行搜索
$i: 忽略大小写字母（仅针对英文字符有效）
如果未采用模式匹配方式，则会切换回原始的匹配逻辑。
结果：如果在编写正则表达式时出现错误，将默认使用不带模式匹配功能的方式。
Array笔试题：JS中数组声明方式：
A. 创建一个长度为7的新数组
B. 创建包含特定元素的新数组（例如数字、字符串或布尔值）
C. 其中每一处方括号均代表一个数组的初始化方式，比如[7，a,true]表示创建包含这些元素的数组
D. 实例化了一个不含任何元素的新数组——通过关键字new和无参数调用构造函数Array()
Array对象的常用方法如下所述：
|--1.join()方法--其作用是将数组中的所有元素组合成一个字符串，并提供分隔符以区分各个元素。
|--2.toString()方法--该方法能够将整个数组内容转换为对应的字符串形式并输出。
|--3.concat()方法--此功能允许将两个或多个数组进行连接操作，操作后不修改原始的数组结构和数据。
|--4.slice()方法--该方法通过指定范围参数来提取所需的部分，并生成一个新的子数组。
14. 函数：JS中一切皆为对象，包括函数在内的各种元素都被视为独立的对象！
笔试题：JS中定义方法的集中方式：
A: function compare(a,b){return a-b;}---*可灵活放置位置*
B: var compare=function(a,b){return a-b;} ---|
--实际名称即为该函数对象的变量名；右边实质上是一个匿名函数对象---*需提前声明对象*
C: var compare=new Function(a,b,return a-b) ---|
--注意JS底层本质上是调用new Function构造函数，参数均为字符串形式
结论：所有方法均基于function类型。
在JavaScript中，一切事物都以对象的形式存在，并根据其属性和行为划分为以下三类：基本类型包括字符串型、数字型以及布尔值型；数组、数学运算符及日期时间对象等则被归类为组合对象；高级功能包括函数对象、正则表达式以及通用对象等。
16.数组排序：
|--升序：计算两个元素差值的函数为$compare(a,b)\{return\ a-b;\}$；
|--降序：返回参数交换后的结果的函数为$compare(a,b)\{return\ b-a;\}$；
比较器用法：通过调用arr.sort( compareFunction )的方法来对数组进行排序，其中compareFunction是自定义的比较器函数。
遍历方式：使用循环结构如for循环（for(var i=0; i< arr.length; i++)）的方式处理数组元素，这与Java中的循环方式相似。
反转操作：调用arr.reverse()方法可以实现对数组中所有元素顺序的颠倒。
17.Array元素操作：
|--将一个新元素x加入到数组末尾。
|--从指定位置移除或替换一组元素。
|--使用该方法可快速找到特定元素的位置。例如，返回值为-1时，说明该元素不存在于数组中。
Number对象具有将数值四舍五入到指定的小数位数的能力（参数范围在0至20之间）。此外，该对象提供了一种方法用于将其表示为字符串形式。
正则表达式实例:(主要用于查找和验证特定内容)。该函数调用reg.test(‘要验证的完整字符串’)将返回true或false。特别注意,当使用预定义符号^和$时,必须确保进行全局匹配;否则仅会实现部分匹配功能
20.Date对象：在各个组件中均配备有相应的get和set操作。具体命名规则如下：
- get|set年月日字段为单数形式（简短形式），而时分秒字段则采用复数表示法（s）；
- 需要注意的是，年月日字段是从1到31索引，而时分秒字段则是从0到29。
Date对象的常用方法包括：
- 提供获取当前日期的多种方式：如getDate()用于年份，getDay()用于月份数值，getFullYear()则供完整年份信息；
- 允许对日期进行详细修改的操作包括：设置年份（setFullYear）、月份（setMonth）和日期（getDate）；
- 提供多种格式化后的字符串表示方式：如toString()直接返回基本格式，toLocaleTimeString()则转换为本地化的月份名称加时间格式，而toLocaleDateString()用于显示日期而不带时间信息。
21. argument类型的属性：未声明任何形参的场景下自动获取的一个数组对象；在不设置任何形参的情况下，方法会自动生成相应的参数。通过调用arguments.length可以获得所有传递进来的参数数量。使用arguments[i]可以在循环中逐个访问每一个输入的参数，并对每个值进行相应的数据类型的转换处理。
全局函数：不借助对象点(.)就可以访问--适用于所有 JavaScript 对象。
常用的全局函数包括：
parseInt、parseFloat、isNaN、eval以及 decodeURI和 encodeURI等。
其中，
encodeURI将一个字符串视为 URL 进行编码；
decodeURI则用于解析经过 encodeURI 加密的 URL。
eval(()) 函数能够解析并评估一个特定字符串，并对其中所对应的JavaScript代码进行执行。
BOM代表浏览器对象模型，用于管理并操作浏览器窗口，使得JavaScript能够与浏览器进行交互。即浏览器对象模型，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话”。DOM：基于网页中的元素对象构建的对象模型--其本质是文档对象模型，用于实现对网页文档的各种操作。
常见的 window 对象属性包括：
-- document：显示的 HTML 文档对象；
-- history：本次浏览记录；
-前进：history.go(1)；后退：history.go(-1)；刷新：history.go(0)；
-- location：当前文件地址对象（位于地址栏）；
-- event：事件信息集合；
-- screen：主屏幕对象；
-- name：窗口名称属性；
-- opener：用于打开当前窗口的 window 对象引用；
-- navigator：与浏览器相关的各种信息，包括版本号和设备类型等数据；
-- cookieEnable：判断当前浏览器是否启用 cookie 功能（默认为 true）；
-- userAgent: 获取用户使用的浏览器名称及其版本号。
window对象的常用方法有：
- 调用 alert() 可以在页面上显示警告框--仅点击OK按钮
- 调用 confirm() 展示确认对话框--可以选择返回或继续
- 调用 prompt() 显示提示对话框--用于获取用户输入信息
- 调用 window.open(url[,name]) 可以调用一个新选项卡窗口并传递相关参数
- 使用 window.close() 可以关闭当前窗口或选项卡
定时器：网页中的自动动态效果均通过计时器实现
|--周期性定时器：每隔一定时间段自动执行一次并循环运行
| |--setInterval() 启动-->用于启动一个周期性定时器功能
| 语法定义：timer=setInterval(方法名称，间隔毫秒数)
|--clearInterval() 结束-->用于停止当前周期性定时器的执行
语法说明：timer=clearInterval(timer)
|--一次性定时器：等待指定时间后自动执行并立即终止
|--setTimeout() 启动-->用于启动一个一次性定时器操作
|--clearTimeout() 结束-->用于停止当前一次性定时器的执行
附录：
|--表单控件内容读写：.value 属性存储和获取
|--普通HTML元素内容读写：位于开始标签与结束标签之间的文本段落使用[removed]标记处理
计时器：用于执行什么任务：采用的方法；一个变量存储该计时器所属的线程标识符；在什么情况下启动该计时器：事件。25.document：1.表示当前网页的页面内容； 2.所有网页元素都以它们自己为Root节点进行定位和选择； 3.在获取并操作所需元素时，会通过document来定位和选择相关元素。节点：nodeName 是用于标识 HTML 元素的标签名称或属性值的一种表示方法。CSS样式中的元素class属性等同于<标签class=的样式设置DOM树：父节点：parentNode.remove()；子节点：childNode.fetchedElementByNameTag()在HTML表单中获取某个控件名称的方法为getNamesByAttributeName()，其参数为指定的属性名。
通过以下方式实现DOM节点的增加功能：具体操作步骤如下：
生成新元素可通过调用`document.createElement(标签名)`方法。该元素仅存在于内存环境中，用户端无法直接观察到其存在。
要将新节点附加到现有结构中，需首先定位目标容器。此过程可采用以下方式完成：使用`appendChild()`函数将新内容追加至目标元素的末尾位置。具体插入位置需根据需求确定。
DOM删除元素：使用node.removeChild(childNode)来实现指定节点的删除操作。其中，node为父节点，childNode为目标要删除的子节点。
在DOM中进行元素删除操作时，可以通过调用node.removeChild(childNode)来完成。这里，node是包含该节点的父元素，而childNode则是需要被移除的具体元素。
为了从DOM中删除指定的节点，可以执行node.removeChild(childNode)，其中node为父节点，childNode为目标要删除的子节点。27.HTML Document Object Model选单组件：
选单对象：代表HTML表单中的一个下拉列表
属性部分：
option列表：返回包含select标签中所有option的数组
选中选项索引号：设置或获取当前被选中的选项索引值
显示的数量设置项数：设置或获取一次展示的选项数量
方法部分：
增加一个option元素：add(option)
移除指定位置的选项：remove(index)Select对象的`onChange`事件句柄被激活，用于处理用户的选择更改。该属性引用了一个内部定义的函数，负责执行相关操作。这些操作触发后会立即调用相应的处理函数，以响应用户的选中或取消选择行为。需要注意的是，这个事件不会直接指定新的选项内容，具体信息将由`selectedIndex`属性或单个`selected`属性提供。Option对象：在HTML表单的下拉列表中，每个选项由一个
全部评论 (0)
