План на 4 лекции

1. Настройка окружения: VS Code, Node.js, git.
2. Базовые понятия: синтаксис, типы данных.
3. Особенности языка: функции, библиотека.
4. Много живого кодинга.

Сегодня

1. История JavaScript
2. В чём запускать код?
3. Как выбрать текстовый редактор?
4. Зачем нужна система контроля версий?
5. Что нужно знать, чтобы сдать домашку?
6. Демо.

Краткая история JavaScript

• 1995 – Первая реализация

Краткая история JavaScript

• 1995 – Первая реализация
• 1998 – Ajax

AJAX

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

Краткая история JavaScript

• 1995 – Первая реализация
• 1998 – Ajax
• 2006 – jQuery

JavaScript

document
  .getElementsByTagName('header')[0]

jQuery

$('header')

Краткая история JavaScript

• 1995 – JavaScript
• 1998 – Ajax
• 2006 – jQuery
• 2009 – Node.js

Краткая история JavaScript

• 1995 – JavaScript
• 1998 – Ajax
• 2006 – jQuery
• 2009 – Node.js
• 2014 – Babel.js

Разработчик пишет на современном языке

let sum = (a, b = 0) => a + b;

В браузере выполянется совместимый код

var sum = function sum(a) {
  return a + (
    arguments.length > 1 && 
    arguments[1] !== undefined
  ) ? arguments[1] : 0; };

Что нас ждёт дальше?

• Progressive Web Apps

Что нас ждёт дальше?

• Progressive Web Apps
• WebAssembly

WebAssembly Demo

Epic Zen Garden (Firefox)

Запуск кода

console.log('Hello world');

Консоль браузера

• Windows: Ctrl + Shift + J
• MacOS: ⌘ + ⌥ + J

Using the Console

Браузеры для разработчика

• Chrome Canary
• Firefox Quantum

Текстовый редактор

В нём вы проводите большую часть времени. Поэтому отнеситесь к выбору ответственно.

Как выбрать

• поддержка используемых технологий
• скорость и производительность
• функциональность
• популярность
• цена

Варианты

• Sublime Text
• WebStorm / IDEA
• Visual Studio Code
• Atom
• Brackets

Visual Studio Code

Рекомендованный редактор для прохождения курса.

• мощная поддержка языка
• инструменты для работы с git
• встроенный терминал

Демо

Пишем чат-бота. Как в Телеграме, только для терминала. И очень простенького.

> node bot.js hello world
hello world

git

– система контроля версий.

В целом, нужна для двух вещей: версионирования кода и совместной разработки.

git-scm.org

GitHub

– графический интерфейс для git.

Есть и другая версия: это социальная сеть для программистов.

github.com

Ссылки про git/GitHub

• Введение. Основы языка. GitHub
  Язык программирования Javascript 2016
• git
  Разработка веб-приложений 2016
• Github (слайды, видео)
  Разработка веб-приложений 2015

Материалы к курсу

• MDN Web Docs
• Speaking JavaScript
• Exploring ES6

Материалы к домашке

• JavaScript - Volume 1: The Early Years
  Youtube
• Useful string methods
  MDN
• An Overview of the Syntax
• Control Flow Statements and Blocks

Конец