标签：元素 DOM 学会 JavaScript JS HTML var 小时 document

最近活儿实在是太多了。好不容易考完试想放松一下，突然想起博客园这边的博客还是一片空白，那就来装饰一下子吧！
我在高中搞oi的时候就一直关注一位学姐——胡小兔，她的博客很简单易懂~
这次就准备来个和她同款的博客背景嘿嘿。但是问题来了，我不会JS和CSS。鉴于直接拿代码走人好像不太好，主要是学校数据库大作业也要写个前后端写到我头皮发麻
于是乎准备在数据库作业答辩的前五天来学学前端语言JS和CSS。
学习JS第一步：打开W3School鉴于玛利亚同学读中文文档更快，这次又只有两小时时间，所以就看W3School的中文教程吧。现在是晚上八点三十四，开工！

下面的应该大部分都是教程上的摘录。就是老玛的笔记呀！

INTRO

JavaScript 是 web 开发者必学的三种语言之一：

• HTML 定义网页的内容
• CSS 规定网页的布局
• JavaScript 对网页行为进行编程

那看起来CSS可以最后学 感觉网上应该有不少模板可以直接用
JS是网页行为，可能就是前后端交互的关键了吧。

Usage

JavaScript 是 HTML 中的默认脚本语言。在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。 注意 HTML 中标签都是有头有尾的，尾部的标签要带上杠/。JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称。但外部脚本不能包含 <script> 标签。
在外部文件中放置脚本有如下优势：

• 分离了 HTML 和代码
• 使 HTML 和 JavaScript 更易于阅读和维护
• 已缓存的 JavaScript 文件可加速页面加载
  如需向一张页面添加多个脚本文件 - 请使用多个 script 标签。

OUTPUT

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

document.write() 方法仅用于测试。
console.log() 感觉好高级，小玛没怎么用过浏览器控制台欸。

SYNTAX

不得不说，JS的语法和C++好像啊啊啊啊啊，又省下了一笔不小的时间花费嘿嘿。注意它只按作用域分var、let、const,不按数据类型分int、char什么的。其实也就是JavaScript 拥有动态类型。

• 通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。
• 可以使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问。
• 关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。在 HTML 中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于 window 对象。

通过 type of 可以查看对象的数据类型，当然，返回的也可能是object、function。

JS函数的定义很像matlab如果我还没有忘记matlab函数的语法的话

OBJECT

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

留个创建对象的例子吧，毕竟现在只剩一小时了。

如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象。请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

来了来了，终于看到点前端的密接了。

EVENT

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击
  通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。

把常见时间放在下面了，毕竟老玛有着鱼的记忆。

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

因为w3school在教程中提示到在html dom章节中有更多有关事件和事件处理程序的知识，所以我就直接去看dom了！其他的用到再说吧，毕竟真的没时间了

JavaScript HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素
• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件
  换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元素都被定义为对象。对象拥有属性和方法。

• 属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
• 方法是您能够完成的动作（比如添加或删除 HTML 元素）。

HTML DOM Document object

文档对象代表您的网页。如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

Searching for HTML elements

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

• 通过 id 查找 HTML 元素
• 通过标签名查找 HTML 元素
• 通过类名查找 HTML 元素
• 通过 CSS 选择器查找 HTML 元素
• 通过 HTML 对象集合查找 HTML 元素

var myElement = document.getElementById("intro");
var x = document.getElementsByTagName("p");
var x = document.getElementsByClassName("intro");
var x = document.querySelectorAll("p.intro");

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

其实最后一个不太能看懂它在干嘛欸。

Changing JS output stream

在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流，但是千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
如需修改 HTML 属性的值，请使用如下语法：(第二行)

document.getElementById(id).innerHTML = "new text";
document.getElementById(id).attribute = new value

Form Validation

终于看到一个跟数据库大作业很相关的了，这部分是队友用python写的，杠搜了一下，好像是可以用JS调python的，那就明天重点来看这个！！不过好像需要NodeJS？？果然计算机是个坑，一层抽象套另外一层实在不行我就手动把队友的代码变成JS版本哼哼，不就是二十个嘛。

数据验证是确保用户输入干净、正确和有用的过程。验证可以通过许多不同的方法定义，并以许多不同的方式部署。
服务器端验证由 Web 服务器在输入发送到服务器后执行。
在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。

HTML5 引入了一种新的 HTML 验证概念，称为约束验证。HTML 约束验证基于：

• 约束验证 HTML input 属性
• 约束验证 CSS 伪选择器
• 约束验证 DOM 属性和方法

Event Listener

element.addEventListener(event, function, useCapture);

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如

元素内有一个

，然后用户点击了这个

元素，应该首先处理哪个元素“click”事件？

• 在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理

  元素的点击事件，然后是

  元素的点击事件。
• 在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 元素的点击事件，然后是

  元素的点击事件。

Node

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

• 整个文档是文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 所有注释是注释节点

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

还有二十分钟到两小时了，好像要没时间了，我也困了。不如，把博客的背景换一换。

标签：元素,DOM,学会,JavaScript,JS,HTML,var,小时,document
来源： https://www.cnblogs.com/pny01/p/16299306.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。