Учебник по программированию.

Учимся программировать вместе с JavaScript.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.

 


Учебник по программированию. Создание сайтов. Первые шаги.
Назад в содержание Следующий параграф

Глава I.
Обо всём понемногу.

§01. Первоначальные сведения. Первая программа.

Что такое JavaScript.

JavaScript – язык программирования, с помощью которого интернет страницы делают динамическими. Что значит динамическими? Динамическая интернет страница – страница, которая может реагировать на действия пользователя.

Вставка JavaScript кода в html документ.

Для вставки JavaScript кода в html документ существует тэг <script></script>, открывающий и закрывающий. Всё, что находится в этом тэге, браузер считает JavaScript кодом, и выполняет при отображении документа. Пример:

<script> document.write('Привет всем!'); </script>

Так же код можно поместить в отдельный файл с расширением js. Этот файл, так же как и html документ, должен быть текстовым в кодировке UTF-8. Для его подключения необходимо воспользоваться атрибутом src, которому необходимо присвоить в качестве значения url адрес js файла. Пример:

<script src = "Ex_01.js"></script>

Обратите внимание, что закрывающий тэг так же необходим. Причём при использовании атрибута src, всё что будет находиться внутри тэга script, будет игнорироваться браузером. Так же стоит отметить, что в файле js тэг <script> уже не используется. Пример будет приведён в конце параграфа.

Когда происходит выполнение кода JavaScript.

При отображении документа, браузер последовательно выводит на экран все идущие друг за другом элементы. Как только встречается тэг <script>, браузер начинает выполнять содержащийся в нём код. После его выполнения, браузер возвращается обратно к отображению последующих элементов.

Наша первая программа.

При изучении любого языка программирования, первая программа, как правило, выводит на экран строку «Hello World!». В этом учебнике не будем оригиналами и выведем строку «Привет всем!». Для этого создадим следующий Html документ:

<!DOCTYPE html> <html> <body> <script> document.write('Привет всем!'); </script> </body> </html>
Первая программа.

Примечание: здесь и далее если после кода сразу находится рисунок, значит он является результатом отображения браузером того документа, который записан в коде. В последующих примерах, если в этом не будет необходимости, тэги <!DOCTYPE html>, <html>, <body></body> и другие могут быть опущены. Другими словами в примерах будет приведена только та информация, которая относится к текущей теме.

Теперь разберём, что находится в html документе с нашей первой программой. Если вы знаете язык html и читаете данный параграф с самого начала, то вам должна быть не понятна только одна строчка:

document.write('Привет всем!');

Что в ней написано? Если называть вещи своими именами, то document – это объект; write – метод этого объекта, который вставляет то, что находится в круглых скобках в html документ; 'Привет всем!' – аргумент метода write; символ «;» в конце строчки является разделителем между инструкциями.

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

document.write(какая-либо информация) – операция, которая выводит в окно браузера какую-либо информацию, находящуюся в круглых скобках;

'Привет всем!' – просто строка, причём она должна быть обязательно заключена в одинарные кавычки из символа апостроф;

; – разделитель между операциями.

Регистр букв.

В JavaScript, в отличие от некоторых языков, регистр букв имеет значение. Т.е. если вы напишете Document.write, то браузер будет считать это другой операцией. Вероятней всего, он её просто проигнорирует, если конечно вы не напишите свою собственную операцию Document.write. Таким образом, операции document.write и Document.write в JavaScript считаются разными. Поэтому будьте внимательны и набирайте примеры из учебника именно с таким же регистром букв.

Вставка тэгов в документ.

Далее усложним нашу первую программу:

<script> document.write('Привет всем!<br>'); document.write('Привет всем ещё раз!'); </script>
Первая программа.

Думаю, здесь должно быть всё ясно. Единственное на чём стоит заострить внимание на тэге <br>, который находится во второй строчке примера. Попробуем переписать код без него:

document.write('Привет всем!'); document.write('Привет всем ещё раз!');
Первая программа.

Как видите строчка «Привет всем ещё раз!» теперь находится сразу после «Привет всем!». Почему так произошло? Дело в том, что процедура document.write вставляет информацию именно в документ, а не в окно браузера. А потом этот изменённый документ «переотображается» браузером. Поэтому во втором случае так и получилось. Тем не менее, предлагаю всё равно на данном этапе воспринимать эту процедуру так, как будто она выводит информацию в окно браузера. Только будем учитывать, что в эту информацию можно добавлять тэги, которые отображены не будут.

Присваивание значений атрибутам тэгов.

Если вы изучали Html, то вы должны знать, что значения атрибутов заключаются в одинарные или двойные кавычки. Пример:

<h1 style = "text-align:center;color:red;">Привет всем!</h1> <div style = 'background-color:gray;font-size:20pt;'>Меня зовут Куклин Денис.</div>

Для того, что бы это же самое сделать в коде JavaScript существует правило: если у вас внешние кавычки одинарные, то внутренние должны быть двойные и наоборот. Пример:

<script> document.write('<h1 style = "text-align:center;color:red;">Привет всем!</h1>'); document.write("<div style = 'background-color:gray;font-size:20pt;'>Меня зовут Куклин Денис.</div>"); </script>
Первая программа.

Как правило, одинарные кавычки используются в JavaScript коде, двойные  в html коде. В данном примере document.write('…')  это JavaScript код; <h1 style = "text-align:center;color:red;">  уже код html.

