JavaScript简介-01

学做好人

已于 2024-03-31 10:05:04 修改

阅读量415

点赞数 11

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-03-27 21:37:42 首次发布

本文链接：https://blog.csdn.net/qq_45027843/article/details/137073961

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、JavaScript诞生于1995年，它的出现主要用于网页的前端验证。

例如：用户名，密码的长度，邮箱的规则

2、JavaScript是由网景公司发明，起初叫做 LiveScript,后来由SUN公司介入，更名为 JavaScript。

3、1996年微软公司在其最新的IE3浏览器中引入了自己对 JavaScript的实现JScript。

4、于是在市面上存在两个版本的JavaScript，一个网景公司的 JavaScript和微软的JScript。

5、为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript

6、ECMAScript是一个标准，而这个标准需要由各个厂商去实现。

7、不同的浏览器厂商对该标准会有不同的实现。

8、我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思，但是实际上JavaScript的含义却要更大一些。

9、一个完整的JavaScript实现应该由以下三个部分构成：

10、什么是DOM？详情

（1）、DOM，全称Document Object Model文档对象模型。

（2）、JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

（3）、文档：表示整个HTML网页文档；

对象：网页中每个部门都转换成一个对象；

模型：使用模型来表示对象之间的关系，这样方便我们获取对象

<html>
 <head>
<title>网页的标题</title>
</head>
<body>
<a href="1.html" >超连接</a>
</body>
</html>

（4）、节点：NODE，是构成我们网页的最基本组成部门，网页中的每个部分都可以称之为一个节点；例如 html标签，属性，文本，注释，整个文档都可以称之为一个节点；虽然都是节点，但他们类型是不同的；比如标签我们称之为元素节点，属性称之为属性节点，文本称之为文本节点，文档称之为文档节点。节点类型不同，属性和方法也不同。

节点：Node 构成HTML文档的最基本元素

常见的节点分为四类：文档节点、元素节点、属性节点、文本节点；

（5）、文档节点 document ：

文档节点 document，代表整个HTML文档，网页中的所有的节点都是它的子节点；

document对象是作为window对象的属性存在的，我们不用获取可以直接使用；

通过该对象我们可以在整个文档内访问查找节点对象，并可以通过该对象创建各种节点对象

（6）、元素节点 element :

HTML中的所有节点都是元素节点，这也是我们最常用的一个节点。浏览器会将页面上的所有标签都转换成一个一个元素节点，我们可以通过document的方法来获取元素节点。

例如document.getElementById();根据id属性值来获取一个元素节点对象。

（7）、文本节点 Text：

文本节点表示HTML标签以外的文本内容，任意非HTML的文本都属于文本节点。

它包括字面解释的纯文本内容；

文本节点一般作为元素节点的子节点存在；

获取文本节点一般要先获取元素节点，再通过元素节点获取文本节点。

例如：元素节点.firstChild；元素节点的第一个子节点一般为文本节点。

（8）、属性节点 Attr

属性节点表示标签中的一个个属性，它是元素节点的一部分，并不是元素节点的子节点；属性节点可以通过元素节点来获取指定的属性节点；

例如：元素节点.getAttributeNode("属性名");

..注意一般不使用属性节点；

（9）、事件

事件就是文档获取浏览器窗口中发生的一些特定的交互瞬间。

JavaScript与HTML是通过事件来实现交互的。

对于web应用来说，具有下面这些代表性的事件：点击某个元素，将鼠标移动至某个元素上方，按下键盘上某个键，等等。

（10）、获取元素节点

通过document对象调用；

getElementById(); --通过id属性获取一个元素节点对象
getElementsByTagName(); --通过标签名获取一组元素节点对象
getElementsByName(); --通过name属性获取一组元素节点对象

（11）、获取元素节点的子节点

通过具体的元素节点调用；

getElementsByTagName(); 方法---返回当前节点指定标签名后代标签
ChildNodes 属性---表示当前节点的所有子节点
firstChild 属性---表示当前节点的第一个子节点
lastChild 属性---表示当前节点的最后一个子节点

（12）、获取父节点和兄弟节点

通过具体节点调用

parentNode 属性---表示当前节点的父节点
perviousSibling 属性---表示当前节点的前一个兄弟节点
nextSibling 属性---表示当前节点的后一个兄弟节点

（13）、元素节点的属性

获取 ---- 元素对象.属性名

例如：element.value

element.id

element.className

设置 ------元素对象.属性名 = 新的值

例如：element.value = "hello"

element.id = "id01"

element.className = "newClass"

（14）、其他属性

nodeValue ---文本节点可以通过nodeValue属性来获取和设置文本节点的内容

innerHTML ---元素节点通过该属性获取和设置标签内部的HTML代码。

（15）、使用CSS选择器进行查询

querySelector()

querySelectorAll()

这两个方法都是用document来调用的，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会根据选择器字符串去页面上查找元素。

不同的地方是，querySelector() 只会返回查找到的第一个元素，而querySelectorAll() 会返回所有符合条件的元素

（16）、节点的修改

主要是修改元素节点的操作。

创建节点：document.createElement(标签名);
删除节点：父节点.removeChild(子节点):
替换节点：父节点.replaceChild(新节点,旧节点);
插入节点：父节点.appendChild(子节点); 父节点.insertBefore(新节点,旧节点); 方法在参考节点之前插入一个拥有指定父节点的子节点

11、什么是BOM？详情

ECMAScript无疑是JavaScript的核心，但是要在浏览器中使用JavaScript的话，BOM（浏览器对象模型）才是真正的核心。

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。

BOM将浏览器中的各个部分转换成一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

（1）、window对象

window对象是BOM的核心，它表示一个浏览器的实例。
在浏览器中我们可以通过window对象来操作和访问浏览器，同时window对象也是作为全局对象存在的。
全局作用域： ---window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、方法都会变成window对象的属性和方法。

（2）、窗口大小

浏览器中提供了四个属性用来确认窗口的大小：

网页窗口大小：

innerWidth

innerHeight

浏览器本身的尺寸：

outerWidth

outHeight

（3）、打开窗口

使用window.open()既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
这个方法需要四个参数：详情
- 需要加载的URL
- 窗口的目标
- 属性的字符串
- 是否创建新的历史记录

（4）、超时调用

setTimeout() ---超时调用

超过一定时间以后执行指定函数----需要两个参数：要执行的内容，超过的时间

clearTimeout() ---取消超时调用

超时调用都是在全局作用域中执行的。

（5）、间歇调用

setInterVal() ---间歇调用

每间隔一段时间执行指定代码-----需要两个参数：要执行的代码、间歇的时间

clearInterVal() ----取消间歇调用

（6）、系统对话框

浏览器通过 alert()、confrim()、prompt()可以调用系统对话框向用户显示消息。
它们的外观由操作系统或浏览器设置决定，而不是由css决定。
显示系统对话框时会导致程序终止，当关闭对话框程序才会恢复执行。

...1、alert()

接收一个字符串显示给用户，调用alert()方法会向用户显示一个包含确认按钮的对话框。

...2、confirm()

confrim()和alert()类似，只不过confirm()弹出的对话框由确认和取消按钮。用户可以通过按钮可以进行是否继续操作。

这个函数会返回一个布尔值，确认返回true，点击取消返回false；

例如： confirm('你确定吗？');

（7）、prompt()

prompt()会弹出一个带有输入框的提示框，并可以将用户输入的内容返回。

它需要两个值作为参数：--显示的提示文本、--文本框中的默认值

例如：prompt("你今年的年龄？,27");

（8）、location对象详情

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

href属性：可以获取和修改当前页面的完整URL地址，使浏览器跳转到指定页面。、

assign()方法：

assign() 和href属性一样，是浏览器跳转页面；assign() 接收一个字符串参数、跳转的地址浏览器体现到历史记录中，可以通过返回到原来页面。

replace()方法：

功能一样，只不过使用它跳转的地址不会体现到历史记录中。

reload()方法：

用于强制刷新页面

（9）、navigator对象

navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。

我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

（10）、screen对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

（11）、history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

go() – 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。

back() – 向后跳转

forward() – 向前跳转

（12）、document

document对象也是window的一个属性，这个对象代表的是整个网页的文档对象。

我们对网页的大部分操作都需要以 document对象作为起点。

12，特点

JS是一门解释型语言，类似C和Java的语法结构、动态语言基于原型的面向对象

解释型语言就是不需要编译为机器码再执行，而是可以直接执行。

解释型语言执行较慢是它的劣势，通过JIT技术，使得运行速度得到改善。

13、类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。

14、动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。

不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JS可能是运行速度最快的动态语言了。

15、基于原型的面向对象

JavaScript是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象。

学做好人

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript简介-01

详情详情ECMAScript无疑是JavaScript的核心，但是要在浏览器中使用JavaScript的话，BOM（浏览器对象模型）才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。BOM将浏览器中的各个部分转换成一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。12，特点JS是一门解释型语言，类似C和Java的语法结构、动态语言基于原型的面向对象解释型语言就是不需要编译为机器码再执行，而是可以直接执行。
复制链接

扫一扫