4 янв. 2015 г.

Начало работы

Для начала обучения понадобится не так много:
обычный домашний компьютер
установить текстовый редактор Notepad++ или Sublime Text
сделать видимыми расширения файлов.

Если вы плохо знаете компьютер, найдите более опытного помощника. Не читайте текст без понимания это пустая трата времени. Для написания и редактирования программ лучше использовать специальный текстовый редактор, например Notepad++ http://notepad-plus-plus.org или Sublime Text http://www.sublimetext.com

Теперь на компьютере надо включить показ расширений файлов (это последние 2 или 3 английские буквы после точки в названии файла), если у вас операционная система Windows.

Откройте “Пуск” → “Панель управления” → “Свойства папки”. Во вкладке “Вид” почти в самом низу нужно убрать галочку “Скрывать расширения для зарегистрированных типов файлов”.

Проверим, готовы ли мы к работе. Создайте на компьютере новую папку (на “рабочем столе” клик правой кнопкой мыши → “Создать ...” → “Новую папку” ) и назовите ее “Javascript”. В этой папке создайте новый текстовый файл и назовите его в test.html. Иконка файла после этого должна измениться на изображение браузера.

Откройте файл в текстовом редакторе Notepad++ (правой кнопкой мыши → открыть с помощью... → Notepad++). На открывшейся пустой странице напишите (соблюдая все знаки и скобочки):

<a href = "http://ya.ru">Yandex</a>

Затем сохраните файл (В верхнем меню: Файл → сохранить).

Теперь откройте в браузере файл двойным кликом (из папки). Должна открыться страничка со ссылкой. Нажмите ее и если откроется сайт Яндекса, все в порядке. Если нет - где-то допущена ошибка и надо повторить все шаги, иначе нет смысла читать дальше. Если все получилось идем дальше.

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

Красным цветом выделены программы (код Javascript)
Желтым - коды оформления элементов (стилей CSS)
Зеленым цветом - разметка элементов HTML

Что такое HTML и CSS, и зачем они нам нужны? Ведь мы учим программирование?

Чистая программа это скучный текст, просто строки кода. В ней нет картинок, звуков и движения: только текст. А ведь мы собираемся делать игры. Для того, чтобы оживить программу нужны дополнительные механизмы: HTML и CSS они нам помогут показать на экране компьютера игровые элементы и их движение.

Представьте актеров на съемочной площадке. У них есть определенный сценарий, в котором написано кто что должен делать и говорить. И когда идет съемка, актеры действуют строго по сценарию.

У нас очень похоже: программа это сценарий, а актеры это HTML и CSS (грим). JavaScript, HTML и CSS работают в связке, но являются различными языками кодирования:
JS нужен для написания программ (сценариев).
HTML нужен для создания визуальных элементов и подключения программы.
CSS нужен для кодирования внешнего вида визуальных элементов.



Следующий урок >>

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

  1. Во-первых, спасибо за труд! Я девочка 32 лет. Но у меня есть мальчик 13 лет, которому я хотела предложить данный курс, чтобы не только с Майнкрафт и КС был знаком. Решила сначала попробовать сама. Уровень у меня, по сути, как у школьника, автору важна обратная связь, поэтому пишу свои замечания, у малого, думаю, были бы такие же.:
    1.— установить программу Notepad++
    Нужно сразу объяснить, что это за программа и для чего она нужна. У меня, например, стоит PSPad, ее же тоже можно использовать для этих целей.

    2.Откройте “Пуск” > “Панель управления” > “Свойства папки”
    У меня Windows 7, там это называется "Параметры папок", поэтому нужно указать, что название может отличаться. Это мелочь, конечно, но у того, кто делает это в первый раз, могут быть вопросы.

    3. test.html. Нужно сразу указать, что html - это расширение. А то я подумала, что это название и создала test.html.txt. Потом, конечно, дошло.

    4. При двойном клике в папке, у меня файл открывался не в браузере, а в PSPad. В браузере открылся только через "Открыть с помощью...".
    Нужно как-то указать, разные варианты.

    Перехожу ко второму уроку).

    ОтветитьУдалить
    Ответы
    1. Большое спасибо за комментарий! Постараюсь сделать понятнее и наверно дополнительно будет скринкаст.

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
  2. Автору - благодарочка. Очень полезная тема не только для детей, вот сам подсел, с ноля - самое то. Спасибо, Алексей.

    ОтветитьУдалить
  3. Спасибо. Буду осваивать сам.

    ОтветитьУдалить
  4. Вот за аналогию с актерами и сценарием отдельное спасибо. Метод аналогии - это сила.

    ОтветитьУдалить
  5. У меня не появился значок браузера.
    (Использую Виндовс 7 домашняя расширеная
    )

    ОтветитьУдалить
    Ответы
    1. 1. Надо попробовать "открыть файл с помощью" и выбрать браузер. Там где-то будет галочка "всегда открывать файл в этой программе". И тогда появится иконка браузера.
      2. Иногда при сохранении файла в test.html добавляется другое расширение (.txt). Рекомендую проверить настройки, чтобы расширения файлов были видны. Также можно призвать на помощь более опытного знакомого.

      Удалить
  6. Я для детей из детдомов ищу такой учебник, сама имею образование программиста. Огромное спасибо за работу !!!

    ОтветитьУдалить
  7. спасибо. изменил сайт с яндекса на другой все получилось.

    ОтветитьУдалить
  8. Здравствуйте! Начну описание своего мнения по поводу этого проекта. Ну для начала и особенно для тех людей кто только работает с программами как пользователь этот проект имеет место быть. Я конечно давно уже не ребенок и даже застал времена когда еще программировали в Dos, то есть поясню для тех кто слышит слово Dos в первый раз. Программирование под Dos это в принципе все тоже самое что и сейчас только в большей степени в текстовом виде или в графике но нарисованной из палочек и точечек в 1 пиксель (1 квадратик на экране). Сейчас же используются структуры с более высокими разрешениями и из-за этого игры и программы сейчас такие красивые. Ну написал как смог думаю мою идею поймут те кто захотят. так вот я всегда учился самостоятельно или если быть чуть честнее в училище на языке Qbasic и если кому интересно может найти его на просторах интернета так как он был раньше компонентом той самой ОС Dos с которой все начиналось в мире большого компьютера. > Print "Привет МИР!"
    Привет МИР!
    В Dos это была самая простая программа которая если мне не изменяет память не писал только самый ленивый человек.
    Рад что хоть кто то решился на создание такого понятного курса для начинающего программиста и я думаю даже не совсем молодого но хотящего научиться писать программы. Я тоже попробую пройти все что здесь написано и по возможности оставлю свои комментарии.

    ОтветитьУдалить
  9. Было бы очень хорошо, если б Вы указали почему ИМЕННО ТАК написан код

    Откройте файл в текстовом редакторе Notepad++ (правой кнопкой мыши → открыть с помощью... → Notepad++). На открывшейся пустой странице напишите (соблюдая все знаки и скобочки):

    Yandex

    Затем сохраните файл (В верхнем меню: Файл → сохранить).

    ОтветитьУдалить
  10. Всё было очень понятно ( мне 14 лет )

    ОтветитьУдалить
  11. Спасибо! Только есть один вопрос, а плагины устанавливать нужно?

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