Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Учебник по js: Основы JavaScript

Содержание

Учебник JavaScript | schoolsw3.com

На сайте нет рекламы

JavaScript является самым популярным в мире языком программирования.

JavaScript — это язык программирования интернета.

JavaScript — легко выучить.

Этот учебник научит вас JavaScript от базового до продвинутого.

Начните изучать JavaScript прямо сейчас »

Примеры в каждой главе

С помощью редактора «Попробуйте сами» вы можете отредактировать исходный код и просмотреть результат.

Пример

Мой Первый JavaScript

Нажмите на меня, чтобы отобразить дату и время

Попробуйте сами »


Используйте меню

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

Если у вас большой экран, меню всегда будет присутствовать слева.

Если у вас маленький экран, откройте меню, нажав на верхний знак меню ☰.


Учитесь на примерах

Лучше всего учиться на примерах. Примеры часто легче понять, чем текстовые объяснения.

Этот учебник дополняется объяснения поясняющими примеры «Попробуйте сами».

Если вы попробуете все примеры, вы узнаете много нового о JavaScript за очень короткое время!

Примеры JavaScript »


Зачем изучать JavaScript?

JavaScript является одним из 3 языков, все веб разработчики должны знать:

   1. HTML определение содержания веб страниц

   2. CSS чтобы указать макет веб страниц

   3. JavaScript для программирования поведения веб страниц



Скорость обучения

В этом уроке скорость обучения — это ваш выбор.

Все зависит от вас.

Если вы собираетесь, сделайте перерыв, лучше дочитать материал до конца.

Всегда убедитесь, что вы понимаете все примеры «Попробуйте сами».

Единственный способ стать умным программистом — это практиковаться. Практика. Практика. Код. Код. Код !



Наиболее часто задаваемые вопросы

  • Как мне получить JavaScript?
  • Где я могу скачать JavaScript?
  • Бесплатный код JavaScript?


Вам не нужно получать или скачивать JavaScript.

JavaScript уже работает в вашем браузере на вашем компьютере, на вашем планшете и на вашем смартфоне.

JavaScript можно использовать бесплатно для всех.


JavaScript Рекомендации

Schoolsw3 поддерживает полную ссылку на JavaScript, включая все объекты HTML и браузеры.

Справочник содержит примеры всех свойств, методов и событий и постоянно обновляется в соответствии с последними веб стандартами.

Полный справочник по JavaScript »


JavaScript тест викторин

Проверьте свои навыки JavaScript в Schoolsw3!

Начните тестирование JavaScript!


JavaScript экзамен — получи диплом!

Schoolsw3′ Онлайн Сертификация

Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и построение карьеры.

Уже выдано более 25 000 сертификатов!

Получите cвой cертификат »

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

Python Сертификат документирует ваши знания Python.

jQuery Сертификат документирует ваши знания jQuery.

SQL Сертификат документирует ваши знания SQL.

PHP Сертификат документирует ваши знания PHP и MySQL.

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания Bootstrap фреймворк.

Учебник Javascript для начинающих

JavaScript — это язык программирования, который активно используется в HTML и при разработке сайтов.

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

Зачем нужно изучать JavaScript?

JavaScript это один из 3 языков программирования, которые должен знать каждый, кто занимается веб-разработкой:

  1. HTML — определяет содержимое веб-страницы
  2. CSS — определяет стили отображения содержимого веб-страницы
  3. JavaScript — программирует поведение веб-страницы

При этом область применения JavaScript не ограничивается веб-приложениями. Многие десктопные и серверные программы также используют JavaScript. Например, программная платформа Node.js, базы данных MongoDB и CouchDB.

Что такое JavaScript?

  • JavaScript был создан для придания динамичности HTML страницам.
  • JavaScript — это скриптовый язык или язык сценариев.
  • Языки сценариев — это упрощённые языки программирования, создаваемые для работы в определённых средах.
  • Код, написанный на JavaScript, можно вставлять прямо в HTML-код веб-страницы.
  • Сценарий JavaScript представляет собой текстовый файл, поэтому написать его можно в простом текстовом редакторе, а для его работы достаточно запустить в окне браузера.

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

Благодаря скриптам JavaScript статичные HTML документы можно сделать динамичными и интерактивными.

  • Различные визуальные эффекты, вроде слайдеров, галерей картинок и динамического текста;
  • Проверка пользовательских данных формы до их отправки на сервер;
  • Вывод информации в новых окнах в автоматическом режиме;
  • Изменение содержимого окна браузера, в зависимости от действий пользователя;

Все это и многое другое реализуется при помощи JavaSсript.

Стоит сказать, что

JavaScript и Java совершенно разные, как по концепции, так и по реализации, языки программирования.

JavaScript был придуман Бренданом Эйхом (Brendan Eich) в 1995 году и стал стандартом ECMA в 1997 году. Официальное название стандарта — ECMA-262. А официальное названия языка — ECMAScript.

Версии Javascript

ТОП-15 книг по JavaScript: от новичка до профессионала

Фримен, Робсон – Изучаем программирование на JavaScript

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

Э. Фримен, Э. Робсон – Изучаем программирование на JavaScript

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

Несмотря на незатейливый дизайн обложки, читатели отмечают следующие преимущества самоучителя Фримена и Робсон:

  • доступная подача и простой язык описаний;
  • разносторонний подход к запоминанию материала;
  • многочисленные примеры.

Недостатки:

  • несколько отвлекающие иллюстрации;
  • большой размер книги;
  • мягкий переплёт.

Минник, Холланд – JavaScript для чайников

Поскольку JavaScript является ключевым языком программирования современных сайтов, важно сразу начинать изучение с правильных источников. Данный труд позволит быстро, качественно с небольшими усилиями постигнуть применение CSS, работу с HTML5 и общение с онлайн-графикой. Все темы (настройка среды, циклы, массивы, jQuery, анимация, JSON) сопровождаются проверкой полученных знаний онлайн на сайте издательства.

К. Минник, Е. Холланд – JavaScript для чайников

Преимущества:

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

Недостатки:

  • мягкая обложка;
  • бледные иллюстрации;
  • мало разбора кода.

Д. Крокфорд – Как устроен JavaScript

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

К. Дуглас – Как устроен JavaScript

Книга вышла в издательстве Питер в 2019 г., поэтому отзывов пока немного, вот один из них:

Весьма оригинальная книга для книжной JavaScript-арены. Субъективный взгляд на то, как работать с этим языком от одного из самых продвинутых его знатоков. JS хорош тем, что на нем можно писать в очень разных стилях, есть множество подходов, которые работают тут, в отличие от более узконаправленных языков. И Дуглас Крокфорд рассказывает о своём видении языка и работы с ним, без особой любви к JS и сюсюканья с ним, но довольно субъективно, тем не менее. Приводит много своих личных «трюков», которые мне понравились, многое не знал, хотя пишу веб-приложения довольно давно.

Из рецензии на книгу читателя с ником loenkoff

Э. Браун – Изучаем JavaScript. Руководство по созданию современных веб-сайтов

Это издание познакомит вас с правилами, спецификациями и инструментальными методами, используемыми в ES6, опираясь на практическую основу, а также научит создавать эффективные приложения на клиентской стороне и в Node.js. Вот неполный список того, с чем вам придётся иметь дело в процессе обучения:

  • использование ES6 для транскомпиляции;
  • механика применения функций JavaScript;
  • объекты и объектно-ориентированное программирование;
  • итераторы, генераторы и прокси-объекты;
  • асинхронное программирование;
  • Node.js.

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

Э. Браун – Изучаем JavaScript. Руководство по созданию современных веб-сайтов

Преимущества:

  • качественная печать и переплёт;
  • простой язык, интересная подача;
  • Хорошо описан фундамент JS и асинхронное программирование.

