JavaScript (яваскрипт) - это, как не трудно догадаться, один из языков программирования. Данный язык обычно используют на веб-сайтах. Не будем вдаваться в подробности его истории, а сразу перейдём к конкретике. JavaScript выполняется браузером пользователя, когда он посещает какой-то сайт. Для того, что бы использовать этот язык, необходимо применить на своей странице тег script.
Откройте текстовой блокнот и вставьте туда следующий код:
Code
<script type="text/javascript">
alert('Hello World!');
</script>
Затем сохраните файл под любым именем и с расширением .html. Откройте файл с помощью браузера. Вы увидите всплывающее окошко с текстом 'Hello World!'. Это наш первый скрипт.
- Обратите внимание, что мы создали веб-страницу не по правилам (без тегов html, body и т.п.), но браузер её понял. Это нормально. И сейчас мы рассматриваем конкретно только Javascript.
Давайте попробуем что-нибудь написать на нашей веб-странице:
Code
<script type="text/javascript">
document.write("<b>Наш первый пример на JavaScript</b>");
</script>
И на нашей веб-странице мы увидим текст жирным шрифтом "Наш первый пример на JavaScript".
Яваскрипт позволяет так же обращаться к элементам на веб-странице по их атрибуту - id. Вот пример:
Code
<script type="text/javascript">
document.getElementById("kinzaza").innerHTML = "<b>Наш первый пример на JavaScript</b>";
</script>
<div id="kinzaza">эм...</div>
Этот пример вставит в пустой элемент с тегом div текст жирным шрифтом "Наш первый пример на JavaScript", заменив им текст "эм...". Вернее, должен был вставить, но этого не произошло. Можете проверить в браузере. Почему так?
Дело в том, что браузер, получая веб-страницу, начинает её читать и, натыкаясь в коде на тег script, сразу выполняет наш скрипт. Но для того, что бы обращаться к элементам по их id, браузер должен прочесть страницу до конца и как бы представить себе картину элементов - DOM (Document Object Model - Объектная модель документа). Пока он этого не сделает, к элементам обращаться нет смысла, посему вполне логично, что вместо обращения к элементу мы получим сообщение об ошибке. Поэтому прежде, чем обращаться к элементу, нам надо дождаться, пока браузер построит DOM. В яваскрипте, как ни странно, нет стандартных средств для того, что бы узнать, когда же DOM будет готов. Обычно в интернете достаточно уже готовых функций, выполняющих нужную нам задачу. Вот одна из них:
Code
/* DOMReady http://frankov.ru */
DOMReady=function(A){var C=false;ready=function(){if(!C){A();C=true}};try{document.addEventListener("DOMContentLoaded",ready,false)}catch(B){timer=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(timer);ready()}},10)}window.onload=function(){ready()}};
new DOMReady(function(){
// Действия после загрузки страницы
// Доступны любые объекты из структуры
});
Теперь, если мы напишем свой предыдущий код вот так
Code
<script type="text/javascript">
DOMReady=function(A){var C=false;ready=function(){if(!C){A();C=true}};try{document.addEventListener("DOMContentLoaded",ready,false)}catch(B){timer=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(timer);ready()}},10)}window.onload=function(){ready()}};
new DOMReady(function(){
document.getElementById("kinzaza").innerHTML = "<b>Наш первый пример на JavaScript</b>";
});
</script>
<div id="kinzaza">эм...</div>
то всё работает!
Работа с переменными и функциями:
Code
<script type="text/javascript">
var etaper1 = 'abc'; // в переменную с именем etaper1 занесли строку abc
var etaper2 = 395; // в переменную etaper2 занесли число 395
var etaper3 = etaper1 // в переменную etaper3 занесли значение переменной etaper1, т.е. строку abc
// а ниже создадим функцию:
function etafunk(a, b){ // в скобках мы указали, что функция может принять две переменные на обработку (если ничего не указывать, то функция переменные не принимает)
var c = a+b; // складываем две переменные, который функция должна принять
return с; // и возвращаем сумму
}
// как использовать описанную ранее функцию:
var etaper3 = etafunk(2, 5);
alert(etaper3); // это вызовет в браузере всплывающее окошко с цифрой 7 (2+5)
</script>
