admin / 26.03.2018

Javascript обучение с нуля

В современном вебе JavaScript играет огромную роль. По данным около 95% всех сайтов мира используют JavaScript в своих проектах. Это гигантская цифра, которая заставляет новичков изучать JS как перспективную и очень выгодную технологию.

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

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

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

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

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

Содержание

Домашнее задание

Немного про JS

За какие функции отвечает JavaScript и зачем вообще стоит его использовать?

Посмотреть ответ

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

Кроме того, в последнее время появилось множество различных JS библиотек, которые позволят вам создавать сайт полностью на одном лишь JS. Писать не только пользовательскую часть, но и серверную часть сайта. Одной из таких платформ является Node JS, в котором вам также понадобиться использовать синтаксис JS.

Немного теории

Какие языки стоит изучить перед тем, как приступить к изучению JavaScript?

Посмотреть ответ

Вам стоит знать немного HTML и CSS, так как JS в основном применяется в веб разработке. Остальное можно не изучать, так как JS является отдельным языком, который не нуждается в каких-либо дополнительных технологиях.

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также «Готовое решение».
PS: подобные задания доступны только при подписке от 1 месяца!

Следующий

Также стоит посмотреть

JavaScript

Самоучители по JavaScript

Основы JavaScript, jQuery и Ajax (2015)

Курс для начинающих по основам и изучению JavaScript. Видео содержит примеры по использованию фреймворка jQuery и технологии Ajax.

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

подробнее о видео…

JavaScript. Подробное руководство, 6-е издание (2012) — 13.3 MB

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

Книга содержит полный справочник по JavaScript. Рассматривается большое количество практических примеров по разработке сценариев на JavaScript, включая ECMAScript 5, прикладные программные интерфейсы браузеров по стандарту HTML5.

подробнее о книге…

JavaScript. Шаблоны (2011) — 2.9Mb

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

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

подробнее об учебнике…

jQuery. Новый стиль программирования на JavaScript (2010) — 3.3Mb

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

jQuery — кроссбраузерная, компактная JavaScript-библиотека. От читателя требуются, какие-никакие, познания языка JavaScript и PHP.

подробнее об учебнике…

JavaScript.

обучение javascript с нуля

Подробное руководство, 5-е издание (2008) — 5.6Mb

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

Учебник познакомит с основами Javascript, а затем со средой разработки сценариев, предлагаемой современными браузерами.

подробнее об учебнике…

JavaScript в кармане (2008) — 6.2Mb

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

Сценарии — это небольшие программы, вписанные в html-код веб-страницы, а JаvаScript — самый популярный язык написания сценариев. Если читатель имеет слабое представление о языке html, то это не беда, ведь сведений, имеющихся в этом самоучителе по JаvаScript, будет достаточно для создания простых веб-страничек, даже новичками.

подробнее о самоучителе…

Ajax в действии (2006) — 6.6Mb

В учебнике по Ajax описан новый подход к созданию веб-приложений. В учебнике рассматривают составные части Ajax: Javascript, CSS, DOM и объекты XmlDocument и XMLHttpRequest. В учебнике нашли решение вопросы управления кодом, взаимодействия сервера и клиента, применения архитектуры «модель-представление-контроллер» на разных уровнях приложения.

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

подробнее об учебнике…

Заинтересованному кругу лиц и друзьям:

«Javascript is to programming what jazz is to music.»

Markus Persson
 

Эта статья о том как я изучал/продолжаю изучать замечательный язык JavaScript.

JS для начинающих. Урок 0: Введение

Думаю объяснять для чего учить JavaScript нет необходимости, достаточно прочитать статью «Актуальные технологии и тренды в веб-разработке».

Начал с курса по JavaScript на codecademy.com, прошел примерно половину, параллельно начал изучать основы на learn.javascript.ru, удобнее купить книгу в epub/pdf learn.javascript.ru/ebook.

