11 янв. 2015 г.

Разделяем на файлы

В программировании очень важно писать код так, чтобы другой человек мог быстро в нем разобраться. Для этого программа, html-элементы и css-стили должны храниться отдельно, в разных файлах. Поэтому в дальнейшем для каждого нового задания создавайте отдельную папку (внутри папки Javascript).

Создайте папку Шаблон проекта. В нем будет храниться стандартный набор файлов. Когда понадобится сделать новый проект, можно будет скопировать эту папку с файлами и вставить, изменив папке название на имя нового проекта.

Создайте файл с названием index.html в папке Шаблон проекта и вставьте в такой код:


<html>
<head>
 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
 <link rel="stylesheet" href="style.css">
 <script src="script.js"></script>
</head>
<body>
  …
</body>
</html>

Как видите, тут только HTML, в который подключаются файлы стилей и скриптов. В теге <head> указана кодировка UTF-8. Теперь можно использовать русский язык, но следите, чтобы в редакторе кода кодировка была установлена такая же.

Создайте в этой же папке пустые файлы style.css и script.js. Теперь осталось выяснить, как HTML, CSS и JS будут связываться, находясь в разных файлах.

Например, как разделить такое переплетение кода:

<span style="background: gray" onclick="alert(4)"> Дважды два? </span>

Начнем с CSS-стиля. Нашему html-элементу добавим новый параметр class. Он будет равен, допустим, knopka. А стиль уберем. Получится так:

<span class="knopka" onclick="alert(4)"> Дважды два? </span>

А внутри файла стилей style.css пропишем стили для класса:

.knopka { background: gray; }

Теперь все html-элементы, у которых установлен параметр class="knopka" будут иметь серый фон. Так привязывать стили очень удобно, ведь на странице может быть много одинаковых элементов, а мы кодируем CSS всего одним блоком. Свойства стилей также разбиваются символом ;. Для следующего класса, допустим, .test, стили надо будет прописывать с новой строки:

.knopka { background: gray; }
.test { color: red; }

Теперь разберемся с программной частью. Тут гораздо сложнее. Вначале убираем onclick и добавляем параметр id для связи с JS:

<span class="knopka" id="dvanadva"> Дважды два? </span>

круто, остался чистый HTML!

Дальше поступим знакомым способом в файле script.js добавим элементу onclick="alert(4)"  также, как программно добавляем и изменяем стили, но:

document.getElementById('dvanadva').onclick = ???

Проблема в том, что если тут написать alert(4), это сообщение выскочит сразу. Ведь мы теперь пишем уже не в html-коде, а в программе. При открытии файла в браузере все команды тут сразу же выполняются. В данном случае надо написать просто название функции без скобок:

document.getElementById('dvanadva').onclick = pokajiOtvet;

В нужный момент программа ее запустит.

Рядом, конечно, создадим нашу новую функцию:


function pokajiOtvet(){
 alert(4);
}

Сложновато, но и это еще не все. Дело в том, что программа может запуститься еще до того, как браузер прочитает все внутренности html-файла, и не найдет нужный элемент. Для того, чтобы программа запустилась строго после полной загрузки всех элементов пишем так:


window.onload = startProgram;

function startProgram(){
...
}

И теперь в эту стартовую программу добавляем наш код. В итоге js-файл получится такой:


window.onload = startProgram;

function startProgram(){
 document.getElementById('dvanadva').onclick = pokajiOtvet;
}

function pokajiOtvet(){
 alert(4);
}

Пояснение:
После полной загрузки документа запустится функция startProgram
Внутри нее html-элементу с параметром  id="dvanadva" добавится onclick
При клике на id="dvanadva" вызовется функция pokajiOtvet

Проверьте, все ли работает. После открытия в браузере должна появиться серая кнопка, клик по которой вызывает всплывающее сообщение.

Это сложный урок, но теперь мы почти готовы написать полноценную игру!

Сделайте из папки Шаблон проекта копию под названием Практика Разделения и самостоятельно разбейте на файлы пару предыдущих заданий.

10 комментариев:

  1. Огромное спасибо за замечательный интернет-учебник! Очень жду продолжения!

    ОтветитьУдалить
  2. Спасибо за учебник, думаю , что он очень нужен для детей рождённых с компьютером и не увязших в соцсетях. Пока всё понятно, но конечно нужно чтоб с ребёнком занимался взрослый/более опытный товарищ, который объяснит, что такое "расширение у файла" и другие мелочи.
    Я мальчик 39 лет, сыну пока 5 лет, думаю, что года через 3 уже можно начинать его учить по вашему пособию, будем ждать продолжения. По поводу замечаний, к опечаткам придираться не буду. Считаю, что ребёнка нужно сразу увлечь какими-то яркими эффектами, чтоб он написал код и "вау" увидел результат своей "кропотливой" работы.
    Побольше популяризируйте свой учебник, развивайте. На эту страницу попал через Хабрахабр.

    ОтветитьУдалить
  3. Супер, мне 12, все очень понятно, учусь тайно, поэтому никто не помогает, в будущем хочу стать программистом, самый легкий учебник!

    ОтветитьУдалить
  4. Я может глупый но все сделал вроде верно но нету кнопки а просто текст (Знак вопроса в ромбе и на сером фоне Дважды Два)

    ОтветитьУдалить
    Ответы
    1. Цель данного урока в том, чтобы разделить html, css и js по файлам. Если дважды два на сером фоне, значит css-стили работают. При нажатии еще должно выскакивать "4". Значит и js работает.

      Удалить
  5. не получаетсяу меня просто 3 точки и всё или слово два на два? помогите пожалуйста может я просто туплю и вопрос элементарный но мне не понятно почему не роботает

    ОтветитьУдалить