9184

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

Контрольная

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

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

Русский

2013-02-25

49.92 KB

6 чел.

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 – дополнительные библиотеки для работы с визуальным интерфейсом пользователя


 

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

32665. Организационный инструментарий управления проектами: сетевое моделирование, метод PERT, матрица РАЗУ, информационно-технологические модели управления 263 KB
  Организационный инструментарий управления проектами: сетевое моделирование метод PERT матрица РАЗУ информационнотехнологические модели управления Сетевая матрица представляет собой графическое изображение процессов осуществления проекта где все работы управленческие производственные показаны в определенной технологической последовательности и необходимой взаимосвязи и зависимости. Матрица РАЗУ Возможно разделить функции по подразделениям и службам аппарата управления проектом а также обеспечить их комплексную реализацию. Матрица...
32666. Маркетинг проекта. План маркетинга в проекте 37 KB
  Маркетинг проекта В структуре маркетинговых исследований можно выделить 3 принципиальных блока которые в свою очередь также состоят из конкретных работ: Организация исследований: определение целей диапазона и программы маркетинговых исследований; определение методов и средств маркетинговых исследований; сбор и первичная оценка информации; Внешний анализ: анализ структуры целевого рынка; анализ емкости рынка; анализ каналов сбыта; анализ конкуренции; макроэкономический анализ; анализ социальноэкономической среды; Внутренний анализ:...
32667. Принципы и законы управления образовательными системами 51.5 KB
  Принципы управления весьма разнообразны. Они не только служат построению умозрительных схем но достаточно жестко определяют характер связей в системе структуру органов управления. Принципы управления это основополагающая идея по осуществлению управленческих функций.
32669. Методы управления 57.5 KB
  Огут быть сгруппированы по: Объекту управления Федер. Субъекту управления организационнораспорядительные хозяйственные Целям стратегического управления тактического оперативного Механизму влияния социальнополитические организационнораспорядительные организационнопедагогические Стилю авторитарные демократические либеральные Времени управленческих действий перспективные долгосрочные текущие Методы управления это система способов воздействия субъекта управления на объект для достижения определенного...
32670. Классификация подходов к управлению образовательным процессом 53 KB
  В качестве основы управления педагогическими системами а образовательный процесс представляет собой педагогическую систему Н. Коммуникативная функция нацелена на построение необходимых взаимоотношений и связей между субъектами управления. Конаржевский в процессе управления школой выделяет следующие функции: педагогический анализ планирование организацию внутришкольный контроль регулирование. Якунин рассматривая обучение как процесс управления в качестве относительно самостоятельных но взаимосвязанных функций управления выделяет:...
32671. Общее понятие систем 152 KB
  Системный подход это подход к исследованию объекта проблемы процесса явления организации как системы в которой выделены элементы внутренние и внешние связи наиболее существенным образом влияющие на исследуемые результаты его функционирования а цели каждого из элементов определены исходя из общего предназначения объекта На сегодняшний день существует большое разнообразие конкретных моделей системного подхода к управлению. Сущность системного подхода заключается в исследовании наиболее общих форм организации которое предполагает...
32672. Общая характеристика образовательных систем 133 KB
  Поэтому происходит обновление деятельности всех звеньев системы образования. В новых социокультурных условиях остро стоит проблема формирования целостной системы непрерывного образования в России. Принцип непрерывности предполагает что отдельные образовательные учреждения являются подсистемами общей системы образования человека в течение всей его жизни.
32673. Образовательный процесс как система 59.5 KB
  Уровни образовательного процесса. Компоненты и структура образовательного процесса. В образовательном учреждении можно выделить большое разнообразие образовательных систем: целостный педагогический образовательный процесс процесс обучения; процесс воспитания учебное занятие Понятие процесса образовательного процесса.