JavaScript для детей. Самоучитель по программированию
жүктеу/скачать 6,41 Mb. Pdf көрінісі
|
| О С Н О В Ы H T M L
Встроенная в браузер JavaScript-консоль, которой мы до сих пор пользо- вались, хороша, когда нужно протестировать небольшой фрагмент кода, но для создания более масштабных программ понадобится чуть более гибкое и универсальное средство — вроде веб-страницы со встроенным JavaScript-кодом. В этой главе мы как раз и научимся создавать неслож- ные странички на языке HTML. Гипертекстовый язык разметки HTML предназначен специально для создания веб-страниц. Слово гипертекстовый означает, что фраг- менты текста связаны между собой гиперссылками — то есть ссылками в документе на другие объекты. А язык разметки — это способ встра- ивать в текст дополнительную информацию. Разметка указывает про- граммам (таким как браузер), как отображать текст и что с ним делать. В этой главе я покажу, как создавать HTML-документы в текстовом редакторе — программе, предназначенной для работы с простым тек- стом без форматирования, в отличие от текстовых процессоров вроде Microsoft Word. Документы текстовых процессоров содержат формати- рованный текст (с различными типами и размерами шрифтов, цветами и т. п.), и устроены эти программы так, чтобы форматирование было легко менять. Кроме того, многие текстовые процессоры позволяют вставлять в текст картинки и другие графические элементы. Простой же текст является только текстом — без цветов, стилей, размеров и т. д. Вставить в такой текст картинку не выйдет, разве только составить ее из символов — скажем, как этого котика справа. /\_/\ =( °w° )= ) ( // (__ __)// 84 Часть I. Основы Текстовые редакторы Мы будем создавать HTML-документы в кросс-платформенном (совме- стимом с Windows, Mac OS и Linux) редакторе Sublime Text. Скачать Sublime Text можно бесплатно, однако спустя некоторое время вас попросят приобрести лицензию. На случай, если вам такой вариант не по нраву, я отобрал несколько полностью бесплатных альтернатив. Хотя в этой главе я буду ориентироваться на Sublime Text, работа с дру- гими редакторами будет не сильно отличаться — благодаря относитель- ной простоте текстовых редакторов как таковых. • Gedit — кросс-платформенный текстовый редактор, часть проекта GNOME (https://wiki.gnome.org/Apps/Gedit/). • Для Microsoft Windows хорошей альтернативой будет Notepad++ (http://notepad-plus-plus.org/). • В Mac OS вы можете воспользоваться TextWrangler (http://www.barebones.com/products/textwrangler/). Чтобы установить Sublime Text, зайдите на сайт http://www. sublimetext.com/. Инструкции по установке редактора отличаются для каждой из операционных систем, но написаны просто и понятно. В случае каких-либо проблем загляните в раздел Support («Поддержка») на сайте приложения. ПОДСВЕ ТК А СИНТАКСИС А Sublime Text будет отображать ваши программы в цвете — это называется подсветкой синтаксиса. Смысл в том, что программы легче читать, когда разные конструкции языка выделены разными цветами. Например, строки могут отображаться зеленым цветом, а ключевые слова вроде var — оранжевым. Sublime Text позволяет выбрать одну из множества схем подсветки. В этой книге используется схема IDLE — вы можете включить ее, войдя в меню Preferences Color Scheme и выбрав там IDLE, чтобы у вас в редакторе программы выглядели так же, как примеры кода в этой главе и далее. Наш первый HTML-документ Установив Sublime Text, запустите его и создайте новый файл, выбрав File New File. Затем выберите File Save, чтобы сохранить новый, пустой файл; назовите его page.html и сохраните на рабочий стол. Настало время писать HTML-код. Введите в файл page.html следую- щий текст: Page — страница |