'

Основы использования JavaScript

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

Электронная Россия (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>


Слайд 3

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


Слайд 4

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


Слайд 5

Электронная Россия (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>


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

Электронная Россия (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>


Слайд 17

Электронная Россия (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>


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

Электронная Россия (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";


Слайд 24

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


Слайд 25

Электронная Россия (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>


Слайд 26

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


Слайд 27

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


Слайд 28

Электронная Россия (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() {


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

Электронная Россия (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++)


Слайд 35

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


Слайд 36

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


Слайд 37

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


Слайд 38

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


Слайд 39

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


Слайд 40

Электронная Россия (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);


Слайд 41

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


Слайд 42

Электронная Россия (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>


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

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


Слайд 48

Электронная Россия (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>


×

HTML:





Ссылка: