Лучшие способы изучения JavaScript для чайников. Как изучить JavaScript быстрее Джава скрипт обучение для чайников

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

Язык сценариев JavaScript был разработан Бренданом Эйхом (Brendan Eich) в 1995 году, как одно из расширений для браузера Netscape Navigator 2.0, о котором мало уже кто помнит. Но сам язык живет и процветает.

В отличие от HTML и CSS это уже настоящий язык программирования . Можно сказать, что HTML и CSS - это только цветочки, а вот JavaScript - такие себе ягодки ягодки. Различаются они принципиально. HTML - банально разметка (или иначе - структура сайта), а CSS - внешний вид этой разметки. А вот JavaScript позволяет создавать именно программы, которые предписывают компьютеру пользователя выполнять активные действия.

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

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

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

Зачем нужен JavaScript?

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

Примеры таких атрибутов:

onclick - одиночный щелчок мышью;
onmouseover - размещение курсора мыши в области, которую занимает какой-либо элемент страницы;
onfocus - выделение (фокусировка) элемента. Например, поля формы, куда установлен курсор.

Окей, скажете вы, а зачем использовать какой-то JavaScript для обработки той же формы? Есть же php для этого. Заполнил, что требуют, и отправил себе с миром.

Все верно, JavaScript не обрабатывает данные, это делает php на удаленном сервере.

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

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

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

Согласитесь, что это гораздо удобнее, занимает меньше времени и, безусловно, съедает меньше трафика. А в случае с мобильным подключением к сайту это тем более существенно.

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

Продвинутый читатель скажет:

Ха! Так это же все можно сделать и на чистом CSS3 без всяких скриптов!

Согласен, кроме слова «все». Все да не все. Всякие свистелки и перделки можно и на чистом CSS3 сотворить, но проверить правильность заполнения формы CSS никак не может. А кроме этого существует еще тысячи способов использовать скрипты JavaScript для более серьезных вещей. Иначе умные люди не стали бы впихивать JavaScript в тот же Bootstrap или создавать мегаполезную библиотеку скриптов jQuery.

Как включить JavaScript в страницу сайта

Существует несколько вариантов подключения JavaScript на страницах сайта.

1. Небольшой код JavaScript можно внедрить непосредственно в тегах HTML. Например, следующий код будет выводить в поле формы текст «Ведите ваш E-mail», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:

Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.

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

2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами .

Но это не всегда удобно, а в некоторых случаях и чревато.

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

3. Самый правильный способ подключения скриптов JavaScript - это вынести их в отдельный файл с расширением.js и подключить к странице посредством ссылки, как и в случае с листом стилей CSS, вынесенным в отдельный файл. Пример:

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

Адаптированный перевод статьи «Full-Stack JavaScript in Six Weeks: A Curriculum Guide»

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

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

Почему JavaScript?

Стоит отметить открытость языка - компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые - при помощи фреймворка Electron, а вторые - на NativeScript или React Native.

Основы

Сперва необходимо изучить основные понятия JavaScript, веб-разработки и программирования в целом:

объектно-ориентированный JS - конструкторы и фабрики, наследование;
функциональный JS - функции высшего порядка, замыкания, рекурсия;
спецификации тестов Jasmine;
основы HTML, CSS и jQuery.

Git

Git - необходимый разработчикам инструмент, поэтому с ним нужно как можно раньше. Вот основные навыки, которыми вы должны обладать:

создание и перемещение файлов в каталогах;
инициализация и коммиты в Git;
настройка репозиториев в GitHub.

Алгоритмы и структуры данных

Затем стоит изучить алгоритмы (в частности, понятие сложности алгоритмов), а также базовые структуры данных: связные списки, очереди, стеки, двоичные деревья поиска и хэш-таблицы. В этом вам поможет .

БэкендNode.js

10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node - это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.

Серверы, HTTP, Express.js

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

Асинхронный JavaScriptБазы данных, схемы, модели и ORM

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

ФронтендHTML и CSS

HTML и CSS - это основа основ для любого веб-разработчика. Вам не обязательно знать их в совершенстве, но разбираться в них вы должны. Также можно изучить какую-нибудь популярную библиотеку (например, Bootstrap) и CSS-препроцессор вроде Sass - он поможет сделать CSS похожим на обычный код. Для упрощения работы с HTML можно выбрать один из популярных шаблонизаторов, например, pug.

jQuery и манипуляция DOM

Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.

Инструменты разработчика Chrome

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

AJAX

Если вы хотите, чтобы приложение не перезагружало страницы после каждой операции с базой данных, вам точно понадобится AJAX - он отправляет фоновые асинхронные HTTP-запросы, ответы на которые обновляют лишь часть отображения. Работать с AJAX можно через jQuery при помощи метода.ajax .

Продвинутые темыРазработка через тестирование

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

Веб-сокеты

Этой теме стоит уделить особое внимание, поскольку очень полезны. Протокол WebSocket, в отличие от HTTP, позволяет работать с двунаправленным потоком данных, что делает эту технологию уникальной. Самой распространённой реализацией является библиотека socket.io - разобраться с ней и применить полученные навыки на практике поможет по созданию многопользовательской браузерной игры.

ES6, Babel, Webpack

Сейчас основным стандартом является ES6 (ES2015), но уже принят ES2016, а ES2017 находится в разработке, поэтому нужно всегда быть в курсе обновлений и использовать их. Проблемы совместимости решаются всего парой инструментов:

Babel - компилирует ES6-код (скоро появится поддержка ES2016) в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика;
Webpack - собирает все ваши исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь неоценима.

React и Redux

React - библиотека для создания пользовательских интерфейсов. Она была создана компанией Facebook в 2013 году и достаточно быстро стала популярной среди разработчиков. Вам стоит прочитать , а затем разобрать , чтобы понять, как работает React и для чего он нужен. React пригодится не только для фронтенд-разработки: Facebook выпустила варианты фреймворка для мобильной (React Native) и VR-разработки (React VR).

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

Аутентификация, сессии, cookies

Вам также стоит разобраться, как приложения взаимодействуют с пользователями, обрабатывают вход в учётную запись и выход из неё, выдают привилегии. Для отслеживания личности пользователя в течение сессии используются cookies - небольшие текстовые файлы, передаваемые сервером браузеру в ответе на HTTP-запрос. А для обеспечения связи базы данных и страничек авторизации можно использовать библиотеку express-session.

Веб-безопасность

И, наконец, стоит обратить внимание на безопасность. Важно изучить как методы атак, так и способы защиты от них.

JavaScript — вступает в игру, когда нам нужно произвести какие-то действия на стороне клиента, который обратился к нашей веб-странице.

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

В данной статье собраны базовые сведения, которые позволят начать использование JavaScript.

Вставка скрипта прямо в код страницы

Можно вставить JS код прямо внутри страницы.

alert("Hi there!"); //some JS code here

Вынос кода в отдельный файл

Можно вынести JavaScript код во внешний файл и использовать на странице ссылку на него

Закрывающий тег в этом случае обязателен.

Лучше всего вставлять скрипты перед закрывающим тегом

Переменные Имена переменных

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

В имени могут быть цифры, но начинать название переменной с цифры нельзя.

JavaScript чувствителен к регистру: mytext и myText — это две разные переменные.

Лучше использовать для именования CamelCase, начиная каждое слово в название переменной с большой буквы.

Объявление переменных

Для объявления переменных в Javascript используется var .

Var myText; //undefined myText = "Hi!"; alert(myText);

Сразу после объявления переменной ее значение равно undefined.

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

Var myText = "Hi!";

Также можно объявить несколько переменных в одном var:

Var sum = 4 + 5, myText = "Hi!";

При присвоении значения var можно опустить, но лучше этого не делать.

Типы переменных

В JavaScript можно использовать строки:

Var myText = "Hello !";

целые числа:

Var myNumber = 10;

Дробные числа:

var pi = 3.14;

Логические значения:

Var isBoolean = false;

Детали синтаксиса JavaScript Комментарии

Комментарии в одной строке выделяются «//». Все, что идет после этих символов, считается комментарием.

Чтобы закомментировать несколько строк, нужно использовать «/*» чтобы обозначить начало комментария, и «*/» для обозначения конца комментария

/* here is commented code and it"s also comment */

Разделение операторов

Для разделения операторов нужно использовать «;»

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

Работа со строками var str = 4 + 5 + "7"

даст строковое значение «97 » в str

Var str2 = "7" + 4 + 5

даст строковое значение «745 » в str2

Дело в том, что значение при сложении вычисляется последовательно — слева направо. Когда складывается 2 числа — результатом становится число. Когда складывается строка и число, число воспринимается как строка и происходит объединение двух строк.

Перевод строки в число

Для перевода строки в число используются parseInt() и parseFloat()

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

Var myNumber = parseInt("345", 10);

Функции JavaScript

Функции в JavaScript объявляются следующим образом:

Function myFunction() { Some JS code }

Для возврата значения нужно использовать return :

Function myMultiplication(paramOne, paramTwo) { return paramOne * paramTwo }

Можно объявить «анонимную» функцию, опустив указание имени для функции.

Функцию можно передать как параметр в другую функцию, указав ее имя.

Объекты

Все в JavaScript является наследником Object.

Создание нового объекта var person = new Object(); // создание объекта person person.firstname = "Andrew"; // добавляем первый атрибут person.lastname = "Peterson";// добавляем второй атрибут person.getFullName = function() {// добавляем метод return this.firstname + " " + this.lastname; }

Второй, более краткий вариант создания объекта

Var person = { // создание объекта person firstname: "Andrew", lastname: "Peterson", getFullName: function() { return this.firstname + " " + this.lastname; } }

Работа со свойствами объекта

var me = new Object();

me[«name»] = «Serg»;
me.age = 33;

Массивы в JavaScript Создание массива var arr = new Array(11, "Hello!", true); // Создание массива

Новый способ записи

Var arr = ; // Создание массива

Работа с массивами в JavaScript Количество элементов в массиве var length = arr.length; // 3 Добавление элементов в массив — push arr.push("A new value"); Извлечение последнего элемента массива — pop var lastValue = arr.pop(); Объединение массивов var arr2 = ; var longArray = arr.concat(arr2); // Объединение двух массивов arr и arr2 в один longArray Join — слияние всех элементов массива var longString = arr.join(":") // "11:Hello!:true" Сравнение и логические функции в JavaScript Больше-меньше var isTrue = 6 >= 5; // больше или равно Равенство var isFalse = 1 == 2; // равно isTrue = 1 != 2; // неравно var alsoTrue = "6" == 6; Идентичность var notIdentical = "3" === 3 // false, поскольку типы данных не совпадают notIdentical = "3" !== 3 // true, поскольку типы данных не совпадают Оператор IF if (5 < 6) { alert("true!"); } else { alert("false!") } Оператор SWITCH var lunch = prompt("What do you want for lunch?","Type your lunch choice here"); switch(lunch){ case "sandwich": console.log("Sure thing! One sandwich, coming up."); break; case "soup": console.log("Got it! Tomato"s my favorite."); break; case "salad": console.log("Sounds good! How about a caesar salad?"); break; case "pie": console.log("Pie"s not a meal!"); break; default: console.log("Huh! I"m not sure what " + lunch + " is. How does a sandwich sound?"); } Логическое AND — && if (1 == 1 && 2 == 2) { alert("true!"); } Логическое OR — || if (1 == 1 || 2 == 3) { alert("true!"); } Логическое NOT — ! if (!(1 == 1)) { alert("false!"); } Циклы FOR for (var i = 0; i < 10; i = i + 1) { alert(i); } var names = [ "Sergey", "Andrey", "Petr" ]; for (var i = 0, len = names.length; i < len; i = i + 1) { alert(names[i]); } WHILE while (true) { // Бесконечный цикл alert("This will never stop!"); } var names = [ "Sergey", "Andrey", "Petr" ]; while (names.length > 0) { alert(names[i]); } DO WHILE do { alert("This will never stop!"); } while (true) { // Бесконечный цикл Строки text = "Blah blah blah blah blah blah Eric \ blah blah blah Eric blah blah Eric blah blah \ blah blah blah blah blah Eric"; Substrings

Sometimes you don’t want to display the entire string, just a part of it. For example, in your Gmail inbox, you can set it to display the first 50 or so characters of each message so you can preview them. This preview is asubstring of the original string (the entire message).

"some word".substring(x, y) where x is where you start chopping and y is where you finish chopping the original string.

The number part is a little strange. To select for the «he» in «hello», you would write this: "hello". substring(0, 2);

Think of there being a marker to the left of each character, like this: 0-h-1-e-2-l-3-l-4-o-5 .

If you chop at 0 and again at 2 you are left with just he .

More examples :

1. First 3 letters of «Batman»
"Batman".substring(0,3)

2. From 4th to 6th letter of «laptop»
"laptop".substring(3,6)

как вставить скрипт в документ HTML (общие сведения);
комментарии в JavaScript;
как объявлять переменные и давать им правильные имена;
разбор скрипта и синтаксис методов;
метод alert();
полезная мелочь: «заглушка» на временно не работающую ссылку

От автора

В создании web-страниц есть много разных тонкостей. Но есть и три кита. Это HTML, CSS и JavaScript.

Рекомендую организовать самообразование следующим образом: как только освоите синтаксис HTML и научитесь делать примитивные странички с текстом, картинками и таблицами, сразу подключайтесь к изучению CSS. Как только поймёте, как работать с CSS, начинайте осваивать JavaScript, параллельно пополняя «словарный запас» во всех трёх языках. Думаю, что через полгода сможете построить весьма красивый и функциональный сайт.

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

Попался мне как-то учебник Вадима Дунаева. Многие, я знаю, ругают этот учебник. Кроме того, я скачал мерзко отсканированный PDF, где вместо "()" могло оказаться, например, "Q", а латинские буквы в кодах заменены (местами!) аналогичными русскими, из-за чего эти коды не работают. В общем, пришлось попыхтеть. И, честно скажу, если бы я до этого ничего не читал про JavaScript, то в этих ошибках бы не разобрался и присоединился бы к числу ругателей. Но я тогда сидел без работы, было время вникнуть, и учебник мне понравился. Но он очень подробный и рассчитан на людей, которые уже с программированием соприкасались.

Примечание 2012

Теперь, по прошествии нескольких лет, и я отношусь к этому учебнику без былого восторга. Он устарел, «заточен» под IE, достаточно поверхностен; встречаются в нём и реальные ошибки и небрежности кода, а некоторые полезные вещи не встречаются. Но по сравнению с теми «тяп-ляп-руководствами», которые в изобилии выдавали поисковики, это было нечто.

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

Вставка в документ HTML

Вы наверняка видели в HTML-кодах такие тэги:

Вот эта абракадабра между тэгами и есть скрипт.

Сам тэг относится к языку HTML, и у него могут быть следующие атрибуты:

language
type

Этот атрибут необязателен. Его стоит использовать либо для уточнения версии языка (javascript1.1, javascript1.2 и т.п.), либо если используешь другой язык (например,