HTML中javascript的运用——重要知识点

最新推荐文章于 2024-09-12 10:48:49 发布

weixin_43763377

最新推荐文章于 2024-09-12 10:48:49 发布

阅读量404

点赞数

分类专栏：前端文章标签：运维 xml java

本文链接：https://blog.csdn.net/weixin_43763377/article/details/121390436

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript

1.javaScript的历史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript
为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript
实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为
JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有
类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。
JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取
得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计
算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管
JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是
JavaScript具有非常丰富的特性。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的
ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微
软、Borland组成的工作组确定统一标准：ECMA-262。

2.语法介绍

2.1使用方式

使用标签script括起来，如：
```
<script>
   alert("hello JavaScript1-1");
</script>
```
可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页
面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内

外部文件引入

<head>
  <script src="js/myScript.js"/>
</head>

标签里

<a href="javascript:alert('ok')">登录</a>

3变量

注意js定义变量都用var,如 var a=1;类似于auto.

字符串String
字Number
布尔Boolean
空Null
未定义Undefined

这里要注意规范地使用未定义变量，常见的相关报错有：

变量声明且没有赋值就进行使用
获取对象中不存在的属性时
函数需要实参，但是调用时没有传值，形参是undefined；
函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。

Symbol

4 JavaScript Window–浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
BOM：Browser Object Model，中文浏览器对象模型。
虽然现在BOM尚无正式标准，但是由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同
方法和属性，因此window常被认为是 BOM 的方法和属性。

4.1 windows对象

所有浏览器都支持 window 对象。它表示浏览器窗口。（没有应用于 window 对象的公开标准，不过
所有浏览器都支持该对象）。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
Window 对象表示浏览器中打开的窗口。

4.2 windows对象属性

document 对Document 对象的只读引用。
history 对History 对象的只读引用。
location 用于窗口或框架的 Location 对象。
name 设置或返回窗口的名称。

history对象

window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
常用方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()
```
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>
```
location对象

常用属性和方法：
window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址
replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

   <a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
   <a href="javascript:window.location.reload()">刷新</a><br />
   <a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
   <a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br
   />

document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

5.JavaScript之事件

5.1html事件

HTML 事件可以是浏览器行为，也可以是用户行为。
例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。
通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之
后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

请添加图片描述

6.DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
DOM:Document Object Model,文档对象模型。
当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树：

请添加图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

6.1 document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

请添加图片描述