Четверг, 22.06.2017, 14:05
| RSS
Поиск
Главная | Каталог статей
Защита, контроль, управление
Форма входа
Логин:
Пароль:

Меню

Авторские проекты

Авторский блог

Raspberry Pi

Каталог схем

Полезная информация

Обратная связь

Каталог сайтов

Форум

Канал YouTube

Сузуки Клуб Россия


Категории каталога
Автоэлектроника [20]
Безопасность [10]
Бытовая электроника [20]
Измерения [10]
Источники питания [12]
Программаторы [5]
Orange Pi [4]

Ссылки



Яндекс.Метрика




Мини-чат

Наш опрос
Как Вы узнали об этом сайте?
Всего ответов: 528

Статистика

Онлайн всего: 2
Гостей: 2
Пользователей: 0

Главная » Каталог схем

Домашняя автоматизация на Orange Pi. Часть третья. Java Script

Очередное продолжение повествования о том, как создать собственную веб страничку.

В этой статье речь пойдет о JS. JS это возможность придать вашим страничкам динамики. JS это не обязательно но удобно.

Если вы видите анимацию на странице, то скорей всего это JS, почему скорей всего, потому что анимация может создаваться, например, при помощи flash.

 Теперь о том, что такое JS, что можно сделать с его помощью, а что нельзя.

JavaScript – это интерпретируемый язык программирования, разработанный для взаимодействия с веб-страницами. В этом смысле JS ничем не отличается от php, с той разницей что JS является клиентским скриптом т.е. выполняется на стороне клиента (браузер относится к программам клиентам).

 Итак, небольшой список того, что может JavaScript:

Добавлять различные эффекты анимации.

Реагировать на события - обрабатывать перемещения указателя мыши, нажатие клавиш с клавиатуры.

Осуществлять проверку ввода данных в поля формы до отправки на сервер, что в свою очередь снимает дополнительную нагрузку с сервера

Создавать и считывать cookie, извлекать данные о компьютере посетителя

Определять браузер

Изменять содержимое HTML-элементов, добавлять новые теги, изменять стили.

Теперь о том, что JS не может.

JavaScript не может закрывать окна и вкладки, которые не были открыты с его помощью.

Не может осуществлять кросс доменные запросы, получать доступ к веб-страницам, расположенным на другом домене. Даже когда страницы из разных доменов отображаются в одно и тоже время в разных вкладках браузера, то код JavaScript принадлежащий одному домену не будет иметь доступа к информации о веб-странице из другого домена. Это гарантирует безопасность частной информации, которая может быть известна владельцу домена, страница которого открыта в соседней вкладке.

Не имеет доступа к файлам, расположенным на компьютере пользователя, и доступа за пределы самой веб-страницы, единственным исключением являются файлы cookie, это небольшие текстовые файлы, которые JavaScript может записывать и считывать.

Ограничения связаны в первую очередь с политикой безопасности, злоумышленник может загрузить свой JS код на страницу и использовать в своих целях, поэтому в отличие от php js ограничен только песочницей браузера, что это значить на практике.

Популярная идея сделать свой погодный информер на основе данных с GISMETEO, указанный сервис может отдавать погоду в XML формате что очень удобно для обработки скриптом, напрашивается простой вывод, с помощью AJAX запрашивать данные с сервиса, парсить и выводить на страницу, однако из за ограничения кросдоменных запросов получить данные от сервиса не упасться, не будем брать в расчет всякие JSONP и тому подобное.

В общем JS представляет собой хороший инструмент для увеличения функциональность ваших страниц.

JS файл это набор инструкций для интерпретатора JS выполняемого в среде браузера, JS позволяет манипулировать свойствами объектов.

JS может быть включен в состав документа с помощью тегов

<script type="text/javascript">

    ...

</script>

 или размещаемого во внешнем файле с расширением .js.

пример простого скрипта щи тающего количество нажатий кнопки.

$(document).ready(function(){

        var i=0;

        $("#button").click(function(){

             i=i+1;

            $("#count").html("Вы нажали на кнопку : "+" "+i+" "+"раз.");

         });

    });

Пример сделан с применением jquery, так что нет никаких getElementById и тому подобных штук, всю работу делает jquery мы лишь пишем код скрипта.

Как видите он очень прост.

Дожидаемся события ready, вызывается, как только браузер построит DOM дерево

DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный

интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Представляется в виде дерева, требуется для скриптов JavaScript, которые желают наблюдать или изменять веб-страницу динамически. Выполнение скрипта в произвольный момент времени может обернутся трудно прогнозируемыми ошибками.

Объявляем переменную-счетчик нажатий.

Устанавливаем обработчик события на элементе button, в момент нажатия кнопки будет вызвана анонимная функция function() которая  

Увеличит счетчик нажатия на 1- i=i+1;

выведет в элемент с id=count надпись: "Вы нажали на кнопку: "+" "+i+" "+"раз."

Знаки + будучи примененным к строкам производит контактенцию (слияние строк).

Ну и закрывающие скобки.

Теперь при нажатии на кнопку скрипт будет подщитывать количество нажатий и выводить на экран.

Как видите сложностей никаких нет, потренировавшись вы можете создавать свои “живые” странички.

Библиотека jquery предоставляет очень много возможностей, вы можете ознакомится с ними по адресу

 https://api.jquery.com/category/css/

 или по-русски http://jquery.page2page.ru/index.php5/%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B

На страничке так же показана еще одна функция библиотеки-анимация, управление показом элемента за щет изменения прозрачности.

При нажатии на кнопку показать плавно появляется кнопка Ок при нажатии на кнопку скрыть Ок плавно исчезает.

В папке js есть еще JQuery UI, описание библиотеки здесь

 https://jqueryui.com/

или по-русски.

http://www.wisdomweb.ru/JQ/uieffect.php

этих двух библиотек вполне хватит что бы состряпать отличный интерфейс.

Так же неотъемлемой частью jquery является AJAX тот самый с помощью которого на страничку можно выводить состояние аппаратной части без перезагрузки всей страницы, AJAX запросы с помощью библиотеки делается очень просто.

Типичный пример запроса

$.ajax({

  url: “test.html',

  success: function(){

    alert('OK.');

  }

});

Отправляется асинхронный запрос методом GET при успешном завершении в окне появляется OK.пример с браузером и локальным компьютером не проходит, по причине запрещения кроссбраузерных запросов что очень хорошо видно в отладчике, нужен серверJ.

Для упрощения разработки интерфейса можно применить какой-нибудь Фреймворк которые в изобилии водятся на просторах интернета, например популярный Bootstrap,предоставляет готовую таблицу стилей на все времена и скрипт работающий поверх jquery, не плохое решение,

Однако если хотите оригинальности то лучше разрабатывать самому, как правило сайты разработанные с помощью Фреймворков похожи как братья.

Вот такая получилась не большая статья, постарался описать основы применения JS.

Как видите больших сложностей нет, тренируйтесь и все получится J.

Файлы к статье в приложении.

 

Благодарю за внимание.

Добавил: Admin Дата: 12.05.2017 21:28 Просмотры: 73


T2M © 2017
Сайт управляется системой uCoz