Добрый день или добрый вечер. Я рад, что вы нашли время, чтобы приступить к изучению JavaScript(JS). С начала я расскажу, для кого эти уроки предназначены:
В первую очередь для начинающих web-дизайнеров, которые знают только HTML, а скрипты они берут с каких-нибудь сайтов, покупают диски-. Изучив все мои уроки и добросовестно выполнив все задания в конце каждой главы, они через несколько занятий сами смогут создать скрипт, который им нужен.
Так же эти уроки предназначены для тех, кто уже разбирается в JS, но что-то новое они могут найти для себя чуть-чуть попозже, через 3-5 глав.
Хватит лирических отступлений, давайте начнем. Что такое JavaScript или попросту JS - это язык программирования. Еще точнее это интерпретируемый язык, то есть компьютер распознает скрипт ( что такое скрипт я расскажу немножко попозже) построчно, а только потом, если скрипт сделан правильно, он срабатывает. JS скрипт выполняется на стороне клиента, то есть в вашем, или чьем-либо другом, браузере.
Как я и обещал, рассказываю что такое скрипт. Скрипт - это программа, которую вы пишете на JS. Так же есть такое понятие как сценарий, но это одно и то же, что и программ и скрипт.
Идем дальше, скрипт (программа, сценарий как вам угодно =) ) может располагаться в четырех местах:
· В теле документа. То есть внутри тэгов <body></body>. Если скрипт расположен здесь, то он будет выполняться при загрузке страницы в браузере.
· В заголовке. Внутри тэгов <head></head>. В основном здесь располагаются функции скриптов, о них в следующей главе, они не выполняется при загрузке, а только используются другими скриптами, вот такая вот непонятность???
· В самих тэгах HTML. Или как эти скрипты еще называются - обработчиками событий.
· В отдельном файле. JS, как и многие другие языки, позволят сохранять свои скрипты в отдельных файлах с расширением .js
Итак, мои дорогие (как говорит одна не безызвестная телеведущая) настала пора написать первый скрипт на JavaScript. Для этого нам нужно:
Создать папку "Уроки по JS" (если хотите),
нажать на правую кнопку мыши---> создать--->текстовый документ.
Что делаем дальше в самом Текстовом документе:
Файл----> Сохранить как ------> мойпервыйскрипт.html------->Сохранить
Теперь у вас в папке должно находиться два файла "Текстовый документ" и "мойпервыйскрипт".
Заходим в "мойпервыйскрипт", кстати файл "текстовый документ" можно удалить, если вам жалко места =), но лучше оставить т.к он вам потребуется для создания следующих страничек. Продолжим, в "мойпервыйскрипт" щелкаем правой кнопкой мыши и выбираем "Просмотр HTML-кода" открывается текстовый редактор теперь пишем:
ВНИМАНИЕ НЕ ПИШИТЕ 1#,2# ЭТО Я СДЕЛАЛ СПЕЦИАЛЬНО, ЧТОБЫ ВАМ БЫЛО ЛЕГЧЕ ПОНЯТЬ ПРИ РАЗБОРЕ СКРИПТА ГДЕ КАКАЯ СТРОЧКА!!!
1#<HTML>
2#<HEAD>
3#<TITLE>Мой первый скрипт</TITLE>
4#</HEAD>
5#<BODY>
6#<SCRIPT LANGUAGE=JavaScript>
7#document.write("Ура я создал свой первый скрипт");
8#</SCRIPT>
9#</BODY>
10#</HTML>
Для того чтобы, вы увидели результат, нажмем сохранить в текстовом документе, а в самом браузере нажмем кнопку обновить, ву а ля вот она наша строчка. Не забывайте, после каждого внесенного вами изменение в скрипт сохранять его, а потом нажимать кнопку обновить.
Давайте разберемся с этим скриптом, надеюсь, вы не написали 1#...., итак в строчке 1-5, для тех кто знает HTML ничего непонятного нет, а вот в строчке 6 появляется такой тэг как <SCRIPT>. Теперь при написании скрипта вы все время будете его использовать, т.к он обуславливает начало скрипта. Вы спросите, а что это такое Language=JavaScript - это показывает какой язык скриптирования =) вы будите использовать, в данном случае JavaScript
В 7 строчки мы видим нечто называемое document - это ваша страничка в браузере, после точки мы пишем действие, которое должно произойти то есть write от англ. писать. Из этого получается, что на вашей страничке должен написаться текст "Ура я создал свой первый скрипт".
Давайте, обратим внимание, что после write мы ставим скобки, а в скобках кавычки. Вообще write - это функция (вскоре вы сами поймете что это такое) и полностью она выглядит вот так - write(); То есть в скобках мы можем написать переменную (о переменных речь пойдет немного позже), но если мы в скобках ставим кавычки, JS распознает текст, введенный в кавычках, как строку, а именно как самый обыкновенный текст. Вы спросите, а что бы было, если бы я ввел строчку "Ура я создал свой первый скрипт" без кавычек??? Ничего! JS выдал бы вам ошибку.
Теперь обратим внимание на точку с запятой после закрытие скобки. Она, точка с запятой, дает понятие JS, что кончилась строка кода. Вообще, надо сказать, что JS и без точки с запятой поймет, что это конец строчки, но ставить точку с запятой в конце строчки считается хорошем стилем программирования.
В 8 строчки мы закрываем тэг script
В 9-10 ничего необычного мы уже не видим.
Перейдем к такому понятию как переменная, запомните, переменная - это что-то вроде контейнера, который хранит в себе определенную информацию. Каждая переменная имеет свое уникально имя допустим X или Y
· Переменные могут содержать все буквы алфавита, цифры, подчеркивание-
· Переменная должна начинаться или с подчеркивания или с буквы, но не с цифры!!!
· Переменный чувствительны к регистру, переменная Vana отличается от переменной vana.
· Переменная может быть сколь угодно большая, но она должна располагаться в одной строке программы.
Теперь зная все эти правила приведу вам примеры переменных:
Privet_kak_dela_vana
Total
X
_98
Еще два понятия связанных с переменной, глобальные и локальные.
Глобальные переменные - используются во всем скрипте (и других скриптах одного и того же HTML документа)
Локальные переменные - они применяются только в той функции, в которой были созданы, но, как я уже говорил, о функциях в следующем уроке.
Понятие глобальная переменная и локальная пригодятся вам в следующих уроках.
Так же очень часто перед переменными ставят var, это то же считается хорошим стилем программирования =). Но переменные var vana = 25; и vana = 25; ничем не отличаются.
Воспользовавшись знаниями по переменным, немножко переделаем "мойпервыйскрипт". Сделаем чтобы в нем отображалось текущее время.
1#<HTML>
2#<HEAD>
3#<TITLE>Мой первый скрипт</TITLE>
4#</HEAD>
5#<BODY>
6#<SCRIPT LANGUAGE=JavaScript>
7#var now = new Date();
8# var hours = now.getHours();
9#var minutes = now.getMinutes();
10#var seconds = now.getSeconds();
11#var moi_pervi_script = "Ура я создал свой первый скрипт";
В 7 строчке мы создаем переменную now и присваиваем ей текущую дату. Как мы видим, здесь появляется такая функция как Data(); В следующем она нам понадобится для создания дат-
В 8 строчке создаем переменную hours и присваиваем ей текущий час. Обратите внимание на синтаксис. Для присвоения переменной hours часа мы используем переменную now и дальше пишем такую функцию как getHours(); думаю вы догадались как переводиться эта функция??? Она возвращает нам значение текущего часа.
В 9 строчке создаем переменную minutes и присваиваем значение текущей минуты. Повторяется история с переменной hours.
В 10 строчке создаем переменную seconds и присваиваем ей значение текущей секунды.
В 11 строчке создаем переменную moi_pervi_script и присваиваем ей значение "Ура я создал свой первый скрипт". Обратите внимание, что строка "Ура я создал свой первый скрипт" в кавычках, это дает понять JS, что это просто какая-то строка, а не переменная. Что бы это у вас лучше улеглось в памяти, приведу пример document.write без кавычек.
<SCRIPT LANGUAGE=JavaScript>
1# x = "Привет Вася";
2# y = x;
document.write(y);
</SCRIPT>
Рассмотрим первую строку. Переменной X присваивается значение "Привет Вася", а во 2 - ой строке переменной Y присваивается значение переменной X, а именно "Привет Вася". И переменная Y выводится на экран.
Но вернемся к основному скрипту. В 12 строке нам встречается уже знакомая функция write(); В этой строке мы видим, что в document.write, что-то написано: какие-то +, вдруг откуда-то взялось Время:??? Объясняю, в этой функции в кавычках мы пишем строку "Время:". Надеюсь, вы поняли почему в кавычках, после этой строки стоит знак + это дает понять JS, что надо эту строку с чем-нибудь объединить. А объединяем мы ее с переменной hours, и опять, я надеюсь, что вам понятно почему БЕЗ кавычек??? Дальше опять стоит знак + теперь он объединяет переменную hours с пробелом. Это сделано для того чтобы часы, минуты и секунды не смешались в одну строчку, например, без пробела было бы так - 131225 - это один час, 12 минут и 25 секунд. И так это у нас продолжается до знака + после переменной seconds. Здесь мы видим тэг, заключенный в кавычки, надо заметить, что все тэги пишутся в кавычках!!! Ну и в самом конце мы прибавляем переменную moi_pervi_script, закрываем скобку, ставим точку с запятой.
В 13 - 15 строчке ничего непонятного не должно быть.
Вот и подошел к концу наш первый урок, и я задаю вам домашнее задание. Советую вам его сделать, если вы хотите чему-нибудь научиться. Все выполненные задания присылайте на easds@msn.com туда же можно и ваши вопросы по уроку, ну а кто уже разбирается в JS, и у него возникли вопросы по созданию своего скрипта, просьба вопросы оставлять в форуме.
Итак, ваше домашнее задание:
Модернизируйте второй скрипт так, чтобы в нем указывались еще и миллисекунды, используя при это функцию getMilliseconds(); В этом же скрипте разбейте строчку "Ура я создал свой первый скрипт", на две переменные. Но при выводе текста на экран, строка должна быть как одно целое.
