Реклама

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

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

Что такое JavaScript?

JavaScript - это язык сценариев для Интернета. Это интерпретируемый язык, что означает, что ему не нужен компилятор для перевода своего кода, такого как C или C ++. Код JavaScript запускается прямо в веб-браузере.

Последняя версия языка - ECMAScript 2018, выпущенная в июне 2018 года.

JavaScript работает с HTML и CSS для создания веб-приложений или веб-страниц. JavaScript поддерживается большинством современных веб-браузеров, таких как Google Chrome, Firefox, Safari, Microsoft Edge, Opera и т. Д. Большинство мобильных браузеров для Android и iPhone теперь также поддерживают JavaScript.

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

instagram viewer

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

Строительные блоки веб-приложений

Существует три компонента, которые создают веб-сайты и приложения: язык разметки гипертекста (HTML), каскадные таблицы стилей (CSS) и JavaScript. У каждого есть роль в создании веб-приложения.

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

Все три части работают в гармонии друг с другом для создания полнофункциональных приложений. Было бы неплохо узнать больше о HTML и CSS Изучите HTML и CSS с помощью этих пошаговых руководствИнтересуетесь HTML, CSS и JavaScript? Если вы думаете, что умеете учиться создавать веб-сайты с нуля - вот несколько отличных пошаговых руководств, которые стоит попробовать. Подробнее если вам не совсем удобно с ними.

Как работает JavaScript?

Перед написанием JavaScript важно знать, как он работает под капотом. Необходимо изучить две важные вещи: как работает веб-браузер и объектная модель документа (DOM).

Как работает JavaScript

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

Затем браузер будет захватывать все, что связано с HTML, например изображения и CSS-файлы. Информация CSS поступает из анализатора CSS.

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

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

Порядок здесь важен. Если JavaScript не дожидается завершения HTML и CSS, он не сможет изменить элементы DOM.

Что я могу сделать с JavaScript?

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

  • Объявление переменных Как объявить переменные в JavaScriptЧтобы начать работать с JavaScript, вам нужно понимать переменные. Вот три способа объявить переменные в JavaScript. Подробнее .
  • Хранение и получение значений.
  • Определение и вызов функций, в том числе функции стрелок.
  • Определение объектов и классов JavaScript.
  • Загрузка и использование внешних модулей.
  • Написание обработчиков событий, которые реагируют на события кликов.
  • Написание кода сервера.
  • И многое другое.

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

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

Давайте рассмотрим некоторые основы JavaScript с примерами кода.

Объявление переменных

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

пусть num = 5; let myString = "Hello"; переменная процентная ставка = 0,25;

операторы

прибавление

12 + 5. >> 17.

Вычитание

20 - 8. >> 12.

умножение

5 * 2. >> 10.

разделение

50 / 2. >> 25.

модуль

45 % 4. >> 1.

Массивы

let myArray = [1,2,4,5]; let stringArray = ["hello", "world"];

функции

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

function addNumbers (num1, num2) { вернуть num1 + num2; } >> addNumbers (10,5); >> 15.

Loops

JavaScript может выполнять циклы для итерации, такие циклы, как для петель и пока петли.

для (пусть я = 0; я <3; i ++) {console.log ("echo!"); } >> эхо! >> эхо! >> эхо! 
пусть я = 0; while (i <3) {console.log ("echo!"); я ++; } >> эхо! >> эхо! >> эхо!

Комментарии

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

На веб-странице

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

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

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

Это более сложные темы, сейчас вы изучаете основы.

Образцы фрагментов кода JavaScript

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

  • Следующее выбирает все жирный элементы в документе и устанавливает цвет первого на красный. 
    var elems = document.getElementsByTagName ('b'); elems [0] .style.color = 'red';
  • Хотите изменить изображение в IMG тег? Следующее связывает обработчик событий для щелчок событие кнопки.
  • Обновить текстовое содержание абзаца (п) элемент? Установить innerHTML свойство элемента, как показано: 
    Привет, мир

Эти примеры кода дают представление о том, что вы можете сделать, используя JavaScript на своей веб-странице. Есть множество учебников, которые могут научить вас, как кодировать Халява: научитесь кодировать с 27 часами видеоуроковUltimate Coding Bundle, который включает в себя пять видеокурсов и 27 часов обучения премиум-класса, БЕСПЛАТНЫЙ прямо сейчас. Подробнее чтобы начать. Вы можете попробовать это на любой веб-странице, даже на этой! Откройте консоль и попробуйте немного кода JavaScript.

Теперь вы знаете, что делает JavaScript

Надеемся, что это введение дало некоторое представление о JavaScript и вдохновило вас на веб-программирование. Вы можете повторить все это в наш удобный чит-лист JavaScript The Ultimate JavaScript ШпаргалкаПолучите быстрое обновление на элементах JavaScript с этим шпаргалкой. Подробнее . Существует гораздо больше, чтобы узнать о JavaScript. Если вы чувствуете себя более комфортно, почему бы не попробовать научиться использовать объектную модель документа? Вы также можете быть заинтересованы в изучении TypeScript Что такое TypeScript и почему разработчики должны его попробовать?Находить JavaScript трудным для адаптации после изучения другого языка программирования? Вот как TypeScript может помочь вам переключиться. Подробнее .

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