Для начала обучения понадобится не так много:
— обычный домашний компьютер
— установить текстовый редактор Notepad++ или Sublime Text
— сделать видимыми расширения файлов.
Если вы плохо знаете компьютер, найдите более опытного помощника. Не читайте текст без понимания — это пустая трата времени. Для написания и редактирования программ лучше использовать специальный текстовый редактор, например Notepad++ http://notepad-plus-plus.org или Sublime Text http://www.sublimetext.com
Теперь на компьютере надо включить показ расширений файлов (это последние 2 или 3 английские буквы после точки в названии файла), если у вас операционная система Windows.
Откройте “Пуск” → “Панель управления” → “Свойства папки”. Во вкладке “Вид” почти в самом низу нужно убрать галочку “Скрывать расширения для зарегистрированных типов файлов”.
Проверим, готовы ли мы к работе. Создайте на компьютере новую папку (на “рабочем столе” клик правой кнопкой мыши → “Создать ...” → “Новую папку” ) и назовите ее “Javascript”. В этой папке создайте новый текстовый файл и назовите его в test.html. Иконка файла после этого должна измениться на изображение браузера.
Откройте файл в текстовом редакторе Notepad++ (правой кнопкой мыши → открыть с помощью... → Notepad++). На открывшейся пустой странице напишите (соблюдая все знаки и скобочки):
Затем сохраните файл (В верхнем меню: Файл → сохранить).
Теперь откройте в браузере файл двойным кликом (из папки). Должна открыться страничка со ссылкой. Нажмите ее и если откроется сайт Яндекса, все в порядке. Если нет - где-то допущена ошибка и надо повторить все шаги, иначе нет смысла читать дальше. Если все получилось идем дальше.
Для обучения обязательно нужно выполнять практические задания, набирать код и смотреть что получается. Не пропускайте, пожалуйста, места, где нужно написать код и посмотреть как он работает.
Красным цветом выделены программы (код Javascript)
Желтым - коды оформления элементов (стилей CSS)
Зеленым цветом - разметка элементов HTML
Что такое HTML и CSS, и зачем они нам нужны? Ведь мы учим программирование?
Чистая программа — это скучный текст, просто строки кода. В ней нет картинок, звуков и движения: только текст. А ведь мы собираемся делать игры. Для того, чтобы оживить программу нужны дополнительные механизмы: HTML и CSS — они нам помогут показать на экране компьютера игровые элементы и их движение.
Представьте актеров на съемочной площадке. У них есть определенный сценарий, в котором написано кто что должен делать и говорить. И когда идет съемка, актеры действуют строго по сценарию.
У нас очень похоже: программа — это сценарий, а актеры — это HTML и CSS (грим). JavaScript, HTML и CSS работают в связке, но являются различными языками кодирования:
— JS нужен для написания программ (сценариев).
— HTML нужен для создания визуальных элементов и подключения программы.
— CSS нужен для кодирования внешнего вида визуальных элементов.
— обычный домашний компьютер
— установить текстовый редактор 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 нужен для кодирования внешнего вида визуальных элементов.
Во-первых, спасибо за труд! Я девочка 32 лет. Но у меня есть мальчик 13 лет, которому я хотела предложить данный курс, чтобы не только с Майнкрафт и КС был знаком. Решила сначала попробовать сама. Уровень у меня, по сути, как у школьника, автору важна обратная связь, поэтому пишу свои замечания, у малого, думаю, были бы такие же.:
ОтветитьУдалить1.— установить программу Notepad++
Нужно сразу объяснить, что это за программа и для чего она нужна. У меня, например, стоит PSPad, ее же тоже можно использовать для этих целей.
2.Откройте “Пуск” > “Панель управления” > “Свойства папки”
У меня Windows 7, там это называется "Параметры папок", поэтому нужно указать, что название может отличаться. Это мелочь, конечно, но у того, кто делает это в первый раз, могут быть вопросы.
3. test.html. Нужно сразу указать, что html - это расширение. А то я подумала, что это название и создала test.html.txt. Потом, конечно, дошло.
4. При двойном клике в папке, у меня файл открывался не в браузере, а в PSPad. В браузере открылся только через "Открыть с помощью...".
Нужно как-то указать, разные варианты.
Перехожу ко второму уроку).
Большое спасибо за комментарий! Постараюсь сделать понятнее и наверно дополнительно будет скринкаст.
УдалитьЭтот комментарий был удален автором.
УдалитьАвтору - благодарочка. Очень полезная тема не только для детей, вот сам подсел, с ноля - самое то. Спасибо, Алексей.
ОтветитьУдалитьСпасибо. Буду осваивать сам.
ОтветитьУдалитьВот за аналогию с актерами и сценарием отдельное спасибо. Метод аналогии - это сила.
ОтветитьУдалитьУ меня не появился значок браузера.
ОтветитьУдалить(Использую Виндовс 7 домашняя расширеная
)
1. Надо попробовать "открыть файл с помощью" и выбрать браузер. Там где-то будет галочка "всегда открывать файл в этой программе". И тогда появится иконка браузера.
Удалить2. Иногда при сохранении файла в test.html добавляется другое расширение (.txt). Рекомендую проверить настройки, чтобы расширения файлов были видны. Также можно призвать на помощь более опытного знакомого.
Я для детей из детдомов ищу такой учебник, сама имею образование программиста. Огромное спасибо за работу !!!
ОтветитьУдалитьспасибо. изменил сайт с яндекса на другой все получилось.
ОтветитьУдалитьЗдравствуйте! Начну описание своего мнения по поводу этого проекта. Ну для начала и особенно для тех людей кто только работает с программами как пользователь этот проект имеет место быть. Я конечно давно уже не ребенок и даже застал времена когда еще программировали в Dos, то есть поясню для тех кто слышит слово Dos в первый раз. Программирование под Dos это в принципе все тоже самое что и сейчас только в большей степени в текстовом виде или в графике но нарисованной из палочек и точечек в 1 пиксель (1 квадратик на экране). Сейчас же используются структуры с более высокими разрешениями и из-за этого игры и программы сейчас такие красивые. Ну написал как смог думаю мою идею поймут те кто захотят. так вот я всегда учился самостоятельно или если быть чуть честнее в училище на языке Qbasic и если кому интересно может найти его на просторах интернета так как он был раньше компонентом той самой ОС Dos с которой все начиналось в мире большого компьютера. > Print "Привет МИР!"
ОтветитьУдалитьПривет МИР!
В Dos это была самая простая программа которая если мне не изменяет память не писал только самый ленивый человек.
Рад что хоть кто то решился на создание такого понятного курса для начинающего программиста и я думаю даже не совсем молодого но хотящего научиться писать программы. Я тоже попробую пройти все что здесь написано и по возможности оставлю свои комментарии.
Было бы очень хорошо, если б Вы указали почему ИМЕННО ТАК написан код
ОтветитьУдалитьОткройте файл в текстовом редакторе Notepad++ (правой кнопкой мыши → открыть с помощью... → Notepad++). На открывшейся пустой странице напишите (соблюдая все знаки и скобочки):
Yandex
Затем сохраните файл (В верхнем меню: Файл → сохранить).
Всё было очень понятно ( мне 14 лет )
ОтветитьУдалитьСпасибо! Только есть один вопрос, а плагины устанавливать нужно?
ОтветитьУдалить