یک پرش سه روزه برای یادگیری HTML5 : برسی HTML5 Media

به پرش سوم از سری مقالات یک پرش سه روزه برای یادگیری HTML5 رسیدیم ، تا اینجا امیدوارم که تونسته باشیم شما در این زمینه راهنمایی و آموزش داده باشیم.پرش اخر است و سعی کردیم یک فرود عالی را برای شما فراهم کنیم.

[two_third]

 

شما اینجا هستید و این به این معنی است که تا اینجا از این سری آموزشی لذت بردید. اگر می خواهید مفاهیم پایه و امکانات دیگر را مرور کنید، به شما توصیه می کنیم که قسمت های قبلی را مطالعه کنید.

فهرست مطالب:

  • تمرین ۱۴ و ۱۵ – HTML5 Media – Video
  • تمرین ۱۶ و ۱۷ – HTML5 Media – Audio
  • تمرین ۱۸ و ۱۹ – Drag and Drop
  • تمرین ۲۰ – Geo Location
  • تمرین ۲۱ – Geo Location با استفاده از Google map
  • تمرین ۲۲ – Web Worker
  • تمرین ۲۳ – Web Worker و Ajax
[/two_third] [one_third_last]


برسی Canvas و SVG

[/one_third_last]

 

 

 

HTML5 Media

امروزه مدیا یکی از مهم ترین قسمت های دنیای اینترنت است. هر جایی که نگاه می کنید، در صفحات وب قسمتی به پخش صدا و ویدئو اختصاص داده شده است. پیاده سازی این امکان قبلا کار بسیار پر زحمت و سختی بود. پیش از این ما به تگ Object وابسته بودیم که به صورت داخلی به پخش کننده های third party مانند flash نیاز داشت. زمانی که این قابلیت روی سیستم هایی می آمد که از flash پشتیبانی نمی کردند، کاری از دست ما بر نمی آمد. اما حالا HTML5 با تگ های استاندارد video و audio این کار را آسان کرده است.

تمرین ۱۴ – کار با المنت ویدئو

در این تمرین با چگونگی استفاده از المنت Video در HTML5 آشنا می شویم.

گام ۱ – آماده کردن ویدئو

یک ویدئو ساده از هر جایی که دوست دارید برای مقاصد آزمایشی دانلود می کنیم. اگر بخواهید می توانید از سمپل پیوست شده استفاده نمایید.

گام ۲ – ایجاد صفحه HTML

صفحه HTML ای با نام Media.html ایجاد کرده و محتوای زیر را داخل آن قرار می دهیم.

<video controls width="500px" id="vid">
<source src="vid.mp4" />
</video>

همان طور که مشاهده می کنید صفت ویژه ای با عنوان “controls” در تگ video قرار دارد. با اضافه کردن این صفت، کنترل بار player به سادگی ظاهر می
شود. کنترل بار یک نوار باریکی است که قسمت پایین ویدئو قرار دارد و شامل دکمه های “play”، “pause”، “stop” و… می باشد.

نکته:

  • لطفا توجه داشته باشید که فایل ویدئو و صفحه HTML در یک فولدر قرار داشته باشند. اگر می خواهید این دو در فولدرهای جداگانه ای قرار داشته باشند، بنابراین باید صفت “src” را متناسب با آن تغییر دهید.
  • المنت Video در حال حاضر فقط فرمت های mp4، webm، ۳gpp، m4v، mpeg، ogg، quicktime و x-ms-wmv را پشتیبانی می کند.

خروجی:

HTML5 Media

 

تمرین ۱۵ – کد نویسی با المنت ویدئو

در این تمرین سعی می کنیم به ویژگی های ویدئو مانند play/ pause/ stop و غیره با استفاده از جاوا اسکریپت دسترسی پیدا کنیم.

گام ۱ – ایجاد صفحه HTML

صفحه HTML جدیدی با نام Media01.html ایجاد می کنیم یا می توانید از فایل تمرین قبل نیز استفاده نمایید. سورس ویدئو را در صفت src مشخص می کنیم. این بار صفت “controls” را اضافه نمی کنیم، چرا که می خواهیم این کار را از طریق جاوا اسکریپت انجام دهیم.

 

<video width="500px" id="vid">
<source src="vid.mp4" />
</video>

 

گام ۲ – اضافه کردن ۳ دکمه برای play، stop، end و یک input از نوع range برای کنترل صدا

المنت های زیر را اضافه می کنیم.


<input type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />


گام ۳ – ایجاد توابع جاوا اسکریپت برای کنترل ویدئو

تابع زیر به ما کمک می کند که ویدئو را پخش کرده و یا متوقف نماییم.


function PlayOrPause()
{
var v = document.getElementById('vid');
if (v.paused || v.ended)
{
 v.play();
 document.getElementById('BtnPlay').value = "Pause";
}
else
{
 v.pause();
 document.getElementById('BtnPlay').value = "Play";
}
}


تابع زیر ویدئو را در ثانیه ششم متوقف می کند، چرا که ما currentTime را روی ۶ تنظیم کردیم.


function Stop()
{
 var v = document.getElementById('vid');
 v.pause();
 v.currentTime = 6;
 document.getElementById('BtnPlay').value = "Play";
}


تابع زیر پخش ویدئو را کاملا قطع می کند و currentTime را روی duration تنظیم کردیم که زمان کل ویدئو می باشد.

function End()
{
var v = document.getElementById('vid');
v.pause();
v.currentTime = v.duration;
document.getElementById('BtnPlay').value = "Play";
}

تابع زیر صدای ویدئو را در بازه ۰ و ۱ تنظیم می کند.

function ChangeVolume(element)
{
var v = document.getElementById('vid');
v.volume = element.value;//For mute set it to 0
}

خروجی:

HTML5 Media

اگر می خواهید در زمان بارگزاری player تصویر پیش فرضی را روی صفحه نمایش دهید، می توانید از صفت خاصی با نام poster به همراه آدرس تصویر استفاده نمایید.

<video controls width="500px" id="vid" poster="MyPoster.jpg">
<source src="vid.mp4" />
</video>

تمرین ۱۶ – المنت audio

درست مانند video، audio نیز قبل از HTML5 برای طراحان مشکل محسوب می شد. ما هیچ راهی جز وابستگی به تگ object و کتابخانه های third party نداشتیم. اما حالا المنت audio در HTML5 کار را برای ما راحت تر کرده است.

گام ۱ – آماده کردن audio

یک audio ساده برای مقاصد آموزشی دانلود می کنیم. می توانید از سمپل پیوست شده نیز استفاده نمایید.

گام ۲ – ایجاد صفحه HTML

یک صفحه HTML جدید با نام Audio.html ایجاد کرده و محتوای زیر را در آن قرار می دهیم.

<audio id="audctrl" controls>
<source src="aud.mp3" type="audio/mp3" />
</audio>

نکته:

  • لطفا توجه داشته باشید که فایل audio و صفحه HTML در یک فولدر قرار داشته باشند. اگر می خواهید این دو در فولدرهای جداگانه ای قرار داشته باشند، بنابراین باید صفت “src” را متناسب با آن تغییر دهید.
  • المنت Video در حال حاضر فقط فرمت های mp3، wav، ogg را پشتیبانی می کند.

خروجی:

HTML5 Media

تمرین ۱۷ – کدنویسی با المنت audio

در این تمرین سعی می کنیم با استفاده از جاوا اسکریپت به ویژگی های المنت audio مانند play/ pause/ stop و غیره دسترسی پیدا کنیم.

گام ۱ – ایجاد صفحه HTML

یک صفحه HTML جدید با نام Audio01.html ایجاد می کنیم یا می توانید از فایل تمرین قبل نیز استفاده نمایید. سورس audio را در صفت src فراهم می کنیم. این بار صفت “controls” را اضافه نمی کنیم چرا که این کار را با جاوا اسکریپت انجام می دهیم.

<audio id="audctrl">
<source src="aud.mp3" type="audio/mp3" />
</audio>

گام ۲ – اضافه کردن ۳ دکمه برای play، stop، end و یک input از نوع range برای کنترل صدا

المنت های زیر را اضافه می کنیم.

<input type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />

 

گام ۳ – ایجاد توابع جاوا اسکریپت برای کنترل audio

تابع زیر به ما کمک می کند که audio را پخش کرده و یا متوقف نماییم.

function PlayOrPause()
{
var v = document.getElementById(' audctrl');
if (v.paused || v.ended)
{
v.play();
document.getElementById('BtnPlay').value = "Pause";
}
else
{
v.pause();
document.getElementById('BtnPlay').value = "Play";
}
}

تابع زیر audio را در ثانیه ششم متوقف می کند، چرا که ما currentTime را روی ۶ تنظیم کردیم.

function Stop()
{
var v = document.getElementById(' audctrl');
v.pause();
v.currentTime = 6;
document.getElementById('BtnPlay').value = "Play";
}

تابع زیر پخش audio را کاملا قطع می کند و currentTime را روی duration تنظیم کردیم که زمان کل audio می باشد.

function End()
{
var v = document.getElementById('audctrl');
v.pause();
v.currentTime = v.duration;
document.getElementById('BtnPlay').value = "Play";
}

تابع زیر صدای audio را در بازه ۰ و ۱ تنظیم می کند.

function ChangeVolume(element)
{
var v = document.getElementById(' audctrl');
v.volume = element.value;//For mute set it to 0
}

خروجی:

HTML5 Media

نکته: در این حالت audio player را در صفحه نخواهید دید.

تمرین ۱۸ – Drag and Drop قسمت اول

پیش از این، برای پیاده سازی قابلیت Drag and Drop برنامه نویسان مجبور بودند که منطق خود را پیاده سازی کنند. اما HTML5 با یک API مخصوص Drag and Drop آمد که کار را بسیار آسان تر می کند و علاوه بر این می توانیم کد استاندارد را در هر جایی ببینیم.

حال ببینیم که چگونه به صورت گام به گام می توانیم این امکان را پیاده سازی کنیم.

گام ۱ – آماده کردن تصویر

یک تصویر ساده برای مقاصد آموزشی دانلود می کنیم. می توانید از سمپل پیوست شده نیز استفاده نمایید.

گام ۲ – در اینجا می خواهیم یک تصویر را drag کنیم، بنابراین صفت draggable را برای <img/>، True می کنیم.

<img src="fish.png" style="width:179px;height:120px;top:200px;" draggable="true" id="img11" ondragstart="drag(event)" />

خروجی:

HTML5 Media

گام ۳ – زمانی که تصویر را drag می کنید، چه اتفاقی باید بیفتد؟

حالا باید رویداد ondragstart را تنظیم کنیم و تابع drag(event) را فراخوانی کنیم که event مشخص می کند چه داده ای قرار است drag شود.

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

متد ev.dataTransfer.setData()، datatype و value داده drag شده را مشخص می کند که در مثال ما تگ id می باشد.

گام ۴ – این ماهی را کجا drag می کنیم؟ در یک تنگ، به عنوان مثال در یک div



<div id="div1" class="bowl" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>


خروجی:

HTML5 Media

نکته: ما در اینجا از style استفاده کردیم و background-image مربوط به div را با این تصویر پر کردیم.

رویداد ondragover مشخص می کند که داده drag شده در کجا drop شود. این مورد لازم است چرا که به طور پیش فرض داده یا المنت ها نمی توانند روی المنت های دیگر drop شوند. برای مجاز بودن drop، ما باید رفتار پیش فرض المنت را override نماییم. این کار با فراخوانی متد ev.preventDefault() انجام می شود.


function allowDrop(ev) {
ev.preventDefault();
}

گام ۵ – حالا المنت را drop  می کنیم، به محض اینکه ماوس را از روی المنت drag شده برداریم، رویداد ondrop به طور اتوماتیک فراخوانی می شود، ما تابع drop() را فراخوانی می کنیم.


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

توضیحات:

  • متد preventDefault() فقط برای جلوگیری از رفتار پیش فرض مرورگر برای کنترل داده ها فراخوانی می شود.
  • داده drag شده را با همان نوعی دریافت می کنیم که در زمان تعریف آن استفاده کردیم. متد dataTransfer.getData(“text”) برای این کار استفاده شده است.

خروجی:

HTML5 Media

ماهی را با ماوس انتخاب کرده و آن را به سمت تنگ بکشید و در آن رها کنید. جالب نیست و البته ساده؟؟ J

تمرین ۱۹ – Drag and Drop قسمت دوم

حالا می خواهیم یک قابلیت جالب تر با استفاده از ویژگی Drag and Drop ایجاد کنیم. در اینجا یک پازل صورت ایجاد می کنیم که با قرار دادن اجزای صورت می توان آن را کامل کرد.

گام ۱ – ایجاد یک صفحه HTML

یک صفحه HTML با نام DragDrop2.html ایجاد کرده و کد css و html زیر را در آن قرار می دهیم.

کد HTML و CSS



<style>
body {
cursor: pointer;
text-align: center;
}
.divdrag {
position: relative;
border: 0px solid rgba(0, 0, 0, .25);
width: 300px;
height: 300px;
padding: 10px 10px10px10px;
float: left;
}
.face {
background-image: url('face.jpg');
background-repeat: no-repeat;
width: 424px;
height: 510px;
border: 1px dotted grey;
padding: 0 0 0 0;
}
.facetr td {
text-align: center;
border: 1px dotted #f7ecec;
}
</style>



<h2>Create the face</h2>


<div class="divdrag">
<img src="eye1.png" alt="eye" draggable="true" id="eye1" ondragstart="drag(event)" />
<img src="eye2.png" alt="eye" draggable="true" id="eye2" ondragstart="drag(event)" />
<img src="nose2.png" alt="nose" draggable="true" id="nose2" ondragstart="drag(event)" />
<img src="eye4.png" alt="eye" draggable="true" id="eye4" ondragstart="drag(event)" />
<img src="nose1.png" alt="nose" draggable="true" id="nose1" ondragstart="drag(event)" />
<img src="eye3.png" alt="eye" draggable="true" id="eye3" ondragstart="drag(event)" />
<img src="smile1.png" alt="smile" draggable="true" id="smile1" ondragstart="drag(event)" />
<img src="smile3.png" alt="smile" draggable="true" id="smile2" ondragstart="drag(event)" />
<img src="smile2.png" alt="smile" draggable="true" id="smile3" ondragstart="drag(event)" />
</div>


<div style="float:left;">
<a href="DragnDrop.html" title="Click here to reset" style="text-decoration:none;">
<img src="direction.png" width="125" height="100" onclick="" />
</a>
</div>


<div id="div1" style="width:300px;height:300px;float:left;">

<table class="face">

<tr>

<td colspan="2" style="width:100%;">&nbsp;</td>

</tr>


<tr>

<td colspan="2" style="width:100%;">&nbsp;</td>

</tr>


<tr>

<td id="eye" style="width:50%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>


<td id="eye" style="width:50%" ondrop="drop(event)" ondragover="allowDrop(event)"></td>

</tr>


<tr>

<td id="nose" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>

</tr>


<tr>

<td id="smile" ondrop="drop(event)" ondragover="allowDrop(event)" colspan="2"></td>

</tr>

</table>

</div>


خروجی:

HTML5 Media

توضیحات:

  • اجزای مختلف صورت را گرفته و در یک div ریختیم.
  • هر تصویری با صفت draggable=true و رویداد ondragstart که تابع drag() را فراخوانی می کند پیاده سازی شدند.
  • یک div دیگر ایجاد کردیم که خطوط دور صورت در آن مشخص شده است. این div شامل یک جدول است که مشخص می کند هر قسمت در کجا می تواند drop شود.
  • برای هر یک از آن ها، می خواهیم اجازه drop تصاویر را بدهیم، رویداد ondrop&ondragover را مشخص کنیم و به ترتیب توابع drop(event) و allowDrop(event) را فراخوانی کنیم.
  • برای Reset، دوباره همین صفحه را به صورت زیر فراخوانی می کنیم تا سادگی کد حفظ شود.

<a href="DragnDrop.html" title="Click here to reset" style="text-decoration:none;">
<img src="direction.png" width="125" height="100" onclick="" /></a>

به همین ترتیب، طراحی HTML انجام شد.

کد جاوا اسکریپت:


function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (data.indexOf(ev.target.id) == -1) {
ev.dataTransfer.clearData();
}
else {
ev.target.appendChild(document.getElementById(data));
}
}

توضیحات:

کد جاوا اسکریپت به همان صورتی که در مثال ماهی و تنگ توضیح دادیم، باقی می ماند.

  • اگر توجه کرده باشید، در تابع drag() از کد dataTransfer.effectAllowed=’copy’ استفاده کردیم. این کد در واقع نوع عملیاتی را که ما می خواهیم انجام دهیم برمی گرداند، مانند copy. بنابراین اگر زمانی که تصویر را drag می کنید به نشانگر ماوس دقت کنید، آیکون کپی مرورگر را مشاهده خواهید کرد. مقادیر مجاز دیگر none، link، move و linkmove می باشد.
  • در تابع drop()، indexOf(ev.target.id)== -1 را چک کردیم که اگر “id” در داده ذخیره شده باشد تا حدودی با مکان drop موردنظر مثلا id مربوط به td مطابقت دارد پس اجازه drop شدن را می دهد. در غیر این صورت داده ذخیره شده در شیء dataTransfer حذف می شود.

خروجی:

HTML5 Media

تمرین ۲۰ – Geo Location

Geo Location چیست؟

می تواند عرض و طول و ارتفاع دقیق جغرافیایی، سرعت و timestamp را ثبت کند. پس می تواند برای دریافت وضعیت آب و هوا، ترافیک و… مفید باشد.

اگر به موقعیت ما دست پیدا کند، مسئله امنیت چه می شود؟

مشکل geolocation API این است که اگر کاربر به طور مستقیم از طریق مرورگر ردیابی شود، امنیت از بین می رود. از آنجا که تاحدودی با امنیت کاربر سازگار می باشد، موقعیت مکانی کاربر در دسترس نخواهد بود، مگر اینکه کاربر آن را در مرورگر خود پذیرفته باشد. کاربر می تواند کنترل امنیت را به وسیله popupای که در زیر نمایش داده می شود، به دست بگیرد.

HTML5 Media

این روش فقط برای مرورگرهای اینترنت می باشد. برای مرورگرهای دیگر ممکن است این popup متفاوت باشد. همچنین نشان می دهد که کدام وب سایت می خواهد موقعیت فیزیکی شما را ردیابی کند. این شما هستید که تصمیم می گیرید این دسترسی را بدهید یا خیر.

نکته: این قابلیت تنها در مرورگرهای جدید مانند IE 9، Chrome 5.0، Firefox و موبایل های هوشمند با Android2.0 و IPhone3.0 کار می کند.

اجازه بدهید به صورت گام به گام ببینیم که چطور کار می کند!

ما می خواهیم به طول و عرض جغرافیایی خود را پیدا کنیم.

تنظیمات اولیه

گام اول:

صفحه HTML ای با نام Geolocation.html ایجاد می کنیم.

گام دوم:

می خواهیم با کلیک روی دکمه، موقعیت فعلی خود را در قالب طول و عرض جغرافیایی روی یک Lable مشاهده کنیم، بنابراین یک دکمه و یک lable به صفحه اضافه می کنیم. کد جاوا اسکریپت زیر را نیز به صفحه اضافه می کنیم.


<input type="button" value="Get My Location" />

کد جاوا اسکریپت:


<script type=&rdquo;text/Javascript&rdquo;>
var x = document.getElementById("lblDisplay");

function getLocation() {
document.getElementById("header").value = "Static Location";
if (navigator.geolocation) {
var opt = {
timeout: 6000,
maximumAge: 60000,
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(showPosition, errorCallBack, opt);
}
else {
alert('No support for geolocation');
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"Longitude: " + position.coords.longitude;
}

function errorCallBack(e) {
switch (e)
{
case e.PERMISSION_DENIED:
x.innerHTML = "User denied geolocation request";
break;
case e.POSITION_UNAVAILABLE:
x.innerHTML = "No position information available";
break;
case e.TIMEOUT:
x.innerHTML = "Timeout occured";
break;
case e.UNKNOWN_ERROR:
x.innerHTML = "Unknown error";
break;
}
}
</script>

توضیحات:

  • در اینجا تابع getLocation() را ایجاد کردیم که موقعیت فعلی ما را پیدا می کند.

اول از همه این api از طریق شیء window.navigator.geolocation قابل دسترسی است. به محض اینکه برای موقعیت کنونی درخواست می کنیم، این تابع آن را از متد getCurrentPosition() می گیرد.

این متد پارامتر اول را به عنوان position callback می گیرد که در مثال ما متد showPosition() می باشد. این متد آرگومانی دارد که یک شیء position است. این آرگومان به ما این امکان را می دهد که طول و عرض جغرافیایی موقعیت خود را بازیابی نماییم.

  • پارامتر اختیاری دوم متد ingetCurrentPosition()، PositionError callback می باشد مانند errorCallback(). این متد یک آرگومان دارد که شیء PositionError می باشد. اگر در کد بالا مشاهده کنید، یک switch…case نوشتیم که انواع خطاها را مدیریت کند.
  • پارامتر اختیاری سوم متد getCurrentPosition() شیء PositionOption می باشد. این پارامتر امکان ارسال گزینه های مختلفی را می دهد، که در زیر به برخی از آن ها می پردازیم.
    • Timeout: زمانی که مقدار جدیدی را بازیابی می کنیم، به عنوان مثال بعد از ۱ ثانیه (محاسبات برحسب میلی ثانیه می باشد.)
    • enableHighAccuracy: زمانی که true باشد مشخص می کند که موقعیت موردنظر چقدر دقیق باید بازیابی شود. واضح است که بازیابی دقیق زمان بیشتری طول می کشد.
    • maximumAge: چه زمانی از بازیابی موقعیت می گذرد، مثلا ۱ دقیقه (به میلی ثانیه). پس از آن موقعیت مکانی دوباره محاسبه می شود.

خروجی:

HTML5 Media

نکته: بهتر است که خروجی را در Internet Explorer 9+ تست کنید.

چگونه در صورت تغییر موقعیت، به طور اتوماتیک آن را آپدیت نماییم.

تنظیمات اولیه

گام اول: یک دکمه و یک lable به صفحه اضافه می کنیم.

<input type=”button” value=”Get My Location Updated” />

گام دوم: نوشتن یک تابع جاوا اسکریپت


varwatchid;
function getUpdatedLocation() {
document.getElementById("header").value = "Dynamic Location";
if (navigator.geolocation) {
var opt = {
timeout: 500,
maximumAge: 1000,
enableHighAccuracy: true
};
watchid = navigator.geolocation.watchPosition(showPosition, errorCallBack, opt);
}
else {
// no native support; maybe try a fallback?
}
}

توضیحات:

Navigator.geolocation.watchPosition(): این متد موقعیت فعلی را برمی گرداند و منتظر geolocation می ماند تا موقعیت مکانی را برحسب گزینه های timeout و maximumAge که به محض حرکت و تغییر مکان کاربر تغییر می کنند، آپدیت نماید. این امکان شبیه به GPS سیستم شما می باشد.

چگونه آپدیت موقعیت را متوقف نماییم؟

تنظیمات اولیه

گام ۱ – یک دکمه دیگر به صفحه اضافه می کنیم.


<input type="button" value="Stop Updating Location" />

گام ۲ – تابع جاوا اسکریپت زیر را می نویسیم.


function stopUpdatingLocation() {
if (navigator.geolocation) {
navigator.geolocation.clearWatch(watchid);
}
}

توضیحات:

Navigator.geolocation.clearWatch(): این متد، متد watchPosition() را متوقف می کند که یک پارامتر watchid (همان متغیری است که ما در متد watchPosition استفاده کردیم.) می گیرد.

خروجی:

HTML5 Media

تمرین ۲۱ – Geo Location با Google Map

حالا اجازه بدهید که یک کار خلاقانه با مطالبی که تا اینجا یاد گرفتیم، انجام دهیم.

می خواهیم با استفاده از geolocation API موقعیت مکانی را به دست آوریم و از این مختصات در google map استفاده کرده و آدرس یک محلی را پیدا کنیم.

تنظیمات اولیه

گام ۱ – صفحه HTML ای با نام Geolocation2.html ایجاد می کنیم.

گام ۲ – رفرنس فایل جاوا اسکریپت google map API را به فایل HTML اضافه می کنیم.

<script src=”http://maps.google.se/maps/api/js?sensor=false”></script>

گام ۳ – یک div برای بارگزاری map به صفحه اضافه می کنیم.

<div id=”divmap” style=”border:1px solid #ffd800;width:400px;height:400px;”></div>

گام ۴ – یک دکمه اضافه می کنیم که با کلیک بر روی آن نقشه بارگزاری می شود و یک TextBox که آدرس را در آن وارد می کنیم.

<input type=”text” id=”txtDestination” value=”Tehran” />
<input type=”button” value=”Get Direction” />

گام ۵ – کد جاوا اسکریپت زیر را در صفحه قرار می دهیم.


<script type="text/javascript">

function GetMyDirection() {
if (navigator.geolocation) {
var opt = {
timeout: 500,
maximumAge: 1000,
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(showPosition, errorCallBack, opt);
}
else {
alert('No support for geolocation');
}
}

function showPosition(position) {
showInMap(position.coords.latitude, position.coords.longitude);
}

function showInMap(lat, lang) {

vardirectionsService = new google.maps.DirectionsService();
vardirectionsRenderer = new google.maps.DirectionsRenderer();

var route = {
origin: new google.maps.LatLng(lat, lang),
destination: document.getElementById('txtDestination').value, travelMode: google.maps.DirectionsTravelMode.DRIVING
};

varmapOptions = {
zoom: 10,
center: new google.maps.LatLng(50.8504500, 4.3487800),mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("divmap"), mapOptions);
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById("divDriveDirection"));
directionsService.route(route, function (result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}

function errorCallBack(e) {
switch (e) {
case e.PERMISSION_DENIED:
x.innerHTML = "User denied geolocation request";
break;
case e.POSITION_UNAVAILABLE:
x.innerHTML = "No position information available";
break;
case e.TIMEOUT:
x.innerHTML = "Timeout occured";
break;
case e.UNKNOWN_ERROR:
x.innerHTML = "Unknown error";
break;
}
}
</script>

توضیحات:

در متد callback مربوط به navigator.geolocation.getCurrentPosition() به طور مثال showPosition() ما یک متد دیگر را صدا زدیم که به پیدا کردن عرض و طول جغرافیایی روی google map کمک می کند.

  • یک شی از google map direction service ایجاد می کنیم.

vardirectionsService = new google.maps.DirectionsService();

  • ایجاد یک شی از google direction renderer در اجرای آدرس روی نقشه کمک می کند.

vardirectionsRenderer = new google.maps.DirectionsRenderer();

 

 

  • تنظیم یک سری گزینه مسیریابی

var route = {
origin: new google.maps.LatLng(lat, long),
destination: document.getElementById('txtDestination').value;
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

 

 

Origin – مکان فعلی ماست بنابراین متد LatLng() گوگل را برای آن تنظیم می کنیم.

Destination – هرچیزی که در TextBox وارد می شود مثلا Tehran

travelMode – وضعیت سفر را مشخص می کند.

  • تنظیم mapOptions

varmapOptions = {
zoom: 30,
center: new google.maps.LatLng(20, 77),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Zoom – zoom پیش فرض را مشخص می کند.

Center – مشخص می کند که نقشه در کجا قرار بگیرد.

maptypeId – به دلیل اینکه ما DRIVING را انتخاب کردیم، بنابراین جاده ها را به عنوان type نمایش می دهد.

  • و درنهایت ایجاد نقشه

var map = new google.maps.Map(document.getElementById("divmap"), mapOptions);
directionsRenderer.setMap(map);
directionsService.route(route, function (result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});

  • نمایش همه جزئیات درباره مسیر و آدرس برای رسیدن از مبدا به مقصد با استفاده خط کد زیر:

directionsRenderer.setPanel(document.getElementById("divDriveDirection"));

حال برنامه آماده است میتوانید از آن اجرا بگیرید و امتحان کنید.

Web Worker

Web Worker چیست؟

قبل از اینکه بخواهیم جلوتر برویم، اجازه بدهید سوالی از شما بپرسم. آیا تا به حال با خطای زیر مواجه شده اید؟

HTML5 Media

اگر بله، راه حل این مشکل Web Worker است. (ظاهر این خطا ممکن است در مرورگرهای مختلف، متفاوت باشد.)

اجرای جاوا اسکریپت طولانی مدت، UI را غیرواکنش گرا (unresponsive) می کند و به دفعات زیاد با خطای بالا مواجه می شویم. تنها راه حل برای این مشکلات این است که سمت کلاینت multi-thread باشد. متاسفانه قبل از این، ممکن نبود اما حالا با HTML5 و با استفاده از Web Worker می توانیم multi-thread را در سمت کلاینت پیاده سازی کنیم.

با یک تمرین بیشتر با کارایی Web Worker آشنا می شویم.

تمرین ۲۲ – معرفی ساده web worker

این تمرین بسیار ساده است. در اینجا ما یک عدد “N” از کاربر می گیریم و مجموع اعداد “N” را نمایش می دهیم.

نکته: ابتدا تمرین را بدون web worker شروع می کنیم، خروجی را درک کرده و سپس به web worker مهاجرت می کنیم.

گام ۱ – ایجاد یک پروژه ASP.Net

ویژوال استودیو را باز کرده و به File>> New Project می رویم.

از سمت چپ پنجره، Web را انتخاب کرده و در سمت راست روی “ASP.Net Web Application” کلیک می کنیم و ok می نماییم.

HTML5 Media

در پنجره بعدی Empty را انتخاب کرده و ok می کنیم.

HTML5 Media

گام ۲ – ایجاد فایل HTML

کد زیر را در فایل bodyWebWorker.html قرار می دهیم.


<input type="text" name="myText" id="myText" value=" " />
<input type="button" name="name" value="Generate" />

گام ۳ – دانلود تصویر Loading

یک عکس با فرمت GIF را به انتخاب خودتان دانلود کرده و نام آن را loading.gif بگذارید و در پروژه قرار دهید. اگر بخواهید می توانید از سمپل پیوست شده استفاده کنید.

گام ۴ – دانلود jQuery

فایل jQuery را از اینجا دانلود کنید و یا از فایل درون سمپل استفاده کرده و آن را در پروژه خود قرار دهید.

فقط یک نکته کوتاه، جی کوئری یک کتابخانه جاوا اسکریپت است که دست کاری های DOM و انتقال آن ها را آسان تر می کند.

به زبان ساده تر، با استفاده از این کتابخانه برنامه نویسی در HTML بسیار ساده می شود.

این تمرین یا سری آموزشی انتظار نداریم که شما جی کوئری را بلد باشید. تنها از برخی امکانات جی کوئری استفاده می کنیم که هر یک را توضیح خواهیم داد.

گام ۵ – Include jQuery

فایل اسکریپت جی کوئری را به صورت زیر، به سادگی در قسمت head فایل WebWorker.html، Include می کنیم.


<script src="jquery-1.4.4.min.js"></script>

گام ۶ – نوشتن اسکریپت long running

تابع جاوا اسکریپت “Generate” را به صورت زیر ایجاد می کنیم:


<script type="text/javascript">
function Generate()
{
$('#divData').html("Generating");
$('.MyLoading').show();
var j = 0;

for (i = 0; i<= parseInt($('#myText').val()); i++)
{
j = j+ i;
}
$('#divData').html("Result is " + j);
$('.MyLoading').hide();
}
</script>

در تابع “Generate”، کارهای زیر یکی پس از دیگری انجام می شوند:

  1. نمایش متن “Generating…”
  2. نمایش تصویر Loading
  3. اجرای عملیات منطقی (عملیات long running – اضافه کردن N عدد اول)
  4. نمایش نتیجه
  5. پنهان کردن تصویر Loading

نکته: در کد بالا

  • $(‘#divData’) – المنتی با شناسه “divData” را برمی گرداند.
  • Html – تابعی که HTML داخلی یک المنت را اعمال می کند.
  • Show و hide – یک المنت را نمایش داده یا پنهان می کند.

گام ۷ – تست و اجرای برنامه

HTML5 Media

(در این مورد با قرار دادن اعداد بزرگ با خطا مواجه شوید)

شما می توانید دو چیز را در خروجی مشاهده نمایید:

  • قرار دادن اعدا بزرگ در TextBox صفحه را غیرواکنش گرا می کند. دلیل این مشکل این است که، هر مرورگری به طور داخلی برای اجرای اسکریپت فاصله ثابت و مشخصی دارد. زمانی که هر اسکریپتی بیشتر از این فاصله اجرا شود، این خطا نمایش داده خواهد شد.
  • ما انتظار داشتیم که وقتی روی دکمه Generate کلیک می کنیم، تصویر loading را ببینیم اما این اتفاق نیفتاد. در این مورد، Thread ای که مسئول اجرای اسکریپت long running می باشد، مسئولیت اجرای UI را نیز برعهده دارد. از آنجا که Thread مشغول اجرای اسکریپت است، بنابراین تغییرات UI اجرا نمی شوند. از این رو تصویر نمایش داده نمی شود مگر اینکه اجرای اسکریپت کامل شود.

گام ۸ – کار با Web Worker

برای شروع کار با Web Worker باید کد long running را به یک فایل جاوا اسکریپت جدا منتقل کنیم. پس یک فایل جاوا اسکریپت جدید با نام MyWebWorker.js ایجاد می کنیم و کد زیر را در آن قرار می دهیم.


var j = 0;
onmessage = function (e)
{
};

در کد بالا، متغیر onmessage یک متغیر سراسری است که توسط Web Worker قابل دسترسی می باشد و به یک تابع که شامل اسکریپت long running است وصل شده است.

گام ۹ – انتقال کد long running به فایل Web Worker

قبل از انجام این مرحله، باید با دو محدودیت Web Worker آشنا شویم.

  1. در کد Web Worker، نمی توانیم هیچ رفرنسی به المنت های DOM داشته باشیم.
  2. در کد Web Worker، نمی توانیم از امکانات هیچ کتابخانه third party مانند جی کوئری استفاده کنیم.

بعد از در نظر گرفتن محدودیت های بالا، کد Web Worker به صورت زیر نوشته می شود:


var j = 0;
onmessage = function (e) {
for (i = 0; i<= e.data; i++) {
j = j+i;

}
postMessage(j);
};

در کد بالا، فراخوانی تابع postMessage پاسخ نهایی را به فراخواننده تابع ارسال می کند. اگر در حال حاضر مقداری گیج شده اید و همه چیز گنگ شده، نگران نباشید و آرامش خود را حفظ کنید J و تمرین را ادامه بدهید، این قول را به شما می دهم که در پایان این تمرین همه چیز برای شما واضح خواهد شد.

گام ۱۰ – فراخوانی Web Worker

فایل WebWorker.html را باز کرده و تابع Generate را به شکل زیر تغییر می دهیم.


function Generate()
{
$('#divData').html("Generating");
$('.MyLoading').show();
var c = new Worker("MyWebWorker.js");
c.onmessage = function (e)
{
$('#divData').html("Result is " + e.data);
$('.MyLoading').hide();
};
c.postMessage(parseInt($('#myText').val()));
}

همان طور که مشاهده می کنید شیء جدیدی از worker ایجاد کردیم که از امکانات HTML5 می باشد. این کد دو چیز را نشان می دهد:

  • تابع postMessage، اشاره ای به worker است تا کار خود را در یک thread دیگر شروع کند. با این روش تابع onMessage در فایل worker به سادگی فراخوانی می شود.
  • ویژگی onMessage، یک اشاره گر کاربردی قابل دسترسی برای web worker است. نقش یک تابع callback را بازی می کند که وقتی thread اجرای خود را تمام می کند، اجرا خواهد شد. تابع postMessage در فایل worker این متد را صدا می زند.

گام ۱۱ – تست و اجرا

با فشردن کید F5 برنامه اجرا و تست می کنیم.

HTML5 Media

اجازه دهید نگاهی به ترتیب اجرای کد داشته باشیم:

HTML5 Media

تمرین ۲۳ – Web Worker با Web API

Web API یکی از تکنولوژی های ASP.Net برای ایجاد سرویس های مبتنی بر Rest هستند. دوستانی که مقالات نینجای MVC را دنبال کردند، به زودی منتظر سری پیشرفته باشند که در آن به بحث Web API نیز خواهیم پرداخت.

شاید با خودتان فکر کنید، این تمرین چه مطلب خاصی دارد. احتمالا قبل از این ۱۰۰ بار از سرویس های REST استفاده کرده باشید.

همان طور که می دانید، سرویس یک مفهوم سمت سرور است در حالی که HTML و JavaScript مفاهیم سمت کلاینت می باشند. برای دسترسی به امکانات سمت سرور از سمت کلاینت، ما از AJAX استفاده می کنیم. کتابخانه های third party مختلفی وجود دارند که فراخوانی های AJAX را برای ما ساده تر می کنند. کتابخانه های مانند jQuery، Angular و…

خب پس مشکل چیست؟ مشکل این است که همان طور که قبلا ذکر شد، Web Worker اجازه استفاده از هیچ کدام از این کتابخانه ها را به ما نمی دهد. به زبان ساده تر، ما نمی توانیم در MyWebWorker.js از امکانات جی کوئری یا هر کتابخانه دیگری استفاده کنیم.

در تمرین بعدی با ما همراه باشید تا ببینیم چگونه می توان این کار را انجام داد.

گام ۱ – دانلود Web API

پروژه  Web API ساده ای که در پیوست مقاله وجود دارد، دانلود نمایید.

گام ۲ – اجرای Web API

پروژه Web API را در ویژوال استودیو باز کرده و اجرا نمایید. همان طور که در شکل نشان داده شده به API بروید.

HTML5 Media

مرورگرهای مختلف ممکن است نتیجه اجرای Web API را به شکل های متفاوتی نمایش دهند. در IE احتمالا یک فایل متنی با داده های Json را دانلود کنید.

گام ۳ – فراخوانی Web API و برگرداندن داده ها

یک فایل MyWebWorker.js جدید به صورت زیر ایجاد می کنیم.


var j = 0;

onmessage = function (e) {

var a = new XMLHttpRequest();
a.onreadystatechange = function () {
if (a.readyState == 4 &&a.status == 200) {
postMessage(JSON.parse(a.responseText));
}
};
a.open("get", "http://localhost:35871/api/WorkerTest", false);
a.send();
};

همان طور که مشاهده می کنید، به جای استفاده از جی کوئری از شیء XmlHttpRequest برای اجرای درخواست AJAX استفاده کردیم.

گام ۴ – تغییر صفحه HTML

محتوای HTML را به شکل زیر تغییر می دهیم.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function GetData() {
$('#divData').html("Generating");
$('.MyLoading').show();
var c = new Worker("MyWebWorker.js");
c.onmessage = function (e) {
$('#divData').html("Result is " + e.data.CustomerName + "---" + e.data.Address);
$('.MyLoading').hide();
};
c.postMessage(parseInt($('#myText').val()));
}
</script>
</head>
<body>
<input type="button" name="name" value="Generate" />
<span style="color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;"></body>
</html></span>

گام ۵ – تست و اجرا

HTML5 Media

امیدوارم از این سری آموزش لذت برده باشید.

 

فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    جواد پاسخ

    خیلی ممنونم آموزش خوبی بود.ممنوونم از زحماتی که می کشید.

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم