Html5 da JavaScript api laridan foydalanish, html web Workers, html sse. Амалий кўрсатмалар. Bajardi: Xudoyberganov Ilhom Tekshirdi: Mahmanov Orif



Download 123,53 Kb.
bet3/5
Sana12.07.2022
Hajmi123,53 Kb.
#783168
1   2   3   4   5
Bog'liq
web mi

Ular ob'ektlarga asoslangan.
Kod bilan API bilan o'zaro aloqa bir yoki bir nechta JavaScript ob'ektlari orqali amalga oshiriladi, ular API bilan ishlaydigan (ob'ekt xususiyatlarida mavjud) va API ta'minlaydigan (ob'ekt usullarida mavjud) funktsiyani amalga oshiradigan ma'lumot uchun konteyner bo'lib xizmat qiladi.
Geolocation API bilan misolga qaytaylik - bir nechta oddiy ob'ektlardan tashkil topgan juda oddiy API:

  • Geolokatsiya geodezikani kuzatish va olishning uchta usulini o'z ichiga oladi.

  • Joylashuv, ma'lum bir vaqtda qurilmaning joylashuvi to'g'risida ma'lumot beradi - Koordinatalarni o'z ichiga oladi - koordinatalarni saqlaydigan ob'ekt va joriy vaqtning belgisi.

  • Koordinatalar, qurilmaning joylashuvi haqida juda ko'p foydali ma'lumotlarni o'z ichiga oladi, jumladan kenglik va uzunlik, balandlik, tezlik va harakat yo'nalishi va boshqalar.

Xo'sh, bu ob'ektlar qanday o'zaro ta'sir qiladi? Agar siz bizning misolimizdagi map-example.html-ga qarasangiz (uni jonli ravishda ko'ring), quyidagi kodni ko'rasiz:
navigator.geolocation.getCurrentPosition(function(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}
var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
});
Birinchidan, biz qurilmamizning hozirgi holatini olish uchun Geolocation.getCurrentPosition () usulidan foydalanmoqchimiz. Geolocation brauzer ob'ektiga Navigator.geolocation xususiyati orqali kirish mumkin, shuning uchun biz buni boshlaymiz
navigator.geolocation.getCurrentPosition(function(position) { ... });
Bu quyidagi kodga tengdir
var myGeo = navigator.geolocation;
myGeo.getCurrentPosition(function(position) { ... });
Ammo biz ob'ektning xususiyatlari / usullariga kirishni bitta ifoda bilan bog'lash uchun nuqta yordamida dasturdagi satrlar sonini kamaytiramiz.

Geolocation.getCurrentPosition () usuli bitta talab qilingan parametrga ega - qurilmaning joriy holati muvaffaqiyatli o'qilganda boshlanadigan anonim funksiya. Ushbu funktsiyaning o'zi joriy manzil to'g'risidagi ma'lumotlarni namoyish etadigan Position ob'ekti bo'lgan parametrni oladi.


Faqatgina operatsiya tugagandan so'ng funktsiya chaqirilgan ushbu yondashuv JavaScript API-da juda keng tarqalgan bo'lib, u boshqa operatsiyada qaytib kelgan ma'lumotlardan foydalanishdan oldin operatsiya tugaganiga ishonch hosil qilish uchun. Bunday operatsiyalar asenkron operatsiyalar deb ham ataladi. Geo-joylashuv ma'lumotlari tashqi qurilmadan (GPS moslamasi yoki boshqa joylashuvni aniqlash moslamasi) olinganligini hisobga olib, o'qilgan operatsiya o'z vaqtida yakunlanishiga amin bo'lolmaymiz va u tomonidan qaytarilgan ma'lumotlardan darhol foydalana olamiz. Shuning uchun bunday kod ishlamaydi:
var position = navigator.geolocation.getCurrentPosition();
var myLatitude = position.coords.latitude;
Agar birinchi qator natijani qaytarmasa, ikkinchi qatorda geolokatsiya ma'lumotlari hali mavjud bo'lmagani sababli xato yuzaga keladi. Shu sababli, asinxron operatsiyalarni ishlatadigan API-lar qayta qo'ng'iroq qilish funktsiyasi yoki ECMAScript 6-da paydo bo'lgan va yangi API-larda kengroq foydalaniladigan zamonaviy Promises tizimi yordamida ishlab chiqilmoqda.

Biz Geolocation API-ni uchinchi tomon API bilan birlashtiramiz - Google Maps API, biz Google Map-da getCurrentPosition () tomonidan qaytarilgan manzilni belgilashda foydalanamiz. Google Maps API sahifamizda mavjud bo'lishi uchun biz uni HTML-hujjatga qo'shamiz:



Ushbu API-dan foydalanish uchun, avval Coordinates.latitude va Coordinates.longitude geolocation ma'lumotlarini oladigan google.maps.LatLng () konstruktoridan foydalanib LatLng ob'ektini yarating:
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
Ushbu ob'ektning o'zi biz myOptions deb nomlagan parametrlar ob'ektining markaziy xususiyatining qiymati. Keyin google.maps.Map () konstruktorini chaqirib, uni ikkita parametrga o'tkazib, xaritani chizmoqchi bo'lgan
elementi bilan bog'lanishni (map_canvas ID bilan) va sozlash ob'ekti (opsiyalari) orqali xaritamizni aks ettiradigan ob'ektning namunasini yaratamiz. biz yuqorida aniqlagan.
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}


var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
Bu amalga oshirilgach, bizning xaritamiz chiziladi.

Kodning oxirgi bloki ikkita keng tarqalgan yondashuvni namoyish etadi, siz ko'p APIlarda ko'rasiz:





Download 123,53 Kb.

Do'stlaringiz bilan baham:
1   2   3   4   5




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish