طراحی سایت با جاوا اسکریپت
بررسی کامل کاربردهای زبان برنامه نویسی جاوا اسکریپت در طراحی سایت و چگونگی بکارگیری آن
طراحی سایت با جاوا اسکریپت چگونه انجام می شود؟ برای یافتن پاسخی کامل و مناسب به چنین پرسشی ابتدا بهتر است به توضیحات مختصری از جاوا اسکریپت که در دسته بهترین و گسترده ترین زبان های برنامه نویسی سایت قرار می گیرد و کاربردهای آن بپردازیم و سپس چگونگی بکارگیری آن در طراحی سایت را به طور جامع بیان کنیم.
پویاسازی صفحات سایت با جاوا اسکریپت
جاوا اسکریپت گسترده ترین زبان اسکریپت نویسی است و عده زیادی بر این باورند که این زبان برنامه نویسی ارتباطی با زبان برنامه نویسی جاوا دارد و یا حتی بدتر از آن تصور می کنند که جاوا اسکرییت بخشی از زبان برنامه نویسی جاواست در صورتی که جاوا اسکریپت هیچ ارتباطی با جاوا ندارد و هر یک زبان های برنامه نویسی مجزایی می باشند.
در حقیقت جاوا اسکریپت (Java Script) به توسعه دهندگان وب این امکان را می دهد تا سایت های تعاملی و به اصطلاح Interactive طراحی کنند و توسعه دهند. این زبان با عملکرد خود کنترل ها و رفتارای پیش فرض مرورگر را تقویت می کند و یک زبان برنامه نویسی سمت مشتری (Client side) است که با هدف پویا شدن و انعطاف بیشتر کد های Html توسعه یافته است. به وسیله Html ما می توانیم انواع صفحات وب را به همراه بخش هایی از جمله: تصاویر، متن ها ، جدولها و فرم ها طراحی کرد اما نمی توانیم با بکارگیری آن فرم های طراحی شده را کنترل کنیم( به طور مثال اطلاعات دریافت کنیم ) یا توانایی برنامه سازی و پاسخ به رویداد های برنامه و عملکرد کاربر توسط آن وجود ندارد. درنتیجه برای عملی کردن این مرحله از کار باید یک زبان برنامه نویسی را به منظور پویا سازی صفحه مان و ایجاد توانایی تعامل با کاربر بکار بگیریم که امروزه متداول ترین و بهترین زبان برنامه نویسی برای صفحات وب زبان اسکریپت نویسی جاوا اسکریپت می باشد.
مزایا و معایب جاوا اسکریپت در طراحی سایت
معایب
• عیب یابی کردن آن مشکل است
• کند بودن در زمان اجرا
• در مرورگرهای قدیمی قابل اجرا نمی باشد
• هیچ گونه امکانی برای مبادله با سرور سایت ندارد
• در صورت بروز خطا در برخی موارد بدون نمایش راهنمایی یا دادن پیامی از برنامه خارج می شود
مزایا
• افزودن بخش های پویا به یک سند Html با ساختار ساده
• انجام عملیاتی از جمله: تعامل با کاربر، یافتتن اطلاعا کاربری بازدیدکنندگان مانند IP آنها
• شبیه بودن و نزدیک بودن به دیگر زبان های برنامه نویسی نظیر C#
• فراهم کردن استفاده از قابلیت کتابخانه های آماده این زبان مثل jQuery
• سادگی در کدنویسی
کاربردهای جاوا اسکریپت در طراحی سایت
طراحی و ساخت جعبه های تایید
قطعا تا به حال فرم ههای زیادی را پر کرده اید و در انتهای آنها با دکمه هایی جعبه های تایید یا همان (confirmation box) مثل OK و Cancel مواجه شده اید که با کلیک بر روی هر یک از آنها با نتایج متفاوتی روبه رو شدید. در حقیقت به دلیل وجود جاوا اسکریپت است که توسط کدهای خود این قابلیت را ایجاد می کند تا با کلیک کاربر بر دکمه OK اینکار انجام شود و با کلیک کردن بر دکمه دیگر کار دیگری انجام شود.
ذخیره اطلاعات جدید
جاوا اسکریپت براساس عملکردی که کاربر از خود نشان می دهد این امکان را ایجاد می کند که اطلاعات جدیدی ذخیره شوند و یا اطلاعاتی از گذشته بازخوانی شوند.
Javascript، Html و Css در طراحی سایت
برای دادن یک دید کلی تر به شما عزیزان و شفاف سازی کاربرد هر یک از این فاکتور ها در طراحی یک صفحه وب توجه شما را به توضیحات زیر جلب می کنم:
Html : برای قالب بندی کلی صفحات وب بکار گرفته می شود.
Css : بکارگرفته می شود تا فرایند ارائه صفحات وب را آسان تر کند.
Javascript : یک زبان برنامه نویسی است که به منظور پویاسازی صفحات وب برای تعامل با کاربر بکار گرفته می شود.
طراحی وب سایت با Javascript و Css
حال نوبت پاسخ به این پرسش است که چگونه می توانیم با ستفاده از Javascript و Css صفحات وب را طراحی کنیم. به این منظور ابتدا باید ارتباطی بین اسناد JS و html خود برقرار کنیم و سپس کدهایی از Css را به صفحه خود اضافه کنیم.
قدم اول
یک سند html ایجاد می کنیم (index.html)و کدهای زیر را در آن پیاده سازی می کنیم:
<span style=”font-size: 20px;”><!DOCTYPE html>
<html>
<head>
<title>Welcome To My Web Page</title>
</head>
<body>
<h1>Hello</h1>
<h4 id=’date’></h4>
</body>
</html></span>
قدم دوم
پوشه ای به نام Javascript ایجاد می کنیم و سپس در آن سند index.js را ایجاد می کنیم و در آن کد زیر را وارد می کنیم :
<span style=”font-size: 20px;”>document.getElementById(‘date’).innerHTML = new Date().toDateString();</span>
قدم سوم
در تگ head سند index.html کد زیر را اضافه می کنیم:
<span style=”font-size: 16px;”><script async src=”./javascript/index.js”></script></span>
قدم چهارم
ما تا به این مرحله توانستیم Javascript را به وب سایت اضافه کنیم حال نوبت اضافه کردن کد های Css است که آن را به عهده خود شما می گذاریم.
امکانات Java script در طراحی سایت
• قابلیت نمایش انواع کادرهای اخطار، تایید و دریافت ورودی را به کاربر دارد
• توانایی ایجاد و خواندن Cookie را دارد
• می تواند نوع و نسخه مرورگری که کاربر در حال استفاده از آن است را تشخیص دهد و براساس آن تنظیمات و صفحات ویژه ای را بارگذاری کند
• به رویدادهای مختلف صفحه مثل کلیک کردن یا مثلا لود شدن صفحه می تواند واکنش نشان دهد
• یک ابزار برنامه نویسی ساده و کارا برای بنامه نویسان وب است
جاوا و جاوا اسکریپت
زبان های برنامه نویسی Java و Java script دارای ساختار دستوری مشابه ای هستند اما دو زبان برنامه نویسی کاملا مجزا و جدا از هم به شمار می آیند. جاوا اسکریپت یک زبان اسکریپت نویسی است در حالی که جاوا یک زبان برنامه نویسی شی گرا و بسیار قدرتمند می باشد. از جاوا اسکریپت برای برنامه نویسی بر در مرورگرهای وب استفاده می شود که از ویژگی های مثبت آن این است که تقریبا همه مرورگرهای معروف از آن پشتیبانی می کنند و در مرورگر 90 درصد کاربران اینترنت فعال است. از جاوا برای برنامه نویسی بر روی پلتفرم های مختلف استفاده می شود.
کلام آخر
Javascript یک زبان برنامه نویسی بسیار قدرتمند است که امروزه به دلیل قابلیت های بی شمار و ویژگی هایش استفاده گسترده ای در زمینه طراحی وب سایت دارد و توسعه دهندگان وب با بکارگیری آن به طراحی صفحات وب می پردازند.