JavaScript
文章平均质量分 83
hhhcbw
Hello World!!!
展开
-
JavaScript中addEventListener使用带参数函数
JavaScript中addEventListener使用带参数函数原创 2022-09-26 19:13:59 · 2198 阅读 · 0 评论 -
React入门教程之井字棋(四)——时间旅行
接下来是最后一个练习,我们将实现“回到过去”的功能,从而在游戏里跳回到历史步骤。保存历史记录如果我们直接修改了 square 数组,实现时间旅行就会变得很棘手了。不过,我们可以使用 slice() 函数为每一步创建 squares 数组的副本,同时把这个数组当作不可变对象。这样我们就可以把所有 squares 数组的历史版本都保存下来了,然后可以在历史的步骤中随意跳转。我们把历史的 squares 数组保存在另一个名为 history 的数组中。history 数组保存了从第一步到最后一步的所.原创 2022-02-23 16:23:21 · 420 阅读 · 0 评论 -
React入门教程之井字棋(三)——游戏完善
我们现在已经编写好了井字棋游戏中,最基础的可以落子的棋盘。为了开发一个完整的游戏,我们还需要交替在棋盘上放置 “X” 和 “O”,并且判断出胜者。状态提升当前,每个 Square 组件都维护了游戏的状态。我们可以把所有 9 个 Square 的值放在一个地方,这样我们就可以判断出胜者了。你可能会想,我们也可以在棋盘 Board 组件中收集每个格子 Square 组件中的 state。虽然技术上来讲是可以实现的,但是代码如此编写会让人很难理解,并且我们以后想要维护重构时也会非常困难。所以,最好的解.原创 2022-02-23 15:55:36 · 459 阅读 · 0 评论 -
React入门教程之井字棋(二)——概览
你已经准备好了,让我们先大致了解一下 React 吧!React 是什么?React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。React 中拥有多种不同类型的组件,我们先从 React.Component 的子类开始介绍:class ShoppingList extends React.Component { render() { return ( .原创 2022-02-23 14:56:15 · 714 阅读 · 0 评论 -
React入门教程之井字棋(一)——环境准备
阅读该教程不需要你预先掌握任何 React 知识。通过该教程我们将使用 React 搭建一个井字棋游戏。搭建本地开发环境虽然在本地搭建环境要费一些时间,但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤:确保你安装了较新版本的 Node.js。使用下面的指令创建一个新的项目npx create-react-app my-app删除掉新项目中 src/ 文件夹下的所有文件。注意:不要删除整个 src 文件夹,删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文.原创 2022-02-23 14:32:06 · 2793 阅读 · 0 评论 -
JavaScript杂谈(二)——箭头函数和匿名函数的区别
定义普通带名函数function abs(x){ if(x>=0){ return x; }else{ return -x; }}像上述函数,在定义函数时function后会给函数命名如abs,那么在调用时直接以abs(-3)来调用即可。匿名函数let abs=function(x){ if(x>=0){ return x; }else{ return -x; }}原创 2022-02-20 18:10:34 · 1783 阅读 · 0 评论 -
JavaScript杂谈(一)——箭头函数没有this
每个函数在定义被 ECMAScript 解析器解析时,都会创建两个特殊的变量:this 和 arguments,换句话说,每个函数都有属于自己的 this 对象;<script> window.a = 'windous' window.b = 'bbbbwindous' window.name = 'lisi' //1.块级作用域下不会被创建this;this只有全局对象window和常规函数才会创建 { let a原创 2022-02-20 17:58:05 · 1858 阅读 · 0 评论 -
客户端网页API(二)——从服务器获取数据
在现代网站和应用中另一个常见的任务是从服务端获取个别数据来更新部分网页而不用加载整个页面。 这看起来是小细节却对网站性能和行为产生巨大的影响。所以我们将在这篇文章介绍概念和技术使它成为可能,例如: XMLHttpRequest 和 Fetch API.这里有什么问题?最初加载页面很简单 – 你为网站发送一个请求到服务器, 只要没有出错你将会获取资源并显示网页到你的电脑上。这个模型的问题是当你想更新网页的任何部分,例如显示一套新的产品或者加载一个新的页面,你需要再一次加载整个页面。这是非常浪费.原创 2022-02-17 19:22:13 · 2637 阅读 · 0 评论 -
客户端网页API(一)——操作文档
在编写web页面或应用时,你最想做的事情之一就是以某种方式操作文档结构。这通常使用一套大量使用Document对象来控制HTML和样式信息的文档对象模型(DOM)来实现,在本文中,我们可以更详细的看到怎样使用DOM,连同一些其他有趣的API以有趣的方式改变你的环境web浏览器的重要部分web浏览器的软件中有很多活动的程序片段,而许多片段web开发人员无法使用JavaScript来控制或操作,因此Web浏览器是一个很复杂的软件组合。你可能认为这样的限制是不是好事,但是浏览器被锁定是有充分理由的,主要.原创 2022-02-17 17:03:23 · 1124 阅读 · 0 评论 -
异步JavaScript(一)——异步JavaScript简介
同步JavaScript要理解什么是异步JavaScript,我们应该从确切理解同步 JavaScript 开始。先看一个简单的例子(运行它,这是源码):const btn = document.querySelector('button');btn.addEventListener('click', () => { alert('You clicked me!'); let pElem = document.createElement('p'); pElem.textConte原创 2022-02-16 16:10:11 · 200 阅读 · 0 评论 -
JavaScript(十二)——弹跳球进阶版
本章为上一章弹跳球进阶练习版,请先根据要求自行完成代码。项目简介我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性,我们为它添加一个由玩家控制的“恶魔圈”,如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平,首先创建一个通用 Shape() 对象,然后由它派生出弹球和恶魔圈。最后,我们为 demo 添加一个计分器来记录剩下的球数。程序最终会像这样:步骤以下各节介绍你需要完成的步骤。创建我们的新对象首先, 改变你现有的构造器 Ball() 使其成为构造器 Shap.原创 2022-02-16 14:08:47 · 1067 阅读 · 0 评论 -
JavaScript(十一)——弹跳球
这个实例将会利用 Canvas API 来在屏幕上画小球, 还会用到 requestAnimationFrame API 来使整个画面动起来 —— 我们并不要求你事先学习过这些 API 的相关知识,希望你完成这个练习之后会想去探索更多。这个过程中我们会用到一些漂亮的小东西并向你展示一些技巧,比如小球从墙上反弹,检查它们是否撞到了对方 (也就是碰撞检测)。准备工作首先下载 bouncing-balls-start.zip,其中包含以下三个文件:index.html、style.css 和 main..原创 2022-02-16 10:50:24 · 1193 阅读 · 0 评论 -
JavaScript(十)——JSON
JavaScript对象表示法(JSON)是用于将结构化数据表示为JavaScript对象的标准格式,通常用于在网站上表示和传输数据(例如从服务器向客户端发送一些数据,因此可以将其显示在网页上)。您会经常遇到它,所以在本文中,我们向您提供使用JavaScript处理JSON的所有工作,包括访问JSON对象中的数据项并编写自己的JSON。什么是JSON?JSON 是按一种JavaScript对象语法的数据格式。虽然它是基于JavaScript语法,但他独立于JavaScript,这也是为什么许多程序.原创 2022-02-16 10:11:25 · 489 阅读 · 0 评论 -
JavaScript(九)——继承
开始定义了一些属性的Person()构造器。function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests;};所有的方法都定义在构造器的原型上,比如:Person.prototype.greeting = function()原创 2022-02-15 17:58:24 · 126 阅读 · 0 评论 -
JavaScript(八)——对象原型
通过原型这种机制,JavaScript 中的对象从其他对象继承功能特性;这种继承机制与经典的面向对象编程语言的继承机制不同。本文将探讨这些差别,解释原型链如何工作,并了解如何通过 prototype 属性向已有的构造器添加方法基于原型的语言?JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链转载 2022-02-14 16:13:25 · 121 阅读 · 0 评论 -
JavaScript(七)——对象基础
本文适合已有面向对象编程经验的人阅读构建函数和对象有些人认为 JavaScript 不是真正的面向对象的语言,比如它没有像许多面向对象的语言一样有用于创建class类的声明。JavaScript 用一种称为构建函数的特殊函数来定义对象和它们的特征。构建函数非常有用,因为很多情况下您不知道实际需要多少个对象(实例)。构建函数提供了创建您所需对象(实例)的有效方法,将对象的数据和特征函数按需联结至相应对象。不像“经典”的面向对象的语言,从构建函数创建的新实例的特征并非全盘复制,而是通过一个叫做原形链的.原创 2022-02-14 10:44:42 · 337 阅读 · 0 评论 -
JavaScript(六)——照片库
起点下载压缩包,并在本地解压。项目简介我们提供了一些 HTML、CSS、相片和几行 JavaScript 代码。需要你来编写必要的 JavaScript 代码让这个项目运行起来。HTML 的 body 部分如下:<h1>照片库</h1><div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"><原创 2022-02-13 20:54:09 · 513 阅读 · 0 评论 -
JavaScript(五)——事件
事件是什么?事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号,并且会提供一个自动加载某种动作(列如:运行一些代码)的机制,比如在一个机场,当跑道清理完成,飞机可以起飞时,飞行员会收到一个信号,因此他们开始起飞。在 Web 中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。举几个可能发生的不同事件:用户在某个元素上点击鼠标或悬停光标。用户在键盘中按下某个按键。原创 2022-02-13 19:38:23 · 366 阅读 · 0 评论 -
JavaScript(四)——数组
创建数组数组由方括号构成,其中包含用逗号分隔的元素列表。假设我们想在一个数组中存储一个购物清单 - 我们会做一些像下面这样的事情。 在您的控制台中输入以下行:let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];shopping;在这种情况下,数组中的每个项目都是一个字符串,但请记住,您可以将任何类型的元素存储在数组中 - 字符串,数字,对象,另一个变量,甚至另一个数组。 您也可以混合和匹配项目类型 - 它们并不都是原创 2022-02-11 14:27:32 · 1290 阅读 · 0 评论 -
JavaScript(三)——字符串常用方法
数字与字符当我们尝试添加(或连接)一个字符串和一个数字时,会发生什么?让我们在我们的控制台中尝试一下:'Front ' + 242;您可能会认为这会抛出一个错误,但它运行得很好。试图将字符串表示为一个数字并不是很讲的通,但是用数字表示一个字符串则不然,因此浏览器很聪明地将数字转换为字符串,并将这两个字符串连接在一起。你甚至可以用两个数字来这么操作——你可以通过用引号将数字包装成一个字符串。尝试以下方法(我们使用typeof操作符来检查变量是一个数字还是一个字符串):let myDat原创 2022-02-11 13:37:17 · 532 阅读 · 0 评论 -
JavaScript(二)——猜数字游戏
下面我们将会通过一个小案例——猜数字游戏,来直观地感受一下如何让JavaScript完成任务。设计要求假设你的老板给你布置了以下游戏设计任务要求:我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否,如果出错了,则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对,或者用尽所有机会,游戏将结束。游戏结束后,可以让玩家选择再次开始。看到这个要求,首先我们要做的是将其分解成简单的可操作原创 2022-02-11 10:53:44 · 10720 阅读 · 0 评论 -
JavaScript(一)——什么是JavaScript?
广义的定义JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层,另外两层为 HTML 和 CSS 。...原创 2022-02-10 17:30:59 · 532 阅读 · 0 评论