Видео урок: Изучение JavaScript. Основы JavaScript Web дизайн с помощью javascript

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

Что такое JavaScript на самом деле?

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

Что произошло?

Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) "Hello world!".

Ускоренный курс по основам языка

Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!

Переменные

Примечание : JavaScript чувствителен к регистру - myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

После объявления переменной вы можете присвоить ей значение:

MyVariable = "Bob";

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

Var myVariable = "Bob";

Вы можете получить значение, просто вызвав переменную по имени:

MyVariable;

После установки значения переменной вы можете изменить его позже:

Var myVariable = "Bob"; myVariable = "Steve";

Обратите внимание, что переменные имеют разные типы данных :

Переменная Пояснение Пример String Number Boolean ArrayObject

Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.	var myVariable = "Bob";
Числа. Числа не имеют кавычек вокруг них.	var myVariable = 10;
Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках.	var myVariable = true;
Массив, который позволяет хранить несколько значений в одной ссылке.	var myVariable = ; Обратиться к каждому элементу массива можно так: myVariable , myVariable , и т.д.
В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.	var myVariable = document.querySelector("h1"); Все это из вышеприведённых примеров.

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

Вы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:

/* Всё, что находится тут - комментарий. */

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

// Это комментарий

Операторы

Примечание : Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите "35" + "25" в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия - это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, if ... else . Например:

Var iceCream = "chocolate"; if (iceCream === "chocolate") { alert("Yay, I love chocolate ice cream!"); } else { alert("Awwww, but chocolate is my favorite..."); }

Выражение внутри if (...) - это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции События

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

Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

Document.querySelector("html").onclick = function() {};

эквивалентно

Var myHTML = document.querySelector("html"); myHTML.onclick = function() {};

Просто так короче.

Прокачаем пример нашего веб-сайта

Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.

Добавление смены изображения

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

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

Сохраните изображение в вашу папку images .

Переименуйте это изображение в "firefox2.png" (без кавычек).

Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.) var myImage = document.querySelector("img"); myImage.onclick = function() { var mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }

Сохраните все файлы и загрузите index.html в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

Итак, мы сохраняем ссылку на наш элемент в переменной myImage . Далее, мы создаём этой переменной обработчик события onclick с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

Мы получаем значение из атрибута src изображения.

Мы используем условие для проверки значения src, равен ли путь к исходному изображению:

Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .

Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.

Добавление персонального приветственного сообщения

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

В index.html , добавьте следующую строку перед элементом : Change user

В main.js , добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные: var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1");

Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже: function setUserName() { var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.innerHTML = "Mozilla is cool, " + myName; } Эта функция содержит функцию prompt() , которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK . В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage , который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием "name" , и устанавливаем это значение в переменную myName , которая содержит имя введенное пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.

Затем добавьте блок if ... else - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: if(!localStorage.getItem("name")) { setUserName(); } else { var storedName = localStorage.getItem("name"); myHeading.innerHTML = "Mozilla is cool, " + storedName; } Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде!) чтобы проверить, существуют ли данные в пункте name . Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName() .

Наконец, установите обработчик события onclick на кнопку. При нажатии кнопки запускается функция setUserName() . Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки: myButton.onclick = function() { setUserName(); }

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

Заключение

JavaScript is a programming language that adds interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, andanimation). This article helps you get started with this exciting language and gives you an idea of what is possible.

What is JavaScript, really?

Important : If you haven"t been following along with the rest of our course, download this example code and use it as a starting point.

Variables Variable Explanation Example String Number Boolean Array Object

A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks.	let myVariable = "Bob";
A number. Numbers don"t have quotes around them.	let myVariable = 10;
A True/False value. The words true and false are special keywords in JS, and don"t need quotes.	let myVariable = true;
A structure that allows you to store multiple values in one single reference.	let myVariable = ; Refer to each member of the array like this: myVariable , myVariable , etc.
Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.	let myVariable = document.querySelector("h1"); All of the above examples too.

So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn"t change, then you couldn"t do anything dynamic, like personalize a greeting message or change the image displayed in an image gallery.

Comments

You can put comments into JavaScript code, just as you can in CSS:

