iVARIOUS: JavaScript

Показаны сообщения с ярлыком JavaScript. Показать все сообщения

четверг, 6 июля 2017 г.

JavaScript. Создание, поиск и удаление элементов

Как уже отмечалось, в управлении галереей нет неких сложных алгоритмов только манипуляция отображением страницы через теги. В этом случае используются только объекты направления HTML DOOM.
Первое что попадается в файле JavaScript это глобальные переменные id_img, ln_img, и img_path. Они находятся вне всяких функций для того чтоб были видны везде. Первая функция img_up, она принимает источник изображения при нажатии на картинку. Строка :

document.getElementById("galary");

находит элемент по названию id и возвращает указатель на него -elem. Дальше:

elem.getElementsByTagName('img');

ищет и собирает в одном месте все нужные теги, в даном случае собираем все предварительно выведенные (например сервером через PHP) изображения - в что то вроде массива. В созданной функции search_img находим номер под которым в массиве находится изображение и сохраняем его в глобальную переменную id_img. В другой глобальной переменной ln_img сохраним длину массива изображений (количество изображений).
Строкой:

document.createElement('div');

к существующей странице добавляется новый div и ссылку на него сохраняет переменная div_all.

div_all.id="div_all_id";

дает новому элементу div имя id по которому можно его найти. Для того чтоб новый div появился на странице записана строка:

document.body.appendChild(div_all);

и с этого момента в теле body будет внесен новый элемент.
Теми же действиями создаем внутри нового div еще один div с уникальным именем id, специально для открытия выбранного в галереи изображения.
Вычисленное ранее местоположение изображения в массиве images[id_img], через:

img_path=document.images[id_img].src;

извлекаем и сохраняем путь к нему.

src="+" ' "+document.images[id_img].src+" ' >";

выводит выбранное изображение в большом размере поверх галереи.
Также создается дополнительный div в котором будут размещены кнопки:

var div_button = document.createElement('div');

div_button.id="div_bt";

Функция img_cls() является обработчиком кнопки закрытия окна, и удаляет созданные элементы (div):

var remel=document.getElementById("div_image");

remel.parentNode.removeChild(remel);

... Метод ( функция ) next(), увеличивает переменную id_img в которой хранится номер изображения в массиве, тем самым выводит следующие изображения. Функция back() наоборот, уменьшает значение переменной id_img и выводит предыдущие изображения на экран. img_dwnld() играет роль кнопки download, создает новое окно в браузере и открывает картинку для загрузки в полном размере.

JavaScript. Создание простой Галереи изображений

Пример кода для отображения галереи. В данном примере не используется JQuery или другие подобные библиотеки. Только чистый JavaScript.
С HTML все понятно. Есть страница выводящая гипертекст изображений, первоначально на странице только один div id='gallery' . CSS отображает стиль страницы как высше упомянутого div id='gallery' так и другие блоки div которых нет, но будут созданы уже самим кодом JavaScript. Более детально описание работы кода галереи будет рассмотрено в следующей статье.
Стартовая страница галереи. HTML:

<html>
<html>
<head>
<link rel='stylesheet' href='gallery.css' type='text/css' media='screen'>
<script type='text/javascript' src='galaryjs.js'></script>
</head>
<body>
<div id='galary'>
<img src='1.jpg' onClick='img_up(src)' >
<img src='2.jpg' onClick='img_up(src)' >
<img src='3.jpg' onClick='img_up(src)'>
<img src='4.jpg' onClick='img_up(src)' >
<img src='5.jpg' onClick='img_up(src)' >
<img src='6.jpg' onClick='img_up(src)'>
<img src='7.jpg' onClick='img_up(src)' >
<img src='8.jpg' onClick='img_up(src)' >
<img src='9.jpg' onClick='img_up(src)'>
</div>
</body>
</html>

Файл CSS который описывает отображение главного окна страницы, и других элементов которые только в будущем будут созданы программой.

#div_all_id{
width: 100%;
height: 100%;
position: fixed;
background: black;
opacity: 0.4;
}
#div_image{
background: black;
}
#div_image img{
position: absolute;
margin-left: 10%;
border: 20px solid black;
border-radius: 30px;
border-bottom: 50px solid #101018;
width: 75%;
}
#gallery{
background: black;
position: absolute;
}
#gallery img{
align-content: center;
height: 230px;
}
#div_bt {
position: fixed;
}
#div_bt img{
margin-left: 2%;
}
#st_back {
margin-top: 5%;
position: fixed;
}
#st_back:hover {
background: gray;
border: 2px solid white;
border-radius: 3px;
opacity: 0.7;
}
#st_next {
margin-top: 10%;
position: fixed;
}
#st_next:hover {
background: gray;
border: 2px solid white;
border-radius: 3px;
opacity: 0.7;
}
#st_dwnld {
margin-top: 15%;
position: fixed;
}
#st_dwnld:hover {
background: gray;
border: 2px solid white;
border-radius: 3px;
opacity: 0.7;
}
#st_close {
margin-top: 20%;
position: fixed;
}
#st_close:hover {
background: red;
border: 2px solid white;
border-radius: 3px;
opacity: 0.7;
} opacity: 0.7;