Недостатки:

  • там, где должны стоять обратные кавычки (`) стоят обычные одинарные () или обычные двойные (") ;
  • некоторые примеры и конструкции недостаточно ясно разобраны, объяснения малочисленны;
  • прикладная разработка, например, в браузере, дана поверхностно.

Д. Дакетт – Javascript и jQuery. Интерактивная веб-разработка

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

Д. Джон – Javascript и jQuery. Интерактивная веб-разработка

Книга в сообществе Книги для программистов

Преимущества:

  • много иллюстраций, качественная печать, твёрдый переплёт.

Недостатки:

  • не весь код из книги корректно работает.

С. Стефанов – JavaScript. Шаблоны

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

С. Стефанов – JavaScript. Шаблоны

Книга в сообществе Книги для программистов

Преимущества:

  • понятность изложения;
  • доступность среднему уровню и выше;
  • в книге описывается масса примеров хорошего и плохого кода;
  • рекомендуется всем тем, кому «грозит» процедура вхождения в JavaScript-фреймворки.

Недостатки:

  • русский перевод очень «механический», что портит общее впечатление.

Резиг, Бибо, Марас – Секреты JavaScript ниндзя

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

Резиг, Бибо, Марас – Секреты JavaScript ниндзя

Книга в сообществе Книги для программистов

Преимущества:

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

Недостатки:

  • иногда реализация издания неправильно сброшюрована, надо проверять при покупке.

М. Хавербеке – Выразительный JavaScript. Современное веб-программирование

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

М. Хавербеке – Выразительный JavaScript. Современное веб-программирование

Книга в сообществе Книги для программистов

Преимущества:

  • много материала, примеров, практических заданий;
  • есть интернет-песочница для упражнений.

Недостатки:

  • в переводе используется слово «привязка» вместо «переменная»;
  • мягкая обложка.

Н. Закас – JavaScript. Оптимизация производительности

Всем известно (ну, или почти всем) что вся динамика
сайта построена на JS.
Эта динамика имеет минус – замедление загрузки страницы, важной для маленького
отклика ресурса. Книга расскажет о приёмах и секретах, применяемых для
устранения слабых мест, несущих просадку производительности. Вы освоите
ускорение выполнения загрузки, методы манипулирования с DOM, правильную работу со страницей и
массу другой полезной информации.

Н. Закас – JavaScript. Оптимизация производительности

Преимущества:

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

Недостатки:

  • некоторые измерения уже устарели (современные браузеры шагнули далеко вперёд).

Л.
Атенсио – Функциональное программирование на JavaScript

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

Л. Атенсио – Функциональное программирование на JavaScript

Книга в сообществе Книги для программистов

Преимущества:

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

Недостатки:

  • мягкая обложка, качество бумаги;
  • читатели отмечают сомнительные моменты в коде.

М. Фаулер – Рефакторинг кода на JavaScript

Без качественного рефакторинга сложно себе
представить работоспособный и растущий проект. В этом труде описано более 50
способов отрефакторить код с практическими примерами. Работы Мартина Фаулера
пользуется популярностью и данная книга не исключение.

М. Фаулер – Рефакторинг кода на JavaScript

Книга вышла недавно, в 2019 году, отзыв читателя:

Понятно рассказано: что такое рефакторинг, когда его применять, с чего начинать, что получим в результате. Щедрые кодовые примеры. Легко читается, у Автора прекрасное чувство юмора. Книга помогает вернуть любовь к программированию на JS ). Код на JavaScript, пожалуй самый нуждающийся в рефакторинге.

Отзыв читателя под книгой на Ozon

Н. Морган – Самоучитель по JavaScript для детей

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

Н. Морган – Самоучитель по JavaScript для детей

Книга в сообществе Книги для программистов

Преимущества:

  • увлекательное изложение, нравится не только детям, но и некоторым взрослым;
  • много материала, книга объёмная;
  • хорошее качество печати.

Недостатки:

  • читатели обнаружили неправильные примеры кода.

Д. МакФарланд – JavaScript и jQuery. Исчерпывающее руководство

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

Д. МакФарланд – JavaScript и jQuery. Исчерпывающее руководство

Преимущества:

  • книга даёт много знаний по jQuery;
  • твёрдый переплёт;
  • написана простым языком.

Недостатки:

  • книга в большей мере посвящена jQuery и jQuery UI;
  • изложение иногда слишком подробное.
  • есть повторения одного и того же текста.

Р. Никсон – Создаём динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5

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

  1. PHP и основы объектно-ориентированного программирования.
  2. Основы MySQL.
  3. Сookie-файлы и сеансы.
  4. Вызовы AJAX, динамика сайта.
  5. Основы CSS, форматирование и оформление страниц.
  6. Продвинутый HTML5, геолокация, обработка аудио и видео.

Р. Никсон – Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5

Книга в сообществе Книги для программистов

https://t.me/progbook/4219

Преимущества:

  • понятный язык, читается легко;
  • контрольные вопросы с ответами для самопроверки.

Недостатки:

  • мягкий переплёт.

Д. Флэнаган – JavaScript. Карманный справочник

Несмотря на небольшой объём издания, в книге представлены наиболее важные сведения о JavaScript и приведены полезные практические примеры. Главы можно разделить на две основные части

  • 1 – 9: описание синтаксиса ECMAScript 5. Типы данных, значения и переменные. Инструкции, операторы и выражения. Объекты, массивы, классы, функции и регулярные выражения.
  • 10 – 14: функциональные возможности языка, модель DOM и HTML5. Взаимодействие кода JavaScript с браузером, сценарии HTML-документов и элементы страницы. Управление стилями и классами CSS посредством кода JavaScript. Реагирование на события мыши и клавиатуры, взаимодействие с веб-серверами и хранение данных на компьютере пользователя.

Дэвид Флэнаган – JavaScript. Карманный справочник

Преимущества:

  • компактный размер.

Недостатки:

  • оригинал издан в 2012 году, отсутствуют данные по новым стандартам.

***

Мы забыли о какой-то книге? Напишите в комментариях – добавим.

Читали какую-то из перечисленных? Будем рады вашим отзывам.

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

5 книг по JavaScript для начинающих — Блог HTML Academy

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

Если вы знаете английский язык, то советуем читать их в оригинале.

JavaScript для детей

«Самоучитель по программированию.»

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

Книга на Озоне

JavaScript. Подробное руководство

«JavaScript. Подробное руководство.»

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

Книга на Озоне

Выразительный JavaScript

«Выразительный JavaScript.»

Знакомит с основами программирования и языка JavaScript. В ней предлагается выполнить несколько небольших проектов, чтобы закрепить материал. Один из них — создание своего языка программирования. В книге также рассказывается о canvas, SVG и Node.js.

Читать перевод

Грокаем алгоритмы

«Иллюстрированное пособие для программистов и любопытствующих.»

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

Книга на Озоне

JavaScript for Web Designers

«JavaScript for Web Designers.»

В книге доступно рассматриваются основы JavaScript. В целом ориентирована на начинающих.

Книга на Амазоне

Совет: Читая книги, не забывайте запускать у себя код из примеров. Так вы закрепите прочитанное на практике и лучше усвоите информацию.

12 полезных книг по JavaScript — Блог HTML Academy

Делимся подборкой книг, которая пригодится любому программисту (но особенно веб–разработчику) — в ней 12 книг, от подробных руководств по JavaScript до классики Роберта Мартина о чистом коде.

Изучаем программирование на JavaScript

Эрик Фримен, Элизабет Робсон

«Изучаем программирование на JavaScript»

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

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

Серия «Вы не знаете JavaScript»

Кайл Симпсон

«Типы и грамматические конструкции JS»

В одной из предыдущих книжных подборок мы рассказывали о книге Кайла Симпсона «ES6 и не только», которая отлично подходит для быстрого введения в новые возможности языка JavaScript и является продолжением серии «Вы не знаете JavaScript» (You don’t know JS).

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

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

Книги доступны для изучения в репозитории автора или в русском переводе.

Как устроен JavaScript

Дуглас Крокфорд

«Как устроен JavaScript»

Дуглас Крокфорд — известный специалист в мире JavaScript. Он рассказывает, как язык устроен «под капотом». Книга не учит программированию, а объясняет нюансы языка, поэтому рекомендуем тем, кто осилил Кайла Симпсона — это логическое продолжение его работ.

Вот неполный список вопросов, на которые отвечает книга:

  • Как устроены объекты
  • Почему ООП в JavaScript реализовано именно так
  • Как работают генераторы
  • Зачем нужен и как используется оператор this
  • Как JavaScript работает с числами.

Если книга не учит программировать, то зачем её читать разработчикам? Чтобы лучше понимать, как работает основной инструмент — язык программирования, а заодно подготовиться к очередному собеседованию. 

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

Секреты JavaScript ниндзя

Джон Резиг, Блэр Либо

«Секреты JavaScript ниндзя»

Изучение JavaScript порой вводит в ступор даже разработчиков с опытом. При этом разобраться с основами языка обычно несложно — трудней понять нюансы и особенности. Например, замыкания, объекты высшего порядка, асинхронное выполнение кода и ряд других тем могут оказаться очень сложными для новичков. Разобраться с этими вопросами на реальных примерах поможет книга «Секреты JavaScript ниндзя».

Книга ориентирована на опытных JavaScript-программистов, которые хотят прокачать свои навыки. В книге есть главы с разбором синтаксиса, но основное внимание уделено практическому решению задач, тестированию кода, работе Event Loop и другим прикладным задачам. К концу 2020 года большая часть информации в книге остаётся актуальной, хотя некоторые главы и устарели.

Рефакторинг кода на JavaScript

Мартин Фаулер

«Рефакторинг кода на JavaScript»

Мартин Фаулер вряд ли нуждается в особом представлении. Он написал с десяток книг, где поделился богатым опытом написания качественного кода. Одна из последних его работ — «Рефакторинг кода на JavaScript».

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

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

Чистый код. Создание, анализ и рефакторинг

Роберт Мартин

«Чистый код. Создание, анализ и рефакторинг»

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

Эта книга — классика и настоящая находка для разработчиков любого уровня. Роберт Мартин приводит много примеров хорошего и плохого кода, заостряет внимание на проектировании и типичных ошибках, которые возникают во время этого процесса. Суть книги — не в готовых решениях, а в том, что автор учит думать о чистом коде и делится подходами, которые помогут развить навык его написания. Примеры в книге приведены на языке Java, но существует репозиторий c адаптацией кода под JavaScript.

JavaScript. Подробное руководство

Дэвид Флэнаган

«JavaScript. Подробное руководство»

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

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

Хорошие книги — сила, но без практики никуда.

Тренажёры по JavaScript дают навыки работы с живым кодом.

Написать код

10 книг, рекомендуемых для изучения JavaScript

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

Решать задачи

×

Перевод статьи CantonaD «10 recommended books for learning JavaScript».

JavaScript это легковесный язык программирования, но, тем не менее, один из самых мощных.

Его использование в Интернет стремительно растет, он очень популярен среди веб-разработчиков. В настоящее время у JavaScript больше всего активных проектов на GitHub.

Для веб-разработчика, желающего выжить в мире Интернет, важно иметь навыки работы с JavaScript.

Если вы прям сейчас хотите попробовать свои силы в JavaScript, попробуйте пройти тест в 20 вопросов по результатам которого вы сможете понять, стоит ли вам изучать этот язык самому или же пойти на курсы по программированию. Вопросы довольно сложные для новичка. Но проходной балл доступный.
ПРОЙТИ ТЕСТ

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

1. «JavaScript. Сильные стороны»

Эта книга по JavaScript написана Дугласом Крокфордом. Она очень известна среди веб-разработчиков.

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

  • Синтаксис
  • Функции
  • Массивы
  • Объекты
  • Методы
  • Наследование
  • Регулярные выражения
  • Прекрасные фичи
  • Стиль

2. «Вы не знаете JS»

«You Don’t Know JS» это, собственно говоря, серия из 6 книг, написанных Кайлом Симпсоном.

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

Если вы новичок, книги стоит читать в таком порядке:

  • Up & Going («Начните и Совершенствуйтесь»)
  • Scope & Closures («Область Видимости и Замыкания»)
  • this & Object Prototypes («This и Прототипы Объектов»)
  • Types & Grammar («Типы и Синтаксис»)
  • Async & Performance («Асинхронность и производительность»)
  • ES6 & Beyond («ES6 и не только»)

3. «Выразительный Javascript»

«Eloquent Javascript» (автор — Марейн Хавербек) также является одной из популярных книг в среде веб-разработчиков.

Эта книга состоит из 22 частей, раскрывающих все лучшее в JS на уровне от базового до среднего с указанием лучших приемов.

Прочтя эту книгу вы узнаете о разнообразных вещах, от базового синтаксиса и структуры данных в JavaScript до эффективности DOM и управления node.js для создания сервера.

4. «Сила JavaScript. 68 способов эффективного использования JS»

Эта книга, написанная Дэвидом Херманом, предназначена для тех, у кого уже есть базовое понимание JavaScript.

Книга «Effective JavaScript» содержит советы эксперта по JavaScript. Она написана для разработчиков с уровнем знаний от среднего и выше.

Произведение Дэвида Хермана предлагает 68 проверенных способов, которые помогут вам в решении ваших задач и в организации кода.

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

5.«JavaScript. Подробное руководство»

Это одна из самых хорошо организованных и детальных книг по JavaScript. Написал ее Дэвид Флэнаган.

«Подробное руководство» дает детальный обзор концепции JavaScript и особенностей вебплатформенного API, имеющих отношение к разработке веб-приложений.

6. «Секреты JavaScript ниндзя»

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

Книга рассчитана на разработчиков среднего уровня.

7. «JavaScript. Шаблоны»

Эта книга написана старшим разработчиком в Yahoo Стояном Стефановым. Она поможет вам изучить JavaScript с помощью многочисленных шаблонов программирования. Хотите вы писать фронтенд, бэкенд или десктопные приложения – этак книга является для вас лучшим выбором.

8. «Принципы ООП в Javascript»

Николас Закас, автор этой книги, объяснил в ней природу объектно-ориентированного программирования уникальным способом.

Эта книга помогает глубже понять такие ключевые характеристики, как наследование, функции, объекты. Книга хороша как для новичков, так и для экспертов.

9. «Программирование приложений на JavaScript»

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

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

В книге также описываются способы тестирования, интегрирования и развертывания обновлений программного обеспечения.

10. «JavaScript. Основы»

Это один из бестселлеров по JavaScript. Автор книги — Пол Уилтон. Книга предназначена для новичков. Это одно из самых обновляемых руководств.

«JavaScript. Основы» охватывает много продвинутых тем, включая новые элементы HTML5 и их API, JSON, функции, события, новые свойства геолокации и многое другое.

Заключение

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

Учебник по Javascript — it-brain.online

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

Зачем изучать Javascript

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

  • Javascript — это самый популярный язык программирования в мире, что делает его отличным выбором для программистов. Как только вы изучите Javascript, он поможет вам разрабатывать отличные интерфейсные и фоновые программы с использованием различных основанных на Javascript сред, таких как jQuery, Node.JS и т. Д.

  • Javascript есть везде, он устанавливается в каждом современном веб-браузере, поэтому для изучения Javascript вам действительно не нужны никакие специальные настройки среды. Например, Chrome, Mozilla Firefox, Safari и все браузеры, которые вы знаете на сегодняшний день, поддерживают Javascript.

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

  • Использование JavaScript теперь распространяется на разработку мобильных приложений, настольных приложений и разработку игр. Это открывает много возможностей для вас, как программиста Javascript.

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

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

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

Привет Мир, используя Javascript

Просто чтобы немного побаловать вас программированием на Javascript , я собираюсь дать вам небольшую традиционную программу Javascript Hello World. Вы можете попробовать ее, используя демонстрационную ссылку

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>      
   </body>
</html>

Существует много полезных Javascript-фреймворков и библиотек:

  • Angular

  • реагировать

  • JQuery

  • Vue.js

  • Ext.js

  • ember.js

  • Meteor

  • Mithril

  • Node.js

  • полимер

  • Aurelia

  • Backbone.js

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

Приложения программирования Javascript

Как упоминалось ранее, Javascript является одним из наиболее широко используемых языков программирования (как Front-end, так и Back-end). Он присутствует практически во всех областях разработки программного обеспечения. Я собираюсь перечислить несколько из них здесь:

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

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

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

  • Загрузка внутренних данных — Javascript предоставляет библиотеку Ajax, которая помогает загружать внутренние данные, пока вы выполняете какую-то другую обработку. Это действительно дает удивительный опыт посетителям вашего сайта.

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

  • Серверные приложения — Node JS построен на среде выполнения Chrome Javascript для создания быстрых и масштабируемых сетевых приложений. Это библиотека на основе событий, которая помогает в разработке очень сложных серверных приложений, включая веб-серверы.

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

Аудитория

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

Предпосылки

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

Арифметика JavaScript


Арифметические операторы JavaScript

Арифметические операторы выполняют арифметические действия с числами (литералами или переменными).

Оператор Описание
+ Дополнение
Вычитание
* Умножение
** Возведение в степень (ES2016)
/ Дивизион
% Модуль (остаток)
++ Приращение
Декремент

Арифметические операции

Типичная арифметическая операция работает с двумя числами.

Два числа могут быть литералами:

или переменные:

или выражений:


Операторы и операторы

Числа (в арифметической операции) называются операндами .

Операция (выполняемая между двумя операндами) определяется оператором .

Операнд Оператор Операнд
100 + 50


Добавление

Оператор сложения ( + ) добавляет числа:


Вычитание

Оператор вычитания Оператор ( - ) вычитает числа.


Умножение

Оператор умножения ( * ) умножает числа.


Разделение

Оператор деления (/) делит числа.


Остаток

Оператор модуля (% ) возвращает остаток от деления.

В арифметике деление двух целых чисел дает частное
и остаток .

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


Приращение

Оператор приращения Оператор ( ++ ) увеличивает числа.


Уменьшение

Оператор уменьшения Оператор ( - ) уменьшает числа.


Возведение в степень

Оператор возведения в степень Оператор ( ** ) возводит первый операнд в степень второго операнда.

x ** y дает тот же результат, что и Math.pow (x, y) :


Приоритет оператора

Приоритет оператора описывает порядок, в котором операции выполняются в
арифметическое выражение.

Результат примера выше такой же, как 150 * 3, или это то же самое, что и 100
+ 150?

Сначала выполняется сложение или умножение?

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

Умножение ( * ) и деление (/) имеют более высокий приоритет , чем , чем
сложение ( + ) и вычитание ( - ).

И (как в школьной математике) приоритет можно изменить, используя
круглые скобки:

При использовании скобок вычисляются операции внутри скобок.
первый.

Когда многие операции имеют одинаковый приоритет (например, сложение и
вычитание), они вычисляются слева направо
справа:


Значения приоритета оператора JavaScript

Бледно-красные записи указывают на ECMAScript 2015 (ES6) или выше.

Значение Оператор Описание Пример
21 () Группировка выражений (3 + 4)
20. Член лиц.
20 [] Член человек [«имя»]
20 () Вызов функции myFunction ()
20 новые Создать новая дата ()
18 ++ Приращение постфикса i ++
18 Постфиксный декремент i —
17 ++ Приращение префикса ++ я
17 Уменьшение префикса —i
17! Логическое не! (Х == у)
17 тип Тип тип x
16 ** Возведение в степень (ES2016) 10 ** 2
15 * Умножение 10 * 5
15/ Дивизион 10/5
15% Остаток отдела 10% 5
14 + Дополнение 10 + 5
14 Вычитание 10–5
13 << Сдвиг влево x << 2
13 >> Сдвиг вправо х >> 2
13 >>> Сдвиг вправо (без знака) х >>> 2
12 < Менее х <у
12 <= Меньше или равно х <= у
12> Больше x> y
12> = Больше или равно х> = у
12 в Имущество в объекте «ИП» по математике
12 экземпляр Экземпляр объекта instanceof Массив
11 == равно х == у
11 === Строгое равен x === y
11! = Неравно х! = У
11! == Строгое неравное х! == у
10 и Побитовое И x & y
9 ^ Побитовое исключающее ИЛИ х ^ у
8 | Побитовое ИЛИ x | y
7 && логический И х && у
6 || Логическое ИЛИ x || y
5 ?? Нулевое слияние х ?? y
4? : Состояние? «Да»: «Нет»
3 + = Переуступка х + = у
3 / = Переуступка х / = у
3 — = Переуступка х — = у
3 * = Переуступка х * = у
3% = Переуступка x% = y
3 << = Переуступка x << = y
3 >> = Переуступка х >> = у
3 >>> = Переуступка х >>> = у
3 & = Переуступка x & = y
3 ^ = Переуступка х ^ = у
3 | = Переуступка х | = у
2 выход Функция паузы выход x
1, запятая 5, 6

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



Введение в JavaScript

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

JavaScript изначально был создан для «оживления веб-страниц».

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

Сценарии предоставляются и выполняются как простой текст.Для запуска им не нужна специальная подготовка или компиляция.

В этом аспекте JavaScript сильно отличается от другого языка, называемого Java.

Почему это называется Java Script?

Когда был создан JavaScript, он изначально имел другое имя: «LiveScript». Но в то время Java была очень популярна, поэтому было решено, что позиционирование нового языка как «младшего брата» Java поможет.

Но по мере развития JavaScript стал полностью независимым языком со своей собственной спецификацией под названием ECMAScript, и теперь он вообще не имеет отношения к Java.

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

Браузер имеет встроенный движок, который иногда называют «виртуальной машиной JavaScript».

У разных двигателей разные «кодовые имена». Например:

  • V8 — в Chrome и Opera.
  • SpiderMonkey — в Firefox.
  • … Существуют и другие кодовые имена, такие как «Chakra» для IE, «JavaScriptCore», «Nitro» и «SquirrelFish» для Safari и т. Д.

Приведенные выше термины следует помнить, поскольку они используются в статьях для разработчиков в Интернете. Мы тоже воспользуемся ими. Например, если «функция X поддерживается V8», то она, вероятно, работает в Chrome и Opera.

Как работают двигатели?

Двигатели сложные. Но основы просты.

  1. Механизм (встроенный, если это браузер) читает («анализирует») скрипт.
  2. Затем он преобразует («компилирует») сценарий в машинный язык.
  3. И затем довольно быстро запускается машинный код.

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

Современный JavaScript — это «безопасный» язык программирования. Он не обеспечивает низкоуровневый доступ к памяти или ЦП, поскольку изначально был создан для браузеров, которым он не требуется.

Возможности

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

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

Например, встроенный в браузер JavaScript может:

  • Добавьте новый HTML на страницу, измените существующее содержимое, измените стили.
  • Реагируйте на действия пользователя, запускайте щелчки мыши, движения указателя, нажатия клавиш.
  • Отправлять запросы по сети на удаленные серверы, скачивать и выгружать файлы (так называемые технологии AJAX и COMET).
  • Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
  • Запомните данные на стороне клиента («локальное хранилище»).

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

Примеры таких ограничений:

  • JavaScript на веб-странице не может читать / записывать произвольные файлы на жесткий диск, копировать их или выполнять программы.У него нет прямого доступа к функциям ОС.

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

    Существуют способы взаимодействия с камерой / микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может тайно активировать веб-камеру, наблюдать за окружающей обстановкой и отправлять информацию в АНБ.

  • Различные вкладки / окна обычно не знают друг о друге. Иногда это так, например, когда одно окно использует JavaScript для открытия другого. Но даже в этом случае JavaScript с одной страницы может не получить доступ к другой, если они поступают с разных сайтов (из другого домена, протокола или порта).

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

    Это ограничение опять же для безопасности пользователя. Страница с http://anysite.com , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL-адресом http://gmail.com и красть информацию оттуда.

  • JavaScript может легко связываться через сеть с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов / доменов ограничена. Хотя это возможно, для этого требуется явное согласие (выраженное в заголовках HTTP) с удаленной стороны.Еще раз, это ограничение безопасности.

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

В JavaScript есть как минимум три замечательных особенностей:

  • Полная интеграция с HTML / CSS.
  • Простые вещи делаются просто.
  • Поддерживается всеми основными браузерами и включена по умолчанию.

JavaScript — единственная браузерная технология, сочетающая в себе эти три вещи.

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

При этом JavaScript также позволяет создавать серверы, мобильные приложения и т. Д.

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

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

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

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

Примеров таких языков:

  • CoffeeScript — это «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, что позволяет нам писать более ясный и точный код. Обычно это нравится разработчикам Ruby.
  • TypeScript сконцентрирован на добавлении «строгой типизации данных» для упрощения разработки и поддержки сложных систем.Он разработан Microsoft.
  • Flow также добавляет типизацию данных, но другим способом. Разработано Facebook.
  • Dart — это автономный язык, у которого есть собственный движок, который работает в средах без браузера (например, в мобильных приложениях), но также может быть перенесен на JavaScript. Разработано Google.
  • Brython — это транспилятор Python в JavaScript, который позволяет писать приложения на чистом Python без JavaScript.
  • Kotlin — это современный, лаконичный и безопасный язык программирования, предназначенный для браузера или Node.

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

  • JavaScript изначально создавался как язык только для браузера, но теперь он используется и во многих других средах.
  • Сегодня JavaScript занимает уникальное положение как наиболее широко распространенный язык браузеров с полной интеграцией с HTML / CSS.
  • Есть много языков, которые «переносятся» в JavaScript и предоставляют определенные функции.Рекомендуется хотя бы кратко взглянуть на них после освоения JavaScript.

Введение в React — React

Это руководство не предполагает наличия каких-либо знаний React.

Перед тем, как мы начнем обучение

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

Подсказка

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

Учебное пособие разделено на несколько разделов:

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

Что мы строим?

В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с React.

Вы можете увидеть, что мы будем строить здесь: Final Result . Если код вам не понятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.

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

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

Предварительные требования

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

Если вам нужно изучить JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом руководстве мы используем стрелочные функции, классы, операторы let и const . Вы можете использовать Babel REPL, чтобы проверить, в какой код ES6 компилируется.

Установка для учебника

Есть два способа выполнить это руководство: вы можете написать код в браузере или настроить локальную среду разработки на своем компьютере.

Вариант настройки 1. Запись кода в браузере

Это самый быстрый способ начать работу!

Сначала откройте этот Starter Code в новой вкладке. На новой вкладке должно отображаться пустое поле для игры в крестики-нолики и код React. В этом руководстве мы будем редактировать код React.

Теперь вы можете пропустить второй вариант настройки и перейти в раздел «Обзор», чтобы получить обзор React.

Вариант установки 2: Локальная среда разработки

Это совершенно необязательно и не требуется для этого урока!

Необязательно: инструкции по локальному выполнению с использованием предпочитаемого вами текстового редактора

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

  1. Убедитесь, что у вас установлена ​​последняя версия Node.js.
  2. Следуйте инструкциям по установке Create React App, чтобы создать новый проект.
  npx приложение create-реагировать мое приложение  
  1. Удалите все файлы в папке src / нового проекта

Примечание:

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

  cd my-app
cd src


rm -f *


del *


cd ..  
  1. Добавьте файл с именем index.css в папку src / с этим кодом CSS.
  2. Добавьте файл с именем index.js в папку src / с этим кодом JS.
  3. Добавьте эти три строки в начало index.js в папке src / :
  импорт React из react;
импортировать ReactDOM из react-dom;
Импортировать './index.css ';  

Теперь, если вы запустите npm start в папке проекта и откроете http: // localhost: 3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

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

Помогите, я застрял!

Если вы застряли, обратитесь к ресурсам поддержки сообщества. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если вы не получили ответа или по-прежнему не можете решить проблему, сообщите о проблеме, и мы поможем вам.

Обзор

Теперь, когда вы настроили, давайте рассмотрим React!

Что такое React?

React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет составлять сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

React имеет несколько различных типов компонентов, но мы начнем с подклассов React.Component :

  class ShoppingList расширяет React.Компонент {
  оказывать() {
    возвращение (
      

Список покупок для {this.props.name}

  • Instagram
  • WhatsApp
  • Oculus
); } }

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

Здесь ShoppingList — это класс компонента React или тип компонента React . Компонент принимает параметры, называемые реквизитами (сокращение от «свойства»), и возвращает иерархию представлений для отображения с помощью метода render .

Метод render возвращает описание того, что вы хотите видеть на экране. React берет описание и отображает результат. В частности, render возвращает элемент React , который является упрощенным описанием того, что нужно визуализировать.Большинство разработчиков React используют специальный синтаксис под названием «JSX», который упрощает написание этих структур. Синтаксис

преобразуется во время сборки в React.createElement ('div') . Пример выше эквивалентен:

  return React.createElement ('div', {className: 'shopping-list'},
  React.createElement ('h2',),
  React.createElement ('ul',)
);  

См. Полную развернутую версию.

Если вам интересно, createElement () более подробно описан в справочнике по API, но мы не будем использовать его в этом руководстве.Вместо этого мы продолжим использовать JSX.

JSX включает все возможности JavaScript. Вы можете поместить любых выражений JavaScript в фигурные скобки внутри JSX. Каждый элемент React — это объект JavaScript, который вы можете сохранить в переменной или передать в своей программе.

Компонент ShoppingList выше отображает только встроенные компоненты DOM, такие как

и

  • . Но вы также можете создавать и отображать собственные компоненты React.Например, теперь мы можем обратиться ко всему списку покупок, написав . Каждый компонент React инкапсулирован и может работать независимо; это позволяет создавать сложные пользовательские интерфейсы из простых компонентов.

    Проверка кода запуска

    Если вы собираетесь работать с учебником в своем браузере, откройте этот код в новой вкладке: Стартовый код . Если вы собираетесь работать над учебником локально, вместо откройте src / index.js в папке вашего проекта (вы уже касались этого файла во время установки).

    Этот Стартовый код — основа того, что мы создаем. Мы предусмотрели стили CSS, поэтому вам нужно сосредоточиться только на изучении React и программировании игры в крестики-нолики.

    Изучив код, вы заметите, что у нас есть три компонента React:

    Компонент Square отображает один ); } }

    Раньше:

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

    Посмотреть полный код здесь

    Поздравляем! Вы только что «передали опору» от родительского компонента Board дочернему компоненту Square. Передача реквизита — это то, как информация передается в приложениях React от родителей к детям.

    Создание интерактивного компонента

    Давайте заполним компонент «Квадрат» знаком «X», когда мы щелкнем по нему.
    Сначала измените тег кнопки, возвращаемый функцией render () компонента Square, на этот:

      класс Square расширяет React.Компонент {
      оказывать() {
        возвращение (
          
        );
      }
    }  

    Если вы сейчас нажмете на квадрат, вы должны увидеть «щелчок» в консоли инструментов разработчика вашего браузера.

    Примечание

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

      класс Square расширяет React.Компонент {
     оказывать() {
       возвращение (
         
       );
     }
    }  

    Обратите внимание, как с onClick = {() => console.log ('click')} мы передаем функцию как опору onClick . React вызовет эту функцию только после щелчка. Забыть () => и написать onClick = {console.log ('click')} является распространенной ошибкой и срабатывает каждый раз при повторной визуализации компонента.

    В качестве следующего шага мы хотим, чтобы компонент Square «запомнил», что по нему щелкнули, и заполнил его знаком «X». Чтобы «запомнить» вещи, компоненты используют состояние .

    Компоненты React могут иметь состояние, установив this.state в их конструкторах. this.state следует рассматривать как частный для компонента React, в котором он определен. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии на Square.

    Сначала мы добавим в класс конструктор для инициализации состояния:

      class Square extends React.Component {
      конструктор (реквизит) {супер (реквизит); this.state = {значение: null,}; }
      оказывать() {
        возвращение (
          
        );
      }
    }  

    Примечание

    В классах JavaScript вам всегда нужно вызывать super при определении конструктора подкласса.Все классы компонентов React, которые имеют конструктор , должны начинаться с вызова super (props) .

    Теперь мы изменим метод рендеринга Square , чтобы отображать значение текущего состояния при нажатии:

    • Замените this.props.value на this.state.value внутри тега
    • Замените обработчик событий onClick = {...} на onClick = {() => this.setState ({value: 'X'})} .
    • Поместите реквизиты className и onClick в отдельные строки для лучшей читаемости.

    После этих изменений тег ); } }

    Вызывая this.setState из обработчика onClick в методе рендеринга Square , мы говорим React повторно отображать этот Square всякий раз, когда нажимается его ); } }

    При щелчке по квадрату вызывается функция onClick , предоставляемая Board. Вот обзор того, как это достигается:

    1. Опора onClick во встроенном компоненте DOM
    2. При нажатии кнопки React вызывает обработчик события onClick , который определен в методе render () Square.
    3. Этот обработчик событий вызывает this.props.onClick () . Свойство Square onClick было указано Правлением.
    4. Поскольку Board передал onClick = {() => this.handleClick (i)} в Square, Square вызывает this.handleClick (i) при нажатии.
    5. Мы еще не определили метод handleClick () , поэтому наш код дает сбой.Если сейчас щелкнуть квадрат, вы должны увидеть красный экран с ошибкой вроде «this.handleClick не является функцией».

    Примечание

    Атрибут onClick элемента DOM

    Когда мы пытаемся щелкнуть квадрат, мы должны получить сообщение об ошибке, потому что мы еще не определили handleClick . Теперь мы добавим handleClick к классу Board:

    .

      class Board extends React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Массив (9).заполнить (ноль),
        };
      }
    
      handleClick (я) {константные квадраты = this.state.squares.slice (); квадраты [я] = 'X'; this.setState ({квадраты: квадраты}); }
      renderSquare (i) {
        возвращение (
          <Квадрат
            значение = {this.state.squares [i]}
            onClick = {() => this.handleClick (i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок: X';
    
        возвращение (
          
    {status}
    {это.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

    Посмотреть полный код здесь

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

    Поскольку компоненты Square больше не поддерживают состояние, компоненты Square получают значения от компонента Board и информируют компонент Board при нажатии на них. В терминах React компоненты Square теперь являются контролируемыми компонентами .Правление полностью контролирует их.

    Обратите внимание, как в handleClick мы вызываем .slice () , чтобы создать копию массива squares для изменения вместо изменения существующего массива. В следующем разделе мы объясним, почему мы создаем копию массива квадратов .

    Почему важна неизменность

    В предыдущем примере кода мы предложили использовать метод .slice () для создания копии массива squares для копирования вместо изменения существующего массива.Теперь мы обсудим неизменность и то, почему ее важно изучать.

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

    Изменение данных с мутацией
      var player = {оценка: 1, имя: 'Джефф'};
    player.score = 2;
      
    Изменение данных без мутации
      var player = {оценка: 1, имя: 'Джефф'};
    
    var newPlayer = Объект.назначить ({}, игрок, {оценка: 2});
    
    
    
      

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

    Сложные функции становятся простыми

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

    Обнаружение изменений

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

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

    Определение момента повторного рендеринга в React

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

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

    Функциональные компоненты

    Теперь мы изменим Square на функциональный компонент .

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

    Замените класс Square этой функцией:

      function Square (реквизит) {
      возвращение (
        
      );
    }  

    Мы изменили this.props на props оба раза, когда он появляется.

    Посмотреть полный код здесь

    Примечание

    Когда мы изменили Square как функциональный компонент, мы также изменили onClick = {() => this.props.onClick ()} на более короткий onClick = {props.onClick} (обратите внимание на отсутствие круглых скобок на с обеих сторон ).

    По очереди

    Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: буквы «О» не могут быть отмечены на доске.

    По умолчанию мы установим первый ход как «X». Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board:

      class Board extends React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Array (9) .fill (null),
          xIsNext: true,};
      }  

    Каждый раз, когда игрок двигается, xIsNext (логическое значение) будет переворачиваться, чтобы определить, какой игрок пойдет следующим, и состояние игры будет сохранено.Мы обновим функцию Board handleClick , чтобы перевернуть значение xIsNext :

    .

      handleClick (i) {
        const squares = this.state.squares.slice ();
        квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,});
      }  

    С этим изменением «X» и «O» могут меняться по очереди. Попробуй!

    Давайте также изменим текст «статус» в выводе Board , чтобы он отображал, у какого игрока следующий ход:

      render () {
        const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        возвращение (
            

    После применения этих изменений у вас должен быть этот компонент платы:

      class Board extends React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Array (9) .fill (null),
          xIsNext: true,};
      }
    
      handleClick (i) {
        const squares = this.state.squares.slice (); квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({квадраты: квадраты, xIsNext:! this.state.xIsNext,}); }
    
      renderSquare (i) {
        возвращение (
          <Квадрат
            значение = {this.state.squares [i]}
            onClick = {() => this.handleClick (i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        возвращение (
          
    {status}
    {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {это.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

    Посмотреть полный код здесь

    Объявление победителя

    Теперь, когда мы показываем, какой игрок следующий ход, мы должны также показать, когда игра выиграна и больше нет ходов.Скопируйте эту вспомогательную функцию и вставьте ее в конец файла:

      function calculateWinner (квадраты) {
      const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ];
      for (let i = 0; i  

    Учитывая массив из 9 квадратов, эта функция проверяет победителя и возвращает 'X' , 'O' или null в зависимости от ситуации.

    Мы вызовем calculateWinner (squares) в функции Board render , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить такой текст, как «Победитель: X» или «Победитель: O». Мы заменим объявление status в функции Board render следующим кодом:

      render () {
        констант победитель = calculateWinner (this.state.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); }
        возвращение (
            

    Теперь мы можем изменить функцию Board handleClick , чтобы она возвращалась раньше, игнорируя щелчок, если кто-то выиграл игру или если квадрат уже заполнен:

      handleClick (i) {
        const squares = this.state.squares.slice ();
        если (вычислитьПобедитель (квадраты) || квадраты [я]) {возврат; } квадраты [i] = this.state.xIsNext? 'X': 'O';
        this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,
        });
      }  

    Посмотреть полный код здесь

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

    Добавление путешествия во времени

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

    Сохранение истории перемещений

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

    Однако мы использовали slice () для создания новой копии массива квадратов после каждого хода и считали ее неизменной. Это позволит нам хранить все предыдущие версии массива квадратов и перемещаться между уже произошедшими поворотами.

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

      история = [
      
      {
        квадраты: [
          нуль, ноль, ноль,
          нуль, ноль, ноль,
          нуль, ноль, ноль,
        ]
      },
      
      {
        квадраты: [
          нуль, ноль, ноль,
          ноль, 'X', ноль,
          нуль, ноль, ноль,
        ]
      },
      
      {
        квадраты: [
          нуль, ноль, ноль,
          ноль, 'X', ноль,
          ноль, ноль, 'O',
        ]
      },
      
    ]  

    Теперь нам нужно решить, какой компонент должен владеть состоянием истории .

    Снова поднятие состояния

    Нам нужно, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему потребуется доступ к истории , поэтому мы поместим состояние истории в компонент Game верхнего уровня.

    Размещение состояния history в компоненте Game позволяет нам удалить состояние squares из его дочернего компонента Board. Точно так же, как мы «подняли состояние» из компонента Square в компонент Board, мы теперь поднимаем его из Board в компонент Game верхнего уровня.Это дает компоненту Game полный контроль над данными Board и позволяет ему проинструктировать Board о рендеринге предыдущих ходов из истории .

    Сначала мы установим начальное состояние для компонента Game в его конструкторе:

      class Game расширяет React.Component {
      конструктор (реквизит) {супер (реквизит); this.state = {история: [{квадраты: массив (9) .fill (null),}], xIsNext: true,}; }
      оказывать() {
        возвращение (
          
    <Доска />
    {}
      {}
    ); } }

    Затем мы сделаем так, чтобы компонент Board получил квадратов и реквизитов onClick от компонента Game.Поскольку теперь у нас есть обработчик одного клика в Board для многих квадратов, нам нужно передать местоположение каждого квадрата в обработчик onClick , чтобы указать, какой квадрат был нажат. Вот необходимые шаги для преобразования компонента Board:

    • Удалите конструктор в Board.
    • Замените this.state.squares [i] на this.props.squares [i] в renderSquare Board .
    • Замените this.handleClick (i) на this.props.onClick (i) в панели renderSquare .

    Компонент Board теперь выглядит так:

      class Board extends React.Component {
      handleClick (i) {
        const squares = this.state.squares.slice ();
        if (calculateWinner (squares) || squares [i]) {
          возвращение;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'O';
        this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,
        });
      }
    
      renderSquare (i) {
        возвращение (
          <Квадрат
            value = {this.props.squares [i]} onClick = {() => this.props.onClick (i)} />
        );
      }
    
      оказывать() {
        констант победитель = calculateWinner (this.state.squares);
        пусть статус;
        если (победитель) {
          status = 'Победитель:' + победитель;
        } еще {
          status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        }
    
        возвращение (
          
    {status}
    {this.renderSquare (0)} {this.renderSquare (1)} {это.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

    Мы обновим функцию render компонента Game, чтобы использовать самую последнюю запись в истории для определения и отображения статуса игры:

      render () {
        const history = this.state.history; const current = history [history.length - 1]; const победитель = calculateWinner (current.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); }
        возвращение (
          
    this.handleClick (i)} />
    {status}
      {}
    ); }

    Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода render Board.После рефакторинга функция платы render выглядит так:

      render () {return (
    {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {это.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); }

    Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game. Нам также необходимо изменить handleClick , потому что состояние компонента Game имеет другую структуру. В рамках метода handleClick Game мы объединяем новые записи истории в историю .

      handleClick (i) {
        const history = this.state.history; const current = history [history.length - 1]; const squares = current.squares.slice (); if (calculateWinner (squares) || squares [i]) {
          возвращение;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'O';
        this.setState ({
          history: history.concat ([{квадраты: квадраты,}]), xIsNext:! this.state.xIsNext,
        });
      }  

    Примечание

    В отличие от метода array push () , с которым вы, возможно, более знакомы, метод concat () не изменяет исходный массив, поэтому мы предпочитаем его.

    На этом этапе компоненту Board нужны только методы renderSquare и render . Состояние игры и метод handleClick должны быть в компоненте Game.

    Посмотреть полный код здесь

    Показывая прошлые ходы

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

    Ранее мы узнали, что элементы React - это первоклассные объекты JavaScript; мы можем передавать их в наших приложениях.Чтобы отобразить несколько элементов в React, мы можем использовать массив элементов React.

    В JavaScript массивы имеют метод map () , который обычно используется для сопоставления данных с другими данными, например:

      постоянные числа = [1, 2, 3];
    const doubled = numbers.map (x => x * 2);  

    Используя метод map , мы можем сопоставить нашу историю ходов с элементами React, представляющими кнопки на экране, и отобразить список кнопок для «перехода» к прошлым ходам.

    Давайте сопоставим с историей в методе рендеринга игры :

      render () {
        const history = this.state.history;
        const current = history [history.length - 1];
        const победитель = calculateWinner (current.squares);
    
        const move = history.map ((step, move) => {const desc = move? 'Перейти к перемещению #' + move: 'Перейти к началу игры'; return (
  • );}); пусть статус; если (победитель) { status = 'Победитель:' + победитель; } еще { status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращение (
    <Доска квадраты = {current.squares} onClick = {(i) => this.handleClick (i)} />
    {статус}
      {движется}
    ); }

    Посмотреть полный код здесь

    Для каждого хода в истории игры в крестики-нолики мы создаем элемент списка

  • , который содержит кнопку
  • ); });

    Посмотреть полный код здесь

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

    Сначала добавьте stepNumber: 0 к начальному состоянию в конструкторе игры :

      class Game расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          история: [{
            квадраты: Array (9) .fill (null),
          }],
          stepNumber: 0, xIsNext: истина,
        };
      }  

    Затем мы определим метод jumpTo в Game, чтобы обновить этот stepNumber .Мы также устанавливаем xIsNext в значение true, если число, которое мы меняем stepNumber , четное:

      handleClick (i) {
        
      }
    
      jumpTo (шаг) {this.setState ({stepNumber: step, xIsNext: (step% 2) === 0,}); }
      оказывать() {
        
      }  

    Теперь мы внесем несколько изменений в метод Game handleClick , который срабатывает, когда вы нажимаете на квадрат.

    Добавленное нами состояние stepNumber отражает ход, отображаемый для пользователя сейчас.После того, как мы сделаем новый ход, нам нужно обновить stepNumber , добавив stepNumber: history.length как часть аргумента this.setState . Это гарантирует, что мы не застрянем, показывая один и тот же ход после того, как был сделан новый.

    Мы также заменим чтение this.state.history на this.state.history.slice (0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся в прошлое», а затем сделаем новый шаг с этой точки, мы выбросим всю «будущую» историю, которая теперь стала бы неверной.

      handleClick (i) {
        const history = this.state.history.slice (0, this.state.stepNumber + 1); const current = history [history.length - 1];
        const squares = current.squares.slice ();
        if (calculateWinner (squares) || squares [i]) {
          возвращение;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'O';
        this.setState ({
          history: history.concat ([{
            квадраты: квадраты
          }]),
          stepNumber: history.length, xIsNext:! this.state.xIsNext,
        });
      }  

    Наконец, мы изменим метод рендеринга компонента Game , заменив всегда рендеринг последнего хода на рендеринг текущего выбранного хода в соответствии с stepNumber :

      render () {
        const history = this.state.history;
        const current = история [this.state.stepNumber]; const победитель = calculateWinner (current.squares);
    
          

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

    Посмотреть полный код здесь

    Заключение

    Поздравляем! Вы создали игру в крестики-нолики, в которой:

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

    Отличная работа! Мы надеемся, что теперь вы чувствуете, что имеете хорошее представление о том, как работает React.

    Окончательный результат можно посмотреть здесь: Final Result .

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

    1. Отображение местоположения каждого хода в формате (столбец, строка) в списке истории ходов.
    2. Выделенный в данный момент элемент в списке перемещений выделен жирным шрифтом.
    3. Перепишите доску, чтобы использовать две петли для создания квадратов вместо их жесткого кодирования.
    4. Добавьте переключатель, который позволяет сортировать ходы в возрастающем или убывающем порядке.
    5. Когда кто-то выигрывает, выделите три квадрата, которые привели к победе.
    6. Если никто не выиграл, отобразить сообщение о ничьей.

    В этом руководстве мы затронули концепции React, включая элементы, компоненты, свойства и состояние. Для более подробного объяснения каждой из этих тем ознакомьтесь с остальной документацией.Чтобы узнать больше об определении компонентов, ознакомьтесь с справочником по API React.Component .

    Базовое руководство - Scala.js

    Это пошаговое руководство, в котором мы начинаем с настройки проекта Scala.js sbt и заканчиваем взаимодействием с пользователем и модульным тестированием. Код, созданный в этом руководстве, доступен с одной фиксацией на шаг в репозитории scalajs-tutorial на GitHub.

    Шаг 0: Предварительные требования

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

    Вам также необходимо загрузить и установить Node.js.

    Чтобы запустить полное учебное приложение, вам также потребуется установить jsdom, как описано ниже.

    Шаг 1: Настройка

    Сначала создайте новую папку, в которой будет находиться ваш проект sbt.

    SBT Настройка

    Чтобы настроить Scala.js в новом проекте sbt, нам нужно сделать две вещи:

    1. Добавьте Scala.js sbt к сборке
    2. Включить плагин в проекте

    Добавление подключаемого модуля Scala.js sbt является однострочным в project / plugins.sbt (все имена файлов, которые мы пишем в этом руководстве, относятся к корню проекта):

      addSbtPlugin ("org.scala-js"% "sbt-scalajs"% "1.7.0")  

    Мы также устанавливаем базовые настройки проекта и включаем этот плагин в файле сборки sbt ( build.sbt , в корневой каталог проекта):

      enablePlugins (ScalaJSPlugin)
    
    name: = "Scala.js Учебник "
    scalaVersion: = "2.13.1" // или любая другая версия Scala> = 2.11.12
    
    // Это приложение с основным методом
    scalaJSUseMainModuleInitializer: = true  

    Наконец, нам нужен проект / build.properties , чтобы указать версию sbt (последнюю версию можно найти здесь):

      sbt.version = 1.3.7  

    Это все, что нам нужно для настройки сборки.

    Если на этом этапе вы предпочитаете использовать IDE, вы можете импортировать сборку в VS Code with Metals (или любой другой редактор, поддерживаемый Metals) или IntelliJ IDEA (см. «Установка» здесь).Обратите внимание, что для компиляции и запуска вашего приложения вам все равно нужно будет использовать sbt из командной строки.

    Приложение HelloWorld

    Для начала мы добавляем очень простой TutorialApp в пакет tutorial.webapp . Создайте файл src / main / scala / tutorial / webapp / TutorialApp.scala :

      пакет tutorial.webapp
    
    object TutorialApp {
      def main (args: Array [String]): Unit = {
        println ("Привет, мир!")
      }
    }  

    Как и следовало ожидать, при запуске будет просто напечатано «HelloWorld».Чтобы запустить это, просто запустите sbt и вызовите задачу run :

      $ сбт
    sbt: Scala.js Tutorial> запустить
    [информация] Компиляция 1 исходного кода Scala в (...) / scalajs-tutorial / target / scala-2.13 / classes ...
    [информация] Быстрая оптимизация (...) / scalajs-tutorial / target / scala-2.13 / scala-js-tutorial-fastopt
    [info] Запуск tutorial.webapp.TutorialApp. Нажмите любую клавишу, чтобы прервать.
    Привет мир!
    [успех] (...)
      

    Поздравляем! Вы успешно скомпилировали и запустили свой первый Scala.js-приложение.
    Код фактически запускается интерпретатором JavaScript, а именно Node.

    Исходные карты в Node.js : чтобы разрешить трассировки стека на Node.js, вам необходимо установить пакет source-map-support .

      $ npm установить поддержку карты источника
      

    Шаг 2. Интеграция с HTML

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

    1. Создайте один файл JavaScript из нашего скомпилированного кода
    2. Создайте HTML-страницу, содержащую этот файл

    Создать JavaScript

    Чтобы сгенерировать JavaScript с помощью sbt, используйте задачу fastLinkJS :

     > fastLinkJS
    [info] Быстрая оптимизация (...) / scalajs-tutorial / target / scala-2.13 / scala-js-tutorial-fastopt
    [успех] (...)
      

    Это выполнит некоторые быстрые оптимизации и сгенерирует файл target / scala-2.13 / scala-js-tutorial-fastopt / main.js , содержащий код JavaScript.

    (Возможно, что [info] не появится, если вы только что запустили программу и не внесли в нее никаких изменений.)

    Создание страницы HTML

    Для загрузки и запуска созданного JavaScript вам понадобится файл HTML.Создайте файл scalajs-tutorial-fastopt.html (или любое другое имя, которое вы предпочитаете, например index-dev.html ) в корне проекта со следующим содержимым. Сразу после этого мы перейдем к деталям.

      
    
      
        
         Учебное пособие по Scala.js 
      
      
          
      

    Тег скрипта просто включает сгенерированный код (внимание, вам может потребоваться адаптировать версию Scala с 2.13 на 2.12 (или даже 2.10 или 2.11 ) здесь, если вы используете более старая версия Scala).

    Поскольку мы установили scalaJSUseMainModuleInitializer: = true в сборке, метод TutorialApp.main (args: Array [String]) автоматически вызывается в конце -fastopt.js (с пустым массивом в качестве аргумента).

    Если вы сейчас откроете только что созданную HTML-страницу в своем любимом браузере, вы не увидите… ничего. println в основном методе идет прямо в консоль JavaScript, которая по умолчанию не отображается в браузере. Однако, если вы откроете консоль JavaScript (например, в Chrome: щелкните правой кнопкой мыши -> Проверить элемент -> Консоль), вы увидите сообщение HelloWorld.

    Шаг 3. Использование DOM

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

    Добавление библиотеки DOM

    Для использования DOM лучше всего использовать статически типизированную библиотеку DOM Scala.js. Чтобы добавить его в свой проект sbt, добавьте следующую строку в свой build.sbt :

      libraryDependencies + = "org.scala-js" %%% "scalajs-dom"% "1.1.0"  

    Опытные пользователи sbt заметят %%% вместо обычного %% . Это означает, что мы используем библиотеку Scala.js, а не
    обычная библиотека Scala.См. Подробности в руководстве по зависимостям. Не забывай
    для перезагрузки файла сборки, если sbt все еще работает:

      sbt: Scala.js Tutorial> перезагрузить
    [info] Загрузка настроек глобальных плагинов проекта из plugins.sbt ...
    [информация] Загрузка глобальных плагинов из (...) /. sbt / 1.0 / plugins
    [info] Загрузка настроек проекта scalajs-tutorial-build из plugins.sbt ...
    [info] Загрузка определения проекта из (...) / scalajs-tutorial / project
    [info] Загрузка настроек проекта scala-js-tutorial из build.сбт ...
    [info] Установить текущий проект на Scala.js Tutorial (в файле сборки: (...) / scalajs-tutorial /)
      

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

    Использование библиотеки DOM

    Теперь, когда мы добавили библиотеку DOM, давайте адаптируем наш пример HelloWorld, чтобы добавить тег

    в тело страницы, а не печатать на консоли.

    Первым делом импортируем пару вещей:

      импорт орг.scalajs.dom
    import org.scalajs.dom.document  

    dom является корнем DOM JavaScript и соответствует глобальной области видимости JavaScript (он же объект window ).
    Мы дополнительно импортируем документ (который соответствует документу в JavaScript) для удобства.

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

    с заданным текстом к заданному узлу:

      def appendPar (targetNode: dom.Узел, текст: Строка): Unit = {
      val parNode = document.createElement ("p")
      parNode.textContent = текст
      targetNode.appendChild (parNode)
    }  

    Замените вызов println на вызов appendPar в основном методе :

      def main (args: Array [String]): Unit = {
      appendPar (document.body, «Привет, мир»)
    }  

    Перестроить JavaScript

    Чтобы перестроить JavaScript, просто снова вызовите fastLinkJS :

      сбт: Scala.js Учебник> fastLinkJS
    [информация] Компиляция 1 исходного кода Scala в (...) / scalajs-tutorial / target / scala-2.13 / classes ...
    [информация] Быстрая оптимизация (...) / scalajs-tutorial / target / scala-2.13 / scala-js-tutorial-fastopt
    [успех] (...)
      

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

    Теперь вы можете перезагрузить HTML-код в своем браузере, и вы должны увидеть красивое сообщение «Hello World».

    Повторно набирать fastLinkJS каждый раз при изменении исходного файла - это громоздко.К счастью, sbt может просматривать ваши файлы и при необходимости перекомпилировать:

      sbt: Руководство по Scala.js> ~ fastLinkJS
    [успех] (...)
    [информация] 1. Мониторинг исходных файлов для scalajs-tutorial / fastLinkJS ...
    [info] Нажмите  для прерывания или "?" для дополнительных опций.
      

    С этого момента в руководстве мы предполагаем, что у вас есть sbt с запущенной этой командой, поэтому нам не нужно каждый раз возиться с перестройкой.

    Шаг 4. Реагирование на ввод данных пользователем

    На этом шаге показано, как добавить кнопку и реагировать на события на ней, по-прежнему просто используя DOM.Мы хотим добавить кнопку, которая добавляет еще один тег

    в тело при нажатии.

    Начнем с добавления метода в TutorialApp , который будет вызываться при нажатии кнопки:

      @JSExportTopLevel ("addClickedMessage")
    def addClickedMessage (): Unit = {
      appendPar (document.body, «Вы нажали кнопку!»)
    }  

    Обратите внимание на аннотацию @JSExportTopLevel .
    Он сообщает компилятору Scala.js сделать этот метод вызываемым из JavaScript как функцию верхнего уровня.Мы также должны импортировать эту аннотацию:

      import scala.scalajs.js.annotation.JSExportTopLevel  

    Чтобы узнать больше о том, как вызывать методы Scala.js из JavaScript, ознакомьтесь с API экспорта Scala.js в
    Руководство по JavaScript.

    Поскольку теперь у нас есть метод, вызываемый из JavaScript, все, что нам нужно сделать, это добавить кнопку в наш HTML и установить ее
    onclick атрибут (не забудьте добавить кнопку перед тегами

    Сжатие

    Если вы обслуживаете приложение Scala.js с веб-сервера, вам следует дополнительно
    Заархивируйте полученные файлы .js . Этот шаг может уменьшить размер вашего приложения.
    до 20% от исходного размера.

    Настройка зависит от вашего стека серверов. Распространенный вариант - использовать
    сбт-веб,
    sbt-web-scalajs и
    sbt-gzip
    если у вас есть Play или Akka-http сервер.

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

    Введение в Node.js

    Node.js - это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом. Это популярный инструмент практически для любого проекта!

    Узел.js запускает движок JavaScript V8, ядро ​​Google Chrome, вне браузера. Это позволяет Node.js быть очень производительным.

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

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

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

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

    В Node.js новые стандарты ECMAScript могут использоваться без проблем, поскольку вам не нужно ждать, пока все пользователи обновят свои браузеры - вы сами решаете, какую версию ECMAScript использовать, изменяя Node.js версия, а также вы можете включить определенные экспериментальные функции, запустив Node.js с флагами.

    Огромное количество библиотек

    npm с его простой структурой помогли экосистеме Node.js разрастаться, и теперь в реестре npm размещено более 1 000 000 пакетов с открытым исходным кодом, которые вы можете свободно использовать.

    Пример приложения Node.js

    Самым распространенным примером Hello World of Node.js является веб-сервер:

    Этот код сначала включает модуль Node.js http .

    Node.js имеет фантастическую стандартную библиотеку, включая первоклассную поддержку сетей.

    Метод createServer () из http создает новый HTTP-сервер и возвращает его.

    Сервер настроен на прослушивание указанного порта и имени хоста. Когда сервер готов, вызывается функция обратного вызова, в этом случае информирующая нас о том, что сервер запущен.

    При получении нового запроса вызывается событие request , предоставляющее два объекта: запрос (объект http.IncomingMessage ) и ответ (объект http.ServerResponse ).

    Эти 2 объекта необходимы для обработки HTTP-вызова.

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

    Второй используется для возврата данных вызывающему абоненту.

    В этом случае с:

     

    JScopy

    res.statusCode = 200

    мы устанавливаем свойство statusCode на 200, чтобы указать успешный ответ.

    Мы устанавливаем заголовок Content-Type:

     

    JScopy

    res.setHeader ('Content-Type', 'text / plain')

    и закрываем ответ, добавляя контент в качестве аргумента в end () :

     

    JScopy

    res.end ('Hello World \ n')

    Node.js - это низкоуровневая платформа. Чтобы упростить и увлечь разработчиков, сообщество построило на Node.js тысячи библиотек.

    Многие из них со временем стали популярными. Вот неполный список тех, которые стоит изучить:

    • AdonisJS : полнофункциональная среда на основе TypeScript, ориентированная на эргономику, стабильность и надежность разработчика. Adonis - один из самых быстрых веб-фреймворков Node.js.
    • Яйцо.js : фреймворк для создания более совершенных корпоративных фреймворков и приложений с помощью Node.js и Koa.
    • Express : предоставляет один из самых простых, но эффективных способов создания веб-сервера. Его минималистский подход, безоговорочный, сосредоточенный на основных функциях сервера, является ключом к его успеху.
    • Fastify : Веб-фреймворк, ориентированный на обеспечение наилучшего взаимодействия с разработчиками с наименьшими накладными расходами и мощной архитектурой плагинов. Fastify - один из самых быстрых приложений Node.js веб-фреймворки.
    • FeatherJS : Feathers - это легкая веб-платформа для создания приложений реального времени и REST API с использованием JavaScript или TypeScript. Создавайте прототипы за считанные минуты, а готовые к производству приложения - за считанные дни.
    • Gatsby : Генератор статических сайтов на основе React и GraphQL с очень богатой экосистемой плагинов и стартеров.
    • hapi : богатая среда для создания приложений и сервисов, которая позволяет разработчикам сосредоточиться на написании повторно используемой логики приложения вместо того, чтобы тратить время на создание инфраструктуры.
    • koa : Он создан той же командой, что и Express, стремится быть еще проще и меньше, опираясь на многолетние знания. Новый проект родился из-за необходимости вносить несовместимые изменения без нарушения существующего сообщества.
    • Loopback.io : упрощает создание современных приложений, требующих сложной интеграции.
    • Meteor : Невероятно мощный фреймворк с полным стеком, предлагающий изоморфный подход к созданию приложений с помощью JavaScript, совместное использование кода на клиенте и сервере.Когда-то готовый инструмент, который предоставлял все, теперь интегрируется с интерфейсными библиотеками React, Vue и Angular. Также может использоваться для создания мобильных приложений.
    • Micro : предоставляет очень легкий сервер для создания асинхронных микросервисов HTTP.
    • NestJS : прогрессивная платформа Node.js на основе TypeScript для создания эффективных, надежных и масштабируемых серверных приложений корпоративного уровня.
    • Next.js : фреймворк React, который дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое.
    • Nx : набор инструментов для полнофункциональной монорепозиторной разработки с использованием NestJS, Express, React, Angular и других! Nx помогает масштабировать вашу разработку от одной команды, создающей одно приложение, до множества команд, работающих над несколькими приложениями!
    • Sapper : Sapper - это фреймворк для создания веб-приложений любого размера с прекрасным опытом разработки и гибкой маршрутизацией на основе файловой системы. Предлагает SSR и многое другое!
    • Socket.io : механизм связи в реальном времени для создания сетевых приложений.
    • Strapi : Strapi - это гибкая система управления контентом без головы с открытым исходным кодом, которая дает разработчикам свободу выбора своих любимых инструментов и фреймворков, а также позволяет редакторам легко управлять своим контентом и распространять его. Сделав панель администратора и API расширяемыми с помощью системы плагинов, Strapi позволяет крупнейшим мировым компаниям ускорить доставку контента, создавая при этом красивый цифровой опыт.

    Введение / Основы • Учебник Svelte

    Вступление /

    Основы

    а.Основыb. Добавление данных. Динамические атрибутыd. Stylinge. Вложенные компоненты f. HTML-тегиg. Создание appa. Заданияb. Декларацияс. Заявленияd. Обновление массивов и объектовa. Объявление propsb. Значения по умолчанию c. Выкладываю пропсы. Если блокирует b. Остальные блоки Иначе - если блокирует d. Каждый блок. Ключи к каждому блоку f. Жду блоков. События DOMb. Встроенный обработчик. Модификаторы события d. Компонент eventse. Пересылка событийf. Пересылка событий DOM. Текстовый ввод b. Числовой ввод Флажок inputd. Групповой ввод. Textarea inputf.Выберите привязкиg. Выберите multih. Довольные биндинги. Каждый блок bindingsj. Медиа-элементы. Размерыl. Thism. Привязки компонентов Привязка к экземплярам компонентовa. onMountb. onDestroyc. beforeUpdate и afterUpdated. тика. Записываемые магазиныb. Автоматическая подписка Читаемые магазиныd. Производные storese. Индивидуальные магазиныf. Магазин bindingsa. Tweenedb. Springa. Директива перехода b. Добавление параметров c. Внутри и снаружи. Пользовательский переход CSS. Пользовательские переходы JSf. Переходные событияg. Местный переход.Отложенные переходыi. Ключевые блокиa. Директива animate. Директива использования b. Добавление параметровa. Директива класса b. Сокращенная директива класса. Slotsb. Резервный слот Именованные слотыd. Проверка наличия слота. Игровой реквизит. setContext и getContexta. б. c. d. bindingse. f. g. h. а. Совместное использование кодаb. Exportsa. Тег @debug.Поздравляю!

    Введение

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

    Вы также можете ознакомиться с документацией по API и примерами или - если вам не терпится начать локальный взлом своей машины - с 60-секундным быстрым запуском.

    Что такое Svelte?

    Svelte - это инструмент для создания быстрых веб-приложений.

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

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

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

    Как пользоваться этим руководством

    Для понимания Svelte вам необходимо иметь базовые знания HTML, CSS и JavaScript.

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

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

    Понимание компонентов

    В Svelte приложение состоит из одного или нескольких компонентов . Компонент - это многократно используемый автономный блок кода, который инкапсулирует связанные друг с другом HTML, CSS и JavaScript, записанный в файл .svelte . Пример "hello world" в редакторе кода представляет собой простой компонент.

    Учебники

    - Leaflet - библиотека JavaScript для интерактивных карт

    Учебные пособия

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


    Брошюра Краткое руководство

    Простое пошаговое руководство, которое быстро поможет вам начать работу с основами Leaflet, включая настройку карты Leaflet (с плитками Mapbox) на вашей странице, работу с маркерами, полилиниями и всплывающими окнами, а также работу с событиями.


    Брошюра по мобильному телефону

    В этом руководстве вы узнаете, как создать полноэкранную карту, настроенную для мобильных устройств, таких как iPhone, iPad или телефоны Android, и как легко определять и использовать текущее местоположение пользователя.


    Маркеры с пользовательскими значками

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


    Использование GeoJSON с Leaflet

    В этом руководстве вы узнаете, как создавать векторы карты, созданные из объектов GeoJSON, и взаимодействовать с ними.


    Интерактивная хороплетная карта

    Пример создания красочной интерактивной хороплетной карты плотности населения США с помощью GeoJSON и некоторых настраиваемых элементов управления. Новостным сайтам это понравится.


    Группы слоев и управление слоями

    Учебное пособие по управлению группами слоев и использованию элемента управления переключением слоев.


    Уровни масштабирования

    Подробнее о том, что такое уровни масштабирования.


    Негеографические карты

    Начальный курс по L.CRS.Simple , как создавать карты без понятия «широта» или «долгота».


    WMS и TMS

    Как интегрироваться с сервисами WMS и TMS из профессионального программного обеспечения ГИС.


    Работа с панелями карты

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


    Показ видео файлов

    Leaflet может помочь вам отобразить видео где-нибудь на карте.


    В следующих руководствах рассказывается, как создавать плагины для Leaflet, и они предназначены только для разработчиков, имеющих опыт работы с JavaScript:


    Расширяющийся буклет: теория классов

    Обзор классов, наследования классов и соглашений Leaflet.


    Расширяющийся буклет: слои

    Как расширять слои или создавать новые, используя для этого определенные точки входа.


    Расширяющийся буклет: Обработчики и элементы управления

    Как расширить или создать неслои.

    .

    Category Js

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *