9184

Javascript и jQuery. Сходство с другими языками программирования

Контрольная

Информатика, кибернетика и программирование

Javascript и jQuery В последнее время становиться все более и более популярным написание веб-приложений, которые по своей функциональности уже почти не отличаются от прикладных программ. Все веб-приложения состоят из двух главных составных частей: с...

Русский

2013-02-25

49.92 KB

4 чел.

Javascript и jQuery

В последнее время становиться все более и более популярным написание веб-приложений, которые по своей функциональности уже почти не отличаются от прикладных программ. Все веб-приложения состоят из двух главных составных частей: серверной и клиентской. В распоряжении разработчика клиентской или браузерной части имеются следующие технологии, такие как CSS, HTML, Javascript. Но первые две излишне статичны. Поэтому основной груз ложится на Javascript из-за его функциональности и динамичности, потому что только динамика веб-приложений и позволяет называться им «приложениями».

Сходство с другими языками программирования

Так как Javascript имеет большие сходства с C++, то на идентичных моментах языка не стоит заострять внимание. Однако данный скриптовый язык имеет огромное количество своеобразных возможностей и особенностей, которые потребуют детального рассмотрения.

Использование Javascript

Чтобы использовать Javascript на HTML-странице его необходимо подключить. Обычно описание подключения располагается в области объявления и подключения в пределах тега <head></head>.

Пример:

<script type="text/javascript" src="js/jquery.js"></script>

Но также разрешается, но не рекомендуется, описывать подключение в любом месте страницы непосредственно перед использованием. На ряду с этим, имеет место и другой способ, который предусматривает не подключение файла скрипта, а непосредственно описание самого кода на HTML странице в тегах <script></script>.

Типы данных

Как и в языке PHP, в отличие от других языков программирования, как например C или Pascal, в Javascript присутствует автоматическое определения типа переменной, в зависимости от передаваемого значения. Здесь нет необходимости инициализировать переменную, до тех пор, пока не появиться надобность локализовать ее. Однако общепринятым стандартом является объявление каждой переменной, с помощью ключевого слова var.

Пример:

var count = 0;

Javascript распознает следующие типы величин:

  1. Числовые (12, 567, 4.74);
  2. Строковые ("Hello World ", 'Just Another String ');
  3. Логические (true, false);
  4. Специальные ключевые слова (undefined, null);
  5. Объекты;

Примечание: В Javascript строковые константы могут описываться как в двойных (""), так и в одинарных кавычках ('')

Преобразование типов данных

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

Пример:

var x = 10;

//В переменную x будет занесено значение целого типа

var y = "20";

//А в переменную y строкового

alert(x + y);

//Здесь на экран выведется 30

alert(y + x);

//А здесь мы получим строку "2010"

Примечание: Функция alert(информация) выводит на экран пользователя сообщение состоящее из передаваемой информации. По аналогии с языком C++ однострочные комментарии описываются (//), многострочные (/* */)

Наряду с этим, имеют место преобразования, описанные в следующей таблице:

Исходный тип

Логический тип

Числовой тип

Строковый тип

Undefined

false

NaN

"undefined"

Null

false

+0

"null"

Boolean

1 или 0

"true", если аргумент равен true, и "false", если аргумент равен false

Number

false, если аргумент равен +0, -0 или NaN; true в остальных случаях

текстовое представление числа

String

false, если аргумент — пустая строка; true в остальных случаях

число, если аргумент – правильное число; NaN в остальных случая

Object

true

Примечание: Описанное выше возможно благодаря методам Boolean(), Number(), Object() и String(), обеспечивающим явное преобразование типов. +0, -0, NaN – неопределнности, «не правильные числа». Текстовое представление числа подразумевает следующее: если число равно -0 или +0 оно преобразуется – в «0», если NaN – в «NaN», если равно бесконечности – в «Infinity»

Арифметика

Как и во всех языках программирования здесь присутствуют арифметические операции подобно + - * /. Также присутствует набор сложных математических функций, содержащихся во встроенном объекте Math.

Пример:

alert(Math.pow(2, 8));

//выводиться значение равное 256

Логические структуры

Javascript содержит следующие логические структуры: if else if else, switch case default, а также тернарные операции.

Пример:

if(логическое выражение)

{

//Выполняем если выражение верно

}

else

{

//Выполняем если выражение неверно

}

switch(сравниваемое значение)

{

case (искомое значение1):

//Если сравниваемое значение равно искомому

break;

case (искомое значение2):

break;

default:

//Если не подходит не под одно значение

}

(условие ? если истина : если ложь)

//Тернарная операция

Операторы сравнения

Операторы сравнения, как и многие другие базовые элементы языка Javascript хожим с родственными из C++. Отличие составляет наличие не строгого и строгого сравнения. Первое подразумевает под собой преобразование типов, если это потребуется. При использовании второго метода сравнения, строго учитываются типы сравниваемых данных.

Пример

if(x == 0)

//Не строгое сравнение на равенство

if(x === 0)

//Строгое сравнение

Логические операторы

Логические операторы, как правило, используют и возвращают булевы значения. Однако в Javascript операторы && и || возвращают не булево значение, а один из операндов, определивший значение выражения. В таком случае результат может быть и не булевым.

Массивы

В Javascript существует три способа объявления массивов.

Пример:

var array1 = [element1, element2, element3];

var array2 = Array(element1, element2, element3);

/*В первом и втором случае создается массив из трех элементов

Их результат полностью идентичен,

за тем исключением, что второй уже почти не используется*/

var array3 = Array(length);

/*Если length имеет числовое значение,

создается массив длинной length*/

Массив может состоять из элементов разных типов. Также можно добавлять новые объекты массива под любым индексом, даже превосходящим длину.

Пример:

var array1 = [];

//Объявляем пустой массив

array1[0] = 12;

array1[1] = "string";

array1[2] = undefined;

array1[19] = [123, true];

/*Создаем разряженный массив, (элементы идут в произвольном порядке) Также разным элементам массива присваиваем значения разных типов*/

Примечание: Обратите внимание, что в элемент под номером 19 заносится массив, таким образом, осуществляя создание многомерного массива. Обращения к элементам подмассива осуществляется аналогично C++, (array1[19][0])

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

Пример:

var array1 = {};

array1["key1"] = "value1";

array1["key3"] = {"key4": "value2"};

Примечание: Ассоциативный массив создается подобно объекту, поэтому по этому обращаться к его элементам можно также как и к свойствам экземпляров объекта, array1.key3.key4. Наряду с этим возможна конструкция аналогичная массиву с числовыми индексами array[“key1”]

Методы и свойства

Метод

Описание

push

Добавляет элементы в конец массива

join

Соединяет в строку все элементы массива

concat

Объединяет массивы

shift 

Удаляет элемент с индексом 0 и сдвигает остальные элементы на один вниз. Возвращает удаленный элемент

splice

Удаляет элементы массива и заменяет их новыми

pop

Извлекает последний элемент массива

unshift

Добавляет элементы в начало массива

slice

Возвращает часть массива

sort

Сортирует массив

reverse

Меняет порядок элементов на обратный

Пример:

var array1 = ["elem1", "elem2"];

//array1 => ["elem1", "elem2"]

var length = array1.push("elem3");

/*length = 3

array1 => ["elem1", "elem2", "elem3"]*/

var string = array1.join();

//string = "elem1,elem2,elem3"

var array2 = ["elem4", "elem5"];

array1 = array1.concat(array2);

//array1 => ["elem1", "elem2", "elem3", "elem4", "elem5"]

var shifted = array1.shift();

//shifted = "elem1"

var removed = array1.splice(0, 2, "elem6", "elem7");

/*removed = "elem2,elem3"

array1 => ["elem6", "elem7", "elem4", "elem5"]*/

var poped = array1.pop();

/*poped = "elem5"

array1 => ["elem6", "elem7", "elem4"]*/

length = array1.unshift("elem8", "elem9");

//length = 5

var sliced = array1.slice(2, 4);

/*sliced = "elem6,elem7"

array1 => ["elem8", "elem9", "elem6", "elem7", "elem4"]*/

Примечание: Почти все описанные методы изменяют свойство массива length, отвечающее за его длину. Стоит заметить, что длина массива является единственным не псевдосвойством. Также необходимо запомнить, что длина массива определяется не количеством элементов, а суммой индекса последнего элемента + 1

Циклические структуры

Циклические структуры в Javascript организовываются при помощи следующих операторов: for, while, do while.

Пример:

for(var x = 0; x < 10; x++)

{

//Тело цикла

}

var x = 0;

while(x < 10)

{

//Тело цикла

}

var x = 0;

do

{

//Тело цикла

}

while(x < 10);

Примечание: Выше отображены три способа организации цикла. Цикл из примера совершает итерацию 10 раз. Конструкция while и do while имеют лишь одно различие, во втором случае тело цикла выполниться как минимум один раз.

Наряду с вышеописанными конструкциями часто используется одна из разновидностей цикла for. Она нашла применение в основном при работе с любыми массивами, она также незаменима при работе с разряженными массивами.

Пример:

var array1 = [];

array1[0] = 12;

array1[12] = 14;

array1[123] = 123;

for(var i in array1)

{

alert(array1[i]);

}

//Выводятся все элементы массива

Работа со строками

Javascript имеет возможность работы со строками, которые задаются неявно при помощи литералов "" и ''. При создании строковых переменных допускается использования экранирования, то есть написания символов на прямую в строках недоступных, такие как \r\n и т.д. Допускается указание юникодного символа явным образом, указав его код \u1202.

Также имеется возможность создавать новую строковую переменную через объект String. В этом случае такому объекту можно напрямую назначать свойства и методы. В остальном от способа объявления ничего не меняется.

Доступ к символам строки осуществляется подобно элементам массива.

Пример:

var string = "just another example";

for(var i in string)

{

   alert(string[i]);

}

//Будет произведен посимвольный вывод строки на экран

Примечание: Помимо этого допускается обращение к конкретному символу, используя метод charAt(индекс символа), нумерация символов начинается с нуля.

Сравнение строк ничем не отличается от сравнения других типов данных, вес символов зависит от положения в таблице ASCII.

Методы и свойства

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

Метод

Описание

split

Разбивает строку на подстроки

substr

Извлекает подстроку из строки

indexOf

Находит индекс указанного символа в строке

lastIndexOf

Находит индекс последнего появления указанного символа в строке

match

Возвращает массив символов совпадающих с указанным символом

replace

Заменяет символы в строке

search

Проверяет на наличие указанного символа в строке

Примечание: Большинство из описанных методов не имеет смысла использовать без регулярных выражений, так как при помощи регулярных выражений можно достичь много больших результатов

Регулярные выражения

Синтаксис регулярных выражений практически не зависит от языка программирования, то есть он является унифицированным. В Javascript присутствует специальный объект RegExp. Существует две формы создания регулярных выражений: при помощи конструктора, а также литеральный метод.

Пример:

var regString = "a";

var regexp1 = new RegExp(regString, "ig");

//Создаем объект и передаем в него искомую строку

var regexp2 = /a/ig;

/*Создаем аналогичное первому регулярное выражение, но без использования конструктора*/

alert("aAbbccAa".replace(regexp1, "символ"));

alert("aabbccaa".replace(regexp2, "символ"));

//Заменяем все символы "a", без учета регистра, на слово "символ"

Примечание: Самой главной отличительной особенностью является то, что при создании регулярного выражения с помощью конструктора, у нас есть возможность передавать в него значение какой-либо переменной, тем самым обеспечивая параметризацию. В тот же момент необходимо помнить, что специальные символы при объявлении конструктора необходимо экранировать, \\r\\n

Аналогично методу replace, с регулярными выражениями работают все перечисленные выше методы объекта String.

Функции

Javascript имеет возможность создания функций. Как и для переменных в объявлении здесь нет необходимости указывать тип возвращаемых данных, происходит автоматическое преобразование. Ключевое слово function инициирует создание функции.

Пример:

function sum(x, y)

{

return x + y;

}

alert(sum(2, 4));

//Выводиться сообщение содержащее значение 6

Также существуют так называемые Лямбда-функции. Лямбда-функцию нет надобности объявлять. Она существует только на момент ее вызова и до тех пор ее тело исполняется. Это одна из особенностей Javascript.

Пример:

setTimeout(function()

{

alert(1)

}, 1000);

/*Функция setTimeout вызовет информационное сообщение через 1 секунду*/

Классы

Так как Javascript объектно-ориентированный язык программирования, его неотъемлемой частью является написание классов. Описание классов похоже на описание функций, только добавляется описание методов, публичных и приватных переменных;

Пример:

function Class1(param1, param2)

//Объявление класса

{

   this.param1 = param1;

   this.param2 = param2;

//Конструктор, также эти переменные являются публичными

   var param3 = 10;

//Приватная переменная

   this.method = function()

//Объявление метода

   {

       return this.param1 + this.param2;

   }

}

var instance = new Class1(10, 20);

//Создание экземпляра класса

alert(instance.method());

//Метод возвращает результат 30

alert(instance.param3);

/*Выводиться сообщение undefined, так как свойство является приватным*/

Примечание: Наследование в Javascript осуществляется посредством подключения специальных библиотек

jQuery

Существует множество библиотек улучшающих и дополняющих привычный Javascript. Но большинство из них обладает огромным недостатком – своими гигантскими размерами, а при создании веб-приложений, «размер имеет значение».

Библиотека jQuery  в последнее время перестает быть просто библиотекой и постепенно становиться если и не полноценным языком программирования, то значительной надстройкой над Javascript.

jQuery в первую очередь полезен тем, что он имеет доступ ко всей объектной структуре документа, может добавлять и удалять любые элементы непосредственно во время выполнения приложения, также не обладает избыточностью кода, практичен и удобен.

Функция $()

Так как чтобы работать с элементами на странице, необходимо дождаться пока они все будут загружены, на смену стандартному методу Javascript onload, приходит функция jQuery $(document).ready, или ее сокращенная запись $(). Ее преимущество в том, что она не ждет пока на странице загрузится весь контент, картинки, баннеры и прочее.

Пример:

$(function()

{

//Здесь уже может писаться код

});

Примечание: В качестве аргумента в $() передается лямбда-функция, которая и будет выполнять все дальнейшие действия. Далее уже в этой функции можно описывать действия, которые должен выполнять jQuery, а также любые описания Javascript.

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

jQuery-селекторы

$(jQuery-селектор) - одно из важнейших переопределений функции $. Оно позволяет искать на странице элементы объектной модели документа, используя jQuery-селекторы. jQuery-селекторы представляют собой своего рода путь к элементу в иерархии HTML-объектов. Они могут использовать все, начиная от CSS-селекторов до синтаксиса языка XPATH (языка обращения к объектам XML).

Пример:

$(function()

{

   $("div");

//Находим все элементы div

   $("#index");

//Находим все элементы с трибутом id = "index"

   $("div.body");

   //Находим все элементы div с классом = "body"

   $("div > input[foo].text");    

   /*Находим все элементы input, у которых есть атрибут foo, а также класс "text", находящиеся внутри элемента div*/

});

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

Методы для работы с DOM-элементами

Метод

Описание

append(content)/prepend(content)

Добавить переданный элемент или выражение в конец/в начало выбранного элемента.

appendTo(expr)/prependTo(expr)

Добавить выбранный элемент в конец/в начало переданного элемента.

attr(name)

Получить значение атрибута.

attr(params)

Установить значение атрибутов. Атрибуты передаются в виде {ключ1:значение1[, ключ2:значение2[, …]]}

attr(name, value)

Установить значение одного атрибута.

css(name)/css(params)/css(name, value)

Получить/установить значение отдельных параметров CSS. Аналогично функции attr().

text()/text(val)

Получить/задать текст элемента. В случае ввода текста специальные символы HTML заменяются символьными примитивами (entities, например, знак ">" будет заменен &gt;).

empty()

Удалить все подэлементы текущего элемента.

Пример:

$(function()

{

   $("body").append("<div></div>")

       .css("backgroundColor", "black");

//Добавляем в тело HTML-страницы элемент div

   $("<a></a>").appendTo("body div");

//К новому элементу div добавляем элемент a

   $("body div a").attr("href", "http://yandex.ru")

       .css({"textDecoration": "none", "color": "white"})

       .html("Ссылка созданная при помощи jQuery");    

/*Элементу a настравиваем css свойсвтва, заполняем атрибут href и пишим сам текст ссылки*/

});

Примечание: Практически каждый метод jQuery возвращает указатель на объект, который его вызвал, это делает возможным создание цепочек выражений, таких как продемонстрировано в примере

Результат в виде массива

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

Пример:

("p")[0].addClass = "test";

//Первому элементу из коллекции добавляем класс "test"

$("p").each(function()

{

   alert($(this).html());

/*Бежим по всем элементам p

Внутри функции this указывает на текущий DOM-элемент*/

});

Методы анимации

Метод

Описание

show([speed[, callback]])

Показывает элемент

hide([speed[, callback]])

Скрывает элемент

fadeIn(speed[, callback])

Показывает элемент, путем изменения его прозрачности

fadeOut(speed[, callback])

Скрывает элемент, путем изменения его прозрачности

slideDown(speed, callback)

Показывает элемент, спустив его сверху

slideUp(speed, callback)

Показывает элемент, подняв его снизу

Примечание: speed – время в миллисекундах, за которое произойдет определенная анимация, callback – функция, которая вызовется по окончанию анимации. Также все эти методы можно вызывать при помощи метода animate

Пример:

for(var i = 0; i < 10; i++)

{

   $("#div1").hide(300);

   $("#div1").show(300);

   $("#div2").animate({height: "show"}, 300);

   $("#div2").animate({height: "hide"}, 300);

//Получаем плавное мерцание двух элементов div

}

Метод animate позволяет создавать различные эффекты, многие из которых реализованы в различных библиотеках.

События

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

Метод

Описание

click

Одинарный щелчок по элементу

focus

Выделение элемента

blur

Снятие выделения с элемента

keypress

Нажатие клавиши на клавиатуре

load

Загрузка элемента

mousemove

Движение курсора мыши

Пример:

$(function()

{

   $("input").live("keypress", function(e)

   {

       if(e.keyCode == 13)

       {

           alert("Нажата клавиша Enter");

       }    

   });

   $("button").bind("click",  function()

   {

       alert("Нажата кнопка");    

   });    

});

Примечание: Добавление событий к элементам осуществляется посредством двух методов live и bind. Их отличие состоит в том, что первый может привязать событие к еще несуществующему элементу.

В заключении

jQuery развивающаяся в наше время библиотека для работы с элементами DOM-структуры. Она значительно дополняет Javascript и постепенно переходит из простой библиотеки-надстройки в библиотеку-фрейворк. Она может быть расширена и дополнена любыми методами, которые понадобятся программисту при решении каких-либо задач, связанных с разработкой динамических веб-приложений. В данной статье охвачены далеко не все возможности jQuery и Javascript, потому что, во-первых jQuery постоянно развивается и совершенствуется, во-вторых ее возможности действительно огромны.

Полезные ссылки

http://javascript.ru – все о языке в примерах и с описанием

http://jquery.ru – новые версии библиотеки, справочник по API

http://jqueryui.ru – дополнительные библиотеки для работы с визуальным интерфейсом пользователя


 

А также другие работы, которые могут Вас заинтересовать

4404. Агропомышленный комплекс Новосибирской области 92.5 KB
  Введение Новосибирская область: государственно-территориальное образование, входящее в состав Российской Федерации на правах ее равноправного субъекта, расположена в географическом центре страны, в юго-восточной части Западно-Сибирской равнины, глав...
4405. Фанализ - филосовско-аналитическая теория истины 152 KB
  Эта работа была задумана для рассмотрения более объективной оценки окружающего мира. Здесь рассматриваются более двадцати вопросов, наиболее значимых, при объяснении такого подхода поиска истины как Фанализ. Этот взгляд должен дать толчок для самора...
4406. Разработка тягового и топливно-экономического расчета автомобиля 1.09 MB
  В курсе теории автомобиля тяговый и топливно-экономический расчет является одним из важнейших разделов. Этот расчет позволяет по некоторым заданным параметрам определить остальные конструктивные и эксплуатационные параметры...
4407. Адвокат в гражданском процессе 268.5 KB
  Адвокат в гражданском процессе Введение Современный человек постоянно сталкивается с ситуациями, в которых ему необходимо руководствоваться теми или иными правовыми предписаниями, то есть законодательно закрепленными общеобязательными правилами пове...
4408. Административная ответственность за нарушение налогового законодательства 311 KB
  Административная ответственность за нарушение налогового законодательства Введение Процесс формирования норм налогового законодательства выявил особую актуальность установления ответственности за налоговые нарушения. Прямая зависимость государственн...
4409. Адвокатура Украины. Организация современной адвокатуры Украины 63 KB
  Адвокатура Украины. Организация современной адвокатуры Украины. Принципы и гарантии адвокатской деятельности. Согласно Закону адвокатура Украины является добровольным профессиональным общественным объединением, призванным содействовать защите прав, свобо...
4410. Альтернативные источники энергии 62 KB
  Perpetuum-mobile Сенсационное сообщение пришло из Англии. Изобретатель Джон Серл сконструировал летательный аппарат в виде вращающегося диска. Аппарат потребляет энергию только при разгоне, а затем летит сам по себе по классическому варианту вечного...
4411. Расчет четырехтактного бензинового двигателя типа R4 с распределенным впрыском топлива и электронным управлением системой питания и зажигания 3.08 MB
  Введение Поршневые двигатели внутреннего сгорания (ДВС) – самый распространенный тип энергетической установки, на сегодняшний день, используемый на автомобилях, тракторах, тепловозах, на судах и т.п...
4412. Машина Больцмана та мережа INSTAR 446.5 KB
  Машина Больцмана та мережа INSTAR. План: Мета роботи. Теоретичні відомості. Постановка задачі. Алгоритм розв`язку задачі. Виконання роботи. Висновок. Мета: Вивчити принципи функціонування вказаних мереж та навч...