JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

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

Джаваскрипт что это такое

JavaScript: это что такое, зачем это нужно?




Точный термин Джава скрипт – язык сценариев для интернета. Он является интерпретируемым языком, это означает, что для написания и запуска скриптов не требуется компилятора, как в других языках. Достаточно написать сценарий, в html документе или в отдельном js файле, загрузить страницу в web-браузере. Если все написано правильно, то вы сможете посмотреть результат.

При запуске скриптов необязательно использовать сервер. Html файлы со встроенными js, работают прямо в браузере. Разработчики могут писать  в текстовом редакторе, без установки дополнительных программ.

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

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

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

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

Язык программирования javascript с нуля

Выпущенный js много лет назад, был первым языком сценариев. Вначале он был не таким мощным, как сейчас. В основном использовался для интересных анимации и разных фишек с dhtml. С тех пор он стал расти, выпускались новые библиотеки, а с растущей популярностью node.js. он научился работать с базой данных. Потребности увеличивались и в web-платформе, появилась много всяких вещей.

Javascript: примеры кода

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

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Между ними написать код. Для записи текста и последующего показа используем write. Полностью будет выглядеть вот так.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Глобальное свойство document ссылается на структуру портала. Он способствует взаимодействию с тегами и атрибутами, внутри всего документа. В нашем случае вызывая write, мы записываем в теги body сообщение “Hello World!”. Чтобы вызвать конкретный тег, назначьте атрибуту id название, например, mess.

Используйте getElementById(id) – вместо id указывают имя атрибута. Потом через точку запишите innerHTML и присвойте ему, знак равно, сообщение Hello World!

Важно: Будьте внимательны и соблюдайте регистр (большая или маленькая буква), когда работаете с js скриптами, иначе при запуске скрипта вы получите ошибку. Все ошибки можно увидеть если нажать, правой кнопкой мыши на странице сайта->Посмотреть код->вкладка Console. Более быстрый способ клавиша f12.

 

Заменив строчку из предыдущего скрипта на эту document.getElementById(“mess”).innerHTML=”Hello world!”;, появится ошибка в консоли

Uncaught TypeError: Cannot set property ‘innerHTML’ of null.

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

javascript примеры кода unload
javascript примеры кода.

Переменные являются обязательными при написании серьезных приложений, они могут хранить временные значения: цифры, символы, название и т.д. Обозначаются переменные словом var или let, дальше следует название переменной и значение.

Вот как это выглядит:

let a = 5;

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

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

Дальше образец всех четырёх типов:

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Нередко бывают ситуации, когда необходимо выполнить сценарий, при определённых условиях. Например, сравнить вводимую информацию пользователя и если строка пустая, вывести сообщения. За это отвечает условный оператор if else.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Когда требуется проверить сразу несколько условий, конечно можно воспользоваться if else. но рекомендуется switch case.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Объект math вызывается для выполнения математических операций. Например, чтобы узнать число Pi, достаточно записать вот так Math.PI. Для выполнения остальных решений используются:

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

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




Dom запросы осуществляют поиск по html документу и возвращают первый похожий тег, обозначенный в скобках querySelector. После получения над ним можно применить действие. Например, сменить цвет, как показано на рисунке.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Первая строка закрашивает блок в красный цвет, селектор делает запрос по классу. Во втором случае перекрасится контейнер номер два. Третий выбор сразу по двум параметрам .block3 и .three и четвёртый изменение цвета последнего контейнера.

Для выполнения запроса сразу над несколькими тегами используют querySelectorAll.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

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

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

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

Получив ссылку на дочерний элемент, можно удалить тег по идентификатору elem.children[n].remove, где n номер тега который нужно удалить. Помимо, добавления dom-узлов, есть похожие функции для создание текстов createTextNode. Весь список, показан на скриншоте ниже.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Библиотека jquery: установка и настройка плагинов

Расширяет возможности стандартного языка сценариев. С помощью неё, вы сможете быстро разрабатывать приложения, и получите дополнительные функции, работы с dom-узлами. Приведу несколько задач.

В предыдущем коде показано действие производимое мышкой по кнопке. Используя jQuery, достаточно указать в скобке атрибут, на котором должно сработать действие, вот так $(‘.but2’).on(‘click’, function() {…});.

Как видите, такой код более компактный. Иногда кнопка может появиться не сразу, а позже, например, при добавлении её через appendChild, в таком случае, вариант вызова событий мыши не сработает. Рекомендуется сделать, как показано на картинке ниже.

