Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


JavaScript ES5

ECMAScript 2009, также известный как ES5, был первой крупной версией JavaScript.

В этой главе описываются наиболее важные функции ES5.

Особенности ES5


Поддержка браузера

ES5полностью поддерживается во всех современных браузерах:

Chrome IE Edge Firefox Safari Opera
Yes 9.0 Yes Yes Yes Yes

Директива «использовать строгую»

"use strict"определяет, что код JavaScript должен выполняться в «строгом режиме».

В строгом режиме вы можете, например, не использовать необъявленные переменные.

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

"use strict"это просто строковое выражение. Старые браузеры не будут выдавать ошибку, если они ее не понимают.

Подробнее читайте в JS Strict Mode .


Доступ к свойствам строк

Метод charAt()возвращает символ по указанному индексу (позиции) в строке:

Пример

var str = "HELLO WORLD";
str.charAt(0);            // returns H

ES5 разрешает доступ к свойствам строк:

Пример

var str = "HELLO WORLD";
str[0];                   // returns H

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

Подробнее читайте в статье Строковые методы JS .


Строки в нескольких строках

ES5 позволяет использовать строковые литералы в нескольких строках, если они экранированы обратной косой чертой:

Пример

"Hello \
Dolly!";

Метод \ может не иметь универсальной поддержки.
Старые браузеры могут по-разному обрабатывать пробелы вокруг обратной косой черты.
Некоторые старые браузеры не допускают пробелов после символа \.

Более безопасный способ разбить строковый литерал — использовать сложение строк:

Пример

"Hello " +
"Dolly!";

Зарезервированные слова в качестве имен свойств

ES5 позволяет использовать зарезервированные слова в качестве имен свойств:

Пример объекта

var obj = {name: "John", new: "yes"}

Обрезка строки ()

Метод trim()удаляет пробелы с обеих сторон строки.

Пример

var str = "       Hello World!        ";
alert(str.trim());

Подробнее читайте в статье Строковые методы JS .



Массив.isArray()

Метод isArray()проверяет, является ли объект массивом.

Пример

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Подробнее читайте в JS-массивах .


Массив для каждого()

Метод forEach()вызывает функцию один раз для каждого элемента массива.

Пример

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

Узнайте больше в JS Методы итерации массива .


Карта массива()

В этом примере каждое значение массива умножается на 2:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

Узнайте больше в JS Методы итерации массива .


Фильтр массива()

В этом примере создается новый массив из элементов со значением больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

Узнайте больше в JS Методы итерации массива .


Уменьшить массив ()

Этот пример находит сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

Узнайте больше в JS Методы итерации массива .


Массив уменьшитьПраво()

Этот пример также находит сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

Узнайте больше в JS Методы итерации массива .


Массив каждый()

В этом примере проверяется, все ли значения больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

Узнайте больше в JS Методы итерации массива .


Массив несколько()

В этом примере проверяется, превышают ли некоторые значения 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

Узнайте больше в JS Методы итерации массива .


Индекс массива ()

Ищет в массиве значение элемента и возвращает его позицию.

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Узнайте больше в JS Методы итерации массива .


Массив lastIndexOf()

lastIndexOf()то же, что и indexOf(), но ищет с конца массива.

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Узнайте больше в JS Методы итерации массива .


JSON.parse()

Обычно JSON используется для получения данных с веб-сервера.

Представьте, что вы получили эту текстовую строку с веб-сервера:

'{"name":"John", "age":30, "city":"New York"}'

Функция JavaScript JSON.parse()используется для преобразования текста в объект JavaScript:

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Подробнее читайте в нашем Учебнике по JSON .


JSON.stringify()

Обычно JSON используется для отправки данных на веб-сервер.

При отправке данных на веб-сервер данные должны быть строкой.

Представьте, что у нас есть этот объект в JavaScript:

var obj = {name:"John", age:30, city:"New York"};

Используйте функцию JavaScript, JSON.stringify()чтобы преобразовать его в строку.

var myJSON = JSON.stringify(obj);

Результатом будет строка, следующая за нотацией JSON.

myJSON теперь представляет собой строку и готов к отправке на сервер:

Пример

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Подробнее читайте в нашем Учебнике по JSON .


Дата.сейчас()

Date.now() returns the number of milliseconds since zero date (January 1. 1970 00:00:00 UTC).

Example

var timInMSs = Date.now();

Date.now() returns the same as getTime() performed on a Date object.

Learn more in JS Dates.


Date toISOString()

The toISOString() method converts a Date object to a string, using the ISO standard format:

Example

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

Date toJSON()

toJSON() converts a Date object into a string, formatted as a JSON date.

JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:

Example

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

Property Getters and Setters

ES5 lets you define object methods with a syntax that looks like getting or setting a property.

This example creates a getter for a property called fullName:

Example

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

This example creates a setter and a getter for the language property:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

This example uses a setter to secure upper case updates of language:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Learn more about Gettes and Setters in JS Object Accessors


Object.defineProperty()

Object.defineProperty() is a new Object method in ES5.

It lets you define an object property and/or change a property's value and/or metadata.

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Next example is the same code, except it hides the language property from enumeration:

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

This example creates a setter and a getter to secure upper case updates of language:

Example

/// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;

E5 Object Methods

ES5 added a lot of new Object Methods to JavaScript:

Managing Objects

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Protecting Objects

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Learn more in Object ECMAScript5.


Trailing Commas

ES5 allows trailing commas in object and array definitions:

Object Example

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

Array Example

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

WARNING !!!

JSON does not allow trailing commas.

JSON Objects:

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON Arrays:

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]