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

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

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

<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>

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <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 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. Хотя она не имеет прямого отношения к easyChem, но без неё Internet Explorer не будет показывать графические формулы.
Первая выделенная строка подключает библиотеку jQuery. Те, кто знает, что это за библиотека, могут подключать её любым удобным способом. На сайте jquery.com при желании можно скачать версию библиотеки, чтобы не обращаться к ней постоянно через интернет.
Чуть ниже описано, как пользоваться easyChem без jQuery.
Вторая строка - самая главная - подключение библиотеки easyChem. Здесь предложен самый простой вариант - обращение к сайту easychem.org. Также можно скачать библиотеку, чтобы пользоваться её функциями без доступа к интернету.
Третья строка - подключение CSS. Это действие, строго говоря, не является обязательным, но желательно. Здесь так же предложен вариант с подключением через интернет, но можно использовать скачанный файл.
Конструкция body class="echem-auto-compile" сообщает, что все теги, обладающие классом "echem-formula", содержат в себе описание формул. Автоматически вместо описаний будет подставлено конечное визуальное представление.
Если по какой-то причине невозможно модифицировать тег body, то можно использовать равноценную замену - в любом месте документа разместить такой код:
```
<span class="easyChemConfig auto-compile"></span>
```
Остаётся только добавить в документ любое количество конструкций типа <span class="echem-formula">H2O</span> или <div class="echem-formula">H2SO4</div> (тип тега значения не имеет). И везде автоматически отобразятся правильные формулы.
Хотя, желательно проверять правильность описаний, прежде чем вставлять их в текст документа. Для этого можно использовать Тестовый стенд.

Использование easyChem без jQuery

Библиотека jQuery не является необходимой для easyChem. Просто с её помощью выполняются высокоуровневые функции, связанные с навигацией в html-документе. Но если написать немного кода на JavaScript, то может получиться вот такой минимальный вариант нашей статьи:

<!DOCTYPE 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>
</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".