Как начать пользоваться

Краткое описание, как начать пользоваться CharChem.

Допустим, мы пишем коротенькую статью. Вот её начальная заготовка без использования CharChem

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
  <h1>Маленькая статья по химии</h1>
  <h2>Качественная реакция на железо II</h2>
  <div align="center">TODO: Уравнение реакции...</div>
  <h2>Куркумин</h2>
  <div align="center">TODO: структурная формула</div>
</body>
</html>

Теперь нужно подключить CharChem и добавить описание формул. Действия, связанные с подключением CharChem, выделены синим. А описания формул выделены сиреневым.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://charchem.org/download/charchem2.js"></script>
  <link rel="stylesheet" href="http://charchem.org/download/charchem.css" />
</head>
<body class="echem-auto-compile">
  <h1>Маленькая статья по химии</h1>
  <h2>Качественная реакция на железо II</h2>
  <div align="center" class="echem-formula">
    3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+
  </div>
  <h2>Куркумин</h2>
  <div align="center" class="echem-formula">
    `\`/<`\H3C`O>|<`/HO>\/`|_o/\\/<`||O>\/<`||O>\//\/\(*/`OCH3*)|<\OH>`/`\`|_o
  </div>
</body>
</html>

В результате получилась такая маленькая статья
Show / Hide

Маленькая статья по химии

Качественная реакция на железо II

3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+

Куркумин

`\`/<`\H3C`O>|<`/HO>\/`|_o/\\/<`||O>\/<`||O>\//\/\(*/`OCH3*)|<\OH>`/`\`|_o

Здесь мы не рассматриваем описание формул, т.к. для этого есть отдельный раздел. Разберем действия, связанные с подключением.

Обратите внимание на самую первую строку. Она содержит DOCTYPE. Хотя она не имеет прямого отношения к CharChem, но без неё Internet Explorer не будет показывать графические формулы.
Первая выделенная строка — самая главная — подключение библиотеки CharChem. Здесь предложен самый простой вариант — обращение к сайту charchem.org. Также можно скачать библиотеку, чтобы пользоваться её функциями без доступа к интернету.
Вторая выделенная строка — подключение CSS. Это действие, строго говоря, не является обязательным, но желательно. Здесь так же предложен вариант с подключением через интернет, но можно использовать скачанный файл.
Конструкция body class="echem-auto-compile" сообщает, что все теги, обладающие классом "echem-formula", содержат в себе описание формул. Автоматически вместо описаний будет подставлено конечное визуальное представление.
Если по какой-то причине невозможно модифицировать тег body, то можно использовать равноценную замену — в любом месте документа разместить такой код:
```
<span class="CharChemConfig auto-compile"></span>
```
Остаётся только добавить в документ любое количество конструкций типа <span class="echem-formula">H2O</span> или <div class="echem-formula">H2SO4</div> (тип тега значения не имеет). И везде автоматически отобразятся правильные формулы.
Хотя, желательно проверять правильность описаний, прежде чем вставлять их в текст документа. Для этого можно использовать Тестовый стенд.

Использование CharChem без автоподстановки формул

Бывают такие ситуации, когда автоматическая подстановка формул невозможна. Например, если содержимое формируется динамически при помощи скрипта. В таком случае подстановку формул тоже нужно выполнять при помощи скрипта.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://easychem.org/download/charchem.js"></script>
  <link rel="stylesheet" href="http://charchem.org/download/charchem.css" />
</head>
<body>
  <h1>Маленькая статья по химии</h1>
  <h2>Качественная реакция на железо II</h2>
  <div id="F1" align="center"></div>
  <h2>Куркумин</h2>
  <div id="F2" align="center"></div>
  <script>
    var elem1 = document.getElementById('F1');
    var ex1 = ChemSys.compile('3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+');
    elem1.innerHTML = ex1.html();

    var elem2 = document.getElementById('F2');
    var ex2 = ChemSys.compile(
    "`\\`/<`\\H3C`O>|<`/HO>\\/`|_o/\\\\/<`||O>\\/<`||O>\\//\\/\\(*/`OCH3*)|<\\OH>`/`\\`|_o");
    ChemSys.draw(elem2, ex2);
  </script>
</body>
</html>

Здесь есть один важный момент: текстовые описания формул не следует использовать, как строковые константы в скрипте, т.к. в них могут содержаться служебные символы \ " или '. Текстовое описание формулы куркумина было сначало вставлено в тестовый стенд, а затем использован "Исходный код для JavaScript".

Кроме того, обратите внимание, что конструкция ex1.html() создаёт текстовое представление, которое работает не для всех формул. А конструкция ChemSys.draw(elem2, ex2) создаёт графическое представление, которое работает для любых формул.

Текст статьи обновлён 2024-12-03. Автор: PeterWin.