Разделы презентаций


ФГБОУ ВО Пермский национальный исследовательский государственный университет

Содержание

Почему JavaScript? большое комьюнити; мало аналогов; много примеров и уже готовых решений; быстрый темп роста популярности вэба; низкий порог вхождения(справится даже не специалист); много библиотек; нет нужды в компиляторе(для старта достаточно

Слайды и текст этой презентации

Слайд 1ФГБОУ ВО «Пермский национальный исследовательский государственный университет»   Физический факультет Кафедра компьютерных систем

и телекоммуникаций Классы и наследование, транспиляция в Babel и TypeScript.
Работу выполнила

студентка 2 курса
Направление «Радиофизика» Профиль магистратуры «Информационные процессы и системы» Дегтянникова Дарья Александровна




Пермь, 2019

ФГБОУ ВО «Пермский национальный  исследовательский государственный университет»   Физический факультет Кафедра компьютерных систем и телекоммуникаций

Слайд 2Почему JavaScript?
большое комьюнити;
мало аналогов;
много примеров и уже

готовых решений;
быстрый темп роста популярности вэба;
низкий порог вхождения(справится

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

Слайд 3https://insights.stackoverflow.com/survey/2016

https://insights.stackoverflow.com/survey/2016

Слайд 4Понятие транспиляции
Транспиляция - процесс преобразования кода, написанного с помощью следующих

версий языка или на диалектах JavaScript в некий стандартный вариант,

понимаемый всеми браузерами.
Транспиляция - компиляция из одного языка в другой язык с таким же набором абстракций, либо в другую версию того же языка.
ECMAScript — это встраиваемый расширяемый не имеющий средств ввода-вывода язык программирования, используемый в качестве основы для построения других скриптовых языков
Зачем:
Использование ECMAScript6(ES6)
Желание писать для вэба не на JS
Понятие транспиляцииТранспиляция - процесс преобразования кода, написанного с помощью следующих версий языка или на диалектах JavaScript в

Слайд 5Babel(6to5)
Запуск кода на платформе, не поддерживающей новый синтаксис, приведет к

синтаксической ошибке. Закономерным решением этой проблемы стало появление Babel —

программы, которая берет указанный код и возвращает тот же код, но транслированный в старую версию JS.
Состоит из двух частей:
1. Транспайлер, который переписывает код.
2. Полифилл, который добавляет методы.
«Полифилл» (англ. polyfill) – это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными. Работает она через модификацию стандартных объектов и их прототипов. 

Babel(6to5)Запуск кода на платформе, не поддерживающей новый синтаксис, приведет к синтаксической ошибке. Закономерным решением этой проблемы стало

Слайд 6Прототипы объектов
В JavaScript не используется традиционная система наследования, основанная на

классах. Для решения схожих задач используются прототипы.

Каждый объект связан с ещё

одним объектом — со своим прототипом. Когда вы пытаетесь обратиться к свойству или методу объекта, поиск того, что вам нужно, сначала выполняется в самом объекте. Если поиск не увенчался успехом, он продолжается в прототипе объекта.
Прототипы объектовВ JavaScript не используется традиционная система наследования, основанная на классах. Для решения схожих задач используются прототипы.Каждый объект

Слайд 7Babel(6to5)
Принцип действия:
Загрузка JS на новом стандарте или на старом

стандарте со странными спецификациями;
Вызов транспилятора (передача параметров);
Получение JS

другого стандарта(чаще ES5).
Babel(6to5)Принцип действия: Загрузка JS на новом стандарте или на старом стандарте со странными спецификациями; Вызов транспилятора (передача

Слайд 8Лексический анализ
На шаге лексического анализа происходит разбор текста на

логические сущности – токены:
числа;
строк;
идентификаторы;
строки и т.д.

Лексический анализ На шаге лексического анализа происходит разбор текста на логические сущности – токены: числа; строк; идентификаторы;

Слайд 9Синтаксический анализ
На шаге синтаксического анализа происходит создание абстрактного синтаксического дерева(AST)

из потока токенов.
https://astexplorer.net/

Синтаксический анализНа шаге синтаксического анализа происходит создание абстрактного синтаксического дерева(AST) из потока токенов.https://astexplorer.net/

Слайд 10Синтаксический анализ

Синтаксический анализ

Слайд 11Синтаксический анализ

Синтаксический анализ

Слайд 12Трансформация
Преобразование одного синтаксического дерева в другое

ТрансформацияПреобразование одного синтаксического дерева в другое

Слайд 13Генерация
Перевод готовой AST обратно в текст

ГенерацияПеревод готовой AST обратно в текст

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

JavaScript:
возможностью явного статического назначения типов;
поддержкой использования полноценных классов (как в традиционных

объектно-ориентированных языках);
поддержкой подключения модулей.

TypeScript это расширение языка ECMAScript 5.
TypeScriptTypeScript — язык программирования, позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.TypeScript отличается от JavaScript: возможностью явного статического назначения типов; поддержкой использования полноценных классов

Слайд 15TypeScript
TypeScript предлагает новый синтаксис для написания JS-приложений. Он использует аннотации

типов, чтобы избавиться от некоторых проблем с типизацией в JavaScript.
TypeScript
ES5

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

Слайд 16Почему это не понадобится в ближайшее время?

Почему это не понадобится в ближайшее время?

Слайд 17Почему это не понадобится в ближайшее время?
Поддержка классов появилась в

браузере Chrome в 2014 году. Это позволяет браузеру работать с

объявлениями классов без применения транспиляции или каких-либо вспомогательных библиотек.
На самом деле, поддержка этих механизмов браузерами — не более чем «синтаксический сахар». Эти конструкции преобразуются в те же базовые структуры, которые уже поддерживаются языком. В результате, даже если пользоваться новым синтаксисом, на более низком уровне всё будет выглядеть как создание конструкторов и манипуляции с прототипами объектов.
Почему это не понадобится в ближайшее время? 	Поддержка классов появилась в браузере Chrome в 2014 году. Это позволяет

Слайд 18Почему это не понадобится в ближайшее время?
https://kangax.github.io/compat-table/es6/

Почему это не понадобится в ближайшее время? https://kangax.github.io/compat-table/es6/

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

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


Для правообладателей

Яндекс.Метрика