【实战】IFE的JavaScript和树

任务目的

熟练JavaScript

学习树这种数据结构的基本知识

任务描述

在页面中展现一颗二叉树的结构

提供一个按钮,显示开始遍历,点击后,以动画的形式呈现遍历的过程

二叉树的遍历算法和方式自定,前序中序后序皆可,但推荐可以提供多种算法的展示(增加多个按钮,每个按钮对应不同的算法)

当前被遍历到的节点做一个特殊显示(比如不同的颜色)

每隔一段时间(500ms,1s等时间自定)再遍历下一个节点

注意事项

如果按照示例图中展示树,可以使用flexbox布局

实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

建议不使用任何第三方库、框架

参考资料

JavaScript入门篇

MDN JavaScript

js数据结构和算法(三)二叉树

Data Structures With JavaScript: Tree

Computer science in JavaScript: Binary search tree

任务代码

原文:大专栏  【实战】IFE的JavaScript和树

原文地址:https://www.cnblogs.com/chinatrump/p/11615110.html

时间: 2024-11-05 23:34:31

【实战】IFE的JavaScript和树的相关文章

JavaScript菜单树

OA系统,ERP系统这样的管理自动化系统.设计者们,总喜欢将菜单放在左侧.菜单太多了,分类折叠是必然的选择.这样既可以有力于菜单模块的管理,也可以方便操作.如下的一个菜单示例: 这样的菜单,我做了一个简单的.自己写了一个TheTree的类,效果还不错,贴上样式,还是杠杠的. 详细的源码可以访问我的github: [email protected]:YeRuGeMiMi/TheTree.git 下面是我的开发过程: 1.生成菜单 我第一步写的菜单是直接硬编码在html中: 1 <ul> 2 &l

JavaScript数据结构——树

树:非顺序数据结构,对于存储需要快速查找的数据非常有用. 二叉树:二叉树中的节点最多只能有两个子节点(左侧子节点和右侧子节点).这些定义有助于我们写出更高效的向/从树中插入.查找和删除节点的算法. 二叉搜索树:二叉树的一种,但是它只允许你在左侧节点存储(比父节点)小的值,在右侧节点存储(比父节点)大/等于的值. 遍历一棵树:是指访问树的每个节点并对它们进行某种操作的过程.访问树的所有节点有三种方式:中序.先序和后序. 中序遍历:是一种以上行顺序访问 BST 所有节点的的遍历方式,也就是以从最小到

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

JavaScript数据结构-树

我觉得这社会上,也不差钱好多人,可能好多人也不差权力,但是我觉得能得到这种满足的也不多. –郭小平<临汾红丝带学校校长> ? 树是计算机科学中经常用到的一种数据结构.树是一种非线性的数据结构,以分层的方式存储数据.是被用来存储具有层级关系或有序的数据,比如文件系统中的文件. 二叉树 二叉树,每个节点最多有两个子树的树结构.二叉树是一种特殊的树,也是一个连通的无环图. 二叉查找树 ? 二叉查找树是一种特殊的二叉树,其相对较小的值保存在左节点中,较大的值保存在右节点中.这一特性使其查找效率很高.

怎样通过JavaScript遍历树

树基本上只是花哨的链表,并且在树上创建和删除节点非常简单.另一方面,当它们未排序时,搜索会有些棘手,因此我们将研究几种不同的方式来处理整个树的搜索. 先决条件 您将需要基本了解什么是树以及它们如何工作.我们使用Binary Search Tree的特定示例,但是与确切的实现相比,它们更多的是技术和模式,并且可以轻松地适用于任何类型的树. 概念 使用JS二叉搜索树我们可以使用相同的系统来创建一个新节点,就像找到一个一样.标准树(例如文件系统)不遵循任何特定规则,因此迫使我们通过树或子树查看每个项目

JavaScript之单例实战

一.概述 所谓单例模式,顾名思义即一个类只有一个实例. 所以,当我们创建一个实例时,就必须判断其是否已经存在了这个实例,如果已经存在了这个实例,那么就返回这个已经存在的实例,无需再创建一个(单例模式嘛,核心就是一个类只有一个 实例):如果不存在,就创建这个实例咯. 好了,单例模式的核心思想以及创建流程大致搞清楚了,那么我们就开始看看,在Javascript的世界中,具体该怎么实现呢? 二.实战一 核心思路:利用Javascript的作用域,形成闭包,从而可以创建私有变量(假设我们将这个私有变量取

JavaScript实战

JavaScript之单例实战 一.概述 所谓单例模式,顾名思义即一个类只有一个实例. 所以,当我们创建一个实例时,就必须判断其是否已经存在了这个实例,如果已经存在了这个实例,那么就返回这个已经存在的实例,无需再创建一个(单例模式嘛,核心就是一个类只有一个 实例):如果不存在,就创建这个实例咯. 好了,单例模式的核心思想以及创建流程大致搞清楚了,那么我们就开始看看,在Javascript的世界中,具体该怎么实现呢? 二.实战一 核心思路:利用Javascript的作用域,形成闭包,从而可以创建私

遍历 JSON JavaScript 对象树中的所有节点

我想要遍历 JSON 对象树中,但为何找不到任何一间图书馆.这似乎是不难,但感觉就像重新发明轮子. 在 XML 中有很多教程演示如何遍历 XML DOM 树:( 解决方法 1: 如果你认为 jQuery 是什么样的overkill这种原始的任务,你可以这样做: //your object var o = { foo:"bar", arr:[1,2,3], subo: { foo2:"bar2" } }; //called with every property an

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术非常多.样例非常多,仅仅好慢慢学,慢慢实践.!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScript 实现的照片展示 构建软件设计的方法有两种:一种是把软件做得非常easy以至于明显找不到缺陷.还有一种是把它 做得非常复杂以至于找不到明显的缺陷. --C.A.R.Hoare,1980 年图灵奖获得者 在这个自拍自恋的时代,照片是要展示的.在前面的章节里已经解说了事件的绑定.本章主要利用前