• arguments –
• alert – показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК»
• atob – Функция декодирует строку данных , которые были закодированы с помощью Base64 кодирования.

  • var decodedData = scope.atob(encodedData);

• angular –
• addEventListener – способ назначения обработчиков на события с привязкой к элементу. Синтаксис:
  • element.addEventListener(event, handler[, options]);
    • event – Имя события, например "click"
    • handler – Ссылка на функцию-обработчик
    • options – Дополнительный объект со свойствами: once, capture, passive.
  • Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента

    • function handler1() {
        alert('Спасибо!');
      };
      
      function handler2() {
        alert('Спасибо ещё раз!');
      }
      
      elem.onclick = () => alert("Привет");
      elem.addEventListener("click", handler1); // Спасибо!
      elem.addEventListener("click", handler2); // Спасибо ещё раз!

• app –

== B ==

• blur –
• btoa – Метод создает Base64 закодированную ASCII строку из двоичной строки / Binary (то есть String объект , в котором каждый символ в строке рассматриваются как байты двоичных данных). Вы можете использовать этот метод для кодирования данных, которые в противном случае могут вызвать проблемы со связью, передать их, а затем использовать метод atob() для повторного декодирования данных.

  • var encodedData = scope.btoa(stringToEncode);

• break –
• backendApi –

== C ==

• customElements –
• closed –
• clientInformation –
• crypto –
• cancelAnimationFrame –
• cancelIdleCallback –
• captureEvents –
• clearInterval – отменяет синхронизированное, повторяющееся действие, которое было ранее установлено вызовом setInterval().
• clearTimeout – отменяет тайм – аут ранее установленного вызовом метода setTimeout().
• close –
• confirm – отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.
  • result = confirm(message);
    • message опциональная (необязательная) строка, которая будет отображена в диалоговом окне.
    • result булево значение, указывающее на нажатую кнопку OK или Cancel (true означает OK).
• createImageBitmap – Метод создает bitmap из источника, при необходимости можно использовать только часть источника. Метод существует в глобальной области как в окнах, так и в рабочих процессах. Он принимает множество различных источников изображений и возвращает Promise, которое resolve в ImageBitmap.
• chrome –
• caches –
• case –
• catch –
• continue –

== D ==

• dimensionInfo –
• document –
• devicePixelRatio –
• defaultStatus –
• dragomanClosure –
• define –
• debounceTimer –
• dispatchEvent –
• debugger –
• default –
• delete –
• do –

== E ==

• external –
• engineModuleGlobal –
• else –

== F ==

• frames –
• frameElement –
• fetch – Метод WindowOrWorkerGlobalScope Mixin начинается процесс извлечения ресурса из сети, возвращая обещание , которое выполняется , как только отклик доступен. Обещание преобразуется в Response объект, представляющий ответ на ваш запрос. Обещание не отклоняется при ошибках HTTP – оно отклоняется только при ошибках сети. Вы должны использовать then обработчики для проверки ошибок HTTP.
• find –
• focus –
• false –
• finally –
• for –
• function –

== G ==

• getComputedStyle –
• getSelection –

== H ==

• html –
• history –

== I ==

• innerWidth –
• innerHeight –
• isSecureContext –
• indexedDB –
• if –
• in –
• instanceof –

== L ==

• location –
• locationbar –
• length –
• localStorage –
• layout –

== M ==

• menubar –
• matchMedia –
• moveBy –
• moveTo –

== O ==

• opener – Свойство opener возвращает ссылку на окно, которое открыло текущее. Когда Вы открываете новое окно с помощью open() Вы можете воспользоваться этим свойством, чтобы взаимодействовать с родительским окном из нового окна.

  • //Создадим новое окно win 
    win = window.open();
    //Выведем в новое окно текст
    win.document.write("Текст нового окна");
    //Теперь выведем текст в родительское окно с помощью свойства opener
    win.opener.document.write("Текст родительского окна");

     

