Лип 21 2012
 

JSONP є розширенням формату передачі даних в основі якого лежить старий добрий JSON. Він забезпечує спосіб отримання даних(JSON) із віддаленого сервера із одночасним вказанням callback-функції, що буде викликана одразу після отримання відповіді сервера.

Відповідно до політики безпеки , сторінка що знаходиться на server1.example.com не може здійснювати мережеву комунікацію з серверами відмінними від server1.example.com. Виключення становить HTML-тег <script type=”text/javascript”>. Використовуючи відкриту політику використання <script> елементів, багато клієнських додатків використовують її для отримання JavaScript-коду який динамічно оперує JSON-даними що були отриманні із зовнішніх джерел. Цей патерн називається JSONP. JSONP-запити попертають не чистий JSON, а відповідний JavaScript код. Ці дані інтерпритуються JavaScript інтерпритатором, не будучи зпарсеними JSON парсером.

Як це працює

Щоб побачити як це працює, спочатку розглянемо URL запит по якому повертає JSON дані. Програма на JavaScript може виконати такий запит на сервер за допомогою технології ajax (XMLHttpRequest). Вважаємо що UserId для користувача Foo є 1234. URL для здійснення запиту буде мати наступний вигляд: http://server2.example.com/RetrieveUser?UserId=1234 , передаємо UserId користувача Foo. Отримуємо щось на зразок наступного:




//
{"Name": "Foo", "Id" : 1234, "Rank": 7}
//



Тепер розглянемо HTML елемент який вказує через свій атрибут src URL що повертає JSON.




<script type="text/javascript"
         src=
http://highlife.pp.ua/"http://server2.example.com/RetrieveUser?UserId=1234">
</script>



Коли браузер опрацює елемент script, він отримає JSON контент, і ітерпритує його як програмний код. Це викличе синтаксичну помилку.

Використовуючи патерн JSONP, браузер викониє запит і отримає динамічно згенеровані JSON дані, разом із функцією-обгорткою навколо цих даних. В цьому разі ми отримуємо повноцінний JavaScript код, тому що анонімний об’єкт котрий буде створений JavaScript інтерпритатором на основі JSON даних, буде обгорнутий callback-функцією і ми зможемо працювати з отриманими даними. Це може виглядати наступним чином:




//
functionCall({"Name": "Foo", "Id" : 1234, "Rank": 7});
//



Слідуючи угоді, ім’я callback-функції задається через параметр URL. Часто функцію називають jsonp або callback .




<script type="text/javascript"
         src=
http://highlife.pp.ua/"http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse">
</script>



Для попереднього прикладу, відповідь буде мати наступний вигляд:




//
parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});
//



Реальний приклад використання

Напишемо простенький скрипт котрий звертається до твітера по jsonp і виводить текст трьох останніх твітів через alert.




// Отримуємо твіти використовуючи jsonp.
var username = "Patronik"; // мої твіти)
//Динамічно створюємо елемент script
var script = document.createElement("script");
script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?' +
             'count=3&callback=fetchTweets';
document.body.appendChild(script);

//функція котра отримає об'єкт створений на основі json (масив з трьох твітів)
function fetchTweets(data) {
  var tweet;
  var i = data.length;
  while (i--) {
    tweet = data[i];
	alert(tweet.text); // виводимо через alert текст твітів
  }
}



Бер 01 2012
 

В наш час технологія ajax  дуже частенько використовується на багатьох сайтах. Інтернет магазин без корзини реалізованої на ajax  вже виглядає не модним і застарілим. Прогрес є прогрес, але мені до сих пір невідомо чому ajax так пізно почав широко застосовуватися в вебі, бо з’явився він досить давно.

Згідно офіційних джерел, термін ajax був вперше застосований у 2005 році, для того щоб якимось чином описати клієнтам, замовникам веб-проекту, ті технології які були використані у проекті. Однак самі технології, які тепер модно називати ajax, були доступні ще у далекому 1998 році, і запропоновані компанією Microsoft.

Але сьогоднішня публікація не буде зосереджена на ajax, вона присвячена вона формату json . Також у цьому пості буде приведений реальний приклад використання JSON для передачі багатомірного масиву з php в javascript.

JSON, це універсальний формат представлення даних. JSON є вихідцем з мови javaScript і створений для людино-зрозумілого обміну даними. В json можна перевести прості структури даних, асоціативні масиви, які в мові javaScript називаються об’єктами ( object ).

Графічне представлення циклу передачі даних у форматі json

Графічне представлення циклу передачі даних у форматі json

Кому потрібен цей JSON?
Ви можете зараз запитати: “Кому потрібен цей JSON?”. На перший погляд здається що без JSON можна без проблем передавати будь-які дані просто вивівши їх на екран через php-оператор echo. В такий спосіб справді можна отримати дані, але що робити коли нам буде потрібно передати в javaScript таку річ:




$data = array(
0=>array("id"=>45,"name"=>"Петро"),
1=>array("id"=>61,"name"=>"Тарас"),
2=>array("id"=>11,"name"=>"Іван")
);




Якщо ми хочеме отримати таку саму структуру даних в javaScript – простим echo не обійтися. І тут, на допомогу приходить JSON. В php є функція, котра може перевести певне значення у формат JSON. Ця функція називається json_encode (також існує функція що має зворотню дію – json_decode)

json_encode  — Returns the JSON representation of a value

Ця функція добре справляється з асоціативними масивами, і ми із легкістю можемо зробити наступне:




$data = array(
0=>array("id"=>45,"name"=>"Петро"),
1=>array("id"=>61,"name"=>"Тарас"),
2=>array("id"=>11,"name"=>"Іван")
);
$jsonString = json_encode($data);




Дані в json переведені і на цьому робота php може бути закінчена. Тепер припустимо що ми передали в javaScript наші json-дані, і тут ми можемо з легкістю зпарсити ці дані за допомогою вбудованої по замовчуванню підтримки json-у в javaScript.
javaScript-функція eval може виконати будь-який javaScript-код що переданий їй через аргумент. При отриманні аргументу у форматі json – функція повертає об’єкт. Цей об’єкт і буде представленням нашого багатомірного масиву.

Повний приклад викорситання json, для передачі багатомірного масиву із php в javaScript, використовуючи ajax.

Крок 1. Робимо запит для отримання даних.




$.ajax({
url: 'http://site.com/dataGenerator.php',
success: procesData // функція зворотнього виклику procesData буде обробляти отримані дані
}
});



Крок 2. Генерація даних на сервері та їх передача.




//Це файл dataGenerator.php
$data = array(
0=>array("id"=>45,"name"=>"Петро"),
1=>array("id"=>61,"name"=>"Тарас"),
2=>array("id"=>11,"name"=>"Іван")
);
$jsonString = json_encode($data);
echo $jsonString;



Крок 3. Отримання даних та парсинг їх в об’єкт.




function procesData( data ) {
var obj = eval('(' + data + ')'); // Парсимо json в об'єкт
alert(obj[0].name); // виведе Петро
}



Як бачите використання json є простим способом передачі будь-якого масиву із php в javaScript, особливо це може знадобитися коли потрібно передати результат вибірки із бази даних, що реалізувати без json досить складно.

Бувають ситуації коли ми незнаємо імен властивостей об’єкта отриманого з json і відповідно не можемо звертатися до них. У цьому випадку може знадобитися корисна функція яку я нагуглив, вона обходить об’єкт і взнає імена його властивостей через звертання до них по числових індексах.




//Функція яка показує імена властивостей
function fnShowProps(obj, objName){
    var result = "";
    for (var i in obj) // обращение к свойствам объекта по индексу
        result += objName + "." + i + " = " + obj[i] + "
\n";
	  document.write(result);
}
//Тестовий об'єкт
var myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
//Викликаємо функцію для тестового об'єкту
fnShowProps(myJSONObject,"мій об'єкт з даними");
/* ВИВІД */
/*
мій об'єкт з даними.ircEvent = PRIVMSG
мій об'єкт з даними.method = newURI
мій об'єкт з даними.regex = ^http://.*
*/



Гру 23 2011
 

Трапляються ситуації коли треба вдень показувати на сайті одну рекламу а вночі іншу. Наприклад у вас є розважальний сайт і ви хочете показувати еротичну рекламу ввечері а звичайну вдень. Робити це вручну міняючи кожного для коди рекламних блоків дуже не зручно. Тому я придумав дуже простий спосіб як на javascript автоматизувати цю роботу.

Припустимо у вас є два блоки оголошень :





<div class="day">Денна реклама</div>
<div class="night">Нічна реклама</div>




Тепер ми використаємо корисний javascript-клас Date, який дасть нам змогу орієнтуватися в часі і знати котра зараз година. Об’єкт який створений від класу Date має метод getHours() який повертає ціле число в діапазоні від 0 до 23 (це 24 години в добі). Тепер знаючи котра зараз година ми можемо створювати часові діапазони і показувати в них різну рекламу.




date = new Date();//конструктор без параметрів повертає об'єкт що відображає поточну дату
hours = date.getHours();//отримуємо годину
// а далі все дуже тривіально))
//Якщо вже більше ніж 23 година або якщо ще немає 6 ранку то крутимо нічну рекламу
if(hours >23 || < 6) {
document.write('<div class="night">Нічна реклама</div>');
//а в іншому випадку зараз денний час і ми показуємо денну рекламу
} else {
document.write('<div class="day">Денна реклама</div>');
}



При бажанні із об’єкту Date можна отримати значення години, хвилин, секунд та мілісекунд. За допомогою цих даних можна створювати часові діапазони в хвилинах що дасть змогу змінювати рекламу частіше.

Жов 17 2011
 

У процесі створення сайту, часто виникає необхідність розширювати стандартні можливості jQuery через створення власних функцій. Наприклад, ви хочете мати можливість використовувати власну функцію так




$(element).yourfunctionname();



Яким чином можна створити таку функцію?

Для цього ви маєте використовувати наступний синтаксис




jQuery.fn.yourfunctionname = function() {
    //Логіка роботи вашої функції тут
   //this буде ссилкою на dom елемент до якого була застосована функція
};



Також ви можете передавати у свою функцію різноманітні параметри. Отримувати ці параметри можна наступним чином




$(element).yourfunctionname({data: [], pagingStart: 5});

jQuery.fn.yourfunctionname = function() {
    var args = arguments[0] || {}; // Об'єкт з параметрами
    var myData= args.data; 
    var pagingStart = args.pagingStart;
}



Розширюємо можливості jQuery за допомогою власних функцій.
Якщо ви захочете використовувати свою функцію в контексті об’єкта jQuery, наприклад так




if( !jQuery.isEmail(email) )



ви можете скористатися можливістю додавання власної функції в конструкцію jQuery.extend.




jQuery.extend( {
    isEmail: function(email) { 
    return (string.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) ? true : false;
    }
});



Вер 02 2011
 

Cufon – це javaScript інтерфейс який вміє замінювати стандартні шрифти на веб сторінці на нестандартні. Ви можете перетворити будь-який файл шрифта на файл шрифта для куфону. Ці перетворення ви можете здійснювати на сторінці герератора шрифтів для куфону .

Куфон відкриває нові можливості для дизайнерів та верстальщиків, і відкидає необхідність замінювати надписи нестандартним шрифтом на зображення. Тепер нестандартний шрифт можна застосувати до будь-яких елементів DOM документу за допомогою селекторів у стилі jquery.

Як підключити Cufon на сайт?

Куфон та шрифт для нього підключається аналогічно до підключення звичайного javaScript.



<html>
	<head>
     <!-- Підключаємо куфон -->
		<script src=
http://highlife.pp.ua/"cufon.js" type="text/javascript"></script>
               <!-- Підключаємо необхідні шрифти -->
	<script src=
http://highlife.pp.ua/"шрифт.font.js" type="text/javascript"></script>
		





<





script type





=











"text/javascript"











>






Cufon.





replace











(











'h1'











)











;





 





// Працює без двигуна для селекторів






Cufon.





replace











(











'#sub1'











)











;





 





// Вимагає двигун селекторів типу jquery












</





script





>






</head>
	<body>
 
<h1>Тут буде написано нестандартним шрифтом</h1>
<h2 id="sub1">Тут буде написано нестандартним шрифтом також</h2>
<!-- Для запобігання затримкам ініціалізуємо куфон до виконання інших скриптів на сторінці -->
		





<





script type





=











"text/javascript"











>





Cufon.





now











(











)











;





 





</





script





>






       </body>
</html>


За допомогою куфону можна досягнути результатів схожих на це.

Завантажити куфон можна тут .

Лип 05 2011
 

Раніше я писав про те як зробити випадаюче меню на jquery. Той варіант реалізації випадаючого меню – працював неправильно, випадаюче меню миттєво згорталося при відведенні мишки від нього. Замість того варіанту я почав використовувати готовий плагін. Плагін називається hoverIntent jQuery Plug-in.

Його просто використовувати у різних ситуаціях коли справа стосується випадаючих меню. Його головна особливість у тому, що його легко інтегрувати до вже готового меню а також можна виставити затримку перед згортанням меню після того як мишка буде відведенна.

Демо



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48





 






<





script type





=











"text/javascript"





 src





=











"http://code.jquery.com/jquery.js"











></





script





>





 






<





script type





=











"text/javascript"





 src





=











"jquery.hoverIntent.js"











></





script





>





 
 
 






<





ul





>












<





li





>






Перший рівень 





1






 






<





ul 





class











=











"sub_menu"





 style





=











"display:none;"











>












<





li





>





Другий рівень рівень 





1











</





li





>












<





li





>





Другий рівень 





2











</





li





>












<





li





>





Другий рівень 





3











</





li





>












<





li





>





Другий рівень 





4











</





li





>












</





ul





>












</





li





>












<





li





>





Перший рівень 





2












<





ul 





class











=











"sub_menu"





 style





=











"display:none;"











>












<





li





>





Другий рівень 





2.1











</





li





>












<





li





>





Другий рівень 





2.2











</





li





>












<





li





>





Другий рівень 





2.3











</





li





>












<





li





>





Другий рівень 





2.4











</





li





>












</





ul





>












</





li





>












<





li





>





Перший рівень 





3











</





li





>












<





li





>





Перший рівень 





4











</





li





>












</





ul





>






 






<





script





>






$





(





document





)





.





ready











(





 





function





 





(











)





 





{






$





(











"li"











)





.





hoverIntent











(











{






    sensitivity





:





 





7











,





 
    interval





:





 





100











,





   
    over





:





 showNav





,





  





// функція яка буде викликана на подію наведення мишки на область елемента li






    timeout





:





 





500











,





   





// затримка перед викликом out






    out





:





 hideNav    





// функція яка буде викликана на подію виходу мишки мишки з області елемента li












}











)











;












function





 showNav





(











)





 





{












//шукаємо наше меню другого рівня і показуємо його






            $





(











this











)





.





find











(











'.sub_menu'











)





.





show











(











"slow"











)











;






        





}












function





 hideNav





(











)





 





{












//шукаємо наше меню другого рівня і ховаємо його






            $





(











this











)





.





find











(











'.sub_menu'











)





.





hide











(











"slow"











)











;






         





}






 






}











)











;












</





script





>








Чер 29 2011
 

HTML5 це мова для структурування та презентації контенту для World Wide Web. Це п’ята версія стандарту HTML і станом на червень 2011 року знаходиться в стадії розробки. Її метою було поліпшити мову підтримкою новітніх мультимедіа зберігаючи при цьому легкість читання для людей а також забезпечити сумісніть із різноманітними пристроями та платформами. HTML5 покликаний підняти не тільки HTML4, але XHTML1 і DOM2HTML (зокрема, JavaScript).

html4 + XHTML 1.0 + DOM level 2 = HTML5

HTML5 – це також спроба визначити єдину мову розмітки, яка може бути записана в будь-якому HTML або XHTML синтаксисі. Вона розширює, удосконалює і раціоналізує розмітку для документів, а також надає і API-інтерфейс розмітки для побудови складних веб-додатків.

В практичному плані, HTML5 додає безліч нових синтаксичних особливостей. До них відносяться теги <video>, <audio> і <canvas>, з метою інтеграції із SVG контентом. Ці функції спроектовані так, щоб забезпечити можливість легко включати і обробляти мультимедіа та графічний контент на веб-сторінках без необхідності вдаватися до власних плагінів та API. Інші нові елементи, такі як <section>, <article>, <header> і <nav>, призначені для збагачення смислового змісту документів. Нові атрибути були введені для тих же цілей, а деякі елементи й атрибути були вилучені. Деякі елементи, такі як <a>, <cite> і <menu> були змінені, переглянуті або стандартизовані. DOM API є невід’ємною частиною специфікації HTML5.


Демонстрація додавання у веб-сторінку відео за допомогою HTML5.