/* Everything in between is a comment. */

If your comment contains no line breaks, it"s often easier to put it behind two slashes like this:

// This is a comment

Operators Events

Real interactivity on a website needs events. These are code structures which listen for things happening in the browser and runs code in response. The most obvious example is the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:

Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }

There are many ways to attach an event to an element. Here we select the element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run.

Document.querySelector("html").onclick = function() {};

is equivalent to

Let myHTML = document.querySelector("html"); myHTML.onclick = function() {};

It"s just shorter.

Supercharging our example website

Now we"ve gone over a few JavaScript basics, let"s add a few cool features to our example site to see what is possible.

Adding an image changer

In this section, we"ll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.

First of all, find another image you"d like to feature on your site. Be sure it is the same size as the first image, or as close as possible.

Save this image in your images folder.

Rename this image "firefox2.png" (without quotes).

Go to your main.js file, and enter the following JavaScript. (If your "Hello world!" JavaScript is still there, delete it.) let myImage = document.querySelector("img"); myImage.onclick = function() { let mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }

Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

If you get stuck, you can compare your work with our finished example code on GitHub .

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic .

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

Две наиболее популярные среды Javascript

На сегодняшний день две наиболее используемые среды Javascript следующие:jQuery и MooTools. Посмотрите на опрос снизу:

Всплывающие изображения и зум

Lightbox

Вы наверняка знакомы с Lightbox - простой Javascript, используемы для наложения изображений на текущую страницу. Оригинальный Lightbox был выпущен в 2005. С тех пор было выпущено множество скриптов со схожими функциями, но использующие другие подходы и библиотеки Javascript.

Этот плагин аналогичен Lightbox JS, только написан на библиотеке jQuery.

Thickbox это плагин jQuery, который очень похож на Lightbox, разве что имеет больше функций. Он позволяет отображать: как одно, так и сразу несколько изображений, встроенное содержимое, содержимое в плавающем фрейме или же содержимое, переданное через AJAX в гибридной модели.

Обратите внимание: Web Designer Wall использует Thickbox для отображения своих галерей изображений и демонстрационных уроков.

Highslide JS служит той же цели, что и Thickbox, но еще имеет и эффект зума, что позволяет перетаскивать наложенное изображение.

FancyBox это плагин jQuery, который был разработан для того, чтобы заменить чрезмерно используемый Lightbox. У него схожие функции, но более красивые переходные эффекты (дизайн на манер Mac).

jQZoom позволяет отображать увеличенные изображения пиктограмм. Эта техника повсеместно используется на сайтах электронной коммерции (посмотрите для примера сайт Gap).

Галлереи и показ слайдов

Slideshow 2! Это класс javascript для Mootools 1.2, предназначенный для анимирования презентации изображений на вашем сайте.

Используя mootools v1.11, эта система слайдшоу и javascript-галлерей позволяет вам создавать простые и сглаженные (техника плавного перехода) галереи картинок, слайдшоу, афиши и много других классных примочек на ваш сайт.

Galleria это галерея картинок javascript написанная в jQuery. Она подгружает изображения одно за другим из несортированного списка и отображает пиктограммы, когда загружается каждое изображение. Она может создавать различные пиктограммы, если вы выберите, масштабированные или немасштабированные, центрированные или обрезанные по размеру поля для пиктограмм, определенного в CSS.

NoobSlide это класс MooTools, который позволяет вам создавать слайдшоу и скользящие панели синхронизированные по таймеру. Посмотрите этот сайт для демонстрации.

Вот демонстрация виджета слайдера из UI библиотеки jQuery, используемого для создания слайдера с товарами, такого как на сайте Apple - Mac .

Carousel

jCarousel это плагин jQuery позволяющий контролировать список предметов в горизонтальном или вертикальном порядке. Предметы, которые могут быть как статичным содержимым в HTML, так и загруженным с использованием (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без нее).

Компонент перелистывания управляет списком содержимого (элементы HTML LI внутри тега UL), которое можно отображать вертикально или горизонтально. Содержимое можно прокручивать вверх и вниз с или без использования анимации. Содержимое может относиться к статичному HTML содержимому или список предметов может быть создан динамически "на ходу" (с или без использования AJAX).

