الدرس 14 : وسوم النماذج الجديدة form

HTML5

0

الدرس 14 : وسوم النماذج الجديدة form

وسوم النماذج الجديدة form

تم إضافة العناصر التالية الى لغة HTML5 

<datalist>

<keygen>

<output>

على الرغم من عدم دعم جميع المتصفحات لهذه الوسوم الا أنك يمكنك استخدامهم بشكل طبيعي و في حال عدم دعم المتصفح لهم سيظهر حقل نص عادي .

---

الوسم <datalist>

يحدد الوسم <datalist> قائمة من الخيارات المعرفة مسبقاً للوسم <input> .
يستخدم <datalist> لتقديم ميزة autocomplete للوسم <input> حيث سيشاهد المستخدم قائمة منسدلة للعناصر المعرفة مسبقاً الخاصة بوسم الادخال .
ملاحظة : الوسم <datalist> مدعوم من متصفحات الاوبرا و الفايرفوكس فقط .
مثال

<input list="browsers" />

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

---

الوسم <keygen>

الهدف من استخدام الوسم <keygen> لتقديم طريقة آمنة للمستخدمين . حيث يخصص الوسم <keygen> موّلد مفاتيح لحقول خاصة بالنماذج .

عند ارسال النموذج سيتم توليد مفتاحين واحد خاص و الاخر عام . يتم تخزين المفتاح الخاص محلياً أما المفتاح العام يتم ارساله الى السيرفر . كما يقوم المفتاح العام بإنشاء شهادة موثوقية للمستخدم من أجل التصفح المستقبلي .

المتصفحات الداعمة

ان وسم <keygen> مدعوم من جميع المتصفحات الرئيسية ماعدا انترنت اكسبلورر .

مثال

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

---

وسم <output>

يستخدم الوسم <output> لتقديم نتيجة حساب معينة تماماً عند استخدام الاكواد البرمجية لعملية الحساب .

المتصفحات الداعمة

ان وسم <output> مدعوم من جميع المتصفحات الرئيسية ماعدا انترنت اكسبلورر .

مثال

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

---

العناصر الجديدة في HTML5

الوسم	الشرح
<datalist>	يحدد قائمة من الخيارات المعرفة مسبقاً للوسم <input> .
<keygen>	موّلد مفاتيح لحقول خاصة بالنماذج
<output>	تقديم نتيجة حساب معينة

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه

الدرس 13 : أنواع المدخلات في HTML5

HTML5

0

الدرس 13 : أنواع المدخلات في HTML5

أنواع المدخلات في HTML5

تحتوي HTML5 على العديد من المدخلات الجديدة الخاصة بالنماذج forms . و التي تسمح بالتحكم التام بحقول المدخلات .

---

المدخلات الجديدة هي

1. color
2. date
3. datetime
4. datetime-local
5. email
6. month
7. number
8. range
9. search
10. tel
11. time
12. url
13. week

ملاحظة : على الرغم من أنها مدخلات جديدة الا أنها ليست مدعومة من قبل جميع المتصفحات و على كل حال يمكنك استخدامها و اذا كان المتصفح لايدعمها عندها ستظهر بشكل نص عادي و لن تأثر على حقول المدخلات الاخرى .

---

نوع المدخل : اللون color

يستخدم اللون في حقل المدخلات و الذي يجب أن يحتوي على لون .
مثال : يمكنك اختيار أحد الألوان

اختر لونك المفضل : <input type="color" name="favcolor" />

---

نوع المدخل : التاريخ Date

يسمح للمستخدم تحديد التاريخ .

مثال

حدد تاريخ الميلاد : <input type="date" name="bday" />

---

نوع المدخل : التاريخ و الوقت datetime

تسمح datetime للمستخدم باختيار التاريخ و الوقت ( مع الوقت العالمي ) .

مثال

اختر الميلاد التاريخ و الوقت <input type="datetime" name="bdaytime" />

---

نوع المدخل : التاريخ و الوقت المحلي datetime-local