• origin –
• outerWidth –
• outerHeight –
• onsearch –
• onappinstalled –
• onbeforeinstallprompt –
• onabort –
• onblur –
• oncancel –
• oncanplay –
• oncanplaythrough –
• onchange –
• onclick –
• onclose –
• oncontextmenu –
• oncuechange –
• ondblclick –
• ondrag –
• ondragend –
• ondragenter –
• ondragleave –
• ondragover –
• ondragstart –
• ondrop –
• ondurationchange –
• onemptied –
• onended –
• onerror –
• onfocus –
• onformdata –
• oninput –
• oninvalid –
• onkeydown –
• onkeypress –
• onkeyup –
• onload –
• onloadeddata –
• onloadedmetadata –
• onloadstart –
• onmousedown –
• onmouseenter –
• onmouseleave –
• onmousemove –
• onmouseout –
• onmouseover –
• onmouseup –
• onmousewheel –
• onpause –
• onplay –
• onplaying –
• onprogress –
• onratechange –
• onreset –
• onresize –
• onscroll –
• onseeked –
• onseeking –
• onselect –
• onstalled –
• onsubmit –
• onsuspend –
• ontimeupdate –
• ontoggle –
• onvolumechange –
• onwaiting –
• onwebkitanimationend –
• onwebkitanimationiteration –
• onwebkitanimationstart –
• onwebkitanimationend –
• onwheel –
• onauxclick –
• ongotpointercapture –
• onlostpointercapture –
• onpointerdown –
• onpointermove –
• onpointerup –
• onpointercancel –
• onpointerover –
• onpointerout –
• onpointerenter –
• onpointerleave –
• onselectstart –
• onselectionchange –
• onanimationend –
• onanimationiteration –
• onanimationstart –
• ontransitionend –
• onafterprint –
• onbeforeprint –
• onbeforeunload –
• onhashchange –
• onlanguagechange –
• onmessage –
• onmessageerror –
• onoffline –
• ononline –
• onpagehide –
• onpageshow –
• onpopstate –
• onrejectionhandled –
• onstorage –
• onunhandledrejection –
• onunload –
• open –
• ondevicemotion –
• ondeviceorientation –
• ondeviceorientationabsolute –
• onpointerrawupdate –
• openDatabase –

== P ==

• personalbar –
• parent –
• pageXOffset –
• pageYOffset –
• performance –
• postMessage –
• print –
• prompt – отображает диалоговое окно с необязательным запросом на ввод текста: result = prompt(title, [default]);
  • Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
    • result — это строка, содержащая текст, поступивший от пользователя или null.
    • title – Текст для отображения в окне.
    • default – Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

== Q ==

• queueMicrotask – Метод, который подвергается воздействие на Window или Worker интерфейсе, в очередь microtask , которая будет выполнено в безопасное время до контроля возвращения в цикл обработки событий браузера. Микрозадача – это короткая функция, которая будет выполняться после того, как текущая задача завершит свою работу, и когда нет другого кода, ожидающего запуска, до того, как управление контекстом выполнения будет возвращено в цикл событий браузера. Это позволяет вашему коду выполняться без вмешательства в любой другой ожидающий выполнения код с потенциально более высоким приоритетом, но до того, как браузер восстановит контроль над контекстом выполнения, что может зависеть от работы, которую вам нужно выполнить.

  • scope.queueMicrotask(function);

• qJsonp –
• qvangularGlobal –
• qListObject – является базовым списком и подходит, если вы хотите создать список всех значений из поля. Объект списка – это визуализация, содержащая одно измерение. При получении макета объекта списка ( qListObjectDef ) отображаются все значения. Если выбор применяется к объекту списка, выбранные значения отображаются вместе с исключенными и дополнительными значениями.
  • Пример: горизонтальный список initialProperties

  • initialProperties : {  
                version : 1.0,  
                qListObjectDef : {  
                    qShowAlternatives : true,  
                    qFrequencyMode : "V",  
                    qSortCriterias : {  
                        qSortByState : 1  
                    },  
                    qInitialDataFetch : [{  
                        qWidth : 2,  
                        qHeight : 50  
                    }]  
                },  
                fixed: true,  
                width: 25,  
                percent: true,  
                selectionMode: "CONFIRM"  
    }

     

• qHyperCube –
• qlik –

== R ==

• rows –
• releaseEvents –
• requestAnimationFrame –
• requestIdleCallback –
• resizeBy –
• resizeTo –
• regeneratorRuntime –
• require –
• requirejs –
• removeEventListener –
• return –
• reply –

== S ==

• self –
• scrollbars –
• statusbar –
• status –
• screen –
• scrollX –
• scrollY –
• screenX –
• screenY –
• screenLeft –
• screenTop –
• styleMedia –
• sessionStorage –
• scroll –
• scrollBy –
• scrollTo –
• setInterval – Метод, предложенный на Window и Worker интерфейсах, неоднократно вызывает функцию или выполняет фрагмент кода, с фиксированной задержкой по времени между каждым вызовом. Он возвращает идентификатор интервала, который однозначно определяет интервал, поэтому вы можете удалить его позже, позвонив clearInterval(). Этот метод определяется WindowOrWorkerGlobalScope миксином.

  • var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);

• setTimeout – Метод WindowOrWorkerGlobalScope Mixin (и преемника Window.setTimeout()) устанавливает таймер , который выполняет функцию или указанный фрагмент кода один раз, когда таймер истекает.

  • var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);

• stop –
• showDirectory –
• showOpenFilePicker –
• showSaveFilePicker –
• speechSynthesis –
• switch –

== T ==

• this –
• toolbar –
• top –
• trustedTypes –
• throw –
• true –
• try –
• typeof –

== V ==

• visualViewport –
• var –
• void –

== W ==

• window –
• webkitStorageInfo –
• webkitCancelAnimationFrame –
• webkitRequestAnimationFrame –
• webkitRequestFileSystem –
• webkitResolveLocalFileSystemURL –
• webpackJsonpsensei_codearea –
• while –
• with –

Сообщение Обзор функций Javascript в редакторе Qlik Sense Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.

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

Поскольку «виртуальный DOM» — это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с React-элементами , поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React.

Теневой DOM похож на виртуальный DOM?

Нет, они совсем разные. Теневой DOM (Shadow DOM) — это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM — это концепция, реализованная библиотеками в JavaScript поверх API браузера.

Что такое «React Fiber»?

Fiber — новый механизм согласования в React 16, основная цель которого сделать рендеринг виртуального DOM инкрементным.

Пояснение с Toster.RU

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

Пример – задача простая, у вас есть таблица и нужно постоянно обновлять ячейки новым значением. Значение приходят из апишки раз в пару десятков милисекунд (какая-то реалтайм статистика к примеру). Значения эти – просто массив данных.

Решение в лоб – каждый раз когда приходят данные, дропать старую таблицу, проходить циклом по массиву и формировать новую. Это куча операций с DOM. У вас каждые n милисекунд будет полностью перестраиваться вся эта штука, дропаться и создаваться новые элементы и все это будет ужасно долго пересчитываться и перерисовываться.

А теперь добавим между всем этим виртуальную апишку, которая запоминает что она там в прошлый раз создала и что надо в этот раз создать. Вы все так же влоб проходите циклом по массиву и просите виртуальный дом построить новую апишку, а виртуальный дом будет стараться переиспользовать то что у него уже есть, ну и все в таком духе. За счет этого получается нефиговый прирост производительности (но есть потери на работу самого виртуального DOM, зато можно фигачить как хочешь).

Если же прослойку эту сделать со своим интерфейсом, можно получить слой абстракции для работы с UI. Именно это предлагает тот же React. Слой абстракции над UI. Вы можете работать с реактом, но UI будет отрисовываться не через DOM а скажем… это может быть нативный интерфейс мобильной платформы (гуглить native-react). Ну и т.д.

Рендеринг – отображение конечного результата

Javascript фреймворки в первую очередь стоит сравнить по рендерингу страницы. Современная архитектура допускает два вида:

• на стороне клиента (страница отрисовывается за счет мощностей ПК пользователя)
• или на стороне сервера.

DOM – Document Object Model – объектная модель документа, позволяющая считывать и менять содержимое, оформление и даже структуру html-документов. Каждый из фреймворков подходит по-своему к обработке DOM что и оказывает влияние на рендеринг конечной страницы, отображаемой на экране пользователя.

Vue.js и React создают копию DOM, обрабатывают ее, а затем результат сравнивается с исходной версией. В конечном документе (то есть на экране пользователя) заменяются только те части страницы, которые отличаются от результатов обработки.

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

В корне отличается подход к обработке DOM фреймворком Angular версии 1.x и выше. Здесь происходит разделение на два потока, причем за рендеринг DOM «отвечает» браузер (клиентская часть), а за создание директив, загрузку кода и сервисов – общий поток (серверная часть).

Но это совсем не значит, что рендеринг происходит на стороне клиента – визуализация по-прежнему производится серверами. Следовательно, SEO оптимизация не вызовет затруднений. Поисковым роботам будет предоставлена корректная страница при индексации.

Model-View-Controller (MVC) – шаблон проектирования Модель-Представление-Контроллер

Что такое шаблон проектирования Model-View-Controller? MVC включает в себя три главных его части:

• Model (Модель) – хранит данные приложения (предоставляет данные и реагирует на команды контроллера, изменяя своё состояние);
• View (Представление) – представляет модель клиенту (отвечает за отображение данных модели пользователю, реагируя на изменения модели);
• Controller (Контроллер) – модифицирует модель, реагируя на события от клиента (интерпретирует действия пользователя, оповещая модель о необходимости изменений).

HTML Canvas

HTML Canvas — это удивительная технология для рисования, встроенная во все современные браузеры. С помощью Canvas вы можете рисовать фигуры, управлять фотографиями, создавать игры и анимировать фактически что угодно — всё это с правильными веб-стандартами. Вы даже можете делать мобильные приложения.

Тег <canvas> – это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.

Node.JS

Node.js разработал Райан Даль (англ. Ryan Dahl) в 2009 году.

Node.js — это среда выполнения JavaScript. Это JavaScript фреймворк, основанный на движке V8 от Google, созданный для решения проблемы одновременной обработки большого количества запросов.

Движок принимает код JavaScript и компилирует его в C++, который выполняется с молниеносной скоростью. Движок V8 ( он транслирует JavaScript в машинный код) делает это «на лету».

Frontend и Backend – что это такое и как они взаимодействуют?

• Фронтенд – все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript. Frontend – это разработка пользовательского интерфейса и функциональности, которые работают на клиентской стороне веб-сайта или приложения.
  
  • HTML (HyperText Markup Language) — язык разметки документов, при помощи которого формируется структура страницы: заголовки, абзацы, списки и так далее;
  • CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду ваш браузер понимает, как именно отображать элементы. CSS задает цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Еще он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом;
  • JavaScript — это язык, который создавался для того, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Еще он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.
• Бэкенд – все, что работает на сервере, то есть «не в браузере» или «на компьютере/клиенте».
  Backend – это серверная логика веб-приложения. Здесь реализуется работа с хранилищем данных, поэтому человек, занимающийся разработкой серверной логики, должен иметь навыки работы с базами данных.
  • Backend-разработчик может применять любые инструменты, доступные на его сервере: Ruby, PHP, Python, Java, Node.JS, C# и т.д.
  • Для backend-разработки используются разные системы управления базами данных: MySQL, PostgreSQL, SQLite, MongoDB и т.п.
• Взаимодействие frontend и backend происходит по кругу: frontend отправляет пользовательскую информацию в backend, там она обрабатывается и возвращается обратно, приняв понятную форму.

Что такое FizzBizz тест

FizzBizz – как правило, небольшой тест, направленный на отсеивание неопытных разработчиков. Я думаю, вы будете удивленны как много javascript разработчиков не умеют писать такие тесты.

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

Тестирование JavaScript

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

BDD (Behaviour Driven Development) – поведенческие тесты кода

BDD предполагает описание тестировщиком или аналитиком пользовательских сценариев на естественном языке — если можно так выразиться, на языке бизнеса.

туду

TDD (Test Driven Development) – Разработка через тестирование

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

туду

Karma

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

Jasmine

Jasmine – фреймворк для написания js-тестов.

Источники для обзора

1. https://ru.reactjs.org/docs/faq-internals.html
2. https://toster.ru/q/211004
3. https://mkdev.me/posts/sravnenie-javascript-freymvorkov-vue-js-react-i-angular-2019
4. https://skillbox.ru/media/code/frontend_i_backend_razrabotka
5. https://devacademy.ru/article/javascript/
6. https://jazzteam.org/ru/technical-articles/karma-and-jasmine-test-running-manual/
7. https://habr.com/ru/company/jugru/blog/329468/

Сообщение Работа с визуализацией JS. Обзор основных концепций JavaScript появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Angular.js сравнительно новый проект в мире JavaScript фреймворков. Впервые он был представлен в 2012 году сотрудником Google, и с тех пор стал проектом, поддерживаемым Google. Его цель – упростить одностраничные приложения, предоставив разработчикам MVC-подобную структуру для JavaScript. Он в основном работает, предоставляя пользовательские теги HTML, которые помогают связывать элементы DOM с моделью, через переменные JavaScript или данные JSON. Вы можете лучше использовать свой JavaScript, разбив его на контроллеры, а также модули.

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

Скачать Angular

Начнем с добавления Angular.js в наши проекты, поэтому зайдите на сайт http://angularjs.org и загрузите копию файла js в свой проект (директория с файлами html). Добавьте в разделе Head обращение к файлу js.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

Создайте файл Javascript с именем app.js

…

https://www.thatsoftwaredude.com/content/6100/a-quick-5-minute-guide-to-angular-js

Использование Angular.JS для работы с Qlik Sense Engine API

AngularJS является структурной основой для построения динамических веб-приложений на JavaScript. Он расширяет классический синтаксис HTML, внедряя динамические angular выражения (angular expressions), которые обновляют или модифицируют DOM на основе кода. Он очень удобен для динамического связывания данных на веб-странице HTML (отправка данных на страницу и отправка данных к api). Qlik Sense’s native Straight Table (стандартная прямая таблица) была разработана на основе Angular.

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

Сообщение Разработка web приложений AngularJS & Qlik Sense API. Frontend & Backend появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

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

// Инструкции могут заканчиваться точкой с запятой ;
doStuff();

// ... но она необязательна, так как точки с запятой автоматически вставляются
// везде, где есть символ новой строки, за некоторыми исключениями.
doStuff()

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

///////////////////////////////////
// 1. Числа, Строки и Операторы

// В JavaScript только один тип числа (64-bit IEEE 754 double).
// Он имеет 52-битную мантиссу, которой достаточно для хранения целых чисел
// с точностью вплоть до 9✕10¹⁵.
3; // = 3
1.5; // = 1.5

// Некоторые простые арифметические операции работают так, как вы ожидаете.
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004 (а некоторые - нет)
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

// Включая деление с остатком.
5 / 2; // = 2.5

// Побитовые операции также имеются; когда вы проводите такую операцию,
// ваше число с плавающей запятой переводится в целое со знаком 
// длиной *до* 32 разрядов.
1 << 2; // = 4

// Приоритет в выражениях можно явно задать скобками.
(1 + 3) * 2; // = 8

// Есть три специальных значения, которые не являются реальными числами:
Infinity; // "бесконечность", например, результат деления на 0
-Infinity; // "минус бесконечность", результат деления отрицательного числа на 0
NaN; // "не число", например, результат деления 0/0

// Существует также логический тип.
true;
false;

// Строки создаются при помощи двойных или одинарных кавычек.
'абв';
"Привет, мир!";

// Для логического отрицания используется восклицательный знак.
!true; // = false
!false; // = true

// Строгое равенство ===
1 === 1; // = true
2 === 1; // = false

// Строгое неравенство !==
1 !== 1; // = false
2 !== 1; // = true

// Другие операторы сравнения
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// Строки объединяются при помощи оператора +
"привет, " + "мир!"; // = "Привет, мир!"

// и сравниваются при помощи < и >
"a" < "b"; // = true

// Проверка равенства с приведением типов осуществляется двойным символом равно
"5" == 5; // = true
null == undefined; // = true

// ...если только не использовать ===
"5" === 5; // = false
null === undefined; // = false 

// ...приведение типов может привести к странному поведению...
13 + !0; // 14
"13" + !0; // '13true'

// Вы можете получить доступ к любому символу строки, используя метод charAt
"Это строка".charAt(0);  // = 'Э'

// ...или используйте метод substring, чтобы получить более крупные части
"Привет, мир".substring(0, 6); // = "Привет"

// length - это свойство, для его получения не нужно использовать ()
"Привет".length; // = 6

// Также есть null и undefined
null; // Намеренное отсутствие значения
undefined; // используется для обозначения переменных, не имеющих
           // присвоенного значения (хотя непосредственно undefined
           // является значением)

// false, null, undefined, NaN, 0 и "" — это ложь; всё остальное - истина.
// Следует отметить, что 0 — это ложь, а "0" — истина, несмотря на то, что
// 0 == "0".

///////////////////////////////////
// 2. Переменные, Массивы и Объекты

// Переменные объявляются при помощи ключевого слова var. JavaScript — язык с
// динамической типизацией, поэтому не нужно явно указывать тип. Для присваивания
// значения переменной используется символ =
var someVar = 5;

// если вы пропустите слово var, вы не получите сообщение об ошибке, ...
someOtherVar = 10;

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

// Переменным, объявленным без присвоения, устанавливается значение undefined.
var someThirdVar; // = undefined

// У математических операций есть сокращённые формы:
someVar += 5; // как someVar = someVar + 5; someVar теперь имеет значение 10
someVar *= 10; // теперь someVar имеет значение 100

// Ещё более краткая запись увеличения и уменьшения на единицу:
someVar++; // теперь someVar имеет значение 101
someVar--; // вернулись к 100

// Массивы — это нумерованные списки, содержащие значения любого типа.
var myArray = ["Привет", 45, true];

// Их элементы могут быть доступны при помощи синтаксиса с квадратными скобками.
// Индексы массивов начинаются с нуля.
myArray[1]; // = 45

// Массивы можно изменять, как и их длину,
myArray.push("Мир");
myArray.length; // = 4

// добавлять и редактировать определённый элемент
myArray[3] = "Привет";

// Объекты в JavaScript похожи на словари или ассоциативные массивы в других
// языках: неупорядоченный набор пар ключ-значение.
var myObj = {key1: "Привет", key2: "Мир"};

// Ключи — это строки, но кавычки необязательны, если строка удовлетворяет
// ограничениям для имён переменных. Значения могут быть любых типов.
var myObj = {myKey: "myValue", "my other key": 4};

// Атрибуты объектов можно также получить, используя квадратные скобки
myObj["my other key"]; // = 4

// или через точку, при условии, что ключ является допустимым идентификатором.
myObj.myKey; // = "myValue"

// Объекты изменяемы; можно изменять значения и добавлять новые ключи.
myObj.myThirdKey = true;

// Если вы попытаетесь получить доступ к несуществующему значению,
// вы получите undefined.
myObj.myFourthKey; // = undefined

///////////////////////////////////
// 3. Логика и управляющие конструкции.

// Синтаксис для этого раздела почти такой же, как в Java.

// Условная конструкция работает, как и следовало ожидать,
var count = 1;
if (count == 3) {
    // выполняется, если count равен 3
} else if (count == 4) {
    // выполняется, если count равен 4
} else {
    // выполняется, если не 3 и не 4
}

// ...как и цикл while.
while (true){
    // Бесконечный цикл!
}

// Цикл do-while такой же, как while, но он всегда выполняется хотя бы раз.
var input
do {
    input = getInput();
} while (!isValid(input))

// цикл for такой же, как в C и Java:
// инициализация; условие; шаг.
for (var i = 0; i < 5; i++) {
    // выполнится 5 раз
}

// && — это логическое И, || — это логическое ИЛИ
if (house.size == "big" && house.color == "blue") {
    house.contains = "bear";
}
if (color == "red" || color == "blue") {
    // цвет красный или синий
}

// && и || используют сокращённое вычисление, что полезно
// для задания значений по умолчанию.
var name = otherName || "default";

// Оператор switch выполняет проверку на равенство при помощи ===
// используйте break, чтобы прервать выполнение после каждого case, 
// или выполнение пойдёт далее даже после правильного варианта. 
grade = 4;
switch (grade) {
  case 5:
    console.log("Отлично");
    break;
  case 4:
    console.log("Хорошо");
    break;
  case 3:
    console.log("Можете и лучше");
    break;
  default:
    console.log("Ой-вей!");
    break;
}


///////////////////////////////////
// 4. Функции, Область видимости и Замыкания

// Функции в  JavaScript объявляются при помощи ключевого слова function.
function myFunction(thing) {
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// Обратите внимание, что значение, которое будет возвращено, должно начинаться
// на той же строке, что и ключевое слово return, в противном случае вы будете
// всегда возвращать undefined по причине автоматической вставки точки с запятой.
// Следите за этим при использовании стиля форматирования Allman.
function myFunction()
{
    return // <- здесь точка с запятой вставится автоматически
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// В JavaScript функции — это объекты первого класса, поэтому они могут быть
// присвоены различным именам переменных и передаваться другим функциям 
// в качестве аргументов, например, когда назначается обработчик события:
function myFunction() {
    // этот код будет вызван через 5 секунд
}
setTimeout(myFunction, 5000);
// Примечание: setTimeout не является частью языка, но реализован в браузерах и Node.js

// Функции не обязательно должны иметь имя при объявлении — вы можете написать
// анонимное определение функции непосредственно в аргументе другой функции.
setTimeout(function() {
    // этот код будет вызван через 5 секунд
}, 5000);

// В JavaScript есть область видимости; функции имеют свою область
// видимости, а другие блоки — нет.
if (true) {
    var i = 5;
}
i; // = 5, а не undefined, как ожидалось бы в языках с блочной областью видимости

// Это привело к общепринятому шаблону "самозапускающихся анонимных функций",
// которые препятствуют проникновению переменных в глобальную область видимости
(function() {
    var temporary = 5;
    // Мы можем получить доступ к глобальной области для записи в «глобальный объект»,
    // который в веб-браузере всегда window. Глобальный объект может иметь другое
    // имя в таких платформах, как Node.js
    window.permanent = 10;
})();
temporary; // вызовет сообщение об ошибке с типом ReferenceError
permanent; // = 10

// Одной из самых мощных возможностей JavaScript являются замыкания. Если функция
// определена внутри другой функции, то внутренняя функция имеет доступ к 
// переменным внешней функции даже после того, как контекст выполнения выйдет из
// внешней функции.
function sayHelloInFiveSeconds(name) {
    var prompt = "Привет, " + name + "!";
    // Внутренние функции по умолчанию помещаются в локальную область видимости,
    // как если бы они были объявлены с помощью var.
    function inner() {
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout асинхронна, поэтому функция sayHelloInFiveSeconds сразу выйдет,
    // после чего setTimeout вызовет функцию inner. Однако поскольку функция inner
    // «замкнута» вокруг sayHelloInFiveSeconds, она по-прежнему имеет доступ к переменной prompt
    // на то время, когда она наконец будет вызвана.
}
sayHelloInFiveSeconds("Адам"); // Через 5 с откроется окно «Привет, Адам!»

///////////////////////////////////
// 5. Подробнее об объектах; Конструкторы и Прототипы

// Объекты могут содержать в себе функции.
var myObj = {
    myFunc: function() {
        return "Привет, мир!";
    }
};
myObj.myFunc(); // = "Привет, мир!"

// Когда вызываются функции, прикреплённые к объекту, они могут получить доступ
// к этому объекту с помощью ключевого слова this.
myObj = {
    myString: "Привет, мир!",
    myFunc: function() {
        return this.myString;
    }
};
myObj.myFunc(); // = "Привет, мир!"

// Значение this зависит от того, как функция вызывается, 
// а не от того, где она определена. Таким образом, наша функция не работает, 
// если она вызывается не в контексте объекта.
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// И наоборот, функция может быть присвоена объекту и получать доступ к нему
// через this, даже если она не была прикреплена к нему при объявлении.
var myOtherFunc = function() {
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "ПРИВЕТ, МИР!"

// Мы можем также указать контекст для выполнения функции при её вызове,
// используя call или apply.
var anotherFunc = function(s) {
    return this.myString + s;
}
anotherFunc.call(myObj, " И привет, Луна!"); // = "Привет, мир! И привет, Луна!"

// Функция apply почти такая же, но принимает в качестве списка аргументов массив.
anotherFunc.apply(myObj, [" И привет, Солнце!"]); // = "Привет, мир! И привет, Солнце!"

// Это полезно при работе с функцией, которая принимает последовательность
// аргументов, а вы хотите передать массив.
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (Ой-ой!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// Но call и apply — только временные. Когда мы хотим связать функцию с объектом, 
// мы можем использовать bind.
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" И привет, Сатурн!"); // = "Привет, мир! И привет, Сатурн!"

// Bind также может использоваться для частичного применения (каррирования) функции
var product = function(a, b) { return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// Когда вы вызываете функцию с помощью ключевого слова new, создается новый объект,
// доступный функции при помощи this. Такие функции называют конструкторами.
var MyConstructor = function() {
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// У каждого объекта в JavaScript есть прототип. Когда вы хотите получить
// доступ к свойству объекта, которое не существует в этом объекте, интерпретатор
// будет искать это свойство в прототипе.

// Некоторые реализации языка позволяют получить доступ к прототипу объекта
// через «магическое» свойство __proto__. Несмотря на то, что это может быть полезно
// для понимания прототипов, это не часть стандарта; мы увидим стандартные способы
// использования прототипов позже.
var myObj = {
    myString: "Привет, мир!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function() {
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// Для функций это тоже работает.
myObj.myFunc(); // = "Привет, мир!"

// Если интерпретатор не найдёт свойство в прототипе, то продожит поиск
// в прототипе прототипа и так далее.
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// Здесь не участвует копирование; каждый объект хранит ссылку на свой прототип.
// Это означает, что мы можем изменить прототип, и наши изменения будут отражены везде.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

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

// Первый способ — это Object.create, который появился в JavaScript недавно,
// а потому доступен ещё не во всех реализациях языка.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// Второй способ, который работает везде, имеет дело с конструкторами.
// У конструкторов есть свойство с именем prototype. Это *не* прототип
// функции-конструктора; напротив, это прототип для новых объектов, которые
// будут созданы с помощью этого конструктора и ключевого слова new.
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function() {
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// У встроенных типов, таких, как строки и числа, также есть конструкторы, которые
// создают эквивалентные объекты-обёртки.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// За исключением того, что они не в точности равны.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0) {
    // Этот код не выполнится, потому что 0 - это ложь.
}

// Впрочем, объекты-обёртки и встроенные типы имеют общие прототипы,
// поэтому вы можете расширить функционал строк, например:
String.prototype.firstCharacter = function() {
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

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

// Например, мы упомянули, что Object.create доступен не во всех реализациях, но
// мы сможем использовать его с помощью такого полифила:
if (Object.create === undefined) { // не перезаписываем метод, если он существует
    Object.create = function(proto) {
        // создаём временный конструктор с правильным прототипом
        var Constructor = function(){};
        Constructor.prototype = proto;
        // затем используем его для создания нового,
        // правильно прототипированного объекта
        return new Constructor();
    }
}

Сообщение JavaScript для разработчиков Qlik Sense за 10 минут появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.