Секреты WEB дизайна от А до Я
|
Наши проекты |
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 - здесь вы найдете не только приятные сведения обо мне, но и коллекцию моих программ, которые, я считаю, должны быть на каждом современном компьютере! В дальнейшем я попробую сделать этот сайт архивом программ; как старых хороших, так и новых - еще лучших.
Хочешь опубликовать ссылку на свой сайт в этой рассылке? - прочти условия
|
|
|