Catégories : Tous - элементы - события

par web 2 Il y a 6 années

332

WEB-Тема4

JavaScript представляет собой язык программирования, который используется для создания интерактивного и динамического контента на веб-страницах. Одним из ключевых аспектов работы с JavaScript является использование DOM (

WEB-Тема4

Тема 4. Язык JavaScript

Ajax и JQuery

DOM

DOM (Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

one() - позволяет создавать обработчики, которые могут быть вызваны лишь один раз

$("#but1").one("click",function(){alert("Вы нажали на кнопку с id=but1")});

toggle() - позволяет переключаться между различными обработчиками событий по щелчку мыши

Объект event

$(селектор).событие(function(event){

код_обработчика_события

});

События
Работа с DOM:

.text () – добавление текста.

.css() – добавление стиля

.height() – установление высоты элемента

.weight() - установление ширины элемента

.addClass("имя_класса") - добавляет класс стилей css к элементу

.css("параметр", "значение") - добавляет стиль css к элементу

.hide() - скрыть элемент

.show() - показать элемент 

Функционал поиска элементов

Функционал поиска элементов DOM:

jQuery

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Данная библиотека появилась в январе 2006 года. На сайте разработчиков jQuery – по адресу jquery.com

Также библиотека jQuery предоставляет удобный API по работе с Ajax.

jQuery помогает легко получать доступ к любому элементу (набору элементов) объектной модели документа (DOM), обращаться к атрибутам и содержимому элементов DOM и конечно манипулировать ими. Причем благодаря своему интуитивно понятному синтаксису, схожему в чем-то с CSS1, CSS2, работа с этой библиотекой становиться очень простой. 

Вызов библиотеки

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

Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. 

Подключение библиотеки

Подключение библиотеки jQuery происходит так же, как и подключение любой другой JavaScript библиотеки:

<head>

<script type="text/javascript" src="путь/к/JQuery.js"></script>

</head>

Пример: <script type="text/javascript" src="js/jquery.min.js"></script>

Методы работы с асинхронными запросами в jQuery

jQuery.load- загрузка HTML кода в необходимый нам DOM элемент на странице 

jQuery.ajax – основной метод асинхронных запросов.

Параметры:


jQuery.getJSON

Загружает данные в формате JSON. Может принимать следующие параметры:

– url запрашиваемой страницы

– передаваемые данные (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) 

jQuery.post

- Данный метод аналогичен предыдущему, передачи данных на сервер посредством POST'а. Может принимать следующие параметры:

-url запрашиваемой страницы

– передаваемые данные (необязательный параметр)

– callback функция, которой будет скормлен результат (необязательный параметр)

– тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

– url запрашиваемой страницы

– передаваемые данные (необязательный параметр)

– callback функция, которой будет скормлен результат (необязательный параметр)

– тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) 

Определения

Аjax - использование технологии асинхронного обращения к серверу, без перезагрузки web-страницы полностью.

JSON (JavaScript Object Notation) - текстовый формат обмена данными, основанный на Javascript , удобный для чтения и написания как человеком, так и компьютером. 

JQuery

Создание AJAX запросов

С помощью JavaScript можно создавать асинхронные запросы и отправлять их на сервер.

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

Техника использования асинхронных запросов называется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

Создание AJAX запросов на "чистом" JavaScript имеет несколько недостатков:

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

Синтаксис:

$("селектор").load(url,данные,функция) 

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

url адрес файла, который будет запрошен у сервера с помощью AJAX.

данные которые будут переданы запрошенному файлу. Если Вы хотите запросить файл, при этом не передавать никаких данных, оставьте данный параметр пустым.

функция имя функции, которая будет вызвана после выполнения запроса.



Методы создания AJAX запросов

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

Использование AJAX запросов ускоряет загрузку страниц и снимает нагрузку с сервера

Описание методов

Все существующие в jQuery методы для создания AJAX запросов перечислены ниже: 

Низкоуровневые AJAX запросы

Высокоуровневые методы создания AJAX запросов (т.е. методы которые были разобраны ранее в данной главе) подходят для создания большей части запросов, но иногда их функциональности становится недостаточно.

Низкоуровневые AJAX запросы предоставляют более широкую функциональность, но более сложны в использовании.

Синтаксис высокоуровневого AJAX запроса:

$("#par1").load("add.php","x=4&y=5")


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

$("#but1").click(function(){

$.ajax({url:"add.php",

data:"x=4&y=5",

success:function(result){

$("#par1").html(result)}

});

}); 

Сопровождающие функции

Сопровождающие функции позволяют выполнять различный код в зависимости от состояния выполнения AJAX запроса.

Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса.

Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет).

Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно.

Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой.

Методы ajaxStart и ajaxStop используются для сопровождения группы AJAX запросов.

