Привет, мир!
В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега
10 полезных скриптов JavaScript
JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.
В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.
1. Максимальная высота или ширина в наборе элементов
Очень полезный скрипт для выравнивания высоты или ширины колонок.
Вариант для высоты:
Использование:
Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.
Демонстрация использования кода
2. Эффективная проверка дат
Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.
Использование:
Следующая строка вернет false, так как в ноябре 30 дней:
Демонстрация использования кода
3. Устанавливаем соответствие между шириной экрана и точками излома для адаптивного дизайна
Быстрый способ связать медиа запросы CSS и код JavaScript.
Использование:
Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.
Демонстрация использования кода
4. Выделение текста
Существует много плагинов jQuery для выделения текста, но можно легко реализовать решение такой задачи без использования библиотек. Скрипт возвращает оригинальный текст, в котором найденные термины помещены в тег, и поэтому их легко стилизовать с помощью CSS.
Также можно отменить выделение текста.
Использование:
Демонстрация использования кода
5. Анимированные текстовые эффекты
Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы было легче использовать):
Использование:
Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:
Демонстрация использования кода
6. Проявление элементов одного за другим
Плагин jQuery для проявления элементов одного за другим.
Использование:
Демонстрация использования кода
7. Подсчет нажатий кнопки мыши
Иногда требуется подсчитать, сколько раз пользователь нажал на элемент. Обычно для решения задачи создают счетчик в виде глобальной переменной, но jQuery помогает избавиться от засорения глобального пространства имен с помощью использования data() для хранения значения.
Демонстрация использования кода
8. Встраивание видео Youtube из ссылки
Полезный скрипт для встраивания видео Youtube из ссылки с использованием параметров. Код работает почти на всех форматах ссылки Youtube, так как используется специальное регулярное выражение. Также скрипт фиксирует проблему «super z-index», которая проявляется при встраивании видео Youtube.
Использование:
Значения для параметров описаны в документации Youtube API
Демонстрация использования кода
9. Уменьшаем размер текста
Данный скрипт похож на функцию excerpt в WordPress. Он обрезает текст по количеству слов и добавляет специальный элемент для указания сокращения текста. Работает с текстом, в котором имеются другие встроенные теги (например, такие как strong или em или ссылки).
Демонстрация использования кода
10. Создаем динамическое меню
Создаем любое меню динамически. Простой скрипт с большим потенциалом.
Использование:
Демонстрация использования кода
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com/2012/10/04/10-useful-and-time-saving-javascript-snippets/
Перевел: Сергей Фастунов
Урок создан: 7 Октября 2012
Просмотров: 79917
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Где посмотреть реальные примеры использования «правильных» клиентских javascript?
Сейчас на большинстве сайтов скрипты вставлены через множество script-тэгов в начале, середине и конце страницы, в каждом из которых свои глобальные функции, повторные вызовы $(document).ready, просто «инлайновые» скрипты и прочие штуки, которые с точки зрения некоторых современных положений «не тру».
Где можно найти реальные примеры использования клиентского javascript, который был бы грамотно и приятно оформлен с точки зрения программирования, например, с одной точкой входа, в виде модулей, с аккуратным использованием своих и сторонних библотек, таких как API Яндекс.Карт, jQuery, например, и т.п.?
- Вопрос задан более трёх лет назад
- 2422 просмотра
Отличный вопрос, а большинство ответов дурацкие. Да, до «однозначно идеальной» архитектуры коммьюнити пока не доросло, но это не значит, что не надо интересоваться тем, как можно сделать лучше и опираться на чей-то опыт.
Как раз за последнее время с появлением es2015 и webpack дела стали куда лучше, чем когда-либо.
Однако в сводобном доступе больших полноценных проектов я встречал мало, хотя может быть не так хорошо искал. Но известные примеры есть, посмотри вот —
Помимо этого неплохой идеей будет посмотреть на бойлерплейт проекты, которые как раз созданы для того, чтобы предложить своё видение архитектуры и того, «как правильно».
Посмотри на react-starter-kit. Там собрано очень много полезного. Хотя я и не советую вслепую брать бойлерплейты и разворачивать на них свой проект, но очень советую на них посмотреть «изнутри» и узнать много интересного или просто нового.
Посмотри на examples в react-router’е. Конкретно в примере huge-apps показывается, как можно бить вебпаком код на куски и подгружать только необходимое на лету.
Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в «компонентном» мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.
JavaScript Уроки и примеры
JavaScript — это язык программирования HTML и Web.
JavaScript прост в изучении.
Этот учебник научит вас JavaScript от Basic до Advanced.
Примеры в каждой главе
С помощью редактора «Попробуйте сами» вы можете изменить все примеры и просмотреть результаты.
Пример
Мой первый JavaScript
Мы рекомендуем прочитать этот учебник в последовательности, указанной в левом меню.
Узнать по примерам
Примеры лучше, чем 1000 слов. Примеры часто легче понять, чем текстовые пояснения.
Этот учебник дополняет все объяснения с уточнением «Попробуйте сами» примеры.
Если вы попробуете все примеры, вы узнаете много о JavaScript, в очень короткое время!
Зачем изучать JavaScript?
JavaScript является одним из 3 языков все веб-разработчики должны узнать:
1. HTML Определение содержимого веб-страниц
2. CSS Указание макета веб-страниц
3. JavaScript Программирование поведения веб-страниц
Веб-страницы не являются единственным местом, где используется JavaScript. Многие настольные и серверные программы используют JavaScript. Node. js является наиболее известным. Некоторые базы данных, такие как MongoDB и CouchDB, также используют JavaScript в качестве языка программирования.
Ты знала?
JavaScript и Java-это совершенно разные языки, как в концепции, так и в дизайне.
JavaScript был изобретен Брендан Айх в 1995, и стал стандартом ECMA в 1997.
ECMA-262 является официальным названием стандарта. ECMAScript является официальным названием языка.
Вы можете прочитать больше о различных версиях JavaScript в версии главы JS.
Скорость обучения
В этом учебнике, скорость обучения является вашим выбором.
Если вы боретесь, сделать перерыв, или перечитать материал.
Всегда убедитесь, что вы понимаете все «попробовать сами» примеры.
JavaScript для начинающих – простые примеры
Всем привет, вот и пришло время узнать нам с Вами основы JavaScript, так как JavaScript является той технологией, с помощью которой можно организовать динамические HTML страницы у себя на сайте.
Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML. Также, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.
Основы JavaScript — теория
И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.
Зачем нужен JavaScript?
А зачем Вы спросите организовывать динамические страницы?
Во-первых, это красиво, удобно и современно.
Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.
Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.
Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.
В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.
Код HTML:
Узлы этого кода:
Корневой Узел – html
Дочерний Узел узла HTML — body
Дочерний Узел узла body – p
Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).
Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.
По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.
Пример кода JavaScript
Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать «Добавить в список» и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.
Сам пример:
- Первоя строка
- Вторая строка
- Третья строка