JavaScript中的交互式元素周期表

最新推荐文章于 2023-03-17 23:05:27 发布

weixin_26750481

最新推荐文章于 2023-03-17 23:05:27 发布

阅读量1k

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://medium.com/javascript-in-plain-english/interactive-periodic-table-in-javascript-d7cf7177883a

版权

An interactive web-based version of the periodic table found pinned to the wall of every school chemistry lab.

互动式基于网络的元素周期表版本固定在每个学校化学实验室的墙上。

元素周期表 (The Periodic Table)

The periodic table shows various pieces of information on each element, or type of atom. The information is tightly packed and often difficult to read and understand so I decided to develop an interactive web-based version in JavaScript which is easier to use and comprehend than a static paper version.

元素周期表显示有关每个元素或原子类型的各种信息。信息包装紧凑，通常难以阅读和理解，因此我决定使用JavaScript开发一个基于Web的交互式版本，该版本比静态纸质版本更易于使用和理解。

I don’t want to spend a huge amount of time to explaining the principles behind the periodic table — while researching this project I found several large books devoted to the topic, so I will just give a brief overview, including details of the data I have included.

我不想花费大量时间来解释元素周期表背后的原理-在研究该项目时，我发现了几本专门讨论该主题的大书，因此，我仅作简要概述，包括我所用数据的详细信息已包括在内。

If you look at the atom in the banner above you will notice that it has three red spheres at the centre. To use the correct terminology it has three protons in its nucleus, which means that it is a lithium atom. It also has four blue spheres or neutrons but the same number of electrons, the grey spheres orbiting the nucleus. For any given atom of a particular element the number of neutrons and electrons can vary but the number of protons is what defines it as being of a particular element. The number of protons can only be changed using a large amount of energy: nuclear fission or “splitting the atom” gives two or more smaller atoms of different elements, and fusion or joining nuclei combines two or more atoms into one of a different element.

如果您看一下上面横幅中的原子，您会注意到它的中心有三个红色球体。为了使用正确的术语，它的核中有三个质子，这意味着它是一个锂原子。它也有四个蓝色球体或中子，但电子数量相同，灰色球体环绕原子核。对于特定元素的任何给定原子，中子和电子的数量可以变化，但是质子的数量将其定义为特定元素。质子的数量只能使用大量能量来改变：核裂变或“分裂原子”产生两个或更多个不同元素的较小原子，而聚变或连接核将两个或更多个原子组合成一个不同元素中的一个。

The periodic table shows each element in a coloured square with, amongst other things, the atomic number or number of protons in the nucleus.

元素周期表以彩色正方形显示每个元素，其中除其他外还包括原子序数或原子核中的质子数。

These are the properties of each element shown on my version of the periodic table.

这些是元素周期表上显示的每个元素的属性。

