Code.ge Blog » IE Sucks http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Mon, 03 May 2010 14:38:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 Google Chrome Frame http://www.code.ge/posts/google-chrome-frame http://www.code.ge/posts/google-chrome-frame#comments Fri, 25 Sep 2009 09:41:03 +0000 იოსები http://www.code.ge/?p=374 რამდენიმე დღის წინ Google – მ გაახმაურა თავისი ახალი პროექტი სახელად Google Chrome Frame. ეს არის პლაგინი InternetExplorer – ისთვის რომელის ინსტალაციის შემდეგაც საიტები თუ მათ გააჩნიათ შესაბამისი META ტეგი, ჩაიტვირთებიან არა IE – ს ძრავის არამედ Google Chrome – ს ძრავის მეშვეობით. ეს ნიშნავს იმას რომ ყოველგვარი არათავსებადობის პრობლემა(რომელსაც 99% შემთხვევებში იწვევს IE) საერთოდ აღარ შეაწუხებს მომხმარებელს. როგორც აღმოჩნდა გუგლის ეს ნაბიჯი განპირობებული იყო მისი ახალი პროდუქტის – Google Wave გამო რომელიც ხელმისაწვდომი მომავალი კვირიდან გახდება. საინტერესო არის ის, რომ, გუგლმა IE – ს ყველა ვერსიის მხარდაჭერაზე განაცხადა უარი რადგანც ამ ბრაუზერებს არ აქვთ JavaScript – ისა და HTML5 – ის ახალი შესაძლებლობების მხარდაჭერა.

cf-in-ie

მაგრამ Wave – ს გამო შექმნილი პლაგინის გაოყენებაში არანაირად არ ვართ შეზღუდული და იგი შეგვიძლია გამოვიყენოთ ნებისმიერი ვებ საიტისთვის, რისი მაგალითიც არის ჩემი ბლოგი :) თუ ამ გვერდს გახსნით IE6 – ის მეშვეობით მაშინათვე დაინახავთ Google Chrome Frame – ს ინსტალაციის შემოთავაზებას და იმ შემთხვევაში თუ დააინსტალირებთ პლაგინს თქვენს კომპზე არსებული IE6, IE7 და IE8 ავტომატურად იმუშავებს Chrome Frame რეჟიმში :) :)

ტექნიკურად ეს საკითხე გვარდება ძალიან მარტივად. პირველ რიგში საიტის HEAD სექციაში უნდა დავამატოთ შემდეგი META ტეგი:

1
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

თუ Google Chrome პლაგინი უკვე დაინსტალირებული აქვს მომხმარებელს ყველა ვერსიის IE იმუშავებს Google Chrome – ს ძრავით ისე რომ ამის შესახებ მომხმარებელს არაფერი ეცოდინება.

იმისათვის რომ მომხმარებელს შევთავაზოთ პლაგინის ინსტალაცია, ასევე საჭიროა ვებ გვერდში შემდეგი კოდის ჩასმა(გაუგებრობების თავიდან ასარიდებლად BODY ტეგის დახურვამდე):

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
 
<div id="placeholder"></div>

<script type="text/javascript">
 CFInstall.check({
    node: "placeholder",
    destination: "http://www.waikiki.com"
  });
</script>

ეს სკრიპტი შეამოწმებს აქვს თუ არა მომხმარებელს დაინსტალირებული ნახსენები პლაგინი, და თუ არა მაშინ შესაბამისი შეტყობინება შესთავაზებს მომხმარებელს მის ინსტალაციას.

შედეგი? შედეგი კი ძალიან საინტერესოა. რა თქმა უნდა ვერ შევიკავე თავი და გავტესტე პლაგინი ჩემს ბლოგზე და შედეგიც სახეზეა:

Picture 6
Picture 7
Picture 8
Picture 9

თუ გახსნით ბოლო სურათს, დაინახავთ რომ ბლოგის მარჯვენა სვეტში განთავსებულ პროექტების ბანერებს მომრგვალებული კუთხეები აქვთ, ეს მომრგვალება გაკეთებულია CSS – ის border-radius თვისების მეშვეობით რომლის მსგავსიც არცერთ IE – ს არ გააჩნია :D

Enjoy :)

]]> http://www.code.ge/posts/google-chrome-frame/feed 10 Handling “onchange” event revisited http://www.code.ge/posts/handling-onchange-event-revisited http://www.code.ge/posts/handling-onchange-event-revisited#comments Sat, 16 May 2009 18:10:17 +0000 იოსები http://www.code.ge/?p=241 რამდენიმე თვის წინ დავწერე პოსტი, HTML ფორმის ელემენტის onchange ივენთისა და მისი დელეგირების შესახებ.

ნახსენებ პოსტში ნაჩვენებია onchange ივენთის დელეგირების მაგალითი სადაც ფორმის ყველა ელემენტის აღნიშნული ივენთის ცენტრალიზებული კონტროლი ხორციელდება მშობელი ელემენტის onchange ივენთის მეშვეობით.

მსგავსი შედეგის მიღწევა შესაძლებელი ე.წ. Event Bubbling – ის წყალობით რაც ივენთის, საწყისი ელემენტიდან მშობელი ელემენტისკენ გავრცელებას ეწოდება. მეტი თვალსაჩინოებისთვის იხ. სურათი(სურათისათვის განსაკუთრებული მადლობა ირაკლის):

picture-17

ივენთის გავცელების(შვილიდან მშობლის მიმართულებით) ასეთი მეთოდი ყველა ბრაუზერში ერთნაირად მუშაობს. და წესით ეს უნდა ეხებოდეს ყველა ტიპის ივენთს. თუმცა როგორც მოსალოდნელი იყო IE – ში მისი მერვე ვერსიის ჩათვლით სწორედ ამ ივენთზე აღმოჩნდა შეზღუდვა და იგი საწყისი ელემენტს(ელემენტი რომელზეც უშუალოდ წარმოიშვა ეს ივენთი) იქეთ არ ვრცელდება.

ერთი შეხედვით, ამ ჩიხიდან რამდენიმე გამოსავალი შეიძლება მოიძებნოს:

  1. ფორმის ყველა ელემენტის ჩამოვლა და მათთვის onchange ივენთ ჰენდლერის მინიჭება. თუმცა აქ მთელ რიგ პრობლემებს წავაწყდებით:

    • ელემენტებზე ასეთი გზით ივენთ ჰენდლერების მინიჭება IE – ში იწვევს მეხსიერებასთან დაკავშირებულ პრობლემებს, ე.წ. memory leaks. ეს გარემოება განსაკუთრებით მნიშვნელოვანია თუ ფორმაში ბევრი ელემენტები გვაქვს.
    • თუ ფორმის ელემენტები იტვირთება დინამიურად Ajax – ის მეშვეობით, ყოველი ასეთი ჩატვირთვის შემდეგ საჭიროა: ა) ყველა ფორმის ელემენტისა და მათი ივენთ ჰენდლერების განადგურება რათა თავიდან ავირიდოთ მეხსიერებასთან დაკავშირებული პრობლემები; ბ) ახლად ჩატვირთული ელემენტების იტერაცია და მათთვის შესაბამისი ივენთ ჰენდლერების განსაზღვრა.

    დამეთანხმებით რომ აღწერილი ორი მეთოდი დიდი მოქნილებით არ გამოირჩევა.

  2. ნაცვლად onchange ივენთისა გამოვიყენოთ onfocus და onblur ივენთები. თუმცა აღმოჩნდა რომ არც ამ ივენთების გავრცელება არ ხდება ტრადიციული(შვილიდან მშობლის მიმართულებით) მეთოდით.

გარკვეული კვლევა ძიების შემდეგ მივაგენი ისეთ ივენთებს(დიდი მადლობა PPK – ს) რომელთა ბაბლინგი IE – ში ისე მუშაობს როგორც საჭიროა. ეს ივენთებია onfocusin და onfocusout.

როგორ შეიძლება აღნიშნული ივენთების გამოყენება პრობლემის გადასაჭრელად? სანამ უშუალოდ კოდის წერას დავიწყებთ საჭიროა კარგად გავერკვეთ თუ როგორ მუშაობს onchange ივენთი HTML ფორმის ცალკეული ელემენტებისათვის და ასევე თუ რა გვერდის ავლის მექანიზმების გამოყენებაა შესაძლებელი IE – ში.

SELECT ელემენტი

ამ ელემენტის შემთხვევაში onchange ივენთი წარმოიშვება მხოლოდ იმ ჩამოსაშლელი სიიდან კონკრეტული ელემენტის ამორჩევის დროს. IE – ში იგივე ხდომილების ემულაციისათვის შესაძლებელია onclick ივენთის გამოყენება, თუმცა, ასეთ შემთხვევაში ივენთი ორჯერ წარმოიშვება ერთხელ ელემენტის გააქტიურებისას ხოლო მეორედ ჩამოსაშლელი სიიდან მნიშვნელობის არჩევისას. თუმცა ამ პრობლემის არიდება მარტივად არის შესაძლებელი სწორედ onfocusin და onfocusout ივენთების მეშვეობით რადგან ეს ორივე ივენთი წარმოიშვება onclick ივენთამდე, გამომდინარე აქედან შესაძლებელია წინა ივენთის ტიპის დამახსოვრება და შემდგომ უკვე დადგენა ეს იყო პირველი კლიკი თუ ჩამოსაშლელი მენიუდან ელემენტის არჩევა მოხდა?

INPUT text და TEXTAREA ელემენტები
ამ ელემენტების შემთხვევაში onchange ივენთი წარმოიშვება როდესაც ელემენტი კარგავს ფოკუსს. IE – ში იგივეს მიღწევა შესაძლებელია onfocusout ივენთის მეშვეობით.

INPUT checkbox და radio ელმენტები
ამ ელემენტების შემთხვევაში onchange ივენთი წარმოიშვება მათი მნიშვნელობის ცვლილების თანავე. IE – ში იგივე შედეგის მისაღებად მარტივად არის შესაძლებელი onclick ივენთის გამოყენება.

მაშ ასე წინა სამი პარაგრაფში გამოიკვეთა სამი ისეთი ივენთი რომელთა გამოყენებაც შესაძლებელია onchange ბაბლინგის ემულაციისათვის. ეს ივენთებია: onclick, onfocusin, onfocusout.

ამ ინფორმაციაზე დაყრდნობით მარტივად არის შესაძლებელი სულ რამდენიმე სტრიქონი კოდით გადავწყვიტოთ პრობლემა:

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
(function() {
   
   var div = document.getElementById('testonchange');
   
   //ყველა ბრაუზერი IE - ს გარდა
   if (document.addEventListener) {

      div.onchange = function(e) {
         //აქ შეგვიძლია გამოვიძახოთ ივენთის უშუალო ჰენდლერი
      };

   } else { //IE - ს სპეციფიური რეალიზაცია
     
      var previousEvent = null;
     
      div.onfocusin = div.onfocusout = div.onclick = function() {

         var e            = window.event,
            target       = e.srcElement,
            isSelect     = target.nodeName  == 'SELECT',
            notTextInput = target.nodeName  == 'INPUT' && /^radio|checkbox$/i.test(target.type),
            isTextInput  = (target.nodeName == 'INPUT' && target.type == 'text') || target.nodeName == 'TEXTAREA',
            validElement = notTextInput || isSelect;

         if (isSelect && !target.size && /^focus(in|out)$/.test(previousEvent)) {
            validElement = null;
         }

         previousEvent = e.type;

         if ((e.type == 'click' && validElement) || (e.type == 'focusout' && isTextInput)) {
            //აქ შეგვიძლია გამოვიძახოთ ივენთის უშუალო ჰენდლერი
         }

      };

   }
   
   div = null;
   
})();

ეს არის და ეს :) კოდის დეტალური გარჩევით თავს აღარ შეგაწყენთ, ხოლო რეალური დემონსტრაცია შეგიძლიათ იხილოთ აქ.

]]> http://www.code.ge/posts/handling-onchange-event-revisited/feed 2 HTML Form “elements” Property http://www.code.ge/posts/html-form-elements-property http://www.code.ge/posts/html-form-elements-property#comments Sun, 05 Apr 2009 23:16:04 +0000 იოსები http://www.code.ge/?p=219 ამ პოსტის დაწერამდე რამდენიმე წუთით ადრე წავაწყდი HTML form ელემენტის elements თვისებასთან დაკავშირებულ ერთ პრობლემას(შეცდომას) რომლის შესახებაც აქამდე არაფერი მსმენია და ცოტა არ იყოს უაზროდ დამახარჯინა დრო.

ცნობილია, რომ form ელემენტის აღნიშნული თვისება არის HTMLCollection ტიპის კოლექცია და იგი შეიცავს კონკრეტული HTML ფორმის შიგნით გამოყენებულ ყველა(input, select, button) ელემენტს. სწორედ ეს კოლექცია წარმოადგენს საჭირო ფორმის ელემენტებთან წვდომის ყველაზე უსაფრთხო(თურმე პირობითად) გზას.

როგორც აღმოჩნდა თუ ფორმის ელემენტებს მოვათავსებთ fieldset ტეგში(და წესით ეს ასეც უნდა გავაკეთოთ) elements კოლექცია მოულოდნელ რეზულტატს დაგვიბრუნებს. კერძოდ კი fieldset ელემენტიც(ან ელემენტები) ამ კოლექციაში აღმოჩნდება.

ჩემი ამოცანა მდგომარეობდა შემდეგში, რომ ფორმის ყველა ელემენტებისაგან მიმეღო მათი სახელებისა და მნიშნვნელობების ე.წ. key/value ობიექტი:

1
2
3
4
5
var map = {}, els = target.form.elements;
for (var i = 0, el; (el = els[i++]);) {
   map[el.name] = el.value;
}
console.log(map);

თუმცა ძალიან უცნაური შედეგი მივიღე რადგან fieldset ელემენტს არც name და არც value თვისებები არ გააჩნია.

პრობლემის იდენტიფიცირების შემდგომ ინტერნეტში მოვიძიე მცირეოდენი ინფორმაცია:

The HTML 4 standard adds new <fieldset> and <label> tags to the set of elements that can appear within a form. In IE 5 and later, placing a <fieldset> in a form causes a corresponding object to be added to the form’s elements[] array. Fieldset elements are not scriptable in interesting ways like other form elements are, and their objects do not have a type property like other form elements do. Therefore, the presence of Fieldset objects in the elements[] array seems like a mistaken design decision. This is particularly true since <label> tags do not cause corresponding objects to be added to the elements[] array. The Mozilla and Netscape 6 browsers have chosen to follow Microsoft’s lead on this in order to be compatible with IE.

What this means is that if you define a form that contains fieldsets, the contents of the elements[] array differ in recent, HTML 4-capable browsers and in older, pre-HTML 4 browsers. In this situation, using position-based numeric indexes in the elements[] array is not portable, and you should define name attributes for all your form elements and refer to them by name.

მოკლედ კვლავ IE :D ნუ რას ვიზამთ რეალობა ასეთია :P

]]> http://www.code.ge/posts/html-form-elements-property/feed 5 IE8 – ფინალური ვერსია გამოვიდა http://www.code.ge/posts/ie8-%e1%83%a4%e1%83%98%e1%83%9c%e1%83%90%e1%83%9a%e1%83%a3%e1%83%a0%e1%83%98-%e1%83%95%e1%83%94%e1%83%a0%e1%83%a1%e1%83%98%e1%83%90-%e1%83%92%e1%83%90%e1%83%9b%e1%83%9d%e1%83%95%e1%83%98%e1%83%93 http://www.code.ge/posts/ie8-%e1%83%a4%e1%83%98%e1%83%9c%e1%83%90%e1%83%9a%e1%83%a3%e1%83%a0%e1%83%98-%e1%83%95%e1%83%94%e1%83%a0%e1%83%a1%e1%83%98%e1%83%90-%e1%83%92%e1%83%90%e1%83%9b%e1%83%9d%e1%83%95%e1%83%98%e1%83%93#comments Thu, 19 Mar 2009 18:14:12 +0000 იოსები http://www.code.ge/?p=207 IE8 როგორც იქნა გვეღირსა და გამოვიდა IE8 – ს ფინალური ვერსია.

მიუხედავად იმისა რომ ბრაუზერების ვენდორებმა ძალიან გაგვანებივრეს ბოლო თვეების მანძილზე, ეს ინფორმაცია გაცილებით სასიხარულო და მნიშნველოვანი იყო ჩემთვის. რატომ? იმიტომ რომ დღესდღეობით IE6 და IE7 ორი გამორჩეულად ჩამორჩენილი ბრაუზერია რომლებსაც ბაზრის 67% უკავიათ ჯამში. იმედი მაქვს რომ IE8 რომელიც გაცილებით განვითარებულია მის ორ წინამორბედზე თუნდაც IE6 – ის სიკვდილს შეუწყობს ხელს. საბოლოო მომხმარებლისთვის შესაძლებელია ამას არსებითი მნიშნველობა არ აქვს, მაგრამ ჩემთვის(და არა მარტო) როგორც პროფესიონალისთვის ეს ძალიან ძალიან ძალიან მნიშვნელოვანია :)

მაშ ასე გადმოწერეთ და გაავრცელეთ რაც შეიძლება ჩქარა აიძულეთ ყველა IE – ს მომხმარებელს რომ ეს განახლება რაც შეიძლება სწრაფად გააკეთოს, ამითი ყველა დავაჩქარებთ IE6 – ის საბოლოო გარდაცვალების პროცესს :D

]]> http://www.code.ge/posts/ie8-%e1%83%a4%e1%83%98%e1%83%9c%e1%83%90%e1%83%9a%e1%83%a3%e1%83%a0%e1%83%98-%e1%83%95%e1%83%94%e1%83%a0%e1%83%a1%e1%83%98%e1%83%90-%e1%83%92%e1%83%90%e1%83%9b%e1%83%9d%e1%83%95%e1%83%98%e1%83%93/feed 9 საინტერესო JavaScript ტესტი meebo.com – ზე http://www.code.ge/posts/interesting-javascript-test-at-meeb http://www.code.ge/posts/interesting-javascript-test-at-meeb#comments Wed, 23 Jul 2008 23:28:48 +0000 იოსები http://www.code.ge/?p=134 ეხლახანს meebo.com – ზე შევიარე, და რატომღაც ვაკანსიების განყოფილებას გადავხედე, დამაინტერესა რა პოზიციებზე აქვს ვაკანსიები ამ კომპანიას… ერთერთი აღმოჩნდა javascript engineer (javascript ninja) და რატომღაც გადავხედე :P

პოსტში, ვაკანსიის აღწერის გარდა მითითებულია რამდენიმე JavaScript – თან დაკავშირებული შეკითხვა, და შევეცადე პასუხები გამეცა, ჩემის აზრით ეს დაგაინტერესებთ:

1. When does div.setAttribute(“###”) not equal div.###?

საკმაოდ მარტივი შეკითხვაა რადგან MDC – ს დოკუმენტაციაში პირდაპირ წერია, რომ, DOM ელემენტს ატრიბუტის შექმნის და მისთვის საწყისი მნიშნველობის მინიჭების აუცილებლობის შემთხვევაში უნდა გამოვიყენოთ el.setAttribute(attName, attValue); მეთოდი. ხოლო ამ ატრიბუტის მნიშვნელობის შემდეგი ცვლილებისათვის უნდა გამოვიყენოთ ელემენტის თვისება, ანუ: el.attName = attValue და არა setAttribute მეთოდი;

ციტატა დოკუმენტაციის გვერდიდან:

Using setAttribute() to modify certain attributes, most notably value in XUL and HTML and selected in HTML, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute(‘value’, val).

2. What’s the difference between these two statements:

a. var x = 3;
b. x = 3;

ეს შეკითხვაც არ მიეკუთვნება რთულ კატეგორიას. var ქივორდის გამოყენება ცვლადის აღწერის წინ მისი სკოუპის(გლობალური, ფუნქციის, კლასის) ფიქსაციისათვის გამოიყენება. ხოლო თუ არარსებულ ცვლადს მივანიჭებთ მნიშვნელობას var – ის გამოყენების გარეშე, მაშინ ეს ცვლადი გლობალურ კონტექსტში მოხვდება.

3. What’s the difference between:

a. !!(obj1 && obj2)
b. (obj1 && obj2)

ამ შემთხვევაში ნაჩვენებ ორ გამოსახულებას შორის მგონი არანაირი განსხვავება არ უნდა იყოს. a ვარიანტში, გამოსახულების წინ მითითებული ორი ძახილის ნიშანი(!!) ნიშნავს შემდეგს: მარჯვენა ძახილის ნიშანი (obj1 && obj2) გამოსახულების დაიყვანს boolean ტიპზე და შეცვლის მას საპირისპირო მნიშვნელობით(ანუ თუ გამოსახულების შედეგია false საპირისპირო მნიშვნელობა იქნება true და პირიქით), ხოლო მარცხენა ძახილის ნიშანი კვლავ შეცვლის ამ საპირისპირო მნიშვნელობას შესაბამისად.

a შემთხვევაში (obj1 && obj2) გამოსახულება ნებისმიერ შემთხვევაში დააბრუნების boolean ტიპის მნიშნველობას && – ის გამო, ხოლო ზემოთ აღწერილი ძახილის ნიშნების გამოყენება საბოლოო ჯამში მაინც იგივე შედეგს მოგვცემს.

რადან b შემთხვევაშიც a – ს მსგავსად, გამოსახულება აუცილებლად აბრუნებს boolean ტიპის მნიშვნელობას, ეს ნიშნავს იმას რომ ამ ორ გამოსახულებას შორის არანაირი განსხვავება არ არსებობს.

4. Write a one-line piece of JavaScript code that concatenates all strings passed into a function:

function concatenate(/*any number of strings*/) {
    var string = /*your one line here*/
    return string;
}

ეს შეკითხვა ძალიან საინტერესოა. პირობა მოითხოვს რომ, concatenate() ფუნქციისათვის გადაცემული ნებისმიერი რაოდენობის სტრიქონული ტიპის პარამეტრის კონკატენაცია მოხდეს ერთი სტრიქონი კოდით. JavaScript – ში ფუნქციის გამოძახების დროს, მას შეგვიძლია გადავცეთ ნებისმიერი რაოდენობის პარამეტრი. ფუნქციისათვის გადაცემული ყველა პარამეტრი ინახება arguments ობიექტში ჩამონათვალის სახით. ერთი შეხედვით arguments ობიექტი მასივს წააგავს, მაგრამ სინამდვილეში იგი ნამდვილი მასივი არ არის. გამომდინარე აქედან, არგუმენტების გაერთიანებას Array ობიექტის join() მეთოდის გამოყენებით ვერ შევძლებთ… რადგან arguments ობიექტს Array ობიექტის მეთოდები არ გააჩნია.

ამისათვის მოგვიწევს მსგავსი კოდის დაწერა:

function concatenate() {
    var string = Array.prototype.join.call(arguments);
    return string;
}

alert(concatenate('s1', 's2', 's3', 's4'));

გამოსავალი მდგომარეობს ფუნქციის call მეთოდის გამოყენებაში(იხ. პოსტი call და apply მეთოდების შესახებ).

პირველ რიგში Array ობიექტის join მეთოდს მივმართავთ prototype თვისების მეშვეობით. ხოლო შემდეგ ვიძახებთ ფუნქციის call მეთოდს, რომელსაც პირველ პარამეტრად გადაეცემა კონტექსტი. ამიტომ join() მეთოდის შესრულება მოხდება უშუალოდ arguments ობიექტის კონტექსტში, რაც თავის მხრივ join() მეთოდს წვდომას მისცემს arguments ობიექტის ყველა თვისებაზე. გამომდინარე იქედან რომ, arguments ობიექტი არის იტერირებადი, და მას გააჩნია length თვისება(რომელიც ასევე გააჩნია Array ობიექტს), join() მეთოდს ეძლევა იმის საშუალება რომ arguments ობიექტის ელემენტები დააჯგუფოს. შედეგად მივიღებთ ასეთ “s1,s2,s3,s4″ კონკატენირებულ სტრიქონს.

5. What do these two examples have in common?

Example 1:

var obj = document.getElementById('adiv');
document.getElementById('adiv').ptr = obj;

Example 2:

function assignClick() {
    var el = document.createElement('div');
    function handleClick() {
        el.innerHTML = 'clicked!';
    }
    el.attachEvent("onclick", handleClick);
}

ხო, ამ შეკითხვამ ცოტა არ იყოს დამაბნია, და არ ვიცი რამდენად სწორად მივხვდი. თუ თქვენს მოსაზრებებს მომაშველებთ ძალიან გამახარებთ :)

რამდენადაც მე ვვარაუდობ, პირველ მაგალითში DOM ელემენტის .ptr თვისებას უბრალოდ ვანიჭებთ obj ობიექტს.

მეორე მაგალითშიც იგივესთან უნდა გვქონდეს საქმე, რადგან attachEvent არის ივენთებთან მუშაობის IE – ს მოდელი რომელიც არცერთ სხვა ბრაუზერში არ გვხვდება. ნაჩვენებ კოდსა el.attachEvent(“onclick”, handleClick) და el.onclick = handleClick ამ კოდს შორის კი არანაირი განსხვავება არ არსებობს. W3C მოდელისგან განსხვავებით IE – ს attachEvent ზუსტად იგივეს აკეთებს რაც ელემენტის თვისებაზე ობიექტის მინიჭებაა(იხ. განსხვავება IE და W3C მოდელებს შორის). ამ განსხვავების საფუძველზე ვივარაუდე ეს პასუხი, თუმცა დარწმუნებული ნამდვილად არ ვარ.

Update: სწორი პასუხი იხილეთ კომენტარებში, მთელი წინა(წაშლილი) აბზაცი წარმოადგენს სრულ სისულელეს :D

]]> http://www.code.ge/posts/interesting-javascript-test-at-meeb/feed 3 IE6: მეხსიერების მენეჯმენტი და საინტერესო გამოსავალი http://www.code.ge/posts/ie6-memory-managemnt-and-interesting-solution http://www.code.ge/posts/ie6-memory-managemnt-and-interesting-solution#comments Wed, 12 Mar 2008 13:14:07 +0000 იოსები http://www.code.ge/javascript/ie6-memory-managemnt-and-interesting-solution ამ ბოლო დროს საკმაოდ ბევრს ვმუშაობა IE6 – ის მეხსიერებასთან დაკავშირებულ პრობლემებზე ე.წ. “memory leaks”. გამოცდილი JavaScript(უფრო სწორად JScript IE – ს კონტექსტში) დეველოპერებისათვის ეს პრობლემა უცხო არ არის. იმაზე ლაპარაკი თუ რატომ არსებობს ეს პრობლემა შორს წაგვიყვანს, ამიტომ კონკრეტული პრობლემის აღწერითა და მოძებნილი გამოსავალით შემოვიფარგლები.

მიუხედავად იმისა, რომ მეხსიერებასთან დაკავშირებული გაუგებრობების თავიდან ასაცილებლად არსებობს გარკვეული წესები რომლებიც აუცილებლად უნდა დავიცვათ, მაინც ჩემის აზრით ძალიან უცნაურ პრობლემას და შესაბამისად გამოსავალს წავაწყდი.

ჩემი ამოცანა იყო გამეკეთებინა ისეთი ტეგი, რომელზეც მაუსით დაწკაპუნებისას იგი გარდაიქმნებოდა ტექსტურ ველად, რათა შესაძლებელი გამხდარიყო ამ ტეგის შიგთავსის რედაქტირება (იხ. მაგალითი).

ამოცანა ძალიან მარტივია, თუმცა ჩემდა გასაოცრად მეხსიერების პრობლემა წარმოიქმნა. მეხსიერებაში რჩებოდა მიმთითებელი ამ ახლად შექმნილ input ელემენტზე, რასაც IE6 – ის შემთხვევაში მეხსიერების გადავსებამდე მივყევართ.

ამ ამოცანის გადასაწყვეტად დავწერე შემდეგი კოდი:

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
//ფუნქცია რომელიც ქმნის ტექსტურ ველს
function getInput(value) {
    var input = document.createElement('input');
   
    input.type  = 'text';
    input.value = value || '';
   
    input.onclick = function(e) {
        try {
            e = window.event || e;
            if (e.stopPropagation) {
                e.stopPropagation();
                e.preventDefault();
            } else {
                e.cancelBubble = true;
                e.returnValue = false;
            }
        } catch(e) {}
    }
   
    input.onkeydown = function(e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        if (key == 13) {
            this.onblur();
            return false;
        }
    };
   
    input.onblur = function() {
        this.parentNode.innerHTML = this.value;
    };
   
    return input;
}

//ფუნქცია რომლის მეშვეობითაც კონკრეტული ელემენტს ვაქცევთ რედაქტირებად ველად
function makeEditable(obj) {
    var input = getInput(obj.innerHTML);
    while(obj.firstChild) {
        obj.removeChild(obj.firstChild);
    }
    obj.appendChild(input);
    input.select();
    input.focus();
}

ეს ორი ფუნქცია ძალიან მარტივია და მათი დეტალური აღწერით არ შეგაწყენთ თავს. რაც მთავარია ამ კოდმა იმუშავა და შედეგიც შესაბამისი მივიღე. თუმცა ნაჩვენები მაგალითის Memory Leak Detector – ით გატესტვის შემდეგ (IE6 რეჟიმში), აღმოჩნდა რომ input ელემენტზე რჩებოდა მიმთითებელი.

კერძოდ კი, ინსტრუმენტმა მიმითითა კოდის ამ ნაწილზე:

1
2
3
4
5
6
7
8
     input.onkeydown = function(e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        if (key == 13) {
            this.onblur();
            return false;
        }
    };

სიმართლე ითქვას საბოლოოდ ვერ გავერკვიე რა იყო ამის მიზეზი, იმიტომ რომ სხვა მსგავს შემთხვევებში ნამდვილად არ წავწყდომივარ იგივე პრობლემას.

რაც შეეხება გამოსავალს, ერთადერთი რასაც მივხვდი input ელემენტი როგორმე უნდა გამენადგურებინა თავად “getInput” ფუნქციაში. რამდენიმე ხერხი გამოვიყენე, და საბოლოო ჯამში მივედი ასეთ შედეგამდე რამაც საბოლოოდ მოაგვარა პრობლემა:

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
function getInput(value) {

    var input = [document.createElement('input')];
   
    input[0].type  = 'text';
    input[0].value = value || '';
   
    input[0].onclick = function(e) {
        try {
            e = window.event || e;
            if (e.stopPropagation) {
                e.stopPropagation();
                e.preventDefault();
            } else {
                e.cancelBubble = true;
                e.returnValue = false;
            }
        } catch(e) {}
    }
   
    input[0].onkeydown = function(e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        if (key == 13) {
            this.onblur();
            return false;
        }
    };
   
    input[0].onblur = function() {
        this.parentNode.innerHTML = this.value;
    };
   
    return input.pop();
   
}

განსხვავებით პირველი ვარიანტისგან, თუ ყურადღებით დააკვირდებით კოდს დაინახავთ რომ ნაცვლად ცვლადზე პირდაპირ DOM ელემენტის მინიჭებისა, ამისათვის გამოვიყენე ჩვეულებრივი მასივი. ხოლო ფუნქციიდან მნიშვნელობის დაბრუნების დროს მასივის “pop” მეთოდი რომელიც მასივიდან ამოაგდებს ბოლო ელემენტს და აბრუნებს მას.

ამ მიდგომით ფაქტიურად ფუნქციაშივე მოვახდინეთ ელემენტის ე.წ. dereference, რამაც საბოლოო ჯამში მეხსიერების პრობლემა მოაგვარა. იგივე ინსტრუმენტით სკრიპტის გატესტვის შემდგომ აღარავითარი მიმთითებელი “input” ელემენტზე აღარ დარჩა.

მიუხედავად იმისა რომ ჩემთვის პირადად ბუნდოვანი დარჩა რა იწვევს მეხსიერების ამ პრობლემას, ჩემის აზრით ამ პატარა ამოცანამ ძალიან საინტერესო ხერხი მასწავლა, რომელიც ფუნქციიდან დასაბრუნებელ მნიშვნელობის მასივის მეშვეობით განადგურებაში მდგომარეობს.

იმედია ეს პატარა მაგრამ საინტერესო(ჩემის აზრით) დეტალი თქვენთვისაც სასარგებლო იქნება :)

]]> http://www.code.ge/posts/ie6-memory-managemnt-and-interesting-solution/feed 3 JavaScript ფაილების ჩატვირთვა საჭიროების მიხედვით http://www.code.ge/posts/loading_javascript_files_on_demand http://www.code.ge/posts/loading_javascript_files_on_demand#comments Sat, 08 Mar 2008 12:21:24 +0000 იოსები http://www.code.ge/javascript/loading_javascript_files_on_demand თანამედროვე ე.წ. RIA ვებ აპლიკაციებში, კლიენტის მხარეს განსაკუთრებული და საპასუხისმგებლო როლი აკისრია. სწორედ კლიენტის მხარეს იყრის თავს უამრავი CSS/JavaScript და სხვადასხვა გრაფიკული ელემენტები. RIA ტიპისი სისტემებში JavaScript – ს განსაკუთრებული როლი უჭირავს, რადგან სწორედ მისი მეშვეობით მიიღწევა აპლიკაციის განსაკუთრებული და მიმზიდველი ინტერქატიულობა. რაც უფრო მეტად არის დატვირთული მსგავსი ტიპის ელემენტებით აპლიკაცია მით უფრო მეტ რესურსს საჭიროებს იგი.

ერთი შეხედვით ამ ტიპის რესურსები(იგულისხმება ფაილების რაოდენობა, ზომა და ა.შ.) არ უნდა იწვედნენ განსაკუთრებულ სირთულეს, არც ჩატვირთვისა და არც სისწრაფის მიხედვით… თუმცა ეს მხოლოდ ერთი შეხედვით ჩანს ასე.

Yahoo! – ს ინჟინრებმა საკმაოდ საფუძვლიანი კვლევა ჩაატარეს ამ თემასთან დაკავშირებით და აღმოჩნდა რომ სერვერის გადატვირთვას სწორედ, დოკუმენტში ჭარბად გამოყენებული მსგავსი ელემენტები იწვევენ. გარდა სერვერის დატვირთვისა ეს თავისთავად ცხადია უარყოფითად აისახება თავად აპლიკაციის მომხმარებლებზე(ჩატვირთვის სისწრაფე, კოდის შესრულების/ინტერპრეტაციის დრო).

თუ მათ(და არა მხოლოდ მათ) რეკომენდაციებს გავითვალისწინებთ, ყოველი არასაჭირო ელემენტი უნდა ჩაიტვირთოს საჭიროების მიხედვით და არა ერთბაშად როგორც ეს ხდება უამრავ აპლიკაციაში.

ხშირ შემთხვევაში გამომდინარე ამოცანიდან და სისტემის სირთულიდან ასეთი ელემენტების საერთო რაოდენობამ ზომის მხრივ შესაძლებელია ჯამში შეადგინოს 500/1000 KB. ამ რესურსების ჩამოტვირთვას დამეთანხმებით რომ არცთუ ცოტა დრო და რესურსი ესაჭიროება. თუმცა ამ ელემენტებიდან მე პირადად გამოვარჩევდი JavaScript ფაილებს.

პრობლემა

რითია განსაკუთრებული JavaScript ფაილების ჩატვირთვის პროცესი? პირველ რიგში გავიხსენოთ თუ როგორ ვტვირთავთ JS ფაილებს ბრაუზერში:

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

ეს არის სტანდარტული კოდი რომელსაც ვიყენებთ ყველა JS ფაილების ჩასატვირთად. რა არის მასში განსაკუთრებული და პრობლემატური? პირველ რიგში განსაკუთრებულობა მდგომარეობს იმაში, რომ სანამ ბრაუზერი სერვერიდან ჩამოტვირთავს ამ ფაილს, სხვა ყველა პროცესი ჩერდება. გარდა ჩამოტვირთვისა ბრაუზერმა ჩამოტვირთულ კოდს უნდა გაუკეთოს ანალიზი, აღარაფერს ვამბობ იმ შემთხვევაზე თუ ფაილი ჩატვირთვის თანავე სრულდება და გარკვეული სირთულის ოპერაციებს ასრულებს.

ცხადია ერთი და ორი მცირე ზომის ფაილის შემთხვევაში ეს არანაირ პრობლემას არ წარმოადგენს, მაგრამ შეგახსენებთ რომ ამ შემთხვევაში საუბარი გვაქვს RIA – ზე, სადაც ხშირ შემთხვევაში ათობით მსგავსი ფაილის ჩატვირთვა ხდება საჭირო, რაც თავისთავად ცხადია იწვევს აპლიკაციის ჩატვირთვის საგრძნობლად შენელებას.

ამ პრობლემის გვერდის ავლის რამდენიმე მექანიზმი არსებობს, მათ შორის ბევრი ფაილის ერთ ფაილში მოქცევა და მისი კომპრესია რაც ნამდვილად ძალიან ეფექტური საშუალებაა, და ასევე JS ფაილების ჩატვირთვის კოდის დოკუმენტის ბოლოში მოქცევა body ტეგის დახურვამდე.

ამ საშუალებებიდან პირველი ნებისმიერ შემთხვევაში აუცილებელია, თუმცა მეორე მიდგომა ყოველთვის არ გამოდგება, რადგან ხშირად აპლიკაცია სრულად JavaScript – ზეა დამოკიდებული და მისი ჩატვირთვა/ინტერპრეტირება/შესრულება ნებისმიერ შემთხვევაში უნდა დასრულდეს რათა მომხმარებელმა შეძლოს სისტემასთან მუშაობა.

მიუხედავად პირველი მეთოდის ეფექტურობისა და აუცილებლობისა(!) ხშირად ესეც კი არ არის საკმარისი. წარმოგიდგენიათ ისეთი სისტემა რომელსაც ყველა მოდული ერთდროულად ესაჭიროება? და ამ ყველაფრის ერთად ჩატვირთვა აუცილებელია? დამეთანხმებით რომ ასეთი ტიპის სისტემებს იშვიათად შევხვდებით. სწორედ ამ ბოლო პრობლემიდან გამომდინარეობს JS ფაილების საჭიროების მიხედვით ჩატვირთვის ამოცანა. ამ პრობლემის გადასაჭრელად არსებობს სპეციალური ბიბლიოთეკები, სხვადასხვა ბიბლიოთეკებს გააჩნიათ ამ ამოცანის გადაჭრის საშუალებები, თუმცა ყოველთვის გარე ბიბლიოთეკებზე დამოკიდებულნი ვერ ვიქნებით და ზოგს შესაძლებელია ჩემსავით უყვარს ამ ენაზე კოდირება და პრობლემების თავად გადაჭრა. სწორედ ასეთი ხალხისთვის არის განკუთვნილი ეს პოსტი :)

გადაწყვეტა

როგორ უნდა ჩავტვირთოთ JS ფაილი საჭიროების დროს? პრინციპში ეს ძალიან მარტივი გასაკეთებელია(თუმცა ერთი შეხედვით), მაგალითში მოყვანილია შესაბამისი კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * @param String source of the JavaScript file
 */
function loadJS(src) {
      //შევქმნათ "script" ელემენტი
      var script = document.createElement('script');
      //მივუთითოთ ფაილის მისამართი
      script.src = src;
      script.type = 'text/javascript';
      //ჩავამატოთ ახლად შექმნილი "script" ელემენტი, დოკუმენტის head სექციაში
      document.head.appendChild(script);
}

სიმართლე ითქვას ფაილის ჩასატვირთად ზემოთ ნაჩვენები კოდი სრულებით საკმარისია… მაგრამ ზემოთ აღვნიშნე რომ ეს ამოცანა მარტივი მხოლოდ ერთი შეხედვით არის.

რაში მდგომარეობს ზუსტი პრობლემა? ამ ამოცანის გადაჭრისას თავის დროზე წავაწყდი შემდეგ პრობლემებს:

  1. თუ ფაილი ჩატვირთულია აღარ უნდა მოხდეს მისი ხელახალი ჩატვირთვა;
  2. ფაილის ზომიდან და ქსელის სისწრაფიდან გამომდინარე არ ვიცით როდის დაასრულებს ფაილი ჩატვირთვას;
  3. უნდა დავადგინოთ როდის დასრულდა ფაილის ჩატვირთვა, და ის კოდი რომელის შესრულებაც დამოკიდებულია ახლად ჩატვირთულ ფაილზე, შესრულდეს მხოლოდ ჩამოტვირთვის დასრულების შემდეგ;
  4. დასრულდა თუ არა ფაილის ჩამოტვირთვა მარტივი დასადგენია, თუმცა აქ განსხვავებამ იჩინა თავი ბრაუზერებს შორის. რა თქმა უნდა IE – მ გაიბრწყინა ტრადიციულად;

მაშ ასე, მივყვეთ ლოგიკურად:

  1. თუ ფაილი ჩატვირთულია აღარ უნდა მოხდეს მისი ხელახალი ჩატვირთვა

    ეს დეტალი სირთულეს არ წარმოადგენს, რადგან შესაძლებელია ჩატვირთული სკრიპტების მისამართების შენახვა და შემდგომ უკვე შედარების გაკეთება უკვე არსებულ მონაცემებთან.

    მე პირადად ამისათვის გამოვიყენე ჩვეულებრივი ობიექტი შემდეგი ხერხით:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /**
     * @param String source of the JavaScript file
     */
    function loadJS(src) {
        //რადგან ფუნქცია ასევე არის ობიექტი,
        //მისთვის ახალი "სტატიკური" წევრის დამატება
        //შესაძლებელია ქვემოთ ნაჩვენები ხერხით
        if (loadJS.scripts == undefined) {
            //ობიექტის შექმნა რომელშიც შევინახავთ ჩატვირთული ფაილების მისამართებს
            loadJS.scripts = {};
            //ყველა "script" ელემენტის მოპოვება და შემდგომ იტერაციის გზის მისამართების მოგროვება
            var scripts = document.getElementsByTagName('script');
            for (var i = 0; i < scripts.length; i++) {
                  if (scripts[i].src && scripts[i].src != null) {
                      //მისამართის შენახვა ობიექტის გასაღების სახით
                      loadJS.scripts[scripts[i].src] = 1;
                  }
            }
        }
    }

    როგორც მაგალითიდან ვხედავთ, ამ პრობლემის გადასაჭრელად საკმაოდ მარტივი მეთოდი გამოვიყენეთ. “script” ელემენტების იტერაციითა და “src” ატრიბუტის მნიშვნელობების მოგროვების გზით.

  2. ფაილის ზომიდან და ქსელის სისწრაფიდან გამომდინარე არ ვიცით როდის დაასრულებს ფაილი ჩატვირთვას;
  3. უნდა დავადგინოთ როდის დასრულდა ფაილის ჩატვირთვა, და ის კოდი რომელის შესრულებაც დამოკიდებულია ახლად ჩატვირთულ ფაილზე, შესრულდეს მხოლოდ ჩამოტვირთვის დასრულების შემდეგ;

    მეორე და მესამე პუნქტები ურთიერთდაკავშირებულია, და ამ პრობლემების გადასაჭრელად გვესაჭიროება ორი რამ: ა) “loadJS” ფუნქციისათვის მეორე პარამეტრის დამატება, რომელიც იქნება ე.წ. callback – ფუნქცია, რომლის გამოიძახებაც ფაილის ჩატვირთვის დასრულების შემდეგ მოხდება; ბ) ე.წ. queue(რიგი) რომელშიც შევინახავთ ამ callback – ებს, რათა მათი შესრულება მოხდეს კონკრეტულად მოთხოვნილი სკრიპტის ჩატვირთვის დასრულების შემდეგ. ეს საჭიროა იმ შემთხვევისათვის თუ ერთსა და იმავე სკრიპტზე მოთხოვნა რამდენჯერმე განმეორდება.

    აღსანიშნავია რომ “ა” პუნქტისათვის გასათვალისწინებელია ერთი დეტალი: ფუნქცია ყოველთვის არ სრულდება თავის საკუთარ კონტექსტში, ხშირად აუცილებელია ფუნქციის კონკრეტული ობიექტის კონტექსტში შესრულება. ამ პრობლემის თავიდან ასარიდებლად გამოვიყენებთ ჩვეულებრივ მასივს, რომლის პირველი ელემენტიც იქნება ობიექტი(ამ შემთხვევაში კონტექსტი), ხოლო მეორე პარამეტრი თავად callback ფუნქცია.

    “ბ” პუნქტისათვის საკმარისია აღვნიშნოთ, რომ “queue” – ს შესაქმნელად საკმარისია ჩვეულებრივი JS ობიექტი, რომელშიც გასაღების სახით გამოვიყენებთ “loadJS” ფუნქციის “src” პარამეტრს, ხოლო მნიშვნელობად ჩვეულებრივ მასივს რომელშიც შევინახავთ კონკრეტული მისამართის შესაბამის callback – ებს.

    თავად იმის დასადგენად სკრიპტის ჩამოტვირთვა დასრულებულია თუ არა გამოვიყენებთ “script” ელემენტის “onload” ივენთს, სწორედ მისი წარმოქმნის შემთხვევაში გვეცოდინება გარანტირებულად რომ სკრიპტი ჩამოიტვირთა და უსაფრთხოდ შეიძლება ამ სკრიპტთან დაკავშირებული callback – ების შესრულება.

    აქედან გამოდინარე კოდი მიიღებს შემდეგ სახეს:

    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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    /**
     * @param String source of the JavaScript file
     * @param Mixed callback function or object + function pair
     */
    function loadJS(src, callback) {
        //რადგან ფუნქცია ასევე არის ობიექტი,
        //მისთვის ახალი "სტატიკური" წევრის დამატება
        //შესაძლებელია ქვემოთ ნაჩვენები ხერხით
        if (loadJS.scripts == undefined) {
            //ობიექტის შექმნა რომელშიც შევინახავთ ჩატვირთული ფაილების მისამართებს
            loadJS.scripts = {};
            //ყველა "script" ელემენტის მოპოვება და შემდგომ იტერაციის გზის მისამართების მოგროვება
            var scripts = document.getElementsByTagName('script');
            for (var i = 0; i < scripts.length; i++) {
                  if (scripts[i].src && scripts[i].src != null) {
                      //მისამართის შენახვა ობიექტის გასაღების სახით
                      loadJS.scripts[scripts[i].src] = 1;
                  }
            }
        }
       
        //თუ "queue" ობიექტი არ არსებობს შევქმნათ იგი
        if (loadJS.queue == undefined) {
            loadJS.queue == {};
        }
       
        //"script" ელემენტის "onload" ივენთის ჰენდლერი
        /**
         * @param String source of the JavaScript File
         */
        var finishLoad = function(s) {
            //თუ მიმდინარე სკრიპტი იმყოფება რიგში
            if (loadJS.queue[s]) {
                //იტერაციის მეშვეობით სათითოად ვიღებთ ყველა "callback" ფუნქციას, და ვასრულებთ მათ
                for (var i = 0; i < loadJS.queue[s].length; i++) {
                    var _callback = loadJS.queue[s][i];
                    //თუ _callback არ არის მასივი ვასრულებთ მას როგორც ფუნქციას
                    //თუ მასივია ფუნქციის ".call" მეთოდის მეშვეობით ვასრულებთ მას შესაბამის კონტექსტში
                    !_callback.length ? _callback() : _callback[1].call(_callback[0]);
                }
                //რადგან სკრიპტის ჩატვირთვა დასრულდა, ვამატებთ მას ჩატვირთული კსრიპტების სიაში
                loadJS.scripts[s] = 1;
                //რადგან სკრიპტის ჩატვირთვა დასრულდა, ვშლით მას რიგიდან
                delete loadJS.queue[src];
            }
        }
       
        //შევამოწმოთ ჩატვირთულია თუ არა მოთხოვნილი სკრიპტი
        if (!loadJS.scripts[src]) {
            //სკრიპტი არ არის ჩატვირთული
            //შევამოწმოთ სკრიპტი ხომ არ იტვირთება (იმყოფება თუ არა რიგში)
            if (loadJS.queue[src] == undefined) {
               
                //ჩავამატოთ მისამართი რიგში, და შევქმნათ მასივი callback - ებისათვის
                loadJS.queue[src] = [];
               
                //შევქმნათ "script" ელემენტი და დავიწყოთ სკრიპტის ჩატვირთვა
                var script  = document.createElement('script');
                script.type = 'text/javascript';
                script.src  = src;
               
                //"_src" ატრიბუტი ხელოვნურია, და მისი მეშვეობით
                //"loadJS" ფუნქციის "src" პარამეტრის საწყის
                //მნიშვნელობას ვინახავთ თავიდან გაუგებრობების ასაცილებლად
                script._src = src;
               
                //"script" ელემენტის "onload" ივენთის გამოყენება "callback" ფუნქციების შესასრულებლად
                script.onload = function() {
                    //ფაილის ჩამოტვირთვა დასრულებულია, შევასრულოთ მისი შესაბამისი რიგში მყოფი callback - ები
                    finishLoad(this._src); //ზემოთ შექმნილი "_src" ატრიბუტის გამოყენება
                }
               
                //ჩავამატოთ ახლად შექმნილი "script" ელემენტი, დოკუმენტის head სექციაში
                document.head.appendChild(script);

            }
           
            //ამ მომენტისათვის მოთხოვნილი სკრიპტი გარანტირებულად ზის რიგში,
            //უკვე შესაძლებელია დავამატოთ შესაბამისი callback - ი
            loadJS.queue[src].push(callback);
           
        } else {
            //თუ ფაილი უკვე ჩატვირთულია პირდაპირ ვასრულებთ ჰენდლერს
            //"callback[1]" არის ფუნქცია, ხოლო "callback[0]" ობიექტი(კონტექსტი)
            !callback.length ? callback() : callback[1].call(callback[0]);
        }
       
    }
  4. დასრულდა თუ არა ფაილის ჩამოტვირთვა მარტივი დასადგენია, თუმცა აქ განსხვავებამ იჩინა თავი ბრაუზერებს შორის. რა თქმა უნდა IE – მ გაიბრწყინა ტრადიციულად;

    რაც შეეხება IE – ს, განსხვავება ამ შემთხვევაში ძალიან მარტივი აღმოჩნდა და გამომდინარე აქედან მარტივადაც მოგვარდა. განსხვავება კი “script” ელემენტის “onload” ივენთი აღმოჩნდა, განსხვავებით სხვა ბრაუზერებისგან IE – ს “onload” – ის ნაცვლად აქვს “onreadystatechange” ივენთი. ამ ივენთის დამუშავების სპეციფიკა კარგად არის ყველასათვის ნაცნობი XHR ობიექტის დამსახურებით.

    ერთადერთი რაც ამ არათავსებადობის აღმოსაფხვრელად გვესაჭიროება არის შემდეგი კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    //თუ ბრაზუერი IE - ა
    script.onreadystatechange = function() {
        //უნდა შევამოწმოთ ორი სტატუსი: "loaded" და "complete"
        if (/^loaded|complete$/i.test(this.readyState)) {
            //ფაილის ჩამოტვირთვა დასრულებულია, შევასრულოთ მისი შესაბამისი რიგში მყოფი callback - ები
            finishLoad(this._src); //ზემოთ შექმნილი "_src" ატრიბუტის გამოყენება
        };
    }

    სულ ეს არის და ეს :)

დასკვნა

იმედი მაქვს ამჯერადაც თქვენთვის საინტერესო თემას შევეხე და ეს მცირედი მაგალითი სასარგებლო იქნება ამ ბლოგის JavaScript – ით დაინტერესებული მკითხველისათვის.

]]> http://www.code.ge/posts/loading_javascript_files_on_demand/feed 4 IE8 Beta: M$ – ის ნაბიჯი წინ! http://www.code.ge/posts/ie8-beta-m-%e1%83%98%e1%83%a1-%e1%83%9c%e1%83%90%e1%83%91%e1%83%98%e1%83%af%e1%83%98-%e1%83%ac%e1%83%98%e1%83%9c http://www.code.ge/posts/ie8-beta-m-%e1%83%98%e1%83%a1-%e1%83%9c%e1%83%90%e1%83%91%e1%83%98%e1%83%af%e1%83%98-%e1%83%ac%e1%83%98%e1%83%9c#comments Fri, 07 Mar 2008 07:29:47 +0000 იოსები http://www.code.ge/iesucks/ie8-beta-m-%e1%83%98%e1%83%a1-%e1%83%9c%e1%83%90%e1%83%91%e1%83%98%e1%83%af%e1%83%98-%e1%83%ac%e1%83%98%e1%83%9c images_ie8betalogo.gif

გუშინ ჩემთვის ცნობილი გახდა რომ M$ – მა გამოუშვა IE8 Beta ვერსია, რომლის გადმოწერა შესაძლებელია ამ მისამართიდან.

სიმართლე ითქვას ძალიან გამეხარდა, მიუხედავად იმისა რომ დღესდღეობით არსებულ ბრაუზერებს შორის დომინირებენ IE6(სრული საძაგლობა) და IE7(შედარებით ნაკლები საძაგლობა), და მათ აღმოფხვრას წლები დასჭირდება მაინც ძალიან სასიხარულოა M$ – ის ასეთი პროგრესული ნაბიჯი.

მითითებულ ბმულებზე შეგიძლიათ ნახოთ თუ რა განახლებებია ამ ბრაუზერში, თუმცა გირჩევთ John Resig – ის დეტაულური მიმოხილვის წაკითხვას.

ამ ვერსიას აქვს ბევრი გაუმჯობესება და ახალი შესაძლებლობები, მათ შორის ძალიან სასიამოვნო და საინტერესო W3C – ს querySelector რეალიზაცია, რომელიც ამასწინად WebKit – ის ერთერთ ბოლო რელიზში გამოჩნდა პირველად.

ციტატა რესიგის პოსტიდან:

W3C: querySelector

A super-fast way of finding elements based upon a CSS selector. The second browser to implement the selectors API has hit the market (behind a WebKit nightly release).

It’s important to realize that any selectors here are completely reliant upon the browser’s native selector implementation. IE8 is only shooting for CSS 2.1 support – which means that you really shouldn’t be holding your breath for CSS 3 selectors. As I mentioned previously these blackbox APIs are going to be a source of never-ending hair-pulling and struggle going into the future.

მიუხედავად იმისა რომ ჯერჯერობით ამ ვერსიას ბევრი ნაკლი აქვს, ეს არის ძალიან პროგრესული რელიზი!

მაგალითად ამ რელიზში არ არის ჩადებული W3C მოდელის ივენთების მენეჯმენტის რეალიზცია(რაზეც ჩემს მიერ წინა პოსტში მქონდა საუბარი):

ციტატა რესიგის პოსტიდან:

W3C: Events

This is one area that is completely absent from this beta. We are still stuck with IE’s attachEvent system – no addEventListener in sight. I don’t know how serious they are about supporting Acid3 but it includes a test for addEventListener so they may want to consider it extra strongly.

I can partially understand their desire to keep their existing API but I don’t understand why they have no interest in, also, adding addEventListener, etc. to complement what’s there. I assume it’s because they would now have to support concepts like event capturing.