Метод ajaxStart выполняет переданный в него код при отправлении первого запроса из группы.

Метод ajaxStop выполняет переданный в него код при завершении последнего запроса из группы.

Анимация

С помощью метода animate() Вы можете создавать на Ваших страницах полноценную анимацию.

Синтаксис:

$("селектор").animate({стили},скорость,функция_смягчения,функция ); 


стили задает CSS стили для анимации (к элементу одновременно может быть применено несколько стилей).

скорость задает скорость анимации. Вы можете указать скорость используя предопределенные свойства: "slow", "fast", "normal" (медленно, быстро, нормально) или указать скорость в миллисекундах (1000 миллисекунд = 1 секунда).

функция_смягчения задает функцию, которая будет отвечать за плавность выполнения анимации.

функция указывает имя функции, код которой будет выполнен после завершения анимации.

Описание методов анимации

С помощью методов перечисленных ниже Вы можете создать на Ваших страницах анимацию.

Эффекты

С помощью jQuery методов fadeOut(), fadeIn() и fadeTo() Вы можете постепенно скрывать и отображать элементы анимировано.

Синтаксис:

//Позволяет постепенно скрыть выбранный элемент

$("селектор").fadeOut(скорость,функция);

//Позволяет постепенно отобразить выбранный элемент $("селектор").fadeIn(скорость,функция);

//Позволяет постепенно скрыть/отобразить элемент до указанного значения прозрачности $("селектор").fadeTo(скорость,прозрачность,функция);


С помощью jQuery методов slideUp, slideDown и slideToggle Вы можете плавно изменять высоту выбранных элементов.

Синтаксис:

//Позволяет изменяет высоту элемента до 0

$("селектор").slideUp(скорость,функция);

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

$("селектор").slideDown(скорость,функция);

//При первом вызове будет действовать как slideUp, а при втором как slideDown

$("селектор").slideToggle(скорость,функция);



С помощью метода slideToggle Вы можете создавать на Ваших страницах удобные выпадающие меню.

Описание эффектов

Эффекты представленные ниже позволяют скрывать и отображать элементы различными способами.

Методы CSS манипулирования

С помощью методов перечисленных ниже можно производить различные манипуляции над оформлением элементов:

Управление обработчиками событий

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

Обработчики событий

С помощью методов перечисленных ниже Вы можете создавать обработчики событий и привязывать их к элементам:

Селекторы JQuery

С помощью селекторов jQuery можно выбрать любой элемент на странице. Все возможные варианты использования селекторов перечислены ниже: 

Определение JQuery

jQuery - это библиотека значительно упрощающая и ускоряющая написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

jQuery содержит команды позволяющие создавать анимацию и обработчики событий. Также она значительно облегчает выбор элементов в DOM и создание AJAX запросов.

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

Для jQuery написано огромное количество плагинов, которые расширяют ее возможности еще больше.

JavaScript

Работа с объектами html-документа

В памяти современного интернет-браузера каждый web-документ представляется в виде иерархической объектной модели – DOM, Document Object Model. Например, текущее окно – это объект window, который содержит объект document – загруженную в него страницу. Объект документ содержит объекты head и body, объект body, в свою очередь, содержит отображаемые объекты: абзацы, таблицы, изображения, формы и т.д.

Пример страницы с использованием JavaScript

Ниже приведён пример страницы с использованием JavaScript, на которой расположены две формы ввода: одна с выпадающим списком, другая – с набором кнопок с зависимой фиксацией, так называемых radiobuttons. Обе формы выполняют схожие действия: при нажатии кнопки изменяется фон страницы в зависимости от выбранного цвета.

Изменение фона происходит при изменении свойства bgColor объекта document:

document.bgColor=”blue”;

Формы на странице имеют имена form1 и form2, указываемые атрибутом name. Соответственно, в сценарии обращение к ним идёт как к document.form1 и document.form2, а к элементам этих форм как к document.form1.color_list и document.form2.color_radio. Причем так называемые радиокнопки с зависимой фиксацией имеют одинаковый атрибут name=”color_radio”. В этом случае из всей группы color_radio может быть выделенной только одна кнопка. При этом группа color_radio – это массив объектов, к свойствам которых можно обращаться. 

Объектная модель Internet Explorer версии 4 и выше

Ниже приведена объектная модель Internet Explorer версии 4 и выше. Объектная модель Netscape Navigator и его «потомка» Mozilla Firefox немного отличается, но смысл тот же: 

Пользовательские функции

Пользовательские функции создаются с помощью зарезервированного слова function. Функция должна иметь имя и список параметров, который может быть пустым. Если функция должна возвращать значение, то она должна содержать оператор return с результатом функции. Результат функции может быть значением переменной или выражением. Следующие две функции эквивалентны, они вычисляют гипотенузу прямоугольного треугольника:

  1. function gipotenuza 1(a,b) {

var c;

c = Math.sqrt(a*a+b*b);

return c;

}


