Изучив немалое количество всевозможных функций, методов и прочего постепенно переходим к визуальной работе. Все предыдущие уроки были непосредственно вписаны в HTML код. Теперь будем учится культурно и красиво выполнять последующую работу. В web-программировании существует негласное правило - делать всё аккуратно и разборчиво. Поэтому при создании сайтов картинки лежат в отдельной папке, скрипты в другой и тд. Поэтому создавая сайт создаем и отдельную папку для java-скриптов. В этой папке создаем файл с расширением "*.js". Что бы скрипты корректно работали на сайте, придется на самой интернет-страничке в HTML коде вставить такое значение:

<script src="js/myscripts.js" type="text/javascript"></script>
где src - это указывание пути к файлу, js-папка, а myscripts.js - название файла с расширением.
Далее будут приводится примеры без ключевых тегов

<script type="text/javascript"></script>
так как подразумеваем, что будем работать по вышесказанному методу, где подобные уточнения уже не нужны.
Теперь начнем работу в этом созданном файле. Сначала научимся обращаться к объектам и к целому каталогу похожих объектов. Начнем с простого. Представим, что у нас уже существует сайт с некоторым количеством картинок формата .jpeg. Нас интересует общее количество картинок, которые вручную посчитать просто лень. Используя метод "document.getElementsByTagName" мы можем проделать эту операцию. Пример:

var all = document.getElementsByTagName('jpeg'); alert("Количество картинок" + all.length)

В всплывающем окне метода alert нам выводится общее количество имеющихся картинок. Главное, в таком случае, в HTML - коде вставлять обращение к *.js файлу в конце кода. Например перед тегом "/body". Так как скрипт будет считать всё, что находится до него. Все что после него - его мало интересует.
Далее рассмотрим программку, которая способна "вылавливать файл" и проводить с ним различные операции. Смотрим:

var telepuz = document.getElementById('jpeg1'); alert(telepuz.width);

Результат - всплывающее окно со значением ширины картинки, id которой "jpeg1". Всё получилось благодаря методу "document.getElementById".
Если у нас на сайте имеется блок, в котором идет целый ряд картинок, то лучше его заключить в теги "div" и назначить ему свой id. D таком случае мы можем обратится к целому блоку картинок и оперировать этими данными. Что бы сделать такое обращение нам понадобится метод "document.getElementById". рассмотрим на примере:

var myDiv = document.getElementById('block1'); var child = myDiv.childNodes; for (var i = 0; i<child.length ; i++){ alert(child[i].alt);}

Благодаря этому скрипту нам выводится на экран поочередно все значения ширины картинок, занесенных в блок, id которого "block1". ".childNodes" - это обращения к этим самым картинкам, а далее записан цикл показа очередности значений.
Далее будем рассматривать библиотеки jQuery, которые находятся в соответствующем разделе.

Предыдущий урок.

Урок подготовил: Egro_proxi

---