Download presentation
Presentation is loading. Please wait.
1
JavaScript.1 2012
2
Объекты языка и браузера
Интерактивный интерфейс Поиск данных Проверка правильности введенных данных Интерактивные данные Динамический HTML
3
Стандартный документ window.document.formName.textName Window Location
4
Свойства, определяющие объект
<input type=text name=“entry” value=“zero”> document.formName.entry.value
5
Методы объекта document.orderForm.submit( )
document.orderForm.entry.select( ) document.write(“hello, world”) window.moveTo(50,100)
6
Обработчики событий События onClick Результат действия пользователя
Загрузка документа onClick
7
Размещение сценария в документе
<SCRIPT>…</SCRIPT> <SCRIPT TYPE=“text/javascript”>…</SCRIPT> (W3CDOM) <SCRIPT LANGUAGE=“JavaScript” SRC=“script.js”>…</SCRIPT>
8
Использование старых браузеров
<SCRIPT><!--…-- ></SCRIPT>
9
Операторы JavaScript Заканчиваются точкой с запятой; задачи:
Определить или инициализировать переменную Присвоить значение свойству или переменной Изменить значения свойства или переменной Запустить функциональную программу Принять решение
10
Выполнение операторов сценария
При загрузке документа Сразу после загрузки документа В ответ на действия пользователя При вызове в результате выполнения оператора другого сценария
11
Типы данных JavaScript
Строковый Числовой Булев Null Объект Функция
12
Переменные var myAge var myAge = 45 myAge = 45 Имена переменных
13
Выражения и их вычисление
var myAge = 45 var yourAge = myAge - 15
14
Конкатенация var message = 'Hi, I am ' + name + ' ' + surname + '. ';
message += 'I am ' + age + 'years old and my hair is ' + hair; alert(message);
15
Выражение document.write()
document.write(“ of “ + navigator.appName + “.”)
16
Преобразование типов данных
3 + 3 // result = 6 3 + “3” // result = “33” “3” // result = “63” var x = 5; var y = "3"; alert(x+y); y = +y;
17
Преобразование строк в числа
parseInt(“42”) // result = 42 parseInt(“42.33”) // result = 42 parseFloat(“42”) // result = 42 parseFloat(“42.33”) // result = 42.33 parseInt(“3”) // result = 9
18
Преобразование чисел в строки
(“” ) // result = “2500” (“” ).length // result = 4
19
Операторы сравнения == != > >= < <=
20
Управляющие структуры. if
if (condition) { statement[s] if true } if (myAge < 18) { alert(“Sorry, you cannot vote.”)
21
If…else if (condition) { statement[s] if true } else {
statement[s] if false }
![If…else if (condition) { statement[s] if true } else {](http://slideplayer.com/slide/12164365/72/images/21/If%E2%80%A6else+if+%28condition%29+%7B+statement%5Bs%5D+if+true+%7D+else+%7B.jpg "statement[s] if false. }")
22
If…else (2) var febDays var theYear = 1993 if (theYear % 4 == 0) {
}
23
Циклы. for for ([initial expression]; [condition]; [update expression]) { statement[s] inside loop } for (var i = startValue; i <= maxValue; i++) {
![Циклы. for for ([initial expression]; [condition]; [update expression]) { statement[s] inside loop.](http://slideplayer.com/slide/12164365/72/images/23/%D0%A6%D0%B8%D0%BA%D0%BB%D1%8B.+for+for+%28%5Binitial+expression%5D%3B+%5Bcondition%5D%3B+%5Bupdate+expression%5D%29+%7B+statement%5Bs%5D+inside+loop..jpg "} for (var i = startValue; i <= maxValue; i++) {")
24
Функции function functionName ( [parameter1]...[,parameterN] ) {
statement[s] }
![Функции function functionName ( [parameter1]...[,parameterN] ) {](http://slideplayer.com/slide/12164365/72/images/24/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8+function+functionName+%28+%5Bparameter1%5D...%5B%2CparameterN%5D+%29+%7B.jpg "statement[s] }")
25
Вызов функции обработчиком события
<HTML> <HEAD> <SCRIPT LANGUAGE=”JavaScript”> function showMsg(msg) { alert(“The button sent: “ + msg) } </SCRIPT> </HEAD> <BODY><FORM> <INPUT TYPE=”button” VALUE=”Click Me” onClick=”showMsg (‘The button has been clicked!’)”> </FORM></BODY> </HTML>
26
Параметры функций function sayHiToFirst(a, b, c) {
alert(“Say hello, “ + a) } sayHiToFirst(“Gracie”, “George”, “Harry”) sayHiToFirst(“Larry”, “Moe”, “Curly”)
27
Локальные и глобальные переменные
<HTML> <HEAD><SCRIPT LANGUAGE=”JavaScript”> var aBoy = “Charlie Brown” // global var hisDog = “Snoopy” // global function demo() { // using improper design to demonstrate a point var hisDog = “Gromit” // local version of hisDog var output = hisDog + “ does not belong to “ + aBoy + “.<BR>” document.write(output) } </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE=”JavaScript”> demo() // runs as document loads document.write(hisDog + “ belongs to “ + aBoy + “.”) </SCRIPT></BODY> </HTML>
28
Массивы Объект array - встроенный объект JavaScript.
new Array() new Array(размер) new Array(элемент0, элемент1, :, элементN) Можно определить начальную длину массива. billingMethod = new array(5) Когда вы создаете массив, все его элементы первоначально неопределены.
29
Массивы (2) var USStates = new Array(51) USStates[0] = “Alabama”
USStates[1] = “Alaska” USStates[2] = “Arizona” USStates[3] = “Arkansas” USStates[50] = “Wyoming”
![Массивы (2) var USStates = new Array(51) USStates[0] = Alabama](http://slideplayer.com/slide/12164365/72/images/29/%D0%9C%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D1%8B+%282%29+var+USStates+%3D+new+Array%2851%29+USStates%5B0%5D+%3D+Alabama.jpg "USStates[1] = Alaska USStates[2] = Arizona USStates[3] = Arkansas USStates[50] = Wyoming")
30
Обращение к элементу массива
alert(“The largest state is “ + USStates[1] + “.”)
31
Использование параллельных массивов
var stateEntered = new Array(51) stateEntered [0] = 1819 stateEntered [1] = 1959 stateEntered [2] = 1912 stateEntered [3] = 1836 ... stateEntered [50] = 1890
32
Поиск названия штата function getStateDate() {
var selectedState = document.entryForm.entry.value for ( var i = 0; i < USStates.length; i++) { if (USStates[i] == selectedState) { break } alert(“That state entered the Union in “ + stateEntered[i] + “.”)
33
Массивы объектов в документе
document.forms[0] document.forms[1] document.entryForm.entry.value document.forms[0].entry.value
34
Комментарии /* */ //
35
JavaScript validator
Similar presentations