يستخدم هذا النوع من المدخلات datetime-local للمساح للمستخدم بتحديد التاريخ و الوقت محلياً حسب توقيت بلده .
مثال

اختر الميلاد التاريخ و الوقت  <input type="datetime-local" name="bdaytime" />

---

نوع المدخل : email

يستخدم المدخل email للحقل الذي يتطلب ادخال بريد الكتروني .
مثال

البريد :  <input type="email" name="usremail" />

ملاحظة : يدرك المتصفح سفاري و iPhone نوع البريد الالكتروني كما يمكنه التنبه بالبريد الغير فعال مثل يجب اضافة اشارة @ او .com للبريد .

---

نوع المدخل : month

يسمح للمستخدم باختيار الشهر و السنة .
مثال

اختر الميلاد التاريخ و الوقت <input type="month" name="bdaymonth" />

---

نوع المدخل number

يستخدم المدخل number لإضافة أرقام في حقل الادخال و التي يجب أن تكون قيم عددية حصراً .
مثال
القيمة يجب أن تكون من 1 حتى 5 فقط

<input type="number" name="quantity" min="1" max="5" />

اذا أردت استخدام تقييد حول استخدام الأرقام يمكنك استخدام التالي :

• max : تحدد القيمة العظمى المسموحة .


• min : تحدد القيمة الدنيا المسموحة .


• step : تحدد الرقم الصحيح المدخل .


• value : تحدد القيمة الافتراضية .

---

نوع المدخل :  range

يستخدم هذا النوع من المدخلات لادخال عدد معين من القيم . كما يمكن تحديد هذه القيم و تقييدها لعدد الأرقام المقبولة .
مثال

<input type="range" name="points" min="1" max="10" />

اذا أردت استخدام تقييد حول استخدام الأرقام يمكنك استخدام التالي :

• max : تحدد القيمة العظمى المسموحة .


• min : تحدد القيمة الدنيا المسموحة .


• step : تحدد الرقم الصحيح المدخل .


• value : تحدد القيمة الافتراضية .

---

نوع المدخل : البحث search

يستخدم الحقل بحث للحقول الخاصة لصنع محرك بحث .
مثال

ابحث في جوجل :  <input type="search" name="googlesearch" />

---

نوع المدخل :  tel

تعريف حقل معين لادخال رقم هاتف .
مثال

الهاتف :  <input type="tel" name="usrtel" />

---

نوع المدخل :  time

تسمح للمستخدم بتحديد الوقت .
مثال

اختر الوقت : <input type="time" name="usr_time" />

---

نوع المدخل :  url

يستخدم النوع url  للمدخلات التي تحتوي على روابط خارجية .
يتم تفعيل قيمة الرابط التشعبي url عند ارسال النموذج .
مثال

اضافة رابط الموقع : <input type="url" name="homepage" />

ملاحظة : يدرك المتصفح سفاري و iPhone نوع الرابط التشعبيurl  كما يمكنه التنبه بالرابط الغير فعال مثل يجب اضافة .com

---

نوع المدخل :  week

تسمح للمستخدم باختيار الاسبوع .
مثال

اختر الاسبوع <input type="week" name="week_year" />

---

المتصفحات الداعمة لعناصر المدخلات الجديدة

Opera	Safari	IE	Chrome	Firefox	نوع المدخل
نعم	لا	لا	لا	لا	color
نعم	نعم	لا	نعم	لا	date
نعم	نعم	لا	نعم	لا	datetime
نعم	نعم	لا	نعم	لا	datetime-local
نعم	لا	لا	نعم	نعم	email
نعم	نعم	لا	نعم	لا	month
نعم	نعم	لا	نعم	لا	number
نعم	نعم	لا	نعم	لا	range
لا	نعم	لا	نعم	لا	search
لا	لا	لا	لا	لا	tel
نعم	نعم	لا	نعم	لا	time
لا	لا	لا	نعم	نعم	url
نعم	نعم	لا	نعم	لا	week

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه

الدرس 12 : تقنية عامل الويب web worker

HTML5

0

الدرس 12 : تقنية عامل الويب web worker

تقنية عامل الويب web worker

يمكن تعريف web worker أو عامل الويب بأنه عبارة عن كود جافاسكربت يعمل في الخلفية و بدون أي تأثير لعمل الصفحة .

ماهي تقنية web worker ؟

عند تشغيل أي سكربت في صفحات HTML تصبح استجابة الصفحة ضعيفة حتى ينتهي السكربت من العمل .

يعتبر web worker أو عامل الويب بأنه عبارة عن كود جافاسكربت يعمل في خلفية صفحة الموقع و هو مستقل عن الأكواد الأخرى و لايأثر على عمل الصفحة . حيث يمكنك متابعة العمل في الموقع كالنقرات و التصفح .. الخ بينما كود web worker يعمل في خلفية الصفحة .

---

المتصفحات الداعمة

 |  |  |  | 

تقنية web worker مدعومة من جميع المتصفحات الرئيسة باستثناء انترنت اكسبلورر .

---

فحص عمل تقنية web worker

قبل إنشاء عامل ويب يجب التأكد فيما اذا كان المتصفح يدعم هذه التقنية أم لا :

if(typeof(Worker)!=="undefined")
{
// متصفحك يدعم تقنية عامل الويب
// Some code.....
}
else
{
// للأسف المتصفح لايدعم هذه الخاصية
}

---

إنشاء ملف عامل الويب

والآن سنقوم بإنشاء ملف عامل الويب من خلال ملف جافاسكربت خارجي .
كما أننا سنقوم بإنشاء سكربت يقوم بالعدّ وسنحفظ الكود في ملف يسمى demo_workers.js :

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

أهم جزء في الكود السابق هو الدالّة postMessage() حيث تقوم بإرسال رسالة الى صفحة صفحة الويب HTML .

ملاحظة : عادة تقنية عامل الويب لا تستخدم مع الأكواد البسيطة بل أنها تقوم بالعمل مع مهام داخلية متعلقة بوحدة المعالجة المركزية CPU .

---

إنشاء كائن لتقنية عامل الويب

لقد قمنا بإنشاء ملف لعامل الويب و الآن نحتاج أن نستدعيه إلى صفحة HTML .
سنقوم بإنشاء كائن جديد لعامل الويب و تشغيل الكود في ملف demo_workers.js الذي قمنا بإنشائه مسبقاً .

w=new Worker("demo_workers.js");

ثم يمكننا إرسال و تلقي الرسائل من عامل الويب . ثم يجب إضافة الحدث onmessage لعامل الويب .

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

عندما يقوم عامل الويب بإرسال رسالة سيتم تشيغل الكود الموجود ضمن الحدث السابق كما سيتم تخزين البيانات في عامل الويب في  event.data.

---

إنهاء عامل الويب

عند إنشاء كائن عامل الويب سيتم تلقي الرسائل ( حتى بعد انتهاء عمل السكربت الخارجي ) حتى يتم إنهاء .
لإنهاء كود عامل الويب يمكنك إضافة الدالّة terminate() كما في المثال :

w.terminate();

---

مثال كامل حول عامل الويب

لقد قمنا بإنشاء ملف جافاسكربت خارجي لعامل الويب بشكل متفرق لكننا سنعرضه الآن ضمن صفحة كاملة لنرى كيفية عمله :

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
w=new Worker("demo_workers.js");
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

---

استخدام تقنية عامل الويب مع DOM

بما أن كود عامل الويب يمكن أن يكون في ملف خارجي لهذا لايمكنك الوصول الى كائنات جافاسكربت التالية :

• كائن نافذة الصفحة window
• كائن الصفحة
• الكائن الأب (الأصلي)

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه

الدرس 11 : تخزين البيانات على الويب

HTML5

0

الدرس 11 : تخزين البيانات على الويب

تخزين البيانات على الويب

يعتبر التخزين على الويب أفضل من عملية التخزين باستخدام الكوكيز .

ماهي عملية تخزين البيانات على الويب في HTML5 ؟

باستخدام لغة HTML5 يمكن حفظ بيانات المستخدم محلياً على جهازه الشخصي .
قبلاً كان تخزين البيانات يتم محلياً كالكوكيز ولكن يعتبر استخدام تخزين البيانات على شبكة الويب أكثر أماناً و سرعة . حيث لا يتم تخزين البيانات في كل عملية ارسال للسيرفر بل عند السؤال فقط . كما أنه يمكن تخزين كميات كبيرة من البيانات و بدون أي تأثير على حركة الموقع .

---

المتصفحات الداعمة

 |  |  |  | 

عملية تخزين البيانات على الويب مدعومة من جميع المتصفحات .

---

ماهو localStorage و sessionStorage

يوجد نوعان من الكائنات التي تقوم بعملية تخزين البيانات :

• localStorage : يخزن البيانات بدون تاريخ محدد لانتهاء المدة .
• sessionStorage : يخزن البيانات لجلسة واحدة .

قبل البدء بتجربة التخزين على الويب يجب أولاً التاكد فيما اذا كان المتصفح يدعم localStorage و sessionStorage  :

if(typeof(Storage)!=="undefined")
{
// نعم! متصفحك يدعم localStorage و sessionStorage
// بعض الكود
}
else
{
// للأسف المتصفح لايدعم تلك الخاصيات
}

---

الكائن localStorage

يخزن الكائن localStorage البيانات بدون أي تاريخ او وقت لانتهاء مدة التخزين . كما أنه لن يتم حذف هذه البيانات عند اغلاق المتصفح وستكون متوفرة في اليوم التالي أو الاسبوع أو الشهر أو السنة التالية أيضاً .
مثال

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

شرح المثال السابق 

•  قمنا بإنشاء localStorage زوج من المفتاح و القيمة key/value أي أن المفتاح هوkey="lastname" و القيمة value="Smith" .
•  استرجاع قيمة lastname و إضافتها الى العنصر الجديد الموجود ضمن id="result" .

ملاحظة : يتم تخزين المفتاح و القيمة key/value كنص عادي strings كما أنه يجب تحويلهم الى صيغة أخرى عند الحاجة .

في المثال التالي سيتم عدّ المرات التي نقر عليها المستخدم و في هذه الحالة تم تحويل الصيغة الى رقم لكي يزداد الرقم عند العدّ :

if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

---

الكائن sessionStorage

يعتبر الكائن  sessionStorage شبيه للكائن localStorage باستثناء أنه يخزن البيانات لجلسة واحدة فقط . كما أنه سيتم حذف هذه البيانات عند اغلاق المتصفح .
يقوم المثال التالي بعدّ المرات التي قام المستخدم بالنقر على الأيقونة في الجلسة الحالية :

if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + se

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه

الدرس 10 : تحديد الموقع الجغرافي

HTML5

0

الدرس 10 : تحديد الموقع الجغرافي

تحديد الموقع الجغرافي

تستخدم HTML5 تقنية الموقع الجغرافي لتحديد مكان المستخدم .

---

تحديد مكان المستخدم

تستخدم HTML5 تقنية الموقع الجغرافي لتحديد مكان المستخدم وذلك من خلال واجهة التطبيقات البرمجية API .

كما أن هذه العملية تحمي خصوصية المستخدم  لذلك لن يتم تفعيل هذه الخدمة مالم يقم المستخدم بالموافقة على استخدامها .

---

المتصفحات الداعمة

 |  |  |  | 


تعتبر هذه الخاصية مدعومة من جميع المتصفحات الحديثة من Internet Explorer 9 و Firefox Chrome و Safari و Opera .
ملاحظة : تستخدم خاصية تحديد المكان الجغرافي بشكل أفضل على الهواتف الذكية التي تحتوي على GPS مثل هواتف أي فون .

---

استخدام تحديد الموقع الجغرافي

يمكن استخدام تحديد الموقع الجغرافي من خلال الدالّة getCurrentPosition() و ذلك لتحديد مكان المستخدم .
في المثال التالي سنشرح مثالاً بسيطاً يقجم خطوط الطول و العرض للمستخدم لمكان المستخدم :

<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>

شرح المثال السابق

•  يتم الفحص اذا كان المتصفح يدعم Geolocation .
• اذا كان يدعم هذه الخاصية عندها سيعمل getCurrentPosition() و اذا لم يكن يدعم عندها ستظهر رسالة للمستخدم .
•  اذا كانت الطريقة getCurrentPosition() ناجحة عندها سيتم تحديد الاحداثيات و ارسالها الى الدالّة المحددة في showPosition .
•  سيتقوم الدالّة showPosition() بتحديد و إظهار خطوط الطول و العرض للموقع .

يعتبر المثال السابق بسيط جداً و لايمكن حدوث أي أخطاء فيه .

---

التعامل مع الأخطاء و رفض الطلب

يقوم البارامتر الثاني في getCurrentPosition() بتحديد الأخطاء الموجودة في الكود كما أنها تقوم بتشغيل الدالّة في حال فشلت في الحصول على موقع المستخدم .
مثال

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="رفض المستخدم تحديد مموقعه"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="معلومات الموقع الجغرافي غير متوفرة"
break;
case error.TIMEOUT:
x.innerHTML="انتهى طلب الحصول على "
break;
case error.UNKNOWN_ERROR:
x.innerHTML="حدث خطأ غير معروف"
break;
}
}

أنواع كود الأخطاء

•  الطلب مرفوض : لم يقم المستخدم بالسماح بخاصية تحديد الموقع .
•  المكان غير متوفر : لا يمكن الحصول على الموقع الحالي .
• انتهاء الوقت : انتهاء وقت العملية .

عرض النتيجة على الخريطة

لعرض النتيجة على الخريطة تحتاج الى موافقة على خدمة الخريطة و التي تمكنك من استخدام أدوات خطوط الطول و العرض مثل خرائط جوجل :
مثال

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

استخدمنا في المثال السابق بيانات خطوط الطول و العرض و ذلك لإظهار الموقع على خريطة جوجل ( باستخدام صورة ثابتة ) .
تحديد معلومات معينة من الموقع الجغرافي
تشرح هذه الفقرة كيفية إظهار موقع المستخدم على الخريطة كما أن الموقع الجغرافي مفيد جداً لجلب معلومات معينة من الموقع .
أمثلة

• معلومات محلية حتى اللحظة .
• إظهار نقاط قريبة من اهتمامات المستخدم
• واحدة بواحدة كالقائمة (GPS) .

استخدام الدالّة getCurrentPosition() لجلب البيانات

تستخدم الطريقة getCurrentPosition() لجلب كائن اذا كانت العملية ناجحة . كما يتم استرجاع خطوط الطول و العرض كما يتم أيضاً استرجاع الخصائص التالية اذا كانت متوفرة :

الخاصية	الشرح
coords.latitude	إظهار خطوط العرض كرقم عشري
coords.longitude	إظهار خطوط الطول كرقم عشري
coords.accuracy	إظهار دقة الموقع
coords.altitude	قياس الارتفاع بالمتر على مستوى سطح البحر
coords.altitudeAccuracy	دقة ارتفاع الموقع الجغرافي
coords.heading	إظهار رأس الدرجات باتجاه عقارب الساعة من جهة الشمال
coords.speed	قياس السرعة بالمتر في الثانية
timestamp	استجابة حسب التاريخ أو الوقت

---

طرق أخرى مفيدة لتحديد الموقع الجغرافي

يمكن استخدام watchPosition() لاسترجاع الموقع الحالي للمستخدم و يستمر ليسترجع الموقع الجديد للمستخدم في حال انتقاله الى موقع آخر .

يمكن استخدام clearWatch() و ذلك لإيقاف عمل watchPosition() .

مثال

<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>

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه