parameters
advertisement
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
переключатель) и оранжевый (оба).