2. function gipotenuza 2(a,b) {

return Math.sqrt(a*a+b*b);

}

Оператор цикла с предусловием

while (условие) {тело цикла;}


Пример:


i=0;

while (i<10) {

document.write( (i*i)+"<br>");

i++;

}

Оператор цикла с параметром

for (нач_знач; условие; приращение) {тело цикла;}

Пример:


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

document.write( (i*i) + "<br>");

}


Аналогичный фрагмент на Паскале выглядел бы так:


for i:=0 to 9 do begin

writeln(i*i);

end;

Условный оператор

if (условие) {операторы;} //сокращённая форма оператора if

if (условие) {операторы1;} else {операторы2;} //полная форма


Подобно операторным скобкам begin ... end в Паскале, в JavaScript используются фигурные скобки {...} для объединения нескольких операторов в один блок.

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

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

Тройной оператор выполняет ту же функцию, что условный оператор if:

y = x>a ? x–a : x*a ;

В Паскале тройного оператора нет, те же действия там нужно было бы записывать так: if (x>a) then y:=x–a else y:=x*a; .

Массивы

Массивы в JavaScript динамические, имеют нумерацию элементов всегда с 0 и задаются конструкцией new Array несколькими способами:

var A1 = new Array(); // пустой массив без элементов

var A2 = new Array(3); // массив из трёх пустых элементов с номерами 0,1,2

var A3 = new Array(“a”, “b”, “c”); //массив, заданный значениями элементов

Обращение к элементам массива происходит через указание индекса в квадратных скобках:

A2[0] = 123.5; A2[1] = 67; A2[2] = 8.9; A3[2] = ”ddd”; .

Элементы массива создаются автоматически при присвоении им первого значения. Например, после этого присвоения

A1[9] = 3.14;

длина массива A1 станет равной 10: десятый элемент A1[9] будет иметь значение 3.14, остальные девять от A1[0] до A1[8] будут пустыми, т.е. содержать неопределённые значения.

Массив в JavaScript – это объект, имеющий свои методы, т.е. процедуры, которые выполняют над объектом какие-либо действия. Примеры общеупотребительных методов join, sort и reverse:

str = A2.join( ); //объединяет массив в строку через «,»: str=”123.5,67,8.9”

str = A2.join(“;”) //теперь через точку с запятой: str=”123.5;67;8.9”

A3.reverse( ); //теперь массив A3 инвертирован: (“c”, “b”, “a”)

A3.sort( ); //теперь массив A3 опять отсортирован по алфавиту

A2.sort( ); //массив A2 не изменится, т.к. сортировка осуществляется в лексикографическом порядке, т.е. числа сортируются как строки 

Переменные и типы данных

Интерпретатор JavaScript различает регистр имен переменных и функций, т.е. переменные ABC, abc и Abc – это три разных переменных.

Типы переменных в JavaScript:

Объявлению каждой переменной предшествует слово var. При объявлении переменной сразу может быть присвоено начальное значение. 

Например: var x ;

var str="строка";

var z = 1.23e-23;

Строгая типизация отсутствует, т.е. после указанных примеров далее можно присвоить строковой переменной числовое значение: str = 345;.

Создание динамических веб-страниц с применением JavaScript

Язык сценариев JavaScript позволяет создавать интерактивные

динамические web-страницы, содержимое которых может изменяться в

зависимости от действий пользователя. Сценарии JavaScript выполняются браузером при наступлении различных событий: щелчок по ссылке, ввод текста, наведение указателя мыши на объект и т.д.

Сценарии могут помещаться в любом месте страницы в тегах

<script>...</script>. Для ускорения загрузки страницы в открывающем теге желательно указывать атрибут type="text/javascript", а для поддержки старых браузеров, не умеющих обрабатывать тег <script>, желательно заключать текст программы сценария в символы html-комментария:

<script type="text/javascript">

<__

текст программы;

//__>

</ script >

Сценарии с описаниями пользовательских функций, как правило, помещают в раздел заголовка …. Если для выполнения сценария необходимо, чтобы вся страница уже была загружена, его помещают после закрывающего тега . Также сценарии можно помещать в исходном тексте страницы непосредственно за элементами управления, которые вызывают эти сценарии.

Определение JavaScript

JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке

Mindomo

À propos de nous
Aide
Contactez-nous
Tarifs

Plus d'infos

Blog
Conditions d'utilisation
Politique de confidentialité
Sécurité
Accessibilité
Politique de sécurité

Questions fréquentes

Qu'est-ce qu'une carte mentale?
Mind mapping en ligne
Exemples de cartes mentales
Qu’est-ce qu’une carte conceptuelle?
Modèles de carte conceptuelle