|
Некоторые материалы были позаимствованы с моих любимых сайтов: ][akep.ru ][ackzona.ru |
|
|
Сегодня мы рассмотрим введение в JavaScript. JavaScript отлично дополняет html, c его помощью можно создавать интеллектуальные формы управлять слоями картинками, и делать много чего интересного! В JavaScript имеется иерархия объектов, при обращении к объекту нужно указывать все вышестоящие объекты, но при обращении к функциям иерархия не используется, например write выводит сообщение, но для обращения к этому объекту нужно указать вышестоящий объект document. Сам скрипт объявляется тегами <script></script> в параметрах не обязательно указывать language="JavaScript" так как JavaScript стоит по умолчанию, а в случае с VBS указывать язык нужно! Синтаксис JavaScript лёгкий, похож на С\С++, но менее требователен, если на одной строке один оператор, то после него не обязательно ставить точку с запятой. Тип переменной объявляется наличием, или отсутствием кавычек. Чтобы объявить что а=1, т.е цифре, нужно писать var a=1, а если мы хотим присвоить a строковое значение, то нужно взять значение в кавычки: var a="текст". Составим программу умножения двух чисел: <script> var a=2; b=4; var c=a*b document.write("В результате умножения двух чисел получено значение: ",c," ."); </script> Чтобы вывести сообщение нужно воспользоваться функцией alert например: <a href="сайт" onClick="alert('До свидания!')">Линк</a> onClick - это событие на щелчок мыши, чтобы после щелчка произошло действие, его нужно указать в параметрах т.е в скобках. Обычно это функция, которой передаётся управление. Теперь мы напишем то же самое, но исходные данные вводит юзер. Для этого мы обратимся к форме, и каким либо её полям: <script> window.status="sdfsdf"; function um() { var a = document.forma.pole1.value var b = document.forma.pole2.value document.write("В результате умножения ",a," на ", b, " получилось: ", a*b) } </script> <form name="forma"> <input type="text" name="pole1"> <input type="text" name="pole2"><> <input type="button" onClick="plus()" value="Умножить"> Здесь мы используем функцию um() для умножения двух чисел. После имени функции ставится две точки, в которых можно указывать параметры. Тело функции берётся в фигурные скобки. Здесь показана иерархия объектов JavaScript. На первом месте находится document, на втором форма, но обрати внимание, что для обращения к форме её необходимо присвоить имя, в данном случае имя - forma. С именем поля формы тоже самое. Естественно, в документе не должно быть несколько форм, полей, картинок, или других элементов с одинаковыми именами. При нажатии на кнопку умножить мы вызываем функцию um() которая умножает, и выводит результат. Как ты, наверное, уже догадался, здесь используется иерархия, и объект value - предоставляет доступ к значению выше стоящего объекта, используя это мы можем менять значение форм, или получать уже введённое в них значение. Если в скрипте набрать document.forma.pole1.value="текст" можно изменить содержимое внутри текстового поля. Используя иерархию JavaScript можно изменять и картинки. Например нам надо, чтобы при наведении курсора на картинку она изменялась. Для этого нам потребуется познакомится с двумя новыми событиями: onMouseOver - перемещение курсора в область картинки, и onMouseOut - перемещение курсора за приделы картинки. Исходник: <a href="http:\\webkill.narod.ru" onMouseOver="document.pic.src='1.gif'" onMouseOut="document.pic.src='2.gif'"> <img src="2.gif" name="pic"> </a> Наверняка гуляя по просторам Интернета ты видел в строке состояния браузера какой-нибудь текст, его можно задавать самостоятельно, это делается так: window.status="текст"; Tаким образом можно обмануть юзера, и вместо реального адреса ввести свой: <a href="pornyxa.ru" onMouseOver="window.status='http:\\google.ru'" onMouseOut="window.status=' '"> google.ru </a> <script> window.window() // IE как грохнется! </script> Учебники и более подробное описание языка смотри на моём сайте - webkill.narod.ru Вопросы по JavaScript'у можно задать на моём форуме |
|
Автор сайта - Царько Михаил |