Name — the full name of the element. Some are familiar like gold while others are obscure like oganesson, but as only five or six oganesson atoms have ever been detected it is hardly a household name.
名称 -元素的全名。有些像金一样熟悉，而另一些像oganesson一样晦涩难懂，但是由于迄今只检测到5或6个oganesson原子，所以这几乎不是家喻户晓的名字。
Atomic number — As I mentioned above this is the number of protons in the nucleus, for example the atomic number of lithium is 3, as shown by the red spheres in the header graphic.
原子数 —正如我上面提到的，这是原子核中的质子数，例如，锂的原子数为3，如标题图中的红色球体所示。
Symbol — a short one or two letter symbol. Some are dervived from the name such as Co for cobalt, others from another language such as Pb for lead, from plumbum, the Latin for lead.
符号 -简短的一两个字母符号。有些源自钴的名称，如Co代表钴，其他源自另一种语言，如Pb代表铅，铅源自铅，拉丁语代表铅。
Atomic weight — a complex concept that could form a chapter of a book, or even an entire book! In short it is the mass of a sample of the element relative to a sample of carbon-12 (carbon atoms with the same number of neutrons as protons). This is weighted to allow for different atoms of an element to have different numbers of neutrons. Even carbon itself does not have an atomic weight of 12; it is actually 12.011. This is because heavier isotopes of carbon also exist, and you may have heard of carbon-14 used in archaeology to date organic matter.
原子量 -一个复杂的概念，可能构成一本书的一章，甚至整本书！简而言之，它是元素样品相对于碳12(碳原子的中子数与质子数相同)样品的质量。对其加权以允许元素的不同原子具有不同数量的中子。即使碳本身也不具有12的原子量。它实际上是12.011。这是因为还存在更重的碳同位素，并且您可能听说过考古学中使用的碳14迄今仍是有机物。
Category — elements are categorised as metals, metalloids and nonmetals. These are split into nine subcategories (plus unknown) which are shown as different colours on the periodic table.
类别 -元素分为金属，准金属和非金属。这些被分为九个子类别(加上未知)，在周期表中显示为不同的颜色。
Group — there are 18 groups, represented on the periodic table by numbered columns, although a few also have a name. Elements in each group have similar chemical properties.
组 -有18个组，在周期表中用编号的列表示，尽管也有一些名称。每组中的元素具有相似的化学性质。
Period — generally these are represented by the 7 rows although in the conventional table a large number of elements are pushed out of their proper place into two extra rows at the bottom. The electrons orbiting nucleii do so in “shells” or layers; all elements in a particular period have the same number of shells.
周期 -通常由7行表示，尽管在常规表中，大量元素从其适当位置推出到底部的另外两个行中。绕原子核运行的电子是在“壳”或层中移动的。特定时期内的所有元素的壳数均相同。
Block — in a piece of text borrowed from Wikipedia “Specific regions of the periodic table can be referred to as blocks in recognition of the sequence in which the electron shells of the elements are filled. Each block is named according to the subshell in which the “last” electron notionally resides.” As with categories, blocks are shown by colour and it is therefore not possible to show both at once. My implementation defaults to showing category colours but with the option to show block colours.
块 -在从Wikipedia借来的一段文本中， “元素周期表的特定区域可以识别为块，以识别元素电子壳的填充顺序。 每个块均根据子壳来命名，在子壳中，“最后一个”电子名义上存在。 与类别一样，块用颜色显示，因此无法一次显示两者。我的实现默认为显示类别颜色，但可以选择显示块颜色。
State of matter — at 0<°C and 1 atm of pressure
物质状态 -在0 <°C和1个大气压下
Occurrence — primordial, from decay or synthetic
发生 —原始的，来自衰变或合成的
Standard atomic weight — in addition to the average already listed
标准原子量 -除了已经列出的平均值

Enough words for the moment: let’s look at the UI for this project.

此刻足够多的话：让我们看一下该项目的UI。

The “big bit in the middle” is of course the periodic table itself. To the left are the filter controls and to the right are the radio buttons and keys for the colour coding: these are what make it interactive.

“中间的大部分”当然是元素周期表本身。左侧是滤镜控件，右侧是用于颜色编码的单选按钮和按键：这些是使其具有交互性的原因。

Now let’s take a closer look at some of the elements.

现在，让我们仔细看看其中的一些元素。

Taking hydrogen in the top left as an example, we see the following:

以左上角的氢为例，我们看到以下内容：

The name Hydrogen
氢的名字
The atomic number 1
原子序数1
The chemical symbol H
化学符号H
The atomic weight 1.008
原子量1.008
Group (column) 1 — Alkali metals
组(列)1-碱金属
Period (row) 1
周期(行)1
Category: reactive nonmetal (indicated by colour)
类别：活性非金属(按颜色表示)
If we chose to show block colours we would see that hydrogen is in s-block
如果选择显示块状颜色，我们将看到氢处于s块中

If you mouseover one of the elements you will see its full set of data.

如果将鼠标悬停在元素之一上，将看到其完整的数据集。

Those browser-generated popups aren’t very appealing so I have also provided a larger dialog box showing the same data. This appears if you click an element.

这些浏览器生成的弹出窗口不是很吸引人，因此我还提供了一个更大的对话框来显示相同的数据。如果您单击一个元素，则将显示此内容。

该项目 (The Project)

The project consists of the following files plus an HTML page, a CSS file and a graphic, all of which you can clone/download the Github repository.

