Вообще я последнее время часто слышу высказывания вроде, зачем мне JavaScript и без него проживу буду счастлив. Ну да без него можно жить и писать хорошие сайты, но обычно те кто это говорят либо вообще не знакомы с возможностями, либо банально не знают что с ними можно сделать (я про возможности). Мало того что JavaScript сильно помогает в создании CMS (посылка запросов с форм и т.д. ) так одна JQuery чего стоит , хотя это библиотека JavaScript и подобных примеров много. И так для чего нам JavaScript мы определитесь, теперь для кого статья. В первую очередь для студентов которые изучают по программе (или не очень хорошо изучают), а так же для все желающих кому это интересно.
Код программы JavaScript, как правило, размещается непосредственно в HTML-документах. Его можно записывать в любом месте HTML-страницы. В некоторых случаях целесообразно записать одну часть программы в одном месте (например, в заголовке – элементе <HEAD>), а другую – ниже. Это бывает необходимо, когда сначала описывается функция, а затем в теле HTML-страницы эта функция вызывается. В любом случае текст фрагмента программы заключается в элемент-контейнер <SCRIPT>. Кроме того, для того чтобы скрыть текст программы от старых версий браузера, необходимо заключить этот текст в контейнер – комментарий HTML <!--... ...-->. Но поскольку в языке JavaScript имеется оператор, начинающийся с двойного минуса, необходимо последнюю строку контейнера записать в виде комментария JavaScript: //-->. В итоге все это должно выглядеть следующим образом:
<SCRIPT LANGUAGE="JavaScript"> <!-- // Здесь пишется текст программы. //--> </SCRIPT>
Так же код JavaScript можно хранить в отдельных файлах. Определяется файл как источник операторов с помощью атрибута SRC тэга <SCRIPT> следующим обра-зом:
Внешние файлы JavaScript должны содержать только JavaScript определения функций и операторы, в них не может быть HTML-тэгов. Понятие функции Функция JavaScript – это подпрограмма, которая выполняется в ответ на возник-новение какого-либо события. Вначале функцию необходимо определить. Формальный синтаксис описания функции следующий:
Использование функций мы рассмотрим на примере открытия окон. Создание окон в JavaScript Для создания новых окон используется метод open() объекта window. Формат вы-зова данного метода имеет следующий вид:
window.open(url,<имя>,<параметры>,true|false);
Параметры вызова метода имеет следующие значения: url – строка, определяющая, адрес страницы, которая будет загружена в новое ок-но; <имя> – задает имя новому окну; <параметры> – является строкой, которая определяет отображаемые элементы в новом окне. true|false – четвертый параметр определяет, заменит ли URL текущий адрес (зна-чение true) в списке или будет добавлен в конец списка (значение false).
Ниже приведен пример кода, который открывает страницу в новом окне размером 400x300 пикселов, которое не имеет ни строки статуса, ни панели инструментов, ни меню:
<center> <input type="button" value="Открыть новое окно" onClick="OpenWin()"> </center>
</body> </html>
Ниже написанн пример динамического вывода информации на страницу.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>SCRIPT!</TITLE> </HEAD> <BODY> <SCRIPT> document.write("Эта страница написана на JavaScript!"); </SCRIPT> </BODY> </HTML>
Аналагичное можно проделать и динамически поместив это дело в функцию: <script language="JavaScript"> <!--
function NewWin() { // создать новое окно NewDoc=window.open("", "NewWindow", "width=500,height=200,status=yes,toolbar=yes,menubar=yes");
// открыть объект document для последующей печати NewDoc.document.open();
// генерировать новый документ NewDoc.document.write("<html>"); NewDoc.document.write("<head>"); NewDoc.document.write("<title>Пример динамического "); NewDoc.document.write("создания документов</title>"); NewDoc.document.write("</head>"); NewDoc.document.write("<body>"); NewDoc.document.write("<center>"); NewDoc.document.write("<font size=+3>"); NewDoc.document.write("Этот HTML-документ создан "); NewDoc.document.write("с помощью JavaScript!"); NewDoc.document.write("</font>"); NewDoc.document.write("</center>"); NewDoc.document.write("</body>"); NewDoc.document.write("</html>");
// закрыть документ - (но не окно!) NewDoc.document.close(); }
// --> </script>
Переменные Переменные в JavaScript можно не описавать в теле скрипта, однако, внутри функций их описание обязательно. Для описания переменной используется служебное слово var: var i; var j = 1 + 3 * 5; var str1, str2, str3; var x = 10, y = 20, hint = 'сделать уроки';
Существует три простых типа данных: численные, логические (булевы) и строковые (символьные), а также два состовных типа данных: объекты и массивы.
Числовые данные имеют формат с плавающей запятой и могут задаваться в произвольной форме, например, 1.349, 12, .0529, -1.5e10. Запись целых чисел возможна в восьмеричной (начинактся с O) или шестнадцатеричной (начинается с Ox) форме. Если в ходе операций возникает ошибка (например, при делении на ноль), по переменная получает значение NaN (not-a-number, не число).
Логические данные могут принимать только два значение: true (истина) и false (ложь).
Строковые данные это последовательность любых символов, цифр и специальных символов, заключенные в одинарные или двойные кавычки. Можно вкладывать кавычки одного типа в ковычки другого. Примеры строк: 'это строка', "а это еще одна 'строка'".
Объекты являются состовным типом данных. Число свойств неограниченно, можно определять новые свойства или же использовать предопределенные. Свойства имеет свое название и значение. Доступ к свойствам объекта осуществляется с помощью символа точка (.). Например, в следующей записи свойству name объекта person присваивается значение Vasya: person.name = "Vasya";
Объекты создаются с помощью оператора new: var person = new Object();
Существует ряд предопределенных объектов. Можно создать новый объект обладающий (наследующий) свойства уже существующего объекта следующим образом (на примере объекта Date): var today = new Date();
Массивы Массив представляет тип данных, к значением которых можно обратиться по индексу (числу). Для доступа к элементу массива нужно ставить в квадратных скобках индекс элемента. Имейте в виду, что первому элементу соответствует индекс - ноль. Для создания пустого массива используется оператор new Array(). Для определения размерности массива используется Array(n), где n - размерность массива. var a = new Array(); var b = new Array(5); a[0] = 10; b[0] = -5; b[1] = a[0] + b[0];
Циклы for (нач_знач; условия; приращение) //..блок операторов.. };
Данный цикл выполняется заданное количество раз. Начальные значения перемен-ных цикла задаются выражением нач_знач. Условия задают условия выхода из цикла и записываются в виде логических выражений. Выражение приращение задает изменение параметров цикла за одну итерацию. Пример:
for (k=1;k<10;k+=2) {document.writeln("<br>K=",k); }; for (i=0,j=2;i<10,j<5;i++,j++) { document.writeln("<br>I=",i," J=",j) };
Теперь поговорим о второй разновидности циклов в JavaScript - while. В принципе, цикл очень похож на for (хотя все циклы похожи). Но здесь общий вид другой: while (условие) { //код программы }
Как видите, здесь нет ни переменной для итерации, ни каких-либо действий после итерации. Отсюда следует вывод: чтобы выйти из цикла необходимо в самом цикле сделать так, чтобы "условие" стало ложным. Если это не сделать, то произойдёт зацикливание, а, следовательно, Ваш скрипт повиснет.
Условия Последним важным оператором языка является условный оператор, который по-зволяет разветвить программу в зависимости от какого-либо условия. Записывается он следующим образом:
if (условие) { // код для истинного условия } else { // код для ложного условия };
Данный оператор также может быть записан более коротко без использования else: if (условие) { // код для истинного условия }; Этот оператор используется очень часто и даже является составной частью циклов.
Объекты
Объекты бывают встроенные (внутренние) — то есть объекты языка JavaScript. К ним относятся: String — строка текста; Array — массив; Date — дата и время; Math — математические функции; Object — конструктор для создания пользовательских объектов; Дополнительные объекты — см. здесь.;
объекты браузера — создаются автоматически при загрузке документа в браузер: window — объект верхнего уровня в иерархии объектов браузера; document — содержит свойства, которые относятся к текущему HTML-документу; location — содержит свойства, описывающие местонахождение текущего документа, например, адрес URL; navigator — содержит информацию о версии браузера; history — содержит информацию обо всех ресурсах, к которым пользователь обращался во время текущего сеанса; связанные с тэгами HTML и стилями CSS — в JavaScript большинству тэгов HTML и стилей CSS соответствуют свойства объекта document, которые сами также являются объектами; пользовательские объекты — это объекты, которые создаём мы сами с помощью конструктора Object. Для этого нужно поднатореть в программировании. Надеюсь, что когда-нибудь дойдём и до них.
Методы Методы — это своеобразные «рычаги» для управления объектами. За объектами в JavaScript закреплено множество различных методов. К «высшему пилотажу» относится создание собственных методов для объектов. В коде методы указываются вместе со своими объектами (через точку): document.write("<p>Это первый абзац.</p>")
Свойства Наличие свойств — специфическая особенность объектно-ориентированных языков. Собственно, наличие свойств и делает объект объектом, «вещью», которая имеет свой «характер» и с которой можно работать. Как и методы, свойства указываются вместе с объектами, через точку. Но параметры свойств ставятся не в скобки, а через оператор назначения или равенства:
