JavaScript для продвинутых методическое пособие Минск 2016


Глава I. JavaScript 1. Базовый синтаксис



страница2/5
Дата09.11.2016
Размер4.67 Mb.
Просмотров1222
Скачиваний0
1   2   3   4   5

Глава I. JavaScript

1. Базовый синтаксис


JavaScript подключается к HTML-странице и выполняет код на стороне клиента (браузера).

2 способа подключения JavaScript к странице HTML:







JavaScript-среды поддерживают две версии языка: строгий режим и не строгий режим.

Строгий режим включается в программе путем добавления в начале кода строковой константы:



Включение строгого режима. Листинг 1.1

“use strict”

Кроме того строгий режим может быть включен в функцию:

Включение строгого режима в тело функции. Листинг 1.2

function f(a){

“use strict”;

}


Необходимо придерживаться либо только строгого режима, либо только не строгого режима. Т.к. смешивание режимов может привести к конфликтам.

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



Размещение всего кода в функции. Листинг 1.3

(function(){

“use strict”;

function f(a){

“use strict”;

}

})()


1.1 Тип данных

JavaScript работает со следующими типами данных: null, undefined, String, Number, Boolean, Object, Array, Date, ReqExp, Error, Function.

Все типы данных, кроме null и undefined, имеют свои классы-конструкторы. Это специальные встроенные функции, которые вызываются для создания экземпляров своего типа данных.

Узнать, к какому типу данных принадлежит значение переменной a, можно узнать с помощью оператора typeof:



Проверка типа переменной. Листинг 1.4

typeof a;

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

JavaScript автоматически определяет тип данных. Иногда это приводит к непредвиденным последствиям:



Сложение числа с булевым значением. Листинг 1.5

1+true; //2

При сложении строки с числом, JavaScript отдает предпочтение строке:

Сложение числа со строкой. Листинг 1.6

“2”+3; // 23

Для сравнения значений на равенство либо не равенство между собой используются операторы == (двойное равно) или === (тройное равно).

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



Сравнение аргументов двойным равно, которое вернет true. Листинг 1.7

“1.0e0” == { valueOf: function(){return true;} }

Чтобы поведение программы было понятнее при сравнении значений разных типов необходимо использовать явное приведение типов данных и использовать оператор ===.

Переменная, значением которой окажется null, не вызывает сбоя при арифметическом вычислении, она будет преобразована в 0.

Неопределенная переменная преобразуется в специальное значение с плавающей точкой NaN. Причем, NaN рассматривается как неравное самому себе.


Проверка значения на равенство NaN не работает. Листинг 1.8

var x = NaN

x === NaN; //false



Протестировать переменную на значение NaN можно путем проверки ее на неравенство самой себе:

Тестирование переменной на значение NaN. Листинг 1.9

var x = NaN

x !== x; // true



Можно создать специальную функцию:

Функция тестирования переменной на значение NaN. Листинг 1.10

function isNaN(x){

return x !== x;

}


Еще одна разновидность приведения типов данных называется истинностью. Операторы if, ||, && работают с булевыми значениями, но на самом деле принимают любые. Большинство значений JavaScript являются истинными, т.е. неявным образом приводятся к true. Существует лишь 7 ложных значений:

  • false, 0, -0, “”, NaN и undefined

Все остальные значения истинны.

1.2 Автоматическая вставка точек с запятой

В JavaScript в конце каждой конструкции точка с запятой ставится автоматически. Отсутствие точек с запятой дает более лаконичный и понятный код. Пропускать точки с запятой можно только в конце строки. Рассмотрим пример:



Правильная и неправильная функция. Листинг 1.11

function area(r){r=+r; return Math.PI*r} //правильная функция
function area(r){

r=+r;


return Math.PI*r

} //правильная функция


function area(r){r=+r return Math.PI*r} //неправильная функция

Первое правило вставки точек с запятой гласит:

  • Точки с запятой ставятся только перед лексемой } после одного или нескольких разделителей строк или вконце входных данных программы. Иными словами пропускать точки с запятой можно только вконце строки, блока или программы.

Второе правило вставки точек с запятой гласит:

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

Можно взять себе за общее правило всегда предворять дополнительной точкой с запятой инструкции, начинающиеся символом (,[+-/

1.3 Область видимости переменных

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

Дэвид Херман “Сила JavaScript”.

Переменная JavaScript может быть как локальной области видимости, так и глобальной. Глобальными переменными пользуются только разработчики библиотек JS. Поэтому, если вы не разрабатываете свою JS-библиотеку, всегда используйте переменные локальной области видимости, добавляя перед именем переменной ключевое слово var.



Объявление переменных. Листинг 1.12

a = ‘string’ // глобальной видимости

var b = ‘string’ // локальной видимости



1.4 Особенности работы с числами и строками

Все числа в JavaScript являются числами с плавающей точкой двойной точности.

Целые числа являются не отдельным типом данных, а поднабором чисел с двойной точностью.

При работе с JavaScript необходимо помнить, что он чувствителен к регистру.



1.5 Переменные и литералы

Для работы с полученными результатами и их хранения используются переменные. У каждой переменной должно быть имя (идентификатор). Фактически, это адресация к памяти, в которой эти значения и хранятся.

В качестве имен переменной категорически запрещается использовать ключевые и зарезервированные слова.

Для формирования имен можно использовать в любом количестве:



  • a – z, A – Z (латинские буквы в любом регистре)

  • 0 – 9 (арабские цифры)

  • _ (символ подчеркивания)

  • $ (знак доллара)

Имя переменной не может начинаться с цифры.

Если для создания переменой использовать инициализатор var, то переменная объявляется локальной.



Объявление переменной. Листинг 1.13

var a = ‘string’;

Значение переменных часто называют литералы. Литерал относится к одному из заранее определенных типов данных.

1.6 Инструкции

Инструкция – выражение, в результате которого должны выполниться действия (например, объявление или инициализация переменной и т.д.).

Каждая простая инструкция заканчивается “;”. Если этого не делать, браузер проставляет их за нас. Ориентируется он в этом случае на переносы строки.

Несколько выражений могут составлять блок инструкций:



Блок инструкций. Листинг 1.14

{

x = Math.PI;

y = Math.cos(x);

}


Инструкции var и function являются инструкциями объявления. Инструкция var объявляет переменную.

Инструкция var. Листинг 1.15

var a = ‘string’;

Инструкция function объявляет функцию.

Инструкция функции. Листинг 1.16

function myFunc(){

//-- тело функции

}


Составные инструкции заранее определены в языке и имеют свой синтаксис:

  • Условные инструкции (if / else if / else)

  • Инструкция переключения (switch / case / default)

  • Инструкции цикла (while, do / while, for, for in)

  • Инструкция перехвата и обработки исключения (try / catch / finally)

Инструкция if / else if / else. Листинг 1.17

if(n==1){

// выполнить первый блок

}

elseif(n==2){



// выполнить второй блок

}

else{



// выполнить блок по умолчанию.

}


Если условная инструкция if/else принимает более одного параметра, то предпочтительнее использовать инструкцию switch. Рассмотрим инструкцию switch:

Инструкция switch. Листинг 1.18

switch(n){

case 1:


//выполнить первый блок, если n == 1

break;


case 2:

//выполнить второй блок, если n == 2

break;

default:


//выполнить блок по умолчанию.

}


Рассмотрим инструкции циклов:

Инструкция while. Листинг 1.19

var count = 0;

while(count<10){

console.log(count);

count++;


}

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

Инструкция do/while. Листинг 1.20

do {

// что-то сделать

}while(++i


Инструкция for часто оказывается более наглядной инструкцией цилка. Инициализация, проверка и инкремент (наращивание переменной) – это три операции, выполняемыe с переменной цикла.

Инструкция for. Листинг 1.21

for(var count=0; count<10; count++){

console.log(count);

}


Инструкция for/in использует ключевое слово for, но она в корне отличается от инструкции for. For/in имеет следующий синтаксис:

for(переменная in объект).

Инструкция for. Листинг 1.22

for(p in o){

console.log(o[p]);

}


Любая инструкция может быть помечена меткой

Идентификатор: инструкция.

Инструкция break приводит к немедленному выходу из внутреннего цикла или из инструкции switch.

Инструкция continue во многом схожа с инструкцией break, но приводит не к выходу из инструкции, а к новой итерации цикла.

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



return выражение;

Инструкция throw предназначена для перехвата ошибок инструкции try/catch



Инструкция try/catch/fitally. Листинг 1.23

try {

throw "myException"; // возбуждение исключительной ситуации

}

catch (e) {



logMyErrors(e); // вывод ошибок

}finally{

// этот блок выполняется всегда, независимо от наличия либо отстутсвия ошибок.

}


1.7 Тернарный оператор ?:

Инструкция вида if/else может быть представлена в виде так называемого условного или тернарного оператора

проверка_условия ? значение_1 : значение_2.

Например, данная инструкция:



Инструкция if. Листинг 1.24

if (x > y) {

var z = 'x больше y';

} else {

var z = 'x меньше y';

}


Может быть представлена в виде тернарного оператора:

Тернарный оператор. Листинг 1.25

var z = x > y ? 'x больше y' : 'x меньше y';

1.8 Объекты

Любое значение в JavaScript, не являющееся строкой, числом, true, false, null или undefined, является объектом.

Наиболее типичными операциями с объектами является: создание объектов, назначение, получение, удаление, проверка и перечисление свойств. Свойство имеет имя и значение.

Объекты можно создавать тремя способами: с помощью литералов объектов, ключевого слова new и функции Object.create().

1. Создание объектов с помощью литералов объектов:


Литералы объектов. Листинг 1.26

var empty = {};

var point = {x:0, y:1};

var book = {

“title”: “JavaScript”,

author: {

firstname: “David”,

surname: “Flanagan”

}

}



2. Оператор new создает и инициализирует новый объект. За этим оператором должно следовать имя функции. Функция,используемая таким способом, называется конструктором.

Создание объекта с помощью оператора new. Листинг 1.27

var o = new Object();

var a = new Array();

var d = new Date();

var r = new RegExp(‘js’);



Помимо встроенных функций-конструкторов, имеется возможность определять свои конструкторы.

3. Статическая функция Object.create() создает новый объект и использует свой первый аргумент в качестве прототипа этого объекта.



Создание объекта с помощью Object.create. Листинг 1.28

var o = Object.create({x:1, y:2})

Прототипом (prototype) называется родительский объект, ассоциированный с создаваемым объектом. Все объекты, созданные с помощью литерала объектов, имеют один и тот же прототип, на который можно сослаться так:

Object.prototype

Объекты, созданные с помощью ключевого слова new, в качестве прототипа получают прототип функции конструктора: Object.prototype, Array.prototype, Date.prototype, RegExp.prototype.



Наследование осуществляется методом inherit.

Метод inherit. Листинг 1.29

var o = { }

o.x = 1;


var p = inherit(o); // p наследует свойства объектов o

Свойства объекта

Получение свойств объектов. Листинг 1.30

var author = book.author;

var author = book[‘author’];



Если у объекта book не окажется свойства author, данное свойство будет искаться в наследуемых прототипах.

Попытка обращения к несуществующему свойству не является ошибкой, возвращается значение undefined. Однако попытка обращения к свойству несуществующего объекта – это ошибка.

Оператор delete удаляет свойство из объекта:


Удаление свойств объектов. Листинг 1.31

delete book.author

delete book[‘author’]



С помощью оператора in мы можем проверить существование свойства объекта.

Проверка существования свойств. Листинг 1.32

var o = {x:1}

“x” in o // вернет true

“y” in o // вернет false


Проверку можно осуществлять с помощью метода hasOwnProperty:

Метод hasOwnProperty. Листинг 1.33

var o = {x:1}

o.hasOwnProperty(“x”); //вернет true

o.hasOwnProperty(“y”); //вернет false


Существует еще один метод для проверки свойств. Метод propertyIsEnumerable возвращает true только в том случае, если указанное свойство является собственным свойствoм, а не наследуемым.

Перечисление свойств. Для перечисления всех свойств объекта можно воспользоваться функцией for/in:

Перечисление свойств, инструкция цикла for/in. Листинг 1.34

var o = {x:1, y:2, z:3};

for(p in o)

console.log(p);


Сериализация объектов – это процесс преобразования объекта в строку, которая впоследствии может быть использована для восстановления объекта. Для сериализации объекта используется встроенная функция JSON.stringify. Для последующего восстановления – JSON.parse().

Сериализация и восстановление объекта. Листинг 1.35

var o = {x:1, y:2, z:3};

s = JSON.stringify(o) // s = “{x:1, y:2, z:3}”

p = JSON.parse(s); // p – копия объекта o.


1.9 Массивы

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

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


Создание массива с помощью литерала. Листинг 1.36

var empty = [] // пустой массив

var primes = [2,3,4,10] // массив с четырмя элементами

var misc = [

1.1,


true,

“string”,

{x:1, y:2},

[2, {z:3, w:4}] // литералы массивов могут содержать литералы объектов или литералы других массивов.

]


Любой массив имеет свойство length, возвращающее длину (количество элементов) массива. Именно это свойство отличает массивы от обычных объектов JavaScript.

Свойство length. Листинг 1.37

[].length // вернет 0, т.к. массив не имеет элементов.

a =[‘a’, ‘b’, ‘c’];

a.length // вернет 3


Существует два способа для добавления элементов в конец массива

1. Можно воспользоваться методом push.

2. Пустые квадратные скопки с индексом.


Метод push(), добавление элементов в конец массива. Листинг 1.38

a = [];

a.push(‘zero’);

a.push(‘one’, ‘two’)

a[‘one more’] = ‘aa’;

a[a.length] // также вставляет элемент в конец массива


Добавить элементы в начало массива можно с помощью метода shift(). Синтаксис такой же как у push.

Для удаления элементов можно воспользоваться методом delete.



Удаление элемета массива с помощью оператора delete. Листинг 1.39

delete a[1]

Оператор delete удаляет элемент массива, но не изменяет длину length. Поэтому удаление элемента оператором delete похоже на присваивание этому элементу значения undefined.

Также имеется возможность удалять элементы с изменением его длины. Метод pop() (противоположный методу push()) уменьшают длину массива на 1 и возвращают значение удаленного элемента.

Для вставки элемента в начало массива можно воспользоваться методом unshift(). Для удаления элемена в начале массива есть метод shift().

Для обхода по элементам массива наиболее часто используется цикл for.



Обход массива с помощью цикла for. Листинг 1.40

for(var i=0; iif(!a[i]) continue // пропустить несуществующие элементы

// тело цикла

}


JavaScript позволяет имитировать многомерные массивы при помощи массивов из массивов.

Многомерные массивы. Листинг 1.41

var matrix = [
[3, 3, 3],
[1, 5, 1],
[2, 2, 2]
];

Рассмотрим методы массивов:

Метод join() преобразует все элементы в строки, объединяет их и возвращает получившуюся строку.



Метод join(), преобразование массива в строку. Листинг 1.42

var a = [1,2,3];

a.join() // вернет “1,2,3”

a.join(“ ”) // вернет “1 2 3”

a.join(“”) // вернет “123”

var b = new Array(10);

b.join(“-”) // вернет “----------”



Метод reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив.

Метод reverse(), переворачивание массива. Листинг 1.43

var a = [1,2,3];

a.reverse().join() // вернет “3,2,1”, теперь a = [3,2,1]




Метод sort() сортирует элементы в исходном массиве и возвращает отсортированный массив.

Метод concat() добавляет к массиву элементы переданные параметром метода. При этом исходный массив не изменяется.



Метод concat(), добавление элементов. Листинг 1.44

var a = [1,2,3];

a.concat(4,5); // вернет [1,2,3,4,5]




Метод slice() возвращает фрагмент, или подмассив указанного массива.

Метод slice(), фрагмент массива. Листинг 1.45

var a = [1,2,3,4,5]

a.slice(0,3); // вернет [1,2,3]




Метод splice() – универсальный метод, совершающий вставку или удаление элементов массива. В отличии от методов slice() и concat(), данный метод изменяет исходный массив.

Метод splice(). Листинг 1.46

var a = [1,2,3,4,5,6,7,8]

a.splice(4); // вернет [5,6,7,8]. a = [1,2,3,4]



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

Метод forEach(). Листинг 1.47

var a = [1,2,3,4,5,6,7,8]

var sum = 0;

a.forEach(function(value){

sum+=value

});


Метод map() вызывает функцию точно также, как и метод forEach(), однако функция, передаваемая методу map(), должна возвращать значение.

Метод map(). Листинг 1.48

var a = [1,2,3,4,5,6,7,8]

b = a.map(function(x){

return x*x;

});


Метод filter() возвращает отфильтрованный массив.

Метод filter(). Листинг 1.49

var a = [1,2,3,4,5,6,7,8]

smallvalues = a.filter(function(x){

return x<3; // вернет [2,1]

});


Метод every() возвращает true, если функция вернула true для всех элементов массива.

Метод every(). Листинг 1.50

var a = [1,2,3,4,5,6,7,8]

a.every(function(x){

return x<10 // вернет true, т.к. все значения <10

});


Метод some() возвращает true, если функция возвращает true хотя бы для одного элемента массива.

Метод some(). Листинг 1.51

var a = [1,2,3,4,5,6,7,8]

a.some(function(x){

return x%2===0; // вернет true

});


Метод reduce() объединяет элементы массива используя указанную функцию.

Метод reduce(). Листинг 1.52

var a = [1,2,3,4,5,6,7,8]

a.reduce(function(x,y){

return x+y; // сумма значений

});


Метод reduceRight() действует точно также, как и метод reduce(), но обрабатывает массив в обратном порядке, справа налево.

Методы indexOf() и lastIndexOf() отыскивают в массиве элемент с указанным значением и возвращают индекс первого найденного элемента или – 1, если элемент не найден. Метод indexOf() выполняет поиск от начала массива к концу, метод lastIndexOf() – с конца к началу.

Проверить является ли объект массивом можно с помощью метода isArray().


Метод isArray(). Листинг 1.53

Array.isArray([]) // true

Array.isArray({}) // false



Еще один пример, показывающий как JavaScript может работать со строками, как с массивами.

Строки как массивы. Листинг 1.54

s = “JavaScript”;

Array.prototype.join.call(s, “ ”) // вернет J a v a S c r i p t



1.10 Стандартные объекты JavaScript

Array Массив пронумерованных элементов, также может служить стеком или очередью

Boolean Объект для булевых значений

Каталог: media
media -> Литература Ссылка для цитирования
media -> Буланов С. В. Кудрявцева Е. Л. Развитие креативности билингвов: путь от интеркультурности к формированию «человека мира»
media -> Условия и процесс формирования международной конкурентоспособности национальной экономики
media -> Имени М. В. Ломоносова Биологический факультет
media -> Интернет! Актуальность
media -> Образовательная программа «Гражданское население в противодействии распространению идеологии терроризма»
media -> Планета «периодика» Мурзилка
media -> Система рейтинга сайтов


Поделитесь с Вашими друзьями:
1   2   3   4   5


База данных защищена авторским правом ©nethash.ru 2019
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал