У лістингах 1-6 наведені приклади простих скриптів, які ілюструють базові можливості javascript при роботі з об'єктами веб-документа. При виконанні завдань використовуйте пропоновані приклади як зразки.
WARNING: Майте на увазі, що різні браузери можуть по-різному виконувати код javascript (або навіть не виконувати його зовсім).
Лістинг 1. Обмеження кількості символів
<html>
<head>
<title> Обмеження кількості символів що вводяться </title>
<script type="text/javascript">
var maxLen = 25;
function checkMaxinput(form) {
if (form.message.value.length > maxLen)
form.message.value = form.message.value.substring(0, maxLen);
else
form.remLen.value = maxLen —
form.message.value.length;
}
</script>
</head>
<body>
<form name=myform action="somehandler.cgi">
<h1> Обмеження кількості символів що вводяться<h1>
<textarea name=message cols=28 rows=4 onKeyDown="checkMaxinput(this.form)" onKeyUp="checkMaxinput(this.form)"></textarea>
<p>Залишилось <input readonly type=text name=remLen size=3 value="25"> символів</p>
</form>
</body>
</html>
Листинг 2. Перевірка вводу
<html>
<head>
<title>Перевірка вводу
</title>
<SCRIPT type="text/javascript">
function checkIt(){
var t0=document.getElementById('first').value;
var t1=document.getElementById('second').value;
if (t0 == "" || t0 == "Имя") {
alert("Ви не вказали своє ім’я!"); return false;
}
if (t1 == "") {
alert("Ви не ввели необхідну інформацію!");
return false;
}
return true;
</SCRIPT>
</head>
<body>
<form method='get' action='somescript.php'>
<input id="first" type="text" size=60px value='Имя'>
<br>
<textarea id="second" rows=4 cols=60></textarea>
<br>
<input type='submit' onClick="if (!checkIt()){return false;}" value="ОК">
</form>
</body>
</html>
Лістинг 3. Керування вікнами (використовується об'єкт window)
<html>
<head>
<title> Відкриття/закриття нового вікна </title>
</head>
<body>
<p><a name="demoOpen" onClick="mywindow = window.open('window.htm','mywin','height=120, width=300, left=100, top=30');">Відкрити</a>
<a name="demoClose" onClick="mywindow.window.close();">Закритт</a>
</body>
</html>
Лістинг 4. Зміна оформлення
<html>
<HEAD>
<TITLE> Зміна кольору об'єкта з клацанням миші </TITLE>
</head>
<BODY>
<p onClick="fgColor='#3CB094';bgColor='#FFFF00';">CLICK 4 REDRAW</p>
</BODY>
</HTML>
Лістинг 5. Поточний час (використаний вбудований об'єкт Date)
<html>
<HEAD>
<TITLE> Годинник, що відображає поточний час </TITLE>
<script type="text/javascript">
function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString(); // 1-ий варіант document.getElementById("jsclock").innerHTML=time.toLocaleString(); // 2-ий варіант
setTimeout('fulltime()',500) }
</script>
</head>
<body>
<form name=clock>
<input type=text size=20 name=full><!-- 1-ий варіант -->
<span id="jsclock"></span><!-- 2-ий варіант -->
</form>
<script type="text/javascript"> fulltime(); </script>
</BODY>
</HTML>
Лістинг 6. Визначення браузера (використаний об'єкт navigator)
<HTML>
<HEAD>
<TITLE> Відомості про браузері </TITLE>
</HEAD>
<BODY>
<h1> Для навігації в Web ви використовуєте:</h1>
<ul>
<SCRIPT type="text/javascript">
document.write("<li>Назва програми:<b>"+navigator.appName+"</b>"); document.write("<li>Версія:<b>"+navigator.appVersion+"</b>"); document.write("<li>агент Користувача:<b>"+navigator.userAgent+"</b>"); document.write("<li>Платформа: <b>"+navigator.platform+"</b>");
</SCRIPT>
</ul>
</BODY>
</HTML>
