JavaScript - решения на практически задачи

Добри практики в примери. Тази книга представлява сборник с практически примери по програмиране на JavaScript. В нея се дават решения не само на прости, но и на по-сложни задачи, за да бъде полезна, както за начинаещите, така и за действащите програмисти.

В книгата ще намерите 136 примера, които са разделени тематично и разглеждат както по-елементарните операции в JavaScript, така и работата с масиви, функции, форми, AJAX и jQuery. Специално внимание е обърнато на използването на странични библиотеки; достъпа до потребителския интерфейс; ефектите за анимация; работата с изображения, графики, таблици и диаграми.

В последната част на книгата са разгледани множество скриптове, които рано или късно ще бъдат полезни при разработката на вашите приложения.

Кодът към примерите е специално разработен за книгата, като на места се използват и готови библиотеки, когато това е целесъобразно. Всички примери са щателно тествани, а кодът към тях е предоставен за безплатно сваляне - тук.

Асеневци трейд ЕООД
София, 1618
р-н Витоша, Еровете № 13, ет. 2
store@asenevtsi.com

Въведение
Елементарни операции

• Извличане на списък от текстов низ
• Проверка за непразен низ
• Вмъкване на специални символи в низ
• Замяна в низ по шаблон
• Конвертиране на десетична стойност в шестнайсетична
• Конвертиране на градуси в радиани и обратно
• Изчисляваме сумата на числа в таблица
• Конвертиране на дата с формат ISO 8601 в обекта Date
• Анонимни функции и таймери
• Изчисляване на дължината на дъга
• Търсене на подниз
• Търсене на всички съвпадения
• Правим първата буква в низ главна
• Функция за срязване на низ

Работим с масиви

• Инициализация на масив
• Добавяне и промяна на елементи в масива
• Създаване и използване на многомерен масив
• Търсене в масив
• Изчисляване на най-малкия елемент в масив
• Изчисляване на максимум в двумерен масив
• Превръщане на двумерен масив в едномерен
• Изтриване или замяна на елементи в масив
• Извличане на част от масива
• Прилагане на функция към всеки елемент от масива
• Проверка на съдържанието на масив
• Разбъркване на елементите в масив в случаен порядък
• Реализация на функция inArray()
• Филтрираме масив
• Прилагаме функция към всеки елемент от масива и връщаме нов масив
• Използване на класа Array за създаване и работа с масиви
• Сортиране на масив
• Многомерни масиви и класът Array
• Асоциативни масиви в JavaScript

Функции в JavaScript

• Избор на правилното местонахождение на вашите функции
• Изнасяме функциите в отделен сценарий
• Предаване на функция в качеството на аргумент на друга функция
• Рекурсия
• Създаване на функция, запомняща състояние
• Функция брояч
• Свойства на функция
• Конвертиране на аргументите на функция в масив
• Параметри по подразбиране
• Предотвратяваме блокиране на кода
• Аналог на функция print_r() в JavaScript

Достъп до потребителския интерфейс

• Получаваме достъп до елемент и неговите родителски и дъщерни елементи
• Получаваме достъп до всички картинки на страницата
• Получаваме достъп до картинките с помощта на селектори
• Задаваме атрибута style на елемент
• Получаване на атрибута на документ
• Търсене на всички елементи с определен атрибут
• Добавяме нови елементи в документа пред целеви елемент
• Вмъкване на нови елементи след целеви елемент
• Скриваме елементи на страницата
• Скриване/показване на цели блокове от страницата
• Запазване в променлива на селектирания на страницата текст
• Изскачащ прозорец при влизане в сайта
• Собствен индикатор на прогреса

Работим с форми

• Колекцията Forms
• Свойства, методи и събития на обекта на формата. Изпращане на форма без натискане на бутона Submit от потребителя
• Получаване на данни от полетата за въвеждане. Проверка за коректността на въведените данни
• Работа с textarea
• Работа с поле за отметка
• Работа с бутони
• Проверка за коректността на имейл и телефонен номер
• Проверка за допустимостта на потребителско име
• Не забравяйте за required и останалите особености на HTML
• Проверяваме коректността на имейл адрес без JavaScript
• Въвеждане на цели числа
• Регулярни изрази в текстови полета. Проверка със средствата на браузъра
• Работим с input type="date"
• Поле с падащ списък със средствата на браузъра
• Прикрепваме визуален редактор към textarea

Използване на странични библиотеки

• Няма да изобретяваме велосипеда отново
• Библиотеката Math.js
• Плавна промяна на прозрачността с помощта на jQuery
• Управление на видимостта на елементите на страницата с помощта на jQuery
• Простичка анимация
• Плавно скриване/показване на елементи от страницата
• Ефект на затихване
• Създаване на прозорец за избор на дата с помощта на jQuery UI
• Красив диалогов прозорец
• Индикатор на прогреса
• Плавно приплъзване към началото на страницата
• Дублиране на заглавията на таблица в края ѝ
• Колонки с еднаква височина
• Сортиране на списък
  в азбучен ред
  • Проверка на зареждането на изображение
  • Автоматично зареждане на съдържанието при приплъзване
  • Промяна на размерите на изображение
  • Зареждане на външно съдържание в div елемент
  • Таблица с раирани редове
  • Частично обновление на страницата
  • Промяна на размерите на блока по широчината и височината на прозореца
  • Собствена библиотека
  Технологията AJAX и jQuery
  • Просто взаимодействие с PHP сценарий
  • Проверка за съществуване на потребителско име
  • Използване на плъгина jQuery Form
  • Валидиране на данни с помощта на плъгина jQuery Validate
  Плъгини и визуализация
  • Строим проста графика
  • Сложна графика на въртящ момент
  • Кръгова диаграма
  • Създаване на таблица с помощта на jqGrid. Прост пример
  • Работа с таблици със средствата на jqGrid
  Правим слайдер за сайт собственоръчно
  • Правим слайдер със собствените си ръце
  • Слайдер с номерация
  Красиви подсказки за сайта
  • Създаване на подсказки собственоръчно (без странични решения)
  • Скриптът ToolTip
  Изображения и анимационни ефекти
  • Промяна на изображението след събитие с мишката
  • Създаване на слайдер във вид на фотолента
  • Зареждане на изображение в div
  • Въртележка с изображения
  • Затъмнение на картинка при поднасяне на мишката с помощта на филтър
  • Използване на галерията FancyBox
  • Разглеждане на предходната и следходната картинка. Промяна на външния вид на прозореца на галерията
  • Анимационните ефекти на библиотеката jQuery UI
  Полезни скриптове
  • Брояч на посещенията с помощта на Cookie
  • Забраняваме на браузъра да селектира текст
  • Добавяме информация за авторските права при копиране на текст
  • Забрана за преглеждането на HTML кода
  • Отложено изтегляне на файл
  • Изскачащ прозорец при влизане в сайта
  • Извеждане на информация за потребителя
  • Време, прекарано на страницата
  • Преместване на елемент по страницата
  • Меню с връзки
  • Получаване на променливи от адресната лента на браузъра
  • Оцветяване на JavaScript код
  • Обратно отброяване на времето
  • Проверяваме от коя страница е дошъл потребителят
  • Отваряме нов прозорец и променяме в него стойността на поле
  • Преобразуване на дата
  • Меню с помощта на Superfish
  • Преместване на елемент на страницата в определена област
  • Преместване със средствата на jQuery UI (Draggable)
  • Промяна на размера на елементи
  • Затъмняване на картинка с помощта на филтър
  Вместо заключение