Система описания химических формул для WEB.
Внимание! Сайт в процессе переименования.
Старое название easyChem оказалось слишком распространённым. Новое название: CharChem.
Сайт уже доступен через новый домен charchem.org, который вскоре станет основным. Впрочем, старый домен easychem.org тоже будет доступен.

Таблица Менделеева

В данном разделе обсуждаются принципы генерации таблицы Менделеева, обладающей различными свойствами. Кроме того, даны несколько интересных примеров.
Система easyChem предоставляет возможность довольно просто вывести в HTML-документе таблицу Менделеева.
Вы можете воспользоваться сервисом генерации, чтобы манипулировать настройками в интерактивном режиме.

Список примеров

Как вывести таблицу

Простейший вариант генерации таблицы представлен несложным скриптовым кодом, который выделен синим в следующем примере.
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://easychem.org/download/easychem.js"></script>
  <link rel="stylesheet" type="text/css" href="http://easychem.org/download/easychem.css" />
</head>
<body>
<h1>Таблица Менделеева</h1>
<div id="PeriodicSysTable"></div>
<script type="text/javascript">
  var dstElem = document.getElementById('PeriodicSysTable');
  if (dstElem) dstElem.innerHTML=ChemSys.drawTable();
</script>
</body>
</html>
Нажмите, чтобы показать или скрыть результат
Для начала, результат неплохой. Но в большинстве случаев потребуется внести какие-то изменения или дополнения. Это вполне возможно. Далее мы рассмотрим различные настройки, позволяющие управлять формированием таблицы.

Пример модификации

Допустим, нужно изобразить примерно такую таблицу, как в википедии при описании какого-либо химического элемента. А именно:
  1. Таблица должна быть широкой, т.е. актиноиды и лантаноиды располагаются в общей таблице.
  2. Цвета ячеек зависят от свойств элемента (щелочные металлы, галогены и т.д.)
  3. В ячейке выводится только обозначение элемента. Название, номер и масса не нужны.
Вот код, который позволяет вывести такую таблицу. (Только та часть, которая располагается внутри тега body)
<style type="text/css">
  #Table2 .name, #Table2 .mass, #Table2 .number {display:none;}
  #Table2 .id { font-size:12px; font-weight:100;}
</style>
<div id="Table2"></div>
<script type="text/javascript">
  var rules2 = ChemSys.TblRules.Wide;
  rules2.category = MenTblCategoryProps;
  var dst2 = document.getElementById('Table2');
  if (dst2) dst2.innerHTML = ChemSys.drawTable(rules2);
</script>
Нажмите, чтобы показать или скрыть результат

Разберем пример, начав с нижних строчек. Как видно, функция ChemSys.drawTable принимает в качестве параметра набор свойств, описывающих таблицу.

В системе easyChemic уже имеется несколько заранее подготовленных наборов свойств. Вот их список:
ChemSys.TblRules.Std Форма таблицы, принятая IUPAC. Используется по умолчанию.
ChemSys.TblRules.Wide Широкая таблица, где Лантаноиды и Актиноиды входят в общую таблицу.
ChemSys.TblRules.Short Классическая таблица Менделеева, с 8 группами.
В данном примере мы использовали схему Wide (задача 1). Но не в чистом виде, а слегка модифицированную:
  var rules2 = ChemSys.TblRules.Wide;
  rules2.category = MenTblCategoryProps;
Здесь мы поменяли таблицу категорий элементов (задача 2). По умолчанию используется таблица категорий по блокам MenTblCategoryBlock. Но мы используем таблицу категорий по химическим свойствам - MenTblCategoryProps. Обе эти таблицы тоже заранее заготовлены, но при желании можно использовать свою таблицу категорий.
Задача 3 решена с помощью CSS. В блоке <style> мы указали, что для нашей таблицы, выводимой в блоке Table2, нужно скрыть номер, название и массу элемента. А идентификатор элемента выводить тонким шрифтом высотой 12 пикселей.

Модифицируем выводимые данные. Интерактивность

В предыдущих примерах мы получали таблицу в виде статического изображения. Но довольно часто желательно, чтобы таблица обладала какой-либо интерактивностью. Например, в википедии каждый элемент таблицы является ссылкой на соответствующую статью.
Чтобы это повторить, воспользуемся специальным функционалом, позволяющим модифицировать выводимую информацию.
Повторим условия предыдущего примера, но назначим на каждый элемент ссылку. Кроме того, лишнюю информацию не будем скрывать с помощью CSS, а просто исключим из вывода.

Для понимания этого примера уже потребуются некоторые знания в области html и JavaScript.
<style type="text/css">
  #Table3 .id  { font-size:12px; font-weight:100; text-decoration: none;}
  #Table3 .id:hover { text-decoration: underline;}
 </style>
<div id="Table3"></div>
<script type="text/javascript">
  var rules3 = ChemSys.Clone(ChemSys.TblRules.Wide);
  rules3.category = MenTblCategoryProps;
  rules3.cellRender = new ChemSys.CellRender("id");
  // Функция, вызываемая для отрисовки латинского символа каждого элемента
  rules3.cellRender.id = function(elem){
	  // получаем название по обозначению элемента из словаря системы
	  var name = ChemSys.lang(elem.id);
	  // дополнительная информация о категории элемента
	  var cat = ChemSys.findCategory(rules3.category, elem.id, null);
	  return '<a class="id" href="#elem_'+elem.id+'" title="'+name+', '+cat+'">'+elem.id+'</a>';
  }
  var dst3 = document.getElementById('Table3');
  if (dst3) dst3.innerHTML = ChemSys.drawTable(rules3);
</script>
Нажмите, чтобы показать или скрыть результат
Если подвести курсор к элементу, появляется подпись. Символы элементов являются ссылками.

Пояснения.
  1. Первое отличие от предыдущего примера в блоке style. Теперь не нужно скрывать классы номера, имени и массы, т.к. эта информация исключается из вывода. Зато появилось правило :hover, которое делает ссылку подчеркнутой при наведении (как в википедии).
  2. Следующее небольшое отличие состоит в том, что правила получаем при помощи функции ChemSys.Clone. Это означает что rules3 является копией исходных правил. И все изменения, выполняемые с rules3 не повлияют на исходные правила.
  3. Далее следует создание специального функционала, отвечающего за вывод каждого элемента в таблице:
    rules3.cellRender = new ChemSys.CellRender("id")
    Строка "id" означает, что будет выведен только символ элемента. Полный вариант, соответствующий исходным настройкам, выглядит так: "number,id,name,mass".
  4. Чтобы изменить существующее поведение функционала, создадим функцию, формирующую html-код химического символа. Исходный вариант html-кода выглядит так:
    <div class="id">He<div>
    В нашем примере вместо него будет выведено следующее:
    <a class="id" href="#elem_He" title="Гелий, Инертные газы">He</a> Для извлечения названия пользуемся внутренним словарём easyChem при помощи ChemSys.lang(elem.id).
    Для получения категории, к которой относится элемент, пользуемся функцией ChemSys.findCategory(rules3.category, elem.id, null).
    Ну и строка
    return '<a class="id" href="#elem_' + elem.id + '" title="' + name + ', ' +cat+ '">' +elem.id+ '</a>';
    формирует необходимый html-код.
В принципе, здесь мы получили довольно неплохие возможности для столь небольшого кода.

Дополнительные примеры

Вывод названий на нескольких языках

Поставим задачу так: необходимо вывести таблицу с названиями на нескольких языках. Основное название должно выводиться на том языке, который является текущим в браузере. Если основное название выводится не по-английски, второе название должно выводиться на английском, синими буквами. Третье название на латыни, курсивом.

Для решения такой задачи нужно подключить библиотеку интернационализации. Например, так:
<script type="text/javascript" src="http://easychem.org/download/easychem-lang.js"></script>

Теперь разберемся, как оперировать средствами интернационализации easyChem. Для определения текущего языка браузера воспользуемся значением ChemSys.navLang. Текущий используемый язык: ChemSys.curLang. Чтобы выяснить, поддерживается ли нужный язык, используем выражением: langID in ChemSys.Dict.

Для формирования нужных данных будем использовать функционал ChemSys.CellRender с двумя дополнительными функциями: name_en, name_lat. К ним прилагаются два CSS-класса, модифицирующих внешний вид: name.en - синий, name.lat - курсив.

Нажмите, чтобы показать или скрыть исходный код

Маленькая таблица, как в википедии

Обычно в каждой статье википедии, связанной с химическими элементами, есть маленькая табличка, позволяющая быстро открывать статьи о других элементах.
Нажмите, чтобы показать или скрыть исходный код

Здесь довольно значительный блок стилей, обеспечивающих необходимый внешний вид таблицы и вспомогательных элементов.
Общая структура html представлена таблицей с id="SmallTbl", в которой две строки.
Верхняя строка имеет id="SmallTblHdr". В неё скриптом выводится название текущего элемента и ссылки на соседние.
Вторая строка имеет id="SmallTblMain" и содержит номер и символ текущего элемента. И здесь же мини-таблица. Она тоже заполняется скриптом. Для модификации свойств ячеек используется функционал CellRenderer.
Интерактивность обеспечивается конструкцией
onclick="return setElem('He')"

Вывод таблицы нестандартной формы. Janet left-step periodic table

В википедии есть вариант таблицы, озаглавленный "Janet left-step periodic table". Для того, чтобы нарисовать такую таблицу, нужно описать полностью новое правило.
В таблице 33 колонки (из них первая содержит информацию об электронных слоях) и 9 строк (последняя служит для легенды).
Janet left-step periodic table
Нажмите, чтобы показать или скрыть исходный код

Таблица электроотрицательности элементов

Дано: для большинства элементов заданы значения электроотрицательности в виде чисел в диапазоне от 0.5 до 4.
Задача.
  1. Требуется отобразить в таблице элементы с указанием номера, символа и значения электроотрицательности.
  2. Задан набор интервалов от 1 до 3.1 c шагом 0.3. Каждому задан цвет фона. Ячейки элементов должны быть окрашены в соответствующие цвета.
  3. При наведении курсора на символ элемента нужно отобразить его название
  4. Вывести легенду в виде цветовой шкалы.
Решение:
  1. Воспользуемся клонированием базового правила Std. Для формирования html-кода ячеек создадим функционал CellRender.
  2. Создадим специальную таблицу категорий, соответствующих заданным интервалам - ElNegCategory. Цвет каждого интервала будет задан в виде CSS-класса
    .elneg-bkN { background-color: #xxx;}
    Значение N будем вычислять из электроотрицательности по формуле:
    N = min( max( floor[(ElNeg-1)*10/3]+1, 0), 8).
  3. Вывод названия элемента будет осуществляться при помощи атрибута title. Для этого нужно переопределить функцию id для функционала elnegRules.cellRender. Кроме того, функционал дополняется функцией elneg, которая будет выводить значение электроотрицательности для каждого элемента. Название совпадает с тем, что указано при создании функционала.
  4. Легенду нарисуем поверх таблицы при помощи элемента <div class="legend"> с абсолютным позиционированием.
Electronegativity of the Elements
Нажмите, чтобы показать или скрыть исходный код
Конец статьи