Пример кода в отдельном файле.

Как было обещано, сейчас приведём пример, в котором код JavaScript находится в отдельном файле.

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

Пример:

Ex_01.js ----------------------------------------- document.write('<h1 style = "text-align:center;color:red;">Привет всем!</h1>'); document.write('<div style = "background-color:gray;font-size:20pt;">Меня зовут Куклин Денис.</div>'); _________________________________________ Ex_01.html ----------------------------------------- <!DOCTYPE html> <html> <body> <script src = "Ex_01.js"></script> </body> </html>
Первая программа.

Как видите, результат отображения абсолютно идентичен.

Комментарии.

Тема, без которой нельзя двигаться дальше – это комментарии. Как и в любом другом языке, в код JavaScript программы можно вставлять комментарии, которые при выполнении программы будут игнорироваться браузером. Как вы сами можете догадаться, роль их заключается в том, что бы код был понятен другим программистам и вам самим по прошествии времени.

Комментарии оформляются двумя способами.

Первый способ с помощью двойной косой черты. Всё что находится после неё считается комментарием и игнорируется браузером. Таким способом можно «закомментировать» только одну строку. Пример:

//Это комментарий document.write('Привет всем!<br>');//Выводим Привет всем //в окно браузера

Второй способ с помощью определённых скобок. Открывающая скобка состоит из косой черты и звёздочки «/*», закрывающая скобка – из звёздочки и косой черты «*/». С помощью этих скобок можно «закомментировать» сразу несколько строк. Пример:

/*Всё это комментарий */

Совет.

Вероятней всего при изучении html и css эту информацию вы должны были уже узнать. Тем не менее, для тех, кто подзабыл, стоит напомнить: документ html и js должны быть в кодировке UTF-8, иначе вместо русских букв вы можете увидеть в окне браузера непонятные символы.

Отладка программ.

Любая программа, написанная любым программистом, в первоначальном виде может содержать ошибки. Из-за ошибок программа может не работать вообще или работать не корректно, т.е. давать неверный результат. Процесс исправления ошибок называется отладкой программы.

Для того, что бы этот процесс был удобным, как раз существуют интегрированные среды разработок, которые стоят определённых денег. Думаю, что на данном этапе вы будете пользоваться обычным текстовым редактором или максимум бесплатным редактором кода вроде Notepad++. Поэтому приведу ряд методов, которые позволят отлаживать ваши программы без специальной интегрированной среды разработки.

Во-первых, настоятельно рекомендую установить у себя какой-нибудь редактор кода. В нём подсвечиваются определённым цветом слова и строки, которые имеют различные назначения. Для поиска ошибок это имеет немаловажное значение.

При написании данного учебника был использован редактор кода Notepad++, который распространяется бесплатно.

Во-вторых, для поиска ошибок можно воспользоваться инструментами разработчика, которые должны быть в любом уважающем себя браузере. Например, в браузере Opera для открытия инструментов разработчика необходимо выбрать пункт в меню «Разработка->Инструменты разработчика» или воспользоваться сочетанием клавиш «Ctr+Shift+I». При этом откроется дополнительное окно, как показано в следующем примере. В этом окне выберите вкладку «Console» и в ней, при наличии ошибки в вашем коде, эта ошибка будет высвечена. Для примера напишем слово document c ошибкой:

<script> dicument.write('Привет всем'); </script>
Инструменты разработчика.

Как видите, JavaScript программа не была выполнена, а во вкладке «Console» высветилась красным шрифтом ошибка со следующим описание: «dicument is not defined». Это означает, что слово dicument не определено в JavaScript, и браузер просто не знает, что это такое.

В-третьих, для того, что бы определить в каком месте программа перестала работать, можно выводить в окно браузера какие-либо сообщения для самого себя. После того, как программа заработает, их можно будет удалить. Пример:

<script> document.write('Привет всем!'); document.write('<br>До этого места программа была выполнена.<br>'); document.wirte('Привет ещё раз!'); document.write('Привет последний раз!'); </script>
Отладка программы.

Как видите, в третьей строчке программы была допущена ошибка «wirte». Тем не менее, браузер выполнил программу до того места, где она была допущена.

Операция alert.

Ещё одна операция, которая может быть использована для отладки программы – это операция alert. Она выводит сообщение в диалоговое окно. Используется она так же, как и операция document.write, в круглых скобках, в одинарных кавычках необходимо указать строку, которую необходимо вывести в качестве сообщения.

В отличие от операции document.write, при выводе диалогового окна, выполнение программы приостанавливается до тех пор, пока окно не будет закрыто. В это диалоговое окно удобно выводить промежуточные результаты работы программы. Далее пример использования данной операции:

<script> document.write('Привет всем!'); alert('До этого места программа была выполнена.'); document.write('Привет ещё раз!'); document.write('Привет последний раз!'); </script>
Операция alert().

После нажатия на кнопку «ОК»:

Операция alert().

Задачи.

1. Создать программу на JavaScript, которая будет выводить в окно браузера вашу фамилию, имя, отчество, возраст, день рождения и т.д. Используйте различные тэги и стили для вывода. Используйте комментарии для пояснения кода.

2. С помощью операции alert вывести в диалоговое окно информацию о себе.

Назад в содержание Следующий параграф