两小时能学会JS吗

最近活儿实在是太多了。好不容易考完试想放松一下，突然想起博客园这边的博客还是一片空白，那就来装饰一下子吧！
我在高中搞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

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