[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Все для вебмастера » JavaScript и языки разметки » Описание языка JavaScript (Описание языка JavaScript)
Описание языка JavaScript
AdminДата: Вторник, 12.07.2011, 04:54 | Сообщение # 1
Подполковник
Группа: Пользователи
Сообщений: 102
Репутация: 5
Статус: Offline
JavaScript
JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript – фирмой Netscape Communication Corporation. Первоначальное название – LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript – объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).

Тег



Атрибут LANGUAGE указывает язык программирования. Если мы имеем дело с HTML версии 4.0, то вместо LANGUAGE рекомендуется использовать атрибут TYPE в следующем виде:
Code

<SCRIPT TYPE="text/javascript">


Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа “/”, т.к. некоторые браузеры, например, Netscape Navigator рассматривает строку, состоящую только из символов “-->”, как ошибочную.

В первом примере для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка “Привет!”. Строка закрывается символом “;”, которым отделяются друг от друга все операторы JavaScript.

Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку “Привет!”. При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.

Имейте в виду, что JavaScript различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript - через backgroundColor.

Пример
Code

<img src="ba.gif" border=0
OnMouseOver="this.style.backgroundColor='red';"
OnMouseOut="this.style.backgroundColor='white';">


Здесь цвет фона объекта будет меняться с белого на красный при наведении на объект мыши:

Переменные в JavaScript
Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript.

Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.

Числа в строки интерпретатор JavaScript преобразует автоматически. Для преобразования строк в числа используют специальные функции parseInt и parseFloat.

Пример
Code

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY lang=RU>
<H1>Пример преобразования типов</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Buf="";
Buf=100+" - число сто<br>";
Buf+=(parseInt("50")+50)+" -число сто<br>";
document.write(Buf);
//-->
</SCRIPT>
</BODY>
</HTML>







Пример преобразования типов






Примеры использования простейших преобразований типов:
Code

var myVar   = "3.14159",   
     str     = ""+ myVar,//  в string
     int     = ~~myVar,  //  в integer
     float   = 1*myVar,  //  во float
     bool    = !!myVar,  //  в boolean - все непустые строки и числа кроме 0 будут true
     array   = [myVar];  //  в array


Конвертирование в даты (new Date(myVar)) и регулярные выражения (new RegExp(myVar)) нужно делать с использованием конструкторов. Для создания регулярных выражений используйте структуру: /регулярное_выражение/флаги.

Список (SELECT)
Свойства
name. Имя объекта.
selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
length. Количество элементов (строк) в списке.
options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:
value. Значение атрибута VALUE.
text. Текст, указанный после тега OPTION.
index. Индекс элемента списка.
selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.
Методы
focus( ). Передает списку фокус ввода.
blur( ). Отбирает у списка фокус ввода.
Пример
Code

<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
   sI=Test.Item.selectedIndex;
   Txt="";
   Txt="Предложено
"+Test.Item.length+" напитков"+
"\nВыбран "+Test.Item.options[sI].text+
" (value= "+Test.Item.options[sI].value+
", index= "+Test.Item.options[sI].index+")";
if(Test.Item.options[sI].defaultSelected)
    {Txt+="\nЭтот напиток выбирается по
умолчанию"}
alert(Txt);
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Работа с готовым списком</H1>
<FORM NAME="Test">
<SELECT NAME="Item" SIZE=5>
<OPTION VALUE="tea" SELECTED>Чай
<OPTION VALUE ="coffee">Кофе
<OPTION VALUE ="milk">Молоко
<OPTION VALUE ="cocoa">Какао
<OPTION VALUE ="juice">Сок
</SELECT>
<INPUT TYPE="button" VALUE="Пусть кофе"
onClick="Test.Item.options[1].selected=true;">
<INPUT TYPE="button" VALUE="Посмотрим"
onClick="btnClick();">
</FORM>
</body>
</html>








Работа с готовым списком




onClick="Test.Item.options[1].selected=true;">
onClick="btnClick();">




Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.

Пример
Code

<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H1>Динамическое заполнение списка</H1>
<FORM NAME="Sel">
<!-- Пустой список ссылок-->
<SELECT NAME="ListOfLinks">
</SELECT>
<!-- Кнопка активизации выбранной ссылки-->
<INPUT TYPE="button" VALUE="Переход"
onClick="window.location.href =
document.links[Sel.ListOfLinks.selectedIndex];">
</FORM>
<A HREF="http://vk-spam.3dn.ru"></A>
<A HREF="http://vk-spam.3dn.ru"></A>
<A HREF="http://vk-spam.3dn.ru"></A>
<A HREF="http://vk-spam.3dn.ru"></A>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Цикл по всем ссылкам
for(i=0; i<document.links.length; i++)
{
// Создание i-элемента списка и запись в него ссылки
document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false,
false);
}
// Выделение первого элемента в списке
document.Sel.ListOfLinks.selectedIndex = 0;
//-->
</SCRIPT>
</body>
</html>







Динамическое заполнение списка






onClick="window.location.href =
document.links[Sel.ListOfLinks.selectedIndex];">









Поле ввода (TEXT)
Свойства
name. Имя объекта.
defaultValue. Начальное содержимое поля.
value. Текущее содержимое поля.
Методы
focus( ). Передает полю фокус ввода.
blur( ). Отбирает у поля фокус ввода.
select( ). Выделяет содержимое поля.
Пример

Code

<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
Elem="Фамилия: " + Sel.Family.value +
"\nИмя: " + Sel.Name.value +
"\nВозраст: " + Sel.Age.value +
"\nТелефон: " + Sel.Phone.value;
alert(Elem);
}
function CheckAge(age)
{
if(age<18)
    return "18";
   else
    return
age;
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Заполните анкету</H1>
<FORM NAME="Sel">
<!-- Анкета -->
<TABLE>
<TR><TD><B>Фамилия:<B></TD><TD><INPUT NAME="Family" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Имя:<B></TD><TD><INPUT
NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Возраст:<B></TD><TD><INPUT NAME="Age" SIZE=3
VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<TR><TD><B>Телефон:<B></TD><TD><INPUT NAME="Phone"
SIZE=10></TD></TR>
</TABLE>
<!-- Кнопки готовности и сброса -->
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>








Заполните анкету









Фамилия: onBlur="this.value=this.value.toUpperCase()">
Имя: NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()">
Возраст: VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()">
Телефон: SIZE=10>








Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.

Текстовая область (TEXTAREA)
Свойства
name. Имя объекта.
defaultValue. Начальное содержимое области.
value. Текущее содержимое области.
Методы
focus( ). Передает области фокус ввода.
blur( ). Отбирает у области фокус ввода.
select( ). Выделяет содержимое области.
Пример
Code

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
OK="Тетя Эльза чувствует себя хорошо.\n                 
Юстас.";
Problem="Тетя Эльза заболела.\n                 
Юстас.";
function getDate()
{
today=new Date();
   return
today.toLocaleString()+"\n";
}
function CheckRadio(form,value)
{
if(value=="Good")
  form.Letter.value=getDate()+OK;
   else
  form.Letter.value=getDate()+Problem;
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Отправьте телеграмму</H1>
<FORM NAME="Sel">
<P><INPUT TYPE="radio" NAME="Code" VALUE="Good"
  onClick="if(this.checked) CheckRadio(this.form,this.value);">
   Явка в норме
<BR><INPUT TYPE="radio" NAME="Code" VALUE="Bad"
onClick="if(this.checked) CheckRadio(this.form,this.value);">
  Явка провалена
<P>
<TEXTAREA NAME="Letter" ROWS=3 COLS=35>
</TEXTAREA>
<INPUT TYPE="button" VALUE="Готово" onClick="alert(Sel.Letter.value);">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>








Отправьте телеграмму



onClick="if(this.checked) CheckRadio(this.form,this.value);">
Явка в норме

onClick="if(this.checked) CheckRadio(this.form,this.value);">
Явка провалена









Поле ввода пароля (PASSWORD)
Свойства
name. Имя объекта.
defaultValue. Начальное содержимое поля.
value. Текущее содержимое поля.
Методы
focus( ). Передает полю фокус ввода.
blur( ). Отбирает у поля фокус ввода.
select( ). Выделяет содержимое поля.
Пример
Code

<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.Pwd.value==Sel.Pwd1.value)
alert("Вас зарегистрировали\nID="+Sel.Id.value+"\nPassword="+Sel.Pwd.value);
else
   alert("Ошибка при вводе
пароля\nПопробуйте еще раз");
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Регистрация</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Идентификатор:<B></TD><TD><INPUT NAME="Id" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Пароль:<B></TD>
<TD><INPUT TYPE="password"
NAME="Pwd" SIZE=20
onFocus="this.select();"></TD></TR>
<TR><TD><B>Проверка пароля:<B></TD>
<TD><INPUT TYPE="password"
NAME="Pwd1" SIZE=20  
onFocus="this.select();"></TD></TR>
</TABLE>
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>




content="text/html; charset=windows-1251">



Регистрация









Идентификатор: onBlur="this.value=this.value.toUpperCase()">
Пароль: NAME="Pwd" SIZE=20
onFocus="this.select();">
Проверка пароля: NAME="Pwd1" SIZE=20
onFocus="this.select();">







Cookie
Cookie - это свойство HTML-документа. Представляет собой набор строковых параметров, каждый из которых имеет имя и значение. Сценарий JavaScript может создавать cookie для HTML-документа, определяя в нем произвольное количество параметров и задавая для них произвольные значения. После создания такой набор параметров становится принадлежностью данного конкретного HTML-документа и может быть проанализирован, изменен или удален сценарием JavaScript. Подробное описание технологии cookie.

Создание cookie
В сценарии JavaScript cookie создается с помощью свойства document.cookie. Пары имя-значение не могут содержать пробелов, запятых и точек с запятыми. Поэтому все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript имеет две функции, обрабатывающие escape-последовательности: escape и unescape.

Пара имя-значение является единственным необходимым параметром при создании cookie. Указание только пары имя-значение создает cookie, который сохраняется только на протяжении текущего сеанса брaузера. При создании cookie можно задать дату его автоматического удаления. В этой паре надо указать имя expires и значение в стандартном формате времени по Гринвичу (GMT). Простейшим способом преобразования в формат GMT является использование одного из методов встроенного класса Date: toGMTString. Кроме этого, создавая cookie, можно указать также путь (path), домен (domain) и информацию безопасности. Извлечь эту информацию нельзя.

Удаление cookie
Самый простой способ удаления cookie - установить для него такое время автоматического удаления, которое уже прошло.

Практическое применение cookie
Индивидуальная настройки параметров Web-страниц.
Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ.
Хранение текущего состояния сетевой игры.

Пример
Code

<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
function parseCookie() {
    // Разделение cookie.
    var cookieList = document.cookie.split("; ");
    // Массив для каждого cookie в cookieList.
    var cookieArray = new Array();
    for (var i = 0; i < cookieList.length; i++) {
       // Разделение пар имя-значение.
       var name = cookieList[i].split("=");
       // Декодирование и добавление в cookie-массив.
       cookieArray[unescape(name[0])] = unescape(name[1]);
    }
    return cookieArray;
}
function setCookie(visits) {
    /* Счетчик числа посещений и
определение срока хранения в 1 год. */
    var expireDate = new Date();

    // Установка даты автоматического удаления.
    expireDate.setYear(expireDate.getYear() + 1);
    // Сохранение числа посещений.
    document.cookie = "Visits=" + visits +  
    "; expires=" + expireDate.toGMTString() + ";";  
    }
    if ("" == document.cookie) {
       // Инициализация cookie.
       setCookie(1);
       document.write("<H3>Поздравляю Вас с первым посещением моего сайта.</H3>");
    }
    else {
       // Анализ cookie.
       var cookies = parseCookie();
       // Вывод приветствия, числа посещений и увеличение числа посещений на 1.
       document.write("<H3>Рад снова видеть Вас на моем сайте! Число Ваших посещений - " +
       cookies.Visits++ + " !</H3>");
       // Обновление cookie.
       setCookie(cookies.Visits);
    }
//-->
</script>
</body>
</html>
 
AdminДата: Вторник, 12.07.2011, 04:58 | Сообщение # 2
Подполковник
Группа: Пользователи
Сообщений: 102
Репутация: 5
Статус: Offline
Немного не так зделано. Но думаю будит понятно smile
 
Форум » Все для вебмастера » JavaScript и языки разметки » Описание языка JavaScript (Описание языка JavaScript)
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2025
«Обращение к пользователям»,
Использование материалов разрешено только при указании источника //vk-spam.3dn.ru.
При копировании материалов ссылка на сайт - www.vk-spam.3dn.ru обязательна.
Copyright MyCorp © 2025
.