پروژه UglifyJS
آشنایی با JSON؛ ساده - خوانا - کم حجم
اجزای جاوا اسکریپتی بوت استرپ 3
پنلها و آکاردئونها
پنلهای آکاردئونی، بسیار شبیه به برگهها عمل میکنند. با کلیک بر روی یک سربرگ، محتوای مخفی شده آن نمایش داده میشود. این اعمال نیز توسط اجزای جاوا اسکریپتی بوت استرپ، به کمک jQuery عمل میکنند.
یک مثال:
<div class="container"> <h4 class="alert alert-info"> پنل آکاردئونی</h4> <div class="row"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#vacc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"> <span class="glyphicon glyphicon-pushpin"></span>اطلاعات یک</a> </h4> </div> <div id="vacc" class="panel-collapse collapse in"> <div class="panel-body"> <p> متن متن متن متن .......</p> <p> <a href="#" class="btn btn-info">بیشتر >></a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#checkups" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"> <span class="glyphicon glyphicon-ok"></span>اطلاعات 2</a> </h4> </div> <div id="checkups" class="panel-collapse collapse"> <div class="panel-body"> <p> متن متن متن متن .......</p> <p> <a href="#" class="btn btn-info">بیشتر >></a></p> </div> </div> </div> </div> <!-- end accordion --> </div> <!-- end row --> </div> <!-- /container -->
توضیحات:
- ابتدا کل ناحیه مدنظر باید در یک div با کلاس panel-group محصور شود؛ به همراه یک id دلخواه. از این id در ویژگیهای data-parent عنوانهای هر پنل این گروه استفاده میشود. به این ترتیب سیستم جاوا اسکریپتی آن متوجه خواهد شد که باید داخل چه ناحیهای از صفحه عمل کند.
- پس از مشخص سازی آغاز پنل گروهی مدنظر، هر گروه، داخل یک div با کلاس panel panel-default قرار خواهد گرفت. به این ترتیب اولین پنل آکاردئونی مثال، شکل میگیرد.
- سپس داخل هر پنل مجزا، باید توسط panel-heading مشخص کنیم که عنوان این پنل و محتوای خاص این عنوان کجا باید قرار گیرند. همچنین به کمک panel-collapse collapse in، محتوایی را که با کلیک بر روی عنوان هر پنل به صورت خودکار ظاهر خواهد شد را معرفی میکنیم.
در ادامه میتوان پنلهای بیشتری را به این مجموعه و گروه افزود.
- پنلی که قرار است در ابتدای کار باز باشد، دارای کلاس collapse in خواهد بود؛ مابقی فقط collapse دارند.
بررسی کامپوننت Carousels
بوت استرپ به همراه کامپوننت اسلایدشو توکاری است به نام Carousel که بدون نیاز به حتی یک سطر کدنویسی جاوا اسکریپت اضافی، یک اسلاید شو بسیار حرفهای را ارائه میدهد. مثالی را در این مورد در ادامه ملاحظه میکنید:
<div class="container"> <h4 class="alert alert-info"> اسلاید شو</h4> <div class="row"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- carousel-indicators --> <section class="carousel-inner"> <div class="active item"> <img src="images/01.jpg" alt="Photo 1"></div> <div class="item"> <img src="images/02.png" alt="Photo 2"></div> <div class="item"> <img src="images/03.jpg" alt="Photo 3"></div> </section><!-- carousel-inner --> <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> </span></a><a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <!-- myCarousel --> </div> <!-- end row --> </div>
توضیحات:
- در قسمت carousel-inner این کامپوننت، لیست تک تک تصاویر مورد نیاز قرار خواهند گرفت. تصویر آغازین دارای div ایی محصور کننده با کلاس active item است و مابقی کلاس item دارند.
- مرحله بعد، کار افزودن سیستم راهبری و حرکت بین تصاویر اضافه شده است. این سیستم چیزی نیست جز چند لینک مزین شده با کلاسهای left carousel-control و همچنین right carousel-control. ویژگیهای data-slide این لینکها نیز مشخص کننده اعمالی هستند که کامپوننت جاوا اسکریپتی carousel قرار است انجام دهد. برای مثال حرکت به قبل یا بعد. همچنین باید دقت داشت که href این لینکها به id مرتبط با div اصلی دربرگیرنده این قسمت از صفحه اشاره میکند. از یک سری گلیف آیکن نیز برای نمایش فلش رو به چپ و راست نیز در اینجا استفاده شده است.
- قسمت لیست مرتبط دارای کلاس carousel-indicators، در حقیقت مشخص کننده سه دایره کوچکی است که در تصویر فوق ملاحظه میکنید. به ازای هر تصویر، یک مورد را باید افزود. در اینجا data-target هر آیتم به id مرتبط با div محصور کننده کل اسلایدشو اشاره میکند. data-slide-toها به شماره تصویر متناظر هر آیتم متصل خواهند شد. ایندکس آغازین این آیتمها از صفر شروع میشود.
بررسی کامپوننت Scroll spy
اگر به مستندات رسمی بوت استرپ مراجعه کنید، منوی کنار صفحه با لغزش صفحه به سمت پایین ثابت است؛ اما به ازای هر سرفصل جدیدی در صفحه، آیتم فعال این منو نیز به صورت خودکار تغییر میکند. این قابلیت توسط کامپوننت Scroll spy ایجاد شده است. یک مثال:
<body id="articles" data-spy="scroll" data-target=".scrollspy"> <div class="container"> <h4 class="alert alert-info"> Scroll spy</h4> <div id="articlesindex" class="row"> <section class="scrollspy clearfix col col-lg-3 hidden-sm"> <ul class="nav nav-list affix"> <li><a href="#item1"><span class="glyphicon glyphicon-user"></span>Item 1</a></li> <li><a href="#item2"><span class="glyphicon glyphicon-user"></span>Item 2</a></li> <li><a href="#item3"><span class="glyphicon glyphicon-user"></span>Item 3</a></li> </ul> <!-- nav-list --> </section><!-- scrollspy --> <section class="col col-lg-9"> <article id="item1" class="media"> <h2> item1</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> <article id="item2" class="media"> <h2> item2</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> <article id="item3" class="media"> <h2> item3</h2> <div class="media-body"> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> <p> متن متن متن ............متن متن متن ............متن متن متن .............</p> </div> </article> </section><!-- artistinfo --> </div> <!-- end row --> </div> <!-- /container --> <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="Scripts/bootstrap-rtl.js"></script> </body>
توضیحات:
- کار با ایجاد یک section جدید که حاوی منوی ثابت کنار صفحه است، شروع میشود. این section دارای کلاس scrollspy میباشد. داخل این section لیست عناوین منو قرار میگیرند که ul آن دارای کلاس nav nav-list affix خواهد بود. affix سبب میشود تا این لیست در کنار صفحه ثابت نمایش داده شود و همواره نمایان باشد.
- نکته مهم لیست آیتمهای منو، مقادیر href لینکهای آن است. این مقادیر باید به id محتوای متناظر اشاره کنند. این محتواها را در ادامهی کار ملاحظه میکنید.
- به علاوه اگر به تگ body در ابتدای کار دقت کرده باشید، ویژگیهای data-spy و هدفی که قرار است تحت نظر قرار گیرد به آن اضافه شدهاست.
- تا اینجا این سیستم کار میکند؛ اما اگر صفحه را به بالا و پایین حرکت دهید، پس زمینه آیتم فعال، تغییر رنگ نمیدهد. برای این منظور نیاز است، به CSS سفارشی خود، چند سطر ذیل را اضافه کرد:
.scrollspy .nav > li.active{ background: lightgray; }
فایلهای نهایی این قسمت را از اینجا نیز میتوانید دریافت کنید:
bs3-sample04.zip
مقادیر پایه (Primitive Values) و ارجاعی (Reference Values)
در جاوا اسکریپت، متغیرها شامل دادههایی از نوع پایه و یا ارجاعی میباشند. مقادیر String ، Number ، Boolean ، Null و Undefined به عنوان مقادیر پایه محسوب میگردند. در این نوع متغیرها تغییرات، مستقیما بر روی مقدار ذخیره شده در متغیر اعمال میشوند. اشیاء نیز که از مجموعهای از مقادیر پایه ساخته شدهاند، مقادیر ارجاعی نامیده میشوند. در این نوع مقادیر، شما به اشارهگری از شیء دسترسی دارید. بنابراین تغییرات مستقیما بر روی دادههای ذخیره شده اعمال نمیشوند. به مثالهای زیر توجه کنید:
var num1 = 10; var num2 = num1; alert("Num1=" + num1 + ", Num2=" + num2); num2 = 20; alert("Num1=" + num1 + ", Num2=" + num2); num1 = 30; alert("Num1=" + num1 + ", Num2=" + num2);
خروجی :
"Num1=10, Num2=10"
"Num1=10, Num2=20"
"Num1=30, Num2=20"
همانطور که از خروجی مثال فوق پیداست، در انتساب num1 به num2 ، مقدار num1 در num2 کپی شدهاست. بنابراین تغییراتی که بر روی num1 یا num2 صورت میگیرد، مستقیما بر روی مقدار ذخیره شده در هر یک از این متغیرها تاثیر میگذارد. رفتار مقادیر پایه همیشه به همین صورت میباشد.
var obj1 = new Object(); obj1.num = 10; var obj2 = obj1; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num); obj2.num = 20; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num); obj1.num = 30; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num);
خروجی :
"Obj1.Num=10, Obj2.Num=10"
"Obj1.Num=20, Obj2.Num=20"
"Obj1.Num=30, Obj2.Num=30"
با استفاده از نوع ارجاعی Object میتوانیم اشیاء جدیدی را ایجاد کنیم و ویژگیهایی را به صورت پویا به آنها اختصاص دهیم. همانطور که قبلا گفته شد، اشیاء از نوع ارجاعی میباشند و حاوی اشارهگری به مقادیر ذخیره شده میباشند. بنابراین انتساب obj1 به obj2 به معنای انتساب اشارهگر obj1 به obj2 میباشد. به عبارتی دیگر obj2 به همانجایی اشاره میکند که obj1 نیز اشاره مینماید. پس هر تغییری که بر روی ویژگیهای obj1 رخ دهد، obj2 نیز تاثیرات آن را میبیند و بالعکس. همانطور که در خروجی مشاهده مینمایید، در مرحلهی اول obj1 به obj2 نسبت داده شد، پس مقدار ویژگی num برای هر دو آنها یکسان میباشد. در مرحلهی دوم، مقدار ویژگی num را در obj2 تغییر دادیم؛ ولی مقدار این ویژگی، در obj1 نیز تغییر نمود. در مرحلهی سوم نیز همان اتفاقات مرحلهی دوم تکرار شد.
با توجه به مثالهای فوق قطعا به تفاوتهای مقادیر پایه و ارجاعی پی بردید. همچنین در یک نمونهی کوچک و ساده نیز، یکی از روشهای ایجاد شیء را که استفاده از نوع ارجاعی Object میباشد، مشاهده نمودید. این دانستهها مقدمه ای بر شروع برنامه نویسی شیء گرا میباشند. ولی قبل از شروع برنامه نویسی شیء گرا در جاوا اسکریپت، به بررسی نکات و تکنیکهای دیگری میپردازیم.
توجه:
به انواع پایه، انواع دادهای مقداری یا اولیه نیز گفته میشود.
فراخوانی با مقدار (Call by Value)
در این نوع فراخوانی، آرگومانها از نوع مقادیر پایه هستند. بنابراین هر تغییری که بر روی آرگومانها در تابع رخ دهد، هیچ تاثیری بر روی آرگومانهای ارسالی در زمان فراخوانی تابع ندارند. به مثال زیر توجه کنید:
function primitive(a, b) { a += 100; b += 200; alert("a=" + a + ", b=" + b); } var x = 300, y = 400; primitive(x, y); alert("x=" + x + ", y=" + y);
خروجی :
"a=400, b=600"
"x=300, y=400"
x و y دو متغیر پایه میباشند، بنابراین تابع فوق به صورت مقداری فراخوانی شدهاست. یعنی مقدار آرگومانهای x و y در آرگومانهای a و b کپی میشوند. پس هر تغییری که بر روی a و b رخ دهد، هیچ تاثیری بر روی x و y ندارد. همچنین با توجه به توضیحی که در مورد مقادیر پایه داده شد، تغییرات مستقیما بر روی دادهی ذخیره شده در متغیر اعمال میشود. بنابراین تغییراتی که در تابع فوق بر روی a و b رخ داد، مستقیما مقادیر a و b را تغییر دادهاست وهیچ ارتباطی به x و y ندارد. البته توجه داشته باشید که حتی اگر نام آرگومانهای تابع با آرگومانهای ارسالی یکسان بود و یا حتی اگر تابع مقداری را به عنوان خروجی بر میگرداند، هیچ تفاوتی را در خروجی برنامه فوق مشاهده نمیکردید.
فراخوانی با ارجاع (Call by Reference)
در این نوع فراخوانی، آرگومانها از نوع مقادیر ارجاعی هستند. بنابراین هر تغییری که بر روی آرگومانها در تابع رخ دهد، بر روی آرگومانهای ارسالی در زمان فراخوانی تابع نیز تاثیر میگذارند. به مثال زیر توجه کنید:
function reference(obj) { obj.a += 100; obj.b += 200; alert("obj.a=" + obj.a + ", obj.b=" + obj.b); } var calc = new Object(); calc.a = 300; calc.b = 400; reference(calc); alert("calc.a=" + calc.a + ", calc.b=" + calc.b);
خروجی :
"obj.a=400, obj.b=600"
"calc.a=400, calc.b=600"
calc یک مقدار ارجاعی است که به عنوان آرگومان ورودی به تابع ارسال میشود و اشارهگر خود را به obj اختصاص میدهد. بنابراین obj به همان آدرسی اشاره میکند که calc اشاره مینماید. پس هر تغییری که بر روی obj رخ دهد، calc نیز تاثیرات آن را مشاهده مینماید. همانطور که در خروجی نیز مشاهده مینمایید، تغییرات صورت گرفته در تابع به calc نیز منعکس شده است.
حوزه دسترسی به متغیرها (Variable Scope)
متغیرهای محلی (Local Variables)
در اکثر زبانهای برنامه نویسی، متغیرهایی که در یک بلاک کد تعریف میشوند، به صورت محلی و فقط در همان بلاک کد قابل دسترسی میباشند. به این متغیرها، متغیرهای محلی میگویند که با خاتمهی اجرای بلاک کد، از بین خواهند رفت و دیگر قابل دسترسی نمیباشند. اما در جاوا اسکریپت حوزهی اجرایی متغیرها کمی متفاوت میباشد. به مثال زیر توجه کنید:
for (var i = 1; i <= 5; i++) { var sqr = i * i; alert(sqr); } alert(i); alert(sqr);
خروجی :
متغیرهای i و sqr داخل حلقهی for تعریف شدهاند و منطقا نباید خارج از این حلقه قابل دسترسی باشند. ولی با توجه به خروجی فوق، مشاهده نمودید که متغیرهای i و sqr، نه تنها خارج از این حلقه قابل شناسایی میباشند، بلکه آخرین مقدار خود را نیز حفظ نمودهاند. در جاوا اسکریپت، یک متغیر محلی زمانی مفهوم پیدا میکند که در داخل یک تابع تعریف شود. به مثال زیر توجه کنید:
function sqr(num) { var sum = num * num; return sum; } var n = 4; alert(sqr(n)); alert(num); // Error: num is not defined alert(sum); // Error: sum is not defined
خروجی :
16
Error: num is not defined
Error: sum is not defined
همانطور که مشاهده میکنید، متغیرهای num و sum به صورت محلی در تابع فوق تعریف شدهاند؛ بنابراین خارج از تابع قابل دسترسی نمیباشند و موجب بروز خطا میگردند.
متغیرهای عمومی (Global Variables)
در جاوا اسکریپت، متغیرهایی که خارج از تابع تعریف میگردند، به شیء window نسبت داده میشوند و عمومی میباشند. به عبارتی دیگر این متغیرها به عنوان یک ویژگی از شیء window تعریف میشوند و در تمامی توابع و بلاکهای کد قابل دسترسی میباشند. به مثال زیر توجه کنید:
var color = "Red"; function setColor() { color = "Blue"; } alert(color); setColor(); alert(color);
خروجی :
"Red"
"Blue"
در مثال فوق، متغیر color به صورت عمومی تعریف شدهاست. بنابراین در کل برنامه قابل دسترسی میباشد. در alert اول مقدار فعلی متغیر color یعنی “Red” نمایش مییابد. سپس با فراخوانی تابع، مقدار این متغیر تغییر میکند. در alert دوم مقدار تغییر یافتهی متغیر color نمایش خواهد یافت. حال به مثال زیر توجه کنید:
var color = "Red"; function getColor() { var color = "Blue"; return color; } alert(color); alert(getColor()); alert(color);
خروجی :
"Red"
"Blue"
"Red"
در مثال فوق، ابتدا یک متغیر color به صورت عمومی یا Global تعریف شده است. در تابع getColor نیز یک متغیر color به صورت local یا محلی تعریف شده است. زمانی که در alert تابع getColor فراخوانی میشود، متغیر color مقداردهی میگردد. این مقداردهی برای متغیر محلی صورت گرفته است و هیچ ربطی به متغیر color که به صورت عمومی تعریف شده است ندارد.
جهت تعریف متغیر در جاوا اسکریپت، از کلمهی کلیدی var استفاده میشود. اما تعریف متغیر در جاوا اسکریپت اجباری نمیباشد و میتوان یک متغیر را مقداردهی نمود بدون آنکه تعریف شده باشد. در صورتی که متغیر با var اعلان نشود، آن متغیر به شیء window نسبت داده میشود و ماهیت عمومی پیدا میکند. به مثال زیر توجه کنید:
function sum(a, b) { c = a + b; } sum(20, 30); alert(c);
خروجی :
50
همانطور که مشاهده میکنید، متغیر c بدون تعریف شدن مورد استفاده قرار گرفته است. با اینکه به صورت محلی مقداردهی گردیده است، ولی چون توسط var اعلان نشده است، به شیء window نسبت داده شده و ماهیت عمومی پیدا کرده است.
Cookie - قسمت دوم
کوکی در جاوا اسکریپت
document.cookie = "name=value; expires=date; domain=theDomain; path=thePath; secure";
document.cookie = 'myCookie=myValue; max-age=432000; domain=d.com; path=/test';
myCookie=myValue
document.cookie = 'mySecondCookie=mySecondValue; path=/'
myCookie=myValue; mySecondCookie=mySecondValue
function setCookie(data, value) { if (typeof data === "string") { data = { name: data, value: value }; }; if (!data.name) throw "Cookie's name can not be null."; var cookie = escape(data.name) + "=" + escape(data.value); var expDate = null; if (data.expDays) { expDate = new Date(); expDate.setDate(expDate.getDate() + data.expDays); } else if (data.expYear && data.expMonth && data.expDay) { expDate = new Date(data.expYear, data.expMonth, data.expDay); } else if (data.expires) { expDate = data.expires; } else if (data.maxAge) { expDate = new Date(); expDate.setSeconds(expDate.getSeconds() + data.maxAge); } if (expDate != null) cookie += "; expires=" + expDate.toGMTString(); if (data.domain) cookie += "; domain=" + escape(data.domain); if (data.path) cookie += "; path=" + escape(data.path); if (data.secure) cookie += "; secure"; document.cookie = cookie; return document.cookie; }
setCookie('cookie1', 'Value1'); setCookie({name:'cookie1', value:'Value1'}); setCookie({name:'cookie2', value:'Value2', expDays:10}); setCookie({name:'cookie3', value:'Value3', expires:new Date()}); setCookie({name:'cookie4', value:'Value4', expYear:2013, expMonth:0, expDay:13}); setCookie({name:'cookie3', value:'Value3', maxAge:365*24*60*60}); setCookie({name:'cookie5', value:'Value5', domain:'d.net', path:'/'}); setCookie({name:'cookie6', value:'Value6', secure:true}); setCookie({name:'cookie7', value:'Value7', expDays:100, domain:'dd.com', path:'/employee', secure:true});
function delCookie(data) { if (typeof data === "string") { data = { name: data }; }; data.expDays = -1; return setCookie(data); }
delCookie('myCookie'); delCookie({ name: 'myCookie', domain: 'd.com', path: '/test' });
function getCookie(name) { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].split("="); if (cookie[0].trim() == escape(name)) { return unescape(cookie[1].trim()); } } return null; }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ""); };
String.prototype.trimStart = function () { return this.replace(/^\s+/, ""); }; String.prototype.trimEnd = function () { return this.replace(/\s+$/, ""); };
cookie.shift(1); return unescape(cookie.join('=').trim());
function getCookie(name) { var foundCookies = []; var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].split("="); if (cookie[0].trim() == escape(name) && cookie.length >= 2) { cookie.shift(1); foundCookies.push(unescape(cookie.join('=').trim())); } } return foundCookies.length > 1 ? foundCookies : foundCookies.length == 1 ? foundCookies[0] : null; }