Javascript
- это язык программирования, который встраивается в html код веб страниц для увеличения функциональности сайта. Javascript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun"s Java. Java скрипты выполняются на стороне клиента, хотя изначально Liveware - прародитель Java Script, являлся серверным языком программирования.
С помощью JavaScript создаются
красивые
интерактивные
веб страницы
, чего нельзя сделать в чистом html языке. Как правило скрипты выполняются после того, как пользователь предпримет какие-либо действия: наведение курсора, клик и т.д. Java script
может выполняться и при загрузке веб страницы.
Писать Java скрипт
можно при помощи любого текстового редактора: блокнот, Notepad++, Dreamweaver . В последнем, кроме подсветки кода и подсказок реализована проверка синтаксиса написания javascript"а. Но для этого нужно знать язык, принцип написания функций, методы, свойства и т. д. А для просмотра понадобится только браузер, способный обрабатывать ява скрипты. Например, Mozilla Firefox со встроенным дополнением Firebug, при помощи которого можно просматривать работу самого javascript"а и Microsoft Internet Explorer (так как эти два браузера по-разному воспринимают javascript).
Кстати, не все скрипты одинаково отображаются в браузерах. Большая часть Java скриптов, которые можно скачать бесплатно в интернете «браузер опера до версии 12.16» вообще не поддерживает. При этом работа JS ни как не зависит от операционной системы: будь то Андроид, iOS, Windows или другие.
Ниже представлены готовые
Java
скрипты
, которые Вы можете
скачать
совершенно
бесплатно
и украсить ими свой сайт .
Javascript-код может размещаться, как на самой странице, так и в отдельном файле.
Пример размещения готового кода Javascript внутри HTML.
Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами , которые в свою очередь обычно находятся в тегах . У тега должен быть указан единственный параметр " type" , который и указывает тип написания скрипта:
Теоретически теги могут располагаться и в теле документа (в тегах ). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов ).
Если Вы не знаете язык Java script , то Вы можете бесплатно скачать готовый код скрипта и разместить его согласно выше описанному на своём сайте.
Пример размещения готового кода Javascript в отдельном файле.Создаём в любом текстовом редакторе страницу и сохраняем её как ....... .js . Далее скачиваем готовый Javascript код и помещаем в эту страницу. Сохраняем в той же папке, где и HTML. Теперь необходимо подключить Java скрипт к html странице. Для этого в HTML файле делаем соответствующую запись:
src="путь к файлу.... .js".
Теперь остаются только в нужном месте web страницы вызвать функцию, в которой описаны необходимые действия
имя функции - выполняется при загрузке страницы
ссылка - javascript будет выполняться при клике по ссылке.
Событие onLoadСобытие происходит после загрузки какого-либо елемента страницы.
Событие onClickСобытие происходит после щелчка мыши.
Событие onMouseoverСобытие происходит после наведения курсора на определенный объект страницы.
Событие происходит в тех случаях, когда курсор мыши уходит с объекта.
JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.
Что такое JavaScript на самом деле?Примечание : Причиной, по которой мы поставили элемент в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.
Что произошло?Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.
После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) "Hello world!".
Ускоренный курс по основам языкаДавайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!
ПеременныеПримечание : JavaScript чувствителен к регистру - myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!
После объявления переменной вы можете присвоить ей значение:
MyVariable = "Bob";
Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:
Var myVariable = "Bob";
Вы можете получить значение, просто вызвав переменную по имени:
MyVariable;
После установки значения переменной вы можете изменить его позже:
Var myVariable = "Bob"; myVariable = "Steve";
Обратите внимание, что переменные имеют разные типы данных :
| Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки. | var myVariable = "Bob"; |
| Числа. Числа не имеют кавычек вокруг них. | var myVariable = 10; |
| Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках. | var myVariable = true; |
| Массив, который позволяет хранить несколько значений в одной ссылке. | var myVariable = ; Обратиться к каждому элементу массива можно так: myVariable , myVariable , и т.д. |
| В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь. | var myVariable = document.querySelector("h1"); Все это из вышеприведённых примеров. |
Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.
КомментарииВы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:
/* Всё, что находится тут - комментарий. */
Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:
// Это комментарий
ОператорыПримечание : Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите "35" + "25" в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.
УсловияУсловия - это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, if ... else . Например:
Var iceCream = "chocolate"; if (iceCream === "chocolate") { alert("Yay, I love chocolate ice cream!"); } else { alert("Awwww, but chocolate is my favorite..."); }
Выражение внутри if (...) - это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .
Функции СобытияДля создания действительной интерактивности на веб-сайте вам необходимы события. События - это структура, которая слушает то, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:
Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }
Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.
Обратите внимание, что
Document.querySelector("html").onclick = function() {};
эквивалентно
Var myHTML = document.querySelector("html"); myHTML.onclick = function() {};
Просто так короче.
Прокачаем пример нашего веб-сайтаТеперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.
Добавление смены изображенияВ этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щелкнули.
Итак, мы сохраняем ссылку на наш элемент в переменной myImage . Далее, мы создаём этой переменной обработчик события onclick с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:
Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдет на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернется - мы сохраним его с помощью . Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.
Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!
Заключение
HTML накладывает на сайт некоторые ограничения, и чтобы их преодолеть, необходимо немножко выйти за рамки языка гипертекстовой разметки. HTML нужен, в основном, для упорядочивания текста и графики на веб-странице, для связи разных файлов воедино. И он отлично справляется с этими задачами. Если вы хотите, чтобы страницы вашего сайта практически не отличались от обычных рисунков на бумаге, то языка гипертекстовой разметки, то есть HTML будет вполне достаточно.
Если же вы хотите создать нечто особенное, уникальное, что будет выделять ваш сайт и привлечет внимание пользователей, то вам стоит обратиться к языку программирования Java Script.
Например, при помощи Java Script, на сайте можно реализовать следующее:
Обработка осуществляется в веб-браузере пользователя, поэтому нет никакой нагрузки на сервер. Для добавления скриптов, написанных другими программистами большого ума не надо. Это легко сможет сделать простой разработчик веб-сайтов.
Как правило, в программный код не требуется вносить никаких изменений. В лучшем случае кое-где придется поменять имя файла или добавить URL-адреса в какой-либо перечень.
При работе с Java Script в код веб-страницы нужно добавить два компонента: сам скрипт и процедуру, которая будет его запускать.
Обычно в инструкции, которая прилагается к скрипту, содержится вся необходимая информация, касающаяся процедуры запуска скрипта.
Тело скрипта размещается в контейнерном теге , как в приведенном ниже скелете программного кода, где определяется некоторая функция whatever.
/*
Здесь обычно расположен комментарий.
*/
function whatever ()
{
А в этом месте сам программный код.
}
Допускается размещение скрипта внутри тега , а не , однако, это может оказаться рискованным. Веб-браузер должен перевести код Java Script, написанный программистом, в машинный код.
Скрипт тега обрабатывается браузером раньше, чем элементы тега . Это значит, что скрипт будет определен и готов к выполнению прежде, чем что-либо отобразится в окне веб-браузера.
Если же скрипт расположен внутри тега , может возникнуть такая ситуация, что пользователь обратится к скрипту раньше, чем он будет определен. В этом случае скрипт просто не сработает. Поэтому лучше все-таки придерживаться обычной последовательности.
На страницу также должна быть добавлена какая-то процедура, которая запустит скрипт. Она обычно находится внутри элемента .
Запуск скрипта может осуществляться различными способами, но разработчику совсем не обязательно знать их все. Каждый скрипт, взятый из интернета и переведенный в HTML-код, подразумевает свою процедуру запуска.
Примеры.
1. Активизация скрипта происходит после щелчка указателем мыши на каком-либо элементе интерфейса, когда пользователь наводит на него указатель мыши. Для этого применяется атрибут onClick.
Так в следующем фрагменте атрибут onClick используется для элемента А:
Щелкните здесь для выполнения функции whatever.
Но вообще атрибут onClick уникальный и может применяться практически для любых элементов.
2. Или скрипт может запускаться после загрузки веб-страницы в окно браузера.
Для активизации скрипта после загрузки веб-страницы используется атрибут onload элемента , как в следующем примере.
Существует огромное множество других атрибутов. Например, атрибут onMouseOver, который используется для запуска скрипта после того, как пользователь наводит указатель мыши на какой-либо элемент интерфейса. Или атрибут onMouseOut – когда пользователь убирает указатель мыши.
Функции jQuery решают очень много практических и насущных вопросов. Создание даже сложного скрипта становиться простым при использовании.
А для сайта использование jQuery открывает огромный перечень плагинов, которые можно подключить к любому ресурсу, главное, чтобы использовался Java Script. C помощью плагинов jQuery можно несколькими строчками кода реализовать
- красивые и сложные меню,
- галереи изображений,
- различные функции управления страницами.
С помощью Java Script и jQuery можно превратить даже самый простой сайт-визитку в яркий и полноценный ресурс, который будет прекрасным представителем компании на бескрайних просторах интернета.
Java Script - это просто. Часть 1
Сценарный язык JavaScript - язык для составления скриптов, разработанный фирмой Netscape, - обладает огромными возможностями для разработки интернет-приложений, работающих как на клиентской, так и на серверной стороне. Язык очень простой, и для работы с ним достаточно лишь иметь понятие основ HTML. В JavaScript есть немало интересных особенностей, и одна из них - возможность обработки не только данных, но и событий. Событие определяется как некоторое действие, выполненное в контексте браузера - например, щелчок мышью или загрузка страницы. Кроме того, JavaScript отлично интегрируется с РНР и дополняет его выполнением тех функций, которые на PHP реализовать невозможно либо трудоемко.
Первые шаги программирования в JavaScript
Код скрипта JavaScript (далее по тексту JS) размещается непосредственно в HTML-коде. JS имеет тег признака . Все, что стоит между тегами и , интерпретируется как код на этом языке. Одна из наиболее важных команд, используемых при программировании на JS - document.write()., которая нужна для того, чтобы что-либо написать в текущем документе. Чтобы не быть голословным, приведу простейший пример:
document.write("JavaScript - это просто!!!")
Наберите этот текст в "Блокноте" и сохраните с расширением HTML. Результатом выполнения этого кода будет вывод в окне браузера текста "JavaScript - это просто!!!". Вы скажете: "Может, будет, а может, и не будет", - и окажетесь правы. Если ваш браузер не поддерживает вывод JS, то вместо текста вы будете видеть полностью код. Избежать отображения кода такими браузерами можно, используя тег комментария из HTML -
Еще одной очень важной частью программирования на языке JS являются события и обработчики событий. События главным образом инициируются теми или иными действиями пользователя. Каждое действие описывает отдельный тип события. Допустим, при нажатии кнопки мыши происходит событие, называемое "Click", при пересечении указателем мыши какой-либо ссылки гипертекста - событие MouseOver. Для того, чтобы программа реагировала на эти события, используются специальные программы обработки событий. Например, программа - обработчик события нажатия кнопки мыши называется onClick и сообщает компьютеру, что нужно делать, если произойдет данное событие. Для наглядности снова создадим простой пример. Создадим форму, которая будет содержать кнопку, при нажатии на которую будет появляться выпадающее окно.
test page
Нажатие на кнопку Test Button вызывает окно с текстом "Тест выполнен!" (рис. 1). Рассмотрим подробно каждую команду этого кода.
Командой создаем некую форму с кнопкой. Атрибут onClick="alert("Тест выполнен!")" определяет, что происходит, когда нажимают на кнопку мыши. Таким образом, если имеет место событие Click, компьютер выполнит вызов alert("Тест выполнен!"). Функция alert() создает выпадающие окна. При ее вызове необходимо в скобках задать некую строку, которая появится в выпадающем окне. Как видно в коде, в конструкции alert() используются одинарные кавычки. Объясняется это тем, что в большинстве случаев имеется возможность использовать оба типа кавычек. Причем не имеет значения, в каком порядке их использовать: вначале двойные, а затем одинарные или наоборот. В нашем примере используются сначала двойные, а после одинарные кавычки, а если бы мы применили конструкцию из двух двойных кавычек -onClick="alert("Тест выполнен!")", то компьютер не смог бы разобраться в скрипте, поскольку неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет.
Итак, окно содержит текст, который был передан функции JS alert. Такое ограничение применяется по соображениям безопасности. Выпадающее окно можно создать и с помощью метода prompt() (см. рис. 2), однако в этом случае окно будет воспроизводить текст, введенный пользователем, а потому скрипт, написанный "злым хакером", может принять вид системного сообщения и попросить ввести некий пароль. В нашем случае понятно, что окно создано браузером, а не операционной системой, и его невозможно просто взять и удалить.
Очень удобным средством в JS являются функции, которые в большинстве случаев используются как способ связать вместе несколько команд. В качестве наглядного примера допустим, что вам необходимо много раз повторить какую-то последовательность текстовых строк. Используя уже полученные знания по языку JS, мы могли бы использовать команду document.write и получили бы код следующего вида:
");
");
document.write("Самая интерактивная страница
");
document.write("Java Script - это просто
");
document.write("Самая интерактивная страница
");
document.write("Java Script - это просто
");
// -->
Невооруженным глазом видно, что конструкция построена нерационально. Перестроим этот код, используя функцию:
Все команды скрипта, которые находятся внутри фигурных скобок, принадлежат созданной нами функции FreeFunc (). Теперь обе команды document.write() связаны и могут быть выполнены при вызове указанной функции. Далее мы вызываем FreeFunc() три раза сразу после того, как дали определение самой функции. Это приведет к тому, что функция выполнится трижды, т.е. три раза будут напечатаны обе строки. Изюминка заключается в том, что возможность передачи переменных при вызове функции придает скриптам подлинную гибкость. Функции могут использоваться и совместно с процедурами обработки событий. Например, можно создать функцию calc(), которая будет иметь две переменные x и y, а результат математического действия будет сохраняться в переменной result. Последней командой функции укажем alert(result). Далее функцию calc() можно вызвать при нажатии на кнопку командой onClick="calc()", в результате чего получим всплывающее окно с результатом расчета.
Работа с окнами
Еще одна возможность языка JavaScript - открытие новых окон в браузере. Кроме того, вы имеете возможность управлять самим процессом создания окна. Например, можно указать размер окна, должно ли новое окно иметь строку статуса, панель инструментов или меню. Перечень основных параметров приведен в таблице 1.
Таблица 1. Основные параметры создания окна в JS
Рассмотрим на практике пример создания нового окна в браузере:
В результате выполнения данной программы мы получим кнопку в браузере, при нажатии на которую создается новое окно с текстом (см. рис. 3).
Созданная нами функция OpenWindow() открывает новое окно браузера. Первый аргумент функции open() - пустая строка ("") - обозначает, что в данном случае мы не желаем указывать конкретный URL, а JS обязан создать дополнительно новый документ. В скрипте мы определяем переменную myWindow, при помощи которой получаем доступ к новому окну (воспользоваться для этой цели именем окна (TestWindow) в данном случае невозможно). Созданное окно обладает размерами 300x100 пикселей и не имеет ни строки статуса, ни панели инструментов, ни меню. После открытия окна внутри него открываем объект document для отображения текста. Делается это с помощью команды myWindow.document.open(). Здесь мы обращаемся к open() - методу объекта document. Эта команда не открывает нового окна - она лишь готовит document к предстоящей печати. Обязательно необходимо поставить перед document.open() приставку myWindow, чтобы получить возможность печатать в новом окне. Далее по тексту скрипта с помощью вызова document.write() формируется текст нового документа и его параметры. Для этого записываем в документ обычные теги языка HTML. При этом можно использовать абсолютно любые теги языка гипертекстовой разметки HTML. По завершении работы с командой document() необходимо ее закрыть, для чего используем команду myWindow.document.close().
При открытии окна мы должны использовать три аргумента:
myWindow= open("page.htm", "TestWindow",
"width=300,height=100,status=no,toolbar=no,menubar=no");
В данном примере мы указываем конкретный URL (page.html), а второй параметр - это имя окна. Зная имя окна, можно загрузить туда новую страницу с помощью записи
При этом нужно указать имя соответствующего окна, а если такого окна не существует, то с этим именем будет создано новое. Не допустите ошибки: переменная myWin - это вовсе не имя окна, но только с помощью этой переменной можно получить к нему доступ. Область действия этой переменной ограничивается лишь скриптом, в котором она определена. А вот имя окна (TestWindow) - уникальный идентификатор, которым можно пользоваться из любого из окон браузера. Для закрытия окна используется функция close(), а все остальное идентично работе с функцией open().
Строка состояния
В JS можно выполнять запись в строку состояния браузера - для этого достаточно лишь записать нужный текст в windows.status. Снова рассмотрим приемы работы с этой функцией на примере. Создадим скрипт, который при нажатии на кнопку будет выводить заданный текст в строке состояния, а при нажатии на вторую кнопку - стирать его:
Запустив программу в браузере, получаем форму с двумя кнопками. При нажатии на кнопку On Statbar Text в строке состояния появляется надпись "Нажата кнопка On", а при нажатии кнопки Off Statbar (Clear text) строка состояния очищается (см. рис. 4).
Итак, имеем форму с двумя кнопками, которые обе вызывают функцию statbar(). При нажатии клавиши On Statbar Text функция вызывается
следующим образом: statbar("Нажата кнопка On"). Текст в кавычках и есть тот текст, который мы увидим в строке состояния. В свою очередь, функция statbar() была объявлена следующим образом:
function statbar(txt) {
window.status = txt;}
В функции в скобках мы поместили (txt). Это значит, что строка, которую мы передали этой функции, помещается в переменную txt, а строка txt заносится в строку состояния посредством команды window.status = txt. Соответственно, удаление текста из строки состояния выполняется как запись в window.status пустой строки: (""). Использование записи текста в строку состояния безгранично. Вы можете поместить туда объяснение ссылки при наведении на нее курсором мыши, создать бегущую строку или просто использовать для отображения даты и времени.
Таймер
С помощью функции таймера (timeout) можно выполнить некоторые команды по истечении заданного времени. Продемонстрирую это в следующем скрипте:
setTimeout("alert("Добро пожаловать на страницу \"MyHome\" ")", 3000);
// -->
Ожидайте 3 секунды. Появится окно
По истечении 3-х секунд после открытия страницы появится всплывающее окно с надписью "Добро пожаловать на страницу "MyHome"" (см. рис. 5).
SetTimeout() - это метод объекта window. Он предназначен для установки интервала времени. Первый аргумент при вызове - это код JS, который следует выполнить по истечении указанного времени (в нашем случае это alert()). Второй аргумент служит для указания, когда этот код следует выполнять. При этом время указывается в миллисекундах.
Фреймы
Окно браузера может быть разбито на несколько отдельных фреймов. Фрейм в общем понятии - это поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа. Создание фреймов все же является задачей языка HTML, но мы кратко рассмотрим основные моменты этого процесса на языке JS. Для создания фреймов используются теги и . В следующем примере создадим скрипт, разделяющий страницу браузера на 5 фреймов, и загрузим в каждый из них отдельную страницу:
Результат выполнения данного скрипта представлен на рис. 6.
Во фрейме мы используем свойство rows и cols и задаем процентное соотношение занимаемого места фреймами в окне браузера. Свойство rows означает, что фреймы будут расположены друг над другом, а cols - друг напротив друга. Можно также задать размер фрейма в пикселях, для чего достаточно после числа не ставить символ %. В теге указываем ссылку на загружаемую страницу, а атрибутом name задаем уникальное имя фрейма. Имеется возможность задать толщину границы между фреймами. Для этого нужно воспользоваться в теге параметром border и задать ему какое-либо значение (по умолчанию border=0). Рассмотрим, как JavaScript "видит" фреймы, присутствующие в окне браузера. Для этого обратимся к созданному нами выше окну с фреймами. JS организует фреймы, представленные на web-странице, в виде некой иерархической структуры, на вершине которой находится окно браузера. В нашем случае оно разбито на пять фреймов. Таким образом, окно как объект является родоначальником данной иерархии, а фреймы - соответственно, его потомки. Мы присвоили этим фреймам уникальные имена: frame1, frame2… frame5. C помощью этих имен мы можем обмениваться информацией с указанными фреймами. Допустим, необходимо активировать некую ссылку в первом фрейме, однако соответствующая страница должна загружаться не в этот же фрейм, а в другой. Примером такой задачи может служить составление меню или так называемых навигационных панелей, где один фрейм всегда остается неизменным, но имеет несколько различных ссылок для навигации. Не углубляясь в изучение иерархий, создадим пример навигации по сайту с помощью фреймов. В одном фрейме мы создадим несколько ссылок. При активации какой-либо из них соответствующая страница будет помещена не в тот же самый фрейм, а в соседний. Вначале создадим сами фреймы:
Далее создадим простую HTML-страницу "start.htm":
Стартовая страница
Это стартовая страница нашего сайта
И меню панели навигации:
Страница 1
Страница 2
Карта сайта
Здесь мы видим несколько способов загрузки новой страницы в фрейм main. В первой ссылке для этой цели используется функция load():
Страница 1
В этой строке вместо явной загрузки новой страницы мы предлагаем браузеру выполнить команду на языке JavaScript - для этого используем параметр javascript вместо обычного href. Далее передаем "1.htm" в качестве аргумента функции load(), а саму функцию load() определяем следующим образом:
function load(url) {
parent.main.location.href= url;}
Внутри скобок написано url. В нашем примере это означает, что строка "1.htm" при вызове функции заносится в переменную url. И эту новую переменную теперь можно использовать при работе внутри функций load().
Во второй ссылке используется параметр target. Это уже не код JavaScript, а одна из конструкций языка HTML. Мы просто указываем имя необходимого фрейма и не обязаны ставить перед именем указанного фрейма слово parent. Если необходимо избавиться от фреймов с помощью функции load(),нужно написать в ней лишь parent.location.href= url. Результат выполнения нашего скрипта представлен на рис. 7.
Какой именно из предложенных вариантов загрузки использовать, зависит от вашего скрипта и задач, которые он должен реализовать.
На этом первое знакомство с языком JavaScript будем считать законченным. В следующих материалах мы рассмотрим предопределенные объекты и формы, создадим на странице часы, рассмотрим работу с объектом Image, а также немного затронем слои и модель событий.
Павел Кучинский, [email protected]
В интернете миллионы веб-страниц, размещенных на сайтах, которые служат разным целям. Некоторые из них привлекательные, а другие нет.
Те, которые хорошо выглядят, просты в использовании, и достаточно интерактивные, могут вовлечь вас надолго, это те сайты где используется JavaScript. Для чего же он нужен? Давайте выясним.
Это мультипарадигмальный язык, который означает, что он поддерживает объектно-ориентированное, функциональное и императивное программирование. Хотя его название наводит на ассоциации с Java, его синтаксис является производным от языка Си.
Большинство веб-страниц построены в формате HTML-кода. Это очень простой язык, который позволяет Вам добавлять различные элементы для веб-страницы, что делает ее привлекательной и повышает ее читабельность. HTML-код позволяет использовать встроенные изображения, цвета и базовые анимации для веб-страниц, повышая тем самым их внешний вид. Использование CSS (Каскадные таблицы стилей), обеспечивает большую гибкость и уменьшает общий объем кода и сложность веб-страниц. Таким образом, становится легче представить контент страницы в различных устройствах, таких как сотовые телефоны, планшеты и настольные компьютеры. JavaScript используется в основном для добавления интерактивных элементов для веб-страниц, что делает их более удобными и привлекательными. Давайте посмотрим, что он может делать и как он используется.
Что такое JavaScript?Это язык программирования, как правило, выполняется на стороне клиента. Он используется для взаимодействия с пользователем. Он также используется в разработке игр, настольных и мобильных приложений, в создании документов pdf и виджетов рабочего стола. Веб-браузеры имеют встроенную поддержку для этого языка.
Пример 1
Первый пример довольно прост и обычно используется в пунктах меню. Если вы переместите указатель мыши на определенную ссылку или кнопку меню, он меняет цвет. Это изменение цвета на действия пользователя, может быть использована для различных визуальных эффектов, а также улучшить внешний вид веб-страницы. В приведенном ниже примере, наведите курсор на кнопку по вашему выбору и увидите как она изменяется в цвете.
Красный Зеленый Синий function color(el, color) { el.style.color = "#FFFFFF"; el.style.backgroundColor = color; } function uncolor(el) { el.style.color = "#000000"; el.style.backgroundColor = "#E6E6E6"; }
Пример 2
Это прекрасный пример события. Мне попадалось нечто подобное на нескольких веб-страницах. При нажатии кнопки, на дисплее появляется сообщение. Оно может сказать вам, что делать дальше или сообщить что-то полезное. В примере ниже при нажатии на кнопку отображается, простое сообщение.
Кнопка
Хотя JavaScript широко используется, пользователь не должен полностью зависеть от него. Он имеет определенные проблемы безопасности, так как любой желающий может дублировать код. Разные браузеры интерпретируют его по-разному согласно их механизмов рендеринга, что может привести к появлению несоответствий на дисплее. Однако, несмотря на опасения, как эти, JavaScript очень популярен и широко используется по всему интернету.