该项目由以下文件以及HTML页面，CSS文件和图形组成，您都可以克隆/下载Github存储库。

data.js
data.js
periodictable.js
PeriodicalTable.js
periodictabledisplay.js
PeriodicalTableDisplay.js
periodictablepage.js
PeriodicalTablePage.js
periodictableinfobox.js
PeriodicalTableInfoBox.js

The data is hard coded into an array of objects in a separate file. For practical purposes this data can be considered static but if somebody manages to smash some atoms together with sufficient energy to make more than 118 protons stick together (if only for a tiny fraction of a second) I will need to edit this file.

数据被硬编码到单独文件中的对象数组中。出于实际目的，可以将这些数据视为静态数据，但是如果有人设法用足够的能量将一些原子粉碎在一起，以使超过118个质子粘附在一起(如果仅需一秒钟)，那么我将需要编辑此文件。

HTML元素和原子元素 (HTML Elements and Atomic Elements)

Inevitably I am going to have to use the word element a lot throughout this article. Hopefully it will be obvious from the context which type of element I am referring to!

不可避免地，在本文中，我将不得不大量使用单词元素。希望从上下文中可以明显看出我所指的是哪种元素！

This is the first (atomic!) element, Hydrogen, in data.js.

这是data.js中的第一个(原子！)元素Hydrogen。

This is the source code for the PeriodicTable class in periodictable.js.

这是源代码PeriodicTable中periodictable.js类。

The PeriodicTable class represents the underlying data on the periodic table, independently of the data itself in data.js and the visual representation which is handled by the PeriodicTableDisplay class which we will see in a moment.

PeriodicTable类表示PeriodicTable的基础数据，独立于data.js中的数据本身和由PeriodicTableDisplay类处理的可视表示形式，我们稍后将看到它们。

Let’s look at the PeriodicTable class in detail.

让我们详细查看PeriodicTable类。

物产 (Properties)

The rowcount and columncount properties refer to the number of rows and columns in the HTML table representing the periodic table, not the number periods or groups. The data is set to the array in data.js, and we also have an array of functions to be called when the table’s filtering is changed.

rowcount和columncount属性是指HTML表格中代表周期表的行数和列数，而不是周期或组的数目。数据设置为data.js中的数组，并且当表的过滤发生更改时，我们还有一个要调用的函数数组。

AddFilterChangedEventHandler (AddFilterChangedEventHandler)

This method adds the supplied function to the event handler array. Any UI displaying the periodic table can add event handlers so it knows when to update the display.

此方法将提供的函数添加到事件处理程序数组。任何显示元素周期表的UI都可以添加事件处理程序，因此它知道何时更新显示。

ApplyFilter (ApplyFilter)

Applying more than one filter criteria to data, especially when some may or may not be set, is always a bit fiddly and the solution I have come up with here is to create an array of Boolean values for each element. These are set using the _Match function which I will describe in a moment, and the element’s show property is set to true only if all of the items in the array are true. If the element’s visible property has changed it is added to an array which forms the argument of the filter changed event handler. This ensures the UI need only show/hide the elements which have actually changed.

对数据应用多个过滤条件，尤其是在可能设置或未设置某些条件的情况下，总是有些麻烦，我在这里提出的解决方案是为每个元素创建一个布尔值数组。这些是使用_Match函数设置的，我将在稍后描述，并且仅当数组中的所有项目均为true时，元素的show属性才会设置为true。如果元素的visible属性已更改，则将其添加到一个数组，该数组形成过滤器更改事件处理程序的参数。这样可以确保UI仅需要显示/隐藏实际已更改的元素。

清除过滤器 (ClearFilter)

This method iterates all elements, changing any which are not visible to visible and adding them to an array to pass to the filter changed event handlers.

此方法迭代所有元素，将不可见的元素更改为可见，并将它们添加到数组以传递给更改了过滤器的事件处理程序。

_FireFilterChangedEvent (_FireFilterChangedEvent)

Here we call all the functions in _FilterChangedEventHandlers with the changed array. (At the moment there is only one function but as this project expands we may need more, hence the use of an array.)

