Неправда, что на языке программирования можно создать программу в среде Visual Studio

Обновлено: 21.11.2024

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

Сделано с любовью Томом Даллингом
© 2020. Все права защищены.

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

  • "Я изучил Python с помощью онлайн-курса, но не знаю, как использовать его для создания программ".
  • "Я знаю теорию, но не могу реализовать ее в коде".
  • "Я знаю о циклах while, но не знаю, как и когда их использовать".
  • "Я знаю о циклах, массивах и переменных, но не знаю, как их комбинировать".

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

Причина: искусственная среда программирования

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

Существует веская причина, по которой онлайн-курсы предоставляют такую ​​искусственную среду: настройка реальной среды программирования часто сложна и утомительна для начинающих.

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

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

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

Одним из последствий чрезмерного руководства является то, что учащиеся изучают синтаксис без изучения концепций программирования. Синтаксис — это просто текст, который вы вводите для определенного языка программирования, например if и while. Синтаксис для каждого языка разный. То, что вы действительно хотите изучить, — это такие понятия, как ветвление и итерация. Концепции позволяют понять, что на самом деле будет делать код, и они могут быть написаны на множестве разных языков. Когда кто-то говорит, что знает о циклах while, но не знает, когда их использовать, для меня это означает, что они изучили синтаксис, но на самом деле не понимают концепцию итерации.

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

Настоящий разговор

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

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

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

Это отстой, но вы не одиноки. Каждый должен пройти этот этап, если хочет стать программистом.

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

Совет: создайте реальную среду программирования

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

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

Во-вторых, вам нужно решить, как запустить файл, содержащий код.

Если вы используете интегрированную среду разработки в качестве текстового редактора, например Visual Studio, Xcode или Eclipse, эта функция будет встроена в интегрированную среду разработки. Узнайте, как создать новый проект и какие кнопки нажимать для запуска кода.

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

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

Совет: создавайте программы с нуля

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

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

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

Совет: начните с малого

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

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

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

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

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

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

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

Совет. Пишите много кода

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

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

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

Совет: обратитесь за помощью

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

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

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

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

Совет: правильно обращайтесь за помощью

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

Вставьте точное сообщение об ошибке. Это самая важная часть информации. Люди часто не пытаются ответить на вопрос, пока не увидят точное сообщение об ошибке.

Если сообщения об ошибке нет, объясните, что вы ожидали и что произошло на самом деле. Некоторые что-то вроде «Я ожидаю, что он выведет 5 , но на самом деле выводит 7 ». Часто проблема не в вашем коде, а в ваших ожиданиях. Если вы не объясните, что вы ожидали, вы получите ответы типа «код выглядит нормально» и «в чем проблема?»

Правильно отформатируйте код. Не вставляйте код как обычный текст. Узнайте, как красиво отформатировать код, чтобы его было легко читать. Это должно выглядеть так:

def foobar
ставит 1 + 2 / 3
конец

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

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

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

Заключение

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

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

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

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

Самое главное, получайте удовольствие и продолжайте в том же духе!

Как все это связано с книгой

Книга Programming for Beginners разработана с учетом всех пунктов этой статьи.

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

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

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

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

Вместо этого писать код на другом языке?

Загрузите Visual Studio для Windows и выберите необходимые инструменты

Производительный, многоцелевой, типобезопасный, объектно-ориентированный, с открытым исходным кодом

Простое, эффективное, богатое данными функциональное программирование

Будьте максимально продуктивны

Облачные приложения в Azure

Быстро развертывайте критически важные приложения. Начните бесплатно. Масштабируйте по мере роста

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

Настольные приложения Windows

Windows Forms и WPF

Кроссплатформенный мобильный

Visual Studio и Xamarin

Универсальная платформа Windows

Одна платформа Windows, много устройств

В Visual Studio Code мы поддерживаем почти все основные языки программирования. Некоторые поставляются в комплекте, например JavaScript, TypeScript, CSS и HTML, но более богатые языковые расширения можно найти в VS Code Marketplace.

Вот восемь самых популярных языковых расширений:

Перейдите в Marketplace или воспользуйтесь интегрированным представлением расширений и найдите нужный язык программирования, чтобы найти фрагменты кода, автодополнение кода/поставщики IntelliSense, линтеры, отладчики и многое другое.

Примечание. Если вы хотите изменить язык отображения VS Code (например, на китайский), см. раздел "Язык отображения".

Документация по конкретному языку

Нажмите на любой связанный элемент, чтобы получить обзор того, как использовать VS Code в контексте этого языка. Большинство языковых расширений также содержат сводку своих основных функций в файле README.

Языковые возможности в VS Code

Объем поддержки зависит от языков и их расширений:

  • Подсветка синтаксиса и сопоставление квадратных скобок
  • Умное завершение (IntelliSense)
  • Линтинг и исправления
  • Навигация по коду (перейти к определению, найти все ссылки)
  • Отладка
  • Рефакторинг

Изменение языка для выбранного файла

В VS Code по умолчанию языковая поддержка файла определяется его расширением имени файла. Однако иногда вам может понадобиться изменить языковые режимы, для этого щелкните индикатор языка, расположенный справа от строки состояния. Откроется раскрывающийся список «Выбрать языковой режим», в котором вы можете выбрать другой язык для текущего файла.

Совет. Вы можете получить такое же раскрывающееся меню, выполнив команду «Изменить языковой режим» ( ⌘K M (Windows, Linux Ctrl+K M )).

Идентификатор языка

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

Идентификатор языка часто (но не всегда) представляет собой название языка программирования в нижнем регистре. Обратите внимание, что регистр имеет значение для точного совпадения идентификаторов ('Markdown'!= 'markdown'). Неизвестные языковые файлы имеют открытый текст идентификатора языка .

Список установленных в данный момент языков и их идентификаторов можно увидеть в раскрывающемся списке Режим изменения языка ( ⌘K M (Windows, Linux Ctrl+K M )).

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

Добавление расширения файла к языку

Вы можете добавить новые расширения файлов к существующему языку с помощью параметра files.associations.

Например, приведенный ниже параметр добавляет расширение файла .myphp к идентификатору языка php:

IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space) ) покажет вам доступные языковые идентификаторы.

Дальнейшие шаги

Теперь вы знаете, что VS Code поддерживает нужные вам языки. Читайте дальше.

    - Peek and Go to Definition и многое другое - вот где VS Code действительно сияет

Частые вопросы

Могу ли я внести свой собственный языковой сервис?

Да, можно! Посмотрите пример языкового сервера в документации по VS Code Extension API.

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

Да, вы также можете добавить поддержку своего любимого языка с помощью раскраски TextMate. См. Руководство по выделению синтаксиса в разделе Extension API, чтобы узнать, как интегрировать файлы синтаксиса TextMate .tmLanguage в VS Code.

Можно ли сопоставить дополнительные расширения файлов с языком?

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

Вот пример, который свяжет дополнительные расширения файлов с языком PHP:

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

Обратите внимание, что шаблон представляет собой шаблон глобуса, который будет соответствовать полному пути к файлу, если он содержит /, и будет соответствовать имени файла в противном случае.

Добро пожаловать на курс MDN по JavaScript для начинающих! В этой статье мы рассмотрим JavaScript с высокого уровня, отвечая на такие вопросы, как «Что это такое?» и "Что вы можете с этим сделать?", а также убедиться, что вы согласны с назначением JavaScript.

< th scope="row">Цель:

Общее определение

JavaScript – это язык сценариев или программирования, который позволяет вам реализовывать сложные функции на веб-страницах. Каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию, которую вы можете посмотреть, – отображает своевременные обновления контента, интерактивные карты, анимированная 2D/3D-графика, прокручиваемые видео-музыкальные автоматы и т. д. — можете поспорить, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели более подробно в других частях Области обучения.

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

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

Затем мы можем добавить немного CSS, чтобы все выглядело красиво:

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

Попробуйте нажать на эту последнюю версию текстовой метки, чтобы увидеть, что произойдет (обратите внимание, что вы можете найти эту демонстрацию на GitHub — посмотрите исходный код или запустите ее вживую)!

JavaScript может гораздо больше — давайте рассмотрим, что подробнее.

Так что же он на самом деле может сделать?

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

  • Сохраняйте полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя, а затем сохранить это имя в переменной с именем name .
  • Операции с фрагментами текста (известными в программировании как "строки"). В приведенном выше примере мы берем строку «Игрок 1:» и присоединяем ее к переменной имени, чтобы создать полную текстовую метку, например. «Игрок 1: Крис».
  • Выполнение кода в ответ на определенные события, происходящие на веб-странице. Мы использовали событие клика в нашем примере выше, чтобы определить, когда щелкнули по метке, а затем запустить код, который обновляет текстовую метку.
  • И многое другое!