I’m really disappointed with this. This should’ve been a top priority fix before implementing new psuedo-XHR systems like XDomainRequest.

თუმცა ასეთი ნაკლოვანებების მიუხედავად, თუ M$ – მა ამ ტემპით განაგრძო თავისი ბრაუზერის დახვეწა, ეჭვგარეშეა რომ იგი აუცილებლად მოიპოვებს მსოფლიოს ერთერთი საუკეთესო ბრაუზერის სტატუსს.

აღსანიშნავია ასევე ე.წ. Developer Tools – ების პროგრესიც, M$ – მა ყველა დეველოპერისათვის კარგად ნაცნობი FireBug – ის ზუსტი კლონიც შემოგვთავაზა :) ეს ინსტრუმენტი ნამდვილად აკლდა IE – ს რაც კიდევ უფრო მეტად ართულებდა პროგრამირების პროცესს ამ აბსოლუტურად განსხვავებული ბრაუზერისათვის.

P.S.
თუ ვინმე დააინსტალირებთ და გატესტავთ იმედია კომენტარებს მომწერთ აქ :)

]]> http://www.code.ge/posts/ie8-beta-m-%e1%83%98%e1%83%a1-%e1%83%9c%e1%83%90%e1%83%91%e1%83%98%e1%83%af%e1%83%98-%e1%83%ac%e1%83%98%e1%83%9c/feed 8 IE vs W3C event handling http://www.code.ge/posts/ie-vs-w3c-event-handling http://www.code.ge/posts/ie-vs-w3c-event-handling#comments Wed, 05 Mar 2008 22:50:06 +0000 იოსები http://www.code.ge/javascript/ie-vs-w3c-event-handling ივენთები საკმაოდ პრობლემატური საკითხია თანამედროვე JavaScript პროგრამირებაში, რაც ცალსახად გამოწვეულია ყველასათვის კარგად ცნობილი და “საყვარელი” InternetExplorer – ის გამო. პრინციპში ძალიან ცოტაა ისეთი შემთხვევები როდესაც ამ პრობლემაზე გვერდის ავლა არ შეიძლება მარტივად, თუმცა ასევე არსებობს შემთხვევები როდესაც ეს არათავსებოდა ძალიან არასასიამოვნოდ იჩენს ხოლმე თავს.

მიუხედავად იმისა, რომ, W3C – ს მიერ საკმაოდ მკაფიოდ არის ჩამოყალიბებული ივენთ მენეჯმენტის მოდელი, IE როგორც სხვა, ასევე ამ შემთხვევაშიც მოწოდების სიმაღლეზეა და თავის განსაკუთრებულ და “უფრო სწორ” მიდგომას გვთავაზობს, რაც საბოლოო ჯამში იწვევს ორმაგი(მინიმუმ) კოდის წერის აუცილებლობას.

პრობლემა

W3C მოდელის მიხედვით DOM ელემენტის რომელიმე ივენთისათვის(მაგ. onclick, onmousedown, onmouseup და ა.შ.) შესაძლებელია იმდენი ივენთ ჰენდლერის(ფუნქცია/მეთოდი რომელიც ავტომატურად გამოიძახება ამ ივენთის წარმოქმნის შემთხვევაში) რეგისტრაცია რამდენიც ეს საჭიროა კონკრეტული ამოცანისათვის, ეს მიიღწევა DOM ელემენტის addEventListener მეთოდის გამოყენებით:

1
2
3
4
var el = document.getElementById('my-element');
el.addEventListener('click', myHandler1, false);
el.addEventListener('click', myHandler2, false);
el.addEventListener('click', myHandler3, false);

როგორც ვხედავთ მაგალითიდან, მეთოდის სიგნატურა ძალიან მარტივია:

  • ივენთის სახელი(ყურადღება მიაქციეთ ივენთის სახელი გადაეცემა “on” პრეფიქსის გარეშე);
  • ფუნქცია რომელიც გამოძახებული იქნება ამ ივენთის წარმოშობის შემთხვევაში;
  • და მესამე პარამეტრი რომელიც DOM – ის ხეში ივენთის გავრცელების მიმართულებას(ქვევიდან ზევით ანუ შვილიდან მშობლისკენ ან პირიქით ზევიდან ქვევით ანუ მშობლიდან შვილისკენ) განსაზღვრავს, თუმცა ეს თემა მიმდინარე პოსტს სცილდება ამიტომ უბრალოდ მუდმივად გამოვიყენებთ “false” პარამეტრს;

რა ხდება ივენთების ამ გზით რეგისტრაციის შემთხვევაში და როგორ მუშაობს ეს მოდელი?

როგორც ზემოთ ავღნიშნე, საჭირო ივენთის წარმოქმნის შემთხვევაში(ამ შემთხვევაში onclick) გამოიძახება შესაბამისი ფუნქცია(ამ მაგლითისათვის გამოძახებული იქნება: myHandler1, myHandler2 და myHandler3 ფუნქციები), მაგრამ აქ მნიშვნელოვანია ის დეტალი რომ ფუნქცია გამოიძახება არა თავის საკუთარ არამედ DOM ელემენტის კონტექსტში. ეს ნიშნავს იმას რომ “this” ფუნქციის შიგნით მიუთითებს DOM ელემენტს. მაგალითად:

1
2
3
4
5
6
7
function myHandler() {
      //"this" მიუთითებს DOM ელემენტს,
      //რაც ნიშნავს იმას რომ ფუნქცია სრულდება ამ ელემენტის(ობიექტის) კონტექსტში
      alert("element's id is: " + this.id);
}
var el = document.getElementById('my-element');
el.addEventListener('click', myHandler, false);

“my-element” – ზე დაწკაპუნების შემთხვევაში დავინახავთ შეტყობინებას “element’s id is: my-element”, რაც თავისთავად თვალსაჩინოს ხდის იმ ფაქტს რომ ივენთ მენეჯერი აკოპირებს ჰენლდერ ფუნქციის და იგი სრულდება მიმდინარე DOM ელემენტის კონტექსტში(უფრო მეტი სიცხადისათვის იხ. ანონიმური ივენთ ჰენდლერები და ანონიმური ფუნქციები).

ანალოგიური შედეგი შეგვეძლო მიგვეღწია შემდეგი ხერხით:

1
2
3
4
5
function myHandler() {
      alert("element's id is: " + this.id);
}
var el = document.getElementById('my-element');
el.onclick = myHandler;

ან უბრალოდ ასე:

1
2
3
4
var el = document.getElementById('my-element');
el.onclick = function() {
      alert("element's id is: " + this.id);
};

მიუხედავად იმისა რომ მეორე და მესამე მაგალითები თავსებადია ყველა ბრაუზერთად, მას აქვს ერთი უარყოფითი მხარე, ამ ხერხით შეუძლებელია ერთსა და იმავე ივენთისათვის მრავალი ჰენდლერ ფუნქციის რეგისტრაცია, რაც გარკვეულ შემთხვევებში დიდ უხერხულობებს იწვევს.

რა განსხვავებებია InetrnetExplorer – ში? IE – ს გააჩნია ზემოთ W3C – ს მსგავსი მიდგომა, თუმცა ეს მხოლოდ მსგავსებაა და ფუნქციონალურობის თვალსაზრისით აბსოლუტურად არაფერი არ აქვს საერთო ზემოთ აღნიშნულ მოდელთან.

IE გვთავაზობს ელემენტის ივენთის რეგისტრაციის თავისებურ მექანიზმს DOM ელემენტის attachEvent მეთოდის მეშვეობით:

1
2
3
4
var el = document.getElementById('my-element');
el.attachEvent('onclick', myHandler1);
el.attachEvent('onclick', myHandler2);
el.attachEvent('onclick', myHandler3);

ეს მაგალითი მსგავისა W3C მოდელისა, თუმცა გარდა მეთოდის სახელის განსხვავებისა, ასევე განსხვავებულია თავად მეთოდის სიგნატურა:

  • ივენთის სახელი, თუმცა ამ შემთხვევაში “on” პრეფიქსი აუცილებელია;
  • შესაბამისი ჰენდლერი;
  • მესამე პარამეტრი საერთოდ არ არსებობს;

    • ამ მოდელის დანიშნულება ანალოგიურია W3C მოდელისა, და ამ ერთი შეხედვით მარტივი არათავსებადობის აღმოსაფხვრელად თითქოს საკმარისი მარტივი ე.წ. ვრაპერის დაწერა რომელიც ამ განსხვავებას დამალავს საბოლოო კოდისაგან. თუმცა თუ გადავწერთ პირველ მაგალითს ასე:

    1
    2
    3
    4
    5
    6
    function myHandler() {
          //ამ შემთხვევაში "this" მიუთითებს "window" ობიექტს
          alert("element's id is: " + this.id);
    }
    var el = document.getElementById('my-element');
    el.attachEvent('onclick');

    და შევასრულებთ IE – ში, მივიღებთ სრულიად განსხვავებულ რეზულტატს. რატომ? ეს ხდება იმიტომ რომ IE – ს ივენთების მენეჯერი უბრალოდ გამოიძახებს ამ ფუნქციას(ცხადია ეს ხდება DOM ელემენტის კონტექსტს მიღმა) და ამ შემთხვევაში “this” მიუთითებს არა DOM ელემენტს, არამედ გლობალურ “window” ობიექტს.

    გამოსავალი

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var EventWrapper = {
         /**
          * @param Object DOM element
          * @param String Event Name
          * @param Function Event Handler
          */
         addListener: function(el, eventName, handler) {
              //თუ ბრაუზერს გააჩნია W3C მოდელის რეალიზაცია
              if (el.addEventListener) {
                  el.addEventListener('click', handler, false);
              } else {//მხოლოდ InternetExplorer - ის შემთხვევაში
                  var fn = function() {
                        //კონტექსტის ფიქსაცია ფუნქციის "call" მეთოდის გამოყენებით
                        //"call" მეთოდს პირველ პარამეტრად გადაეცემა სასურველი კონტექსტი
                        handler.call(el);
                  }
                  el.attachEvent('on' + eventName, fn);
              }
         }
    };

    მაგალითიდან ნათლად ჩანს თუ რა განსხვავებაა W3C მოდელსა და InternetExplorer – ისათვის განკუთვნილ კოდში. პრობლემის აღმოფხვრა მარტივად ხორციელდება ფუნქციის “call” მეთოდის მეშვეობით, რაც სრულად ხსნის აღწერილ პრობლემას. თუ როგორ მუშაობს ფუნქციის “call” მეთოდი, შეგიძლია იხილოთ შესაბამისი პოსტი.

    დასკვნა

    მიუხედავად იმისა, რამდენად განსხვავებულიც არ უნდა იყოს ბრაუზერებს შორის ამა თუ იმ დეტალის რეალიზაცია, ნებისმიერ შემთხვევაში საჭიროა ალტერნატიული გზების ძებნა. ჩემს კონკრეტულ შემთხვევაშიც კი, მიუხედავად იმისა რომ პრიმიტივიზმის მომხრე ვარ და ყოველთვის ვცდილობ დავიცვა ეს წესი, მაინც ხშირად ვაწყდები მსგავს გამოუვალ მდგომარეობებს. ასეთი მდგომარეობებიდან გამოსავალის პოვნა როგორც წესი არ არის რთული, თუმცა არის შემთხვევები როდესაც მიგნებული გამოსავალი არ არის საუკეთესო და უფრო მეტ კვლევას შედარებით უფრო დახვეწილი შედეგისკენ მივყევარ. იმედია ეს პოსტი უფრო მეტ ნათელს მოჰფენს ამ საკითხს, ხოლო აღწერილი გამოსავალი პრობლემიდან სასარგებლო იქნება თქვენთვის.

    ]]>     http://www.code.ge/posts/ie-vs-w3c-event-handling/feed 4     IE incomplete DOM support… http://www.code.ge/posts/ie-incomplete-dom-support http://www.code.ge/posts/ie-incomplete-dom-support#comments Mon, 15 Oct 2007 08:29:17 +0000 იოსები http://www.code.ge/javascript/ie-incomplete-dom-support ამჯერად ყურადღებას შევაჩერებ DOM ელემენტის hasAttribute მეთოდზე. ამ მეთოდის სახელი საკმაოდ თვითდოკუმენტირებულია და ადვილი მისახვედრია რისთვისაც გამოიყენება.

    ზუსტი განმარტება:

    The hasAttribute() method returns TRUE if the current element node has the attribute specified by name, and FALSE otherwise.

    მაგრამ IE – ში DOM ელემენტს არ გააჩნია ეს შედარებით იშვიათად გამოყენებადი მაგრამ ძალიან სასარგებლო მეთოდი. თუმცა არსებობს სხვა საშუალება ამ ბრაუზერისათვის რომლის მეშვეობითაც ადვილად ავიცილებთ თავიდან ამ DOM – ის არასრული მხარდაჭერით გამოწვეულ პრობლემას.

    მაგალითად იმის დასადგენად ელემენტს გააჩნია თუ არა რომელიმე ატრიბუტი, შეგვიძლია დავწეროთ ასეთი კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var el = document.getElementById('my-element-id');
    var attributeName = 'type';

    //სტანდარტებთან თავსებადი ბრაუზერები
    if (el.hasAttribute) {
      return el.hasAttribute(attributeName);
    } else {
      //მხოლოდ IE
      return el.attributes[attributeName] && el.attributes[attributeName].specified;
    }

    მაგალითიდან ჩანს რომ IE – ს შემტხვევაში ვიყენებთ ელემენტის attributes თვისებას… ეს არის მასივის ტიპის თვისება რომელიც შიცავს ელემენტის ატრიბუტებს, და მისი მეშვეობით შეგვიძლია ამოვიღოთ ელემენტის სასურველი ატრიბუტი(და არა ატრიბუტის მნიშვნელობა)… ასევე ყურადღება მიაქციეთ .specified თვისებას, მისი მნიშვნელობა არის ან true თუ ატრიბუტი განსაზღვრულია ან false წინააღდმეგ შემთხვევაში მაგრამ არის ერთი მაგრამ… ამ კონსტრუქციას el.attributes[attributeName].specified ვერ გამოვიყენებთ თუ ატრიბუტი განსაზღვრული არ არის :D ანუ გამოდის რომ specified თვისება უსარგებლოა ისეთ შემთხვევაში თუ ატრიბუტი არ არსებობს და ჯერ საჭიროა ზოგადად ატრიბუტის არსებობა… ამას ვაღწევთ el.attributes[attributeName] – ის მეშვეობით, თუ ატრიბუტი არსებობს ხელთ გვაქვს ობიექტი რომელსაც აქვს თვისება specified… რატომ არ ვიყენებთ მხოლოდ ამ “el.attributes[attributeName]” კონსტრუქციას? მიზეზი მარტივია… მოყვანილი მაგალითის დანიშნულებაა დააბრუნოს ან true ან false და არა ობიექტი… სწორედ ამის გამო გამოვიყენე ასეთი ჩაწერა:

    1
    el.attributes[attributeName] && el.attributes[attributeName].specified;

    თუმცა ასეთივე წარმატებით შეგვეძლო გამოგვეყენებინა ორი უარყოფის(not) ოპერატორი:

    1
    !!el.attributes[attributeName];

    რას აკეთებს ორი “!!”? ამ შემთხვევაში მარჯვენა(მეორე) უარყოფის ოპერატორი გადაიყვანს object ტიპის მნიშვნელობას boolean ტიპის მნიშვნელობაში(შესაბამისად თუ გვექნება null იგი გარდაიქმნება true – დ, ხოლო თუ გვექნება null – იდან განსხვავებული მნიშნველობა ანუ ამ შემთხვევაში object იგი გარდაიქმნება false – დ), ხოლო მარცხენა(პირველი) ოპერატორი შეაბრუნებს ამ მნიშვნელობას ან ჭეშმარიტიდან მცდარისკენ ან პირიქით, რაც სრულებით საკმარისია მიზნის მისაღწევად.

    ]]>     http://www.code.ge/posts/ie-incomplete-dom-support/feed 1     javascript+xpath+IE… სრული ფიასკო :( http://www.code.ge/posts/javascriptxpathie-%e1%83%a1%e1%83%a0%e1%83%a3%e1%83%9a%e1%83%98-%e1%83%a4%e1%83%98%e1%83%90%e1%83%a1%e1%83%99%e1%83%9d http://www.code.ge/posts/javascriptxpathie-%e1%83%a1%e1%83%a0%e1%83%a3%e1%83%9a%e1%83%98-%e1%83%a4%e1%83%98%e1%83%90%e1%83%a1%e1%83%99%e1%83%9d#comments Wed, 10 Oct 2007 13:38:44 +0000 იოსები http://www.code.ge/javascript/javascriptxpathie-%e1%83%a1%e1%83%a0%e1%83%a3%e1%83%9a%e1%83%98-%e1%83%a4%e1%83%98%e1%83%90%e1%83%a1%e1%83%99%e1%83%9d აი მერე იტყვიან კარგი ბრაუზერია და რატომ აგინებო :( როგორ არ უნდა ვიგინო? რაღაცაში დამჭირდა xpath – ის სრული მხარდაჭერა HTML დოკუმენტების დასამუშავებლად… ვიწვალე დავწერე გავაკეთე ყველაფერი… მაგრამ რად გინდა? სულსწრაფობა მწარედ და ძვირად დამიჯდა…. ჩემი დაწერილი კოდი არ მუშაობს სრულ იდიოტთა მიერ შექმნილ IE – ში :( მათ შორის “უძალიან მაგრესია IE7, ტაბებიც კი აქვს” ბრაუზერშიც :(

    აი რაზე უნდა ელაპარაკო ამ წყეული IE – ს ვენდორს? რით ვერ გამოფხიზლდნენ და რით ვერ გამოიღვიძეს?????

    არ ვიცი… როდესმე რამე ეშველება თუ არა ამ სატანის გამოგონებას… ალბათ არა :(

    მოკლედ ყველა ბრაუზერში მუშაობს ასეთი რამ:

    1
    2
    3
    4
    var item, els = [], iterator = document.evaluate('//div/p[@class="some-class-name"]' document, null, 0, null); 
    while (item = iterator.iterateNext()) {
        els.push(item);
    }

    ალბათ კოდიდან მიხვდებით რაც ხდება… არ მაქვს დეტალების ახსნის თავი :(

    უბედურება ის არის რომ სხვა დანარჩენ ბრაუზერებში სადაც კი ეს კოდი გავტესტე ნეიტივად არის document.evaluate მეთოდი… გადასცემ xpath გამოსახულებას და დაგიბრუნებს სასურველ ელემენტებს… აკეთე რაც გინდა და რაც გაგეხარდება… მაგრამ… მაგრამ IE – ს საერთოდ არ შეუძლია HTML – სთან ამ გზით მუშაობა…

    ვეძებე.. თანაც ბევრი ვეძებე… და რას მივაგენი? :( აი ამას -> http://glazkov.com/blog/html-xpath-project

    ვინმე გლაზკოვის მიერ დაწერილ იმპლემენტაციას… რომელიც იწონის ძალიან ბევრს და ძალიან ნელია :( არადა მიხაროდა მთელი ამოცანა 1 კილობაიტში ჩავტიეთქო :(

    არავინ თქვას რომ ამ ბრაუზერს არსებობის უფლება აქვს!!!

    ]]>     http://www.code.ge/posts/javascriptxpathie-%e1%83%a1%e1%83%a0%e1%83%a3%e1%83%9a%e1%83%98-%e1%83%a4%e1%83%98%e1%83%90%e1%83%a1%e1%83%99%e1%83%9d/feed 4     IE6/7 bug: img ელემენტის რენდერინგის ბაგი http://www.code.ge/posts/ie67-img-rendering-bug http://www.code.ge/posts/ie67-img-rendering-bug#comments Wed, 03 Oct 2007 08:49:22 +0000 იოსები http://www.code.ge/css/ie67-img-rendering-bug ამ პოსტის დაწერა ფორუმის ამ პოსტმა გადამაწყვეტინა(ანუ პოსტი არის inspired by Rocko :D ) , რადგან არ მინდა ეს საკითხი მილიონობით ფორუმის პოსტში დაიკარგოს. ეს არის მარტივი თუმცა სასარგებლო გამოსავალი IE – სთვის დამახასიათებელი პრობლემისგან.

    თავისთავად პრობლემის არსი ძალიან მარტივია, ეს არის IE – ს რენდერინგის მორიგი ბაგი რომელიც გხვდება კონკრეტულად img ტეგთან მუშაობის დროს. თუ img ელემენტს განვათავსებთ div ან td ტეგში მას ქვედა მხარეს უჩნდება პატარა სივრცე, თუ სურათის კონტეინერს აქვს მითითებული ფონის ფერი მაშინ ეს ხარვეზი ბევრად უფრო თვალსაჩინო ხდება.

    მაგალითი:

    1
    2
    3
    <div style="width:200px; background-color:green;">
     <img src="img/image.gif" alt=""/>
    </div>

    თუ ამ კოდს ვნახავთ IE – ში დავინახავთ რომ სურათის ქვეშ არის გარკვეული სივრცე.

    სურათი 1:
    img-bottom-space.gif

    თუმცა გამოსავალი ამ პრობლემიდან არსებობს.

    გამოსავალი 1:

    1
    <div style="width:200px; background-color:green;"><img src="img/image.gif" alt=""/></div>

    ამ შემთხვევაში პრობლემა იხსნება თუ კოდს დავწერთ ერთ სტრიქონზე… მაგრამ თავისთავად ცხადია რომ ეს არ არის გამოსავალი…

    ნაცვლად ამისა შეგვიძლია პრობლემა გადავჭრათ img ელემენტის css – ით დამუშავებით თუ მას მივუთითებთ display: block;

    გამოსავალი 2:

    1
    2
    3
    <div style="width:200px; background-color:green;">
     <img src="img/image.gif" alt="" style="display: block"/>
    </div>

    სურათი 2:
    img-no-space.gif

    რაში მდგომარეობს პრობლემა? პრობლემა არის ის რომ img ელემენტის ნაგულისხმევი მნიშვნელობა display თვისებისათვის არის inline რის გამოც IE ამ ელემენტს აღიქვავს როგორც ტექსტს. ხოლო ელემენტს ქვედა მხრიდან სივრცეს უკეთებს იმის გამო რომ ეს სივრცე საჭიროა ისეთი ტიპის სიმბოლოებისათვის როგორიცაა: y, p, g…

    გამომდინარე აქედან ელემენტისათვის display: block; – ის მითითების შემთხვევაში IE არ დაამუშავებს მას როგორც ტექსტს და თავისთავად სივრცის პრობლემაც ქრება.

    თუმცა ყოველთვის რომ არ ვუთითოთ ელემენტს ეს სტილი, ამის გაკეთება შეგვიძლია ყველა ელემენტისათვის ერთხელ CSS ფაილში:

    1
    2
    3
    img {
        display: block;
    }

    რაც სამუდამოდ მოაგვარებს ამ პრობლემას.

    ]]>     http://www.code.ge/posts/ie67-img-rendering-bug/feed 3     IE6 BUG: დინამიური iframe http://www.code.ge/posts/ie6-dynamic-iframe-bug http://www.code.ge/posts/ie6-dynamic-iframe-bug#comments Fri, 28 Sep 2007 12:13:05 +0000 იოსები http://www.code.ge/javascript/ie6-dynamic-iframe-bug ეს თემა გარკვეულწილად უკავშირდება ერთერთ წინა პოსტს დინამიური ფორმებისა და ფორმის ელემენტების შესახებ.

    მსგავს პრობლემას ასევე ვაწყდებით iframe ელემენტთან მუშაობისას და შესაბამისად ისევ იგივე დილემის წინაშე ვდგებით… ანუ საჭიროა კოდის გაყოფა რომელიც ერთის მხრივ იმუშავებს IE – სთვის და მეორეს მხრივ სხვა ყველა დანარჩენი ბრაუზერისათვის.


    პრობლემა
    ისევე როგორც სხვა დანარჩენი ელემენტების შემთხვევაში ზოგჯერ საჭიროა iframe ელემენტის შექმნა დინამიურად. რა შემთხვევაა ეს? პირადად მე ყველაზე ხშირად ამას ვაკეთებ Ajax აპლოადის დროს… ანუ ყოველ დოკუმენტზე სადაც კი შეიძლება დამჭირდეს ფაილის აპლოადი არ არის აუცილებელი რომ წინასწარ შესაბამისი დამალული iframe ელემენტიც შევქმნა, ამას უნდა აკეთებდეს ფრეიმვორკი. ამის გაკეთება საკმაოდ მარტივია თუმცა IE – ში ყველაფერი ისე არ არის როგორც ეს უნდა იყოს.

    როგორ გამოიყენება ასეთი iframe ელემენტი? გამომდინარე იქედან რომ როდესაც გვინდა ფაილის ატვირთვა სერვერზე ფორმის საბმიტი უნდა მოხდეს ჩვენთვის საჭირო iframe – ს მეშვეობით, ხოლო ამისათვის საჭიროა რომ form ელემენტის target ატრიბუტს მივანიჭოთ სასურველი iframe ელემენტის სახელი ანუ მისი name ატრიბუტის მნიშვნელობა. თუმცა…


    მარტივი ტესტ კეისი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var iframe = document.createElement('iframe');
    iframe.name = 'test-iframe';
    iframe.id = 'test-iframe-id';
    iframe.style.width = '250px';
    iframe.style.height = '250px';

    document.body.appendChild(iframe);

    alert(document.frames['test-iframe']); //შედეგი ამ შემთხვევაში არის "undefined"

    შედეგი ისევე როგორც ფორმების შემთხვევაში არის “undefined“. ანუ ამ გზით შექმნილი iframe ელემენტი არ მოხვდა document ობიექტის frames მასივში, რაც ასეთ ელემენტს ჩვენთვის უსარგებლოს ხდის.


    გამოსავალი

    1
    2
    3
    4
    5
    6
    7
    8
    var iframe = document.createElement('<iframe name="test-iframe"></iframe>');
    iframe.id = 'test-iframe-id';
    iframe.style.width = '250px';
    iframe.style.height = '250px';

    document.body.appendChild(iframe);

    alert(document.frames['test-iframe'].id); //გამობეჭდავს ელემენტის id ატრიბუტის მნიშვნელობას

    მსგავსად დინამიური ფორმისა, ამ შემთხვევაშიც createElement მეთოდს გადავცემთ არა ელემენტის სახელს არამედ მის შესაქმნელად საჭირო HTML კოდს. ყურადღება მიაქციეთ name ატრიბუტს, იგი აუცილებლად უნდა მივუთითოთ.

    ასეთ შემთხვევაში ყველაფერი რიგზეა და iframe ელემენტზე შესაბამისი წვდომაც გაგვაჩნია და რაც ყველაზე მნიშვნელოვანია ეს გამოსავალი სრულად აგვარებს პრობლემას.

    ]]>     http://www.code.ge/posts/ie6-dynamic-iframe-bug/feed 0     IE Sucks: ახალი კატეგორია ბლოგზე http://www.code.ge/posts/ie-sucks-new-category http://www.code.ge/posts/ie-sucks-new-category#comments Fri, 28 Sep 2007 11:40:05 +0000 იოსები http://www.code.ge/iesucks/ie-sucks-new-category არა მე არ მძულს IE მე იგი მეზიზღება… მაგრამ მეზიზღება არა იმიტომ რომ მისი მწარმოებელი არის M$ და მე კი ბილ გეიტსის მტერი ვარ და ასე შემდეგ :P ამისათვის რამდენიმე მარტივი მიზეზი არსებობს:

    • ჯერ ერთი ეს ბრაუზერი მართლაც რომ SUCKS;
    • ყველაზე მეტ დროს როდესაც ვმუშაობ JavaScript – თან თუ CSS – სთან, სწორედ IE – სთვის ოპტიმიზაციაზე ვხარჯავ;
    • იმედი მქონდა რომ ახალი ვერსია გამართული იქნებოდა მაგრამ მაინც SUCKS;
    • IE6 – ს გააჩნია მეხსიერების მენეჯმენტის პრობლემა რაც ჩემი საზრუნავია;
    • და ბოლოს და ბოლოს ამას ეტიკეტი მოთხოვს :P

    რაც შეეხება ამ კატეგორიის დანიშნულებას, მასში განვათავსებ მხოლოდ ისეთ პოსტებს რომლებშიც მოხსენიებულია ისეთი პრობლემატური საკითხები რომლებიც პრობლემატურია მხოლოდ IE – ში(ანუ არის რეალიზაციის BUG) ან გამოგონილია IE – ს დეველოპერების მიერ და არცერთ სტანდარტში არ ჯდება რაც თავისთავად იწვევს კოდის გაყოფის საჭიროებას.

    გარდა ამისა იმედი მაქვს რომ ამ განყოფილებაში განთავსებული პოსტები დაეხმარება შედარებით გამოუცდელ JavaScript/CSS კოდერებს რათა უფრო ადვილად გაუმკლავდნენ IE – ს და მისთვის დამახასიათებელ პრობლემებს.

    P.S.

    IE Sucks!

    ]]>     http://www.code.ge/posts/ie-sucks-new-category/feed 5     IE6/7 BUG(s): დინამიური ფორმები და ფორმის ელემენტები http://www.code.ge/posts/ie67-bug-html-forms-and-elements http://www.code.ge/posts/ie67-bug-html-forms-and-elements#comments Fri, 28 Sep 2007 10:32:25 +0000 იოსები http://www.code.ge/javascript/ie67-bug-html-forms-and-elements უკვე აღარავისათვის აღარ წარმოადგენს სიურპრიზს ის რომ Internet Explorer 6 საშინლად გაუმართავი ბრაუზერია და მას ძალიან ბევრი ხარვეზი გააჩნია. თუმცა ძალიან საწყენია ის რომ ამ ბრაუზერის მეშვიდე ვერსიაშიც ძალიან ბევრი ისეთი ხარვეზი მეორდება რაც ჩემის აზრით უკვე აღმოფხვრილი უნდა ყოფილიყო.

    პრობლემათაგან ერთერთი ყველაზე არასასიამოვნო და ნიუანსური ჩემის აზრით არის HTML ფორმებთან და ფორმის ელემენტებთან მუშაობა JavaScript – ის DOM მეთოდებით.

    არასასიამოვნო იმიტომ რომ თითქმის ყველა არსებული ბრაუზერებისაგან განსხვავებით(რომლებიც გამართულად მუშაობენ სპეციფიკაციის მიხედვით) IE – ს გააჩნია ისეთი პრობლემა რაც თავისთავად კოდის გაყოფას იწვევს, და კვლავ ვღებულობთ: IE vs სხვა დანარჩენი ბრაუზერები!

    პრობლემა ფორმასთან

    ძალიან ხშირად, გარდა ელემენტებთან ჩვეულებრივი(მოპოვება, შეცვლა, ამოგდება დოკუმენტიდან) მუშაობისას ხშირად გვიწევს ელემენტების შექმნაც და შემდგომ უკვე დოკუმენტში ჩამატება. გამონაკლისი თავისთავად არც HTML ფორმაა, თავისთავად ფორმის შექმნა და მისი შემდგომი დამუშავება არ წარმოადგენს პრობლემას.. მაგრამ… IE – ში ეს ყველაფერი პრობლემაა…

    მარტივეი ტესტ კეისი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var form = document.createElement('form');
    form.name = 'test-form';
    form.action = '/test';
    form.enctype = 'multipart/form-data';

    //ფორმის დოკუმენტში დამატება
    document.body.appendChild(form);

    alert(document.forms['test-form']);

    IE – ში ამ კოდის გაშვების შემდეგ, შეტყობინება გამოგვიტანს… “undefined”

    რაოდენ უცნაურიც არ უნდა იყოს, მიუხედავად იმისა რომ ფორმა შევქმენით და ჩავამატეთ დოკუმენტში იგი არ მოხვდა document ობიექტის forms მასივში…


    გამოსავალი 1

    ამ პრობლემის გამოსავალი მარტივია თუმცა უცნაური… IE – სთვის დამახასიათებელი :D

    1
    2
    3
    4
    var form = document.createElement('<form name="test-form" enctype="multipart/form-data" action="/w" method="post"></form>');
    document.body.appendChild(form);

    alert(document.forms['test-form'].method); //გამობეჭდავს ფორმის method ატრიბუტის მნიშვნელობას

    უცნაურია ხომ? :) createElement – მეთოდს გადავეცით მთლიანი HTML კოდი ნაცვლად იმისა რომ მიგვეთითებინა უბრალოდ ელემენტის სახელი… თუმცა ეს გამოსავალი მუშაობს და მთლიანად ხსნის პრობლემას… თუმცა უნდა აღინიშნოს რომ ეს გზა მხოლოდ IE – სთვის არის მისაღები და “მშობლიური”


    გამოსავალი 2

    პირველი გამოსავალი თავისთავად გვიბიძგებს ახალი მოსაზრებისკენ… რომელიც თურმე ასევე კარგად და ეფექტურად მუშაობს, კერძოდ კი:

    1
    2
    3
    4
    var form = '<form name="test-form" enctype="multipart/form-data" action="/w" method="post"></form>';
    document.getElementById('form-container').innerHTML = form;

    alert(document.forms['test-form'].method);

    ამ შემთხვევაში საერთოდ არ გამოვიყენეთ createElement მეთოდი, ნაცვლად ამისა კონკრეტულ “form-container” ელემენტში(იგულისხმება რომ ეს ელემენტი უკვე არსებობს დოკუმენტში) მისი innerHTML თვისების მეშვეობით პირდაპირ ჩავსვით ფორმის შესაბამისი HTML კოდი… შედეგი სავსებით დამაკმაყოფილებელია რადგან იგი მუშაობს…


    პრობლემა ფორმის ელემენტებთან

    გამომდინარე წინა პრობლემიდან ცხადია რომ გასაკვირი არ უნდა იყოს თუ ფორმის ელემენტებსაც იგივე პრობლემა ექნებათ… და ეს ასეც არის. პრობლემა თითქმის ანალოგიურია და გამოსავალიც შესაბამისად წინა შემთხვევის მსგავსია.


    მარტივი ტესტ კეისი

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //ფორმის შექმნა
    var form = document.createElement('<form name="test-form" enctype="multipart/form-data" action="/w" method="post"></form>');
    document.body.appendChild(form);

    //ფორმის input ელემენტის შექმნა
    var input = document.createElement('input');
    input.name = 'test-field';
    input.value = 'test field value';

    //ელემენტის ფორმაში ჩამატება
    form.appendChild(input);

    //ახალ ელემენტზე მიმართვა
    alert(document.forms['test-form']['test-field']); //შედეგი არის რა თქმა უნდა "undefined"

    ამ შემთხვევაში ვქმნით ფორმას, ვქმნით ფორმის ელემენტს, ვამატებთ ახალ ელემენტს ფორმაში და შემდგომ უკვე მივმართავთ ამ ელემენტს… შედეგი არის კვლავ “undefined”…


    გამოსავალი 1

    გამოსავალი ამ შემთხვევაშიც მარტივია, თუმცა IE – სთვის განკუთვნილი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //ფორმის შექმნა
    var form = document.createElement('<form name="test-form" enctype="multipart/form-data" action="/w" method="post"></form>');
    document.body.appendChild(form);

    //ფორმის input ელემენტის შექმნა IE - სთვის მისაღები გზით
    var input = document.createElement('<input name="test-field"/>');
    input.value = 'test field value';

    //ელემენტის ფორმაში ჩამატება
    form.appendChild(input);

    //ახალ ელემენტზე მიმართვა
    alert(document.forms['test-form']['test-field'].value); //გამოიბეჭდება ველის value ატრიბუტის მნიშვნელობა

    ამ შემთხვევაში ყველაფერი რიგზეა. ელემენტსი შექმნისასა გამოყენებული იქნა ისეთივე კონსტრუქცია როგორც ეს გავაკეთეთ ფორმის შექმნის დროს… ანუ createElement მეთოდს გადავეცით პარამეტრად არა მხოლოდ ელემენტის სახელი, არამედ შესაბამისი HTML კოდი. ყურადღება მიაქციეთ რომ კოდში მთავარია მითითებული იყოს name ატრიბუტი.


    გამოსავალი 2

    ცხადია ფორმის მსგავსად, ველისთვისაც არსებობს მეორე გამოსავალი რომლის შესახებაც შეგიძლიათ წაიკითხოთ შესაბამის პოსტში სადაც ეს პრობლემა უფრო ვრცლად არის განხილული, რადგან ამ შემთხვევაში მხოლოდ innerHTML თვისების გამოყენება ვერ გვიშველის და საჭიროა დამატებითი ქმედებები.


    დასკვნა

    აღწერილი პრობლემა საკმაოდ არასასიამოვნოა, თუმცა გამოსავალი საკმაოდ მარტივია და ადვილად რეალიზებადი. თავის დროზე ამ პრობლემებზე საკმაოდ ბევრი დრო დავხარჯე, თუმცა იმედია ოდნავ მაინც შეგიმსუბუქებთ საქმეს და ეს პოსტი დაგეხმარებათ IE – სთან ბრძოლაში.

    ]]>     http://www.code.ge/posts/ie67-bug-html-forms-and-elements/feed 1     ელემენტის innerHTML თვისების დეტალები http://www.code.ge/posts/elements-innerhtml-property-details http://www.code.ge/posts/elements-innerhtml-property-details#comments Fri, 06 Jul 2007 11:06:46 +0000 იოსები http://www.code.ge/javascript/elements-innerhtml-property-details innerHTML თვისება ერთერთი გარდაუვალი დეტალია დღევანდელი RIA პროგრამირებისათვის(მცირეოდენი შესავალი შესაძლებელია წაიკითხოთ შესაბამის პოსტში), იგი არის სწრაფი, ეფექტური და რაც მთავარია მისი მხარდაჭერა ყველა ძირითად ბრაუზერს გააჩნია. მიუხედავად ამისა მას გააჩნია გარკვეული ხარვეზები, განსაკუთრებით კი ეს ხარვეზები თვალშისაცემია IE – ს შემთხვევაში.

    რაში გამოიხატება ეს ხარვეზები? პირველ რიგში აღსანიშნავია შემდეგი დეტალები:

    1. თუ ელემენტის შემადგენლობას შევცვლით არა DOM მეთოდების მეშვეობით არამედ innerHTML თვისების მეშვეობით ამ შემთხვევაში ირღვევა თვითონ DOM სტრუქტურა.
    2. თუ გვაქვს form ელემენტი და მის შემადგენლობას შევცვლით აღნიშნული თვისების მეშვეობით(მაგალითად: document.forms[0].innerHTML = ‘<input type=”text” name=”test”/><input type=”submit” value=”Submit”/>’;) ასეთი ფორმის სერვერზე გაგზავნის შემთხვევაში აღმოვაჩენთ რომ ფორმაში ახლად დამატებული არცერთი ელემენტის გაგზავნა არ მოხდება.
    3. innerHTML პრობლემატურია IE – ში, რადგან: ა) თუ ცხრილს არ აქვს განსაზღვრული
      ელემენტი შეუძლებელია დინამიურად ახალი სტრიქონების დამატება; ბ) innerHTML მაინც არ მუშაობს;

    რა გამოსავალი არსებობს ჩამოთვლილი პრობლემებიდან? პასუხი ერთადერთია ვიმუშავოთ DOM მეთოდების მეშვეობით, თუმცა ეს ძალიან რუტინული და არასასიამოვნო პროცესია, გარდა ამისა თავად DOM მეთოდებით მუშაობის დროს ასევე ვაწყდებით გარკვეულ ხარვეზებს IE – ში. თუმცა თავის დროზე ამ საკითხებზე მუშაობის გამო წარმოქმნილი პრობლემების თავიდან ასარიდებლად გარკვეული გამოსავალს მივაგენი რაც ჩემის აზრით სასარგებლო იქნება სხვებისთვისაც:

    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
    /**
     * @param String identifier of the element
     * @param String html code to be inserted into the element
     */
    function insertHTML(container, html) { 
     
      //კონტეინერი რომელშიც მოხდება html კოდის ჩასმა
      var container = document.getElementById(container);
      //დროებითი კონტეინერი
      var wrapper   = document.createElement('div');
     
      //წავშალოთ ელემენტის შიგნით არსებული ყველა ელემენტი
      while(container.firstChild) {
        container.removeChild(container.firstChild);
      }
     
      /*
       თუ კონტეინერი ელემენტი არის TBODY საჭიროა დამატებითი მოქმედებების შესრულება
       რადგან IE - ში innerHTML არც TBODY ტეგის შემთხვევაში არ მუშაობს
       */
      if (container.tagName.toLowerCase() == 'tbody') {
        wrapper.innerHTML = '<table>' + html + '</table>';
        var rows = wrapper.getElementsByTagName('tr');
        for (var i = 0; i < rows.length; i++) {
          container.appendChild(rows[i]);
        }
        rows = null;
      } else {
        /*
         სხვა დანარჩენ შემთხვევაში შემდეგი კოდი იმუშავებს უპრობლემოდ
         */
        wrapper.innerHTML = html;
        while(wrapper.firstChild) {
          container.appendChild(wrapper.firstChild);
        }
      }
     
      //მივანიჭოთ null გამოყენებულ ელემენტებს რათა თავიდან ავიცილოთ მეხსიერების გადავსება
      container = wrapper = null;
     
    }

    ნაჩვენები insertHTML ფუნქცია ღებულობს ორ პარამეტრს: 1) ელემენტი რომელშიც გვინდა ახალი HTML კოდის ჩამატება; 2) თავად HTML კოდი;

    როგორ მუშაობს ეს მეთოდი? თუ კოდს დავაკვირდებით დავინახავთ რომ HTML კოდის ჩასმა არ ხდება უშუალოდ სასურველ ელემენტში, ნაცვლად ამისა ვიყენებთ ახალ დროებით ელემენტს სახელად “wrapper”. პირველ რიგში სწორედ wrapper ელემენტში ვათავსებთ ახალ HTML კოდს innerHTML თვისების მეშვეობით ხოლო შემდგომ ამ ელემენტის შიგთავსს DOM მეთოდების მეშვეობით ვამატებთ სასურველ ელემენტში (while(wrapper.firstChild) { კონსტრუქცია). თუმცა იმ შემთხვევაში კონტეინერი არის TBODY ტიპის ასეთ შემთხვევაში საჭიროა ოდნავ განსხვავებული ქმედება რათა თავიდან ავირიდოთ გაუგებრობები. ნაცვლად პირდაპირ HTML კოდის ჩასმისა wraper – ში, მას ვფუთავთ <table> ტეგში, ხოლო შემდგომ უკვე ყოველ TR ელემენტს ვამატებთ სასურველ კონტეინერში.

    ]]>     http://www.code.ge/posts/elements-innerhtml-property-details/feed 6     “Ajax upload” & XML response http://www.code.ge/posts/ajax-upload-and-xml-response http://www.code.ge/posts/ajax-upload-and-xml-response#comments Tue, 22 May 2007 13:44:48 +0000 იოსები http://www.code.ge/javascript/ajax-upload-and-xml-response “Ajax upload” ანუ ფაილის ატვირთვა სერვერზე Ajax მიდგომით როგორც ასეთი მითია და სინამდვილეში არავითარი Ajax upload არ არსებობს გამომდინარე იქედან რომ ფაილის ატვირთვა სერვერზე სინამდვილეში არ ხდება XMLHttpRequest(XHR) ობიექტის გამოყენებით(და ეს შეუძლებელია ამ მომენტისათვის), ნაცვლად ამისა ამ ამოცანის გადასაჭრელად გამოიყენება დამალული iframe ელემენტი რაც ქმნის შესაბამის ილუზიას რომ ფაილის ატვირთვა ხდება ე.წ. “Ajax” მეთოდით.

    დღესდღეობით ეს გამოსავალი ერთადერთია და რაც ყველაზე მნიშვნელოვანია იგი მუშაობს და მუშაობს ძალიან კარგად, თუმცა არსებობს ერთი დეტალი რომელიც საკმაოდ პრობლემატურია. პრობლემა მდგომარეობს სერვერიდან დაბრუნებულ პასუხში(response).

    Ajax აპლიკაციის შექმნის ერთერთი აუცილებელი პირობაა სწორედ XHR ობიექტის გამოყენება. აღნიშნული ობიექტის მუშაობა არაფრით განსხვავდება ბრაუზერის მუშაობისგან, მისი მოვალეობაა სერვერზე მოთხოვნის გაგზავნა და შესაბამისად პასუხის მიღება. სერვერიდან დაბრუნებული პასუხი შეიძლება იყოს სამ ძირითად ფორმატში. ესენია:

    1. ჩვეულებრივ ტექსტი(plain text): ძირითადად გამოიყენება შედარებით მარტივ შემთხვევებში და სწრაფი რეზულტატის მისაღწევად;
    2. სწორად ფორმირებული XML დოკუმენტი: გამოიყენება სერვერიდან კომპლექსური პასუხების დასაბრუნებლად, პასუხი წარმოადგენს XHR ობიექტს responseXML თვისების მნიშვნელობას და იგი არის გამზადებული DOM ობიექტი რომელთან მუშაობაც თავისუფლად შესაძლებელია JavaScript – ის DOM მეთოდების მეშვეობით;
    3. Java Script Object Notation(JSON) ფორმატი: ასევე გამოიყენება კომპლექსურ შემთხვევებში და ეს ფორმატი წარმოადგენს გამზადებულ JavaScrip ობიექტს;

    სამივე ჩამოთვლილ ფორმატს გააჩნია თავისი უპირატესობები და უარყოფითი მხარეები. XML და JSON ფორმატს შორის არჩევანი ალბათ უფრო გემოვნების საკითხია და უმარავი მომხრე და მოწინააღმდეგე ჰყავს ამ ორივე ფორმატს, მე პირადად XML ფორმატის გამოყენების მომხრე ვარ და მიდმივად ამ ფორმატით ვმუშაობ.

    რაში გამოიხატება პრობლემა? როდესაც მოთხოვნა/პასუხი მთლიანად მუშავდება XHR ობიექტის გამოყენებით ყველაფერი ბუნებრივად და კარგად მუშაობს თუმცა როდესაც საჭიროა ისეთი HTML ფორმის გამოყენება რომლის მეშვეობითაც უნდა მოხდეს ფაილების ატვირთვა სერვერზე XHR გამოუყენებელი ხდება და იძულებული ვხდებით გამოვიყენოთ iframe ელემენტი. iframe – ს გამოყენების შემთხვევაში სერვერიდან პასუხი უნდა დაბრუნდეს HTML ფორმატში ნაცვლად ფორმირებული XML დოკუმენტისა, ეს აუცილებელია რადგან წინააღმდეგ შემთხვევაში ვერ შევძლებთ დაბრუნებული პასუხის კონტროლს(მე პირადად სხვა გზას ვერ მივაგენი). ჩამოტვირთული HTML დოკუმენტის გაკონტროლება კი ძალიან მარტივია, თუმცა აქ სხვა პრობლემას ვაწყდებით, კერძოდ კი HTML დოკუმენტში XML დოკუმენტის ჩაშენება არ შეიძლება(IE – ს გააჩნია მსგავსი შესაძლებლობა ე.წ. XML islands, მაგრამ სხვა ბრაუზერებში მსგავსი რამ არ მუშაობს). ერთადერთი გამოსავალია რომ სერვერიდან HTML – სთან ერთად დავაბრუნოთ XML დოკუმენტი მხოლოდ სტრიქონის სახით.


    სტრიქონიდან XML დოკუმენტის მიღება

    დავუშვათ XHR ობიექტის გამოყენების შემთხვევაში პასუხი სერვერიდან ბრუნდება მსგავსი XML დოკუმენტის სახით:

    <response>
    <item><![CDATA[This Is data]]></item>
</response>

    ასეთ შემთხვევაში დაბრუნებული პასუხი გამზადებულ DOM ობიექტია და მასთან მუშაობა პირდაპირ შესაძლებელია შესაბამისი მეთოდების გამოყენებით. ხოლო iframe – ს გამოყენების შემთხვევაში სერვერიდან იგივე XML დოკუმენტის დაბრუნება გვიწევს შემდეგი სახით:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    <head>
    </head>
    <body> 
      <div id="response">
        &lt;response&gt;&lt;item&gt;&lt;![CDATA[This Is data]]&gt;&lt;/item&gt;&lt;/response&gt;
      </div>
    </body>
    </html>

    ეს არის ჩვეულებრივი HTML დოკუმენტი რომელსაც გააჩნია ერთი div ელემენტი იდენტიფიკატორით response. სწორედ მასშია მოთავსებული XML დოკუმენტი, თუმცა განსხვავებით ზემოთ ნაჩვენები XML დოკუმენტისგან მასში არსებული ტეგის გამხსნელი < და დამხური > სიმბოლოები გარდაქმნიალია შესაბამის &lt; და &gt; სიმბოლოებში რათა თავიდან ავიცილოთ გაუგებრობები.

    ამ სტრიქონის წაკითხვა და გარდაქმნა შესაბამისად XML დოკუმენტში შესაძლებელია შემდეგი JavaScript – ის მეშვეობით:

    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
    /*
     *put this code after "response" div
     */

    //dom object
    var dom = null;

    //retrive string from "response" element
    var content = document.getElementById('response').innerHTML;

    //replace &lt; and &gt; back to  <> symbols
    content = content.replace(/&lt;/gi, '<');
    content = content.replace(/&gt;/gi, '>');

    //if current browser is IE ( :D )
    if (window.ActiveXObject) {
      dom = new ActiveXObject("Microsoft.XMLDOM");
      dom.async = false;
      dom.loadXML(content);
    } else { //all other browsers
      var parser = new DOMParser();
      dom = parser.parseFromString(content, "text/xml");
    }

    //read document element into response variable
    var response = dom.documentElement;

    //retrive first element from document and alert it's tag name
    alert(response.firstChild.tagName);

    ამ ჯავასკრიპტ კოდის ჩასმა(და დაბრუნება) შესაძლებელია ზემოთ ნაჩვნებ HTML დოკუმენტთან ერთად… მისი მუშაობის დეტალები მითითებულია კოდის კომენტარებში.

    ეს მიდგომა კრიტიკულად მნიშვნელოვანია ისეთ შემთხვევებში როდესაც საჭიროა სერვერიდან მიღებული პასუხის დამუშავება ერთი სტანდარტული გზით, და იგი თავიდან გვაცილებს ყოველი ცალკეული შემთხვევებისათვის ახალი ე.წ. Response Processor – ების წერის აუცილებლობას.

    ]]>     http://www.code.ge/posts/ajax-upload-and-xml-response/feed 5     დინამიური ივენთ ჰენდლერები http://www.code.ge/posts/dynamic-event-handlers http://www.code.ge/posts/dynamic-event-handlers#comments Sun, 18 Mar 2007 19:40:30 +0000 იოსები http://www.ioseb.com/javascript/dynamic-event-handlers ჩემდა სამარცხვნოთ მინდა ვაღიარო რომ ვერაფერი მოვუფიქრე ამ პოსტის სათაურს და პირდაპირ დავწერე “ივენთ ჰენდლერები” თუმცა თუ ალტერნატივას შემომთავაზებთ გადავარქმევ სახელს :)

    რაც შეეხება თავად პრობლემას(თუმცა პრობლემა ცალსახად მხოლოდ Internet Explorer – ში გვხვდება) მის წინაშე დღეს ჩემი მეგობარი აღმოჩნდა(რომელიც არ არის JavaScript დეველოპერი) და მკითხა თუ ვიცოდი რაიმე ამის შესახებ… საბედნიეროდ თავის დროზე საკმაოდ მაწვალა იგივე საკითხმა და პასუხი მქონდა, იმედია სხვა კოლეგებსაც გამოადგებათ ეს რეცეპტი…

    დინამიური ევენთ ჰენდლერის დამატება ელემენტისთვის თავისთავად არ წარმოადგენს პრობლემას, ვისაც კი ოდესმე დაუწერია რაიმე სულ პატარა JavaScript კოდი თავისთავად შეხებაც ექნებოდა ელემენტების შემდეგ ატრიბუტებთან: onclick, onmousedown, onchange და ა.შ. თუმცა როდესაც დოკუმენტის რომელიმე ელემენტი ან ელემენტები გენერირდება JavaScript DOM ფუნქციების გამოყენებით კლიენტის მხარეს, ხოლო ისეთ შემთხვევაში როდესაც საჭიროა რომელიმე ჩამოთვლილი ატრიბუტის გამოყენება, პირველ რიგში რაც შეიძლება მოგვივიდეს თავში აზრად ეს არის ელემენტის setAttribute მეთოდი რომლის მეშვეობითაც ხორციელდება ელემენტის ატრიბუტებისა და მათი მნიშვნელობების განსაზღვრა.

    მაგალითისათვის განვიხილოთ შემდეგი JavaScript კოდი:

    1
    2
    3
    4
    5
    6
    window.onload = function() {
      var div = document.createElement('div');  //create new div element
      div.appendChild(document.createTextNode('This is div element')); //append text node
      div.setAttribute('onclick', 'alert("test")'); //set event handler
      document.body.appendChild(div); //add new div element to document
    }

    ამ კოდში ვქმინით ახალ div ელემენტს, რომელსაც შიგნით ვამატებთ ახალ ტექსტურ ელემენტს, ვანიჭებთ onclick ატრიბუტის მნიშვნელობით alert(“test”) და ვამატებთ ახლად შექმნილ ელემენტს დოკუმენტში. ყველაფერი სწორია, ამ კოდის შესრულების შემდეგ დოკუმენტში ახლად გამოჩენილ div ელემენტზე ისრის დაწკაპუნების შემთხვევაში უნდა დავინახოთ შეტყობინება რომელიც დაწერს “test” – ს… თუმცა ეს კოდი მუშაობს ყველა ბროუზერში გარდა Internet Explorer – ისა.

    თუმცა საბედნიეროდ ამ მდგომარეობიდან არსებობს მარტივი გამოსავალი რომელიც აბსოლუტურად ერთნაირად მუშაობს ყველა ბროუზერში. ამისათვის თავისუფლად შეგვიძლია გამოვიყენოთ ანონიმური ფუნქცია როგორც ნაჩვენებია შემდეგ კოდში:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    window.onload = function() {
      var div = document.createElement('div');
      div.appendChild(document.createTextNode('This is div element'));
      //div.setAttribute('onclick', 'alert("test")');
      div.onclick = function() {
        alert('test');
      }
      document.body.appendChild(div);
    }

    როგორც მაგალითიდან ჩანს ამ პრობლემის გადასაჭრელად უბრალოდ გავაკომენტარეთ პირველ მაგალითში გამოყენებული მეთოდი და მის ნაცვლად გამოვიყენეთ ანონიმური ფუნქცია.

    onload და onunload მოვლენების და ასევე ანონიმური ფუნქციების შესახებ უფრო მეტი დეტალებისათვის შეგიძლიათ წაიკითხოთ შესაბამის პოსტებში.

    ]]>     http://www.code.ge/posts/dynamic-event-handlers/feed 4