JavaScript для новичков
ОГЛАВЛЕНИЕ
Вложения и включения
Давайте сначала рассмотрим простой пример:<html>Обычно, код JavaScript начинается с тега <script language="JavaScript"> и заканчивается </script>. Код расположен между <head> и </head>. Иногда программисты вкладывают код в теги <body>:
<head>
<title>This is a JavaScript example</title>
<script language="JavaScript">
<!--
document.write("Здравствуй мир!");
//-->
</script>
</head>
<body> Привет! </body>
</html>
<html>Почему же мы располагаем код JavaScript в пределах комментирущих символов <!-- и //-->? Это делается чтобы убедиться в том, что Script не отображается старыми обозревателями, которые не поддерживают JavaScript. Это опционально, но считается хорошим тоном. Атрибут LANGUAGE также является опциональным, но его рекомендуется использовать. Вы можете указать конкретную версию JavaScript:
<head></head>
<body>
<script>
.....// Код влюжен в теги <body>.
</script>
</body>
</html>
<script language="JavaScript1.2">Вы можете использовать другой атрибут SRC для включения внешнего файла, содержащего код JavaScript:
<script language="JavaScript" src="hello.js"></script>К примеру, указанный ниже код является кодом файла hello.js:
document.write("Здравствуй мир!")
Внешний файл является простым файлом, содержащим код JavaScript с расширением файла ".js". Учтите:- Включение внешнего файла стабильно включает функции среди платформ обозревателей 4 версии.
- Код не может включать теги <script language...> и </script>, иначе вы увидите ошибку.
write и writeln
Для того, чтобы вывести на экран текст в JavaScript вы должны использовать write() или writeln(). Вот пример:<HTML>На заметку: документный объект write написан в нижнем регистре в поскольку JavaScript чувствителен к регистру. Различие между write и writeln заключается в том, что write просто выводит текст, а writeln выводит текст с переносом на следующую строку.
<HEAD>
<TITLE> Welcome to my site</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write("Добро пожаловать!");
// -->
</SCRIPT>
</BODY>
</HTML>
Объект Document
Объект document является одним из наиболее важных объектов в JavaScript. Далее мы продемонстрируем простой код JavaScript:document.write("Привет.")
В данном коде, document - это объект. write является методом данного объекта. Давайте изучим некоторые другие методы, которыми владеет объект.lastModified
Вы всегда можете включить последнее обновление вашей страницы путем включения следующего кода:<script language="JavaScript">Все, что вам нужно сделать, это использовать свойство lastModified документа. Заметьте, что мы использовали + для связи Последнее обновление данной страницы было:: и document.lastModified
document.write("Последнее обновление данной страницы было:" + document.lastModified);
</script>
bgColor и fgColor
Давайте поиграем с bgColor и fgColor:<script>
document.bgColor="black"
document.fgColor="#336699"
</script>
Окна сообщений
alert
Существуют три окна сообщений: alert, confirm и prompt. Рассмотрим первое из них:
<body>
<script>
window.alert("Добро пожаловать на сайт!")
</script>
</body>
Вы можете расположить что угодно в пределах кавычек.
confirm
Пример окна confirm:
window.confirm("Вы уверены, что хотите завершить?")
prompt
Используется для того, чтобы позволить пользователю ввести что-либо относительно предложенного:
window.prompt("Пожалуйста, введите ваше пользовательское имя")
В указанном выше примере мы написали методы окон как window.alert(). На самом деле, мы могли написать проще:
alert()
confirm()
prompt()
Переменные и условия
Давайте изучим пример:
<script>
var x=window.confirm("Вы уверены, что хотите завершить?")
if (x)
window.alert("Спасибо.")
else
window.alert("Хороший выбор.")
</script>
Существует несколько принципов, которые вы должны знать. Во-первых, var x= является определением переменной. Если вы хотите создать переменную, то вы должны объявить переменную используя выражение var. x получит результат, а именно true или false. Затем мы используем оператор условия if else чтобы позволить скрипту выбрать между двумя вариантами, в зависимости от данного результата (условие следующего действия). Если результат равен true (то есть, пользователь нажал "ok"), "Спасибо" появится в окне сообщения. Если результатом будет false (пользователь нажал "cancel"), то появится "Хороший выбор". Вы можете создать более сложные окна используя var, if и это данные базовые методы.
<script>
var y=window.prompt("Пожалуйста, введите пользовательское имя")
window.alert(y)
</script>
Другой пример:
<html><head>
<script>
var x=confirm("Вы уверены, что хотите завершить?")
if (!x)
window.location="http://www.yahoo.com"
</script>
</head>
<body>
Welcome to my website!.
</body></html>
Если вы нажмете "cancel", то вас перешлют на страницу yahoo, а нажатие ok продолжит загружать текущую страницу. Заметьте:if (!x)означает если нажата "cancel". В JavaScript знак ! означает "none".
Функции
Функции - это куски кода. Давайте создадим простую функцию:
function test()
{
document.write("Вы видите данное сообщение?")
}
Учтите, что если бы это все было только в пределах тегов <script></script> , то вы не увидите "Вы видите данное сообщение?" на экране, потому что функции не выполняются сами по себе - только когда они будут вызваны. Поэтому вы должны:
function test()
{
document.write("Вы видите данное сообщение?")
}
test()
Последняя строка , test() , вызывает функцию, и теперь вы увидите слова "Вы видите данное сообщение?".
Обработчик событий
Что такое обработчики событий? Они могут считаться триггерами, которые выполняют код JavaScript когда, что-либо происходит, как щелчок или наведение курсора на ссылку, отсылка данных формы и т.д.
onClick
Обработчики onClick выполняют что-либо только когда пользователь щелкнет по кнопке, ссылке и т.п. Давайте рассмотрим пример:
<script>
function ss()
{
alert("Спасибо!")
}
</script>
<form>
<input type="button" value="Click here" onclick="ss()">
</form>
Функция ss() вызывается тогда, когда пользователь нажимает кнопку. На заметку: обработчики событий добавляются не в теги <script>, а в html-теги.
onLoad
Обработчик события onload используется для вызова выполнения кода JavaScript после загрузки:
<body onload="ss()">
<frameset onload="ss()">
<img src="whatever.gif" onload="ss()">
onMouseover,onMouseout
Эти обработчики событий выполняются только при работе с ссылками.
<a href="#" onMouseOver="document.write('Добро пожаловать!">Нажмите!</a>
<a href="#" onMouseOut="alert('Хорошая попытка')">Уйти!</a>onUnload
onunload выполняет JavaScript в то время, как пользователь покидает страницу. К примеру, можно поблагодарить пользователей.
<body onunload="alert('Спасибо за посещение нашео веб-сайта.')">
Обработка множества действий
Можно ли иметь такой обработчик событий, который вызовет множество функций/выражений? Да - это просто. Вам всего лишь необходимо вложить функции в обработчик события, но они должны быть разделены точкой с запятой:
<form>
<input type="button" value="Click here!" onClick="alert('Спасибо за посещение веб-сайта!');window.location='http://www.yahoo.com'">
</form>
Формы
Допустим, у вас есть следующая форма:
<form name="aa">
<input type="text" size="10" value="" name="bb"><br>
<input type="button"
value="Click Here"onclick="alert(document.aa.bb.value)">
</form>
Заметьте то, что мы дали названия форме и элементам. Итак, JavaScript может получить к ним доступ.
onBlur
Если вы хотите получить больше информации от пользователей и хотите проверить каждый элемент (а именно: имя пользователя, пароль, электронную почту) в отдельности и предупредить пользователя о том, что он должен исправить неправильно введенные данные перед тем, как он может продолжить далее, вы можете использовать onBlur. Давайте изучим работу onblur:
<html><head><script>
function emailchk()
{
var x=document.feedback.email.value
if (x.indexOf("@")==-1)
{
alert("Похоже, вы ввели неверный адрес электронной почты.")
document.feedback.email.focus()
}
}
</script></head><body>
<form
name="feedback">
Email:<input type="text" size="20" name="email"
onblur="emailchk()"><br>
Comment: <textarea name="comment" rows="2" cols="20"></textarea><br>
<input type="submit" value="Submit">
</form>
</body></html>
Если вы введете адрес электронной почты без знака @, то вы увидите предупреждение, которое попросит вас повторно внести данные. Что такое : x.indexOf(@)==-1? Это метод, который может просмотреть каждый символ в строке и найти тот, который нам нужен. Если он его найдет, то он вернет номер позиции данного символа в строке. Если же символ не будет найден, то вы получите -1. Тем самым, x.indexOf("@")==-1 на самом деле означает "если строка не включает в себя @, то:
alert("Похоже, вы ввели неверный адрес электронной почты.")
document.feedback.email.focus()Что такое focus()? Это метод текстового поля, который фактически заставляет курсор перейти на указанный текстовый блок. onsubmit в отличие от onblur обладает обработчиком, который вставляется в пределы тега <form>, а не в пределы одного элемента. Давайте выполним один пример:
<script>
<!--
function validate()
{
if(document.login.userName.value=="")
{
alert ("Пожалуйста, введите имя пользователя")
return false
}
if(document.login.password.value=="")
{
alert ("Пожалуйста, введите пароль")
return false
}
}
//-->
</script>
<form name="login" onsubmit="return validate()">
<input type="text" size="20" name="userName">
<input type="text" size="20" name="password">
<input type="submit" name="submit" value="Submit">
</form>
На заметку :
if(document.login.userName.value==""). Это означает, что "если область, названная userName формы login не содержит ничего, то..." возвращается false. Это используется для защиты от отсылки пустой формы. По умолчанию форма возвращает true если ее отослать. return validate() - означает, что "если отсылается форма, то необходимо вызвать функцию validate()".
Защита файла при помощи Login
Давайте попробуем следующий пример
<html><head>
<SCRIPT Language="JavaScript">
function checkLogin(x)
{
if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))
{
alert("Неверное имя пользователя");
return false;
}
else
location="main.htm"
}
</script>
</head><body>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
<p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>
</form>
</body></html>
|| означает "или", и ,!= означает "не равно". Поэтому мы может расписать код как "если id не равно 'Sam', или же пароль не равен 'Sam123', то выводится сообщение ('Неверная авторизация') и отсылка форма прекращается. В противном случае будет открыта страница 'main.html".
Ссылки
Во многих случаях форма может быть заменена ссылкой:
<a href="JavaScript:window.location.reload()">Click to reload!</a>
Еще парочка примеров :
<a href="#" onClick="alert('Здравствуй мир!')">Click me to say Hello</a><br>
<a href="#" onMouseOver="location='main.htm'">Mouse over to see Main Page</a>
Даты
Пример использования дат :
<HTML><HEAD><TITLE>Show
Date</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x= new Date();
document.write (x);
</SCRIPT>
</BODY></HTML>
Для активации объекта Date Object вы можете сделать следующее: var x=new Date(). Когда вам понадобится создать экземпляр объекта даты, вы можете использовать new , а за ним написать название name().
Динамическое отображение различных страниц
Вы можете отображать страницы в зависимости от времени и вот пример этого:
var banTime= new Date()
var ss=banTime.getHours()
if (ss<=12)
document.write("<img src='banner1.gif'>")
else
document.write("<img src='banner2.gif'>")
Date object Methods
getDate
getTime
getTimezoneOffset
getDay
getMonth
getYear getSeconds
getMinutes
getHours
Окна
Открытие окна
Для того, чтобы открыть окно, вам необходимо использовать метод "window.open()":
<form>
<input type="button" value="Click here to see" onclick="window.open('test.htm')">
</form>
Вы можете заменить test.htm любой ссылкой URL.
Размер, панель инструментов, панель меню, полосы прокрутки, место, статус
Давайте добавим к указанному выше скрипту некоторые атрибуты, которые контролируют размер окна и отображают панель инструментов, полосы прокрутки и т.д. Синтаксис, необходимый для добавления атрибутов, выглядит так:
open("URL","name","attributes")
К примеру :
<form>
<input type="button" value="Щелкните здесь, чтобы увидеть"
onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">
</form>
Другой пример, где все атрибуты включены, кроме того, что размер изменен:
<form>
<input type="button" value="Щелкните здесь, чтобы увидеть"
onclick="window.open('page2.htm','win1','width=200,height=200')">
</form>
Вот полный список атрибутов, которые вы можете использовать:
width height toolbar
location directories status
scrollbars resizable menubar
Перезагрузка
Для обновления окна вы можете использовать данный метод:
window.location.reload()
Закрытие окна
Вы можете использовать один из указанных ниже вариантов :
<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>
<a href="javascript:window.close()">Закрыть окно</a>
Загрузка
Основным синтаксисом при загрузке нового содержимого в окно, является:
window.location="test.htm"
Это аналогично следующему коду
<a href="test.htm>Попробуйте это</a>
Давайте предоставим пример, в котором окно подтверждения позволит пользователям выбирать между переходом на два различных сайта:
<script>
<!--
function ss()
{
var ok=confirm('Нажмите "OK" для того, чтобы перейти на страницу yahoo, или "CANCEL", чтобы перейти на hotmail')
if (ok)
location="http://www.yahoo.com"
else
location="http://www.hotmail.com"
}
//-->
</script>
Окно удаленного управления
Допустим, вы открыли новое окно из текущего окна. После этого вы подумали о том, что вам необходим элемент управления между данными двумя окнами. Для этого вам необходимо сначала назвать окно, примерно так:
aa=window.open('test.htm','','width=200,height=200')
Придав окну название, к примеру "aa", получите возможность доступа ко всему, что находится внутри данного окна из других окон. Когда нам необходим доступ к данным, находящимся в другом окне, к примеру, записать что-либо в то окно, то необходимо сделать следующее:
aa.document.write("Это тест.")
Теперь давайте рассмотрим пример того, как вы можете изменить фоновый цвет другого окна:
<html><head><title></title></head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=200,height=200')">
<input type="radio" name="x" onClick="aa.document.bgColor='red'">
<input type="radio" name="x" onClick="aa.document.bgColor='green'">
<input type="radio" name="x" onClick="aa.document.bgColor='yellow'">
</form>
</body></html>
opener
Используя свойство "opener" , мы может получить доступ к основному окну из только что открытого окна. Давайте создадим основную страницу Main:
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=100,height=200')">
</form>
</body>
</html>
Затем создадим страницу удаленного доступа Remote (в данном примере это test.htm):
<html>
<head>
<title></title>
<script>
function remote(url){
window.opener.location=url
}
</script>
</head>
<body>
<p><a href="#" onClick="remote('file1.htm')">File
1</a></p>
<p><a href="#" onClick="remote('file2.htm')">File
2</a></p>
</body>
</html>
Попробуйте!
Фреймы
Один из наиболее популярных способов использования загрузки множества фреймов является загрузка и изменение содержимого одного и более фреймов одновременно. Допустим, у нас есть родительский фрейм:
<html>
<frameset cols="150,*">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
Мы можем добавить ссылку в дочернем фрейме "frame1" , которая изменит содержимое не только page1, но и page2. Далее вам доступен html-код для этого:
<html>
<body>
<h2>This is page 1 </h2>
<a href="page3.htm"
onClick="parent.frame2.location='page4.htm'">Click Here</a>
</body>
</html>
На заметку: вы должны использовать "parent.frameName.location" для получения доступа к другому фрейму. Cтандарты "parent" для родительского фрейма, содержащего код набора фреймов.