Download - Лекция # 4
![Page 1: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/1.jpg)
Электронная Россия (2002-2010), ЭР-2004
Лекция # 4
Основы использования Основы использования JavaScript JavaScript
![Page 2: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/2.jpg)
Электронная Россия (2002-2010), ЭР-2004
Function
<script language="JavaScript"> // Функция для отсылки формы на сервер function SendForm() { if( Check()) window.document.forms[0].submit; } // Функция для проверки содержимого формы function Check() { var doc = window.document;
![Page 3: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/3.jpg)
Электронная Россия (2002-2010), ЭР-2004
if( doc.forms[0].elements[0].value == '' || doc.forms[0].elements[1].value == '' || doc.forms[0].elements[2].value == '') { alert( 'Поля не могут быть пустыми'); return false; } еlse return true; }</script>
![Page 4: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/4.jpg)
Электронная Россия (2002-2010), ЭР-2004
<form name="rqform" action="request.dll/doform" method="post"><font size=4 color="#000090"> <b>Пожалуйста, введите информацию:</b> <br><br></font><table bgcolor="#fff8bd" border=0 cellspacing=0 cellpadding=1> <tr> <td><b> Фамилия</b></td> <td><input type="text" size=35 value="" name="famname">
![Page 5: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/5.jpg)
Электронная Россия (2002-2010), ЭР-2004
</tr> <tr> <td><b> Имя</b></td> <td><input type="text" size=35 value="" name="mainname"> </tr> <tr> <td><b> Отчество</b></td> <td><input type="text" size=35 value="" name="fathname"> </tr> <tr>td><b> Kaк с Вами связаться</b> </td>
![Page 6: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/6.jpg)
Электронная Россия (2002-2010), ЭР-2004
< <td><TEXTAREA name="contact" rows="5" cols="30"></TEXTAREA></td> </tr> <tr> <td width="50%" align="left"> <input type="Submit" value="Послать" onClick="SendForm()"></td> <td width=503 align right> <input type="Reset" value="Отменить" onClick="history.back(-1)"></td> </tr></table></form>
![Page 7: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/7.jpg)
Электронная Россия (2002-2010), ЭР-2004
If..else
если результат выражения имеет значение true, выполняются инструкции, расположенные в блоке if;
если результат выражения имеет значение false, выполняются инструкции, расположенные в блоке else. Если блок else не указан, выполнение программы переходит на следующий элемент после всего блокa if..else.
![Page 8: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/8.jpg)
Электронная Россия (2002-2010), ЭР-2004
if( Check()) Send(); else Clear();
![Page 9: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/9.jpg)
Электронная Россия (2002-2010), ЭР-2004
if( Check()) { alert('Отсылаем форму'); Send(); } else { alert('Очищаем форму'); Clear(); }
![Page 10: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/10.jpg)
Электронная Россия (2002-2010), ЭР-2004
function Check() { var doc = window.document; if( doc.forms[0].elements[0].value == '') { alert('Поля не могут быть пустыми'); return false; } else return true; }
![Page 11: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/11.jpg)
Электронная Россия (2002-2010), ЭР-2004
New
• для создания нового объекта Date, который является встроенным объектом языка JavaScript;
• для создания нового пользовательского объекта.
![Page 12: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/12.jpg)
Электронная Россия (2002-2010), ЭР-2004
varName = new objectName(params) • varName - имя переменной, в которой будет
храниться новая копия объекта; • objectName - имя объекта. При
использовании встроенного объекта Date используется слово Date (с большой буквы!), при использовании пользовательских объектов - имена объектов;
• params - один или более параметров, передаваемых при создании копии объекта.
![Page 13: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/13.jpg)
Электронная Россия (2002-2010), ЭР-2004
user = new someUser("Alex Fedorov");alert( user.name);function someUser(nameParam) { this.name = nameParam; return (this); }
![Page 14: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/14.jpg)
Электронная Россия (2002-2010), ЭР-2004
Return
function Check() { var doc = window.document; if( doc.forms[0].elements[0].value == '') { alert('Поля не могут быть пустыми'); return false; } else return true; }
![Page 15: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/15.jpg)
Электронная Россия (2002-2010), ЭР-2004
This
• для ссылки на текущую форму или интерфейсный элемент в обработчике события (например, onClick или onSubmit);
• для задания нового свойства в пользовательском объекте.
![Page 16: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/16.jpg)
Электронная Россия (2002-2010), ЭР-2004
<INPUТ TYPE="button" NAME="test" VALUE="Test" onClick="test(this.form)"
<INPUТ TYPE="button" NAME="test" VALUE="Test" onClick="test(this)">
![Page 17: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/17.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JS - CP1197</title><script language="JavaScript"> function myTest(obj) { alert(obj.name); return; }</script></head><body><p align="center">Пример использования ключевого слова <b>this</b>
![Page 18: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/18.jpg)
Электронная Россия (2002-2010), ЭР-2004
</p><center><form name="ThisTest"><INPUT TYPE="button" NAME="test1" VALUE="Test1" onClick="myTest(this.form)"><INPUT TYPE="button" NAME="test2" VALUE="Test2" onClick="myTest(this)"></form></center></body></html>
![Page 19: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/19.jpg)
Электронная Россия (2002-2010), ЭР-2004
Var
var VariableName;var VariableName = value;• VariableName - имя переменной; • value - значение, присваиваемое
переменной.
![Page 20: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/20.jpg)
Электронная Россия (2002-2010), ЭР-2004
var someVar = 100; function showVar() { alert( someVar); }
![Page 21: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/21.jpg)
Электронная Россия (2002-2010), ЭР-2004
var someVar = 100; function showLocalVar() { var someVar = 256; alert( 'local var = ' + someVar); showGlobalVar(); } function showGlobalVar() { alert( 'global var = ' + someVar); }
![Page 22: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/22.jpg)
Электронная Россия (2002-2010), ЭР-2004
While
loopCount = 0; while( loopCount < 10) { document.write( "LoopCount = " + loopCount + "<BR>"); loopCount++;
![Page 23: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/23.jpg)
Электронная Россия (2002-2010), ЭР-2004
With
function Show() { with( document.forms[0].elements[0]) { alert( name); alert( value); } }
![Page 24: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/24.jpg)
Электронная Россия (2002-2010), ЭР-2004
Объект Array
<html><head><title>JavaScript. 12-97</title><script language="JavaScript">// создание нового массива allStr = new Array(5);// заполнение массива allStr[0] = "Message #1"; allStr[1] = "Message #2"; allStr[2] = "Message #3"; allStr[3] = "Message #4"; allStr[4] = "Message #5";
![Page 25: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/25.jpg)
Электронная Россия (2002-2010), ЭР-2004
// функция для отображения элемента массива function showMsg(ndx) { alert(allStr[ndx]); }</script></head><-- При загрузке документа показать сообщение N4 --><body onLoad="showMsg(3);"></body></html>
![Page 26: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/26.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript. 12-97</title><script language="JavaScript">// создание нового массива и его заполнение allStr = new Array("Message #1", "Message #2", "Message #3", "Message #4", "Message #5");// функция для отображения элемента массива function showMsg(ndx) { alert(allStr[ndx]); }</script>
![Page 27: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/27.jpg)
Электронная Россия (2002-2010), ЭР-2004
</head><-- При загрузке документа показать сообщение N4 --><body onLoad="showMsg(3);"></body></html>
![Page 28: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/28.jpg)
Электронная Россия (2002-2010), ЭР-2004
Методы объекта Array
Метод Описание
joinОбъединяет все элементы массива в одну строку
reverseИзменяет порядок элементов в массиве - первый элемент становится последним, последний - первым
Sort Выполняет сортировку элементов массива
![Page 29: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/29.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript. 12-97</title><script language="JavaScript"> myArray = new Array("Mother", "Father", "Sister", "Brother", "Uncle"); function showElement(ndx) { alert(myArray[ndx]); } function showAll() {
![Page 30: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/30.jpg)
Электронная Россия (2002-2010), ЭР-2004
for( i = 0; i <= myArray.length-1; i++) { showElement(i); } }</script></head><body onLoad="showAll();"></body></html>
![Page 31: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/31.jpg)
Электронная Россия (2002-2010), ЭР-2004
function test() { alert(myArray.join()); }
<body onLoad="test();">
![Page 32: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/32.jpg)
Электронная Россия (2002-2010), ЭР-2004
function test() { alert(myArray.join(" _|_ ")); }
![Page 33: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/33.jpg)
Электронная Россия (2002-2010), ЭР-2004
function test() { myArray.reverse(); alert(myArray.join(";")); }
![Page 34: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/34.jpg)
Электронная Россия (2002-2010), ЭР-2004
function test() { myArray.sort(); alert(myArray.join(";")); }
![Page 35: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/35.jpg)
Электронная Россия (2002-2010), ЭР-2004
Создание многомерных массивов <html><head><title>JavaScript. 12-97</title></head><body><center><font size=5><b>Multidimentional Array</b></font><p><script language="JavaScript"> a = new Array(4); for( i=0; i < 4; i++) { a[i] = new Array(4); for( j=0; j < 4; j++)
![Page 36: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/36.jpg)
Электронная Россия (2002-2010), ЭР-2004
{ a[i][j] = "["+i+","+j+"]"; } } for( i=0; i < 4; i++) { str = "Row "+i+":"; for( j=0; j < 4; j++)
![Page 37: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/37.jpg)
Электронная Россия (2002-2010), ЭР-2004
{ str += a[i][j]; } document.write( str, "<br>"); }</script></center></body></html>
![Page 38: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/38.jpg)
Электронная Россия (2002-2010), ЭР-2004
Объект Boolean
bfalse = new Вoolean(false);btrue = new Вoolean(true);
![Page 39: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/39.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript 12.97</title></head><body><script language="JavaScript"> // создадим две булевых переменных bfalse = new Вoolean(false); btru = new Вoolean(true); // выведем их значения (булевы значения) document.write(bfalse.valueOf()+"<br>"); document.write(btrue.valueOf()+"<br>");
![Page 40: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/40.jpg)
Электронная Россия (2002-2010), ЭР-2004
// выведем строчные эначения document.write(bfalse.toString()+"<br>"); document.write(btrue.toString()+"<br>");</script></body></html>
![Page 41: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/41.jpg)
Электронная Россия (2002-2010), ЭР-2004
Объект Date
MyDate = new Dаtе([параметры]); • без параметров - экземпляр будет содержать
текущую дату и время. Например, today = new Date();
• строка, представляющая собой дату в следующем формате: "Месяц день, год часы:минуты:секунды". Например, someDate = new Date("May 15, 1996"). Если число часов, минут или секунд на указано, их значения равны 0;
• набор целочисленных значений для года, меснца и дня. Например, otherDay = new Date( 96, 4, 15);
• набор целочисленных значений для года, месяца, дня, часов, минут и секунд. Например, sameDay = new Date( 96, 4, 15, 15, 30, 0);
![Page 42: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/42.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript 12.97</title></head><body><center><script language="JavaScript"> today = new Date(); document.write("today="+today+"<br>"); someDate = new Date("May 16, 1996"); document.write("someDate="+someDate+"<br>");
![Page 43: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/43.jpg)
Электронная Россия (2002-2010), ЭР-2004
otherDay = new Date( 96, 4, 15); document.write("otherDay="+otherDay+"<br>"); sameDay = new Date( 96, 4, 16, 15, 30, 0); document.write("sameDay="+sameDay+"<br>");</script></center></body></html>
![Page 44: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/44.jpg)
Электронная Россия (2002-2010), ЭР-2004
Методы объекта Date
• методы установки (set) - методы для установки даты и времени у экземпляров объекта Date;
• методы определения (get) - методы для определения даты и времени у экземпляров объекта Date;
• методы преобразования (to) - методы для преобразования даты и времени в строки;
• методы для обработки даты.
![Page 45: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/45.jpg)
Электронная Россия (2002-2010), ЭР-2004
Значения объекта Date
Значение Диапазон
Число секунд и минут 0..59
Число часов 0..23
День недели 0..6
Дата 1..31
Месяц 0..11 (Январь..Декабрь)
Год Число лет с 1900
![Page 46: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/46.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript 12.97</title></head><body><center><p><script language="JavaScript"> someDate = new Date( "May 15, 1996"); document.write("someDate="+someDate+"<br>"); document.write("getDay ="+someDate.getDay()+"<br>");
![Page 47: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/47.jpg)
Электронная Россия (2002-2010), ЭР-2004
document.write("getMonth="+someDate.getMonth()+"<br>"); document.write("getYear ="+someDate.getYear()+"<br>");</script></center></body></html>
![Page 48: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/48.jpg)
Электронная Россия (2002-2010), ЭР-2004
<html><head><title>JavaScript 12.97</title></head><body><center><br><br><br><script language="JavaScript"> today = new Date(); // задать дату endYear = new Date("December 31, 1990"); // поменять год endYear.setYear(today.getYear()); // вычислить число миллисекунд в дне
![Page 49: Лекция # 4](https://reader036.vdocuments.pub/reader036/viewer/2022062807/568151ff550346895dc03fa7/html5/thumbnails/49.jpg)
Электронная Россия (2002-2010), ЭР-2004
msPerDay = 24 * 60 * 60 * 1000; // получить число дней daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; // округлить daysLeft = Math.round(daysLeft); // показать document.write("Number of days left in the year: "+daysLeft);</script></center></body></html>