JavaScript.2 2012 Объект окна • window.propertyName • window.methodName([parameters]) • self.propertyName • self.methodName([parameters]) • propertyName • methodName([parameters]) Создание окна • var subWindow = window.open(“define.html”,”def”,”HEIGHT= 200,WIDTH=300”) • subWindow.close() Ссылка на объекты окна <HTML><HEAD><TITLE>Window Opener and Closer</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var newWindow function makeNewWindow() { newWindow = window.open(“”,””,”HEIGHT=300,WIDTH=300”) } function closeNewWindow() { if (newWindow) { newWindow.close() newWindow = null } } </SCRIPT></HEAD> <BODY><FORM> <INPUT TYPE=”button” VALUE=”Create New Window” onClick=”makeNewWindow()”> <INPUT TYPE=”button” VALUE=”Close New Window” onClick=”closeNewWindow()”> </FORM></BODY></HTML> window.status property <A HREF=”http://home.netscape.com” onMouseOver= “window.status=’Visit the Netscape Home page (home.netscape.com)’; return true”> Netscape</A> window.alert() method • alert(“This is a JavaScript alert dialog.”) window.confirm() method • if (confirm(“Are you sure you want to start over?”)) { • location.href = “index.html” • } window.prompt() • var answer = prompt(“What is your name?”,””) • if (answer) { • alert(“Hello, “ + answer + “!”) • } The Location Object • location.href = http://www.dannyg.com • newWindow.location.href = “http://www.dannyg.com” The History Object • Window.history.go(-2) The Document Object • [window.]document.propertyName • [window.]document.methodName([parame ters]) document.forms[ ] property • document.forms.length • document.forms[0] • document.formName document.title • document.title • document.write • document.writeln document.write() <HTML><HEAD><TITLE>Writing to Same Doc</TITLE> • <SCRIPT LANGUAGE=”JavaScript”> • function reWrite() { • // assemble content for new window • var newContent = “<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>” • newContent += “<BODY BGCOLOR=’aqua’><H1>This document is brand new.</H1>” • newContent += “Click the Back button to see original document.” • newContent += “</BODY></HTML>” • // write HTML to new window document • document.write(newContent) • document.close() // close layout stream • } • </SCRIPT></HEAD> • <BODY><FORM> • <INPUT TYPE=”button” VALUE=”Replace Content” onClick=”reWrite()”> • </FORM></BODY></HTML> document.write() c другим окном • • • • • • • • • • • • • • • • • • • • • • • <HTML> <HEAD><TITLE>Writing to Subwindow</TITLE> <SCRIPT LANGUAGE=”JavaScript”> 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 = “<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>” newContent += “<BODY BGCOLOR=’coral’><H1>This document is brand new.</H1>” newContent += “</BODY></HTML>” // write HTML to new window document newWindow.document.write(newContent) newWindow.document.close() // close layout stream } </SCRIPT></HEAD> document.write() c другим окном (2) • <BODY onLoad=”makeNewWindow()”> • <FORM> • <INPUT TYPE=”button” VALUE=”Write to Subwindow” onClick=”subWrite()”> • </FORM> • </BODY> • </HTML> The Link Object • document.links[n].propertyName • <A HREF=”javascript:void functionName([parameter1]...[parameterN] )”>...</A> Задание 1. Напишите сценарий, который приветствует посетителя в строке статуса. 2. Напишите сценарий, который приветствует посетителя в заголовке окна. 3. Создайте страницу, запрашивающую у пользователя его имя в диалоговом окне и приветствующую пользователя в заголовке первого уровня <H1>. The FORM Object • document.forms[0] • document.formName Обращение к формам • document.forms[0].action • document.formName.action • document.forms[0].action = “http://www.giantco.com/cgi/login.pl” 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 = “” } } Обращение к элементам форм • • • • • • • • • • • • • • <SCRIPT LANGUAGE=”JavaScript”> function upperMe() { var field = document.forms[0].converter var upperCaseVersion = field.value.toUpperCase() field.value = upperCaseVersion } </SCRIPT> </HEAD> <BODY> <FORM onSubmit=”return false”> <INPUT TYPE=”text” NAME=”converter” VALUE=”sample” onChange=”upperMe()”> </FORM> </BODY> </HTML> Checkbox • • • • • • • • • • • • • • • • • • • • <HTML> <HEAD> <TITLE>Checkbox Inspector</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function inspectBox() { if (document.forms[0].checkThis.checked) { alert(“The box is checked.”) } else { alert(“The box is not checked at the moment.”) } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=”checkbox” NAME=”checkThis”>Check here<BR> <INPUT TYPE=”button” VALUE=”Inspect Box” onClick=”inspectBox()”> </FORM> </BODY> </HTML> Переключатели • document.forms[0].groupName.length • document.forms[0].groupName[0].checked Radio button <HTML> <HEAD><TITLE>Extracting Highlighted Radio Button</TITLE> <SCRIPT LANGUAGE=”JavaScript”> 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 + “.”) } </SCRIPT></HEAD> Radio button (2) • • • • • • • • • • • <BODY> <FORM> <B>Select your favorite Stooge:</B> <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Moe Howard” CHECKED>Moe <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Larry Fine” >Larry <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Curly Howard” >Curly<BR> <INPUT TYPE=”button” NAME=”Viewer” VALUE=”View Full Name...” onClick=”fullName()”> </FORM> </BODY> </HTML> The SELECT Object • document.form[0].selectName.selectedInd ex • document.forms[0].selectName.options[n]. text • document.forms[0].selectName.options[n]. value Использование выбора • function inspect() { • var list = document.forms[0].choices • var chosenItemText = list.options[list.selectedIndex].text • } Навигация с помощью select <HTML><HEAD> <TITLE>Select Navigation</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function goThere() { var list = document.forms[0].urlList location = list.options[list.selectedIndex].value } </SCRIPT> </HEAD><BODY> <FORM> Choose a place to go: <SELECT NAME=”urlList” onChange=”goThere()”> <OPTION SELECTED VALUE=”index.html”>Home Page <OPTION VALUE=”store.html”>Shop Our Store <OPTION VALUE=”policies.html”>Shipping Policies <OPTION VALUE=”http://www.yahoo.com”>Search the Web </SELECT> </FORM></BODY></HTML> Пример использования форм (1) <HTML><HEAD><TITLE>Beatle Picker </TITLE> <SCRIPT LANGUAGE=”JavaScript”> 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 Пример использования форм (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...”) } </SCRIPT> </HEAD> <BODY> Пример использования форм (3) <FORM onSubmit=”return false”> Choose your favorite Beatle: <INPUT TYPE=”radio” NAME=”Beatles” VALUE=”John Lennon” CHECKED>John <INPUT TYPE=”radio” NAME=”Beatles” VALUE=”Paul McCartney”>Paul <INPUT TYPE=”radio” NAME=”Beatles” VALUE=”George Harrison”>George <INPUT TYPE=”radio” NAME=”Beatles” VALUE=”Ringo Starr”>Ringo<P> Enter the name of your favorite Beatles song:<BR> <INPUT TYPE=”text” NAME=”song” VALUE = “Eleanor Rigby” onChange=”verifySong(this)”><P> <INPUT TYPE=”button” NAME=”process” VALUE=”Process Request...” onClick=”processData(this.form)”> </FORM></BODY></HTML> Проверка заполнения формы <HTML><HEAD><TITLE>Validator</TITLE> <SCRIPT LANGUAGE=”JavaScript”> 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 } </SCRIPT></HEAD> Проверка заполнения формы (2) <BODY> <FORM onSubmit=”return checkForm(this)”> Please enter all requested information:<BR> First Name:<INPUT TYPE=”text” NAME=”firstName”><BR> Last Name:<INPUT TYPE=”text” NAME=”lastName”><BR> Rank:<INPUT TYPE=”text” NAME=”rank”><BR> Serial Number:<INPUT TYPE=”text” NAME=”serialNumber”><BR> <INPUT TYPE=”submit”> </FORM> </BODY></HTML> Упражнения 1. Создайте страницу, в которой есть объект SELECT, изменяющий цвет фона на странице и переключатель, изменяющий цвет шрифта 2. Создайте 2 чекбокса, изменяющих цвет текста на странице на красный (1 –й переключатель), желтый (2 переключатель) и оранжевый (оба).