Урок № 3 JavaScript типы данных
«JavaScript типы данных» – третий урок учебника JavaScript. В этом уроке мы поговорим об использовании различных типов данных в JavaScript.
Как и в любом другом языке программирования типы данных в JS делятся на:
- литералы и переменные
- массивы, функции и объекты
В этом уроке мы рассмотрим использование литералов и переменных. Работа с другими типами данных в JavaScript , такими как массивы, функции и объекты будет рассмотрена в соответствующих разделах учебника.
Литералы:
Литералами называются самые примитивные единицы в любом языке программирования, такие как числа и символы. В JavaScript литералы делятся на числовые и строковые:
Числовые литералы |
Строковые литералы |
4 |
'w' |
2.14 |
"Портал" |
4.5e+2 |
"Типы данных в JavaScript" |
Использовать литералы в коде JS можно для операций присваивания и сравнения: b = 6; var pi = 'число ПИ'; if(q == 'b') q = b + 1; Переменные:
Ну и какой же язык программирования без переменных. Вообще переменные смело можно назвать основой любого языка программирования. Практически ни одна функция, ни один цикл или оператор не может быть выполнен без использования переменных.
JavaScript позволяет присвоить этому типу данных не только значения литералов, но также присвоить весь массив целиком, всю функцию или название объекта.
Задавать переменные можно как просто так в любом месте программы, так и при помощи оператора var: i = 7; var i = 7; id = window.close(); var arr = new Array(); ob = document.forms;
И что самое замечательное в использовании переменных в JS, так это то, что интерпретатор языка сам определяет необходимый тип для переменных, но необходимо внимательно следить над действиями над переменными во избежания ошибок.
Например, сложение строки и числа хотя и не вызовет ошибки (обработчик самостоятельно попытается преобразовать строку в число и провести сложение) но может привести к не самым хорошим результатам.
Вот мы и разобрались с использованием различных типов данных в JavaScript. Этот урок можно уверенно считать отправной точкой в мир великого и ужасного JAVASCRIPT.
В следующем уроке в самый раз будет разобраться с использованием массивов JavaScript.
Урок № 4 JavaScript массивы
«JavaScript массивы» – четвертый урок учебника JavaScript. И в этом уроке мы будем работать с массивами.
Использование массивов позволяет хранить множество данных внутри одного элемента, сортировать их и выводить по заданному алгоритму.
Массивы в JavaScript
В языке JavaScript существуют два основных вида массивов: встроенные в интерпретатор (document.forms[], document.images[],...) определяемые пользователем
Создается массив при помощи конструкции new Array(); a = new Array(); b = new Array(15); c = new Array(15,33,"значение 3");
В первом случае переменной a присваивается пустой массив, во втором переменной b присваивается массив, первым значением которого является число 15 и наконец, в третьем случае переменной c присваивается массив из 3х значений, третье из которых является строковым литералом.
Для обработки массивов в JS существует несколько основных методов: join(); reverse(); sort();
Метод join()
Этот метод работы с JavaScript массивами позволяет объединить массив данных в одну строку, где в качестве параметра методу передается символ, который будет вставлен в строку между соседними элементами бывшего массива. Может показаться несколько запутанным, но на практике ничего сложного, как всегда нет:
Создадим массив, состоящий из нескольких элементов:
ex1 = new Array(8,985,156,44,31);
А теперь применим к нему метод join():
str = ex1.join(" – "); Это важно !!! Вот и пришел тот момент, когда Вы можете увидеть своими глазами, как я ее назвал, не совсем привычную грамматику языка JavaScript. Постараюсь объяснить максимально подробно.
Как уже говорилось в одном из первых уроков нашего учебника, весь JS построен на объектной модели представления документа (DOM). Похожа эта модель, если говорить максимально упрощенно на матрешку. Существует самый старший объект (window), который содержит в себе все остальные объекты, многие из которых содержат в себе другие объекты и методы работы с ними. Здесь, думаю, никаких вопросов возникнуть не должно.
Опять же повторюсь, не буду ничего усложнять стараясь объяснить все максимально просто.
Для того, чтобы добраться до произвольного объекта на странице нам необходимо спуститься от самой старшей матрешки до необходимой нам, попутно вводя имена каждой из них через точку, как Вы можете видеть ниже:
window.document.images[0];
Имена всех основных объектов и семейств объектов зарезервированы по умолчанию и поэтому их нужно просто ЗНАТЬ!
В примере выше мы вызываем нулевой элемент массива, содержащего все картинки на странице, принадлежащий объекту document, содержащий все имеющиеся элементы на странице, в свою очередь, принадлежащий самому старшему элементу window. Под нулевым элементом массива, содержащего картинки понимается та картинка, которая встречается в HTML коде выше всего.
Также у каждого объекта существуют методы работы с ним. Для вызова метода нам необходимо вызвать название метода, присоединив его точкой в самый конец строки:
window.document.images[0].src = 'адрес изображения';
В примере выше мы вызываем метод работы с изображениями src, который позволяет работать с адресом расположения изображения.
Для начала может казаться непонятным, но не отчаивайтесь, со временем все встанет на свои места.
Итак, мы немного отвлеклись от нашего основного примера:
str = ex1.join(" – ");
Здесь все тоже самое с одним небольшим отличием. Обращаться к заданным переменным мы можем напрямую в обход объектной модели DOM. А происходит в нашем примере следующее:
У нас уже существует переменная ex1, содержащая массив состоящий из 5 чисел. Мы вызываем метод работы с массивами join(), присоединив его к нашей переменной точкой (как бы объясняем интерпретатору JS, что метод должен быть применен именно к этой переменной).
В качестве параметра мы передаем методу join() символ " – ", который будет вставлен между соседними значениями массива. Далее мы записываем результат работы метода в переменную str. Теперь она содержит строку 8 – 985 – 156 – 44 – 31. Метод reverse()
Этот метод позволяет перевернуть массив в JavaScript «вверх ногами».
Создаем простенький массив:
Arr = new Array(1,2,3,4,5);
И перевернем его:
Arr.reverse();
Теперь все значения внутри нашего массива расположены наоборот! Метод sort()
Этот метод позволяет отсортировать элементы внутри массива по некоторым правилам. Этот метод таит в себе мощнейший функционал по анализу, обработке и сортировке массивов. Метод sort() несколько сложнее представленных выше, но и с ним мы сможем справиться.
Для начала должен сказать, что метод sort(), получая от функции обработки значение "1" сдвигает элемент на одну позицию вперед, получая "0" не изменяет позицию элемента в массиве и получая " – 1" сдвигает элемент на одну позицию назад.
Напишем небольшую функцию – обработчик:
function obr(a,b) { if(a > b) return 1; if(a==b) return 0; if(a < b) return – 1; }
Эта функция будет брать одновременно 2 элемента и сравнивать их. В зависимости от результатов сравнения она будет возвращать определенный параметр.
Теперь создадим массив:
Arr2 = new Array(2,6,8,9,3,5,1,3);
и применим к нему метод sort() :
b = Arr2.sort(obr);
Вот и все! Наш массив был отсортирован в порядке возрастания.
Должен признать, что урок получился очень напряженным и возможно некоторые вещи остались для Вас не совсем понятными. Но даже если это так, ничего страшного в этом нет. Впереди Вас ждет еще много уроков, содержащих наглядные примеры, которые помогут Вам лучше понять этот язык программирования.
Следующий урок будет одним из наиболее важных уроков всего учебника. Урок будет очень большой и по этой причине он разбит на несколько глав, которые позволят Вам проходить его постепенно. Речь в нем пойдет о наиболее важных операторах языка JavaScript и методах работы с ними.
|