Лабораторна робота №15
Хід роботи:
- В папці JavaScript створіть папку LR3, в створеній папці створіть документ prizvyshe.html.
- В створений документ додайте наступне:
<![CDATA[
<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.
<![CDATA[
<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>
]]>
<![CDATA[
<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>
]]>
<![CDATA[
<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>
]]>
<![CDATA[
<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>
]]>