js | Wiki | PWODEV

highlight.js — лучшая подсветка синтаксиса кода

Paul Osmachko — Fri, 09 Aug 2019 13:25:44 +0000

Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Хотя….

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в это:

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

...

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

Всем удачи в вашем не простом, но очень интересном деле. Не забывайте регистрироваться и писать комментарии.

Сообщение highlight.js — лучшая подсветка синтаксиса кода появились сначала на Wiki | PWODEV.

is email? javascript verification function

Paul Osmachko — Wed, 06 Jun 2018 10:08:46 +0000

Есть форма, в ней поле input в котором нужно ввести email. Как верифицировать форму, проверить строку на наличие email адреса? Как понять что поле email заполнено правильно? is email — JS функция проверки строки, на корректность email. Верификация email адреса.

Вот сама js функция is email:

function is_email(email) {
	var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	return regex.test(email);
}

Функция вернет TRUE или FALSE.

javascript verification function

Эту функцию лучше всего поставить перед отправкой формы, как-бы валидация формы. Если все сходится, и функция вернет TRUE, отправляем форму дальше стандартными средствами или с помощью ajax. Еще будет нужно чтобы форма не отправлялась по событию submit. Как это сделать я мы уже писали в статье: Как отменить отправку формы с помощью js.

На данный момент нам нужна была только javascript функция. Варианты на других языках программирования предлагайте в комментариях, добавим. А чтобы добавить комментарий — регистрируйтесь. Будем рады всем!

Сообщение is email? javascript verification function появились сначала на Wiki | PWODEV.

Клик вне элемента — jQuery click outside

Paul Osmachko — Thu, 11 Jan 2018 11:40:53 +0000

Сегодня поступила задача получить событие клика на странице, за пределами определенного элемента. Другими словами клик вне элемента или jQuery click out или outside click. Что-то похожее на событие hover out или mouse leave или mouse out но по клику.

Отследить клик за пределами определенного элемента пригодится например чтобы закрыть открывшееся меню, или закрыть попап (close popup by outside click). Либо для любых других ваших задач.

Как реализовать это? Как отследить клик вне элемента?

jQuery(document).on('click',function (e) {
 var el = '.element';
 if (jQuery(e.target).closest(el).length) return;
 // дальше пишем код который нужно выполнить по клику вне элемента
});

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

Сообщение Клик вне элемента — jQuery click outside появились сначала на Wiki | PWODEV.

Парсер сайтов и контента — phpQuery

Paul Osmachko — Tue, 02 Jan 2018 16:19:11 +0000

Сегодня поговорим о том как сделать парсер сайтов на php или html tag parser. Задача получить контент сайта с помощью php, а дальше из полученного контента вытащить содержимое какого-либо тега или class или id. Например jQuery это хороший парсер контента. Тоесть чтобы получить какой-то элемент страницы достаточно знать только селектор этого элемента. Вообщем нам нужен такой же парсер контента сайтов как jQuery но на php.

Для реализации этого есть php класс DOMDocument. Этот класс php парсит html код как делает это обычный Javascript. Но чтобы упростить пользование класса DOMDocument есть библиотека phpQuery это аналог jQuery но на php.

Ссылка phpQuery на Google Code

Задание думаю понятно, теперь приступим к реализации php парсера.

Парсер сайтов на phpQuery.

Для начала скачиваем последнюю версию плагина phpQuery по этой ссылке или из репозитория. Кладем файл в нужную директорию (в нашем случае в корень сайта). И подключаем библиотеку которая поможет нам парсить контент сайта.

include_once 'phpQuery.php';

Итак библиотеку мы подключили. Теперь нам нужны демо данные. Для этого записываем в php переменную html код.

Статья как записать в php переменную html код.

$html = <<
 Title
 Content

CONTENT;

Демо данные у нас есть. Мы сохранили их в переменную $html. Наша задача получить содержимое .content

Другой вариант можно также получить контент сайта по URL для того чтобы сделать парсер php функцией file_get_contents:

$html = file_get_contents('http://wiki.pwodev.com/');

Добавляем демо данные или контент сайта в обьект модуля:

$document = phpQuery::newDocument($html);

Теперь нам нужно парсить html код по тегу. Парсим контент следующей функцией:

$echo = $document->find('.content');

Селектор такой же как и в jQuery или как в css. Все довольно просто. Теперь чтобы вывести полученное содержимое достаточно написать:

echo $echo;

Если нам нужно вернуть html код этого класса а не вывести на экран используем следующий метод: $echo->htmlOuter();

