Основы JavaScript

Краткое описание особенностей Javascript.

Использован материал из http://anton.shevchuk.name/jquery-book/

Переменные в Javascript

Объявление переменных

Объявляем переменную, используя ключевое слово var.

var name = "Ivan"; 
var age = 32;

Ограничения на имена переменных:
— имя должно состоять только из букв, цифр, и символов $ и _
— первый символ не должен быть цифрой.

Регистр букв имеет значение:

var company = "Facebook"; 
// совсем другая «компания» 
var Company = "Google";

Константы в Javascript

В JavaScript’е нет констант. Но есть договорённость: переменные, набранные в верхнем регистре через подчёркивание, не
изменять.

var USER_STATUS_ACTIVE = 1; 
var USER_STATUS_BANNED = 2;

Константы стоит использовать, чтобы избежать появления «magic numbers». Сравните:

if(satus==2) // о чём тут речь 
if(status==USER_STATUS_BANNED) // уже более информативный

Типы данных

В JavaScript не так уж и много типов данных.

number – целое или дробное число

var answer = 42; 
var pi = 3.1415;

Также существуют следующие специальные значения:
— NaN (not-a-number) – результат числовой операции, которая завершилась ошибкой. Например:

Math.sqrt(-5);

Учтите:

(NaN == NaN) == false;
isNaN(NaN) == true;

Infinity – за гранью 1.7976931348623157E+10308 (т.е. больше)
-Infinity – за гранью -1.7976931348623157E+10308 (т.е. меньше)

string – строка

Строка в Javascript заключается в кавычки — одинарные или двойные:

var str = «Hello World!»;

boolean – булево значение (true или false)

var result = true;

null и undefined

null – специальное значение для определения «пустоты»

var result = null;

undefined – ещё одно специальное значение «неопределенности», используется как значение неопределённой переменной. Например — переменная объявлена и существует, но значение ей ещё не присвоено:

// переменная есть, но нет значения 
var a; 
alert(a); // undefined 
if (typeof a == "undefined") { 
  alert("variable is undefined"); 
} 
// или может совсем не быть переменной 
if (window["a"] == undefined) { 
  alert("variable does not exist"); 
}

Массивы в Javascript

Массив – это коллекция данных с числовыми индексами. Данные могут быть любого типа.

Простой массив со строками:

var users = ["Ivan", "Petr", "Serg"]

Нумерация массивов начинается с «0». Для получения первого элемента вам потребуется следующий код:

alert(users[0]); // выведет Ivan

Размер массива хранится в свойстве length:

alert(users.length); // выведет 3

В действительности length возвращает индекс последнего элемента массива+1:

var a = []; a[4] = 10; alert(a.length); // выведет 5;

Для перебора массива лучше всего использовать цикл for(;;):

for (var i = 0; i < users.length; i++) { 
  alert(users[i]); // последовательно выведет Ivan, Petr и Serg
}

Для работы с концом массива следует использовать методы push() и pop():

users.push("Sidorov"); // добавляем элемент в конец массива 
var sidorov = users.pop(); // удаляем и возращаем последний элемент

Для работы с началом массива следует использовать методы unshift() и shift():

users.unshift("Sidorov"); // добавляем элемент в начало массива
var sidorov = users.shift(); // удаляем и возращаем первый элемент

Методы shift и unshift работают медленно, т.к. перестраивают весь массив.

Функции

С функциями в JavaScript’е всё просто. Вот элементарный пример:

function hello() { 
  alert("Hello world"); 
} 
hello(); // Hello world

Анонимные функции

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

function() { 
  alert("Hello world"); 
}

Так как функция это вполне себе объект, то её можно присвоить переменной, и (или) передать в качестве параметра в другую функцию:

var myAlert = function(name) { 
  alert("Hello " + name); 
} 
function helloMike(myFunc) { // тут функция передаётся как параметр 
  myFunc("Mike"); 
} 
helloMike(myAlert);

Анонимную функцию можно создать и тут же вызвать с необходимыми параметрами:

(function(name) { 
  alert("Hello " + name); 
})("Mike");

Объекты

На объекты в JavaScript возложено две роли:
— хранилище данных
— функционал объекта

Объект как хранилище данных можно описать следующим кодом:

var user = { 
  name: "Ivan", 
  age: 32 
}; 
alert(user.name); // Ivan 
alert(user.age); // 32

Запись выше – это JSON – JavaScript Object Notation.

Для перебора такого хранилища можно использовать цикл for(.. in ..):

for (var prop in user) { 
  alert(prop + "=" + user[prop]); // выведет name=Ivan и age=32
}

Конструкторы в Javascript

Любая функция в Javascript, вызванная с использованием ключевого слова «new», возвращает нам объект, а сама становится конструктором данного объекта:

function User(name) { 
  this.name = name; 
  this.status = USER_STATUS_ACTIVE; 
} 
var me = new User("Anton");

При использовании «new» поведение функции User() слегка изменится, по сравнению с поведением обычной функции:
1. Данная конструкция создаст новый, пустой объект
2. Ключевое слово this получит ссылку на этот объект25
3. Функция выполнится и возможно изменит объект через this (как в примере выше)
4. Функция вернёт this (по умолчанию)

Результатом выполнения кода будет следующий объект:
me = { name: «Anton», status: 1 };

Область видимости и this

В отличии от других языков, JavaScript свойственны следующие нюансы:
— когда вы объявляете переменную или функцию, то она становится частью window:

var a = 1234; 
console.log(window["a"]); // => 1234 
function myLog(message) { 
  console.log(message); 
} 
window["myLog"](a); // => 1234

— когда искомая переменная не найдена в текущей области видимости, то её поиски будут продолжены в области видимости родительской функции:

var a = 1234; 
(function(){ 
  var b = 4321; 
  (function() { 
    var c = 1111; 
    console.log((a+b)/c); // => 5 
  })(); 
})();

— чудо-переменная this всегда указывает на текущий объект, вызывающий функцию (по-умолчанию все переменные и функции попадают в window, то this == window):

var a = 1234; 
function myLog() { 
  console.log(this.a); // => 1234 
}

— контекст this можно изменить используя функции bind, call, и apply. Всё что касается window относится лишь к браузерам.

Замыкания

Приведу пример кода с пояснениями:

var a = 1234; 
var myFunc = function(){ 
  var b = 4321; 
  var c = 1111; 
  return function() { 
    return ((a+b)/c); 
  }; 
}; 
var anotherFunc = myFunc(); 
// myFunc возвращает анонимную функцию 
// с «замкнутыми» значениями c и b 
console.log(anotherFunc()); // => 5

Функция, объявленная внутри другой функции, имеет доступ к
переменным родительской функции.

Рекомендуемые статьи по теме:
— «Функции «изнутри», замыкания»
[http://learn.javascript.ru/closures]
— «Использование замыканий»
[http://learn.javascript.ru/using-closures]
— «Closures: Front to Back»
[http://net.tutsplus.com/tutorials/javascript-ajax/closures-front-to-back/]

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *