Code.ge Blog » JavaScript DOM http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Mon, 03 May 2010 14:38:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 Handling “onchange” event revisited http://www.code.ge/posts/handling-onchange-event-revisited http://www.code.ge/posts/handling-onchange-event-revisited#comments Sat, 16 May 2009 18:10:17 +0000 იოსები http://www.code.ge/?p=241 რამდენიმე თვის წინ დავწერე პოსტი, HTML ფორმის ელემენტის onchange ივენთისა და მისი დელეგირების შესახებ.

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

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

picture-17

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

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

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

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

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

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

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

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

SELECT ელემენტი

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function() {
   
   var div = document.getElementById('testonchange');
   
   //ყველა ბრაუზერი IE - ს გარდა
   if (document.addEventListener) {

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

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

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

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

         previousEvent = e.type;

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

      };

   }
   
   div = null;
   
})();

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

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

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

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

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

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

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

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

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

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

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

]]> http://www.code.ge/posts/html-form-elements-property/feed 5 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 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 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 ელემენტის პოზიციების დადგენა 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/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 JavaScript WTF Vol. 4 – DOM ელემენტების იტერაცია http://www.code.ge/posts/javascript-wtf-vol-4 http://www.code.ge/posts/javascript-wtf-vol-4#comments Thu, 27 Sep 2007 12:13:58 +0000 იოსები http://www.code.ge/javascript/javascript-wtf/javascript-wtf-vol-4 ამასწინათ David Flanagan – ის შესანიშნავ წიგნში JavaScript The Definitive Guide წავაწყდი კოდის ფრაგმენტს რომელმაც ჯერ დამაბნია ხოლო შემდეგ აღტაცება მომგვარა, რადგან მსგავსი რამ არც მომსვლია თავში აზრად არასოდეს და არც არსად მინახავს…

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

მოგეხსენებათ რომ DOM ობიექტების იტერაცია შესაძლოა ხშირად დაგვჭირდეს გარკვეული ამოცანების გადასაჭრელად, მათ შორის ერთერთი მნიშვნელოვანი არის კონკრეტული DOM ობიექტის მომდევნო ან წინა ელემენტის მიღება. ამისათვის არსებობს DOM ობიექტის შესაბამისი თვისებები რომლებიც მიუთითებენ ასეთ ელემენტებზე: nextSibling მომდევნო ელემენტისათვის და previousSibling შესაბამისად წინა ელემენტისათვის. თუმცა პირადად ჩემთვის დიდ სარგებლობას ეს თვისებები არ წარმოადგენენ რადგან ხშირად (X)HTML კოდში ელემენტის წინ/შემდეგ შესაძლოა ტექსტური ელემენტი(textNode) იყოს განთავსებული რომელიც უმეტეს შემთხვევაში არაფერში არ არის გამოსადეგი… ასევე უფრო ხშირად საჭიროა მაგალითად კონკრეტული span ელემენტის წინ არსებული div ელემენტის მოპოვება, ხოლო ამ span – სა და div – ს შორის შესაძლოა განთავსებული იყოს სხვა ელემენტები… გამომდინარე აქედან დაწერილი მაქვს შესაბამისი მეთოდები რომლებიც ამ პრობლემას მიგვარებენ… თუმცა აღნიშნული ფაქტის მერე ეს მეთოდები გადავწერე რომლებსაც აქ განვიხილავ მაგალითის სახით.

კოდი:

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
var Util = {
 
  dom: {
   
    /**
     * param obj ობიექტი რომლის შემდეგი ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getNextSibling: function(obj, tagName) {
      if (obj.nextSibling) {
        for (var o = obj.nextSibling; o; o = o.nextSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    },
   
    /**
     * param obj ობიექტი რომლის წინა ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getPrevSibling: function(obj, tagName) {
      if (obj.previousSibling) {
        for (var o = obj.previousSibling; o; o = o.previousSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    }
 
  }
 
};

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

1
2
3
var el = document.getElementById('elemID');
var nextSibling = Util.dom.getNextSibling(el, 'p'); //დააბრუნებს ელემენტის შემდგომ არსებულ პირველსავე p ელემენტს
var nextSibling = Util.dom.getPrevSibling(el, 'div'); //დააბრუნებს ელემენტის წინ არსებულ პირველსავე div ელემენტს

მეთოდები საკმარისად მარტივია, იმ შემთხვევაში თუ მეთოდის პირველი პარამეტრის nextSibling/previousSibling თვისებები მიუთითებენ კონკრეტულ DOM ელემენტებს აქვს აზრი ელმენტების იტერაციას, if პირობაში მოწმდება გააჩნია თუ არა ელემენტს tagName თვისება რადგან textNode ტიპის ელემენტებს მსგავსი არაფერი გააჩნია, ხოლო თუ ეს თვისება არსებობს და მას აქვს მნიშვნელობა ხდება შედარება მეთოდის მეორე პარამეტრად გადაცემულ მნიშვნელობასთან. თუ ორი მნიშვნელობა უდრის ერთმანეთს მეთოდი დააბრუნებს მიმდინარე ობიექტს და შეწყვეტს მუშაობას.

თუმცა ეს არ არის საინტერესო… საინტერესოა სწორედ for ციკლი, კერძოდ კი შემდეგი ფრაგმენტი:

for (var o = obj.previousSibling; o; o = o.previousSibling)

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

1) კონსტრუქციის პირველ ნაწილში ხდება o ცვლადის ინიციალიზაცია და მას ენიჭება საწყისი მნიშვნელობა ანუ obj.previousSibling;
2) კონსტრუქციის მეორე ნაწილში მოწმდება პირობა, ანუ o ობიექტი არ უნდა იყოს null, ზუსტად ეს განაპირობებს ციკლის შესრულება გაგრძელდება თუ არა;
3) კონსტრუქციის მესამე ნაწილში ყოველ შემდეგ იტერაციაზე o ობიექტს ენიჭება იერარქიაში მის წინ მყოფი ელემენტი;

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

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

მარტივი მაგრამ ჩემის აზრით ძალიან სასარგებლო დეტალი ენისა რომელის დეტალებიც დღემდე მართლა ბნელით არის მოცული :)

]]> http://www.code.ge/posts/javascript-wtf-vol-4/feed 4 ელემენტის 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();
       
        //retrive desired element
        var el    = document.getElementById(id);
        var pattern = /(\w+)\[(\d+)\]/;
        var match, child;
        if (el) {
          for (var i = 0; i<tokens.length; i++) {
            if ((match = tokens[i].match(pattern)) != null) {
              for (var j = 0, index = 0; j < el.childNodes.length; j++) {
                child = el.childNodes[j];
                if (child.tagName && child.tagName.toLowerCase() == match[1]) {
                  if (match[2] == index) {
                    el = child;
                    break;
                  }
                  index++
                }
              }
            } else {
              el = el.getElementsByTagName(tokens[i]).item(0);
            }
          }
        }
        //return found element
        return el;
      } else {
        //if expression parameter is simple string just return element
        return document.getElementById(expression);  
      }
    }
  }
};

//Usage sample
alert(Util.dom.get('#test-id/ul/li[2]/ul/li[1]').innerHTML);
alert(Util.dom.get('#test-id/ul/li[2]/ul/li').innerHTML);

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

]]> http://www.code.ge/posts/simple-xpath-implementation-in-javascript/feed 0 ელემენტის innerHTML თვისების გამოყენება http://www.code.ge/posts/using-elements-innerhtml-property http://www.code.ge/posts/using-elements-innerhtml-property#comments Mon, 19 Mar 2007 08:22:13 +0000 იოსები http://www.ioseb.com/javascript/using-elements-innerhtml-property მიუხედავად იმისა რომ ელემენტის innerHTML თვისება არ არის w3c სტანდარტის მიერ დამტკიცებული, დღესდღეობით იგი წარმოადგენს დეფაქტო სტანდარტს და ფართოდ გამოიყენება თანამედროვე ვებ აპლიკაციებში რაც გამოწვეულია იმით რომ იგი ბევრად სწრაფია w3c DOM ფუნქციებთან შედარებით. ამ თვისების გამოყენება შესაძლებელია ყველა თანამედროვე ბროუზერში თუმცა უნდა აღინიშნოს ის ფაქტი რომ მის გამოყენებას ახლავს გარკვეული სირთულეები, კერძოდ კი table და form ელემენტებთან მუშაობის დროს.

innerHTML შეიქმნა Microsoft – ის მიერ Internet Explorer – ისთვის, თუმცა მოგვიანებით სხვა ბროუზერების მწარმოებლებმაც ჩადეს ელემენტის ეს თვისება თავის პროდუქტებში, ასე რომ არსებული(თუმცა მცირე) პრობლემების მიუხედავად საჭიროების შემთხვევაში არ უნდა ავარიდოთ თავი მის გამოყენებას.

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

Microsoft:

Sets or retrieves the HTML between the start and end tags of the object.


Mozilla:

innerHTML sets or gets all of the markup and content within a given element.

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

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

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


Click to copy text | Click to copy HTML

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Empty container

ლინკებზე(Click to copy text და Click to copy HTML) ისრის დაწკაპუნებისას პირველი კონტეინერის შემადგენელი HTML კოდი და ტექსტი კოპირდება მეორე კონტეინერში ან პირდაპირ როგორს სტრიქონი(ამ შემთხვევაში HTML კოდის გადაყვანა ხდება სტრიქონში) ან როგორც HTML კოდი.

innerHTML – ს პირდაპირი და მთავარი დანიშნულებაა რომ ელემენტიდან ამოვიღოთ ან მასში ჩავსვათ HTML და ეს პროცედურა დამატებით ახსნას არ საჭიროებს. თუმცა ისეთ შემთხვევაში თუ გვინდა რომ HTML ვაქციოთ უბრალო სტრიქონად საჭიროა შესაბამისი ფუნქციის რეალიზაცია.

ქვემოთ მოყვანილია მაგალითში გამოყენებული HTML და JavaScript კოდი შესაბამისი განხილვით:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<a href="#" onclick="return copyContent(true)">Copy Text</a>
&nbsp;|&nbsp;
<a href="#" onclick="return copyContent()">Copy HTML</a>

<div id="html-container" style="border: 2px solid red; width: 50%">
  <p>
    <cite>
      Lorem ipsum dolor sit amet
    </cite>
    <blockquote>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </blockquote>
  </p>
</div>

<br />

<div id="text-container" style="border: 2px solid green; width: 50%">Empty container</div>

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

  1. html-container – რომელიც შეიცავს სხვა ელემენტებსა და ტექსტს
  2. text-container – რომელშიც უნდა მოხდეს html-container ელემენეტში არსებული კოდის კოპირება

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
/**
 *param string
 */
function htmlspecialchars(text) {
  //create temporary div element
  var div = document.createElement("div");
  //create and append text node to div element
  div.appendChild(document.createTextNode(text));
  //return transofrmed string
  return div.innerHTML;
}

/**
 *param boolean
 */
function copyContent(copyText) {
  //get html container
  var htmlContainer = document.getElementById("html-container");
  //get text container
  var textContainer = document.getElementById("text-container");
  if (copyText) {
    //if copyText parameter was set to true escape contents of htmlContainer object
    textContainer.innerHTML = htmlspecialchars(htmlContainer.innerHTML);
  } else {
    //just copy HTML from one container to other
    textContainer.innerHTML = htmlContainer.innerHTML;
  }
  return false;
}

ზემოთ აღნიშნული ოპერაციების განსახორციელებლად გამოიყენება ორი ფუნქცია, copyContent რომელიც ღებულობს ერთ პარამეტრს და ამ პარამეტრის შესაბამისად ან უბრალოდ სვავს text-container ელემენტში html-container ელემენტის შიგნით არსებულ HTML კოდს, ან იძახებს htmlspecialchars ფუნქციას რათა მოხდეს კოდის გადაყვანა ჩვეულებრივ სტრიქონში და text-container ელემენტში სვავს უბრალოდ სტრიქონს.

საინტერესო ამ კოდში არის სწორედ htmlspecialchars ფუნქცია რომლის გამოყენება(და დანიშნულება) ანალოგიურია PHP – ს იგივე დასახელების მქონე ფუნქციისა. იგი პარამეტრად ღებულობს HTML კოდს(რომლის გადაყვანაც უნდა მოხდეს ჩვეულებრივ სტრიქონში) და აბრუნებს ჩვეულებრივ სტრიქონს. ეს ყველაფერი მიიღწევა DOM მეთოდების გამოყენებით:

  1. document.createElement(“div”) – კოდი ქმნის დროებით div ელემენტს
  2. div.appendChild(document.createTextNode(text)) – კოდში createTextNode მეთოდის გამოყენებით ვქმნით ტექსტურ ელემენტს რომელსაც პარამეტრად გადავცემთ text ცვლადს(აქ მნიშვნელოვანია სწორედ createTextNode მეთოდი რომლის მეშვეობითაც ხდება HTML კოდის ჩვეულებრივ სტრიქონად გარდაქმნა) და ვამატებთ ამ ელემენტს წინასწარ შექმნილ div ელემენტში.
  3. return div.innerHTML – div ელემენტის innerHTML თვისება უკვე შეიცავს სტრიქონს ნაცვლად HTML კოდისა.

ამ მაგალითში ნაჩვენები იყო თუ როგორ შეიძლება უფრო სასარგებლოდ გამოვიყენოთ ელემენტის innerHTML თვისება და რამდენად სასარგებლო შეიძლება იყოს იგი რიგ შემთხვევებში.

P.S.
მაგალითში გამოყენებულია ლათინური ტექსტი(Lorem ipsum… და ა.შ.) რის შესახებაც ინფორმაცია შეგიძლიათ იხილოთ შესაბამის რესურსზე. :)

]]> http://www.code.ge/posts/using-elements-innerhtml-property/feed 8