其他分享
首页 > 其他分享> > 两小时能学会JS吗

两小时能学会JS吗

作者：互联网

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

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

INTRO

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

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

Usage

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

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

OUTPUT

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

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

SYNTAX

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

使用 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 事件的一些例子：

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

事件 描述
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 DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元素都被定义为对象。对象拥有属性和方法。

HTML DOM Document object

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

Searching for HTML elements

通常，通过 JavaScript，您需要操作 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 约束验证基于：

Event Listener

element.addEventListener(event, function, useCapture);

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

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

元素内有一个

，然后用户点击了这个

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

Node

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

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

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

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