Нижегородский файловый портал
RSS - каналы
Главное меню
Категории каталога
Мои статьи [5]
Школа покера [5]
Софт [40]
Радиолюбителям и электрикам [8]
Интернет [167]
Система [89]
Комплектующие ПК [47]
Безопасность [56]
Программирование [18]
Веб-дизайнеру [5]
Игры [6]
Полезные советы [24]
Кулинария [1]
Телефония [10]
Мобильник [17]
Планшеты [14]
Медицина [5]
Работа [4]
Домашнему мастеру [0]
Строительство и ремонт [19]
Для сада и огорода [2]
Юмор и приколы [12]
Интересное [114]
Пластики [3]
Разное [238]
Мини-чат
Правила мини-чата



Мини-чат в окне
Погода в Нижнем
Яндекс.Погода
Главная » Статьи » Веб-дизайнеру

Уроки JavaScript (Урок 1 - Введение в синтаксис)
  • как вставить скрипт в документ HTML (общие сведения);
  • комментарии в JavaScript;
  • как объявлять переменные и давать им правильные имена;
  • разбор скрипта и синтаксис методов;
  • метод alert();
  • полезная мелочь: «заглушка» на временно не работающую ссылку

В создании web-страниц есть много разных тонкостей. Но есть и три кита. Это HTML, CSS и JavaScript.

Рекомендую организовать самообразование следующим образом: как только освоите синтаксис HTML и научитесь делать примитивные странички с текстом, картинками и таблицами, сразу подключайтесь к изучению CSS. Как только поймёте, как работать с CSS, начинайте осваивать JavaScript, параллельно пополняя «словарный запас» во всех трёх языках. Думаю, что через полгода сможете построить весьма красивый и функциональный сайт.

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

Попался мне как-то учебник Вадима Дунаева. Многие, я знаю, ругают этот учебник. Кроме того, я скачал мерзко отсканированный PDF, где вместо "()" могло оказаться, например, "Q", а латинские буквы в кодах заменены (местами!) аналогичными русскими, из-за чего эти коды не работают. В общем, пришлось попыхтеть. И, честно скажу, если бы я до этого ничего не читал про JavaScript, то в этих ошибках бы не разобрался и присоединился бы к числу ругателей. Но я тогда сидел без работы, было время вникнуть и учебник мне понравился. Но он очень подробный и рассчитан на людей, которые уже с программированием соприкасались.

Так вот, я хочу попробовать убить двух зайцев. Написать нечто понятное для любого чайника и в то же время конструктивно-познавательное. Чтобы этот чайник на основе моих советов мог написать пусть простой, но полностью оригинальный скрипт. Итак:                             

Вставка в документ HTML

Вы наверняка видели в HTML-кодах такие тэги:

<script>
<!-- здесь какая-то непонятная абракадабра -->
</script>

Вот эта абракадабра между тэгами и есть скрипт.

Сам тэг <script> относится к языку HTML и у него могут быть следующие атрибуты:

  • language
  • type
  • src

<script language="javascript">
<!-- код скрипта -->
</script>

Атрибут language необязателен. Его стоит использовать либо для уточнения версии языка (javascript1.1, javascript1.2 и т.п.), либо если используешь другой язык (например, <script language=VBscript">). То есть вреда этот атрибут в любом случае не принесёт, но в стандартной ситуации он вроде как лишний.

<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. Стоп! А знаете ли Вы, что такое переменная?

Если нет, то прочитайте пояснение ниже.

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().      примерчик

По материалам сайта www.dikarka.ru
Добавил: Scaner | Просмотров: 4285 | Комментарии: 1 | Рейтинг: 5.0/5


Обратите Ваше внимание на другие статьи:

Уважаемые пользователи, пожалуйста, оставляйте комментарии! Нам очень важно Ваше мнение!
Всего комментариев: 1
26.01.2012 Спам
1. (lubava)
Спасибо за урок. Всё так доходчиво написано, простым, понятным языком. Я только начинаю изучать JavaScript, но всё, что Вы изложили в своём уроке поняла. Хотя на практике, врать не буду, ещё не применяла. smile

Добавлять комментарии могут только зарегистрированные пользователи.

    
Меню пользователя
Аватар гостя

Приветствуем Вас, Гость

Логин:
Пароль:
Поиск по сайту
Поиск по названию
Поиск по тегам
Горячие темы форума
Зарабатываем деньги
Детская игра Подарки...
Тест скорости подклю...
кое что о Windows
Кто ты, человек?
Новая валюта портала
Все о сексе
"Что мешает нам...
Культура
Афоризмы
Лучшие 13 анекдотов ...
как защитить свой ко...
поговорим о софте
восстановление данны...
Я ненавижу Дом-2
Волга-Телеком
Кулинария "Кокт...
Стол заказов
Жалобы
С Днем Победы!!!
Прикольные картинки
С праздником Пасхи !...
Статистика
Новых за месяц: 149
Новых за неделю: 42
Новых вчера: 6
Новых сегодня: 3
Всего: 5314
Из них:
Администраторов: 3
$$$-Модераторов: 1
Модераторов: 3
Прокураторов: 3
-----------------
далее:
Проверенных: 247
Пользователей: 2884
Новичков: 1880
Заблокированных: 100
-----------------
Из всех пользователей:
Мужчин и парней: 4153
Женщин и девушек: 1160
Именинники
Поздравляем с Днем рожденья:

amidala(33), cino(26), avinb(35), vic2011(52), Aleksty(58), cerick(46), AmirZager(17), rider(30), kirikxxx(33), shadochron(34), salkovs1(63), maxmin(30), varvar06(35), rena7271(46)
Режим ON-LINE
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сейчас на портале:
Наша кнопочка
Нижегородский файловый портал

HTML-код кнопки:
Реклама
Размещение рекламы

Яндекс.Метрика
Регистрация сайта в каталогах, раскрутка и оптимизация сайта, контекстная реклама Ремонт холодильников в Нижнем Новгороде

Copyright © BankRemStroy © 2009-2017