Действие происходит в body, указывается дополнительный параметр после click. Когда кнопка добавлена, то по ней можно сделать щелчок, и появится сообщение. Убедитесь в этом сами, запустив html документ в браузере. Попробуйте поменять метод используя одну из тех, которая закомментирована, чтобы увидеть при каких условиях срабатывает событие мыши.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Практически все плагины написанные сторонними разработчиками работают по технологии jquery. Продемонстрирую простенькую галерею, на foncybox. Преимущество этого плагина заключается в том, что он легко устанавливается и его может поставить даже новичок. Взглянем на проект галереи, базу данных создавать не будем, все картинки извлекаются из папки и показываются на сайте без подключения БД. opendir-открывает папку с файлами, readdir – получает содержимое каталога.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Настроить плагин для показа изображения просто. Подключаем 3 файла, стили, jquery и fancybox. Дальше добавляем атрибут к ссылкам. Data-fancybox=”gallery”. Всё настройка завершена, ничего сложного. В итоге, щёлкнув по изображению мы получим:

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Сверху 5 кнопок.

  1. Слайдшоу – переключает рисунки каждые несколько секунд.
  2. Полноэкранный режим – отображает изображение во весь экран. Многие могли видеть это на порталах с фильмами, где при щелчке на похожей кнопке видео начинает показывать во весь экран.
  3. Tumbnails – показывает  сбоку все рисунки, в ссылках которых присутствует атрибут data-fancybox.
  4. Share – подойдёт для тех кто любит выкладывать фото и делиться с друзьями.
  5. Закрывает окно.

Здесь продемонстрирован только один плагин. Его можно установить к себе на сайт и посетители смогут делиться понравившимися картинками.

Примеры динамической загрузки статей wordpress load more

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

Не стоит скачивать библиотеку из интернета, так как в wp она уже есть, для работы. Попытка поставить со стороны, может привести к тому, что некоторые элементы на сайте перестанут работать. Просто сделайте подключение командой wp_enqueue_script(“jquery”);..

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

Размещается команда в newtemplate_scripts() файла functions.php. Добавим блок, по которому будет произведен щелчок, в моём случае выбран логотип wordpress.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Можете скачать любой из интернета или нарисовать свой. Создаём папку в корне вашего шаблона, назовем image, там будет wordpress изображение.

Не забываем записать class=”logo” у div-контейнера, это важно для дальнейшей работы. В functions.php добавляем следующий код:

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Сам документ нужно добавить в соответствующую папку и записать js-сценарий.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

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



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

Сначала в админке изменим опции “количество постов на страницу”. Настройки ->чтение.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Дальше сделаем изменения как показано на скриншоте, изменения незначительные, однако появилось два новых фрагмента.

  • WP_Query – выбирает записи из базы.
  • wp_reset_postdata – восстанавливает значение глобальной переменной post. Используется во избежание ошибок.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Для успешного запуска, нам нужно воспользоваться ajax и отправить методом post номер страницы и action. Поэтому добавим  в function.php my_action_javascript и запустим его

add_action( ‘wp_footer’, ‘my_action_javascript’ );

Отправляем page=2, по адресу, где находится admin-ajax.php.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Для вывода информации используется my_action. Она предоставлена на следующем скриншоте.

JavaScript (Джава скрипт): что это такое простыми словами + примеры кода и создание галереи с нуля

Обратите внимание, в самом верху скриншота мы запускаем один и тот же скрипт два раза. Один для авторизированного пользователя, другой для гостя. Дальше следуют код, выводящий все посты. В главном документе нужно взять тег article и разместить в цикле. На этом всё, после нажатие кнопки посты сами будут подгружаться. Исходники прилагаются, если что непонятно скачайте шаблон, установите и посмотрите код.

Скачать исходники кода по всему уроку + ИСХОДНИКИ ГАЛЕРЕИ можно по ссылке ниже (пароль на архив FIRELINKSRU):

В папке js_script, для галереи отведено только папка gallery, далее шаблон newtempalte приложен с подключенными javascrip и jquery.

Если статья была интересна то не забывайте поставить лайк и до встречи в следующем выпуске.

Рейтинг
( 2 оценки, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Комментарии: 1
  1. Руслан Галиулин (автор)

    Создаёте папку с название сайта, в ней папку www, а потом туда заливаете скрипт с галерей и папки small и big. Запускаете denwer, а потом открываете в браузере всё очень просто. :shock: :shock: :shock: :shock:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: