ОткрыткиПерерожденный каталог открыток на все случаи жизни
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
JavaScript: Урок 1 - Введение в синтаксис |
В создании web-страниц есть много разных тонкостей. Но есть и три кита. Это HTML, CSS и JavaScript.
Рекомендую организовать самообразование следующим образом: как только освоите синтаксис HTML и научитесь делать примитивные странички с текстом, картинками и таблицами, сразу подключайтесь к изучению CSS. Как только поймёте, как работать с CSS, начинайте осваивать JavaScript, параллельно пополняя «словарный запас» во всех трёх языках. Думаю, что через полгода сможете построить весьма красивый и функциональный сайт.
Долго я не знал, как подступиться к JavaScript. Попадались учебники либо слишком абстрактные — теория, теория, и непонятно, как приложить её к практике, либо, наоборот, слишком конкретные: вот тебе набор готовых рецептов, бери и пользуйся, а как это всё крутится — не твоего умишки дело.
Попался мне как-то учебник Вадима Дунаева. Многие, я знаю, ругают этот учебник. Кроме того, я скачл мерзко отсканированный PDF, где вместо "()" могло оказаться, например, "Q", а латинские буквы в кодах заменены (местами!) аналогичными русскими, из-за чего эти коды не работают. В общем, пришлось попыхтеть. И, честно скажу, если бы я до этого ничего не читал про JavaScript, то в этих ошибках бы не разобрался и присоединился бы к числу ругателей. Но я тогда сидел без работы, было время вникнуть, и учебник мне понравился. Но он очень подробный и рассчитан на людей, которые уже с программированием соприкасались.
Так вот, я хочу попробовать убить двух зайцев. Написать нечто понятное для любого чайника и в то же время конструктивно-познавательное. Чтобы этот чайник на основе моих советов мог написать пусть простой, но полностью оригинальный скрипт.
Итак:
Вы наверняка видели в HTML-кодах такие тэги:
| <script> <!-- здесь какая-то непонятная абракадабра --> </script> |
Вот эта абракадабра между тэгами и есть скрипт.
Сам тэг <script> относится к языку HTML, и у него могут быть следующие атрибуты:
| <script language="javascript"> <!-- код скрипта --> </script> |
| <script type="text/javascript"> <!-- код скрипта --> </script> |
Атрибут type, который указывает на тип текста: text/javascript. Он появился в версии HTML 4.0. Его-то я и рекомендую использовать.
Прежде чем перейти к атрибуту src, выясним, в какие разделы кода HTML можно вставлять скрипты.
В любые. Но с умом.
Часто в скрипте указывается вывод конкретного текста, что называется, здесь и сейчас. Такой скрипт вставляется прямо в <body>, «на место происшествия».
Бывают скрипты с объявлениями переменных, которые могут быть использованы в других скриптах на странице, с функциями, которые можно вызвать из любого места кода HTML. Такие скрипты разумнее всего помещать между тэгами <head> и </head>.
Но можно сделать и так, чтобы использовать скрипт сразу на нескольких web-страницах. Для этого его код нужно записать в отдельный файл с расширением .js (например, myscript_1.js). Тэги <script> и </script> писать в нём уже не надо.
И вот тогда-то, для вызова скрипта с web-страницы, нам и понадобится атрибут src. Работает он так же, как и аналогичный атрибут тэга <img>:
| <script type="text/javascript" src="scripts/myscript_1.js"></script> |
Вот таким образом и помещается на разные страницы одна и та же шапка или меню, записанные в файле скрипта. Особенно это выручает на тех хостингах, где SSI не проходит.
Можно также вставлять маленькие скрипты в некоторые атрибуты тэгов HTML, но об этом — чуть позже.
Говорят, остались ещё такие браузеры, которые не понимают скриптов. Встречаются и маньяки-пользователи, которые настолько задвинуты на безопасности, что отключают скрипты. В этой ситуации скрипт выполняться не будет, но код его, та самая «абракадабра», просто вывалится на экран.
Так вот, чтобы не вываливалась, мы заключаем её в HTML-комментарии.
| <script type="text/javascript"> <!-- Код скрипта // --> </script> |
Ммм... а что это за два слэша перед закрытием комментария?
Закрывающий комментарий находится уже в «теле» скрипта. А JavaScript не понимает этих корявых HTML'ских скобок, для него это инородное тело, генерирующее ошибку. Значит, нужно скрыть этот закрывающий тэг от скрипта, поместив его как комментарий JavaScript. У JavaScript комментарии выглядят несколько изящнее: //. После этого знака скрипт не видит закрывающую скобку HTML, а HTML благополучно скрывает текст скрипта, и на экране не видно никаких «левых» записей.
Раз уж мы коснулись комментариев, то надо сказать, что в JavaScript они имеют две формы — такие же, как в C и C++ (а кстати и в CSS тоже).
| // Эта форма комментария // действует только на одну строку, // то есть на каждой новой строке // нужно выставлять знак комментария. А это уже код скрипта... /* А эта форма комментария действует на сколько угодно строк до тех пор, пока не натолкнётся на закрывающий значок, зеркально отражающий начальный. */ А теперь опять код скрипта... |
Не путайте комментарии HTML и комментарии JavaScript! Это разные языки, хотя и сосуществуют «в одном флаконе». Или, точнее, в одной банке. Как пауки...
Вернёмся к проблеме ветхих браузеров. Допустим, с помощью JavaScript Вы сделали из двух картинок что-то вроде анимированного баннера. Тогда Вы можете порадовать пользователей «убогих» браузеров (а Вы, я надеюсь, не полностью лишены альтруизма) лицезрением хотя бы одной из этих картинок с помощью тэга <noscript>:
| <script type="text/javascript"> <!-- Код Вашего баннера // --> </script> <noscript> <img src="одна_из_картинок.gif"> </noscript> |
Возможно, существуют какие-то специальные редакторы для JavaScript. Я таких не встречал да и не слишком искал. Обычно скрипты пишут в тех же редакторах, какие используют для создания web-страниц. Я, например, люблю HomeSite. Написание скрипта в этих редакторах ничем не отличается от написания его в простом блокноте, кроме подсветки кода. А она иногда очень помогает. Скачал я однажды скрипт (у какого-то немца), а он не работает. Присмотрелся к коду и увидел, что ключевое слово switch почему-то не выделено. Гляжу — а там не switch, а switsch, Donner, Wetter! Убрал буковку — и поехало.
Кстати, во всех наших примерах код выглядит именно так, как в окне HomeSite.
Следующий пример — плагиат у Дунаева. Но он настолько прост и глубок, что не могу удержаться. Я добавил сюда только некоторые детали оформления записи, чтобы объяснить заодно и их.
Сразу предупреждаю: практически этот пример абсолютно бесполезный. Но в нём сконцентрированы многие ключевые понятия языка javascript и его синтаксиса.
| <html> <head> <title>Пример 1</title> </head> <body> <script type="text/javascript"> <!-- var х = 5; var y = х + 3; alert(y); // --> </script> </body> </html> |
Если Вы скопируете этот код в чистую страницу Блокнота и сохраните её как файл.html, то при открытии файла увидите следующее:
Разберём, как это выходит.
| var х = 5; |
Здесь мы объявляем переменную x, которая равна 5. Стоп! А знаете ли Вы, что такое переменная?
Как работает компьютер? Все данные сохраняются на диске, и место, где они лежат, должно быть помечено, чтобы было ясно, где что искать. Любая программа (а скрипт — это не что иное, как маленькая программа) работает с какими-то данными. Поэтому удобно сразу «забить место» для них. Вот этим местом, этим помеченным участком памяти и становится переменная. Почему «переменная»? Потому что этот участок может заполняться разными значениями. Например, когда мы работаем с калькулятором, то числа и действия с ними, которые мы вводим, записываются программой в соответствующие переменные. А при нажатии кнопки выполнения вступает в действие алгоритм, использующий те значения, которые мы ввели.
В коде программы переменные обозначаются именами, которые мы сами для них придумываем. Для создания имён существуют определённые правила, которые в разных языках программирования могут отличаться. Те ограничения, которые будут описаны ниже, относятся конкретно к языку JavaScript.
var — ключевое слово для объявления переменной (по-английски variable).
x — имя переменной.
Ограничения: В имени переменной можно использовать только латинские буквы (любого регистра), цифры и символ подчёркивания. При этом переменная не должна начинаться с цифр. И никаких пробелов.
Правильные имена переменных:
myVar
my_var
text01
_text
button12bis
Неправильные имена переменных:
my Var
my-var
01text
текст01
Язык JavaScript чувствителен к регистру.
myvar, MyVar и myVar — разные переменные.
(Кстати, насчёт регистра. Само название языка пишется с большими J и S: JavaScript. Существует заблуждение, что именно так и надо писать это слово в тэгах HTML. Но HTML к регистру не чувствителен, поэтому там можно писать, как заблагорассудится. Я привык маленькими, как и мой любимый HomeSite, кто-то — большими.)
В этом скрипте переменной сразу при объявлении присваивается значение. Это не обязательно. Значение можно присвоить и позже. В конце строки стоит точка с запятой. Это в данном случае тоже не обязательно. Но в больших и сложных скриптах это иногда оказывается важным, поэтому я демонстрирую полную подробную запись. У Дунаева эта строка выглядит просто x = 5, явное объявление var здесь тоже не обязательно. Но (имхо) всё-таки желательно.
В следующей строке, как Вы уже можете догадаться, объявлена переменная y. Ей присвоено значение относительно уже объявленной x, на 3 больше, чем x.
А затем вызывается метод alert().
Этот метод выводит на экран окно диалога с сообщением, указанным в скобках. Это синтаксис всех методов javascript: имя метода и скобки с его содержимым.
Содержимое этого метода — значение переменной y, и в окне диалога мы увидим восьмёрку. Поняли, почему?
Раз уж мы с Вами познакомились с методом alert(), то вот его простое и полезное применение: иногда какие-то страницы сайта ещё не сделаны, а ссылки уже приготовлены. Неприятно бывает попадать на «страницу 404». Не очень также приятно ждать, пока она загрузится, а потом узнать, что раздел в разработке. Я всегда затыкаю подобные ссылки следующим образом:
| <a href="javascript: alert('Страница в разработке');">Пункт меню</a> |
Кстати, вот вам ещё один способ внедрения кода JavaScript в код HTML. Здесь он вставляется в атрибут href тэга ссылки и вводится через ключевое слово «javascript: » (с двоеточием и последующим пробелом: всегда обращайте внимание на синтаксические мелочи). Обратите также внимание на традиционные двойные кавычки значения атрибута HTML и «вложенные» одиночные кавычки в тексте самого скрипта.
Очень скоро мы узнаем и о специальных «событийных» атрибутах тэгов HTML, например, onClick, которые специально предназначены для введения кода JavaScript и не требуют ключевого слова.
Итак, мы узнали:
как объявить скрипт в документе HTML, какие формы имеют комментарии JavaScript, как объявлять переменные и давать им правильные имена, а также синтаксис методов и конкретно метод alert().
А также научились:
ставить «заглушку» на ссылку в виде сообщения alert().
http://dikarka.ru/javascript/01.shtml| Рубрики: | Полезное Уроки Javascript |
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
Tiffany1 обратиться по имени
Пятница, 14 Января 2011 г. 16:37 (ссылка)
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
