Что такое JavaScript
JavaScript - новоиспеченный говор для составления скриптов, разработанный фирмой Netscape. с помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном руководстве Вы увидите, что можно сделать с помощью JavaScript, также даже более того - увидите, как это сделано.
JavaScript - это никак не Java!
Многие люди считают, что JavaScript - это то же самое, что также Java, лишь только потому, что данные языки имеют схожие названия. На самом занятии это не так. Я считаю, что сейчас станет излишне иллюстрировать Вам все различия между этими языками - так что запомните лишь только то, что JavaScript - это никак не Java.
Чтобы получить дополнительную информацию по затронутой теме, обратитесь пожалуйста к введению, опубликованному на сайте Netscape :-)
Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, талантливый трудиться с JavaScript - например Netscape Navigator (начиная с версии 2.0) либо Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность трудиться со скриптами, написанными на языке JavaScript. Несомненно, это значительный довод в выгоду избрания языка JavaScript, как средства улучшения ваших Web-страниц.
Конечно же, пред чтением данного руководства Вы должны познакомиться с основами иного языка - HTML. При этом, возможно, Вы обнаружите, что немало хороших средств диалога можно создать, пользуясь лишь только командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову 'html' на поисковом сервере Yahoo.
Размещение JavaScript на HTML-странице
Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим последующий бесхитростный пример:<html><body><br>Это обычный HTML документ.
<br> <script language="JavaScript"> document.write("А это JavaScript!")
</script><br>Опять акт HTML.
</body></html>С главного взгляда образец подсказывает обычный файл HTML. Единственное новшество тут - система: <script language="JavaScript"> document.write("А это JavaScript!")
</script>Это истинно код JavaScript. Чтобы наблюдать, как этот скрипт трудится, запишите этот образец как обычный файл HTML также загрузите его в браузер, имеющий поддержку языка JavaScript.
А это результат выполнения этого файла (если Вы используете браузер, имеющий поддержку JavaScript, то у Вас станет 3 строки):
Это обычный HTML документ.
Опять акт HTML.
Я вынужден признать, что этот скрипт никак не столь полезен - то же самое также более просто можно было бы написать на "чистом" языке HTML. Я всего лишь только хотел продемонстрировать Вам тэг признака <script>. Все, что стоит между тэгами <script> также </script>, интерпретируется как код на языке JavaScript. Здесь Вы схоже наблюдаете образец использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, в какое время необходимо что-либо написать в текущем акте (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе строчит фразу "А это JavaScript!".
Браузеры без поддержки JavaScript
А как станет выглядеть наша страница, если браузер никак не воспринимает JavaScript? Браузеры, никак не имеющие поддержки JavaScript, "не знают" также тэга <script>. Они игнорируют его также печатают все стоящие вслед за ним коды как обычный текст. Иными словами, чтец увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом непосредственно посреди HTML-документа. Разумеется, это никак не вступало в наши замысла. На этот приключение имеется специализированный средство скрыть исходный код скрипта от старых версий браузеров - мы будем использовать для этого тэг комментария из HTML - <!-- -->. В результате новоиспеченный вариация нашего исходного кода станет выглядеть как:
<html><body><br>Это обычный HTML документ.
<br> <script language="JavaScript"> <!-- hide from old browsers
document.write("А это JavaScript!")
// --> </script><br>Опять акт HTML.
</body></html>В этом случае браузер без поддержки JavaScript станет печатать:
Это обычный HTML документ.
Опять акт HTML.
А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:
Это обычный HTML документ.
document.write("А это JavaScript!")
Опять акт HTML.
Пожалуйста обратите внимание, что Вы никак не можете полностью скрыть исходный код JavaScript. То, что мы тут делаете, владеет целью предотвратить распечатку кода скрипта на старых браузерах - но тем никак не менее чтец сможет увидеть этом код посредством пункта меню 'View document source'. Не существует схоже способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот либо иной трюк).
События также обработчики событий являются весьма важной частью для программирования на языке JavaScript. События, первым образом, инициируются теми либо иными действиями пользователя. Если он щелкает по некоторой кнопке, проистекает событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - проистекает событие MouseOver. Существует несколько различных типов событий.
Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. Дополнительно это может быть выполнено с помощью специальных программ отделки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, именуется onClick. Дополнительно она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет бесхитростный образец программы отделки события onClick:
<form><input type="button" value="Click me" onClick="alert('Yo')"></form>
Данный образец владеет несколько новых особенностей - рассмотрим их по распорядку. Вы можете тут наблюдать, что мы создаем некую форму с кнопкой (как это действовать - проблема языка HTML, так что рассматривать это тут мы никак не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот свойство определяет, что происходит, в какое время нажимают на кнопку. Таким образом, если владеет помещение событие Click, компьютер вынужден выполнить вызов alert('Yo'). Это также есть образец кода на языке JavaScript (Обратите внимание, что в этом случае мы даже никак не используем тэгом <script>).
Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. Дополнительно это как однажды станет тот текст, что появится в выпадающем окне. Таким образом, в какое время чтец в какое время щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.
Некоторое замешательство может вызвать еще одна особенность данного образца: в команде document.write() мы использовали двойные кавычки ("), только в системы alert() - только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Все же в завершительном образце мы написали onClick="alert('Yo')" - то есть мы использовали также двойные, также одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер никак не смог бы разобраться в нашем скрипте, поскольку делается неясно, к которой из элементов системы владеет отношение функция отделки событий onClick, только к которой - нет. Поэтому Вы также вынуждены в данном случае перемежать оба типа кавычек. Не владеет значения, в каком распорядке Вы использовали кавычки - сперва двойные, только затем одинарные либо наоборот. То есть Вы можете точно так же написать также onClick='alert("Yo")'.
Вы можете использовать в скрипте множество различных типов функций отделки событий. Сведения о некоторых из них мы получим в данном описании, но никак не о всех. Поэтому обращайтесь пожалуйста к соответствующему справочнику, если Вы хотите узнать, какие обработчики событий еще существуют.
Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был передан функции JavaScript alert. Такое ограничение накладывается по соображениям безопасности. Такое же выпадающее окно Вы можете создать также с помощью метода prompt(). Все же в этом случае окно станет воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может принять вид системного сообщения также попросить читателя ввести некий пароль. А если текст вмещается в выпадающее окно, то тем самым читателю дается осознать, что данное окно было создано web-браузером, только никак не вашей операционной системой. Дополнительно поскольку данное ограничение наложено по соображениям безопасности, Вы никак не можете взять также просто так удалить появившееся сообщение.
В большинстве наших программ на языке JavaScript мы будем использовать функциями. Поэтому уже нынче мне необходимо рассказать об этом важном элементе языка.
В большинстве случаев функции представляют собой лишь только средство связать совместно нескольких команд. Давайте, к образцу, напишем скрипт, печатающий некий текст три раза подряд. Для истока рассмотрим бесхитростный подход:
<html><script language="JavaScript"><!-- hide
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
// --></script></html>И такой скрипт напишет последующий текст
Доброе дело пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная доля его кода была повторена три раза. Неужели это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:
<html><script language="JavaScript"><!-- hide
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// --></script></html>В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction(). Это означает, что обе команды document.write() нынче связаны вместе также могут быть выполнены при вызове указанной функции. Дополнительно действительно, нашем образце есть три вызова этой функции - Можно увидеть, что мы написали строку myFunction() три раза разом позже того, как дали определение самой функции. То естькак однажды также сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.
Поскольку это достаточно бесхитростный образец использования функции, то у Вас мог возникнуть задача, только почему собственно данные функции столь важны в JavaScript. По прочтении данного описания Вы несомненно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость - что это такое, мы увидим позже.
Функции могут схоже использоваться в совместно с процедурами отделки событий. Рассмотрим последующий пример:
<html><head><script language="JavaScript"><!-- hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html>Here you can test this example:
Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y также result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста также т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result также поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result станет размещено количество 17. В данном случае команда alert(result) выполняет то же самое, что также alert(17). Иными словами, мы приобретаем выпадающее окно, в котором написано количество 17.
Created/Updated: 25.05.2018