زبان برنامه نویسی جاوا اسکریپت

 

JavaScript که به اختصار JS نیز نامیده می‌شود، یکی از محبوبترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می‌توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. بنابراین می‌توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.

 

علیرغم اشتباه عمومی، زبان جاوااسکریپت با زبان جاوا ارتباطی ندارد، دلیل این نام‌گذاری محبوبیت زبان جاوا در هنگام تولد جاوااسکریپت بود و ساختار این زبان به ++C و C# شباهت دارد و یادگیری آن را آسان می کند. از همین رو دستورهای متداول مانند if، for، try..catch، while و … در این زبان هم یافت می‌گردند. این زبان می‌تواند هم به صورت ساخت یافته و هم به صورت شی گرا مورد استفاده قرار گیرد.

جاوا اسکریپت اولین بار در سال ۱۹۹۵ توسط Netscape Communications Corporation معرفی شد و اکنون بخشی ضروری از فرآیند توسعه وب است. جاوا اسکریپت یک زبان برنامه نویسی فرانت اند و کلاینت به این معنی که به جای سرور کد در مرورگر کاربر اجرا می شود. از نمونه کاربردهای جاوا اسکریپت می توان اعتبار سنجی فرم ها، اسلایدر ها، پاپ آپ ها و یا انیمیشن ها را مثال زد که بدون رفرش صفحه تغییر می کنند این ویژگی به ایجاد تجربه کاربری و داشتن صفحات سریع تر و کارآمدتر کمک می کند.

ویژگی های جاوا اسکریپت

 

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

• شی گرا(OOP): این زبان ها از مفهوم کلاس (Class) و شی (Object) استفاده می کنند و فرایند کد نویسی را آسان تر می کنند. در جاوا اسکریپت، همه چیز یک شی است از انواع اولیه مانند اعداد و رشته ها گرفته تا اشیاء پیچیده تر مانند آرایه ها و توابع. این ویژگی این زبان را متمایز از زبان های دیگر موجود کرده است.
• زبان کلاینت ساید(Client-Side) و سرور ساید(Server Side) : این زبان قبلا فقط سمت کاربر اجرا می شد و در حال حاضر سمت سرور نیز می باشد.
• مفسری(interpreter): زبان های مفسری به نوع سیستم عامل بستگی ندارند و خط به خط بررسی می شوند.

 

 مزایای جاوا اسکریپت

بر اساس نظرسنجی توسعه دهندگان Stack Overflow جاوا اسکریپت در حال حاضر به عنوان محبوب ترین زبان مورد استفاده در جهان است و پس از پایتون، HTML/CSS ،SQL و جاوا استفاده زیادی دارد. داشتن فریم ورک های متنوع و بازار کار گستردهاز ویژگی های متمایز این زبان برنامه نویسی است و دارای مزایای زیر است:

 

• یادگیری آسان

در مقایسه با سایر زبان های برنامه نویسی، یادگیری و درک جاوا اسکریپت نسبتاً آسان است. با داشتن دانش قوی در HTML و CSS و منابع گسترده آموزشی هر کسی می تواند کد نویسی در جاوا اسکریپت را یاد بگیرد.

 

• محبوبیت

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

 

• تطبیق پذیری

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

 

• ساخت انواع برنامه

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

 

• فریم ورک و کتابخانه ها

جاوا اسکریپت دارای تعداد زیادی فریمورک و کتابخانه های مختلفی است که به توسعه دهندگان اجازه می دهد تا برنامه ها را سریعتر بسازند. برخی از فریمورک های محبوب عبارتند از Angular.js ،React ،Vue.js Aurelia ،Nuxt.js ،Gatsby و …

 

 

• بازار کار خوب

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

 

معایب جاوا اسکریپت

همان طور که هیچ کدام از زبان ها کامل نیستند JS هم دارای اشکالاتی است که می توان به موارد زیر اشاره کرد:

 

• آسیب پذیری های امنیتی

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

 

• ناسازگاری با برخی از مرورگرها

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

 

• اشکال زدایی

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

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

 

 

جاوا اسکریپت یا پایتون

 

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

 

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

طراحی و توسعه وب

جاوا اسکریپت یک زبان برنامه نویسی است که برای توسعه صفحات وب استفاده می شود. JS که در Netscape توسعه یافته است به توسعه دهندگان اجازه می دهد تا یک صفحه وب پویا و تعاملی برای تعامل با بازدیدکنندگان و اجرای اقدامات پیچیده ایجاد کنند. همچنین به کاربران امکان می‌دهد بدون بارگیری مجدد کل صفحه، محتوا را در یک سند بارگذاری کنند. اکثر وب سایت ها از جاوا اسکریپت برای اعتبارسنجی و پشتیبانی از برنامه های خارجی، از جمله اسناد PDF، ویجت ها، برنامه های فلش استفاده می کنند. برخی از بزرگترین شرکت های فناوری جهان از جاوا اسکریپت برای بهبود تجربه کاربری استفاده می کنند.

 

ساخت وب اپلیکیشن

فریمورک های مختلف جاوا اسکریپت برای توسعه و ساخت برنامه های کاربردی وب قوی استفاده می شود. در برنامه‌ای مانند Google Maps، اگر کاربران بخواهند نقشه‌ای را کاوش کنند، تنها کاری که باید انجام دهند این است که ماوس را کلیک کرده و بکشید تا نمای دقیقی داشته باشند. این توسط جاوا اسکریپت پشتیبانی می شود که بدون ارتباط با سرورها با مرورگر تعامل می کند. فریم ورک های محبوب JavaScript front-end که به ساخت برنامه های وب کمک می کنند عبارتند از React Native، React، Angular و Vue. نتفلیکس و پی پال با چارچوب جاوا اسکریپت AngularJS و رابط های برنامه نویسی برنامه (API) توسعه داده شدند.

 

برنامه های سمت سرور

جاوا اسکریپت همچنین برای نوشتن نرم افزار سمت سرور از طریق محیط اجرای متن باز Node.js استفاده می شود. توسعه دهندگان می توانند برای برنامه های شبکه سریع و شناسایی کد بنویسند، تست و اشکال زدایی کنند. جاوا اسکریپت به تولید محتوا و مدیریت درخواست های HTTP کمک می کند. شرکت های برتر مانند Walmart، PayPal، Uber، GoDaddy و بسیاری دیگر از Node.js برای زیرساخت سرور استفاده کرده اند.

 

توسعه وب سرور

Node.js به توسعه دهندگان اجازه می دهد تا از جاوا اسکریپت برای ایجاد وب سرور استفاده کنند. Node.js که رویداد محور است، بدون منتظر ماندن برای پاسخ تماس قبلی به تماس بعدی می رود. سرورها به سرعت تکه های داده را بدون بافر انتقال می دهند. ماژول HTTP از متد createServer () برای ایجاد سرور استفاده می کند.

 

بازی سازی

ایجاد بازی در وب یکی دیگر از موارد مهم در بین برنامه های جاوا اسکریپت است. ترکیب جاوا اسکریپت و HTML5 نقش مهمی در توسعه بازی با استفاده از JS ایفا می کند. کتابخانه EaselJS گرافیک غنی برای بازی ها ارائه می دهد. HTML5 دسترسی کامل به وب را بدون افزونه های اضافی مانند Flash فراهم می کند. بازی های پیچیده مرورگر Tower Building، CrossCode، بازی HexGL مبتنی بر جاوا اسکریپت و HTML5 هستند.

 

برنامه های موبایل 

یکی از قدرتمندترین برنامه‌های جاوا اسکریپت، ایجاد برنامه‌ها برای زمینه‌های غیر وب، به معنای چیزها، نه در اینترنت است. با استفاده از دستگاه های تلفن همراه در بالاترین حد خود، چارچوب های جاوا اسکریپت برای تسهیل توسعه برنامه های تلفن همراه در پلتفرم های مختلف مانند IOS، Android و Windows طراحی شده است. چارچوب React Native امکان ساخت اپلیکیشن موبایلی چند پلتفرمی را فراهم می‌کند، جایی که توسعه‌دهندگان می‌توانند از یک صفحه جلویی جهانی برای پلتفرم‌های Android و IOS استفاده کنند.

 

تفاوت جاوا و جاوا اسکریپت

 

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

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

جاوا و جاوا اسکریپت، برای انواع مختلف پروژه ها استفاده می شوند. جاوا برای ساخت برنامه های کاربردی در دستگاه ها یا مرورگرها استفاده شده در حالی که جاوا اسکریپت عمدتاً در اسناد HTML و مرورگرها استفاده می شود. برای استفاده از جاوا و جاوا اسکریپت از پلاگین های مختلفی استفاده می شود.

 

بهترین فریم ورک های جاوا اسکریپت

کتابخانه Node.js

Node.js دقیقاً یک چارچوب جاوا اسکریپت نیست. این یک محیط اجرا است. در حالی که جاوا اسکریپت را می توان مستقیماً در مرورگر وب نوشت اما  این فرایند همیشه مطلوب نیست. به همین دلیل است که Node.js ظرفیت ابزارهای خط فرمان و اسکریپت سمت سرور را می دهد.

اگرچه جاوا اسکریپت معمولاً در سمت کلاینت یا فرانت اند کار می کند، برنامه نویسی سمت سرور زمان بارگذاری سریع تری را ایجاد می کند زیرا به فناوری مرورگر نیاز نیست. این می تواند ناامیدی کاربران را کاهش دهد و سئو را بهینه تر کند.

 

کتابخانه Vue.js

Vue.js خود را چارچوب جاوا اسکریپت “پیشرو” می نامد. این نام از فلسفه پذیرش تدریجی آن ناشی شده است. در Vue.js، کتابخانه هسته فقط بر روی لایه view متمرکز است، بنابراین هر عملکرد اضافی باید به صورت افزایشی اتخاذ شود.

چارچوب از یک الگوی معماری مدل-نما-نما (MVVM) استفاده می کند. این الگو رابط کاربری گرافیکی (UI) را از منطق تجاری برنامه یا مدل جدا می کند. لایه viewmodel یک رسانه مبدل است که داده ها را همگام می کند.

 

AngularJS

AngularJS توسط گوگل نگهداری می شود و به مشکلات رایج در ساخت برنامه های تک صفحه ای (SPA) می پردازد. این چارچوب با استفاده از واژگان HTML در صفحات وب پویا کار می کند. در گذشته، HTML فقط برای محتوای ثابت قابل استفاده بود.

SPA ها با بارگذاری پویا محتوا از وب سرور به جای مرورگر وب کار می کنند. در نتیجه، SPA ها به روشی مشابه برنامه های موبایل عمل می کنند و نیازی به بارگذاری مجدد ندارند.

 

Ember.js

Ember.js یک چارچوب جاوا اسکریپت است که از الگوی سرویس کامپوننت استفاده می کند. برخلاف معماری سنتی مدل-نما-کنترلر (MVC)، اجزای موجود در Ember.js در چارچوب مرکزی هستند. تقریباً همه چیز در Ember.js را می توان به عنوان یک سرویس یا مولفه طبقه بندی کرد.

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

 

React 

یک فریم ورک جاوا اسکریپت است که توسط فیس بوک توسعه یافته است که فرآیند ساخت رابط های کاربری تعاملی را ساده می کند. این پایه React Native است، یک چارچوب مجاور برای ساخت برنامه های کاربردی تلفن همراه.

هر دو فریم ورک دارای یک جریان داده یک طرفه هستند که نسبت به اتصال داده های دو طرفه بصری تر در نظر گرفته می شود. Hot Reload یکی دیگر از ویژگی‌های محبوب فریمورک‌ React است که به توسعه‌دهندگان اجازه می‌دهد بلافاصله تغییرات را هنگام اعمال مشاهده کنند.

 

انواع داده ها در جاوا اسکریپت

 

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

 

• داده‌های عددی: داده‌هایی که می‌توان روی آن‌ها عملیات ریاضی و حسابی انجام داد؛ مانند اعداد طبیعی، حسابی، اعشاری و غیره
• داده‌های رشته‌ای: رشته، کاراکتر یا دنباله‌ای از کاراکترهای حروف الفبا است که در جاوا اسکریپت بین گیومه تکی (‘….’)، دوتایی (“….”) و بک‌تیک (‘) یافت می‌شوند. تفاوتی بین رشته‌های گیومه تکی و دوتایی وجود ندارد اما رشته‌های بین بک‌تیک دارای ویژگی‌های بیشتری هستند.
  1. درون‌یابی متغیرها در رشته‌ها، مانند: My name is ${name}.  که name  در اینجا متغیری است که به رشته تزریق می‌شود.
  2. رشته‌های چند خطی با نقل‌قول‌های معمولی: در این گونه رشته‌ها باید کاراکترهای فرار مانند n را به یک خط جدید اضافه کرد و بک‌تیک‌ها به کاربر اجازه می‌دهند که رشته خود را در خط دیگری ادامه دهند، برای این مورد مثالی در ادامه آمده است:
• مقادیر بولی: این مقادیر فقط می‌توانند مقدار True یا False داشته باشند.
  • • آرایه‌ها: آرایه‌ها در جاوا اسکریپت گروهی از داده‌ها هستند که از هر نوع داده‌ای می‌توانند باشند. عناصر آرایه با کاما از همدیگر جدا می‌شوند. اندیس آرایه در جاوا اسکریپت از صفر شروع می‌شود. برای مثال [۱, ۲, “hello”, false] یک آرایه است. دسترسی به عناصر آرایه با استفاده از اندیس انجام می‌شود؛ مثلاً در این آرایه، عبارت array[۰]، مقدار ۱ را بازمی‌گردد.
    • «شی» (Object): شی در جاوا اسکریپت، گروهی از داده‌ها است که به صورت «کلید-مقدار» (key:value) ذخیره می‌شود. در این نوع داده، کلید باید از نوع رشته و مقدار آن هر نوع داده‌ای، حتی یک شی دیگر، هم می‌تواند باشد . دسترسی به محتوای شی با استفاده از کلید انجام می‌شود. برای مثال، {name: ‘javascript’, age: 5} یک شی است که با age or obj[“age”] مقدار ۵ بازمی‌گردد.

 

دلیل محبوبیت جاوا اسکریپت

 

جاوا اسکریپت تقریباً سه دهه است که حیات دارد و ماهیت همه‌کاره آن و توانایی ارائه خدمات توسعه در بخش بک‌اند و فرانت‌اند، آن را به عنصری اصلی و اساسی در جعبه ابزار اکثر توسعه‌دهندگان و برنامه‌نویسان تبدیل کرده است. اینکه دلیل محبوبیت زیاد جاوا اسکریپت چیست را می‌توان در ابعاد مختلفی بررسی کرد، مثلا:

• جاوا اسکریپت یکی از محدود زبان‌های برنامه نویسی است که در همه مرورگرهای محبوب قابلیت ‌استفاده را دارد.
• از جاوا اسکریپت می‌توان برای ساخت اپلیکیشن موبایل و همچنین وب و دسکتاپ استفاده کرد.
• از آنجایی که جاوا اسکریپت بسیار محبوب است، چارچوب‌ها و کتابخانه‌های آماده زیادی برای آن وجود دارد که می‌توان به وسیله آن‌ها پروژه‌های مختلفی را انجام داد؛ این باعث می‌شود که در هزینه، زمان و تلاش تیم‌های توسعه صرفه‌جویی شود.

 

نقاط ضعف javascript

• سختی در تشخیص خطا و دیباگ
• اجرا نشدن در مرورگرهای قدیمی
• امنیت کم در برابر اکسپلویت ها
• و …

 

jQuery چیست؟

jQuery یک کتابخانه سبک وزن برای جاوا اسکریپت است. این یعنی با حجم کد کمتر نسبت به جاوا اسکریپت، بیشترین کار را انجام می‌دهد. شاید کارهایی که در جاوا اسکریپت نیاز به چندین خط کدنویسی دارد، در جی کوئری تنها در یک خط انجام شود!

پیش نیاز ها

برای اینکه بتوانید وارد دنیای jQuery شوید لازم است که حدافل دانش و آشنایی مقدماتی در زمینه های زیر داشته باشید :

• HTML
• CSS
• JavaScript

 

کتابخانه جی کوئری ویژگی‌های زیر را با خود به همراه دارد:

• دستکاری و ایجاد تغییرات در DOM
• دستکاری و ایجاد تغییرات در CSS
• متد‌های رویداد (Event) برای HTML
• ایجاد افکت‌های مختلف و انیمیشن
• AJAX
• و ابزارهای دیگر…

نکته بسیار مهم: تقریبا برای هرکاری، پلاگین‌هایی برای جی کوئری وجود دارد که می‌توانید از آنها استفاده کنید.

چرا جی کوئری؟

حالا که پاسخ سوال jQuery چیست را دریافتید احتمالا می‌پرسید چرا باید از آن استفاده کنیم؟ تعداد زیادی کتابخانه یا فریم ورک برای زبان جاوا اسکریپت وجود دارد، اما به نظر می‌رسد jQuery محبوب‌ترین و گسترده‌ترین کتابخانه این زبان باشد.

 

تاریخچه جی کوئری Jquery 

برای اولین بار در سال ۲۰۰۶ بود که فردی به نام John Resig صحبت از جی کوئری به میان آورد و اقدام به انتشار این نرم افزار نمود. در حال حاضر این کتابخانه توسط یک تیم توسعه دهنده تحت هدایت Timmy Wilison نگهداری می‌شود. در همان سال‌های اولیه انتشار، Jquery تحت دو لیسانس GPL و MIT فعالیت می‌کرد. اما در سال ۲۰۱۲ بود که مجوز GPL از کارنامه این نرم افزار حذف شد و هم اکنون تنها تحت مجوز MIT به فعالیت خود ادامه می‌دهد.

 

کاربردهای جی کوئری Jquery

مهم‌ترین کاربرد کتابخانه Jquery سهولت استفاده از جاوا اسکریپت می‌باشد. درواقع این کتابخانه دارای دستورات بسیار ساده و قابل درک است که در زمینه به کارگیری تکنولوژی ای جکس بسیار موثر واقع می‌شود. کاربرد این نرم افزار به قدری وسیع است که می‌توانید یک سایت را با کمک Jquery به صورت فول ای جکس طراحی نمایید.

از دیگر کاربردهای بی‌نظیر این کتابخانه، می‌توان به موارد زیر اشاره کرد:

• تغییر شکل ظاهر یک صفحه
• امکان دسترسی به عناصر موجود در یک صفحه
• پاسخ به تعامل کاربر
• اصلاح محتوای موجود در یک سند
• سهولت در امور معمول جاوا اسکریپت
• بازیابی دیتا از سرور بدون نیاز به رفرش

ویژگی‌های جی کوئری Jquery 

 

• قابلیت دستکاری و تغییر کدهای CSS
• متحرک سازی و افکت گذاری بر روی عناصر وبسایت
• کار با AJAX
• دستیابی به عناصر موجود در پرونده
• ایجاد تغییر و دستکاری عناصر پرونده
• امکان توسعه پلاگین‌ها
• کنترل آسان و قدرتمند رویدادها

 

معایب جی‌کوئری 

 

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

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

 

قابلیت های مهم Jquery 

 

• سلکشن DOM :

Jquery با فراهم آوردن سلکتورها یا انتخاب کننده ها، امکان بازیابی المنت های DOM را به وجود آورده است که مبتنی بر شاخص های مختلفی مانند اسم، آی دی، اسم کلاس CSS، اسم attribute، ارزش،  nth child در کدهای سلسله مراتبی و مواردی از این دست هستند.

 

• به کاربری DOM :

شما با استفاده از قابلیت های موجود در Jquery می توانید DOM های مختلفی را به کار گرفته و استفاده نمایید. برای مثال حذف و اضافه کردن المنت ها، اصلاح کردن محتوای html، کلاس CSS و …

 

• افکت های مخصوص :

با استفاده از قابلیت های موجود در Jquery می توانید، افکت های مختلف و به خصوصی را بر روی المنت های DOM اعمال نمایید. مثلا نمایش یا عدم نمایش المنت ها، ایجاد حالت های Fade in یا Fade out، افکت نمایش اسلایدی، ایجاد انیمت های مختلف و …

 

• رویدادها :

کتابخانه Jquery، قابلیت هایی دارد که معادل رویدادهای DOM هستند. قابلیت هایی مانند کلیک، دابل کلیک mouseenter، mouseleave، blur، keyup، keydown و مواردی از این دست. وجود این قابلیت ها مشکلات ناشی از Cross-Browser را به صورت اتوماتیک رفع می کند.

 

• Ajax:

Jquery همچنین فضای مناسب و آسانی را برای استفاده از Ajax جهت خواندن اطلاعات از سرورها بدون نیاز به لود کردن کل صفحات پدید آورده است.

 

• پشتیبانی Cross-Browser:

کتابخانه jquery به صورت اتوماتیک وار مشکلات cross-browser را رفع می کند. این امکان خود به تنهایی تا حدود زیادی از نگرانی های کاربر را کاهش می دهد. Jquery از IE 6.0 به بالا، FF 2.0 به بالا، Safari 3.0 به بالا، Chrome و Opera 9 به بالا پشتیبانی می کند.

 

آشنایی با سینتکس یا نحوه نگارش jQuery

در ساده ترین حالت Syntax جی کوئری به شکل زیر است :

 

• علامت $ جی کوئری را تعریف کرده و مورد دسترسی قرار میدهد
• selector نشان دهنده ی عنصر html ای است که مایلیم مورد دسترسی قرار دهیم
• action نشان دهنده ی عملی است که مایلیم جی کوئری انجام دهد.

 

به مثال های زیر توجه کنید :

استفاده از واقعه Document Ready

 

منظور از واقعه همان event است. احتمالا دقت کرده اید که تمام کد های جی کوئری در میان کد زیر قرار میگیرند :

بلاک کد بالا در واقع یک event است. قرار دادن کد جی کوئری در event بالا باعث میشود که دستورات جی کوئری به هیچ عنوان پیش از اتمام بارگذاری صفحه اجرا نشوند. اگر برایتان یک علامت سوال ایجاد شده که چه دلیلی دارد برای اجرای کد جی کوئری تا اتمام لود صفحه منتظر بمانیم در اینجا میتوان به دو مثال ساده اشاره کرد که در صورت عدم منتظر ماندن تا بارگذاری کامل صفحه برای اجرای جی کوئری پیش خواهد آمد :

• سعی در مخفی کردن عنصری که هنوز ایجاد نشده
• سعی در دریافت ابعاد تصویری که هنوز بارگذاری نشده

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

البته برای استفاده از واقعه document ready از حالت کوتاه تر زیر نیز میتوانید استفاده کنید :

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

 

AJAX چیست؟

 

AJAX مخفف چیست؟ عبارت AJAX مخفف کلمات Asynchronous JavaScript and XML می باشد و تکنیکی جهت ساخت صفحات پویا و سریع است که می تواند بدون لود شدن کل صفحه، بخشی از آن را به آپدیت و آن را به سرور اختصاصی که سایت بر روی آن قرار دارد ارسال کند. در صورتیکه در صفحات وب کلاسیک با تغییر بخشی از صفحه، کل آن بایستی لود شود.

 

تکنولوژی ایجکس می تواند کاری کند که هنگام تغییر یک صفحه به جای لود شدن کل آن  فقط بخش تغییر داده شده لود شود. در این محیط برنامه‌نویسی، مجموعه ای از فناوریها وجود دارند که مجموعا تحت عنوان ایجکس شناخته می شوند. به عبارت دیگر AJAX مفهومی مشابه با برنامه نویسی کلاینت-سرور است. با برنامه نویسی کلاینت-سرور، میزان انتقال داده ها بر روی یک نرم افزار کاربردی ترمینال به حداقل ممکن می رسد، زیرا تنها داده های ضروری مابین کلاینت و سرور جابجا خواهند شد. با Ajax نیز تنها داده های ضروری مابین کلاینت و سرور وب جابجا می شوند. این وضعیت استفاده از شبکه و پردازش بر روی کلاینت را به حداقل می رساند.

 

مزایای Ajax

 

 

• بارگیری مجدد صفحه بسیار سریع انجام می‌شود و دیگر نیازی به‌صرف زمان‌های طولانی برای مشاهده اطلاعات جدید نخواهید داشت.
• کاربر می‌تواند هر چه سریع‌تر به اطلاعات موردنیاز خود دست پیدا کند و در نهایت کارها با سرعت بیشتری انجام می‌شوند.
• نیازی به بارگذاری مجدد اطلاعات هر صفحه نخواهد بود و از این رو می‌توان گفت که با کاهش بار سرور روبه‌رو خواهید شد.
• همچنین دانلود نشدن اطلاعات صفحه بر روی سیستم به‌طور مجدد و کاهش بار سرور، در نهایت باعث ذخیره شدن پهنای باند می‌شود.
• به‌طور کلی استفاده از ایجکس برای کاربرانی که نیاز به پاسخگویی سریع دارند، بسیار کاربردی خواهد بود.

 

معایب AJAX

 

• مهم‌ترین و بزرگ‌ترین عیبی که به این تکنولوژی وارد می‌شود، سئو پذیر نبودن آن است و همان‌طور که می‌دانید این مورد می‌تواند، به سایت آسیب‌های بسیار زیادی وارد کند.
• و این تکنولوژی از جاوا اسکریپ استفاده می‌کند و در نهایت موجب افزایش حجم صفحات وب می‌شود.
• موتور جستجو به صفحاتی که با Ajax فراخوانی شده‌اند، دسترسی نخواهد داشت.
• به‌طور کلی باید بگوییم که استفاده از این تکنولوژی، سرعت لود شدن سایت را کاهش می‌دهد.
• امکان بوک مارک کردن صفحه‌‌ای که توسط ایجکس لود شده باشد، وجود ندارد و اشتراک گذاشتن لینک محتوای آن صفحه نیز امکان‌پذیر نخواهد بود.
• دقت داشته باشید که امکان پشتیبانی از این فناوری تنها توسط مرورگرهای مدرن امکان‌پذیر است و اگر کاربری جاوا اسکریپ را غیرفعال کرده باشد، استفاده از این فناوری امکان نداشته و در نهایت به نظرتان سایتی ناکارآمد و ناقص خواهید داشت.

AJAX (ایجکس) چه می‌کند؟ 

طراح سایت با استفاده از زبان‌های برنامه‌نویسی و تکنولوژی‌هایی که نام برده شد، می‌شود گفت که ایجکس را در کدهایی که می‌نویسد پیاده می‌کند.

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

 

اما با AJAX، وقتی کاربر دکمه‌ی submit را فشار می‌دهد،‌  این JavaScript است که درخواست را به سرور منتقل می‌کند و پاسخ را می‌گیرد و همان صفحه را آپدیت می‌کند. پس کاربر اساساً متوجه چیزی نمی‌شود.

درواقع، ایجکس مرحله‌ی تبادل داده میان فرانت و بک را از مرحله‌ی نمایش داده در فرانت جدا می‌کند. درنتیجه، صفحه‌ی وب می‌تواند محتوایی  را تغییر دهد بدون نیاز به دوباره لود‌شدن تمام صفحه و محتواهای آن.

 

 

AJAX از  تکنولو‌ژی‌ها زیر برای اهداف مشخص‌شده بهره می‌گیرد:

• XMLHttpRequest object: برای تبادل نا‌هم‌زمان داده‌ها با سرور،

• JavaScript/DOM: برای نمایش‌دادن داده‌ها،

• CSS: برای زیبایی‌ بصری دادن به نمایش داده‌ها،

• XML: فرمتِ انتقال داده‌ها.

 

نمونه‌هایی از کاربردهای AJAX 

 

برای مثال، صفحه‌‌ای از وب‌سایتی را تصور کنید که در آن کاربرهای آن وب‌سایت می‌توانند کامنت بگذارند. فکر کنید تا به‌حال ۲۰۰ کامنت گذاشته شده‌. طبیعتاً، امکان نمایش‌دادن همه‌ی آن کامنت‌ها در صفحه وجود ندارد.

اگر کسی بخواهد کامنت‌های قبلی را ببیند، چه اتفاقی می‌افتد؟ کامنت‌های قبلی باید لود (Load) شود. یعنی کاربر بنشیند پای مانیتور و چشم بدوزد به صفحه تا کامنت‌های قبلی لود شوند.

اما اگر در طراحی آن وب‌سایت و برای بخش کامنت‌ها از ایجکس استفاده شده باشد، دیگر نیازی به لوشدنِ کامنت‌های قبلی نیست. همین‌که روی گزینه‌ی «کامنت‌های بیشتر» کلیک شود، کامنت‌های بیشتر نمایش داده می‌شوند.

وب اپلیکیشن‌های معروفی مانند Gmail، Google Maps, Youtube & Facebook که ما هرروز به آن‌ها سَر می‌زنیم، از تکنیک ایجکس  استفاده می‌کنند.

در Gmail، نیازی نیست برای دیدن ایمیل‌های جدید صفحه را رفرش کنید.

در Google Maps، وقتی نقشه را به جهت‌های مختلف می‌کشید؛ خبری از رفرش‌شدن کل صفحه نیست. انگار تمام نقشه حاضر‌وآماده است.

نمونه‌ی بسیار معروف دیگری از به‌کارگیری ایجکس،  Auto-complete  در Google Suggest است. همان چیزی که هروقت بخواهید کلمه‌ای را در گوگل سرچ کنید می‌بینید.

 

 

منظور از ناهمزمانی در تکنولوژی ajax 

ایجکس امکان انجام فراخوانیهای ناهمزمان (Asynchronous) ازیک سرور وب را بوجود می آورد. این وضعیت به مرورگر کلاینت امکان می دهد تا از انتظار برای رسیدن تمام داده ها، پیش از آنکه کاربر بتواند کار دیگری را انجام دهد، اجتناب نماید.

بخاطر عدم انجام یک Postback کامل و همچنین عدم ارسال تمام داده های فرم به سرور ،استفاده از شبکه به حداقل رسیده و عملیات بطور سریعتری انجام می شوند. درسایتها و محلهایی با مسیرهای محدود شده برای انتقال داده ها، این ویژگی می تواند عملکرد شبکه را بطور چشمگیری بهبود بخشد.

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

 

منظور از پردازش محدود بر روی سرور با ajax 

 

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

 

 

ما در آکادمی آنلاین قاسمی این امکان را فراهم نموده ایم تا با سبکی کاملا متفاوت و اصولی شما را از آغاز تا پایان دوره طراحی سایت-JavaScript-Ajax-JQuery همراهی کنیم و موفقیت شما را در این درس شاهد باشیم.