آموزش طراحی سایت-آموزش متد ریاضی در جاوا اسکریپت

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

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

نمونه 1 :

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

شی Math خود دارای سازنده (constructor) نیست. لازم نیست هیچ متدی ابتدا یک شی math ایجاد کند.

توابع ()Math.min و ()Math.max

متدهای ()Math.min و ()Math.max را می توان برای بدست آوردن مقدار بیشینه (بزرگترین عددی که به عنوان پارامتر ارسال شده) و کمینه (کوچکترین عددی که به عنوان پارامتر ارسال شده) از میان مجموعه ای از آرگومان ها بکار برد.

نمونه 2 :

 function myFunction() {
document.getElementById("demo") =
 Math.min(0, 150, -2230, 20, -8, -200);
 }

نمونه 3 :

function myFunction() {
   document.getElementById("demo") =
Math.max(0, 150, 30, 20, -8, -200);
}

تابع ()Math.random

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی (output) برمی گرداند.

نمونه 4 :

Math.random();              // returns a random number‎

تابع ()math.random همیشه عددی کوچکتر از 1 بر می گرداند.

تابع ()Math.round

یک عدد را به نزدیکترین عدد صحیح (integer) گرد می کند(به عنوان مثال عدد x را گرد کرده و به نزدیکترین عدد صحیح به آن تبدیل می کند).

نمونه 5 :

function myFunction() {

    document.getElementById("demo") = Math.round(4.4);

    document.getElementById("demo1") = Math.round(4.7);

}

تابع ()Math.ceil

در آموزش طراحی سایت می آموزید که این متد یک عدد را به بالا گرد کرده و نزدیکترین عدد صحیح (integer) به آن را برمی گرداند.

نمونه 6 :

function myFunction() {
  document.getElementById("demo") = Math.round(4.4);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

تابع ()Math.floor

یک عدد را به پایین گرده کرده و نزدیکترین عدد صحیح به آن را برمی گرداند.

نمونه 7 :

function myFunction() {
document.getElementById("demo") = Math.floor(4.7);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

function myFunction() {
    document.getElementById("demo") =
    Math.floor(Math.random() * 11);
}

ثابت های ریاضی

جاوا اسکریپت در کل 8 ثابت ریاضی دارد که با استفاده شی math می توان به آن ها دسترسی پیدا کرد.

function myFunction() {
    document.getElementById("demo") =
    Math.E + "
" +
    Math.PI + "
" +
    Math.SQRT2 + "
" +
    Math.SQRT1_2 + "
" +
    Math.LN2 + "
" +
    Math.LN10 + "
" +
    Math.LOG2E + "
" +
    Math.LOG10E + "
"
}

آموزش طراحی سایت : توابع شی math را می توان بصورت زیر فهرست کرد.

1. abs(x) =

قدر مطلق عدد x را برمی گرداند.

2. acos(x) =

آرک کوسینوس عدد x را بر حسب رادیان برمی گرداند.

3. asin(x) =

آرک سینوس عدد x را بر حسب رادیان برمی گرداند.

4. atan(x) =

آرک تانژانت عدد x را به صورت مقدار عددی بین رادیان های clip_image002 - و clip_image002[1] برمی گرداند.

5. atan2(y,x) =

آرک تانژانت خارج قسمت آرگومان های عدد x را برمی گرداند یا به عبارت ساده تر این متد آرک تانژانت عدد x را بر می گرداند.

6. ceil(x) =

عدد x رو به بالا گرد کرده و نزدیک ترین عدد صحیح (integer) به آن را بر می گرداند.

7. cos(x) =

کسینوس x را بر حسب رادیان برمی گرداند.

8. exp(x) =

مقدار عدد Ex را برمی گرداند.

9. floor(x) =

مقدار x را رو به پایین گرد کرده و نزدیک ترین عدد صحیح به آن را بر می گرداند.

10. log(x) =

لگاریتم طبیعی x را بر مبنای عدد e بر می گرداند.

11. max(x,y,z,...,n) =

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

12. min(x,y,z,...,n) =

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

13. pow(x,y) =

مقدار x را به توان y رسانده و حاصل آن را برمی گرداند.

14. ()random =

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی برمی گرداند.

15. round(x) =

مقدار x را به نزدیک ترین عدد صحیح به آن گرد می کند.

16. sin(x) =

مقدار سینوس x را بر حسب رادیان برمی گرداند.

17. sqrt(x) =

جذر یا ریشه ی دوم عدد x را برمی گرداند.

18. tan(x) =

تانژانت یک زاویه را برمی گرداند / مقدار تانژانت x را بازمی گرداند.

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

آموزش Jquery-مثال عملی

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

آموزش مثال Hello, world در Jquery

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

نمونه یک

<div id="divTest1">Hello, world!</div>

<script type="text/javascript">

$("#divTest1").text("Hello, world!");

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

نمونه دو

<div id="divTest2">Hello, world!</div>

<script type="text/javascript">

document.getElementById("divTest2") = "Hello, world!";

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.

آموزش طراحی سایت-رنگ و گرادینت در CSS3

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش طراحی سایت ادامه دارد

​

آموزش طراحی سایت-آموزش متد های اعداد جاوااسکریپت

سلام بر دوستان عزیزم..

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

آموزش طراحی سایت : متدهای سراسری (global methods)

توابع سراسری (global functions) را می توان برای تمامی نوع داده های (data type) جاوااسکریپت بکار برد. جدول های زیر پرکاربرد ترین متدهایی که حین کار با اعداد در زبان جاوا اسکریپت کارایی دارند را با ذکر کاربرد آن فهرست می کند.

​

متد های مربوط به number، متدهایی هستند که می توان برای اعداد از آن ها استفاده کرد.

​

متد toString()

این متد یک عدد یا متغیر عددی را به عنوان رشته ی متنی بر می گرداند. متدهای مربوط به شی number را می توان برای انواع عدد بکار گرفت اعم از لفظ ها (literals)، متغیرهای عددی (variable)، عبارت های عددی (expression).

مثال یک :

var x = 123;

document.getElementById("demo") =

x.toString() + "<br>" +

(123).toString() + "<br>" +

(100 + 23).toString();

متد toExponential()

رشته ی با اعداد گرد شده برمی گرداند که با قرارداد نمایی (exponential notation) نوشته شده باشد. این تابع در حقیقت یک متغیر عددی را به قرارداد نمایی (exponential notation) تبدیل می کند. یک پارامتر ورودی تعداد کاراکترهای بعد از ممیز اعشار را تعیین می کند.

مثال دو :

var x = 9.656;

document.getElementById("demo") =

x.toExponential() + "<br>" +

x.toExponential(2) + "<br>" +

 x.toExponential(4) + "<br>" +

x.toExponential(6);

پارامتر اختیاری است. در صورت مشخص نکردن پارامتر، جاوا اسکریپت عدد را گرد نمی کند.

متد toFixed()

رشته عددی با تعداد اعشار مشخص شده برمی گرداند.

مثال سه :

var x = 9.656;

document.getElementById("demo") =

x.toFixed(0) + "<br>" +

x.toFixed(2) + "<br>" +

x.toFixed(4) + "<br>" +

x.toFixed(6);

متد toPrecision()

یک رشته ی عددی با طول مشخص (تعداد کاراکتر معین) برمی گرداند.

مثال چهار :

var x = 9.656;

document.getElementById("demo") =

x.toPrecision() + "<br>" +

x.toPrecision(2) + "<br>" +

x.toPrecision(4) + "<br>" +

x.toPrecision(6);

آموزش طراحی سایت : تبدیل متغیر به عدد

سه تابع در جاوا اسکریپت وجود دارد که متغیر را به عدد تبدیل می کنند.

The Number() method

The parseInt() method

The parseFloat() method

توابع بالا متدهای مختص شی number نیستند (number methods)، بلکه متدهای سراسری یا global زبان جاوا اسکریپت محسوب می شوند.

متد Number()

این تابع متغیرهای جاوا اسکریپت را به عدد تبدیل می کند.

مثال پنج :

document.getElementById("demo") =

Number(true) + "<br>" +

Number(false) + "<br>" +

Number(new Date()) + "<br>" +

Number("  10") + "<br>" +

Number("10  ") + "<br>" +

Number("10 6");

متد parseInt()

تابع parseInt() یک رشته را تجزیه (parse) کرده و یک عدد صحیح برمی گرداند. استفاده از فاصله امکان پذیر می باشد. توجه داشته باشید که تنها عدد اول برگردانده می شود.

مثال شش :

document.getElementById("demo") =

parseInt("10") + "<br>" +

parseInt("10.33") + "<br>" +

parseInt("10 6") + "<br>" +

parseInt("10 years") + "<br>" +

parseInt("years 10");

چنانچه امکان تبدیل عدد مورد نظر وجود نداشته باشد، در جواب (NaN (not a number برگردانده می شود.

متد parseFloat()

تابع parseFloat() یک رشته را تجزیه (parse) کرده و در جواب یک عدد برمی گرداند. استفاده از فاصله مجاز می باشد. تنها اولین عدد برگردانده می شود.

مثال هفت :

document.getElementById("demo") =

parseFloat("10") + "<br>" +

parseFloat("10.33") + "<br>" +

parseFloat("10 6") + "<br>" +

parseFloat("10 years") + "<br>" +

parseFloat("years 10");

در صورت عدم امکان تبدیل عدد، (NaN (not a number برگردانده می شود.

متد valueOf()

یک متغیر عددی را به صورت های مختلف عدد (لفظ / literal، متغیر، عبارت عددی) برمی گرداند.

مثال هشت :

var x = 123;

document.getElementById("demo") =

x.valueOf() + "<br>" +

(123).valueOf() + "<br>" +

(100 + 23).valueOf();

در جاوا اسکریپت، یک عدد می تواند یک مقدار اولیه (typeof = number) یا یک شی (typeof = object) باشد. متد ValueOf() داخل زبان جاوا اسکریپت به منظور تبدیل اشیا یا آیجکت number به مقادیر اولیه بکار گرفته می شود، هیچ لزومی ندارد از آن در کد خود استفاده کنید.

با آموزش های دیگر از آموزش جاوا اسکریپت در آموزش طراحی سایت با ما همراه باشید....

آموزش طراحی سایت-JQuery

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

 

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

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

 

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

​

​

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

 

آموزش استفاده از jQuery در صفحات وب

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

jQuery test

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

 

آموزش طراحی سایت ادامه دارد

​