Программирование выражение это

автор: Эллисон Пэрриш В этом уроке я продемонстрирую некоторые основы языка программирования JavaScript с помощью консоли JavaScript веб-браузера.

Секретный язык веб — браузеров

Веб-браузер-это компьютерная программа. Которая позволяет просматривать веб-страницы и переходить по гиперссылкам с одной страницы на другую. Вы можете быть знакомы с несколькими крупными именами в сцене веб-браузера: Safari, Google Chrome. Firefox, Edge. Веб-браузер. Несомненно. Является одним из самых важных изобретений в новейшей истории; они установлены повсеместно на всех видах компьютеров. От смартфонов до игровых консолей и ноутбуков. Скорее всего. Вы используете веб-браузер прямо сейчас. Чтобы просмотреть этот учебник прямо сейчас.

Веб-браузеры предназначены для отображения контента. Отформатированного на языке HTML (HyperText Markup Language). Почти все веб — браузеры также понимают язык программирования под названием JavaScript. Изобретенный в 1990-х годах как один из нескольких конкурирующих способов встраивания простой логики проверки данных и интерактивности в веб-страницы. JavaScript сегодня широко используется программистами всех мастей не только в веб-браузерах. Но и в веб-серверах. Настольных приложениях,

видеоиграх и даже микроконтроллерах.

Однако сейчас мы сосредоточимся на JavaScript в браузере. Обычно вы пишете JavaScript как часть веб-сайта. Как отдельный файл. Который вы загружаете на веб-сервер. Но практически все браузеры позволяют ввести код JavaScript прямо в браузере. Используя то. Что называется “консоли”. Большинство программистов использовать консоль в качестве инструмента. Чтобы помочь им “отладка” (т. е. найти и исправить проблемы в) свой код. Но вы также можете использовать консоль как способ. Чтобы просто играть вокруг с JavaScript и почувствовать. Как это работает.

Именно для этого мы и собираемся его использовать.

Вызов консоли

Для начала откройте веб-браузер. Такой как Safari. Firefox или Chrome на настольном компьютере (это, вероятно. Не будет работать на мобильном устройстве или планшете). Чтобы сделать все проще. Мы хотим ввести следующий URL-адрес в строке расположения:

about:blank 

Это должно показывать пустую вкладку браузера (т. Е. Отсутствие видимого содержимого). Если это не работает. Попробуйте следующий URL-адрес. Который должен иметь тот же эффект:

data:text/html, 

(Конечная запятая важна!) После этого вам нужно будет открыть веб-консоль.

Как это сделать отличается от одного браузера к другому. А также может быть разным в зависимости от вашей операционной системы! Я использую Firefox на macOS и открываю веб-консоль. Перейдя в Tools > Web Developer > Web Console(не “Консоль браузера”, которая. К сожалению. Другое дело). В Google Chrome перейдите в View > Developer > JavaScript Console; в Safari, Develop > Show JavaScript Console(вам нужно будет включить это меню. Включив “Показать меню разработки в строке меню” в настройках Safari). Вы должны увидеть что-то вроде этого:

Веб-браузер Firefox с открытой консолью разработчика

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

Вы видите пустую веб-страницу с открытой консолью JavaScript. Консоль находится в нижней части окна; сама веб-страница находится выше. Вы будете вводить код JavaScript в нижнюю часть. Которая также покажет результаты оценки этого кода. Если ваш код вносит изменения в веб-страницу (которая сейчас пуста. Но вы можете изменить это с помощью кода!). Они будут отображаться на панели выше.

Чтение, оценка, печать, цикл

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

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

Представьте себе научно-фантастический фильм. Где персонаж спрашивает компьютер вслух: “Каков квадратный корень из девяти миллиардов?” или “Сколько людей старше 50 лет живет в Париже. Франция?” Это примеры выражений. Процесс, который компьютер использует для преобразования этих выражений в ответ. Называется оценкой.