Carousel Slideshow это широко известный скрипт DHTML для показа изображений на вашем сайте. Он отображает изображения в 3D, на манеру карусели.

iCarousel это бесплатный инструмент javascript с открытым исходным кодом для создания виджетов на манер карусели. Вы также можете использовать iCarousel в качестве бегущей новостной строки/скроллера или в качестве галереи изображений.

Панельный слайдер

Coda Slider это плагин jQuery, который имитирует эффект слайда панелей, как на сайте Coda .

Sliding Tabs это плагин mootools 1.11 с очень приятными эффектами. Это клон чего-то, что используется на сайте Panic Software"s Coda, что в свою очередь очень похоже на виджет, используемый на сайте iTunes Music Store.

Вкладки

jQuery Tabs это мощный и гибкий плагин jQuery, который позволяет вам создавать полностью настраиваемую навигацию по вкладкам (очень рекомендуется).

Еще один отличный урок с сайта jQueryForDesigners.com покажет вам как создавать основную навигацию по вкладкам при помощи jQuery.

MooTabs это крошечный (3кб) класс для MooTools. Как следует из названия, его основная задача это помогать вам в создании простых вкладок навигации.

Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.

Простой скрипт MooTools, который может создавать плавную прокрутку до якоря на веб-странице.

Настраиваемый плагин jQuery, который отображает всплывающие строки-подсказки - или со статичным HTML или с содержимым AJAX.

Еще один неплохой плагин строки-подсказки.

Очень простой скрипт jQuery, который отображает строку-подсказку и предварительный просмотр изображения (Я использую его на Best Web Gallery).

Меню-гармошка

Этот плагин создает меню гармошку. Он работает с вложенными списками, списками определений или просто с вложенными дивками.

Плагин Accordion может отлично выделит и покажет тот контент, который вам необходим.

Image Menu это плагин MooTools который может создать горизонтальное меню-гармошку с изображениями.

Замена текста Flash и изображением

sIFR может замещать короткие отрывки простого браузерного текста текстом визуализированным выбранным вами шрифтом, независимо от того установлен ли он на системах ваших пользователей. Он выполняет свою задачу, используя комбинацию javascript, CSS, и Flash.

Плагин jQuery, который выполнит для вас функции sIFR.

Facelift Image Replacement это скрипт замены изображений, который динамически генерирует представление текста в изображении на вашей веб-странице в тех шрифтах, которые другим способом могут быть недоступны вашим посетителям. Сгенерированное изображение автоматически вставляется в вашу веб-страницу посредством Javascript и видимо всеми современными браузерами

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

В данной статье я расскажу вам о JavaScript - скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.

Что можно делать, используя JavaScript?

Изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов.

Реагировать на события: скрипт может ждать, пока что-нибудь случится (клик/наведение мыши, окончание загрузки страницы) и реагировать на это выполнением функции.
Например, по наведению мыши на ссылку или картинку можно показывать всплывающую подсказку. По клику мыши можно переключать содержимое блока. По окончании загрузки страницы - показывать рекламное попап-окно. Можно изменять внешний вид страницы в зависимости от времени суток.

JavaScript. Быстрый старт

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

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.
Например, при первом посещении сайта пользователю показывается попап-окно и устанавливается cookie. А при последующих посещениях этого ресурса попап-окно не показывается, потому что cookie уже установлены.
Также можно проверять корректность введенного e-mail, проверять на соответствие нужному формату введенный номер телефона и сразу выводить сообщение о правильности или неправильности введенных данных.

Примеры использования JavaScript

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

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

Что это дает нам?

1. Удобная многоуровневая навигация

Использование JavaScript позволяет делать компактными многоуровневые меню, многоуровневую навигацию в side-bar-ах. Подпункты меню открываются либо по клику, либо по наведению мыши.

Во многих интернет-магазинах есть боковая выпадающая навигация. Рассмотрим для примера shop.by . Представьте, насколько бы она растянулась вниз, если бы подпункты не выпадали по наведению или по клику, а были видны все сразу!

2. Использование галерей и слайдеров дает нам возможность показать фотографии, картинки дополнительных видов товаров, удобно и компактно расположить портфолио фотографа.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Особенно галереи актуальны для детального просмотра товаров в интернет-магазинах, когда нужно показать различные виды товара. С их помощью мы можем показать пользователю в небольшом блоке сразу все изображения, предоставив для просмотра как маленькие изображения, так и увеличенные.

Сколько бы понадобилось места для галереи, представленной на картинке ниже?

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

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

Но что делать, если все-таки нужно компактно вместить много виждетов?

Тут на помощь приходит решение JavaScript с «табами».

С их помощью можно хорошо вместить все виджеты в боковых колонках сайта. Для лучшего восприятия можно группировать виджеты в «табы».

Например, в один «таб» можно поместить виджеты социальных сетей, во второй - категории и архивы и т.д. Это позволит сэкономить место и сделает сайт более удобным для использования.

4. Используя JavaScript, можно также существенно улучшить страницу контактов для вашего сайта или сайтов ваших клиентов.

встроить подсказки в поля форм;

проверять вводимые в поля форм данные и выводить сообщения об ошибках;

отправлять данные формы без перезагрузки страницы;

разместить карту с маршрутом.

5. Для тех, кто размещает на сайте табличные данные, очень полезным будет использование сортировки данных в таблице.

6. Тем, кто размещает на сайте какую-либо статистику в виде графиков и диаграмм, очень пригодится возможность создавать на JavaScript интерактивных диаграмм и графиков.

Также, используя JavaScript, можно делать всевозможные эффекты на сайте - такие как плавное выскальзывание элементов, их перемещение, постепенное появление и исчезновение и все то, на что хватит вашей фантазии.

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

Заключение

Как видим, область применения JavaScript очень широка. Это и галереи, и слайдеры, и табы, и всевозможные интерактивные элементы, и карты, и графики, и работа с формами и многое-многое другое.

Я думаю, что каждый для себя может найти полезное применение JavaScript и использовать на своих сайтах или сайтах своих клиентов.

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

А вы используете JavaScript на своих сайтах? Какие у вас основные трудности при использовании JavaScript?

Расскажите об этом в комментариях к статье.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

После того как мы обсудили подходы к изучению HTML и CSS, пришло время уделить внимание JavaScript, третьему ключевому навыку веб-дизайнера. JavaScript - это язык скриптов. Это означает, что его синтаксис несколько сложнее синтаксиса HTML и CSS. И перед тем как вы сможете свободно писать код на JavaScript, вам придется еще много чего изучить. Я хотел сказать, что у большинства людей на изучение JavaScript уходит чуть больше времени, чем на изучение HTML и CSS. Существует множество мнений по поводу того, какой подход к изучению JavaScript считать самым лучшим, и не все эти мнения совпадают с моим.

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

Этот язык был создан для работы с HTML и CSS, поэтому в нем много встроенных функций, облегчающих процесс управления поведением сайтов. JavaScript дополняет статичную природу HTML, позволяя создавать интерактивные элементы, отображать элементы в зависимости от определенных условий, создавать анимацию элементов или выполнять произвольное количество задач, связанных с написанием скриптов. Очень важно выяснить, для выполнения каких задач подходит JavaScript, поскольку благодаря этому вы научитесь понимать, в каких ситуациях его следует использовать, и на что стоит обращать внимание во время изучения JavaScript.

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

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

Такой подход подразумевает, что вам следует как минимум структурированно и сосредоточено изучить основы JavaScript с помощью, например, конкретного курса или книги. Несмотря на то что множество пособий учит вас, как выполнять весьма конкретные задачи с помощью JavaScript, вам действительно необходимо иметь четкое представление о его концепциях и синтаксисе, чтобы понимать, что скрывается за тем или иным вашим действием. Конечно, не всем веб-дизайнерам нужно быть специалистами в JavaScript. Те дизайнеры, которые, к примеру, хотят заниматься frontend-разработкой, должны свободно владеть JavaScript.

А тем, кто больше интересуется UX-дизайном или визуальным дизайном, вполне достаточно знать только основы. Независимо от того, сколь глубокими должны быть ваши знания JavaScript, вам необходимо освоить самые важные его концепции, чтобы иметь практическое представление об этом языке. Главное - будьте терпеливы. На изучение JavaScript уходит много времени, и если вы слишком быстро бросите его изучение, то не сможете вспомнить то, что изучили, если вам это понадобится для какого-либо проекта. Я настоятельно рекомендую вам начать с курса Саймона Аллардайса "JavaScript Essential Training" (Основы JavaScript), который можно найти в библиотеке онлайн-тренингов на сайте lynda.com.

JavaScript в нем рассматривается с точки зрения новичка, а основы JavaScript и правда описываются самым прямолинейным образом. Кроме того, я рекомендую... простите, если я неправильно произнесу... Книгу Марижна Хавербеке (Marijn Haverbeke). Кстати, это отличный парень. Так или иначе, я рекомендую вам прочитать его книгу "Eloquent JavaScript" (Выразительный JavaScript), которая также носит название "Modern Introduction to Programming" (Современное введение в программирование). Эта книга и правда написана доступным для новичков языком. По JavaScript написано много книг, но эта книга написана программистом и для программистов. Книга "Eloquent JavaScript" была написана таким образом, что является своего рода введением в язык для новичков.

Что самое удивительное, можно купить печатную версию книги, но... Давайте щелкнем по этой ссылке... Есть еще электронная версия этой книги. В ней рассматривается все, что касается языка JavaScript, а также приводится несколько работоспособных примеров, с которыми вы можете поэкспериментировать, чтобы понять, как все это работает. Это и правда очень классный небольшой сайт. Как и в случае с HTML и CSS, на сайте docs.webplatform.org есть раздел, посвященный JavaScript. Вы увидите, что он очень полезен, поскольку здесь есть некоторые обучающие материалы, обсуждаются функции, объекты, события - все те элементарные сущности, которые нужно знать при изучении JavaScript.

Я не могу недооценивать важность сайта stackoverflow.com. Если вы никогда с ним раньше не сталкивались, то стоит отметить, что этот сайт позволяет создать свой аккаунт и впоследствии постить вопросы членам этого сайта о тех вещах, которые сбивают вас с толку, когда вы работаете над собственными проектами, или задавать вопросы о тех понятиях, которые вам сложно усвоить. Зачастую люди дают множество разных советов, при этом хорошие ответы получают дополнительные голоса, а у плохих советов голоса отнимаются. Поэтому через некоторое время благодаря отзывам членов сообщества вы сможете понять, какой ответ самый лучший. Вы можете не только постить вопросы, но и искать их на сайте. Есть вероятность, что кто-то уже задавал интересующий вас вопрос. Поэтому сайт stackoverflow.com - действительно очень полезный ресурс. Как и в случае с HTML и CSS, на сайте проекта "Mozilla developer network" тоже есть раздел, посвященный JavaScript. На нем представлено множество различной информации. Кроме того, в правой части сайта есть раздел, в котором перечисляются те ресурсы, на которых можно получить более подробную информацию по той или иной теме. Некоторая часть этой информации является абсолютно технической. Но в основном любой новичок в JavaScript может воспользоваться большей частью этой информации на самом начальном этапе изучения этого языка программирования. Если после овладения основами JavaScript у вас появится желание более подробно изучить этот язык, то вы можете воспользоваться еще одной, довольно полезной, по моему мнению, книгой - "Professional JavaScript for Web Developers" (Профессиональный JavaScript для веб-разработчиков), автором которой является Николас Закас.

Не буду вас обманывать и утверждать, что понял все, что написано в этой книге, но я пользуюсь ей как справочным материалом, поскольку после изучения основ JavaScript могут возникнуть ситуации, когда вы вроде как застопоритесь и не будете знать, что делать дальше. Эта замечательная книга позволяет лучше разобраться в синтаксисе JavaScript, научиться писать более эффективный код, а также применять не только базовые концепции JavaScript, но и более расширенные возможности. Конечно, если снова вернуться на сайт lynda.com, то можно найти там целый раздел замечательных курсов по JavaScript, в том числе и курс Саймона. Поэтому внимательно проанализируйте, какие курсы есть в нашей библиотеке.

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