فیلم نامه کامل همه قسمت های دوستان ( فرندز Friends )
190,000 ریال
مقاله آموزشی ده ابزار مناسب برای ثبت و ارائه فیلم نامه به هالیوود
320,000 ریال
بانک فیلم نامه های انگلیسی
490,000 ریال
مقاله های کامپیوتر ، مطالب آموزشی ، طراحی وب ، آموزش پی اچ پی ، css ، jquery و …
جلسات درس روش تحقیق دکتر شایگان :
اینم یک کد جاوااسکریپت که از وبسایت رستوران های ایرانی گرفته شده res2ran.com که میتونید توی وبلاگ یا وبسایتتون ازش استفاده کنید .
این کد به دو صورت جاوا اسکریپت و آیفریم موجود هست که هر دو کد رو اینجا براتون میذارم .
برای دریافت کد میتونید به این آدرس مراجعه کنید : http://share.wanted.ir/index.php?act=javascript_codes&sub=random_iran_views
کد ها رو اینجا هم براتون میذارم :
کد آیفریم :
<iframe src=”http://www.res2ran.com/frames/boxframe.php?item=rgallery&w=200&h=200″ width=”200px” height=”300px” frameborder=”0″ scrolling=”auto” ></iframe>
کد جاوااسکریپت :
<script TYPE=”text/javascript” SRC=”http://www.res2ran.com/frames/boxjava.php?item=rgallery&w=200&h=300″></script>
کافی است یکی از کد های بالا را در محل مناسب وبلاگ یا وبسایت خود قرار دهید ( ستون های چپ و راست وبلاگ ) . همچنین برای تغییر طول و عرض جعبه میتوانید مقدار روبروی متغیر های w و h را که در حال حاضر ۲۰۰ هستند تغییر دهید . w عرض را به پیکسل و h ارتفاع را مشخص میکنند .
نمونه استفاده شده آن را نیز میتوانید در این صفحه ببینید : http://res2ran.mihanblog.com
با سلام
امروز میخوام یک کد جاوااسکریپت بهتون معرفی کنم که از وبسایت رستوران های ایرانی گرفته شده res2ran.com که میتونید توی وبلاگ یا وبسایتتون ازش استفاده کنید . مخصوصا اگر وبلاگتون در مورد خوراکی و اینجور چیزها باشه . نحوه نمایش آن در وبسایت شما :
این کد به دو صورت جاوا اسکریپت و آیفریم موجود هست که هر دو کد رو اینجا براتون میذارم .
برای دریافت کد میتونید به این آدرس مراجعه کنید : http://share.wanted.ir/index.php?act=javascript_codes&sub=random_food_pic
کد ها رو اینجا هم براتون میذارم :
کد آیفریم :
<iframe src=”http://www.res2ran.com/frames/boxframe.php?item=rfoodpic&w=200&h=200″ width=”200px” height=”200px” frameborder=”0″ scrolling=”auto” ></iframe>
کد جاوااسکریپت :
<script TYPE=”text/javascript” SRC=”http://www.res2ran.com/frames/boxjava.php?item=rfoodpic&w=200&h=200″></script>
کافی است یکی از کد های بالا را در محل مناسب وبلاگ یا وبسایت خود قرار دهید ( ستون های چپ و راست وبلاگ ) . همچنین برای تغییر طول و عرض جعبه میتوانید مقدار روبروی متغیر های w و h را که در حال حاضر ۲۰۰ هستند تغییر دهید . w عرض را به پیکسل و h ارتفاع را مشخص میکنند .
نمونه استفاده شده آن را نیز میتوانید در این صفحه ببینید : http://res2ran.mihanblog.com
قرار است همایش استارتاپ ویکند ( Startup Weekend ) اینبار هشتم آبان ماه در شیراز برگزار شود . این همایش بیشتر شبیه یه تفریح آخر هفته است که البته میتونه برای شرکت کننده ها فراتر از تفریح و به یک کسب و کار بزرگ تبدیل بشه .
کلا همایش در سه روز برگزار میشه ، شرکت کنندگان شامل برنامه نویسان ، طراحان کامپیوتر و ایده پردازان هستن و البته صاحبان کسب و کار . روز اول شرکت کنندگان ایده هاشون رو عنوان میکنن (هر نفر 60 ثانیه فرصت داره ) . از بین ایده ها چند ایده به عنوان ایده برتر رای گیری و انتخاب میشه . بعد ایده پردازان برتر گروه خودشون رو از بین همون شرکت کننده ها انتخاب میکنن و در دو روز آینده این گروه ها اقدام به بسط ایده میدن تا از حالت خام به حالت اجرایی تبدیل بشه . و در پایان داوری میشن و برترین پروژه انتخاب میشه . عموما دیده شده بعد از این همایش گروه ها با هم در ارتباط بودن و ایده هاشونو تکمیل کردن و تبدیل به یک کسب و کار .
این چکیده همایش هست که در تمام جهان داره انجام میشه و چند سالی هست که وارد ایران هم شده و حالا برای اولین بار داره تو شیراز برگزار میشه . من هم افتخار دارم در همایش حضور داشته باشم .
خوشحال میشم شما دوستان رو اونجا زیارت کنم .
برای دیدن اطلاعات بیشتر و ثبت نام میتونید به آدرس زیر مراجعه کنید :
اینم متن کامل آموزش کتابخانه jquery که خودم نوشتم . این آموزش شامل 9 فصل به شرح زیر می باشد :
لینک دریافت فایل pdf : آموزش jquery فارسی ( learning_jquery_farsi.pdf ) حجم فایل : 508 کیلو بایت .با نظراتتون در بهبود این کتاب الکترونیکی به بنده یاری برسانید .
فصل هفتم :
پیمایش عناصر html : ( Tree Traversal ) :
همانطور که میدانید هر صفحه html از تعدادی تگهای تو در تو تشکیل شده است . هر تگ فرزند تگ بیرونی و پدر تگ های درونی اش می باشد . همچنین به تگ ها ی کنار هم در یک سطح نیز تگ های همسایه گفته میشود .
برای دسترسی به عناصر صفحه علاوه بر انتخاب خصوصیت مشترکی از آنها میتوان از تعاریف مربوط به پیمایش درختی آنها استفاده نمود .
به عنوان مثال در کد روبرو :
<html>
<head>
<title> test page </title>
</head>
<body >
<div>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</div>
</body>
</html>
در مثال بالا :
· همه تگ ها فرزند تگ html هستند
· تگ head پدر تگ title و در نتیجه تگ title فرزند تگ head می باشد .
· تگ ها li همسایه یا هم نژاد (برادر یا خواهر ) یکدیگر هستند و همگی فرزند ul هستند و همچنین در سطح بالاتر فرزند تگ div و body و html .
· تگ ul نیز فرزند div و body و html است .
· تگ body همسایه تگ head و فرزند html است .
با توجه به تعاریف فوق . توابعی در jQuery برای پیمایش درختی عناصر html ایجاد شده که در این فصل آنها را شرح خواهیم داد :
$(selector).children([selector]) :
$(selector).parent([selector]);
تابع children() فرزندهای عنصر انتخابی را بر میگرداند . به عنوان مثال :
$(‘ul’).children().css(‘background’,’Red’);
دستور بالا باعث میشود رنگ پیش زمینه تمام تگهای درون تگ ul (فرزند های ul یا همان تگهای li ) قرمز شود .
همچنین شما میتوانید از آرگومان selector استفاده نمایید تا فرزند های خاصی از تگها را انتخاب نمایید .
به مثال زیر توجه نمایید :
<div>
<span>Hello</span>
<p class=”selected”>Hello Again</p>
<div class=”selected”>And Again</div>
<p>And One Last Time</p>
</div>
اگر در این مثال کد زیر را اجرا کنیم :
$(“div”).children(“.selected”).css(“color”, “blue“);
Hello
Hello Again
And Again
At One Last Time
$(‘li’).parent().addClass(‘listExpander’);
در این مثال به اولین والد عناصر li در صفحه کلاس listExpander را اعمال میکند .
همانند تابع children() این تابع نیز میتواند مقدار selector را قبول کند :
<div class=”one”>
<span class=”text” > click </span>
</div>
<div>
در مثال فوق :
$(‘span’).parent() :
به div با کلاس two اشاره میکند . در صورتی که
$(‘span’).parent(‘.one’) : به div با کلاس one اشاره میکند . نکته : دقت نمایید که تابع parent() فقط یک عنصر را به عنوان پدر بر میگرداند . اگر بخواهید همه والدهای یک عنصر را برگردانید میتوانید از تابع parents() استفاده کنید : $(‘span’).parents() : در این مثال تمام والد های span (یعنی هم div با کلاس two و هم div با کلاس one ) را بر میگرداند . تابع : parentsUntil() : $(selector).parentsUntil([parent_selector]); (کلمه until به معنی “تا اینکه ” می باشد و همانطور که از معنی این عبارت مشخص است تابع فوق تمامی والدهای عنصر selector را تا رسیدن به عنصر parent_selector بر میگرداند . به عنوان مثال اگر در مثال اول این فصل کد زیر را بنویسیم : $(‘li’).parentsUntil(‘body’).addClass(‘test’); به تمام تگ های والد li تا تگ body (تگهای ul و div ) کلاس test را اضافه میکند . تابع next() و pv() : $(selector).next([selector]); $(selector).pv([selector]); این دو تابع هم همانطور که از نامشان پیداست برای بدست آوردن عنصر بعدی ( next ) و عنصر قبلی ( pv ) استفاده میشوند : <ul> <li>list item 1</li> <li>list item 2</li> <li class=”third-item”>list item 3</li> <li>list item 4</li> <li class=”test”>list item 5</li> </ul>
$(‘li.third-item’).next().css(‘color’, ‘red’);
کد فوق باعث میشود عبارت list item 4 به رنگ قرمز نمایش داده شود .
$(‘li.third-item’).next().css(‘color’, ‘blue’);
این کد عبارت list item 2 را به رنگ آبی نمایش میدهد .
$(‘li.third-item’).next(‘.test’).css(‘background-color’, ‘blue’);
این کد عبارت list item 5 را با پیش زمینه آبی نمایش میدهد .
$(‘li.third-item’).next(‘.test’).pv().css(‘background-color’, ‘Red’);
این کد عبارت list item 4را با پیش زمینه قرمز نمایش میدهد .
نکته : توابع زیر نیز برای پیمایش بهتر عناصر قبلی و بعدی در jquery ایجاد شده اند :
$(selector).nextAll([nextselector])
$(selector).pvAll([pvselector])
تمام عناصر بعد next و قبل pv از selector را بر میگرداند (مطابق با nextselector یا pvselector )
$(selector).nextUntil([nextselector])
$(selector).pvUntil([pvselector])
تمام عناصر بعد next و قبل pv از selector را تا عنصر nextselector و pvselector بر میگرداند .
تابع siblings() :
$(selector).siblings([sibling_selector])
این تابع هم نژاد های selector را بر میگرداند . و در صورتی که sibling_selector مشخص شده باشد مقادیری که با این عناصر مطابق باشند بر می گرداند .
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body >
<ul>
<li > one </li>
<li class=”test” > two </li>
<li class=”test2″ > three </li>
</ul>
<script>
$(“li.test”).siblings().css(“background”, “yellow”);
</script>
</body>
</html>
در صورتیکه کد بالا را به شکل زیر تغییر دهیم فقط li هایی انتخاب میشوند که دارای کلاس test2 باشند :
$(‘li.test’).siblings(‘.test2’).css(‘background’,’yellow’);
تابع find() :
$(selector).find(find_selector)
تابه find در فرزندهای selector به دنبال find_selector میگردد و آن عنصر را بر میگرداند .
این تابع شبیه تابع children() عمل میکند و تنها تفاوت آن این است که تابع children فقط یک سطح فرزند را جستجو میکند . همچنین در تابع find(selector) پارامتر selector الزامی است (میتوان برای انتخاب همه از عبارت ‘*’ استفاده کرد ) :
$(selector).find(‘*’)
مثال :
<ul class=”level-1″>
<li class=”item-i”>I</li>
<li class=”item-ii”>II
<ul class=”level-2″>
<li class=”item-a”>A</li>
<li class=”item-b”>B
<ul class=”level-3″>
<li class=”item-1″>1</li>
<li class=”item-2″>2</li>
<li class=”item-3″>3</li>
</ul>
</li>
<li class=”item-c”>C</li>
</ul>
</li>
<li class=”item-iii”>III</li>
</ul>
$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);
این کد رنگ پیش زمینه عبارت های A , B , 1 ,2,3, C را قرمز میکند . اما همین عمل با تابع children تنها بر روی عبارات A,B,C اعمال میشود .
تابع closest() :
$(selector).closest(closest_selector)
این تابع هم مانند parents() عمل میکند . اما تفاوت هایی بین این دو تابع وجود دارد :
· تابه closest از خود عنصر انتخابی پیمایش را شروع میکند . در صورتی که تابع parents از اولین والد شروع به پیمایش میکند .
· تابع closest عملیات پیمایش را تا رسیدن به عنصر انتخابی (closest_selector ) انجام میدهد در صورتی که در تابع parents ابتدا عملیات تا انتها (root ) انجام میشود . سپس همه عناصر انتخاب شده در یک متغیر temp ریخته شده و سپس آنهایی که مطابق با شرط (عنصر selector ) می باشد را از بین آنها انتخاب میکند . بنابراین سرعت اجرای تابع closest بیشتر است .
· تابع closest میتواند صفر یا یک عنصر بر گرداند در صورتی که تابع parents صفر یا یک یا چند عنصر بر میگرداند .
در مثال بالا :
$(‘li.item-a’).closest(‘ul’).css(‘background-color’,’red’)
باعث میشود رنگ پیش زمینه ul با کلاس level-2 قرمز شود .
مرجع فصل : http://api.jquery.com/category/traversing/tree-traversal
فصل ششم :
jQuery و ایجاکس :
Jquery کتابخانه ای بسیار کارآمد برای کار با تکنولوژی Ajax در خود دارد که در این فصل به معرفی آن خواهیم پرداخت .
قبل از شروع باید بدانیم Ajax چیست ؟
Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.
Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
هسته اصلی ایجاکس شیی به نام XMLHttpRequest می باشد .
بطور مختصر : ایجاکس ارتباط غیر مستقیم و تبادل اطلاعات با وب سرور است بطوریکه همه چیز در بک گراند اتفاق بیافتد و نتیجه فقط در قسمتی از صفحه نمایش یابد بطوریکه کل صفحه نیاز به بازنگری (رفرش ) نداشته باشد .
ایجاکس در jquery :
در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .
و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector ) به نمایش در آورید .
در ادامه به بررسی این توابع خواهیم پرداخت :
تابع load :
$(selector).load(url,data,callback)
این تابع فایل موجود در آدرس url را خوانده و پس از اجرای کامل نتیجه را در عنصر انتخابی (Selector ) نمایش میدهد .
یک مثال ساده :
فرض کنید فایلی با نام loadtxt.txt در پوشه files سرور دارید و میخواهید با کلیک روی دکمه ای آن را در صفحه به نمایش در آورید :
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(‘#result’).load(‘files/loadtxt.txt’);
});
});
</script>
</head>
<body>
<button>Click to Load Data</button>
<div id=”result”></div>
</body>
</html>
پس از اجرای این برنامه با کلیک روی دکمه محتوی موجود در فایل تکست در تگ div نمایش می یابد .
تابع load دو آرگومان دیگر دارد . آرگومان data : زمانی که شما میخواهید یک اسکریپ زبان سرور را (فایلهای php یا asp یا aspx و … ) از سرور بخوانید و باید دیتایی را برای پردازش به آن اسکریپت بفرستید توسط این آرگومان این کار را انجام میدهید .
آرگومان Callback نیز تابعی است که هنگامی که عملیات لود به طور کامل انجام شد اجرا خواهد شد .
مثال :
فرض کنید شما در پوشه files در سرور فایلی به نام loadname.php دارید که محتوای آن بصورت زیر است :
<?php
$name = $_REQUEST[‘name’];
echo ‘Welcome ‘.$name;
?>
کار این برنامه این است که نامی را به عنوان داده دریافت میکند و پیام خوش آمد را نمایش میدهد .
حال میخواهید برنامه ای بنویسید که کاربری در جعبه Text یک نام وارد نماید و پس از کلیک روی دکمه . نام به فایل فوق فرستاده شود و نتیجه نمایش داده شود و پس از اتمام کار پیغامی نمایش دهد :
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
var inputname = $(‘input#name’).val();
$(‘#result’).load(‘files/loadname.php’,{name:inputname},finish_load);
});
});
function finish_load()
{
alert(‘load finish’);
}
</script>
</head>
<body>
Please Enter Your Name :
<input type=”text” id=”name” />
<button>Click to Load Data</button>
<dir id=”result”></dir>
</body>
</html>
همان طور که در کد فوق میبینید پس از کلیک روی دکمه button ابتدا توسط تابع val مقدار موجود در textbox را خوانده و در متغیر inputnum قرار میدهیم . سپس با استفاده از دستور load این مقدار را به فایل loadname.php می فرستیم و در پایان هنگامیکه پاسخ از سرور داده شد و پیام خوش آمد نمایش یافت تابع finish_load اجرا میشود و عبارت “load finish” بر روی صفحه نمایش داده خواهد شد .
نکته 1 : تابع val() : این تابع مقدار یک عنصر فرم را برمیگرداند و در صورتی که مقدار داشته باشد آن مقدار را به خصوصیت value عنصر انتخابی selector نصبت میدهد.
$(selector).val(content);
نکته 2 : در صورتی که چند داده را میخواهید به عنوان data به سرور ارسال نمایید آنها را داخل } و { قرار داده و هر داده را با کاما “,” از داده بعدی جدا نمایید :
{var1:value1,var2:value2,var3:value3}
تابع $.ajax(option) :
سطح پایین ترین تابع کار با ایجاکس در جی کوئری تابع ajax می باشد . برای استفاده از این تابع باید تمام پارامتر های ارسال را توسط آرگومان option به سرور ارسال نماییم .
مثال ساده :
$.ajax({
url: ‘ajax/test.html’,
success: function(data) {
$(‘.result’).html(data);
alert(‘Load was performed.’);
}
});
در این مثال تابع ajax فایل test.html را از سرور فراخوانی کرده و نتیجه را در عنصری با کلاس result نمایش میدهد .
کار با این تابع به نسبت سایر توابعی که معرفی خواهد شد دشوار تر میباشد . بنا براین پیشنهاد میشود از این تابع فقط در مواقع نیاز استفاده شود و به جای آن از توابع ساده شده استفاده گردد .
تابع : $.get و $.post :
$.post(url,data,callback,type);
$.get(url,data,callback,type);
این دو تابع همان طور که از نامشان پیداست با دو متد مختلف post و get اسکریپت url را از سرور فراخوانی نموده و نتیجه را توسط تایع callback برمیگردانند.
تنها تفاوت این دو تابع در نوع ارسال داده به سرور است که اولی از متد post استفاده مینماید و دومی از متد get . بنابراین در صورتی که میخواهید فقط فایلی را از سرور بازخوانی نمایید و قصد ارسال داده به سرور را ندارید، بهتر است از تابع get استفاده نمایید . (و یا تابع load ) .
(اگر در مورد این دو متد آشنایی ندارید به آموزش زبانهای برنامه نویسی تحت سرور مانند php یا asp مراجعه نمایید ).
مثال :
مثالی که در بالا برای تابع ajax نوشته شد را با تابع get بصورت زیر میتوان نوشت :
$.get(‘ajax/test.html’, function(data) {
$(‘.result’).html(data);
alert(‘Load was performed.’);
});
و یا مثالی دیگر : در این مثال میخواهیم همان مثالی را که در ابتدای فصل برای تابع load نوشتیم با تابع post بنویسیم . در این صورت قسمت کد ما به شکل زیر تغییر خواهد کرد :
$(document).ready(function(){
$(“button”).click(function(){
var inputname = $(‘input#name’).val();
$.post(‘files/loadname.php’,{name:inputname},function(Data){
$(‘#result’).html(Data);
finish_load();
});
});
});
همان طور که در مثال میبینید . تابع callback با مقدار data پس از فراخوانی کامل loadname.php صدا زده میشود و در این تابع مقدار data که همان نتیجه اجرای اسکریپت loadname.php است توسط دستور html(data) در عنصر با آیدی result نمایش می یابد .
تابع getScript :
$.getScript(url,callback)
تابع getScript ، برای فراخوانی و اجرای یک فایل جاوااسکریپت ( js ) به کار برده میشود .
این تابع ساده شده تابع ajax با فرمت زیر می باشد :
$.ajax({
url: url,
dataType: ‘script’,
success: success
});
مثال :
$.getScript("test.js");
این مثال باعث فراخوانی و اجرای فایل test.js میشود .
$.getScript("https://blog.monavarian.ir/test.js", function(){
alert("Script loaded and executed.");
});
در مثال فوق فایل test.js در آدرس blog.monavarian.ir فراخوانی میشود و در صورتی که فراخوانی با موفقیت انجام شود پیغام مناسب نمایش می یابد .
نکته : میتوانید از این تابع هنگامی استفاده نمایید که میخواهید متغیر های سراسری را در یک فایل جداگانه قرار دهید و بعد در برنامه ها از آن استفاده نمایید .
تابع getJSON :
$.getJSON(url,data,callback);
این تابع برای فراخوانی فایل با فرمت Jason از سرور می باشد .
توی پرانتز ( مختصری درباره Jason ) :
فایلهای Jason ، فایلهای داده ای هستند که داده ها را با فرمت خاصی ذخیره میکنند . مانند فایلهای xml فایلهای Jason نیز دارای یک فرمت خاص برای ذخیره اطلاعات می باشند .
ساختار هر شی jason به صورت روبرو می باشد :
{string : value , string:value , … }
Value ها میتوانند شامل مقادیر string , object , number , array , true , false , null باشند .
ساختار Array در jason نیز به فرم زیر می باشد :
[item1,item2,item3,…]
هر item نیز خود میتواند شامل مقادیر معرفی شده در بالا باشد .
برای کسب اطلاعات بیشتر به سایت مرجع Jason به آدرس http://www.json.org مراجعه نمایید .
یک مثال کلی با post : در این مثال قصد داریم فرمی را توسط توابع jquery بررسی کرده و سپس توسط تابع post به سرور فرستاده و نتیجه را نمایش دهیم :
برای مثال میخواهیم یک فرم ساده ورود ایجاد نماییم . فایل اسکریپت forms.php بررسی میکند که نام کاربری و کلمه عبور داده شده در لیست کاربران موجود است . در صورتی که موجود باشد مقدار 1 و در صورتی که موجود نباشد مقدار صفر را بر میگرداند . محتوی این فایل به صورت زیر است :
<?php
//user defind :
$users = array (
‘admin’ => ‘demo’,
‘test’ => ‘test’,
‘user’ => ‘pass’,
);
$username = trim($_POST[‘username’]);
$pass = trim($_POST[‘password’]);
if ( array_search($pass,$users) == $username )
echo ‘1’;
else
echo ‘0’;
?>
این فایل را در پوشه files ذخیره میکنیم .
در فایل اصلی html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script src=”jquery.js” type=”text/javascript” ></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript”>
$(document).ready(function(){
$(‘input’).focus(function(){
$(‘input’).removeClass(‘select’);
$(this).addClass(‘select’);
});
$(‘form’).submit(function(event){
event.preventDefault();
var user = $(‘input#username’).val();
var pass = $(‘input#pass’).val();
if (!user)
{
$(‘.result’).html(‘please Enter username’);
$(‘input#username’).focus();
}
else if(!pass)
{
$(‘.result’).html(‘please Enter password’);
$(‘input#pass’).focus();
}
else
{
$.post(‘files/forms.php’,{username:user,password:pass},function(data){
if (data == ‘1’)
{
$(‘.result’).html(‘Login Success <br/> welcome ‘+user);
$(‘form’).hide();
}
else if (data == ‘0’)
$(‘.result’).html(‘username or password is not correct’)
else
$(‘.result’).html(‘can not connect to server’)
})
}
return false;
})
})
</script>
<title>Form Validation</title>
<style>
.result {
color:#FF0000;
}
.select {
background:#fff;
border:2px solid #0000ff;
}
</style>
</head>
<body>
<div class=”result” > </div>
<form action=”#” >
<input type=”text” name=”username” id=”username” />
<input type=”password” name=”pass” id=”pass” />
<input type=”submit” value=”Login”/>
</form>
</body>
</html>
همان طور که در کد بالا مشاهده می کنید . در ابتدا هنگام submit فرم بررسی میکند و در صورت خالی بودن فیلدهای username و یا pass پیغام مناسب درج میکند و سپس نشانگر را به فیلد خالی هدایت می کند (focus ) .
در صورتی که username و pass وارد شده باشد . این مقادیر را به فایل forms.php میفرستد و در نتیجه بررسی میکند : در صورتی که نتیجه فرستاده شده از سرور 1 باشد پیغام خوش آمد نمایش میدهد و فرم را مخفی (hide ) می نماید در غیر این صورت پیغام مناسب را درج می نماید.
فصل پنجم :
تغییر استایل در جی کوئری :
توسط jquery میتوانید مستقیما استایل یک شی را در صفحه تغییر دهید . برای تغییر استایل چند تابع مهم وجود دارد :
توسط تابع css به سه روش فوق میتوان مقدار استایل عناصر را تغییر داد .
$(selector).css(name,value)
در این دستور مقدار value را برای خصوصیت name در تمام عناصر html مطابق با selector تنظیم میکند.
$(“p”).css(“background-color”,”yellow”);
عبارت بالا رنگ پیش زمینه همه پاراگراف های موجود در صفحه را به زرد تبدیل میکند.
$(selector).css({properties}) :
این دستور برای تنظیم چندین خصوصیت css برای عناصر انتخابی می باشد . به عنوان مثال :
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});
عبارت فوق رنگ پیش زمینه پاراگرافها را زرد و اندازه نوشته آنها را دوبرابر میکند. همانطور که میبینید هر خوصوصیت با یک کاما “,” از خصوصیت بعدی جدا میشود و همه خصوصیت ها بین { و } قرار گرفته اند.
$(selector).css(name) :
این دستور مقدار خصوصیت name از عنصر selector را برمیگرداند . مثلا :
$(this).css(“color”);
عبارت فوق مقدار رنگ نوشته عنصر جاری را برمیگرداند .
$(selector).height(value)
$(selector).width(value)
دو تابع width و height به ترتیب برای تغییر اندازه عرض و ارتفاع selector ها استفاده میشود :
$(“#boxinfo”).height(“200px”);
عبارت فوق مقدار ارتفاق عنصری با آیدی boxinfo در صفحه را 200 پیکسل میکند.
$(this).width(“200px”).height(“200px”);
عبارت فوق اندازه عرض و ارتفاع عنصر جاری را برابر 200پیکسل میکند.
نکته : دو تابع width و height در صورتی که بدون پارامتر استفاده شوند به ترتیب مقدار عرض و ارتفاع عنصر انتخابی را بر میگردانند.
افزودن و حذف کلاس :
$(selector).addClass(classname);
$(selector).removeClass(classname);
توسط دو دستور فوق میتوان یک کلاس css را به عناصر انتخابی اضافه نمود و یا اگر عناصری دارای کلاسی هستند آن کلاس را حذف کرد .
مثال :
<html>
<head>
<script src=”jquery.js” type=”text/javascript” ></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘button’).mouseover(function(){
$(‘p’).addClass(‘info’);
})
$(‘button’).mouseout(function(){
$(‘p’).removeClass(‘info’);
})
})
</script>
<title>Example 1</title>
<style>
.info {
background:#000;
color:#FFF;
}
</style>
</head>
<body>
<button>move mouse to add or remove </button>
<p>paragraph 1</p>
<p class=”info”> paragraph 2 whit class info</p>
</body></html>
در کد فوق پس از اجرا با بردن موس روی دکمه کلاس info به پاراگراف ها اعمال میشود و با برن موس به خارج از دکمه کلاس info حذف میشود.
نکته : توسط دستور (selector).toggleClass(content)$ میتوان به عنصری کلاسی را اضافه کرد و در صورتی که عنصر از این کلاس استفاده میکند آن را حذف کرد . (تغییر وضعیت بین اضافه و حذف کلاس content برای عنصر selector ) .
hasClass(classname):
مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .
if ( $(‘#mydiv’).hasClass(‘info’) )
alert(‘mydiv has class info’);
position() :
$(selector).position()
این تابع فاصله selector را از بالا و چپ صفحه مشخص میکند . برای دسترسی به فاصله بالا از .top و برای دسترسی به فاصله چپ از .left استفاده میشود :
var pos = $(‘#mydiv’).position();
var left = pos.left;
var top = pos.top;
فصل چهارم :
Jquery و تغییر محتوای عناصر :
در jquery شما میتوانید به راحتی محتوای تگ ها و عناصر موجود در صفحه را تغییر نمایید .
برای اینکار چندین تابع در jquery وجود دارد :
$(selector).html(content);
با این دستور محتوی content را داخل عناصر Selectors قرار میدهد .
به عنوان مثال :
$(“p#head”).html(” Welcome “);
این قطعه کد در تگ p با آیدی head عبارت Welcome را مینویسد .
نکته : content میتوان متن ساده یا html باشد :
$(‘p’).html(“<h1> hello </h1>”);
توابع دیگری نیز برای تغییر محتوا عناصر وجود دارند :
$(selector).append(content)
این تابع عبارت content را به انتهای محتوای Selector اضافه میکند .
$(selector).prepend(content)
این تابع عبارت content را به ابتدای محتوای Selector اضافه میکند .
$(selector).after(content)
این تابع عبارت content را بعد از تمام عناصر نظیر Selector درج میکند .
$(selector).before(content)
این تابع عبارت content را قبل از تمام عناصر نظیر Selector درج میکند .
نکته : دستور html() به تنهای محتوی عنصر را برمیگرداند :
alert($(‘#box’).html());
تابع دیگری هم برای خواندن محتوی وجود دارد به نام text() که همانند تابع html() عمل میکند با این تفاوت که این تابع تگ های html را حذف میکند و فقط نوشته را برمیگرداند در حالی که html() تمام محتوی را با تگهایش برمیگرداند .
به مثال زیر توجه نمایید :
<html>
<head>
<script type=”text/javascript“ src=”jquery.js“></script>
<script type=”text/javascript“>
$(document).ready(function(){
$(“button”).click(function(){
alert($(‘#test’).text());
alert($(‘#test’).html());
});
</script>
</head>
<body>
<p id=”test“> <b> paragraph </b> </p>
<button>Click me</button>
</body>
</html>
پس از اجرای دستور فوق و کلیک رو دکمه اولین پنجره مقدار “paragraph” را نمایش میدهد و دومین پنجره عبارت “<b> paragraph </b>” نمایش داده میشود .
تغییر خصوصیات (Attribute) شی :
توسط تابع attr() میتوان به خصوصیات یک تگ html دسترسی پیدا کرد .
$(selector).attr(attribute);
خصوصیت attribute از عنصر انتخابی را بر میگرداند .
$(selector).attr(attribute,value);
به خصوصیت attribute از عناصر انتخابی مقدار value را نسبت میدهد .
مثلا :
$(‘a’).attr(‘href’);
مقدار خصوصیت href از اولین تگ a موجود در صفحه را بر میگرداند .
$(this).attr(‘id’,’newName’);
مقدار id عنصر جاری را به newName تغییر نام میدهد.
دسترسی به value عناصر فرم ها :
$(selector).val();
$(selector).val(newValue);
توسط تابع val() میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .
به مثال های زیر توجه نمایید :
$(‘input#name’).val();
مقدار value عنصر input با آیدی name را بر میگرداند .
$(‘select.foo option:selected’).val();
هنگامی که پنجره dropdown باز است مقدار انتخابی را برمیگرداند .
$(‘select.foo’).val(‘two’);
مقدار انتخاب شده عنصر select با کلاس foo را روی مقدار two تنظیم میکند.
$(‘input:checkbox:checked’).val();
مقدار چک باکس انتخاب شده را بر میگرداند .
$(‘input:radio[name=bar]:checked’).val();
مقدار انتخاب شده از دکمه های رادیویی در گروه با نام bar را بر میگرداند.
مثال :
<html>
<head>
<script src=”jquery.js“></script>
<script>
$(document).ready(function(){
$(“input:button”).click(function () {
var text = $(this).val();
$(“input:text”).val(text);
});
})
</script>
</head>
<body>
<div>
<input type=”button“ value=”First“ />
<input type=”button“ value=”Secont“ />
<input type=”button“ value=”third“ />
</div>
<input type=”text“ value=”click a button“ />
</body>
</html>
پس از اجرا با کلیک روی هر دکمه مقدار value آن دکمه ها در تکست باکس نمایش می یابد .
فصل سوم :
jQuery Effects :
افکت ها توابعی هستند که بر روی نمایش عناصر صفحه عملیاتی انجام میدهند .
افکت های موجود : Hide, Show, Toggle, Slide, Fade , Animate
Hide & Show :
توسط دو تابع hide() و show() میتوانید عناصر صفحه را پنهان یا آشکار نمایید :
$(“#btnhide”).click(function(){
$(“p”).hide();
});
$(“#btnshow”).click(function(){
$(“p”).show();
});
در کد فوق هنگامی که روی عنصری در صفحه با آیدی btnhide کلیک شود پاراگرافهای درون صفحه (تگهای p ) پنهای میشوند و با کلیک روی عنصر با آیدی btnshow کلیک شود پاراگرافها نمایش میبابند .
این دو تابع دو پارامتر speed و callback نیز می پذیرند :
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
پارامتر speed میتوانید مقدارهای ‘slow’ , ‘fast’ , ‘normal’ و همچنین مقداری به میلی ثانیه بپذیرد .
پارامتر callback تابعی است که هنگامی که عمل show یا hide به طور کامل انجام شد صدا زده میشود .
$(“button”).click(function(){
$(“p”).hide(1000);
});
در مثال فوق با کلیک روی button پاراگراف p ظرف مدت 1000 میلی ثانیه پنهان میشود .
$(“button”).click(function(){
$(“p”).hide(‘slow’,function(){ alert(‘hide is finished’); } );
});
در مثال فوق با کلیک روی button پاراگرافهای p بصورت آهسته پنهان میشوند و پس از پنهان شدن پیغام ‘hide is finished’ بر روی صفحه نمایش می یابد .
Toggle :
این افکت وضعیت عنصر مربوطه را از hide به show و بلعکس تبدیل میکند . یعنی اگر عنصر پنهان باشد با اجرای این افکت عنصر پیدا میشود و اگر پیدا باشد پنهان میشود .
$(“#line”).click(function(){
$(“#lineinfo”).toggle();
});
در کد فوق با کلیک روی عنصری با آیدی line مشخصات آن عنصر که در عنصر دیگری با آیدی lineinfo قرار دارد نمایش می یابد و با کلیک مجدد پنهان میشود .
این افکت هم همانند دو افکت قبلی دارای دو پارامتر speed و Callback می باشد .
Slide :
$(selector).slideDown(speed,callback)
این دستور selector را با سرعت speed به سمت پایین باز میکند .
$(selector).slideUp(speed,callback)
این دستور selector را با سرعت speed به سمت بالا جمع میکند (hide )
$(selector).slideToggle(speed,callback)
این دستور نیز selector را بین دو وضعیت باز و بسته تعویض مینماید .
پارامتر های این توابع هم مانند افکت های قبلی تنظیم میشوند .
Fade :
این افکت ها نیز برای نمایش و پنهان کردن عنصر استفاده میشود با این تفاوت که نوع پنهان کردن و نمایش دادن عناصر در این دستوران متفاوت است و با تغییر شفافیت )opacity ) انجام میشود.
$(selector).fadeIn(speed,callback)
این تابع عنصر selector را در صفحه نمایان میکند .
$(selector).fadeOut(speed,callback)
این تابع عنصر selector را در صفحه مخفی میکند .
$(selector).fadeTo(speed,opacity,callback)
این تابع پارامتری به عنوان opacity میپذیرد که میزان شفافیت را بین دو عدد 0 و 1 تعیین میکند که عدد 1 یعنی کاملا آشکار و عدد 0 یعنی پنهان و عنصر را بع اندازه عدد شفافیت ، شفاف میکند .
مثلا :
$(“button”).click(function(){
$(“div”).fadeTo(“slow”,0.25);
});
در کد فوق با کلیک روی button عنصر div درون صفحه به آرامی شفاف میشود تا به 25 درصد شفافیت برسد .
Custom Animation :
$(selector).animate({params},[duration],[easing],[callback])
پارامتر params پارامترهایی را میپذیرد که قرار است همزمان با هم بر روی selector اعمال شوند .
مثلا :
animate({width:”70%”,opacity:0.4,marginLeft:”0.6in”,fontSize:”3em”});
تمام پارامتر ها درون {} نوشته میشوند و با کاما ‘,’ از هم جدا میشوند . هر پارامتر با عنوان و سپس “:” و بعد مقدار آن مشخص میشود .
پارامتر duration مانند پارامتر speed در افکت های قبلی عملی میکند که میتواند مقادیر ‘slow’ , ‘fast’ , normal و یا عددی به میلی ثانیه را در بر بگیرد .
<script type=”text/javascript”>
$(document).ready(function(){
$(“#start”).click(function(){
$(“#box”).animate({left:”100px”},”slow”);
$(“#box”).animate({fontSize:”3em”},”slow”);
});
});
</script>
در قطعه کد فوق وقتی روی عنصر با آیدی start کلیک میشود عنصر #box در صفحه اول 100 پیکسل به سمت چپ رفته و سپس نوشته های داخلش به اندازه 3em خواهد شد .
میتوان خطهای 4 و 5 را در یک خط نوشت :
$(“#box”).animate({left:”100px”, fontSize:”3em”},”slow”);
که البته در این حالت هر دو مقدار همزمان با هم به #box اعمال خواهد شد.
نکته : تابع stop() هم برای متوقف کردن افکت در حال اجرا استفاده میشود :
$(selector).stop();
نکته مهم : میتوان توابع را بجای نوشتن در خطهای جداگانه ، پشت سر هم به یک عنصر اعمال کرد مثلا :
$(‘#box’).fadeIn(1000);
$(‘#box’).animate({left:”100px”},’slow’);
$(‘#box’).fadeOut(1000);
بجای کدهای فوق که همه بر روی یک عنصر اعمال میشوند میتوان نوشت :
$(‘#box’).fadeIn(1000).animate({left:”100px”},’slow’).fadeOut(1000);
سوال : چرا تابع Callback باید استفاده شود ؟
گاهی اوقات ما نیاز داریم عملی را دقیقا بعد از اعمال کامل یک افکت اجرا کنیم .
به مثال زیر توجه نمایید :
$(“button”).click(function(){
$(“p”).hide(1000);
alert(“The paragraph is now hidden”);
});
در این مثال ما میخواهید هنگامی که پاراگراف به طور کامل پنهان شد عبارت “the paragraph is now hidden ” نمایش یابد . اما در عمل این اتفاق نمی افتد زیرا در حین انجام عمل hide خط بعدی فرمان صدا زده خواهد شد و این امر باعث تداخل خواهد شد .
اما به این مثال دقت نمایید :
$(“button”).click(function(){
$(“p”).hide(1000,my_alert);
});
function my_alert()
{
alert(“The paragraph is now hidden”);
}
در این مثال از تابع my_alert به عنوان تابع Callback استفاده شده . در این حالت دقیقا بعد از اتمام افکت hide تابع my_alert صدا زده میشود .
مثال : در مثال زیر قصد داریم تعدادی لینک در صفحه قرار دهیم که با رفتن موس روی آنها توضیح مختصر با افکت مناسب نمایش یابد :
<html>
<head>
<script type=”text/javascript“ src=”jquery.js“></script>
<script type=”text/javascript“>
$(document).ready(function(){
$(‘a’).mouseover(function(){
$(this).next(‘div.info’).slideDown(‘slow’);
})
$(‘a’).mouseout(function(){
$(this).next(‘div.info’).slideUp(‘slow’);
});
});
</script>
<style>
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
padding:3px;
background:#EEE;
border:1px solid #000000;
width:200px;
margin:2px;
}
.info {
padding:5px;
background:#FFF;
color:#000;
display:none;
}
</style>
</head>
<body>
<ul>
<li>
<a href=”https://blog.monavarian.ir“ > Blog.Monavarian.ir </a>
<div class=”info“>mohsen monavarian Weblog</div>
</li>
<li>
<a href=”http://share.wanted.ir“ >wanted.ir </a>
<div class=”info“>The First shared TextBoxes in Iran</div>
</li>
<li>
<a href=”http://www.res2ran.com“ >Res2Ran.com </a>
<div class=”info“>Shiraz restuarants And FastFoods Guide , Food instructions</div>
</li>
</ul>
</body>
</html>
همانطور که در کد بالا مشاهده میکنید در قسمت کد jquery دو تابع برای رویدادهای mouseover و mouseout تگهای a (لینکهای صفحه ) نوشته شده که تابع اولی باعث نمایش تگ div.info با افکت slideDown میشود و تابع دومی نیز با افکت slideUp تگ را مخفی می کند .
شما میتوانید به جای slideDown و slideUp از افکت های دیگری که در این فصل بیان شد استفاده نمایید .
نکته : تابع next :
$(selector1).next(selector2);
این تابع به دنبال عناصر انتخابی مطابق با selecotr2 میگردد که پس از عنصر selector1 در صفحه موجود باشد . مثلا در کد بالا دنبال اولین عنصر div با کلاس info بعد از عنصر جاری (که همان تگ a انتخاب شده است ) می گردد .