var_dump($echo->htmlOuter());

/* RESULT
string(34) "
Content
" 
*/

$echo->html(); — вернет содержимое без родительского искомого класса. То есть без «

$echo->getString(); — вернет массив текста без тегов.

Полный список методов есть в официальной документации этой библиотеки.

Полный код сегодняшнего урока:


 Title
 Content

CONTENT;

$document = phpQuery::newDocument($html);
$echo = $document->find('.content');

var_dump($echo->html());

Еще один пример использования:

find('.post .title');

foreach ($echo_elements as $el) {
 $pq = pq($el); // Это аналог $ в jQuery

 $old_title = $pq->find('a')->getString()[0];
 $pq->find('a')->attr('href', 'http://wiki.pwodev.com/')->html('New title. Old - '.$old_title); // меняем атрибуты найденого элемента и контент

 $pq->find('div.remove_element')->remove(); // удаляем ненужный элемент

 $pq->find('a')->prepend('Title: '); // добавляем контент в начало
 $pq->append('Next element'); // добавляем контент в конец
}

var_dump($echo_elements->html());

На этом пока все. Надеюсь всем было интересно и познавательно. Если кто-то хочет дополнить статью пишите в комментарии. Также добро пожаловать к нам в сообщество.

Сообщение Парсер сайтов и контента — phpQuery появились сначала на Wiki | PWODEV.

Организация JavaScript файлов, модульный подход

Paul Osmachko — Thu, 16 Nov 2017 13:27:58 +0000

Не так давно столкнулся с одним сайтом где один javascript файл содержал больше чем 15 тысяч строк. В нем лежали все модули которые использовал сайт, часть кода была сжатая а другая часть читабельная. При попытке отформатировать код в PHPStorm, в коде появлялось неисчислимое количество ошибок. Было принято решение переделать всю структуру JS кода на сайте. Но как часто бывает, времени на это было очень мало, и поэтому быстрый фикс был — хардкод. Но с оговоркой что когда-нибудь вернемся и все переделаем. И вот наконец-то время это пришло.

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

Пример JS кода:

/**
 * =====================================================================================================================
 * App
 * =====================================================================================================================
 */
var App = (function (r, $) {
 "use strict";

 /**
  * private options
  * =================================================================================================================
  */
 var private_option_1;
 var private_option_2;

 /**
  * private method 1
  * =================================================================================================================
  */
 function private_method_1() {
 // code
 }

 /**
  * private method 2
  * =================================================================================================================
  */
 function private_method_2() {
 // code
 }

 /**
  * public options
  * =================================================================================================================
  */
 r.public_option_1 = 'public_option_1';
 r.public_option_2 = 'public_option_2';

 /**
  * public method 1
  * =================================================================================================================
  */
 r.public_method_1 = function() {
 // code
 };

 /**
  * public method 2
  * =================================================================================================================
  */
 r.public_method_2 = function() {
 // code
 };

 /**
  * return
  * =================================================================================================================
  */
 return r;

})(App || {}, jQuery);

console.log(App);

Если имеются дополнения пишите в комментариях, будем добавлять.

Сообщение Организация JavaScript файлов, модульный подход появились сначала на Wiki | PWODEV.

jQuery touch swipe или как отследить жесты

Paul Osmachko — Tue, 24 Oct 2017 06:58:09 +0000

Что такое жесты и какие они бывают:

Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
hold — событие долгому длинному нажатию

Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:

jQuery('body').swipe({
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 console.log(direction);
 }
});

Теперь мы можем дополнять наш сайт жестами.

Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:

jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        } 
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
 },
 triggerOnTouchEnd:false,
 threshold:20 // сработает через 20 пикселей
});

Параметры:

event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт

jQuery(event.target)

phase

start — указывает начальную фазу события касания
move — указывает на событие перемещения
end — указывает на завершение события
cancel — указывает на отмену события

direction

left — указывает на передвижение влево
right — указывает на передвижение вправо
up — указывает на передвижение вверх
down — указывает на передвижение вниз
in — указывает на событие помещения в обьект
out — указывает на событие выхода из обьекта

distance — расстояние которое пользователь пролистал

duration — продолжительность пролистывания в миллисекундах

fingerCount — количество пальцев при таче

fingerData — координаты пальцев при событии тач

currentDirection — текущее направление движения тача

Сайт библиотеки плагина и документации к плагину

Сообщение jQuery touch swipe или как отследить жесты появились сначала на Wiki | PWODEV.