Canvas — элемент HTML5, позволяющий создавать растровые изображения при помощи языка программирования JavaScript. При помощи <canvas> можно создавать графики, игры, приложения. Самый простой вариант — создание двухмерной и трёхмерной графики (при использовании WebGL). Набор роликов о работе с этим элементом позволит быстро вникнуть в тему и облегчить дальнейшее знакомство с еще более интересными подходами, использующими канву. Библиотеки Pixie.js, Three.js и другие позволяют визуализировать проекты под многие требования. На курсах JavaScript неизменно показываю пример океана на канве (не мой просто, просто показываю 🙂 ) Читать далее Canvas в HTML: 10 шагов
Рубрика: Курсы JavaScript
Задания по jQuery
jQuery введение. Задания
- Подключите jQuery, убедитесь в доступности объекта -библиотеки. Примечание: попробуйте подключение с разных CDN-хранилищ, и при помощи локального файла
- Откройте верстку http://codepen.io/htmllab/pen/NNaGOV
Выберите при помощи селекторов jQuery
— все HTML-элементы strong и окрасьте их в зеленый цвет
— найдите все HTML-элементы em и добавьте им класс.selected
— Найдите все элементы mark, которые находятся в div с классом row и задайте им класс.selected
— Найдите все гиперссылки и удалите у них подчеркивания
— Найдите все HTML-элементы, который содержат слово «Задания» и находятся в элементе с классом .container
— Переключите элементы strong с классом some в состояние без этого класса, а тем элементам (strong), у которых небыло этого класса — добавьте.
— среди набора элементов с классом .row удалите класс у второго элемента
— прочитайте CSS-свойство color у второй гиперсылки в тексте
Визуализация данных Chartist.js
Chartist.js — маленькая (10Кб в GZIP) JavaScript-библиотека которая создаёт простые отзывчивые графики. Она не зависит от других библиотек, т.е. может применяться самостоятельно. Диаграммы Chartist.js легко настраиваются и оформляются так, как это нужно разработчику. Библиотека использует SVG для построения графиков и поддерживается всеми современными браузерами. Большинство браузеров поддерживают SVG анимацию Chartist.js Читать далее Визуализация данных Chartist.js
JavaScript конструкторы
JavaScript конструкторы, прототипное наследование, методы встроенных объектов — темы, которые требуются при устройстве на работу или свободной практике. При первом знакомстве с JS, если раньше не занимались программированием, на выполнение задач в JavaScript связанных с объектами придется затратить больше времени, чем на предыдущие задания. Как обычно нам помогут книги по JS, методические пособия с курса, группа поддержки выпускников в vk.com. Если есть некоторая растерянность в работе, отложите текущие задачи и поиграйте в CodeCombat или FightCode 🙂 Читать далее JavaScript конструкторы
Задачи на регулярные выражения
Задачи на регулярные выражения важны в работе программиста. Регулярные выражения — язык для построения шаблонов поиска и осуществления манипуляций с строками в тексте. Позволяет выполнять проверку строк на соответствие правилам шаблона, разбивать строки, производить поиск и замены отдельных подстрок. Читать далее Задачи на регулярные выражения
Задачи на работу с объектами
Задачи на работу с объектами важны для глубинного понимания языка программирования. JavaScript является объектно-ориентированным языком разработки, потому важно научиться решать задачи используя механизм объектов, массивов и функций. Последние два тоже являются специфическими объектами. Кроме этих заданий по JavaScript, можно поискать на просторах сети задания с собеседований на вакансию JS-разработчика. Читать далее Задачи на работу с объектами
Калькулятор ипотеки
На базовом курсе JavaScript рассматриваем формулу вычисления ипотечного аннуитетного платежа, но полноценного калькулятора ипотеки нужно создать HTML форму и подружить ее с кодом JS. Расчет ипотеки требует знания размера кредита S
, процентной ставки p
и времени кредитования в платежных периодах n
(т.е. в месяцах). Если в нашем кредитном калькуляторе нужно учитывать первоначальный платеж,, то можно ввести дополнительную переменную и рассматривать целую стоимость недвижимости, а не тело кредита (в заметке это не делается). Читать далее Калькулятор ипотеки
Создание функции в JavaScript
Создание функции в JavaScript помогает познакомится с удобным механизмом, облегчающим написание и использование кода. В JavaScript функции занимают особую роль, являются типом данных. Помимо заданий, описанных ниже, можно выполнить задачи по JavaScript базового уровня используя функции JavaScript`а (например, написать функцию находящую объем цилиндра или размер переплат). Можно попробовать выполнить задачу посложней, написать функцию calendar(), принимающую год и месяц и возвращающую таблицу с днями соответствующего месяца. Но, в начале рекомендуется выполнить следующие десять заданий. Читать далее Создание функции в JavaScript
Крестики-нолики
Крестики-нолики — логическая игра между двумя участниками на поле размером 3 на 3 клетки или бо́льшего размера. Один из участников использует «крестики», второй — «нолики». Игроки делают поочередно ходы на свободных клетках поля размером три на три. Выигрывает игрок, который первый выстроил в ряд (горизонтально, вертикально или по диагонали) три крестика или три нолика. После выстраивания трех знаком подряд, они перечеркиваются — игра завершается. Читать далее Крестики-нолики
JavaScript циклы
JavaScript циклы и управляющие конструкции предлагается изучать при помощи задач содержащих вопросы охватывающие работу с операторами if
, switch
, for
, while
. Первые две конструкции — операторы условного выбора (IF называют оператором ветвления), вторые две — циклические операторы. Есть еще два циклических оператора — do/while и for/in Читать далее JavaScript циклы