两小时能学会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++好像啊啊啊啊啊,又省下了一笔不小的时间花费嘿嘿。注意它只按作用域分varletconst,不按数据类型分intchar什么的。其实也就是JavaScript 拥有动态类型。

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

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

通过 type of 可以查看对象的数据类型,当然,返回的也可能是objectfunction

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)。

两小时能学会JS吗

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

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

原创文章,作者:wure,如若转载,请注明出处:https://blog.ytso.com/272053.html

(0)
上一篇 2022年7月8日
下一篇 2022年7月8日

相关推荐

发表回复

登录后才能评论