Когда процесс оценки завершен. Вы остаетесь с единственной “ценностью”. Подумайте об этом схематически так:

Выражение → Оценка → Значение

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

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

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

Арифметические выражения

Начнем с простых арифметических выражений. То, как вы пишете арифметические выражения в JavaScript. Очень похоже на то. Как вы пишете арифметические выражения, скажем. В арифметике начальной школы или алгебре. В приведенном ниже примере 3 + 5это выражение. В интерактивном интерпретаторе вы можете указать JavaScript вычислить выражение и отобразить его значение. Просто введя выражение в раздел ввода консоли.

≫ 3 + 5 ⬅︎ 8 

(В этом документе далее следует введенное вами выражение и ответ консоли . То есть результирующее значение ⬅︎ .)

По историческим причинам то. Как выглядят некоторые операторы в JavaScript (и многих других языках программирования). Немного отличается от их общей нотации в арифметике и алгебре:

Операция Оператор JavaScript
дополнение +
вычитание -
умножение *
деление /

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

Мы не будем сейчас вдаваться во все подробности. Но одна вещь. Которую вы должны знать сразу. Заключается в том. Что арифметические операции JavaScript вычисляются с использованием типичного порядка операций. Который вы можете переопределить с помощью скобок:

≫ 4 + 5 * 6 ⬅︎ 34 ≫ (4 + 5) * 6 ⬅︎ 54 

Вы можете писать арифметические выражения с пробелами или без них между числами и операторами (но обычно считается лучшим стилем включать пробелы):

≫ 10+20+30 ⬅︎ 60 

Выражения в JavaScript также могут быть очень простыми.

На самом деле число само по себе является собственным выражением. Которое JavaScript вычисляет само это число:

≫ 19 ⬅︎ 19 

Если вы напишете выражение. Которое JavaScript не понимает. То вы получите ошибку. Вот как это выглядит:

≫ 20 19 + SyntaxError: missing ; before statement 

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

≫ 17 / 2 ⬅︎ 8.5 

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

JavaScript на самом деле представляет оба вида чисел одинаково под капотом):

≫ 8 * 2.1 ⬅︎ 16.8 

Выражения неравенства

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

==Оператор сравнивает выражение на его левой стороне с выражением на его правой стороне.

Он оцениваетtrue, равны ли значения, и falseесли они не равны.

≫ 3 * 5 == 9 + 6 ⬅︎ true ≫ 20 == 7 * 3 ⬅︎ false 

Оператор сравнивает выражение в его левой части с выражением в его правой части. Вычисляяtrue, является ли левое выражение меньше правого, falseв противном случае. Он >делает то же самое. За исключением проверки того. Больше ли левостороннее выражение. Чем правостороннее :

≫ 17 18 ⬅︎ false 

Операторы >=and переводятся как “больше или равно” и “меньше или равно” соответственно:

≫ 22 >= 22 ⬅︎ true ≫ 22 

Убедитесь. Что вы правильно расположили угловую скобку и знак равенства!

≫ 22 = 22 ⬅︎ SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help) 

Встроенные функции: Math.random()

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

“Функция”-это фрагмент заранее написанного кода. Который выполняет некоторые задачи и вычисляет значение.

Чтобы использовать функцию. Вы “вызываете” или “запускаете” ее. Вводя в код ее имя. За которым следует пара круглых скобок. Позже вы узнаете. Как писать свои собственные функции. Но пока мы будем использовать только некоторые из них. Которые определяет для нас JavaScript.

Встроенная функция Math.random() вычисляет случайное вещественное число между нулем и единицей. Вызовите его. Введя его имя в консоль:

≫ Math.random() ⬅︎ 0.4805643133576173 

(Конечно. Вы увидите другое случайно выбранное число.) Запустите эту линию несколько раз. Чтобы получить разные результаты!

Простой способ имитировать подбрасывание монеты- спросить JavaScript. Если результат этой функции больше 0,5:

≫ Math.random() > 0.5 ⬅︎ true ≫ Math.random() > 0.5 ⬅︎ false 

Половину времени вы получите true(орел!), а falseполовину — (решка!).

Шестигранный штамп с мат.полом()

Мы можем использовать то. Что мы обсуждали до сих пор. Чтобы написать некоторый код для имитации прокатки шестигранного штампа. Что мы хотим сделать. Так это написать выражение. Которое произвольно вычисляет число от одного до шести (включительно). Мы уже знаем о Math.random()функции. Которая возвращает случайное вещественное число между нулем и единицей.

Чтобы получить случайное число в диапазоне до шести. Мы можем просто умножить значение Math.random()на шесть:

≫ Math.random() * 6 ⬅︎ 4.658931071787378 

Выполните это несколько раз. Чтобы получить представление о диапазоне значений. Которые он возвращает. Это хороший первый шаг. Но это не совсем то. Что мы хотим. Имитированный рулон шестигранного штампа). Так как он имеет дробную часть. Кроме того, если вы запустите функцию достаточно часто. Вы заметите. Что число перед дробной частью изменяется от нуля до пяти. Но никогда не достигает шести.

(Подумайте на секунду. Почему это так!)

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

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

drop fractional part of number in javascript. Обычно вы найдете такой поток с некоторыми указателями и, надеюсь. С некоторыми примерами кода!

JavaScript на самом деле поставляется со встроенной функцией удаления дробной части числа (то есть округления его в меньшую сторону). Функция вызывается Math.floor(). Эта функция работает немного иначеMath.random(), чем та. Что она не просто придумывает число из ниоткуда. А выполняет операцию над числом. Терминология для этого заключается в том. Что функция принимает аргумент или параметр. Когда функция принимает параметр. Вы помещаете выражение. С результатом которого она должна работать. Между круглыми скобками, например:

≫ Math.floor(17 / 2) ⬅︎ 8 

Как вы можете видеть. Когда вы помещаете выражение между круглыми скобками. JavaScript вычисляет это выражение. А затем предоставляет его функции в качестве параметра. Затем функция вычисляет результат операции. Для выполнения которой она предназначена.

Имея в виду. Что значения сами по себе являются выражениями. Которые вычисляются до этого значения. Вы можете использовать Math.floor()их для поиска округленного эквивалента произвольного числа:

≫ Math.floor(1234.5678) ⬅︎ 1234 

Теперь хитрая часть: как мы возьмем случайное число. Возвращенное из Math.random() * 6 и найти округленный эквивалент? Вот как: поместите все выражение в скобки Math.floor().

≫ Math.floor(Math.random() * 6) ⬅︎ 3 

Эй, здорово! Мы проделали большую часть пути. Выполните эту функцию несколько раз. Чтобы увидеть . Как выглядит результат. (В большинстве браузеров вы можете нажать клавишу “вверх”. Чтобы “прокрутить” предыдущие выражения. Сделайте это. Чтобы сэкономить время на наборе текста!)

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

≫ Math.floor(Math.random() * 6) + 1 ⬅︎ 4 

УПРАЖНЕНИЕ: Проработайте. Почему * 6часть этого выражения должна находиться внутри круглых скобок. А почему+ 1снаружи. Если у вас возникли проблемы с рассуждениями об этом. Попробуйте записать его на листе бумаги и проработать шаги. Которые должен выполнять JavaScript для оценки этого выражения.

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

Кстати, нет никакой причины. По которой вы должны были знать. Что существует вызванная функцияMath.floor(), которая выполняет операцию. Выполняемую именно этой функцией. Из первых принципов не очевидно. Что такая функция должна существовать. Задача научиться программировать компьютер-это, по сути. Сама задача узнать. Как выглядит конкретный язык программирования и какие возможности он предоставляет. Поэтому не волнуйтесь. Если что-то подобное Math.floor()кажется неочевидным. Потому что это абсолютно так.

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

Внимание!

Функции не всегда оцениваются до полезного значения. Некоторые функции существуют только для выполнения определенной задачи. alert()Функция является одной из них. Попробуйте ввести в консоль следующее:

alert("Hello, world!") 

Это должно отображать модальное диалоговое окно, которое приглашает вас нажать “OK” (или что-то подобное; точно. Как это окно выглядит. Зависит от вашего браузера). Создание этого окна является целью alert()функции. Когда вы нажмете “ОК”. Вы заметите. Что слово undefinedпоявляется в консоли. Значениеundefined-это специальное значение в JavaScript. Которое означает “ничего в частности”. То есть то. К чему приводит alert()функция.

Кстати, выражение между скобками alert()в приведенном выше примере—начинающееся и заканчивающееся двойными кавычками—называется строковым литералом. Строковый литерал-это один из способов определения вида значения . Называемого строкой, которое используется в JavaScript (и многих других языках программирования) для представления текста. (Компьютерные программы состоят из текста. Но также часто работают с текстом. Подобно тому. Как калькулятор работает с числами. Строковый литерал-это способ сообщить JavaScript. Что некоторый текст в вашем выражении является данными. А не частью кода выражения.)

alert()Функция также будет полезно принимать значение. Которое не является строкой. В качестве параметра. Например, чтобы отобразить всплывающее окно с результатом моделирования шестигранных кубиков:

alert(Math.floor(Math.random() * 6) + 1) 

Переменные

Вы можете сохранить результат вычисления выражения для последующего использования =оператора (называемого “оператором присваивания”) и letключевого слова. В левой части =напишите слово . Которое вы хотели бы использовать для обозначения значения выражения. А в правой части напишите само выражение. После того как вы присвоили такое значение. Всякий раз. Когда вы включаете это слово в свой код JavaScript. Оно будет оцениваться как значение. Которое вы присвоили ему ранее. Вот так:

≫ let x = (4 + 5) * 6 ⬅︎ undefined ≫ x ⬅︎ 54 

В этом случае результат вычисления выражения (4 + 5) * 6присваивается переменной x. Теперь всякий раз. Когда вы используете переменную x в своей программе. Она “заменяет” результат выражения. Которое вы ей назначили.

Обратите внимание. Что строка с letи =сама по себе является выражением. Но выражение присвоения значения переменной всегда вычисляется undefined. (Если это предложение не имеет смысла. Не волнуйтесь—это очень тонкий момент. Вы можете просто игнорировать undefinedрезультат оператора присваивания.) Во втором выражении мы просто набрали xв консоли. Это равносильно тому. Чтобы спросить JavaScript: “Эй, помните. Когда я рассказывал вам о переменной с именем x? Ты можешь сказать мне. Что там сейчас?”

ПРИМЕЧАНИЕ: Ключевое varслово иногда используется вместо let. Для наших целей они идентичны. Хотя есть важное различие. На данный момент. Если вы смотрите на другие учебники по программированию и видите var, просто знайте. Что вы почти наверняка можете использовать letключевое слово вместо varтого. Чтобы без ущерба для работы вашей программы.

Теперь всякий раз. Когда вы используете переменную x в своей программе. Она “стоит” для результата выражения. Которое вы ей назначили.

≫ x / 6 ⬅︎ 9 

Вы можете создавать столько переменных. Сколько захотите!

≫ another_variable = (x + 2) * 4 ⬅︎ 224 

Имена переменных должны начинаться с буквы. Символа подчеркивания или знака доллара ($); после первого символа вы также можете использовать цифры. Имена переменных чувствительны к регистру (то appleесть это другое имя переменной Apple). В большинстве браузеров в именах переменных также можно использовать символы. Отличные от ASCII (т. е. буквы и символы . Обычно не используемые в английском языке). В этом документе есть подробныесведения . Но , например. Это прекрасно работает:

≫ let 猫 = 1234 ⬅︎ undefined ≫ 猫 + 4321 ⬅︎ 5555 

или

≫ let 고양이 = 1111 ⬅︎ undefined ≫ 고양이 + 123 ⬅︎ 1234 

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

≫ voldemort ⬅︎ ReferenceError: voldemort is not defined 

Если вы присвоите значение переменной. А затем снова присвоите ей значение. Предыдущее значение переменной будет перезаписано. Однако если вы попытаетесь использовать letключевое слово дважды с одним и тем же именем переменной. JavaScript покажет ошибку:

≫ let another_variable = 4 ⬅︎ SyntaxError: redeclaration of let another_variable 

Для чего вообще существуют переменные?

Сначала не совсем понятно. Зачем вообще нужны переменные. Зачем говорить JavaScript хранить значение на потом. А не просто писать более длинное выражение? Одним из способов использования переменных является сокращение повторения. Когда у вас есть одно значение. Которое вы хотите использовать в нескольких местах. Допустим, у вас было несколько цен на товары в долларах США. И вы хотели перевести их все в евро. Для этого можно определить коэффициент преобразования (0,84 на момент написания статьи) в одной переменной и использовать его во всех последующих расчетах. Когда коэффициент конверсии изменения. Вы просто должны обновить соответствующее значение в одном месте. А не в каждом месте. Где это происходит:

≫ let convRate = 0.84; ⬅︎ undefined ≫ 19.99 * convRate ⬅︎ 16.7916 ≫ 159.95 * convRate ⬅︎ 134.35799999999998 

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

alert(Math.floor(Math.random() * 6) + 1) 

Мы могли бы разбить его на последовательность присвоений переменных чтобы сделать его немного легче читаемым:

let randomValue = Math.random(); let scaledUp = randomValue * 6; let noFraction = Math.floor(scaledUp); let dieRoll = noFraction + 1; alert(dieRoll); 

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

Компьютерные программы

Кстати, последовательность выражений. Написанных в последнем примере. Является примером компьютерной программы: список вещей. Которые должен сделать компьютер. Технически “программа” может состоять из одного выражения. Но большинство компьютерных программ состоит из нескольких (а иногда из многих тысяч или даже миллионов).

Когда JavaScript встречает такой список. Он смотрит на первый элемент в списке. Оценивает его и продолжает. Пока не достигнет последнего элемента. Этот процесс называется “запуск” или” выполнение (Есть способы заставить JavaScript пропустить выполнение. Которые очень полезны и которые мы обсудим позже). Отдельные команды в списке. Такие как присвоение значения переменной. Называются операторами.

В приведенном выше примере программа была просто списком строк кода. Которые вы вставляли в консоль. Обычно, однако. Компьютерная программа хранится в отдельном файле (программы JavaScript обычно имеют расширение файла.js), который загружается в браузер с помощью различных механизмов. Таких как HTMLscript-тег.

Еще одна вещь. Которую следует отметить в приведенном выше примере: каждая строка программы заканчивается точкой с запятой (;). Что с ним происходит? Ну, при выполнении программы JavaScript обычно рассматривает каждую строку как отдельный оператор. Технически возможно, однако. Иметь два оператора в одной строке. Разделенные точками с запятой, как это:

let abc = 123; let efg = 234 

Точка с запятой сигнализирует JavaScript. Что строка-это не просто одно большое выражение; это два оператора. Которые должны выполняться отдельно. По соглашению программисты JavaScript включают точку с запятой в конце строки, даже если в строке есть только один оператор. Для этого есть веские причины, но в основном это просто из чувства традиции. (Многие из языков программирования. Которые Дизайн JavaScript основан на таких принципах. Как C и Java действительно требуют точки с запятой в конце каждой строки.)

Встроенные переменные и свойства

JavaScript также предоставляет некоторые встроенные переменные. Эти переменные всегда доступны вам. Вам не нужно их определять. Встроенные переменные будут отличаться в зависимости от того. Где вы запускаете JavaScript (например. В браузере. В командной строке. В определенном фреймворке и т. Д.; подробнее об этом ниже); переменные. Которые я покажу вам ниже. Специально доступны. Когда вы запускаете JavaScript в браузере.

Примечание: Технически это “свойства” встроенных “объектов”. Но я не возражаю называть их “переменными” для целей этого урока.

Например, существует встроенная переменнаяnavigator.userAgent, которая дает вам информацию об используемом браузере:

≫ navigator.userAgent ⬅︎ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:55.0) Gecko/20100101 Firefox/55.0" 

А встроенные переменные window.innerWidthwindow.innerHeightсообщат вам. На сколько пикселей шириной является ваше окно браузера (соответственно):

≫ window.innerWidth ⬅︎ 693 ≫ window.innerHeight ⬅︎ 202 

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

Некоторые из этих переменных можно перезаписать (то есть присвоить им новое значение). Примечательно. Что переменная document.body.textContentсоответствует тексту. Видимому в теле документа в окне. Документ в нашем окне пуст (потому что мы специально решили загрузить пустой документ. Когда начали этот учебник!). Но вы можете поместить некоторый текст в тело документа присвоив этой переменной значение:

≫ document.body.textContent = "I love JavaScript" ⬅︎ "I love JavaScript" 

Текст документа должен измениться на I love JavaScript

Еще несколько забавных встроенных переменных: document.body.style.fontSizeзадает размер шрифта. В котором отображается текст в теле документа. Вы можете установить его. Присвоив строковому значению (например) число. За которым следует px(это устанавливает размер шрифта. Измеряемый в пикселях):

≫ document.body.style.fontSize = "72px"; ⬅︎ "72px" 

Формат72px -это значение длины CSS. Если вы знакомы с CSS, вы узнаетеfontSize, что идентификатор похож на CSSfont-size свойства. И фактически веб-браузеры позволяют легко изменять стили CSS HTML-элементов в теле документа. В качестве другого примера можно привести переменную document.body.style.background позволяет установить фон тела документа. Давайте используем этот GIF котенка:

≫ document.body.style.background = "url(https://i.chzbgr.com/full/5179324416/hC342C9CA/)" 

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

Веб - браузер с открытой консолью, основной корпус показывает

Следующие шаги

Этот учебник был разработан для того. Чтобы вы немного познакомились с JavaScript и одновременно показали. Как использовать консоль JavaScript. Которая поставляется бесплатно практически с каждым браузером. Знакомство с консолью важно не только потому. Что это полезный инструмент для отладки и экспериментов. Но и потому. Что многие более продвинутые учебные пособия по программированию предполагают знакомство с концепцией интерфейсов в стиле read-eval-print-loop.

Но вы вряд ли будете выполнять много реальной работы в консоли JavaScript; на самом деле это не то место. Где вы пишете программы JavaScript. В большинстве случаев браузерные приложения JavaScript используют автономные файлы. Сопровождающие веб-страницы. Этот учебник по основам JavaScript от MDN проведет вас через весь процесс работы с такой настройкой.

Более серьезная разработка JavaScript обычно происходит с помощью фреймворка, который представляет собой набор предопределенных функций и других битов кода. Предназначенных для облегчения конкретных задач. React-это популярный фреймворк для создания веб-интерфейсов; D3.js это популярный фреймворк для визуализации данных. Фреймворк, используемый в остальных учебниках на этом сайте. Таков: p5.js, что позволяет легко создавать интерактивные визуальные приложения. Вот неполный список других интересных фреймворков и библиотек JavaScript.

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

  • MDN “Getting Started with the Web”-это хорошо развивающийся и щедрый учебник по всем аспектам веб-разработки. Включая JavaScript.
  • Красноречивый JavaScript Haverbeke-именно это. Для тех из вас. Кто лучше всего учится на систематических подходах
  • Начало работы с p5.js это JavaScript-версия классического начала обработки Reas и Fry . Рекомендуется для получения дополнительной информации о p5.js фреймворк и об интерактивном программировании в целом.