1 / 49

Лекция # 4

Лекция # 4. Основы использования JavaScript. Function. <script language="JavaScript"> // Функция для отсылки формы на сервер function SendForm() { if( Check()) window.document.forms[0].submit; } // Функция для проверки содержимого формы function Check() {

akiva
Download Presentation

Лекция # 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Лекция # 4 Основы использования JavaScript Электронная Россия (2002-2010), ЭР-2004

  2. Function • <script language="JavaScript"> • // Функция для отсылки формы на сервер • function SendForm() • { • if( Check()) window.document.forms[0].submit; • } • // Функция для проверки содержимого формы • function Check() • { • var doc = window.document; Электронная Россия (2002-2010), ЭР-2004

  3. 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> Электронная Россия (2002-2010), ЭР-2004

  4. <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>&nbsp;Фамилия</b></td> • <td><input type="text" size=35 value="" name="famname"> Электронная Россия (2002-2010), ЭР-2004

  5. </tr> • <tr> • <td><b>&nbsp;Имя</b></td> • <td><input type="text" size=35 value="" name="mainname"> • </tr> • <tr> • <td><b>&nbsp;Отчество</b></td> • <td><input type="text" size=35 value="" name="fathname"> • </tr> • <tr> • td><b>&nbsp;KaксВамисвязаться</b>&nbsp;&nbsp;</td> Электронная Россия (2002-2010), ЭР-2004

  6. < <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> Электронная Россия (2002-2010), ЭР-2004

  7. If..else • если результат выражения имеет значение true, выполняются инструкции, расположенные в блоке if; • если результат выражения имеет значение false, выполняются инструкции, расположенные в блоке else. Если блок else не указан, выполнение программы переходит на следующий элемент после всего блокa if..else. Электронная Россия (2002-2010), ЭР-2004

  8. if( Check()) • Send(); • else • Clear(); Электронная Россия (2002-2010), ЭР-2004

  9. if( Check()) • { • alert('Отсылаемформу'); • Send(); • } • else • { • alert('Очищаемформу'); • Clear(); • } Электронная Россия (2002-2010), ЭР-2004

  10. function Check() • { • var doc = window.document; • if( doc.forms[0].elements[0].value == '') • { • alert('Поля не могут быть пустыми'); • return false; • } • else • return true; • } Электронная Россия (2002-2010), ЭР-2004

  11. New • для создания нового объекта Date, который является встроенным объектом языка JavaScript; • для создания нового пользовательского объекта. Электронная Россия (2002-2010), ЭР-2004

  12. varName = new objectName(params) • varName - имя переменной, в которой будет храниться новая копия объекта; • objectName - имя объекта. При использовании встроенного объекта Date используется слово Date (с большой буквы!), при использовании пользовательских объектов - имена объектов; • params - один или более параметров, передаваемых при создании копии объекта. Электронная Россия (2002-2010), ЭР-2004

  13. user = new someUser("Alex Fedorov"); • alert( user.name); • function someUser(nameParam) { • this.name = nameParam; • return (this); • } Электронная Россия (2002-2010), ЭР-2004

  14. Return • function Check() • { • var doc = window.document; • if( doc.forms[0].elements[0].value == '') • { • alert('Поля не могут быть пустыми'); • return false; • } • else • return true; • } Электронная Россия (2002-2010), ЭР-2004

  15. This • для ссылки на текущую форму или интерфейсный элемент в обработчике события (например, onClick или onSubmit); • для задания нового свойства в пользовательском объекте. Электронная Россия (2002-2010), ЭР-2004

  16. <INPUТ TYPE="button" NAME="test" VALUE="Test" • onClick="test(this.form)" • <INPUТ TYPE="button" NAME="test" VALUE="Test" • onClick="test(this)"> Электронная Россия (2002-2010), ЭР-2004

  17. <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> Электронная Россия (2002-2010), ЭР-2004

  18. </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> Электронная Россия (2002-2010), ЭР-2004

  19. Var • var VariableName; • var VariableName = value; • VariableName - имя переменной; • value - значение, присваиваемое переменной. Электронная Россия (2002-2010), ЭР-2004

  20. var someVar = 100; • function showVar() • { • alert( someVar); • } Электронная Россия (2002-2010), ЭР-2004

  21. var someVar = 100; • function showLocalVar() • { • var someVar = 256; • alert( 'local var = ' + someVar); • showGlobalVar(); • } • function showGlobalVar() • { • alert( 'global var = ' + someVar); • } Электронная Россия (2002-2010), ЭР-2004

  22. While • loopCount = 0; • while( loopCount < 10) • { • document.write( "LoopCount = " + loopCount + "<BR>"); • loopCount++; Электронная Россия (2002-2010), ЭР-2004

  23. With • function Show() • { • with( document.forms[0].elements[0]) • { • alert( name); • alert( value); • } • } Электронная Россия (2002-2010), ЭР-2004

  24. Объект 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"; Электронная Россия (2002-2010), ЭР-2004

  25. // функция для отображения элемента массива • function showMsg(ndx) • { • alert(allStr[ndx]); • } • </script> • </head> • <-- При загрузке документа показать сообщение N4 --> • <body onLoad="showMsg(3);"> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  26. <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> Электронная Россия (2002-2010), ЭР-2004

  27. </head> • <-- При загрузке документа показать сообщение N4 --> • <body onLoad="showMsg(3);"> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  28. Методы объекта Array Электронная Россия (2002-2010), ЭР-2004

  29. <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() • { Электронная Россия (2002-2010), ЭР-2004

  30. for( i = 0; i <= myArray.length-1; i++) • { • showElement(i); • } • } • </script> • </head> • <body onLoad="showAll();"> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  31. function test() • { • alert(myArray.join()); • } • <body onLoad="test();"> Электронная Россия (2002-2010), ЭР-2004

  32. function test() • { • alert(myArray.join(" _|_ ")); • } Электронная Россия (2002-2010), ЭР-2004

  33. function test() • { • myArray.reverse(); • alert(myArray.join(";")); • } Электронная Россия (2002-2010), ЭР-2004

  34. function test() • { • myArray.sort(); • alert(myArray.join(";")); • } Электронная Россия (2002-2010), ЭР-2004

  35. Создание многомерных массивов • <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++) Электронная Россия (2002-2010), ЭР-2004

  36. { • a[i][j] = "["+i+","+j+"]"; • } • } • for( i=0; i < 4; i++) • { • str = "Row "+i+":"; • for( j=0; j < 4; j++) Электронная Россия (2002-2010), ЭР-2004

  37. { • str += a[i][j]; • } • document.write( str, "<br>"); • } • </script> • </center> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  38. Объект Boolean • bfalse = new Вoolean(false); • btrue = new Вoolean(true); Электронная Россия (2002-2010), ЭР-2004

  39. <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>"); Электронная Россия (2002-2010), ЭР-2004

  40. // выведемстрочныеэначения • document.write(bfalse.toString()+"<br>"); • document.write(btrue.toString()+"<br>"); • </script> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  41. Объект 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); Электронная Россия (2002-2010), ЭР-2004

  42. <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>"); Электронная Россия (2002-2010), ЭР-2004

  43. 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> Электронная Россия (2002-2010), ЭР-2004

  44. Методы объекта Date • методы установки (set) - методы для установки даты и времени у экземпляров объекта Date; • методы определения (get) - методы для определения даты и времени у экземпляров объекта Date; • методы преобразования (to) - методы для преобразования даты и времени в строки; • методы для обработки даты. Электронная Россия (2002-2010), ЭР-2004

  45. Значения объекта Date Электронная Россия (2002-2010), ЭР-2004

  46. <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>"); Электронная Россия (2002-2010), ЭР-2004

  47. document.write("getMonth="+someDate.getMonth()+"<br>"); • document.write("getYear ="+someDate.getYear()+"<br>"); • </script> • </center> • </body> • </html> Электронная Россия (2002-2010), ЭР-2004

  48. <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()); • // вычислить число миллисекунд в дне Электронная Россия (2002-2010), ЭР-2004

  49. 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> Электронная Россия (2002-2010), ЭР-2004

More Related