После этого начал читать книгу «Выразительный Javascript» автор: Marijn Haverbeke (karmazzin.gitbooks.io) (upd: прочитал 7 разделов из 22).

Потом переключился с codecademy.com на отличный сервис для изучения freecodecamp.com, прошел разделы: «Basic JavaScript», «Object Oriented and Functional Programming», начал проходить «Basic Algorithm Scripting» (upd: прошёл 3 из 7).

Начинал читать «JavaScript. Подробное руководство» автор: Дэвид Флэнаган (ozon.ru), понял, что на данном этапе для меня это скорее справочник, решил искать дальше. Наткнулся на курс по JavaScript на hexlet.io все объясняется очень доходчиво, курс опирается на книгу «JavaScript. Сильные стороны» автор: Дуглас Крокфорд (ozon.ru) и на его лекции, хорошо после просмотра курса прочитать эту книгу (upd: прочитал 43 страницы из 173).

Сейчас есть идея пройти курс «JavaScript/DOM/интерфейсы» у Ильи Кантора (learn.javascript.ru/courses).

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

Множество полезных ресурсов можно почерпнуть из первой записи блога «Как стать классным фронтенд-разработчиком» (kirillzharov.ru/how_to_become_cool_front-end_developer), подборка курсов, книг для изучения, статей, видео по JavaScript по ссылке kirillzharov.ru/frontend.
 

Статья основана лично на моём опыте изучения JavaScript и не претендует на единственный оптимальный вариант, она будет пополняться в процессе изучения.
 

Буду рад, если в комментариях поделитесь своим опытом изучения JavaScript и поделитесь полезными ссылками!

Теги:фронтенд

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

JavaScript

1. Вступление

При генерации страниц в Web возникает дилемма, связанная с архитектурой «клиент-сервер». Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript – это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента.

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

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

Название JavaScript является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript.

Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является
подмножеством языка JScript. JavaScript стандартизован ECMA (European Computer Manufacturers Association – Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1.

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

2. JavaScript вкратце

  1. Понятие объектной модели применительно к JavaScript
  2. Свойства
  3. Методы
  4. События
  5. Размещение кода на HTML-странице
  6. URL-схема JavaScript
  7. Обработчики событий, подстановки и вставка
  8. Размещение кода внутри HTML-документа
  9. Иерархия классов
  10. Поле location
  11. Управление окнами
  12. Контейнер FORM
  13. Текст в полях ввода
  14. Кнопки
  15. Картинки
  16. Обмен данными
  17. Строки
  18. Числа
  19. Массивы
  20. Создание эффекта изменения изображения.

    Добавление и удаление элементов.

  21. Работа с текстом
  22. Объект Document
  23. Литература

3. JavaScript. Обзор


Возможности ядра языка


4. Значения, переменные и литералы

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


5. Выражения и операции

Здесь рассматриваются выражения и операции JavaScript, в том числе: операции присвоения, сравнения, арифметические, побитовые, логические строковые и специальные.


6. Регулярные выражения

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


7. Операторы

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


8. Функции

Функции являются другими фундаментальными блоками JavaScript.

Учебник JavaScript для новичков от Трепачёва Дмитрия

Функция является процедурой JavaScript – набором операторов, выполняющим специфическую задачу. Чтобы использовать функцию, Вы обязаны сначала определить её; затем скрипт может вызвать эту функцию.
Определение функций
Вызов функций
Использование массива Arguments
Предопределённые функции


9. Работа с объектами

Здесь рассматривается использование объектов, свойств, функций и методов и то, как создать Ваши собственные объекты.
Объекты и свойства
Создание новых объектов
Предопределенные объекты ядра


10. Объектная модель. Детали

JavaScript является объектно-ориентированным языком на базе прототипов, а не на базе классов. Из-за этого базового различия, не очевидно то, как JavaScript даёт возможность создавать иерархии объектов и реализовывать наследование свойств и значений. В данной главе делается попытка прояснить это.
Языки на базе классов и на базе прототипов
Пример Employee
Создание иерархии
Свойства объекта
Более гибкие конструкторы
Повторное рассмотрение наследования свойств


Специфика клиентского языка


11. Внедрение Java Script в HTML

Вы можете внедрять JavaScript в HTML-документ как операторы и функции в теле тэгов <SCRIPT>, специфицируя файл как источник JavaScript, специфицируя выражение JavaScript как значение HTML-атрибута, или как обработчик события некоторых других тэгах HTML (прежде всего в элементах формы).
Использование тэга SCRIPT
Специфицирование файла c кодом JavaScript
Использование выражений JavaScript в качестве значений атрибутов HTML
Использование кавычек
Специфицирование альтернативного содержимого тэгом NOSCRIPT


12. Обработка событий

Приложения JavaScript в Navigator’е широко используют события. События это акции, которые периодически возникают как результат некоторых действий пользователя. Например, нажатие кнопки это событие, также как и изменения текста в текстовом поле или перемещение мыши над гиперссылкой. Чтобы Ваш скрипт реагировал на событие, Вы определяете обработчик события, такой как onChange и onClick.
Определение обработчика события
Объект Event
Захват событий
Проверка данных введённых в форму


13. Использование объектов Navigator’а

Здесь рассматриваются JavaScript-объекты в Navigator’е и объясняется, как их использовать. Объекты клиентского JavaScript иногда называются объектами Navigator’а, чтобы отличить их от серверных и пользовательских объектов.


14. Использование окон и фреймов

JavaScript позволяет создавать окна и фрэймы и и манипулировать ими для представления HTML-содержимого. Объект window является объектом верхнего уровня в иерархии клиентского JavaScript; объекты Frame походят на объекты window, но соответствуют «подокнам», создаваемым тэгами FRAME в документе с тэгом FRAMESET.


15. Дополнительные статьи

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


16. Безопасность в JavaScript

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

17. jQuery

jQuery — библиотека JavaScript, обеспечивающая универсальное кроссбраузерное взаимодействие Java Script и HTML.

 

JavaScript с нуля

Краткая справка

JavaScript был разработан при совместном участии компаний Netscape и Sun Microsystems. Им нужен был упрощенный язык, с которым могли работать веб-дизайнеры и простые программисты. При этом он должен был работать с плагинами, изображениями и Java-апплетами. Руководству компаний не понравился язык PHP, который мог бы подойти для этих целей, поэтому нужен был новый. Создание языка было поручено Брендану Эйху, нанятому в Netscape в апреле 1995 года. Кроме него, в разработке участвовали Марк Андрессен из Netscape и Билл Джой (сооснователь Sun Microsystems).

При этом все понимали, что компания Microsoft стремится завоевать рынок интернета. Вспомните знаменитое изречение Билла Гейтса — “В будущем останутся только два вида компаний: те, кто вышел в интернет и те, кто вышел из бизнеса”. Поэтому Брендану Эйху пришлось завершить создание языка всего лишь за две недели,что было причиной многочисленных недоработок в первых версиях. Сначала разработанный язык назвали Mocha. Потом, видимо, осознав, насколько это ужасное название, его переименовали в LiveScript. А в декабре 1995, получив разрешение у Sun, в JavaScript, реши сыграть на популярности Java. Поэтому, хотя сам язык сейчас никому не принадлежит, но права на название языка принадлежит компании Oracle, купившей Sun Microsystems.

В 1996 году Microsoft выпустил свою версию, назвав её JScript, которая работала только в третьей версии Internet Explorer. Некоторые утверждают, что они полностью скопировали JS вместе со всеми багами и всё работало очень плохо. В любом случае, им пришлось отказаться от использования только одного JScript и обеспечить поддержку стандартного JS (попутно разработав ещё и Visual Basic Script -обе технологии до сих пор поддерживаются майкрософтом).

Позже руководство Netscape приняло решение о стандартизации языка, которое было проведено ассоциацией ECMA. Стандарт языка стал называться ECMAScript, а JScript, JavaScript и ActionScript считаются его расширениями.

Философия языка JavaScript

У JS синтаксис, который имеет много общего с Java и C, однако семантически его можно считать ближе к Smalltalk или Lisp. Так например, и в JavaScript и в Java используется объектно-ориентированный подход, однако в JS он реализован не через классы, а через прототипы. У JavaScript динамическая типизация, а в Java статическая. И, наконец, скрипты на JavaScript выполняются прямо из файла, а не при помощи виртуальной машины.

JS может встраиваться непосредственно в веб-страницу при помощи тегов <script></script> или загружаться из другого файла (в html-документе указывается расположение из этого файла).

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

Где применяется JavaScript

Сегодня JavaScript самый популярный язык в вебе. Фактически, только на нем (или на других его реализациях) делают веб-приложения. JavaScript используется в AJAX, для создания виджетов, дополнительных функциях в браузерах (закладках, например), пользовательских скриптов и.т.д. Сейчас практически невозможно найти сайт или сервис, который хотя бы в малой степени не использовал JS.

Благодаря HTML5 удалось вытеснить Flash-технологии из браузеров.

Поэтому теперь у JS есть возможность работать с аудио, видео, 3D (WebGL) и рисовать изображения на странице программным способом (Canvas).

После того как Гугл выпустил свой браузер Chrome (на основе Chromium), то встроил в него очень производительный движок для обработки JS, который был назван V8. Этот движок транслировал JS в машинный код.На основе V8 была разработана платформа Node.js, которая позволила универсализировать JavaScript (например, с помощью Node можно подключать библиотеки, написанные на других языках).

JavaScript пытались также использовать для создания десктопных приложений (вне браузера).

Однако, это не приобрело большой популярности у разработчиков, кроме, может быть, некоторых энтузиастов. Зато JS используется в браузерных операционных системах — IndraDescktop WebOS, IntOS, eyeOS.

А вот использование JS для разработки мобильных приложений вполне себе процветает. Самым известным фреймворком в этой области стал PhoneGap(Cordova) — он позволяет писать приложения под iOS, Android, используя только JavaScript.

Также JS используется в офисных приложениях — в Microsoft Office, OpenOffice для автоматизации некоторых действий и для создания макросов. Также сценарии JavaScript поддерживаются в приложениях Adobe(Photoshop, Illustrator, Dreamveawer).

Таким образом, можно сказать что JavaScript победил практически во всех областях, где есть Web. А с недавнего времени он начал выходить за пределы всемирной паутины, найдя себе применение в интернете вещей (уже есть множество проектов для умных домов с использование Node.js).

Сложность обучения JavaScript

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

Плюсы/минусы JavaScript

Плюсы языка общеизвестны — язык настолько широко используется в вебе, что вы никогда останетесь без работы. В любой IT компании без проблем сможете найти себе должность фронтэнд или бэкенд разработчика (в зависимости от Вашей квалификации). Язык постоянно развивается — недостатки, которые были внесены при создании языка, устраняются, появляются новые фишки и технологии, которые облегчают программирование.

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

Сопутствующие технологии

Coffescript — язык программирования, который транслируется в JS. Позволяет писать более упрощенный и компактный код.

Ajax — технология, позволяющая отправлять запросы к серверу и получать ответ без перезагрузки страницы. В большой степени способствовала популяризации JS в своё время.

Typescript — реализация JS, представленная Microsoft в 2012 году. Расширяет возможности JS (в некоторых источниках описывается как “JS с классами”).

Meteor — фреймворк, работающий поверх Node. Позволяет упростить разработку на Node.js.

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

UnityScript — реализация JS для программирования игр в Unity(3D).

FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*