Как в javascript: Выражения и операторы — JavaScript

Leave a Comment / Разное / By /

Разработка веб-приложений: учебное пособие

4. Основы JavaScript

  • Что такое JavaScript
  • Краткая история JavaScript
  • Запуск JavaScript
  • Размещение JavaScript на HTML-странице
  • Расположение тегов
  • Отложенные сценарии
  • Асинхронные сценарии
  • Основы языка
  • Иерархия объектов в JavaScript
  • Операторы
  • Инструкции
  • Функции
4.9. Иерархия объектов в JavaScript

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

<!DOCTYPE html>
<html>
<head>
<title>Моя домашняя страничка</title>
</head>
<body bgcolor=#ffffff>
<center>
<img src="images\home.gif" name="pic1" width=80 height=144>
</center>
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
e-Mail:&nbsp;
<input type="text" name="email" value=""><br><br>
<input type="button" value="Нажми на меня" name="myButton">
</form>
<center>
<img src="images\comp.gif" name="pic4" width=153 height=74>
<a href="MyHome.html">Моя домашняя страничка</a>
</center>
</body>
</html>

Показать страничку

Как выглядит эта страница на экране (красным цветом выделены комментарии) показано на рис.

1.


Рис. 1. Иерархическая структура веб-страницы

Итак, на страничке имется два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера – это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа – однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и его часто используют. К свойствам объекта

document относятся, например, цвет фона для веб-страницы. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.

На рис. 2 иллюстрируется иерархия объектов, создаваемая HTML-страницей из выше преведенного примера.


Рис. 2. Иерархия объектов

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

document. Первый рисунок на странице представлен как объект images[0]. Это означает, что можно получать доступ к этому объекту, записав в JavaScript: document.images[0].

Если же, например, следует знать, какой текст ввел читатель в первый элемент формы, то сперва нужно выяснить, как получить доступ к этому объекту. И снова начинаем с вершины иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0].

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

JavaScript строку:

name = document.forms[0].elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь можно работать с этой переменной, как необходимо. Например, можно создать выпадающее окно, воспользовавшись командой alert («Привет» + name). В результате, если пользователь введет в это поле слово ‘Ваня’, то по команде alert («Привет » + name) будет открыто выпадающее окно с приветствием ‘Привет Ваня’.

При работе с большими страницами процедура адресации к различным объектам по номеру может стать весьма запутынной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17] или document.forms[2].elements[18]? Во избежание подобной проблемы, можно сами присваивать различным объектам уникальные имена:

<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
...

Эта запись означает, что объект forms[0] получает теперь еще и второе имя myForm. Точно так же вместо elements[0] можно писать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо

name = document.forms[0].elements[0].value;

можно записать

name = document.myForm.name.value;

Это значительно упрощает программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов. Обратите внимание, что при написании имен следует следить и за положением регистра – то есть нельзя написать

myform вместо myForm.

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

Как начать думать функционально в JavaScript — CSS-LIVE

Перевод статьи How to Start Thinking Functionally in JavaScript с сайта itnext.io для css-live.ru, автор — Алекс Рицкован.

 Фото Denys Nevozhai с Unsplash

Функциональное программирование – это стиль программирования, который требует от специалиста думать на более высоком уровне абстракции. Как правило, когда мы учимся программировать, мы рассматриваем задачи в весьма императивном и процедурном стиле: сначала делаем это, потом – то и т. д.

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

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

Чтобы освоить навык функционального программирования – или ФП, как его иногда называют по-модному – потребуется время; но как только вы вникнете в суть, вам откроется целый новый мир. Вы также сможете разрабатывать код, который легче поддается анализу.

С помощью ФП вы сможете перейти от императивного стиля кодирования к более декларативному.

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

Если не совсем понятно, ничего страшного. Просто давайте сядем и разберемся с этим вместе.
Рассмотрим простой пример в JavaScript.

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

Допустим, у нас есть массив домашних животных.

Каждый элемент массива – это объект, определяющий питомца.

Предположим, что в бизнес-требованиях предусмотрена фильтрация объектов по следующим критериям: питомец старше 7 лет черного окраса.

Для каждой совпадающей записи нам нужно создать строку в следующем формате:

<petName>, возраст: <age> лет, цвет: <color>.

Теперь, когда мы знаем, каким должен быть результат, как мы его получим?

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

В строке 1 мы создаем новый массив для сбора результатов, удовлетворяющих бизнес-требованиям. Затем в строке 2 создаем цикл for. В каждой итерации цикла получаем название питомца в строке 3 и проверяем его свойства в строке 4, чтобы увидеть, подпадает ли он под наши критерии.

Если условие выполняется, вставляем новую строку в массив outputArr.

Наконец, в строке 8 мы вызываем метод console.table(), который выводит новый массив в консоль.

Мы получили такие выходные данные.

отфильтрованные записи в консоли

Обратившись к исходным данным, мы увидим, что наш код работает правильно. Есть только 2 записи, которые соответствуют критериям фильтрации.

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

Есть ли лучший способ? Думаю, да. Давайте его рассмотрим.

Декларативный способ

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

“Я хочу отфильтровать массив по ряду критериев и вывести строку данных.”

Я намеренно не думаю о реализации. Мои мысли парят не в трех метрах, а в трех километрах над задачей.

Слова, которые первыми приходят на ум – отфильтровать и вывести строку. Это можно записать так:

pets.filter().map()

а вот фактическая реализация
декларативная версия № 1

Выглядит лучше, правда? Почти как предложение на английском. Именно это люди имеют в виду, когда говорят, что ФП носит декларативный характер: мы объявляем, чего хотим достичь. Конечно, нам в любом случае приходится прописывать логику фильтра, но само решение выглядит более элегантным и его легче анализировать. Нам не нужно изучать каждую строку цикла for, чтобы понять, что происходит.

Но я бы пошел ещё дальше. Следуя правилу DOT (Do One Thing, одна функция – одно действие), я бы сделал такой рефакторинг кода.
декларативная версия № 2

Я разбил логику фильтра на две отдельные функции (помните: одна функция – одно действие) и добавил логику создания строки.

Теперь, чтобы получить необходимые выходные данные, нужно просто последовательно соединить функции .filter() и .map() и передать новые функции в качестве аргументов (строка 5). Выходные данные в консоли точно такие же.

код чище – выход тот же

Выводы

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

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

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

4. Функциональный код проще поддерживать и модифицировать.

Ресурсы

Чтобы продолжить знакомство с ФП, ознакомьтесь с книгой “Eloquent JavaScript” (бесплатно).

И как всегда, спасибо, что прочитали статью! Если она вам понравилась, посмотрите другие мои записи здесь на Medium.

P.S. Это тоже может быть интересно:

Как проверить, является ли значение объектным в JavaScript?

В JavaScript объекты представляют собой набор связанных данных. Это также контейнер для пар имя-значение. В JavaScript мы можем проверить тип значения разными способами. По сути, мы проверяем, является ли значение объектным, используя typeof , instanceof , конструктор и Object.prototype.toString.call(k ). Все операторы используются в определенных условиях.

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

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

  • Синтаксис:  
 typeof VariableName;
  • Пример:

JavaScript

<Скрипт>

LET K = {name

LET K = {name:

LET K = {name:

LET K = {name:

LET K = {naly

. };

   let k0 = new Set()

   let k1 = [1,2,3];

   пусть k2 = "привет" ;

   пусть k3 = ноль ;

   пусть k4 = не определено;

 

   console.log( typeof k  )

   console.log( typeof k0  )

   console.log( typeof K1)

Консоль. log ( Тип K2)

Консоль. LOG K3). k4 )

 

Вывод: 

 объект
объект
объект
нить
объект
не определено

instanceof оператор: Используется для проверки того, создан ли какой-либо экземпляр с помощью определенного конструктора или нет. Он возвращает true , если он сделан с помощью конструктора, иначе возвращает false . Это работает только для тех, кто завернут в обычные типы объектов.

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

  • Синтаксис: 
 Переменный экземпляр объекта;
  • Пример:

JavaScript

<Скрипт>

LET K = {name

LET K = {name:

LET K = {name:

LET K = {name:

LET K = {naly

. };

   let k0 = new Set()

   let k1 = [1,2,3];

   пусть k2 = "привет" ;

   пусть k3 = ноль ;

   пусть k4 = не определено;

Консоль.log (K ExtanceOF Объект)

Консоль.LOG (K0 объект. LOG (K0 объекта.0048 ExtanceOF Объект)

Консоль. log (K2 объект)

Консоль. .log( k4  instanceof Object)

 

True: 3 Истинный Истинный ЛОЖЬ ЛОЖЬ ложь

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

Условие:

Метод конструктора выдает ошибку для переменных, не имеющих свойства конструктора. null и undefined не имеют свойства конструктора, поэтому выдает ошибку.

  • Синтаксис: 
 Variable.constructor === Object
  • Example:

Javascript