Code.ge Blog » JavaScript http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Mon, 03 May 2010 14:38:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 JavaScript: String.replace() http://www.code.ge/posts/javascript-string-replace http://www.code.ge/posts/javascript-string-replace#comments Wed, 16 Sep 2009 20:27:52 +0000 იოსები http://www.code.ge/?p=332 რამდენიმე წლის წინ დავწერე პოსტი JavaScript – ით DOM ელემენტის სტილებთან მუშაობის შესახებ. ბრაუზერებს შორის სხვაობიდან გამომდინარე(კერძოდ კი IE – ს განსხვავებული მიდგომის გამო) პრობლემის გვერდის ასავლელად დავწერე ქვემოთ ნაჩვენები კოდი:

1
2
3
4
5
6
7
8
9
10
function getCamelCase(string) {
    var tokens = string.split('-');
    if (tokens.length > 1) {
        for (var i = 1; i < tokens.length; i++) {
            tokens[i] = tokens[i].substring(0, 1).toUpperCase() + tokens[i].substring(1).toLowerCase();
        }
        string = tokens.join('');
    }
    return string;
}

კოდის ერთადერთი დანიშნულებაა ტირეებიანი CSS ატრიბუტების მაგ. border-left-color, background-color გადაყვანა ე.წ. Camel Case ფორმატში ანუ borderLeftColor, backgroundColor და ა.შ.

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

1
2
3
4
5
6
7
8
var str = "some-test-string";
str.replace(/-([\w])/gi, function(a1, a2) {
    return a2.toUpperCase();
});

//კოდის შესრულების შემდეგ
//სტრიქონი "some-test-string"
//გარდაიქმნება შემდეგნაირად: "someTestString"

დამეთანხმებით რომ თვალსაჩინო სხვაობაა :D როგორ მუშაობს ეს კოდი? პირველ რიგში შეგახსენებთ თავად String ობიექტის replace() მეთოდის სიგნატურას:

str.replace(regexp|substr, newSubStr|function[, Non-standard flags]);

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//პიველი დამთხვევისათვის ანუ "-t"
function(
  "-t",  //რეგულარული გამოსახულების მიერ ნაპოვნი სტრიქონი სრულად
  "t",    //დამაჯგუფებელ ფრჩხილებში მოთავსებული შედეგი
  4,     //პოზიცია რომელზეც მოხდა პირველი დამთხვევა
  "some-test-string" //სრული სტრიქონი
);

//მეორე დამთხვევისათვის ანუ "-s"
function(
  "-s",  //რეგულარული გამოსახულების მიერ ნაპოვნი სტრიქონი სრულად
  "s",    //დამაჯგუფებელ ფრჩხილებში მოთავსებული შედეგი
  9,     //პოზიცია რომელზეც მოხდა პირველი დამთხვევა
  "some-test-string" //სრული სტრიქონი
);

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

  • პირველ პარამეტრად ყოველთვის გადაეცემა რეგულარული გამოსახულების მიერ ნაპოვნი სრული შესატყვისი;
  • ბოლო პარამეტრად ყოველთვის გადაეცემა სრული სტრიქონი რომლშიც განხორციელდა გარკვეული შესატყვისის ძიება;
  • ბოლოდან მეორე(ბოლოს წინა) პარამეტრად ყოველთვის გადაეცემა ნაპოვნი შესატყვისის პოზიცია.
  • თუ რამდენი პარამეტრის გადაცემა მოხდება პირველსა და ბოლო ორ პარამეტრს შორის დამოკიდებულია რეგულარულ გამოსახულებაში გამოყენებული დამაჯგუფებელი ფრჩხილების რაოდენობაზე(ჩემს მიერ ნაჩვენებ მაგალითში ასეთი პარამეტრი ერთია რადგან მხოლოდ ერთი დამაჯგუფება მაქვს გამოყენებული);
  • replace() მეთოდი გამოიძახებს ერთხელ თუ რეგულარული გამოსახულების ბოლოს არ გვაქვს მითითებული “g” ანუ გლობალური მოდიფიკატორი, ან გამოიძახებს იმდენჯერ რამდენი დამთხვევაც მოხდება კონკრეტული შესატყვისისათვის(ნაჩვენებ მაგალითში გამოძახება მოხდება ორჯერ).

enjoy B-)

]]> http://www.code.ge/posts/javascript-string-replace/feed 8 Jetpak – დამატებების ახალი სისტემა Mozilla – სგან http://www.code.ge/posts/jetpak http://www.code.ge/posts/jetpak#comments Thu, 21 May 2009 11:27:59 +0000 იოსები http://www.code.ge/?p=260 jetpack_logo საერთოდ ცნობილია რომ კონკურენცია ძალიან კარგი რამ არის. ამ მტკიცებულების სისწორის კიდევ ერთი ძალიან კარგი მაგალითი გვაქვს სახეზე კერძოდ კი Google Chrome – სა და Mofilla Firefox – ის ე.წ. extension – ების სისტემების სახით.

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

ცხადია ასე პირველივე დღიდან ყველაფერის ჩადებას ვერ მოახერხებდა Google თავის ახალ ბრაუზერში, თუმცა, როგორც მალე გაირკვა შეჩერებასაც არ აპირებდა. სულ რამდენიმე თვეში გამოჩნდა პირველი პროპოზალი რომელიც Chrome – ს დამატებების პლატფორმას შეეხებოდა. თუმცა ამ პროპოზალში ერთმა მეტად საგულისხმო დეტალმა გაიჟღერა – განსხვავებით FF – ის ანალოგიური სისტემისგან Chrome – ს დამატებების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. არავითარი XUL, არავითარი რთული XML კონფიგურაციის ფაილები დამატების ინსტალაციისათვის და ა.შ.

Google – ს ეს გდაწყვეტილება ჩემთვის პირადად გაცილებით მისაღები იყო რადგან XUL – ის ვერანაირ აუცილებლობას ვერც FF – ში ვხედავდი მანამდე და სიმართლე ითქვას ვერც დღეს ვერ ვხედავ… თუმცა არც Mozilla – მ დააყოფნა და დღეს უკვე შემოგვთავაზა FF – ის დამატებების შექმნის ახალი მექანიზმი. კერძოდ კი Jetpak!

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

In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

რითია საინტერესო Jetpak? პირველ რიგში ისევე როგორც Crhome – ს შემთხვევაში, Jetpak – ის შემთხვევაშიც დამატების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. ამ შემთხვევაშიც არავითარი XUL და რთული XML კონფიგურაციის ფაილები. ასევე არავიტარი ბრაუზერის გადატვირთვა დამატების ინსტალაციის შემდგომ და რაც ყველაზე ყველაზე ყველაზე მნიშვნელოვანია დეველოპმენტის პროცესში შეგვიძლია გამოვიყენოთ ნებისმიერი არსებული ინსტრუმენტული საშუალებები და Firebug დებაგირებისათვის რაც არსებულ მოდელში პრაქტიკულად შეუძლებელია. ასევე jQuery – ს მოყვარულთათვის ძალიან მნიშვნელოვანი ფაქტია რომ ეს ბიბლიოთეკა ნაგულისხმევად არის ჩადებული Jetpak – ში, რაც კიდევ უფრო გაამარტივებს დამატებების პროგრამირებას.

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

]]> http://www.code.ge/posts/jetpak/feed 8 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 JavaScript: Regex and Multi-line Mode http://www.code.ge/posts/javascript-regex-and-multi-line-mode http://www.code.ge/posts/javascript-regex-and-multi-line-mode#comments Tue, 21 Apr 2009 09:43:27 +0000 იოსები http://www.code.ge/?p=233 დღეს აღმოვაჩინე რომ JavaScript – ის Regex იმპლემენტაციას გარდა სხვა ნაკლოვანებებისა ასევე არ გააჩნია ე.წ. “multi-line match mode”. ამ შემთხვევაში ლაპარაკი არ მაქვს რეგულარული გამოსახულების “m” მოდიფიკატორის მხარდაჭერაზე, ლაპარაკი მაქვს “s” მოდიფიკატორზე რომელიც “.“(წერტილი) სიმბოლოს აიძულებს გარდა სხვა სიმბოლოებისა(ნაგულისხმევად “.” ნიშნავს “ნებისმიერი სიმბოლო გარდა ახალი სტრიქონის სიმბოლოსი”) ასევე მოძებნოს ახალი სტრიქონის სიმბოლო.

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