在这里，我们使用更改后的数组调用_FilterChangedEventHandlers所有函数。 (目前只有一个功能，但是随着该项目的扩展，我们可能需要更多功能，因此需要使用数组。)

_比赛 (_Match)

This function returns a Boolean value depending on whether the value argument (ie item of data) matches the criteria argument. The third argument, wildcard, specifies whether to look for an exact match or whether the data just needs to contain the filter criteria. Currently only the element name and chemical symbol use wildcard matches.

该函数根据值参数(即数据项)是否与条件参数匹配而返回布尔值。第三个参数，通配符，指定是查找完全匹配还是数据仅需要包含过滤条件。当前，只有元素名称和化学符号使用通配符匹配。

Now let’s look at the PeriodicTableDisplay class in periodictabledisplay.js.

现在，让我们看看PeriodicTableDisplay在periodictabledisplay.js类。

构造函数 (constructor)

Firstly we save the periodictable and tableid arguments as properties. These tell the class the periodic table it is displaying and the HTML table to display it in. We also need to add a function to the periodic table’s filter changed event array and we will look at the actual function shortly.

首先，我们保存periodictable和tableid参数作为属性。这些告诉类正在显示的元素周期表和要显示在其中HTML表。我们还需要向周期表的过滤器更改事件数组中添加一个函数，我们将在短期内查看实际函数。

Next are a couple of objects providing mappings between data values and their corresponding CSS classes. These are used to colour-code the individual elements.

接下来是几个对象，它们提供数据值及其对应CSS类之间的映射。这些用于对各个元素进行颜色编码。

After that we call four functions which together create and populate the HTML table.

之后，我们调用四个函数，它们一起创建并填充HTML表。

Finally we add a click event handler to the HTML table. This checks whether the event has bubbled up from one of the elements and, if so, it shows the PeriodicTableInfoBox for the relevant element. (This technique of adding a single event handler to a parent element to catch events from many child elements is one I will explore in a future article.)

最后，我们将click事件处理程序添加到HTML表中。这将检查事件是否已从其中一个元素冒出，如果是，则显示相关元素的PeriodicTableInfoBox 。 ( 这种将单个事件处理程序添加到父元素以捕获来自许多子元素的事件的技术是我将在以后的文章中探讨的技术。 )

_onFilterChanged (_onFilterChanged)

This is used as an event handler for when the periodic table is filtered. It’s argument is an array of elements which have had their visible property changed so we just need to iterate it and toggle the relevant CSS class.

用作筛选元素周期表时的事件处理程序。它的参数是已更改其visible属性的元素数组，因此我们只需要对其进行迭代并切换相关CSS类即可。

I used a variable for the cells (actually <td> elements) simply to avoid having a very long line of code.

我为单元格(实际上是<td>元素)使用了一个变量，只是为了避免有很长的代码行。

The class for non-visible elements is called elementcellfaded and has an opacity of 0.1 which means they are still just visible which I think looks better than hiding them completely.

不可见元素的类称为elementcellfaded ，不透明度为0.1，这意味着它们仍然是可见的，我认为比完全隐藏它们更好。

_createCells (_createCells)

The periodictable.htm file contains an empty HTML table and this function creates and adds <tr> and <td> elements to it. Note that each <td> has data attributes to identify its row and column.

PeriodicalTable.htm文件包含一个空HTML表，并且此函数创建并向其中添加<tr>和<td>元素。请注意，每个<td>都有数据属性来标识其行和列。

These could of course be hardcoded into the HTML but having them dynamically generated makes enhancements and additions easier to implement.

这些当然可以硬编码到HTML中，但是动态生成它们可以使增强和添加变得更容易实现。

_createColumnHeadings和_createRowHeadings (_createColumnHeadings and _createRowHeadings)

Here we simply set the row and column heading text, and apply the relevant CSS class.

在这里，我们只需设置行和列标题文本，然后应用相关CSS类。

_人口 (_populate)

This function iterates all the elements and picks up the <td> for each with this bit of code:

此函数迭代所有元素，并使用以下代码为每个元素拾取<td> ：

document.querySelector(`[data-row=’${element.row}’][data-column=’${element.column}’]`)

document.querySelector(`[data-row='${element.row}'][data-column='${element.column}']`)

which is a rather obscure but useful bit of syntax for using with data attributes.

与数据属性一起使用时，这是一个相当晦涩但有用的语法。

Then we set the innerHTML to the required values before applying the elementcell class.

然后，在应用elementcell类之前，将innerHTML设置为所需值。

After the loop we call ColorByCategory to set the colours.

循环之后，我们调用ColorByCategory来设置颜色。

ColorByCategory (ColorByCategory)

This function iterates all elements, picks up the corresponding cell, removes any block classes, and applies the relevant category class.

此函数迭代所有元素，选取相应的单元格，删除所有块类，然后应用相关的类别类。

彩色块 (ColorByBlock)

Here we mirror the previous function but remove any category classes and add the correct block class.

在这里，我们镜像了以前的函数，但删除了所有类别类，并添加了正确的块类。

The periodictablepage.js file ties all the previous code together with the HTML page.

PeriodicalTablePage.js文件将所有先前的代码与HTML页面绑定在一起。

window.onload (window.onload)

Firstly we call a function to set a few onclick event handlers before creating a PeriodicTable and a PeriodicTableDisplay object. Finally I have created an object containing the filter inputs. This isn’t strictly necessary but it saves repeating the document.getElementById calls.

首先，我们在创建PeriodicTable和PeriodicTableDisplay对象之前调用一个函数来设置一些onclick事件处理程序。最后，我创建了一个包含过滤器输入的对象。严格来说，这不是必需的，但可以节省重复的document.getElementById调用。

SetEventHandlers (SetEventHandlers)

Here we just set a few onclick handlers.

在这里，我们只设置了一些onclick处理程序。

彩色块 (ColorByBlock)

This function hides and shows the category and block colour key respectively before calling the PeriodicTableDisplay’s ColorByBlock method.

在调用PeriodicTableDisplay的ColorByBlock方法之前，此函数分别隐藏和显示类别和块颜色键。

ColorByCategory (ColorByCategory)

This is the equivalent of the previous function but for category.

这与以前的功能等效，但属于类别。

ApplyFilter (ApplyFilter)

This function creates an object containing the various filter criteria set by the user which is then passed to the ApplyFilter methd.

此函数创建一个包含用户设置的各种过滤条件的对象，然后将其传递给ApplyFilter 。

清除过滤器 (ClearFilter)

Here we set all the filter inputs to empty strings and call ClearFilter.

在这里，我们将所有过滤器输入设置为空字符串，然后调用ClearFilter 。

Finally we have a short class called PeriodicTableInfoBox which lives in periodictableinfobox.js.

最后，我们有一个名为PeriodicTableInfoBox的简短类，该类存在于periodictableinfobox.js中 。

The info box actually exists permanently in the HTML document so the IDs of these elements are passed to the constructor so we can manipulate them.

信息框实际上永久存在于HTML文档中，因此这些元素的ID传递给了构造函数，因此我们可以对其进行操作。

Also in the constructor we set up event handlers so the user can hide the box using either its button or the Esc key.

同样在constructor我们设置了事件处理程序，以便用户可以使用其按钮或Esc键隐藏该框。

The Hide and Show methods do what you would expect, the Show button also populating the box with data for the specified element.

Hide和Show方法可以实现您所期望的效果， Show按钮还用指定元素的数据填充该框。

完成的项目 (The Finished Project)

That’s the coding finished so open periodictable.html in your browser. You should see the page from the screenshot above.

编码完成了，因此在浏览器中打开periodtable.html 。您应该从上面的屏幕截图中看到该页面。

You can play around with the filters and radio buttons; shown below is the table with the Name filter set to “s”, so we see only elements with the letter “s” in their name, the others being shown faded to 0.1 opacity.

您可以使用过滤器和单选按钮进行操作；下图是“名称”过滤器设置为“ s”的表，因此我们只能看到名称中带有字母“ s”的元素，而其他元素显示为不透明度为0.1。