قابلیت های پیشرفته Html 5

اچ تی ام ال

قابلیت های پیشرفته Html 5

drag & drop عناصر در صفحات وب :

یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .

برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .

این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .

کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style=" width:200px; height:150px; border:2px solid #000 " >
</div>
<img id="drag1" src="../images/html5.gif" draggable="true" ondragstart="drag(event)" width="200px" height="150">
</body>
</html>
پیش نمایش

ذخیره سازی اطلاعات کاربران در صفحات وب ( Web Storage & Cookie )

یکی از فابلیت ها و ویژگی های جدید که به HTML 5 ، اضافه شده است ، امکان ذخیره و بازیابی اطلاعات کاربران در صفحات وب توسط خاصیت web storage است .

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

با این امور آشنا هستید . تکرار آنها برای تشریح بیشتر مسئله است . این کارها در HTML 4 و یا در PHP توسط کوکی ها cookies انجام می شوند . اما در HTML 5 به جای کوکی ها ، قابلیت درون ساخته ایی اضافه شده است ، که کار آنها را انجام می دهد .

مسلما با مفهوم کوکی آشنا هستید ، اما برای یادآوری به توضیح مجدد cookie و کار آن می پردازیم .

کوکی چیست ؟

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

web storage چیست ؟

توسط web storage در HTML 5 ، اطلاعات کاربران می تواند به صورت محلی در مرورگر و کامپیوتر کاربر ذخیره شود .

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

پشتیانی مرورگرهای مختلف از خاصیت web storage

این خاصیت در تمام نسخه های جدید مرورگرهای مطرح پشتیانی می شود . به وسیله کد زیر نیز می توان پشتیانی یا عدم پشتیانی مرورگر مورد نظر خود از این خاصیت را بررسی کرد :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
document.write("Yes! localStorage and sessionStorage support!");
}
else {
document.write("Sorry! No web storage support..");
}
</script>
</head>
<body>
</body>
</html>
پیش نمایش

انواع حالت ها و اشیای شی web storage :

دو نوع شی و حالت برای نگهداری و دخیره اطلاعات کاربر توسط شی web storage وجود دارد . در لیست زیر به معرفی این دو حالت پرداخته ایم . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک نمایید :

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

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