JavaScript.2 2012. Объект окна window.propertyName window.methodName([parameters]) self.propertyName self.methodName([parameters]) propertyName methodName([parameters]) - презентация

1 JavaScript

2 Объект окна window.propertyName window.methodName([parameters]) self.propertyName self.methodName([parameters]) propertyName methodName([parameters])

3 Создание окна var subWindow = window.open(define.html,def,HEIGHT =200,WIDTH=300) subWindow.close()

4 Ссылка на объекты окна Window Opener and Closer var newWindow function makeNewWindow() { newWindow = window.open(,,HEIGHT=300,WIDTH=300) } function closeNewWindow() { if (newWindow) { newWindow.close() newWindow = null }

5 window.status property Netscape

6 window.alert() method alert(This is a JavaScript alert dialog.)

7 window.confirm() method if (confirm(Are you sure you want to start over?)) { location.href = index.html }

8 window.prompt() var answer = prompt(What is your name?,) if (answer) { alert(Hello, + answer + !) }

9 The Location Object location.href = newWindow.location.href =

10 The History Object Window.history.go(-2)

11 The Document Object [window.]document.propertyName [window.]document.methodName([parame ters])

12 document.forms[ ] property document.forms.length document.forms[0] document.formName

13 document.title document.write document.writeln

14 document.write() Writing to Same Doc function reWrite() { // assemble content for new window var newContent = A New Doc newContent += This document is brand new. newContent += Click the Back button to see original document. newContent += // write HTML to new window document document.write(newContent) document.close() // close layout stream }

15 document.write() c другим окном Writing to Subwindow var newWindow function makeNewWindow() { newWindow = window.open(,,status,height=200,width=300) } function subWrite() { // make new window if someone has closed it if (newWindow.closed) { makeNewWindow() } // bring subwindow to front newWindow.focus() // assemble content for new window var newContent = A New Doc newContent += This document is brand new. newContent += // write HTML to new window document newWindow.document.write(newContent) newWindow.document.close() // close layout stream }

16 document.write() c другим окном (2)

17 The Link Object document.links[n].propertyName...

18 Задание 1.Напишите сценарий, который приветствует посетителя в строке статуса. 2.Напишите сценарий, который приветствует посетителя в заголовке окна. 3.Создайте страницу, запрашивающую у пользователя его имя в диалоговом окне и приветствующую пользователя в заголовке первого уровня.

19 The FORM Object document.forms[0] document.formName

20 Обращение к формам document.forms[0].action document.formName.action document.forms[0].action =

21 form.elements[ ] property var form = window.document.forms[0] for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].type == text) { form.elements[i].value = }

22 Обращение к элементам форм function upperMe() { var field = document.forms[0].converter var upperCaseVersion = field.value.toUpperCase() field.value = upperCaseVersion }

23 Checkbox Checkbox Inspector function inspectBox() { if (document.forms[0].checkThis.checked) { alert(The box is checked.) } else { alert(The box is not checked at the moment.) } Check here

24 Переключатели document.forms[0].groupName.length document.forms[0].groupName[0].checked

25 Radio button Extracting Highlighted Radio Button function fullName() { var form = document.forms[0] for (var i = 0; i < form.stooges.length; i++) { if (form.stooges[i].checked) { break } alert(You chose + form.stooges[i].value +.) }

26 Radio button (2) Select your favorite Stooge: Moe Larry Curly

27 The SELECT Object document.form[0].selectName.selectedInd ex document.forms[0].selectName.options[n]. text document.forms[0].selectName.options[n]. value

28 Использование выбора function inspect() { var list = document.forms[0].choices var chosenItemText = list.options[list.selectedIndex].text }

29 Навигация с помощью select Select Navigation function goThere() { var list = document.forms[0].urlList location = list.options[list.selectedIndex].value } Choose a place to go: Home Page Shop Our Store Shipping Policies Search the Web

30 Пример использования форм (1) Beatle Picker function processData(form) { for (var i = 0; i < form.Beatles.length; i++) { if (form.Beatles[i].checked) { break } var beatle = form.Beatles[i].value var song = form.song.value

31 Пример использования форм (2) var beatle = form.Beatles[i].value var song = form.song.value alert(Checking whether + song + features + beatle +...) } function verifySong(entry) { var song = entry.value alert(Checking whether + song + is a Beatles tune...) }

32 Пример использования форм (3) Choose your favorite Beatle: John Paul George Ringo Enter the name of your favorite Beatles song:

33 Проверка заполнения формы Validator function checkForm(form) { for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].value == ) { alert(Fill out ALL fields.) return false } return true }

34 Проверка заполнения формы (2) Please enter all requested information: First Name: Last Name: Rank: Serial Number:

35 Упражнения 1.Создайте страницу, в которой есть объект SELECT, изменяющий цвет фона на странице и переключатель, изменяющий цвет шрифта 2.Создайте 2 чекбокса, изменяющих цвет текста на странице на красный (1 –й переключатель), желтый (2 переключатель) и оранжевый (оба).