Лабораторна робота №15

Хід роботи:

  1. В папці JavaScript створіть папку LR3, в створеній папці створіть документ prizvyshe.html.
  2. В створений документ додайте наступне: <HTML> <HEAD> <SCRIPT> <!-- function sbros_otmetok(){ bTitle=false; bHorzLine=false; bTable=false; szColor="Red"; } function chkRadio(form,value){ szColor = value; } function btnClick(form){ var szTxt=""; document.write("<HEAD></HEAD><BODY>"); if(bTitle) document.write("<H1>Switches Checkbox and Radio</H1>"); if(bHorzLine) document.write("<HR>"); if(bTable){ document.write("<TABLE>"); szTxt=" " + bTitle; document.write("<TR><TD><FONT COLOR=" + szColor +">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>"); szTxt=" " + bHorzLine; document.write("<TR><TD><FONT COLOR= " + szColor +">HorzLine:</TD><TD>" + szTxt.bold() + "</TD></TR>"); szTxt=" " + bTable; document.write("<TR><TD><FONT COLOR=" + szColor +">Table:</TD> <TD>" + szTxt.bold() + "</TD></TR>"); document.write("<TR><TD><FONT COLOR=" + szColor +">Color:</TD><TD>" + szColor.bold() + "</TD></TR>"); document.write("</TABLE>"); } else{ document.write("<FONT COLOR=" + szColor + ">"); szTxt=" " + bTitle; document.write("<BR>Title: " + szTxt.bold()); szTxt=" " + bHorzLine; document.write("<BR>HorzLine: " + szTxt.bold()); szTxt=" " + bTable; document.write("<BR>Table: " + szTxt.bold()); document.write("<BR>Color: " + szColor.bold()); document.write("</FONT>"); } if(bHorzLine) document.write("<HR>"); document.write("</BODY>"); } // --> </SCRIPT> <TITLE>Переключатели checkbox и radio</TITLE> </HEAD> <BODY> <SCRIPT> <!-- var bTitle=false; var bHorzLine=false; var bTable=false; var szColor="Red"; // --> </SCRIPT> <FORM NAME="myform"> <B>Page elements:</B> <P><INPUT TYPE="checkbox" NAME="chkTitle" onClick="if(this.checked) {bTitle=true;}"> Show title <BR><INPUT TYPE="checkbox" NAME="HorzLine" onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines <BR><INPUT TYPE="checkbox" NAME="Table" onclick="if(this.checked) {bTable=true;}"> Table view <P><B>Text color:</B> <BR><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red" onclick="if(this.checked) {chkRadio(this.form,this.value);}"> Red <BR><INPUT TYPE="radio" NAME="Color" VALUE="Green" onClick="if(this.checked){chkRadio(this.form,this.value);}"> Green <BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue" onClick="if(this.checked){chkRadio(this.form,this.value);}"> Blue <TABLE> <TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page" onClick="btnClick(this.form);"></TD> <TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset" onClick="sbros_otmetok();"></TD></TR> </TABLE> </FORM> </BODY> </HTML>

    Листинг 3.3.

    <HTML> <HEAD> <TITLE>Работа со списками</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function Complete() { var szElement=""; szElement="Цвет: " + Sel.ColorList.options[Sel.ColorList.selectedIndex].value + " (" + Sel.ColorList.selectedIndex + ")" + "\nРазмер: " + Sel.SizeList.options[Sel.SizeList.selectedIndex].value + " (" + Sel.SizeList.selectedIndex + ")"; alert(szElement); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Работа со списками</H1> <FORM NAME="Sel"> <P>Выберите цвет:<P> <SELECT NAME="ColorList"> <OPTION VALUE=Черный SELECTED> Черный <OPTION VALUE=Белый> Белый <OPTION VALUE=Красный> Красный <OPTION VALUE=Оранжевый> Оранжевый <OPTION VALUE=Желтый> Желтый <OPTION VALUE=Зеленый> Зеленый <OPTION VALUE=Голубой> Голубой <OPTION VALUE=Синий> Синий <OPTION VALUE=Фиолетовый> Фиолетовый </SELECT> <P>Выберите размер:<P> <SELECT NAME="SizeList" SIZE=3> <OPTION VALUE=Стандартный SELECTED> Стандартный <OPTION VALUE=Большой> Большой <OPTION VALUE=Средний> Средний <OPTION VALUE=Маленький> Маленький <OPTION VALUE=Очень_маленький> Очень маленький </SELECT> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR> </TABLE> </FORM> </BODY> </HTML> <HTML> <HEAD> <TITLE>Работа с текстовыми полями</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function Complete() { var szElement=""; szElement="Фамилия: " + Sel.family.value + "\nИмя: " + Sel.Name.value + "\nТелефон: " + Sel.PhoneNumber.value + "\nВозраст: " + Sel.Age.value; alert(szElement); } function CheckAge(age) { if(age < 18) return "0"; else return age; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Заполните анкету</H1> <FORM NAME="Sel"> <TABLE> <TR><TD><B>Фамилия:</B></TD><TD><INPUT TYPE="text" NAME="family" onChange="this.value=this.value.toUpperCase()" SIZE="20" ></TD></TR> <TR><TD><B>Имя:</B></TD><TD><INPUT TYPE="text" NAME="Name" SIZE="20"></TD></TR> <TR><TD><B>Телефон:</B></TD><TD><INPUT TYPE="text" NAME="PhoneNumber" SIZE="10"></TD></TR> <TR><TD><B>Возраст:</B></TD><TD><INPUT TYPE="text" NAME="Age" VALUE="18" SIZE="4" onChange="this.value=CheckAge(this.value)" onFocus="this.select()" ></TD></TR> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR> </TABLE> </FORM> </BODY> </HTML> <HTML> <HEAD> <TITLE>Работа с многострочным текстовым полем</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var szOK = "Спасибо!\nВаша программа работает без ошибок."; var szTrouble = "К сожалению, с вашей программой у нас возникли проблемы."; var szProbList = "\nСерийный номер программы: ХХХХХХ\nДата покупки: ХХ-ХХ-ХХ"; function getDate() { var szDate = ""; szDate = new Date(); return szDate.toLocaleString() + "\n"; } function chkRadio(form,value) { if(value == "Thanks") Sel.Comment.value = getDate() + szOK; else Sel.Comment.value = getDate() + szTrouble + szProbList; } function init() { Sel.Comment.value = getDate() + szOK; } function Complete() { szMsg = Sel.Comment.value; alert(szMsg); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Пришлите ваш отзыв</H1> <FORM NAME="Sel"> <P><INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность <BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы <P><TEXTAREA NAME="Comment" ROWS="8" COLS="40" WRAP="physical"> </TEXTAREA> <P><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- init(); // --> </SCRIPT> </BODY> </HTML> <HTML> <HEAD> <TITLE>Ввод и проверка пароля</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function Complete() { if(Sel.pwd.value != Sel.pwd1.value) alert("Ошибка при вводе пароля\nПопробуйте еще раз"); else { var szId=""; var szPwd=""; szId = Sel.id.value; szPwd = Sel.pwd.value; alert("Регистрация выполнена:\n" + "ID=" + szId + "\nPassword=" + szPwd); } } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Регистрация</H1> <FORM NAME="Sel"> <TABLE> <TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text" NAME="id" onChange="this.value=this.value.toUpperCase()" SIZE="20" ></TD></TR> <TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password" NAME="pwd" SIZE="20"></TD></TR> <TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password" NAME="pwd1" SIZE="20"></TD></TR> </TABLE> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR> </TABLE> </FORM> </BODY> </HTML>