საიტის ნავიგაცია| script ტეგის სასარგებლო დეტალები 2024-05-20 |
რაში შეიძლება დაგვჭირდეს აღნიშნული ტეგის ეს შესაძლებლობები? პასახად რეალურ მაგალითს მოვიყვან! JavaScript აპლიკაციებზე მუშაობისას HTML დოკუმენტში ხშირად გვიწევს ისეთი ვიზუალური კომპონენტების გამოყენება რომლებიც რეალურად ატარებენ დამხმარე ხასიათს და სინამდვილეში არ უნდა განეკუთვნებოდნენ ძირითად HTML დოკუმენტს. ყველაზე მარტივ მაგალითად შეგვიძლია განვიხილოთ არასტანდარტული შეტყობინების დიალოგური ფანჯრები. განსხვავებით JavaScript – ის მშობლიური alert() ფუნქციისა რომელიც გვიჩვენებს სისტემური შეტყობინების ფანჯარას. მსგავს სისტემურ შეტყობინების ფანჯრებზე არ გაგვაჩნია არანაირი ვიზუალური კონტროლის მექანიზმები რაც იწვევს არასტანდარტული ვიზუალური კომპონენტების გამოყენების აუცილებლობას. ახლა წარმოვიდგინოთ სცენარი სადაც ერთი დოკუმენტის ფარგლებში, მომხმარებელთან ურთიერთქმედებისათვის გვესაჭიროება არასტანდარტული შეტყობინების რამდენიმე ფანჯარა, ერთი და იგივე ვიზუალური მახასიათებლებითა და განსხვავებული შეტყობინების ტექსტებით. სერვერის მხარეს პროგრამირებისას ბუნებრივი იქნებოდა შაბლონების გამოყენება, თუმცა, ბრაუზერშიც არსებობს ამის შესაძლებლობა სწორედ პოსტის დასაწყისში ნახსენები script ტეგის თვისებების მეშვეობით. კერძოდ კი, თუ script ტეგის type ატრიბუტის მნიშვნელობად გამოვიყენებთ text/html – ტეგს შიგნით მოთავსებული ნებისმიერი HTML კოდი აღქმული იქნება როგორც ჩვეულებრივი ტექსტი რომელიც ა) არ ჩანს ვიზუალურად ბრაუზერში; ბ) არ ხდება ამ ტექსტის ინტერპრეტირება JavaScript – ის სახით; გ) არ ვაბინძურებთ დოკუმენტის ძირითად DOM სტრუქტურას არასაჭირო ტეგებით; დ) არ გვესაჭიროება CSS ტექსტის დასამალად; ე) საძიებელი სისტემები როგორც წესი იგნორირებას უკეთებენ script ტეგებს; შაბლონის გამოყენების რეალური მაგალითი ნაჩვენებია ქვემოთ: Code <script type="text/html" id="tpl-alert"> <div class="alert" id="alert"> <div class="alert-title">{title}</div> <div class="alert-message"> <p>{message}</p> </div> </div> </script> ნაჩვენებ მაგალითში, script ტეგის შიგნით განთავსებული HTML კოდი არის ტიპიური შაბლონი რომელიც შესაძლებელია გამოვიყენოთ მრავალჯერ სხვადასხვა შემთხვევაში. Code //template placeholder values var texts = { title: "Test Title!", message: "Test Message!" }; //template text var tpl = document.getElementById('tpl-alert').innerHTML; //placeholders replacement var result = tpl.replace(/{(w+)}/gi, function(match, key) { return key in texts ? texts[key] : ''; }); //do something with result კოდის შესრულების შედეგად მივიღებთ შემდეგ რეზულტატს: Code <div class="alert" id="alert"> <div class="alert-title">Test Title!</div> <div class="alert-message"> <p>Test Message!</p> </div> </div> წყარო: http://code.ge/posts/script-tag-details#more-552 |
| სულ კომენტარები: 1 | |
