Рассылка www.mweb.ru: #4 (10) от 9го июня 2003 года.
Секреты WEB дизайна от А до Я
В этом выпуске: Что такое Java Sсript или ваш первый скрипт | Копилка Вебмастера | Наши проекты | Интересные ресурсы
Ссылки в Internet: Хостинг | Архив рассылок | Перекур | Трюки в PhotoShop | CorelDRAW | Web-мастеру | Графика | Flash | HTML | DHTML | Java | Полезные программы | Бесплатные чаты
Доброе время суток!

RUserver.ru - хостинг, который вы полюбите... Цены от $1.08/мес, ДОМЕН БЕСПЛАТНО!
Наши проекты
Xosting.ru - поисковая система предоставляет вам возможность в поиске хостинг-провайдера. Что это такое и как оно работает? Вы задаете запрос на нужную вам конфигурацию тарифного плана для вашего проекта, и система самостоятельно выберет наиболее подходящий для вас вариант. Не плетись в конце, воспользуйся этой уникальной системой сейчас!


Мир чатов! - технология скоростных чатов. Молодой и очень влиятельный проект, позволяющий всем желающим хостинг любых чатов. Отличительной чертой является высокая скорость работы и простота в управлении. К тому же помимо бесплатных чатов, которые имеют некоторые ограничения в функциональности, есть действительно шикарные предложения. Покупая коммерческий чат, вы не тратите деньги, а вкладываете в будущее развитие своего сайта в целом, ибо прекрасный чат, установленный на прекрасном сайте окупит себя очень и очень быстро. Мало того, вы уже никогда не откажетесь от такого предложения. Попробуешь раз, будешь пользоваться постоянно. Ведь это доступно каждому, и это престижно! Подробнее...


MasterWEB Club - наковальня вебмастера. Всё что нужно начинающему вебмастеру, уникальные статьи по обучению в PhotoShop, CorelDRAW, Flash, HTML, DHTML, JavaScripts, Java, а также подборка шрифтов, коллекция графики, "примочки" для Web. Подробнее...


Перекур - Это лучшее место для общения на веб-дизайнерские темы. Здесь вы можете задать интересный вопрос, получить на него не менее интересный ответ и поделиться опытом с коллегами. Что особенно приятно, у форума есть модератор - это исключает пустой треп и вездесущую рекламу в сообщениях. Общайтесь с пользой!


iLIB.ru (Internet Library) - Интернет Библиотека.
Что такое Java Sсript или ваш первый скрипт
Добрый день или добрый вечер. Я рад, что вы нашли время, чтобы приступить к изучению 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 = "Ура я создал свой первый скрипт";
12#document.write("Время:" + hours +" "+ minutes + " " + seconds +"<BR>" +moi_pervi_script);
13#</SCRIPT>
14#</BODY>
15#</HTML>

А теперь проанализируем получившееся:
В строчке 1-5 все понятно.
В 6 строчке мы начинаем наш скрипт.
В 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(); В этом же скрипте разбейте строчку "Ура я создал свой первый скрипт", на две переменные. Но при выводе текста на экран, строка должна быть как одно целое.

Удачи!!! © EASDS EASDS
Копилка Вебмастера
Копилка веб-мастера. Часть 9

Представляю вниманию читателей очередной выпуск копилки разнообразных интересных и полезных приемов в области веб-дизайна.

Вывод/сокрытие элементов Иногда постоянное присутствие HTML-формы на веб-странице бывает неоправданным, с другой стороны - трата дополнительного времени на загрузку нового (или перезагрузку старого) документа тоже не является выходом из положения. Другими словами, нужно предоставить пользователю возможность получения быстрого доступа к форме ввода информации, не вынуждая его перезагружать документ. Такой механизм можно реализовать с помощью скрытых слоев Dynamic HTML. Сначала определяем стилевой шаблон для видимого блока информации, назначив ему название класса ON (в разделе HEAD):

<style type="text/css">
<!--
.on { font-weight:bold; }
-->
</style>

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

<div id="inline">
<font id="on" class="on" style="cursor:hand;">Убрать/вызвать форму</font>
</div>

где:
div id="inline" - видимый блок с идентификатором;
font id="on" class="on" - назначение текстовому шаблону класса и идентификатора;
style="cursor:hand;" - стилевое отображение курсора мыши при наведении на блок вывода/сокрытия формы;
Далее прописываем код HTML-формы, размещая его в отдельном блоке, и присваиваем ему специальный идентификатор:

<div id="onForm"><br><form>
Логин:<br>
<input type="text" name="login" size="25"><br>
Пароль:<br>
<input type="password" name="password" size="25"><br>
<input type="submit" value="Вход">
</form></div>

Сразу после кода формы вписываем небольшой JavaScript-сценарий, отвечающий за вывод/сокрытие формы:
<script language="JavaScript">
function formOff() {
  var targetId, srcElement, targetElement;
  srcElement = window.event.srcElement;
  if (srcElement.className == "on") {

     targetId = srcElement.id + "Form";
     targetElement = document.all(targetId);
     if (targetElement.style.display == "none") {
        targetElement.style.display = "";
     } else {
        targetElement.style.display = "none";
     }
  }
}
document.onclick = formOff;
</script>
где:
function formOff() - функция сокрытия формы;
var targetId, srcElement, targetElement; - идентификационные переменные;
document.onclick = formOff; - событие, скрывающее при щелчке на видимом блоке информации форму ввода.

Это все. Теперь при загрузке документа будет появляться форма, которую можно быстро "спрятать" и (если требуется) вернуть назад в самые кратчайшие сроки - причем без дополнительной перезагрузки страницы (если немного видоизменить код скрипта, можно добиться того, чтобы по умолчанию форма не отображалась при загрузке документа, а выводилась по пользовательскому запросу - щелчком по видимому блоку информации). Кроме этого, данный механизм можно применять не только в отношении HTML-форм, но и других элементов - графики, текста и т.д.

Алексей Петюшкин
Интересные ресурсы
Всё о Macromedia Flash - уроки, исходники, статьи...
Rulz2003.H10.Ru - здесь вы найдете не только приятные сведения обо мне, но и коллекцию моих программ, которые, я считаю, должны быть на каждом современном компьютере! В дальнейшем я попробую сделать этот сайт архивом программ; как старых хороших, так и новых - еще лучших.

Хочешь опубликовать ссылку на свой сайт в этой рассылке? - прочти условия
Ведущий рассылки: Skay http://www.mweb.ru