اموزش HTML 5 جلسه سوم

با عرض سلام و خسته نباشید خدمت دوستان عزیز
با آموزش HTML 5 و توابع و متد های جاوااسکریپتی مربوط به آن در خدمت شما هستم
امروز میخواییم درباره یه خاصیت جدید HTML 5 حرف بزنیم به نام  Geolocation
از این API منطقه جغرافیایی HTML5 برای به دست آوردن موقعیت جغرافیایی یک کاربر استفاده می شود
از آنجا که این مسئله می تواند حریم خصوصی کاربر را به خطر بیاندازد، موقعیت در دسترس نخواهد بود مگر این که کاربر آن را تایید کند
مثلا مرورگر کروم به محض درخواست برای موقعیت جغرافیایی از کاربر سوال میکنه که آیا میخواد این فرآیند صورت بگیرد یا ن
در مورد پشتیبانی هم باید بگم اینترنت اکسپلورر 9، فایرفاکس، کروم، سافاری و اپرا از منطقه جغرافیایی پشتیبانی می کنند
دقت داشته باشید که منطقه جغرافیایی برای دستگاه هایی که دارای GPS هستند بسیار دقیق تر است ، مانند آی فون.

<div id='demo'></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

این یک مثالی از دریافت موقعیت جغرافیایی هست که Longitude و Latitude مون رو نشون میده
در ابتدا div ای با ای دی demo رو معرفی کردیم و تابعی به نام getLocation نوشتیم که ابتدا بررسی میکنه آیا مرورگر مون geolocation رو ساپورت میکنه یا نه
اگه میکنه با استفاده از navigator.geolocation.getCurrentPosition موقعیت رو دریافت میکنه و سپس در تابع showPosition طول و عرض جغرافیایی ما رو چاپ میکنه
البته باید صداشون بزنید که من نزدم 😐 ولی شما getPosition رو صدا بزنید (آخر کد ها یه getPosition() اضافه کنید حالا اگر خواستید داخل اتفاق load برای window هم میتوانید بزارید ولی نزارید هم حداقل در اینجا به مشکلی بر نخواهیم خورد
حالا به بررسی خطا های این geolocation و به عبارتی error handling اش میرسیم:

<div id="demo">Click the button to get your coordinates:</div>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude; 
}
function showError(error)
{
switch(error.code) 
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>

خوب اینو به صورتی نوشتم که وقتی کاربر روی یه دکمه ای کلیک کرد  کل این فرآیند آغاز بشه
اول کاربر کلیک میکند
بعد تابع getLocation اجرا میشود
با بررسی وجود داشتن قابلیت دریافت موقعیت جغرافیایی توسط مرورگر و
 با فرض این که وجود داشت با navigator.geolocation.getCurrentPosition موقعیت رو دریافت کرده و سپس دو تابع showPosition و showError رو صدا میزنیم
تابع showPosition هم همون طور که توضیح داده شد طول و عرض جغرافیایی رو به div#demo میدیم و نشون داده میشه به کاربر
اما اگر مشکلی وجود داشت :
با یه سوییچ بررسی میکنیم که مشکل چی بوده دقت کنید که آرگومان error برامون همه مشکلات رو بر میگردونه :
Permission denied - کاربر به دسترسی به منطقه جغرافیایی اجازه نمی دهد
Position unavailable - به دست آوردن مکان صحیح امکان پذیر نمی باشد
Timeout - عملیات به پایان رسیده است
متد getCurrentPosition () اگر موفق باشد یک آبجکت را ارجاع می دهد. طول و عرض جغرافیایی و دقت ، همیشه ارجاع داده شده است. سایر خصوصیات زیر اگر در دسترس باشند ارجاع داده می شوند.
coords.latitude - عرض جغرافیایی به صورت یک عدد اعشاری
coords.longitude - طول جغرافیایی به صورت یک عدد اعشاری
coords.accuracy - دقت موقعیت
coords.altitude - ارتفاع بالاتر از سطح دریا به متر
coords.altitudeAccuracy - دقت ارتفاع موقعیت
coords.heading - عنوان به صورت درجه در جهت عقربه های ساعت از شمال
coords.speed - سرعت متر بر ثانیه
timestamp - تاریخ / زمان پاسخ
watchPosition () - موقعیت صحیح کاربر را ارجاع می دهد و در حالی که کاربر حرکت می کند همچنان به ارجاع موقعیت به روز شده کاربر ادامه می دهد (مانند GPS در ماشین)
clearWatch () - متد watchPosition () را متوقف می کند.
این مثالی که الان میزنم متد watchPosition ()نشان می دهد شما برای تست این مورد نیاز به یک دستگاه GPS دقیق دارید. (مانند آیفون)

<div id="demo"></div>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

البته یه API توسط گوگل ارائه شده که به مراتب کامل تر هست Google Maps API
http://www.tutorialspoint.com/google_maps/index.htm
این منبع رو حتما یک نگاهی بیندازید نکات مفیدی درباره این API میگه
پایان بخش Geolocation
شروع بخش Drag and Drop:
کشیدن و انداختن یکی از ویژگی های بسیار معمول است. که در آن شما یک شی(که میتونه هر چی باشه ) "گرفته" و آن را به مکان های مختلف می کشید
در HTML5، کشیدن و انداختن (drag and drop) بخشی از استاندارد است، و هر عنصری را می تواند کشیده و رها شود
اینترنت اکسپلورر 9، فایرفاکس، اپرا 12، کروم، و سافاری 5 از کشیدن و انداختن پشتیبانی می کنند
اول از همه: برای ایجاد یک عنصر "قابل کشیدن(draggable)"، ویژگی draggableرا بر روی "true" تنظیم کنید:
<img draggable="true">
سپس ، مشخص کنید هنگامی که عنصر کشیده می شود چه چیزی باید اتفاق بیافتد
در مثال بالا، ویژگی ondragstart فراخوانی یک کارکرد است، کشیدن (واقعه)، که مشخص می کند چه داده ای کشیده شود
متد dataTransfer.setData ()، نوع داده ها و مقدار داده های کشیده شده رو تنظیم می کند
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

رویداد ondragover مشخص می کند که کجا داده های کشیده شده را می توان رها کرد
به طور پیش فرض، داده ها/عناصر نمی توانند در عناصر دیگر رها شوند. به منظور اجازه برای یک رها کردن ، باید از مسئولیت پیش فرض عنصر جلوگیری کنیم
این کار از طریق فراخوانی متدevent.preventDefault () برای رویداد ondragover انجام می شه :
event.preventDefault()
در نهایت هنگامی که یک داده کشیده شده رها می شود ، یک رویداد رها کردن رخ می دهد.
در مثال بالا، ویژگی ondrop کارکرد drop(event) را فراخوانی می کند

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

یک توضیحی درباره این تایع بدم :
متد preventDefault () را برای جلوگیری از دست زدن پیش فرض به داده ها توسط مرورگر فراخوانی کنید(کارکرد پیش فرض در رها کردن ، باز کردن به عنوان لینک است)
داده های کشیده شده با متدdataTransfer.getData("Text") را دریافت کنید. این روش هر گونه اطلاعات که در متد setData ()در نوع یکسان تنظیم شده است را باز میگردونه
داده کشیده شده شناسه عنصر کشیده شده است("drag1")
حالا یه مثال کلی میزنم تا کلا این درگ اند دراپ رو متوجه بشیم
با ترکیب همه ی موارد گفته شده به این نتیجه میرسیم

<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="karen.png" draggable="true"
ondragstart="drag(event)" width="336" height="69">

موفق باشید پایان جلسه سوم

جلسه بعدی فردا شب