1
2
3
function myFunction($param1, $param2) {
      return array($param1, $param2);
}

ხოლო ნაპოვნი მონაკვეთიდან ამომეღო {code}{/code} ტაგებს შორის მოქცეული ტექსტი. თუმცა ეს გასაგები მიზეზების გამო არ გამომივიდა.

ნებისმიერ PCRE – სთან თავსებად იმპლემენტაციას გააჩნია “s” მოდიფიკატორი რომლის მეშვეობითაც მსგავსი ამოცანა წყდება ძალიან მარტივად. მაგალითად PHP – ში რეგულარულ გამოსახულებას ჩავწერდით შემდეგნაირად:

1
2
3
//ყურადღება მიაქციეთ გამოსახულების ბოლოში
//მიწერილ "s" სიმბოლოს
$regex = '/{code lang="(\w+)"}(.*?){\/code}/s'

სამწუხაროდ ასეთ გამოსახულებას JavaScript – ში ვერ დავწერთ. თუმცა, ცოტაოდენი კვლევაძიებისა და ექსპერიმენტების შემდგომ მივაგენი გამოსავალს რაც გამოიხატება სპეციფიური ე.წ. character class – ის გამოყენებაში. ამისათვის საჭიროა “\s” და “\S” მეტა სიმბოლოების დაჯგუფება character class – ში. შედეგად მივიღებთ შემდეგ გამოსახულებას:

1
[\s\S]

სადაც “\s” შეესაბამება ნებისმიერ უხილავ სიმბოლოს, ხოლო “\S” შეესაბამება ნებისმიერ არა უხილავ სიმბოლოს.

შედეგად მივიღე ასეთი JavaScript – ის რეგულარული გამოსახულება:

1
/{code\s+lang="(\w+)"}([\s\S]*){\/code}/

ეს გამოსახულება მუშაობს ანალოგიურად PCRE – სთან თავსებადი გამოსახულებისა რომელიც იყენებს “s” მოდიფიკატორს.

]]> http://www.code.ge/posts/javascript-regex-and-multi-line-mode/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 JavaScript: arrayChunk http://www.code.ge/posts/javascript-arraychunk http://www.code.ge/posts/javascript-arraychunk#comments Fri, 20 Feb 2009 19:01:46 +0000 იოსები http://www.code.ge/?p=200 დღეს კოდის წერისას დამჭირდა მასივის რამდენიმე თანაბარ ნაწილად დაყოფა, PHP – ს ამ ამოცანის გადასაჭრელად გააჩნია შესაბამისი array_chunk() ფუნქცია, მაგრამ, JavaScript – ს მსგავსი არაფერი გააჩნია.

ეს არის ე.წ. quick solution ამ ამოცანის გადასაჭრელად:

1
2
3
4
5
6
7
function arrayChunk(array, size) {
    var start = 0, result = [], chunk = [];
    while((chunk = array.slice(start, start += size)).length) {
        result.push(chunk);
    }
    return result;
}

ფუნქცია ღებულობს ორ პარამეტრს 1) მასივი რომელიც გვინდა დავყოთ; 2) თითოეული დანაყოფის ზომა;

თუ ამ ფუნქციას შეასრულებთ FireBug – ის კონსოლში:

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arrayChunk(a, 2));

მიიღებთ შემდეგ შედეგს:

 [[1, 2], [3, 4], [5, 6], [7, 8], [9]]

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

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

]]> http://www.code.ge/posts/javascript-arraychunk/feed 0 jCSS – რელიზის კანდიდატი http://www.code.ge/posts/jcss-%e1%83%a0%e1%83%94%e1%83%9a%e1%83%98%e1%83%96%e1%83%98%e1%83%a1-%e1%83%99%e1%83%90%e1%83%9c%e1%83%93%e1%83%98%e1%83%93%e1%83%90%e1%83%a2%e1%83%98 http://www.code.ge/posts/jcss-%e1%83%a0%e1%83%94%e1%83%9a%e1%83%98%e1%83%96%e1%83%98%e1%83%a1-%e1%83%99%e1%83%90%e1%83%9c%e1%83%93%e1%83%98%e1%83%93%e1%83%90%e1%83%a2%e1%83%98#comments Wed, 18 Feb 2009 10:19:27 +0000 იოსები http://www.code.ge/?p=194 დაუღალავი და საკმაოდ მძიმე შრომის შემდეგ დღეს ყველა ჩემს ხელთ არსებულ ვებ ბრაუზერში უნიტ ტესტებმა მწვანე აანთო :D რაც ნიშნავს იმას რომ jCSS – მა ყველა მითითებული ტესტი გაიარა წარმატებით(იხ. jCSS Test Suite).

picture-31

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

]]> http://www.code.ge/posts/jcss-%e1%83%a0%e1%83%94%e1%83%9a%e1%83%98%e1%83%96%e1%83%98%e1%83%a1-%e1%83%99%e1%83%90%e1%83%9c%e1%83%93%e1%83%98%e1%83%93%e1%83%90%e1%83%a2%e1%83%98/feed 6 jCSS – CSS Selector Engine http://www.code.ge/posts/jcss-css-selector-engine http://www.code.ge/posts/jcss-css-selector-engine#comments Thu, 12 Feb 2009 10:18:01 +0000 იოსები http://www.code.ge/?p=182 Hi all, ესე იგი მინდა წარმოგიდგინოთ ჩემი ერთერთი პატარა პროექტი სახელად jCSS. იგი წარმოადგენს JavaScript – ზე დაწერილ ე.წ. CSS Selector Engine – ს რომლის მეშვეობითაც მარტივად შეძლებთ HTML დოკუმენტის DOM ელემენტების ძებნას და რეზულტატის მიღებას ტიპიური CSS სელექტორების გამოყენებით.

მინდა აღვნიშნო რომ არავისთვის კონკურენციის გაწევას არ ვაპირებ ანუ jQuery, Mootools, Seezle და ა.შ. :D ეს არის ჩემი პირადი ექსპერიმენტი რომელსაც გარდა პრაქტიკული დანიშნულებისა გააჩნია წმინდა შემეცნებითი დატვირთვა და ამ მინი პროექტზე მუშაობისას ჩემს ძირითად ამოცანას წარმოადგენდა DOM ელემენტებში ნავიგაციისა და ციკლების წარმადობის კვლევა. ნებისმიერ შემთხვევაში სკრიპტი სრულად ფუნქციონალურია და შეგიძლიათ გამოიყენოთ.

წარმადობისა და რეალიზებული CSS სელექტორების ტესტი შეგიძლიათ ნახოთ აქვე. ტესტირებისათვის ვიყენებ Mootools – ის ავტორის მიერ შექმნილ ტესტირების სისტემას სახელად SlickSpeed ასე რომ შედეგებში ტენდენციურობა გამორიცხული :D შედარებისათვის გარდა jCSS – ისა ტესტში გამოვიყენე jQuery – ისა და Mootools – ის ბოლო სტაბილური ვერსიები.

გადაწერეთ jCSS!

გამოყენების მაგალითები:

1
2
3
4
var els = jCSS('#my-element-id div.my-class-name ul a');
for (var i = 0; i < els.length; i++) {
   //do something wit elements
}

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

enjoy :)

Update:
განვაახლე jCSS აწი უფრო სწრაფია FF, Opera და IE – ში.

SlickSpeed Benchmark: http://www.code.ge/jcss-test/slickspeed/

დავამატე Unit Test Suite ბრაუზერებს შორის და სხვადასხვა ტიპის სელექტორების იმპლემენტაციის სისწორის კონტროლისათვის:
Unit Test Suite: http://www.code.ge/jcss-test/slickspeed/frameworks/test/

Update:

  • დაიფიქსა ყველა ძირითადი ბაგი;
  • დაიხვეწა და განვითარდა Query Parser;
  • დაემატა ყველა ე.წ. ფსევდო კლასების მხარდაჭერა გარდა nth-child და nth-last-child ფსევდო კლასებისა;
  • კომპლექსური ფსევდო კლასების მხარდაჭერა;
  • დავამატე DOM ელემენტების სორტირება ნეითივ სელექტორების მიერ დაბრუნებულ რეზულტატებთან თავსებადობის გამო. თუმცა ამან წარმადობა შედარებით დაწია IE – სა და Opera – ში.
  • დაიხვეწა კონტექსტური პარამეტრების მხარდაჭერა, გარდა DOM ელემენტისა კონტექსტურ პარამეტრად შესაძლებელია გამოვიყენოთ როგორც სელექტორი ასევე DOM ელემენტების მასივი. მაგ:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      var nodes = jCSS(
       'div > p.paragraph-class-name',
       document.getElementById('my-element-id')
     );

     var nodes = jCSS(
       'div > p.paragraph-class-name',
       '#my-element-id:visible'
     );

     var nodes = jCSS(
      'a em',
      document.getElementsByTagName('h1')
     );
  • განვაახლე SlicckSpeed ანუ დავამატე YUI!, Prototype და Peppy სელექტორ ენჯინები;

    SlickSpeed Benchmark: http://www.code.ge/jcss-test/slickspeed/

  • განვაახლე და გავამდიდრე UnitTest ფრეიმვორკი:

    Unit Test Suite: http://www.code.ge/jcss-test/slickspeed/frameworks/test/

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

1
2
3
4
5
#form option:not(:contains('Nothing'),#option1b,:selected)

#form option:not(:not(:selected))[id^='option3']

:input:not(:image,:input,:submit)

ამ ეტაპზე ნეითივ სელექტორები გათიშული მაქვს Safari, Chrome, IE8 და FF3.1 – სთვის უკუთავსებადობის სრული ტესტირებისათვის. გარდა მაგისა არც ნეიტივ სელექტორები არ არის სრულყოფილად რეალიზებული და ნებისმიერ შემთხვევაში საჭიროა ე.წ. Custom Implmentation(განსაკუთრებით ეს ეხება IE8 – ს).

]]> http://www.code.ge/posts/jcss-css-selector-engine/feed 4 JavaScript WTF Vol. 5 – magic of onchange event http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event#comments Sat, 31 Jan 2009 11:06:59 +0000 იოსები http://www.code.ge/?p=168 ხშირად იყენებთ HTML ფორმის ელემენტების ამ ივენთს? :) და რა შემთხვევაში? ალბათ უფრო SELECT ელემენტთან მუშაობისას ხომ? თქვენი არ ვიცი მაგრამ ჩემს პირად პრაქტიკაში განსაკუთრებული გამოყენება ამ ივენთს არ ჰქონია… თუმცა ორიოდე დღის წინ ყველაფერი შეიცვალა და ჩემთვის ერთი ფრიად საინტერესო აღმოჩენა გავაკეთე.

ასეთი რამ გინახავათ?

<div onchange="handleEvent()">
//some other markup
</div>

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

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

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

1
2
3
4
5
6
7
8
9
10
<div id="container">
   <input type="text" name="f1" />
   <br />
   <input type="text" name="f2" />
   <br />
   <select name="s1">
       <option value="v1">Value 1</option>
       <option value="v2">Value 2</option>
   </select>
</div>

ნაჩვენები კოდის შესაბამისი ამოცანა მდგომარეობს ყველა INPUT და SELECT ელემენტის onchange ივენთის დაჭერასა და შესაბამის დამუშავებაში. ნაცვლად იმისა რომ გამოვიყენოთ სათითაოდ ყველა ელემენტს onchange ივენთი, მარტივად შეგვიძლია გავაკეთოთ შემდეგი რამ:

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById('container').onchage = function(e) {
   
   //მოვიპოვოთ Event ობიექტი
   e = e || window.event;
   
   //მოვიპოვოთ საწყისი ელემენტი რომელზეც უშუალოდ დაფიქსირდა ივენთი
   var targetElement = e.target || e.srcElement;

   //თუ ელემენტი არის SELECT ან INPUT ტიპის შევასრულოთ დანარჩენი სამუშაო
   if (/^input|select$/i.test(target.nodeName)) {
       //do something here
   }
}

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

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

enjoy :)

]]> http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event/feed 11 Ant, Rhino, YUICompressor & JS Packer http://www.code.ge/posts/ant-rhino-yuicompressor-js-packer http://www.code.ge/posts/ant-rhino-yuicompressor-js-packer#comments Mon, 22 Dec 2008 07:06:33 +0000 იოსები http://www.code.ge/?p=155 დაახლოვებით ერთი წლის წინ ზედაპირულად შევეხე JavaScript ფაილების კომპრესიას. ძველი პოსტის მიხედვით თუ ვიმსჯელებთ არცთუ ისე ცუდი შედეგია. თუმცა რამდენიმე დეტალი მაინც საჭიროებს გადახედვას, კერძოდ კი:

  • JavaScript ფაილების კომპრესიის პროცესი არ არის ავტომატიზებული;
  • ფაილების კომპრესია მთლიანად ეყრდნობა დენ ედვარდსის ე.წ Packer – ს რომელიც გარკვეულ მიზეზთა გამო საკმაოდ მოუხერხებელია;

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

მიზანი

  • JavaScript ფაილების გაერთიანება და ერთი საბოლოო ფაილის მიღება;
  • გაერთიანების შედეგად მიღებული ფაილის მინიფიკაცია და ობფუსკაცია;
  • მინიფიცირებული ფაილის ზომაში კიდევ უფრო მეტად შემცირება base62 კოდირებით;
  • საბოლოო ფაილის gzip კომპრესია;


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

project
    tools
    src
    build

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

უფრო კონკრეტულად კი მიზნის მისაღწევად დაგვჭირდება:

  • Apache Ant – თუ გიყენიათ JDK მას დამატებითი ინსტალაცია არ ესაჭიროება;
  • მოზილას Rhino – JavaScript for Java, JavaScript კოდის შესასრულებლად. გადმოწერეთ ბოლო ვერსია გახსენით არქივი და დააკოპირეთ js.jar ფაილი /project/tools კატალოგში;
  • ჟულიენ ლეკომტეს მიერ შექმნილი YUICompressor რომელსაც გამოვიყენებთ JavaScript ფაილების მინიფიკაციისა და ობფუსკაციისათვის. გადმოწერეთ ბოლო ვერსია გახსენით არქივი დააკოპირეთ build კატალოგში არსებული yuicompressor-2.x.x.ჯარ ფაილი /project/tools კატალოგში, შეუცვალეთ მას სახელი და დაარქვით yuicompressor.jar;
  • დენ ედვარდსის Packer რომლის მეშვეობითაც შევამცირებთ უკვე მინიფიცირებულ ფაილის მოცულობას
  • ჩემს მიერ დაწერილ პატარა სკრიპტი რომელიც საშულებას მოგვცემს Ant სკრიპტიდან გამოვიძახოთ Packer – ის pack მეთოდი მინიფიცირებული კოდის base62 კოდირებისათვის. ფაილი აერთიანებს როგორც ჩემს მიერ დაწერილ კოდს, ასევე დენ ედვარდსის Packer – ს. გადმოწერეთ ფაილი და დააკოპირეთ იგი /project/tools კატალოგში

სამუშაო გარემოს დასასრულებლად /project კატალოგში შექმენით ცარიელი build.xml ფაილი.
საბოლოო ჯამში მივიღებთ კატალოგებისა და ფაილების ასეთ სტრუქტურას:

project
    tools
        js.jar
        yuicompressor.jar
        pack.js
    src
    build
    build.xml

მანამდე სანამ შევუდგებით ფაილების უშუალო კომპრესიას /project/src კატალოგში დააკოპირეთ თქვენთვის სასურველი/საჭირო JavaScript ფაილები. ამ პოსტის წერისას, ტესტირებისათვის გამოვიყენე ორი ფაილი, jquery-1.2.6.js და jQuery – ს პლაგინი jquery.form.js .

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

<?xml version="1.0" encoding="UTF-8"?>
<project name="MyProject" default="build" basedir=".">

    <!-- Source Directory -->
    <property name="src" value="src" />
    <!-- Build Directory -->
    <property name="build" value="build" />
    <!-- Tools Directory -->
    <property name="tools" value="tools" />

    <target name="init">
        <!-- Cleanup build folder -->
        <delete>
            <fileset dir="${build}" includes="**/*.*"/>
        </delete>
    </target>

    <target name="build" depends="init">
        <!-- Concatenate source files -->
        <concat destfile="${build}/library.js">
            <filelist dir="${src}" files="jquery-1.2.6.js,jquery.form.js"/>
        </concat>
        <!-- Minify concatenated file with YUICompressor -->
        <java fork="true" jar="${tools}/yuicompressor.jar">
            <arg line="-o ${build}/library.min.js ${build}/library.js" />
        </java>
        <!-- Pack minified file with Dean Edwards' Packer -->
        <java fork="true" jar="${tools}/js.jar">
            <arg line="${tools}/pack.js ${build}/library.min.js ${build}/library.pack.js" />
        </java>
    </target>

</project>

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

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

ant

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

Buildfile: /Users/iosebdzmanashvili/Sites/test/pack/build.xml
init:
build:
     [java] completed...
BUILD SUCCESSFUL
Total time: 17 seconds

მაშ ასე ფაილების გაერთიანების, მინიფიკაციის, ობფუსკაციისა და კოდის base62 კოდირებაში გადაყვანის პროცესი დასრულებულია. თუ შეხვალთ /project/build კატალოგში, დაგხვდებათ სამი ფაილი:

  • library.js – რომელშიც გაერთიანებულია ზემოთ ნახსენები ორი JS ფაილი. ამ ფაილის ზომა დაახლოვებით 124KB – ს შეადგენს;
  • library.min.js – YUICompressor – ის მეშვეობით მინიფიცირებული ფაილი რომლის ზომაც დაახლოვებით 64KB – ა;
  • library.pack.js – Packer – ის მეშვეობით base62 კოდირებაში გადაყვანილი ფაილი რომლის ზომაც დაახლოვებით 36KB – ა;

დამერწმუნებით რომ შედეგი თვალსაჩიანოა და დამატებით კომენტარებს არ საჭიროებს, 124KB – დან საბოლოო ფაილი დავიყვანეთ 36KB – მდე რაც უდავოდ მნიშვნელოვანი სხვაობაა. თუ ამ ფაილს დამატებით პოსტის დასაწყიში ნახსენები მეთოდით დავამუშავებთ მისი ზომა დაახლოვებით 20KB – მდე დავა რაც თავისთავად ასევე მნიშვნელოვანია.

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

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

1
2
3
4
5
function myFunction() {
    var myPrivateFunction = function() {
       //rest of code here
    } //აქ აუცილებელია წერტილ მძიმე
}

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

ასევე ყურადღებას შევაჩერებ ჩემს მიერ დაწერილ პატარა სკრიპტზე რომლის მეშვეობითაც ხდება მინიფიცირებული კოდის base62 კოდირებაში გადაყვანა. სკრიპტი არის Rhino – ს რამდენიმე სტრიქონი კლიენტი რომლის შესრულებაც შესაძლებელია ტერმინალიდან. მას ესაჭიროება ორი პარამეტრი: 1) საწყისი ფაილი რომლის კოდირებაც გვესაჭიროება; 2) საბოლოო ფაილის სახელი;

Rhino – ს კლიენტი კითხულობს პირველ პარამეტრად გადაცემული ფაილიდან JavaScript კოდს, იძახებს Packer – ის pack მეთოდს შესაბამისი პარამეტრებით, და მიღებულ შედეგს ინახავს შესაბამის ფაილში:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
output = java.io.FileWriter(arguments[1]);  //obtain FileWriter object
output.write(
    pack(                                   //invoke Dean Edward's packer function
        readFile(                           //read input file: http://www.mozilla.org/rhino/shell.html
            arguments[0]                    //input file path
        ),            
        62,                                 //base62 encode
        0                                   //shrink variable names?
    )
);
output.close();
print('completed...');

//Dean Edwrads' Packer code here
]]> http://www.code.ge/posts/ant-rhino-yuicompressor-js-packer/feed 1 jQuery – მორიგი დიდი აღიარება 2 http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2 http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2#comments Mon, 29 Sep 2008 05:59:23 +0000 იოსები http://www.code.ge/?p=148 თითქმის ერთი წელი გავიდა მას შემდეგ რაც jQuery – ს დიდ აღიარებაზე დავპოსტე. ამ JavaScript ბიბლიოთეკას ჩემი ადვოკატობა ნამდვილად არ ესაჭიროება, მაგრამ, ამჯერად მისი აღიარების ძალიან მნიშვნელოვან ფაქტს აქვს ადგილი და არ შემიძლია არ დავწერო :)

jQuery – ს ოფიციალურ ბლოგზე ბოლო პოსტი ამ ღირსშესანიშნავ მოვლენას ეძღვნება: jQuery, Microsoft, and Nokia

Microsoft თავის ცნობილ ASP.NET Ajax ფრეიმვორკს სწორედ jQuery – თი გააფართოვებს და იგი გავრცელდება ვიჟუალ სტუდიოსთან ერთად. Nokia კი თავის Web Run-Time – ს გაამდიდრებს ამ ბიბლიოთეკით.

ასევე ამ თემას ეხება და ძალიან საინტერესოა GWTQuery(jQuery – ის მსგავსი იმპლემენტაცია) რომელიც GWT – ს ბოლო რელიზის პრეზენტაციის დროს აშკარად აქცენტირებული იყო :)

მანამდე რომ YUI – შიც დაამატეს ე.წ “query selector” – ის იმპლემენტაცია მაგაზე აღარაფერს ვამბობ… მთავარი ერთია, რომ ის მიდგომა რომელიც შეიმუშავა ჯონ რეზიგმა, დომინანტი აღმოჩნდა დღევანდელ JavaScript ბიბლიოთეკების გადატვირთულ ბაზარზე. არადა როგორ მწარედ მახსოვს რამდენჯერ მიკამათია მწარედ როგორც .Net – ის, ასევე GWT – სა და YUI – ს თაყვანისმცემლებთან jQuery – ის უპირატესობაზე… მაგრამ უშედეგოდ :D თუმცა როგორც იტყვიან აღდგომა და ხვალეო, დრომ ყველაფერი დაამტკიცა და თავის ადგილზე დააყენა…

Long Live jQuery :D

]]> http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2/feed 14 საინტერესო 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 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     Ajax: HTML ფორმის სერიალიზაცია POST რიქვესტისთვის http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98 http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98#comments Wed, 05 Dec 2007 08:10:44 +0000 იოსები http://www.code.ge/javascript/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98 ვაგრძელებ სერიალიზაციის თემას, და ამჯერად შევეხები HTML ფორმის სერიალიზაციას. HTML ფორმის სერიალიზაციაში იგულისხმება მისი ველების სახელებისა და მნიშვნელობების ჩვეულებრივ პარამეტრი/მნიშვნელობა(parameter/value) სტრიქონში გადაყვანა. ეს ფორმატი ყველასთვის კარგად არის ცნობილი და მას აქვს ტრადიცულად შემდეგი სახე:

    param1=value1&param2=value2&param3=value3

    ანუ პარამეტრი/მნიშვნელობა წყვილების ერთობლიობა, სადაც წყვილის გამოყოფად გამოიყენება & სიმბოლო.

    რა საჭიროა ფორმის ველებისა და მნიშნველობების ასეთი ფორმატში გადაყვანა? ეს მნიშვნელოვანი და აუცილებელია XMLHttpRequest (XHR) კონტექსტში. ცნობილია რომ ე.წ. “Ajax” აპლიკაციებში ფართოდ სწორედ ეს ობიექტი გამოიყენება, და უშუალოდ მისი მეშვეობით ხორციელდება ასინქრონული რიქვესტები(მოთხოვნები?) სერვერზე. გამომდინარე იქედან რომ XHR სერვერვთან კომუნიკაციისათვის იყენებს ჩვეულებრივ HTTP პროტოკოლს, მისი მეშვეობით სევერზე მონაცემების გაგზავნა შეგვიძლია ტრადიციულად ან POST ან GET მეთოდით.

    ცნობილია რომ GET მეთოდის გამოყენება რეკომენდირებულია ისეთ შემთხვევაში, როდესაც სერვერზე გასაგზავნი ინფორმაცია არის ძალიან მცირე. რადგან ამ მეთოდის გამოყენებისას სერვერზე გასაგზავნი ყველა პარამეტრი იგზავნება URI – ს მეშვეობით ცხადია რომ გარკვეული შეზღუდვა ინფორმაციის ზომაზე არსებობს.

    რაც შეეხება POST მეთოდს, იგი გამოიყენება ისეთ შემთხვევაში როდესაც სერვერზე გასაგზავნი ინფორმაციის ოდენობა არის დიდი. გამომდინარე იქედან რომ GET მეთოდისაგან განსხვავებით ამ ინფორმაციის გაგზავნა სერვერზე ხდება არა URI – ს მეშვეობით არამედ ის იდება უშუალოდ HTTP – ს ტანში ეს შეზღუდვა გარკვეულწილად იხსენბა.

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

    GET მეთოდის შემთხვევაში ეს არ წარმოადგენს პრობლემას, ზემოთ მოხსენიებული მიზეზის გამო და ასეთი URI – ს აწყობა საკმაოდ მარტივია თუნდაც პრიმიტიული ხელოვნური მეთოდით. მაგრამ POST მეთოდის გამოყენების შემთხვევაში საქმე ოდნავ უფრო რთულად არის. როგორც ზემოთ აღვნიშნე XHR – ში ფორმის ელემენტების HTTP ტანში ჩადება ავტომატურად არ ხდება… ამისათვის საჭიროა 1) ფორმის ყველა ელემენტისაგან ჯერ ავაწყოთ & სიმბოლოთი გაყოფილი პარამეტრი/მნიშვნელობა ტიპის სტრიქონი; 2) XHR – ის send მეთოდს გადავცეთ ეს სტრიქონი პარამეტრად.

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


    ფორმის სერიალიზაციისათვის საკმარისია ქვემოთ მოყვანილი 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
    30
    31
    function formToParams(form) {

        var fld, type, params = [], encode = encodeURIComponent;
       
        for (var i = 0; i<form .elements.length; i++) {
            if (form.elements[i].name) {
                fld = form.elements[i]; type = fld.type;
                if (/^checkbox|radio$/i.test(type)) {
                    if (fld.checked) {
                        params.push(fld.name + "=" + encode(fld.value));
                    }
                } else if (type == 'select-one') {
                    params.push(fld.name + "=" + encode(fld.value || fld.options[fld.selectedIndex].text));
                } else if (type == 'select-multiple') {
                    var opts = fld.options;
                    for (var j=0; j<opts.length; j++) {
                        if (opts[j].selected) {
                            params.push(fld.name + "=" + encode((opts[j].getAttribute("value") || opts[j].text)));
                        }
                    }
                } else {
                    if (!/^button|reset|file|undefined$/i.test(type)) {
                        params.push(fld.name + "=" + encode(fld.value));
                    }
                }
            }
        }
       
        return params.join('&');
       
    }

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

    შემდეგ ეტაპზე საჭიროა მეთოდი რომელიც XHR – ის მეშვეობით სასურველ მისამართზე გაგზავნის სერიალიზებულ ფორმას:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function doRequest(config) {        
        var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        req.open(config.method, config.url, true);
        req.onreadystatechange = function() {
            config.callback(req);
        };
        req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        req.send(config.params);        
    }

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

    {
    method: 'POST',
    url: 'http://mydomain.com/actionurl.php',
    params: 'param1=value1&param2=value2',
    callback: function(req) {
        if (req.readyState == 4 && req.status == 200) {
            //do something with result
        }
    }
}

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

    • method – სასურველი HTTP მეთოდი;
    • url – მისამართი რომელზეც გვსურს ინფორმაციის გაგზავნა;
    • params – პარამეტრი/მნიშვნელობა ტიპის სტრიქონი სტრიქონი;
    • callback – ფუნქცია რომელიც ავტომატურად იქნება გამოძახებული XHR ობიექტის onreadystatechange ხდომილების დროს;

    რაც შეეხება ამ ფუნქციების გამოყენების რეალურ მაგალითს მას შესაძლებელია ჰქონდეს მსგავსი სახე:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function test(button) {
        var params = formToParams(button.form);
        document.getElementById('result').innerHTML = params;
        doRequest({
            method: button.form.method,
            url: button.form.action + '?nocache=' + (new Date()).getTime(),
            params: params,
            callback: function(req) {
                if (req.readyState == 4 && req.status == 200) {
                    //do something here
                }
            }
          });
    }

    ამ ფუნქციას პარამეტრად გადაეცემა ჩვეულებრივი button ტიპის input ელემენტი. ეს ელემენტი ფლობს საჭირო ინფორმაციას ფორმის შესახებ. ხოლო ფორმას თავის მხრივ გააჩნია საკმაო ინფორმაცია(method, action ატრიბუტები) იმისათვის რომ ავაწყოთ პარამეტრების ობიექტი. ამ ფუნქციაში ყურადღებას იმსახურებს url პარამეტრის მნიშვნელობის აგება. ფორმის action ატრიბუტის მნიშვნელობას ვამატებთ nocache პარამეტრს რომლის მნიშვნელობაც არის მიმდინარე დრო. ეს აუცილებელია იმისათვის რათა IE – ში თავიდან ავირიდოთ კეშირება.

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

    ამ მაგლითისათვის სერვერის მხარეს გამოიყენება ერთი PHP ფაილი რომელშიც გამოყენებულია ქვემოთ მოყვანილი კოდი:

    1
    2
    3
    echo '<pre>';
    print_r($_POST);
    echo '</pre>';

    enjoy :)

    ]]>     http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98/feed 11     JavaScript: ობიექტის JSON სერიალიზაცია http://www.code.ge/posts/javascript-object-to-json-serialization http://www.code.ge/posts/javascript-object-to-json-serialization#comments Tue, 04 Dec 2007 10:26:42 +0000 იოსები http://www.code.ge/javascript/javascript-object-to-json-serialization JSON (JavaScript Object Notation) – ნოტაცია დღესდღეობით ფართოდ გამოყენებადი და ძალიან მოხერხებული საშუალებაა ინფორმაციის გაცვლისათვის. გამომდინარე იქედან რომ იგი არის ჩვეულებრივი სტრიქონი, იგი არ არის დამოკიდებული არც ენაზე და არც პლატფორმაზე.

    JSON თანაბარი წარმატებით გამოიყენება ისეთი მაღალი დონის ენებში როგორიც არის: Java, PHP, Ruby, C#, JavaScript და ა.შ. გარდა ამისა იგი არის ერთერთი შეუცვლელი ნაწილი თანამედროვე Ajax აპლიკაციებისა და ფართოდ გამოიყენება კლიენტსა და სერვერს შორის ინფორმაციის მიმოცვლისათვის.


    პრობლემა

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

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


    გამოსავალი

    იმისათვის რომ მოვახდინოთ ობიექტის სერიალიზაცია შესაძლებელია გამოვიყენოთ ქვემოთ მოყვანილი გზებიდან ერთერთი.

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

    var myObj = {
    id: 'some-unique-id',
    name: 'obj-name',
    values: [1, 2, true, false, null, 'some string'],
    nested: {
        name: 'nested obj name',
        value: {name: 'other nested obj'}
    }
}
    • JSON სტრიქონის ხელოვნურად აწყობა

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

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

      1
      2
      3
      4
      5
      6
      7
      var json = [];
      json.push('{id: "' + myObj.id + '",');
      json.push('name: "' + myObj.name + '",');
      json.push('values: [');
      for (var i = 0; i < myObj.values.length; i++) {
         json.push(myObj.values[i] + ',');
      }

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

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

      ობიექტის სერიალიზაციის კოდი:

      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
      function serialize(o, l) {
         
          var res = [], tmp = [], l = l || 1, key;
         
          var repeat = function(str, count) {
              var tmp = [];
              for (var i = 0; i < count; i++) {
                  tmp.push(str);
              }
              return tmp.join('');
          }
         
          for (var k in o) {
              key = o.constructor == Object ? k + ': ' : '';
              if (o[k] != undefined) {
                  if (o[k].constructor == Object) {
                      tmp.push(repeat("\t", l) + key + serialize(o[k], l+1));
                  } else if (o[k].constructor == Array) {
                      tmp.push(repeat("\t", l) + key + serialize(o[k], l+1));
                  } else {
                      if (o[k].constructor == String) {
                          tmp.push(repeat("\t", l) + key + '"' + o[k] + '"');
                      } else {
                          tmp.push(repeat("\t", l) + key + o[k]);
                      }
                  }
              } else if (o[k] === null) {
                  tmp.push(repeat("\t", l) + key + 'null');
              }
          }
         
          res.push((o.constructor == Object ? '{' : '[') + "\n");
          res.push(tmp.join(",\n"));
          res.push("\n" + repeat("\t", (l - 1)) + (o.constructor == Object ? '}' : ']'));
             
          return res.join('');
         
      }

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

      1
      2
      3
      var json = serialize(myObj);
      //json ცვლადის მნიშნველობა არის სწორად ფორმირებული JSON სტრიქონი
      //რომლის გაგზავნაც შესაძლებელია სერვერზე.

      ნაჩვენები კოდი ძალიან მარტივია, იგი არის ჩვეულებრივი რეკურსიული ფუნქცია რომელიც იქცევა ობიექტის თვისებების მნიშვნელობების მიხედვით, საბოლოო ჯამში კი აბრუნებს სწორად ფორმირებულ JSON სტრიქონს. აღასანიშნავია ის რომ ამ მეთოდს შეგვიძლია გადავცეთ ნებისმიერი სირთულის ობიექტი, ხოლო შედეგად მივიღებთ JSON სტრიქონს. ასევე აღსანიშნავია რომ ეს მეთოდი სტრიქონის ფორმირებისათვის იყენებს ახალი ხაზის(\n) და ტაბულაციის(\t) სიმბოლოებს, რაც მნიშვნელოვანია მიღებული შედეგის კითხვადობის თვალსაზრისით.

    რაც შეეხება დესერიალიზაციას JavaScript – ში, და სერიალიაზაცია/დესერიალიზაციას სერვერულ ენებში:

    • JavaScript 
      //eval ფუნქციის გამოყენებით
var myObj = eval(jsonString);

      თუმცა JavaScript – ში გაუგებრობების თავიდან ასაცილებლად, json სტრიქონის დესერიალიზაციისას მართებულია მოვიქცეთ შემდეგნაირად:

      try {
    //სტრიქონი მოვაქციოთ ფრჩხილებში
    var myObj = eval('(' + jsonString + ')');
} catch(e) {
    //სხვა, შესაბამისი მოქმედებები
}

      ამ შემთხვევაში ორი თავდაცვითი მექანიზმი გამოვიყენეთ: 1) JSON სტრიქონი მოვაქციეთ ფრჩხილებში; 2) კოდი შევასრულეთ try/catch ბლოკის შიგნით, რადგან თუ eval ფუნქციას გადავცემთ არაკორექტულ სტრიქონს მისი ობიექტად გარდაქმნა ვერ მოხერხდება რაც გამოიწვევს შეცდომას, ხოლო try/catch ბლოკი ამ შემთხვევაში საუკეთესო გამოსავალია შესაძლო გაუმართავობის სწორად დასამუშავებლად;

    • PHP 
      //PHP5 - ს აქვს ორი შესაბამისი ფუნქცია
//სერიალიზაცია
$arr = array('key1'=>'value2', 'key2'=>'value2');
$json = json_encode($arr);
//დესერიალიზაცია
$deserialized = json_decode($json);

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

    ]]>     http://www.code.ge/posts/javascript-object-to-json-serialization/feed 10     jQuery – მორიგი დიდი აღიარება http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90 http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90#comments Tue, 06 Nov 2007 22:32:50 +0000 იოსები http://www.code.ge/javascript/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90 ყველასათვის თუ არა, დეველოპერთა დიდი ნაწილისათვის ძალიან კარგად არის ცნობილი http://code.google.com სერვისი… ეს არის Google – ს ერთერთი ძალიან სასარგებლო რესურსი რომელიც გვთავაზობს უფასო ე.წ. პროექტების ჰოსტინგს…

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

    ცოტაოდენი დაძებნის შემდეგ მოვხვდი ამ პროექტის ბლოგზე, და წავაწყდი ამ პოსტს: My How We’ve Grown

    სადაც ყურადღება მიიპყრო შემდეგმა მოანკვეთმა:

    And we’re pleased to use jQuery, the wonderful open source JavaScript library (not ours, we’re just fans), to help power each page. Stay tuned — over the upcoming weeks we’ll offer detailed articles and tutorials about how we built the various parts of Google Code using open technologies.

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

    ]]>     http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90/feed 58     GeoKBD: პირველი განახლება http://www.code.ge/posts/geokbd-first-update http://www.code.ge/posts/geokbd-first-update#comments Fri, 26 Oct 2007 09:47:46 +0000 იოსები http://www.code.ge/javascript/geokbd-first-update პირველ რიგში დიდი მადლობა მინდა გადავუხადო გიორგი კობერიძეს აღმოჩენილი შეცდომისათვის სკრიპტში.

    რადგან სრულფასოვნად ვერ გავტესტე სკრიპტი, ბუნებრივია რომ არ იყო გამორიცხული მას ჰქონოდა შეცდომები… ეს ასეც აღმოჩნდა :P და ეხლა უშეცდომოდ(იმედი მაქვს) მუშაობს ყველაფერი.

    გარდა შეცდომის შესწორებისა რომელიც მდგომარებოდა ერთი და იგივე ფორმის ელემენტების ქართულ კლავიატურასთან მიბმაში, სკრიპტში ასევე შევიტანე სხვა მცირე ცვლილებები რომლებიც მის მოხმარებას უფრო გააიოლებს. ასევე დაფიქსულია Mac OS X Safari – ში აღმოჩენილი ბაგი, რომელიც ტექსტურ ველში პირველი სიმბოლოს აკრეფის დროს იყო.


    მცირეოდენი საჭირო განმარტებები

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

    GeoKBD.map('my-form', 'my-field-one');
GeoKBD.map('my-form', 'my-field-two');

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

    GeoKBD.map('my-form', ['my-field-one', 'my-field-two']);

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

    GeoKBD.map('my-form');


    სკრიპტის გადაწერა შეგიძლიათ პირდაპირ SVN რეპოზიტორიდან

    ]]>     http://www.code.ge/posts/geokbd-first-update/feed 8     ქართული კლავიატურის სკრიპტი http://www.code.ge/posts/georgian-keyboard http://www.code.ge/posts/georgian-keyboard#comments Tue, 23 Oct 2007 13:09:54 +0000 იოსები http://www.code.ge/javascript/georgian-keyboard ესე იგი მინდოდა თუ არ მინდოდა ირაკლი ნადარეიშვილმა მიბიძგა და ქართული კლავიატურის სკრიპტი დავწერე…

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

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

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

    ასევე საგულისხმოა ის რომ String ობიექტს ემატება ორი მეთოდი ესენია:

    1. translateToKA() – მეთოდი რომელსაც შეუძლია ნებისმიერი სტრიქონის პირდაპირ გადაყვანა ქართულ უნიკოდში. რაც ნიშნავს იმას რომ ამ მეთოდის გამოყენება თამამად შეგიძლიათ თქვენს სკრიპტებში.

      მეთოდის გამოყენება შეგიძლიათ შემდეგნაირად:

      var str = "es aris nebismieri teqsti";
alert(str.translateToKA());

//ან პირდაპირ ასე
alert("es aris text literali".translateToKA());
    2. pasteTo([html form element]) – რომელსაც პარამეტრად გადაეცემა ფორმის ელემენტი. ეს მეთოდი ტექსტის კოპირებას ახდენს ან პირდაპირ თუ ელემენტის მნიშვნელობა ცარიელია, ან იმ ადგილას სადაც ზის კურსორი, ან ჩაანაცვლებს მონიშნულ ტექსტს ახალი ტექსტით.

      მეთოდის გამოყენება შეგიძლიათ შემდეგნაირად:

      var str = "es aris nebismieri teqsti";
str.translateToKA().pasteTo(document.forms['my-form-name']['my-field-name']);

    კოდი ვრცელდება MIT ლიცენზიით

            /*
	 * GeoKBD 0.1 - Georgian keyboard and text convertation library
	 *
	 * Copyright (c) 2007 Ioseb Dzmanashvili (http://www.code.ge)
	 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
	 */

    გამოყენების მაგალითი

    HTML კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <form name="my-form" action="">
      <input type="checkbox" name="geo" checked="checked"/>
      <br />
      <textarea name="post" cols="40" rows="8"></textarea>
    </form>

    <br />
    <form name="another-form" action="">
      <input type="checkbox" name="geo1" checked="checked"/>
      <br />
      <textarea name="frm" cols="40" rows="8"></textarea>
    </form>

    JavaScript კოდი:

    1
    2
    GeoKBD.map('my-form', 'post');
    GeoKBD.map('another-form', 'frm', 'geo1');

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

    სკრიპტის მუშაობის პრინციპი მარტივია, GeoKBD ობიექტის map მეთოდს გადავცემთ სამ პარამეტრს:

    1. HTML ფორმის სახელი ან თავად HTML ფორმა
    2. იმ ველის სახელი რომელშიც შესაძლებელი უნდა იყოს ქართულად ბეჭდვა ან თუ გსურთ რომ ფორმის ყველა ველში იყოს შესაძლებელი ქართულად ბეჭდვა, მაშინ ამ პარამეტრის გადაცემა არ არის აუცილებელი
    3. კლავიატურის გადამრთველი ველის(checkbox) სახელი (არ არის აუცილებელი პარამეტრი, თუ ამ პარამეტრს არ გადავცმეთ გამოყენებული იქნება სახელი ‘geo’)


    პროგრამის სრული კოდი:

    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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    (function() {
     
      /*
       * GeoKBD 0.1 - Georgian keyboard and text convertation library
       *
       * Copyright (c) 2007 Ioseb Dzmanashvili (http://www.code.ge)
       * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
       */
     
      String.prototype.pasteTo = function(field) {
        field.focus();
        if (document.selection) {
          var selection = document.selection;
          var range = selection.createRange();
          range.colapse;
          if (range) {
            range.text = this;
          }
        } else if (field.selectionStart || field.selectionEnd) {
          var scrollTop = field.scrollTop;
          var start = field.selectionStart;
          var end = field.selectionEnd;
          var value = field.value.substring(0, start) + this + field.value.substring(end, field.value.length);
          field.value = value;
          field.scrollTop = scrollTop;
          field.selectionStart = start + this.length;
          field.selectionEnd = start + this.length;
        } else {
          field.value += this;
        }
      },
     
      String.prototype.translateToKA = function() {
       
        /**
         * Original idea by Irakli Nadareishvili
         * http://www.sapikhvno.org/viewtopic.php?t=47&postdays=0&postorder=asc&start=10
         */
        var index, chr, text = [], symbols = "abgdevzTiklmnopJrstufqRySCcZwWxjh";
       
        for (var i = 0; i < this.length; i++) {
          chr = this.substr(i, 1);
          if ((index = symbols.indexOf(chr)) >= 0) {
            text.push(String.fromCharCode(index + 4304));
          } else {
            text.push(chr);
          }
        }
       
        return text.join('');
       
      },
     
      GeoKBD = {
       
        event: {
         
          get: function(e) {
            return e || window.event;
          },
         
          getKeyCode: function(e) {
            e = this.get(e);
            return e.keyCode || e.which;
          },
         
          targetIs: function(e, tagName) {
            e = this.get(e);
            var t = e.target || e.srcElement;
            return t.tagName.toLowerCase() == tagName ? t : null;
          }
         
        },
       
        map: function(form, contentFieldName, switcher) {
         
          var self = this;
         
          form = (typeof form == 'string') ? document.forms[form] : form;
          switcher = switcher || 'geo';
         
          form.onkeypress = function(e) {
           
            e = self.event.get(e);
            if (e.altKey || e.ctrlKey) return;
           
            var target, fieldName = contentFieldName, _switcher = switcher, keyCode = self.event.getKeyCode(e);
           
            if (keyCode == 96) {
              this[_switcher].checked = !this[_switcher].checked;
              return false;
            }
           
            if (!this[_switcher].checked) return;
           
            if ((target = (self.event.targetIs(e, 'textarea') || self.event.targetIs(e, 'input')))) {
              if (fieldName && (target.name != fieldName)) return;
              text = String.fromCharCode(keyCode);
              kaText = text.translateToKA();
              if (kaText != text) {
                kaText.pasteTo(target);
                return false;
              }
            }
          }
         
          form = null;
         
        }
       
      };
     
      window.GeoKBD = GeoKBD;

    })();
    ]]>     http://www.code.ge/posts/georgian-keyboard/feed 25     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     ელემენტის პოზიციების დადგენა http://www.code.ge/posts/detecting-elements-position http://www.code.ge/posts/detecting-elements-position#comments Fri, 05 Oct 2007 10:12:47 +0000 იოსები http://www.code.ge/javascript/detecting-elements-position ამ პოსტს წესით უნდა ერქვას “Sometimes IE is the BEST” მაგრამ ცხადია ამას არ ვიზამ გასაგები მიზეზების გამო :P

    არააბსოლუტური პოზიციის მქონე ელემენტის პოზიციის(top, left) დადგენა დოკუმენტში საკმაოდ ბანალური საკითხია და პრინციპში ამის შესახებ პოსტის გაკეთების დიდ აზრს ვერასოდეს ვხედავდი… თუმცა გუშინ jQuery – ის ახალი რელიზის კოდის კითხვის დროს აღმოვაჩინე ისეთი რამ რასაც მართლა დიდი ხანია ვეძებდი და რასაც როგორც იქნა მივაგენი…

    თემა რა თქმა უნდა შეეხეა ელემენტის პოზიციის დადგენას და იმ პრობლემებს რომელიც ამ ამოცანის გადაჭრისას გვხდება, თუმცა უნდა ვაღიარო რომ ყველა ბრაუზერში მივიღე 100% – იანი შედეგი გარდა IE – სი. უფრო მეტიც ამ შემთხვევაში ქცევა IE6 – სა და IE7 – ს შორის განსხვავდება, და გასაგებია რომ ეს სიამოვნებას არ მომანიჭებდა.

    მაშ ასე რა გადაწყვეტასთან გვაქვს საქმე და რამ გამახარა ასე ძალიან?

    პრობლემა

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

    ელემენტის პოზიციის დასადგენი ტიპიური კოდი გამოიყურება ასე:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function getObjectPosition(obj) {
      var pos = {top: 0, left: 0};
      while(obj) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
      }
      return pos;
    }

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

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

    იმისათვის რომ არჩეული ელემენტის გადაფარვა მოხდეს სწორად გვესაჭიროება არჩეული ელემენტის ოთხი პარამეტრი. ესენია:

    1. top - ელემენტის პოზიცია ბრაუზერის ზედა მხრიდან;
    2. left - ელემენტის პოზიცია ბრაუზერის მარცხენა მხრიდან;
    3. width - ელემენტის ზუსტი სიგანე;
    4. height - ელემენტის ზუსტი სიმაღლე;

    ჩამოთვლილი პარამეტრებიდან width და height პარამეტრები ადვილი მოსაპოვებელია ელემენტის offsetWidth(სიგანისათვის) და შესაბამისად offsetHeight(სიმაღლისათვის) თვისებების მეშვეობით… თუმცა ელემენტის ზუსტი პოზიციის დადგენა გაცილებით რთული საკითხია რადგან… რადგან offsetTop და offsetLeft თვისებებში ინახებ მნიშვნელობები რომელიც სასურველი ელემენტის ზედა საფეხურზე მდგომი (offsetParent) ელემენტის მიმართებაში გამოითვლება… აქედან არსებობს ერთი გამოსავალი რაც ნაჩვენები იყო ზემოთ მოყვანილ კოდში… ანუ საჭიროა იტერაცია ქვემოდან ზევით რათა ყველა offsetParent – ის offsetTop და offsetLeft მონაცემების დაჯამება მოხდეს…

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

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

    მოდიფიცირებული კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function getObjectPosition(obj) {
      var pos = {top: 0, left: 0}, el = obj;
      while(obj) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
      }
      for (obj = el.parentNode; obj && obj != document.body; obj = obj.parentNode) {
        pos.top -= obj.scrollTop;
        pos.left -= obj.scrollLeft;
      }
      return pos;
    }

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

    ზემოთ ავღნიშნე რომ კოდი რომელიც მოვიყვანე მაგალითად კორექტულად მუშაობს მხოლოდ Opera – ში… რატომ? თუ დააკვირდით მუშა მაგალითს, ყველა ელემენტს აქვს განსხვავებული ზომის გვერდები(border). სწორედ ეს გვერდები ქმნის პრობლემას რადგან, Opera – ს გარდა არცერთი ბრაუზერი არ ითვალისწინებს ამას და ხშირად ვღებულობთ ცდომილებებს…

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function getObjectPosition(obj) {
      var pos = {top: 0, left: 0}, el = obj;
      var isOpera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
      while(obj) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        if (!isOpera) {
          pos.top += parseInt(Util.style.getStyle.getStyle(obj.offsetParent, 'border-top-width')) || 0;
          pos.left += parseInt(Util.style.getStyle.getStyle(obj.offsetParent, 'border-left-width')) || 0;
        }
        obj = obj.offsetParent;
      }
      for (obj = el.parentNode; obj && obj != document.body; obj = obj.parentNode) {
        pos.top -= obj.scrollTop;
        pos.left -= obj.scrollLeft;
      }
      return pos;
    }

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

    ეს არის ელემენტის მეთოდი getBoundingClientRect, რომელიც გვიბრუნებს ობიექტს რომელშიც განთავსებულია ჩვენთვის საჭირო ინფორმაცია და დამატებით დამუშავებას აღარ საჭიროებს.

    განმარტება MSDN – იდან:

    Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

    რაოდენ გასაოცარიც არ უნდა იყოს ეს მეთოდი მუშაობს უშეცდომოდ… ერთი პატარა გამონაკლისის გარდა, ეს არის თავად HTML ელემენტის ნაგულისხმევი(default) მნიშვნელობა border ატრიბუტისათვის… ანუ იგი არის 2 პიქსელის ტოლი.. თუმცა ეს ადვილად მოსაგვარებელი საკითხია და ჩვენი კოდი მიიღებს საბოლოო და უნივერსალურ სახეს:

    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
    getObjectPostion: function(obj) {
      var pos = {top: 0, left: 0}, el = obj;
            //IE6/7 solution
      if (obj.getBoundingClientRect) {
        var box = obj.getBoundingClientRect();
        pos.top = box.top - 2;
        pos.left = box.left - 2;
      } else { 
                    //all other browsers
        while(obj) {
          pos.top += obj.offsetTop;
          pos.left += obj.offsetLeft;
          if (!this.browser.isOpera) {
            pos.top += parseInt(this.getStyle(obj.offsetParent, 'border-top-width')) || 0;
            pos.left += parseInt(this.getStyle(obj.offsetParent, 'border-left-width')) || 0;
          }
          obj = obj.offsetParent;
        }
      }
            //calculation of left and right scrolls
      for (obj = el.parentNode; obj && obj != document.body; obj = obj.parentNode) {
        pos.top -= obj.scrollTop;
        pos.left -= obj.scrollLeft;
      }
      el = obj = null;
      return pos;
    }

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

    1
    2
    3
    4
    5
    if (obj.getBoundingClientRect) {
       var box = obj.getBoundingClientRect();
       pos.top = box.top - 2;
       pos.left = box.left - 2;
    }

    გამოიყენება სწორედ IE – სთვის :) და რაც ყველაზე სასიხარულოა, იგი არის ძალიან სწრაფი და რაც მთავარია უშეცდომო!

    პოზიციის დასადგენად საჭირო კოდი სრულად შეგიძლიათ ამოიღოთ ზემოთ მითითებული მაგალითის სორსიდან.

    ]]>     http://www.code.ge/posts/detecting-elements-position/feed 4     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     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     მარტივი XPath რეალიზაცია JavaScript – ში http://www.code.ge/posts/simple-xpath-implementation-in-javascript http://www.code.ge/posts/simple-xpath-implementation-in-javascript#comments Mon, 14 May 2007 08:49:33 +0000 იოსები http://www.code.ge/javascript/simple-xpath-implementation-in-javascript ვებ დოკუმენტის (ან მისი რომელიმე ნაწილის) კლიენტის მხარეს დამუშავებისას გარდაუვალია დოკუმენტის ელემენტებთან მუშაობა. დღესდღეობით დოკუმენტის ელემენტებთან მუშაობის ორი ყველაზე გავცელებული ე.წ. DOM ფუნქცია არსებობს ერთი ესენია: 1) document ობიექტის getElementById(“element-id”) მეთოდი რომელიც აბრუნებს ელემენტს მითითებული უნიკალური იდენტიფიკატორით (ელემენტის id ატრიბუტის მნიშვნელობა); 2) ელემენტის getElementsByTagName(“tagname”) მეთოდი რომელიც აბრუნებს ელემენტის ქვემდგომ იერარქიაში არსებულ ყველა “tagname” პარამეტრის შესაბამის ელემენტს.

    აღნიშნული ორი მეთოდი საკმაოდ ეფექტურად მუშაობს მარტივ შემთხვევებში თუმცა არსებობს რამდენიმე უარყოფითი დეტალიც:

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

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

    არსებობს თუ არა XPath – ის მხარდაჭერა თანამედროვე ბრაუზერებში? დიახ არსებობს… თუმცა თავსებადობა სხვადასხვა რეალიზაციებს შორის საკმაოდ უხარისხოა.

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

    მაგალითად შემდეგი XML დოკუმენტიდან თუ გვსურს ამოვიღოთ “Ann Smith” – ის შესაბამისი sex ელემენტი, XPath გამოსახულებას ექნება ასეთი სახე: “/persons/person[1]/name” (person[1] – აქ იგულისხმება მეორე person ელემენტი რადგან ელემენტების ინდექსაცია იწყება 0 – იდან):

    <persons>
  <person>
     <name>John Doe</name>
     <sex>M</sex>
  </person>
  <person>
     <name>Ann Smith</name>
     <sex>F</sex>
  </person>
</persons>

    ამ მარტივი მაგალითიდან კარგად ჩანს თუ რამდენად მარტივია დოკუმენტთან მუშაობა XPath – ის მეშვეობით და რამდენი არასაჭირო კოდის დაწერა დაგვჭირდებოდა იგივე შედეგის მისაღწევად JavaScript – ის სტანდარტული DOM მეთოდების გამოყენებით.

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

    მაგალითად თუ გვაქვს მსგავსი (X)HTML კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="test-id">
        <ul>
            <li>Menu Item One</li>
            <li>Menu Item Two</li>
            <li>
                Menu Item Three
                <ul>
                    <li>Sub Menu Item One</li>
                    <li>Sub Menu Item Two</li>
                    <li>Sub Menu Item Three</li>
                </ul>
            </li>
        </ul>
    </div>

    და გვსურს რომ ამოვიღოთ ქვემენიუს “Sub Menu Item Two” ელემენტი გამოსახულებას ექნება ასეთი სახე: “#test-id/ul/li[2]/ul/li[1]“; გამოსახულება თავსითავად მარტივია თუმცა ზოგიერთ დეტალზე ღირს ყურადღების მიქცევა:

    1. თუ გვსურს რომ მეთოდმა გადაცემული სტრიქონი მიიღოს XPath გამოსახულებად იგი აუცილებლად უნდა იწყებოდეს # სიმბოლოთო და კონკრეტული ელემენტის უნიკალური იდენტიფიკატორით (მაგ. #test-id);
    2. ქველემენტების მიმართვა ხდება შემდეგნრაირად: /ul (სლეში და ელემენტის ტეგის სახელი) და იგულისხმება პირველივე მითითებული ტიპის ტეგი;
    3. კონკრეტული ქველემენტის ამოღება ინდექსით განისაზღვრება შემდეგნაირად: li[2] (ელემენტის დასახელება და შესაბამისი ინდექსი, ამ შემთხვევაში იგულისხმება მესამე li ელემენტი);

    თავისთავად ფუნქციის გამოიყურება შემდეგნაირად იგი პარამეტრად ღებულობს სტრიქონს, რომელიც არის ან უბრალოდ ელემენტის უნიკალური იდენტიფიკატორი ან XPath – ის მსგავსი გამოსახულება:

    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
    var Util = {
      dom: {
        get: function(expression) {
          //check if passed argument is XPath like expression
          if (str.substr(0, 1) == '#') {
            expression = expression.substr(1);   
            var tokens  = expression.split('/');
            var id      = tokens.shift();<