Однако еще более интересна функциональность, созданная на основе клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют дополнительные возможности для использования в коде JavaScript.

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

Обычно они делятся на две категории.

Браузерные API встроены в ваш веб-браузер и могут предоставлять данные из окружающей компьютерной среды или выполнять полезные сложные действия. Например:

  • API DOM (Document Object Model) позволяет управлять HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к странице и т. д. Каждый раз, когда вы видите всплывающее окно на странице или отображается новый контент (как мы видели выше в нашей простой демонстрации), например, это DOM в действии.
  • API геолокации извлекает географическую информацию. Именно так Google Карты могут определить ваше местоположение и нанести его на карту.
  • API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. Люди делают удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples. такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере (попробуйте нашу простую демонстрацию Snapshot, чтобы получить представление ).

Примечание. Многие из приведенных выше демонстраций не будут работать в старых браузерах. При экспериментировании рекомендуется использовать для запуска кода современный браузер, такой как Firefox, Chrome, Edge или Opera. более подробно о кросс-браузерном тестировании, когда вы приблизитесь к созданию производственного кода (т. е. реального кода, который будут использовать реальные клиенты).

Сторонние API по умолчанию не встроены в браузер, и вам, как правило, приходится брать их код и информацию из Интернета. Например:

  • API Twitter позволяет вам делать такие вещи, как отображение ваших последних твитов на вашем веб-сайте.
  • API Карт Google и API OpenStreetMap позволяют встраивать пользовательские карты на веб-сайт и выполнять другие подобные функции.

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

Есть и многое другое! Однако пока не переусердствуйте. Вы не сможете создать следующий Facebook, Google Maps или Instagram после изучения JavaScript в течение 24 часов — сначала нужно изучить много основ. И именно поэтому вы здесь — давайте двигаться дальше!

Что делает JavaScript на вашей странице?

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

Давайте кратко повторим историю того, что происходит, когда вы загружаете веб-страницу в браузере (впервые об этом говорилось в нашей статье «Как работает CSS»). Когда вы загружаете веб-страницу в свой браузер, вы запускаете свой код (HTML, CSS и JavaScript) внутри среды выполнения (вкладка браузера). Это похоже на фабрику, которая получает сырье (код) и выпускает продукт (веб-страницу).

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

Безопасность браузера

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

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

Порядок выполнения JavaScript

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

Здесь мы выбираем текстовый абзац (строка 1), а затем присоединяем к нему прослушиватель событий (строка 3), чтобы при нажатии на абзац запускался блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы повторно используемых блоков кода называются «функциями») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он больше не будет работать — вместо этого вы получите сообщение об ошибке в консоли разработчика браузера — TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему прослушиватель событий.

Примечание. Это очень распространенная ошибка — вам нужно убедиться, что объекты, на которые есть ссылки в вашем коде, существуют, прежде чем вы попытаетесь что-то с ними сделать.

Интерпретируемый и скомпилированный код

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

С другой стороны, скомпилированные языки преобразуются (компилируются) в другую форму до того, как они будут запущены компьютером. Например, C/C++ компилируются в машинный код, который затем запускается компьютером. Программа выполняется из двоичного формата, который был сгенерирован из исходного кода исходной программы.

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

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

Код на стороне сервера и код на стороне клиента

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

Динамический и статический код

Слово "динамический" используется для описания как клиентского JavaScript, так и серверного языка. Оно означает возможность обновлять отображение веб-страницы/приложения, чтобы отображать разные элементы в различных обстоятельствах, генерируя новый контент по мере необходимости. . Серверный код динамически генерирует новый контент на сервере, например. извлечение данных из базы данных, тогда как клиентский JavaScript динамически генерирует новый контент внутри браузера на клиенте, например. создание новой таблицы HTML, заполнение ее данными, запрошенными с сервера, а затем отображение таблицы на веб-странице, показанной пользователю. Значение немного отличается в двух контекстах, но связано, и оба подхода (на стороне сервера и на стороне клиента) обычно работают вместе.

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

Читайте также:

Требования: Базовая компьютерная грамотность, базовое понимание HTML и CSS.
Познакомиться с тем, что такое JavaScript, что он может делать и как он вписывается в веб-сайт.