Ограничения
§ JavaScript не может закрывать окна и вкладки, которые не были открыты с его помощью
§ Не может защитить исходный код страницы и запретить копирование текста или изображений со страницы
§ Не может осуществлять кроссдоменные запросы, получать доступ к веб-страницам, расположенным на другом домене. Даже когда страницы из разных доменов отображаются в одно и тоже время в разных вкладках браузера, то код JavaScript принадлежащий одному домену не будет иметь доступа к информации о веб-странице из другого домена. Это гарантирует безопасность частной информации, которая может быть известна владельцу домена, страница которого открыта в соседней вкладке
§ Не имеет доступа к файлам, расположенным на компьютере пользователя, и доступа за пределы самой веб-страницы, единственным исключением являются файлы cookie, это небольшие текстовые файлы, которые JavaScript может записывать и считывать
Переменная — это именованная область в памяти, которая хранит в себе данные(значение). К этим данным можно получить доступ, обратившись по имени переменной в которой они хранятся.
создание (объявление) переменной
var имяПеременной;
При создании переменной, перед её именем, ставитсяs ключевое слово var, а в конце имени точка с запятой;. Обычно, все переменные участвующие в скрипте, размещаются в его начале. Создание переменной, также еще называют — объявлением переменной.
Чтобы присвоить переменной значение в JavaScript, нужно использовать операцию присваивания =.
имяПеременной = значение;
Присваивание переменной значения, также еще называют — инициализацией переменной.
Если переменная объявлена, но не инициализирована, то она будет иметь специальное значение undefined, относящееся к отдельному типу.
mess = 'goodbye';
mess = 100500;
Переменной mess присваиваются значения разных типов, что на практике говорит о том, что в js динамическая типизация данных.
2. Типы данных javascript. Включение javascript в документ html. Создание сценариев.
Всего в JavaScript, существует 6 типов данных:
— Число number,
— Строка string,
— Логический (булев) тип данных boolean,
— Отсутствие значения undefined,
— Пустота, ничто null,
— Объект object.
Эти 6 типов данных, делятся на два вида, простые типы данных и составные (объектные) типы данных.
Простые (примитивные) типы данных: number, string, boolean, undefined, null.
Составные (объектные) типы данных: object
Составным типом данных являются: объект, функция, массив.
Прежде чем рассмотреть каждый тип данных, познакомимся сначала с оператором typeof. Данный оператор позволяет узнать, какой тип данных у переменной, делается это так:
var имяПеременной;
имяПеременной = значение;
alert (typeof имяПеременной);
Number — тип данных число. Числа могут быть как целыми так и с плавающей запятой (дробные, вещественные, действительные числа).
String — тип данных строка. Чтобы превратить значение переменной в строку, её нужно обрамить кавычками: дойными «строка» или одинарными ‘строка’.
Boolean — логический (булев) тип данных, он может иметь только одно их двух значений: true (правда) или false (ложь). Значения true или false обычно появляются в операциях сравнения или логических операциях.
Undefined — тип данных который имеет всего одно значение undefined. Этот тип данных появляется тогда, когда переменная объявлена, но не инициализирована, т.е. когда у переменной (свойства объекта или элемента массива) отсутствует значение.
Null — это специальный тип данных обозначающий пустоту (ничего). Null — это специальный пустой объект. Можно стереть содержимое переменной (не удаляя переменную), присваивая ей значение null.
Наш сценарий, как и большинство других программ JavaScript, начнем с дескриптора <SCRIPT>.
Можно подключить Javascript в отдельном файле с расширением js. B этом случае скрипт объявляется в HTML-коде с помощью тега <script> с атрибутом src, в котором прописывается путь к файлу. Например
<script type="text/javascript" src="/jspr/pr.js"></script> Это будет внешний сценарий.
JavaScript код можно вставить непосредственно внутри элемента <script>. Сценарий, расположенный непосредственно внутри элемента, называется встроенным. Элемент <script> может быть расположен в любом месте внутри элемента <head> и/или внутри элемента <body> и использоваться любое количество раз.
<script type="text/javascript"></script>
3. Массивы. Виды массивов. Способы задания массивов и наполнение их значениями
Массив - это упорядоченная коллекция значений. Значения в массиве называются элементами, и каждый элемент характеризуется числовой позицией в массиве, которая называется индексом. Массивы в языке JavaScript являются нетипизированными: элементы массива могут иметь любой тип, причем разные элементы одного и того же массива могут иметь разные типы. Элементы массива могут даже быть объектами или другими массивами, что позволяет создавать сложные структуры данных, такие как массивы объектов и массивы массивов.
Отсчет индексов массивов в языке JavaScript начинается с нуля - первый элемент массива имеет индекс 0. Массивы в JavaScript являются динамическими: они могут увеличиваться и уменьшаться в размерах по мере необходимости; нет необходимости объявлять фиксированные размеры массивов при их создании или повторно распределять память при изменении их размеров. Массивы в JavaScript –это специализированная форма объектов.
Массивы могут быть одномерными и многомерными. Каждый элемент в многомерном массиве может представлять собой отдельный массив.
var numbers1 = [0, 1, 2, 3, 4, 5 ]; // одномерный массив
var numbers2 = [[0, 1, 2], [3, 4, 5] ]; // двумерный массив
Массив можно создать двумя способами:
первый способ: создать массив с помощью литерала массива - квадратные скобки, внутри которых расположен список элементов, разделенных запятыми.
var empty = []; //пустой массив
var numbers = [4, 1, 2, 5]; //массив с 5 числовыми элементами
var diff = [1.5, false, "текст"]; //массив с 3 элементами различного типа
второй способ создания массива - вызов конструктора Array(). Вызвать конструктор Array() можно тремя способами.
Вызов конструктора без аргументов: var b = new Array();
В этом случае создается пустой массив, эквивалентный пустому литералу [].
В конструкторе явно указываются значения n элементов массива: var b = new Array(1, 3, 5, 8, "строка", true);
В этом случае конструктор получает список аргументов, которые становятся элементами нового массива. Аргументы записываются в массив в том порядке, в котором указаны.
Выделение места для последующего присваивания значений. Это делается путем указания при определении массива одного числа в круглых скобках: var b = new Array(5);
Этот способ определения массива предполагает выделение массиву определенного количества элементов (каждый из которых имеет значение undefined), с возможностью последующего присваивания значений по ходу сценария. Такая форма обычно используется для предварительного размещения массива, если его длина известна заранее.
4.Объект Array и его встроенные методы и свойства
Свойства объекта Array - length, с помощью которого можно установить/узнать количество элементов в массиве.
var array = ["One", "Two", "Three"];
document.write ("Длина массива: " + array.length); // Длина массива: 3
Методы объекта Array:
Метод pop() удаляет последний элемент массива, уменьшает длину массива и возвращает удалённое им значение..
let arr = [1, 2, 3];
let x = arr.pop();
console.log(arr); // [1, 2]
console.log(x); // 3
Метод push() добавляет один или более элементов в конец массива и возвращает новую длину массива.
let nums = [1, 2];
let total = nums.push(3, 4, 5);
console.log(nums); // [1, 2, 3, 4, 5]
console.log(total); // 5
Метод concat() создаёт и возвращает новый массив, содержащий элементы массива, на котором он был вызван, и значения, переданные в качестве аргументов.
Если из переданных аргументов какой-либо аргумент является массивом, то в возвращаемый массив добавляется не сам массив, а его элементы. В новом массиве сначала идут элементы исходного массива, затем значения переданные в качестве аргументов. Значения добавляются в том порядке, в котором они были переданы методу.
let arr = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, [6, 7]];
let arr4 = arr.concat(arr2, arr3);
console.log(arr4); // [1, 2, 3, 4, 5, [6, 7]];
Метод join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку.
Если элемент массива в качестве значения содержит undefined или null, то он преобразуется в пустую строку.
let arr = ['Синий', 'Красный', 'Белый'];
console.log(arr.join()); // 'Синий,Красный,Белый'
console.log(arr.join("-")); // 'Синий-Красный-Белый'
console.log(arr.join("")); // 'СинийКрасныйБелый'
Метод indexOf возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Первый аргумент метода указывает значение элемента, индекс которого нужно найти, второй аргумент (необязательный), указывает индекс с которого будет начинаться поиск. Если одинаковых вхождений несколько, выбирается наименьший (первый) индекс. Если элемент с искомым значением не найден, метод вернет -1. Внутри метода для поиска используется строгое сравнение (===).
var a = [1,2,3,3,4,5,3];
a.indexOf(3); //вернет 2
a.indexOf(3,4); //вернет 6
a.indexOf(35); //вернет -1: нет элемента с таким значением
a.indexOf(2); // 1
Метод lastIndexOf() тоже возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Разница лишь в том, что метод lastIndexOf() выбирает наибольший (последний) индекс.
var a = [1,2,3,3,4,5,2,3];
a.lastIndexOf(3); //вернет 7
a.lastIndexOf(35); //вернет -1: нет элемента с таким значением
a.lastIndexOf(2); // 6
Метод reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив.
Перестановка элементов выполняется непосредственно в исходном массиве. Это означает, что метод reverse() не создаёт новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве.
let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // 5,4,3,2,1
Метод shift() удаляет первый элемент массива, уменьшает индекс всех последующих элементов на единицу, уменьшает длину массива и возвращает удалённое им значение.
let arr = [1, 2, 3];
let x = arr.shift();
console.log(arr); // [2, 3]
console.log(x); // 1
Метод unshift() добавляет один или более элементов в начало массива и возвращает новую длину массива.
Индексы всех элементов, изначально присутствующих в массиве, увеличиваются на единицу (если методу был передан всего один аргумент) или на число, равное количеству переданных аргументов.
let nums = [4, 5];
let total = nums.unshift(1, 2, 3);
console.log(nums); // [1, 2, 3, 4, 5]
console.log(total); // 5
Метод sort() на месте сортирует элементы массива и возвращает отсортированный массив. Если метод sort() вызывается без аргумента, то он сортирует элементы массива в алфавитном порядке (временно преобразует их в строки для выполнения сравнения). В качестве аргумента метод sort() может принимать функцию сравнения, которая определяет порядок сортировки элементов.
var a = ["Киви", "Апельсины", "Груши"];
a.sort();
var s = a.join(", "); //Апельсины, Груши, Киви
document.write(s);
var myArr = [1,2,10];
myArr.sort();
document.write(myArr); //1,10,2
Такая сортировка произошла потому, что метод sort() сортирует элементы, преобразуя их в строки. Поэтому и порядок у них получается строковой - ведь "10" < "2". Для сортировки в каком-либо ином порядке, отличном от алфавитного, можно передать методу sort() в качестве аргумента функцию сравнения.
function foo(a,b) { //определяем функцию проверки
if (a < b) return -1;
if (a > b) return 1;
return 0; //если a == b}
var a = [10, 2, 5, 1];
a.sort(function(a,b) { //используем анонимную функцию
return a - b; //функция возвращает значение < 0, 0, или > 0
});
document.write(a); //1,2,5,10
Метод slice() используется для копирования указанного участка из массива и возвращает новый массив содержащий скопированные элементы. Исходный массив при этом не меняется.
var arr = [1,2,3,4,5];
arr.slice(0,3); //Возвращает [1,2,3]
arr.slice(3); //Возвращает [4,5]
arr.slice(1,-1); //Возвращает [2,3,4]
arr.slice(-3,-2); //Возвращает [3]
Метод splice() - это универсальный метод для работы с массивами. Он изменяет массив на месте, а не возвращает новый измененный массив, как это делают методы slice() и concat(). Метод splice может удалять элементы из массива, вставлять новые элементы, заменять элементы - по очереди и одновременно. Он возвращает массив, состоящий из удаленных элементов, если ни один из элементов не был удален, вернет пустой массив.
var fruits = ["апельсины", "яблоки", "груши", "виноград"];
var deleted = fruits.splice(2,2); //возвращает ["груши", "виноград"]
document.write(deleted);
var arr = [1,2,3,4,5,6,7,8];
arr.splice(4); //Возвращает [5,6,7,8]; массив стал: [1,2,3,4]
arr.splice(1,2); //Возвращает [2,3]; массив стал: [1,4]
arr.splice(1,1); //Возвращает [4]; массив стал: [1]
var fruits = ["апельсины", "яблоки"];
fruits.splice(2,0, "арбузы"); //возвращает []
document.write(fruits); //стало ["апельсины", "яблоки", "арбузы"]
var arr = [1,2,3,4,5];
arr.splice(2,0,'a','b'); //Возвращает []; стало [1,2,'a','b',3,4,5]
arr.splice(2,2,[1,2]); //Возвращает ['a','b']; стало [1,2,[1,2],3,4,5]
Метод filter() выбирает элементы массива по определённому критерию и возвращает их в массиве. В качестве параметра он принимает функцию. Эта функция принимает в качестве параметра элемент массива, который оценивает по какому-то признаку и должна возвращать true, если элемент удовлетворяет этому признаку, и false в противном случае. Например, отберём все чётные элементы массива.
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.filter(function (item) { // [2, 4, 6, 8]
return item % 2 == 0;
Метод forEach() принимает в качестве параметра функцию. Эта функция принимает в качестве параметра функцию, которая будет вызвана для каждого элемента массива. Выведем с помощью это функции элементы массива в столбик на консоль.
var arr = ['one', 'two', 'three', 'four', 'five'];arr.forEach(function (item) {console.log(item);Метод ever y() возвращает true, если все элементы массива удовлетворяют некоторому условию и false в противном случае. Проверим, являются ли все элементы массива чётными.
var arr = [1, 2, 4, 5, 6, 8];arr.every(function (x) { return x < 10}); // вернет true,т.к.все значения меньше 10
Метод map() вызывает функцию также как и метод forEach,но функция передаваемая методу map должна возвращать значение.
var arr = [1, 2, 6, 8, 2, 9];
arr = arr.map(function (item) { return ++item;});
console.log(arr); // [2, 3, 7, 9, 3, 10]
Добавление и удаление элементов массива. Способы вывода элементов массива