Код Javascript управляющий логикой галереи:

var id_img=0; //number images
var ln_img=0;
var img_path=0;
function img_up(img_src){
var elem=document.getElementById("galary");
var elems=elem.getElementsByTagName('img');
id_img=search_img(img_src,elems);
ln_img=elems.length;
varаdiv_allа=аdocument.createElement('div');
div_all.id="div_all_id";
document.body.appendChild(div_all);
varаdiv_txа=аdocument.createElement('div');
div_tx.id="div_image";
document.body.appendChild(div_tx);
img_path=document.images[id_img].src;
div_tx.innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";
varаdiv_buttonа=аdocument.createElement('div');
div_button.id="div_bt";
document.body.appendChild(div_button);
div_button.innerHTML="<img id='st_back' src='back.png' height='30' title='back' onclick='back()'>";
div_button.innerHTML+="<img id='st_next' src='next.png' height='30' title='next' onclick='next()'>";
div_button.innerHTML+="<img id='st_dwnld' src='dwnld.png' height='30' title='download' onclick='img_dwnld()' >";
div_button.innerHTML+="<img id='st_close' src='close.png' height='30' title='close' onclick='img_cls()' >";
}
function img_cls(){
var remel=document.getElementById("div_image");
remel.parentNode.removeChild(remel);
var rem_ove=document.getElementById("div_all_id");
rem_ove.parentNode.removeChild(rem_ove);
var rem_ove=document.getElementById("div_bt");
rem_ove.parentNode.removeChild(rem_ove);
}
function search_img(img_src,elems){
for(var i=0; i<elems.length; i++)
if(document.images[i].src==img_src) {return i;}
}
function next(){
id_img+=1;
if(id_img<=ln_img)
{
document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
else id_img=(ln_img-2);
img_path=document.images[id_img].src;
}
function back(){
id_img-=1;
if(id_img>=0)
{
document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
else id_img=0;
img_path=document.images[id_img].src;
}
function img_dwnld(){
window.open(img_path);
} ndow.open(img_path);

JavaScript. innerHTML

В прошлой статье была рассмотрена общая концепция HTML DOM объектов, и коротко был описан объект innerHTML. Тут рассмотрим больше примеров его применения.
innerHTML относится к группе объектов из HTML DOM Objects->DOM Elements, в котором хранятся объекты для работы с элементами (буд то теги или их атрибуты). Как упоминалось ранее, innerHTML объект, возвращает HTML код выбранного элемента вместе с текстом если он имеется. Также через innerHTML вносятся изменения в текст или HTML выбранного элемента. После внесения изменений через объект innerHTML, страница автоматически применяет новые атрибуты, и перезагружать страницу не нужно для того чтоб увидеть изменения.
Пример изменения атрибутов ссылки:

<a id="link_" href="ivarious.com">Link</a> // Ссылка по имени "Link" с адресом "ivarious.com"

document.getElementById("link_").innerHTML="iVARIOUS";// Изменяем имя на "iVARIOUS"
document.getElementById("link_").href="ivarious.com/contact.html";// Изменяем ссылку на "ivarious.com/contact.html"

Как видно с примера, что касается изменения текста , или кода , используется innerHTML. Если изменить нужно нечто более конкретное (в примере это адрес URL), указываем название нужного атрибута. Таким образом можно изменять не только URL, но и ссылки на файлы, параметры HTML тегов и даже стили CSS.

JavaScript. HTML DOM

В прошлой статье был рассмотрен пример того как происходит манипуляция тегами, очевидно, что достаточно использовать HTML DOM объекты. Главный объект из HTML DOM это document, через него идет доступ ко всем остальным тегам. Из схемы видно, что объект document несет в себе корневой элемент, который отвечает за весь HTML в целом, он и сам состоит еще из нескольких объектов через которые можно получить доступ к head, title с одной стороны, и body с его элементами в другой. Например, чтоб занести значение title на странице, достаточно записать:

//Запишет в HTML заголовок.
document.title="Example";

Добраться к элементу можно несколькими способами, один из них - представить элементы тела body в виде массива данных. Элемент body является родителем всех элементов внутри него, а значит - всего содержимого на странице, и может представить свою внутреннюю структуру в виде массива элементов:

document.body.childNodes[1].value;

//Из прошлого примера, по этому индексу в массиве находится элемент для ввода текста.

Этот метод больше подходит для сканирования содержания страницы. Есть более простые способы добраться до нужного элемента по названию его id :

// Поиск элемента по id
var i=document.getElementById("text_in").value; //Содержимое поле ввода сохраняется в переменную
document.getElementById("text_out").innerHTML=i; // Содержимое переменной выводится в нужном месте

HTML DOM объекты позволяют менять практически любое содержимое HTML тегов, главное тут знать какие атрибуты в того или иного тега имеются в наличии. Если есть атрибут value - его можно читать, изменять. Если нет value, с этим справится innerHTML, он представляет доступ к текстовому содержимому HTML тегов у которых нет атрибута value, его можно как читать, так и записывать. innerHTML при чтении - выводит все содержимое выбранного элемента вместе с HTML кодом дочерних элементов, и при записи изменяет все дочерние элементы. Проще говоря если в теге к которому обращается innerHTML имеются другие HTML теги, он и их может изменить, если тегов нет, а только текст, будет изменен/прочитан только текст.

JavaScript. Объекты

Описать что такое язык ООП, к которым относится JavaScript не трудно. Все ключевые моменты из которых состоит страница сайта существуют в виде обьектов. Каждый обьект имеет внутри переменные которые хранят в себе какую то информацию, а также методы, которые обрабатывают данные или делают нужные операции. Все элементы этой структуры внутри себя также имеют конечное число каких то своих элементов (переменных, методов или других обьектов). Как доступ к файлам которые находятся в папке, описываются по ссылке которая перечисляет все внутринние папки на пути, так и доступ к элементам обьектов указывается от общего названия обьекта и до конечного элемента, через всю цепочку вложенных обьектов (если на пути такие есть). Какой обьект и сколько у него элементов - хорошо описано по документации, главное понять общий принцип обращений к нужному обьекту, методу, или переменной. Если в задаче нужно провести некоторый алгоритм или обработку данных, очевидно, что HTML теги или информация об окнах тут не участвует, соответственно используются только обьекты JavaScript. Если полученные данные нужно применить к HTML тегам (изменить вид страницы) то используются свойства HTML DOM обьектов.
В этом примере описывается программа, которая выводит обычный текст из текстового поля по нажатию кнопки, а также кнопка которая очищает.

<script>
function Write(){
var i=document.getElementById("text_in").value;
document.getElementById("text_out").innerHTML=i;
}
function Clear(){
document.getElementById("text_out").innerHTML=" ";
}
</script>
<input type="text" id="text_in" role="50" value="Введите текст">
<button onClick='Write()' >Write</button>
<button onClick='Clear()' >Clear</button>
<p id="text_out"></p>

Результат этой программы будет следующим:

JavaScript. Введение

JavaScript - Интерпретированный язык сверхвысокого уровня, предназначен для описания поведения сайта. Сервер на котором сайт, хранит файлы: HTML, PHP, CSS , JavaScript. Трое из них: HTML, CSS , JavaScript браузер загружает в себя и имеет возможность читать и изменять перед выводом на экран. Если HTML описывает визуальный вид сайта, то JavaScript - описывает его поведение: реакцию на действия пользователя сайта. Как бы там нибыло, в каких технологиях бы не рождался сайт, все ровно он в конечном виде доходит в HTML. JavaScript способен принимать один HTML код , но перед самым показом на экране изменять его до неузнаваемости, в результате чего может появится совсем другое. В отличии от PHP, JavaScript не может изменять и сохранять сам текст файлов.
Как и все языки сверхвысокого уровня, JavaScript - обьектоориентирован.
Главным супер объектом является Объекты Браузера. Главный из которых объект window (приложение - браузер), в котором все и происходит. window имеет свои методы и переменные, в основном они влияют на работу самих окон (создавать/удалять и другое), а также предоставляют информацию об окнах.

Navigator Object - аналогичен массиву $_SERVER в PHP, имеет переменные с информацией о пользователе (имя и версия браузера, платформа етс...).

Screen Object - содержит информацию о дисплее: его расширение, разрядность цвета и несколько других.

History Object - имеет данные о количестве посещенных сайтов из истории браузера. Какие именно сайты пользователь посещал - неизвестны.

Location Object - также аналогичен массиву $_SERVER в PHP, но несет информацию о ссылках, протоколах и нескольких других .

HTML DOM Objects - хранит объекты для управления HTML элементами страницы: от заголовков, до кнопок и полей ввода.

JavaScript Objects - имеет объекты для работы с переменными, строками и другими элементами типичными в программировании.

Developer от Бога

четверг, 6 июля 2017 г.