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

  • فایلهای پی دی اف آموزش متلب Matlab.rar

 

جلسات درس روش تحقیق دکتر شایگان :

 

کد جاوااسکریپت تصویر تصادفی اماکن دیدنی ایران

اینم یک کد جاوااسکریپت که از وبسایت رستوران های ایرانی گرفته شده 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

با سلام

امروز میخوام یک کد جاوااسکریپت بهتون معرفی کنم که از وبسایت رستوران های ایرانی گرفته شده 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 shiraz

قرار است همایش استارتاپ ویکند ( Startup Weekend ) اینبار هشتم آبان ماه در شیراز برگزار شود . این همایش بیشتر شبیه یه تفریح آخر هفته است که البته میتونه برای شرکت کننده ها فراتر از تفریح و به یک کسب و کار بزرگ تبدیل بشه .

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

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

خوشحال میشم شما دوستان رو اونجا زیارت کنم .

برای دیدن اطلاعات بیشتر و ثبت نام میتونید به آدرس زیر مراجعه کنید :

http://shiraz.startupweekend.ir

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

اینم متن کامل آموزش کتابخانه jquery که خودم نوشتم . این آموزش شامل 9 فصل به شرح زیر می باشد :

  • فصل  اول : jquery چیست ؟ دانلود و نصب aptana studio
  • فصل دوم  : ساختار کلی دستورات
  • فصل سوم : افکت ها ی jquery
  • فصل چهارم : jquery و تغییر محتویات تگ های html
  • فصل پنجم : تغییر استایل عناصر در jquery
  • فصل ششم : ایجاکس در jquery
  • فصل هفتم : پیمایش عناصر در jquery
  • فصل هشتم : افزونه ها یا پلاگین ها در jquery ( نصب پلاگین — نوشتن پلاگین )
  • فصل نهم : معرفی چند تابع مفید دیگر
  • پیوست ها : ( selectors , Events , triger Functions  )

لینک دریافت فایل   pdf : آموزش jquery فارسی ( learning_jquery_farsi.pdf )   حجم فایل : 508 کیلو بایت .با نظراتتون در بهبود این کتاب الکترونیکی به بنده یاری برسانید .

آموزش jQuery – فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .

فصل هفتم :

پیمایش عناصر 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“);

در این مثال فرزندهایی از تگهای div انتخاب میکند که دارای کلاس selected باشد بنابر این نتیجه دستور فوق :

Hello
Hello Again

And Again

At One Last Time

 

تابع parent() پدر عناصر انتخابی را بر میگرداند (اولین پدر ) .

$(‘li’).parent().addClass(‘listExpander’);

در این مثال به اولین والد عناصر li در صفحه کلاس listExpander را اعمال میکند .

همانند تابع children() این تابع نیز میتواند مقدار selector را قبول کند :

<div class=”one”>

<div class=”two”>

<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 با کلاس test ، رنگ پیش زمینه زرد به سایر li ها اضافه میشود .

در صورتیکه کد بالا را به شکل زیر تغییر دهیم فقط 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 – فصل ششم : Ajax in jQuery (ایجاکس در جی کوئری )

فصل ششم :

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 برمیگردانند.

  • url : آدرس اسکریپتی که سمت سرور باید اجرا شود
  • Data : داده هایی که به سرور فرستاده میشود : {name:value,name:value,…}
  • Callback : تابعی است که هنگامی که داده ها از سرور به طور کامل بارگزاری شد صدا زده میشود .
  • Type : نوع داده های خروجی از سرور را مشخص میکند و میتواند مقادیر (html,xml,json,jasonp,script,text) باشد

تنها تفاوت این دو تابع در نوع ارسال داده به سرور است که اولی از متد 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 – فصل پنجم : تغییر استایل در جی کوئری

فصل پنجم :

تغییر استایل در جی کوئری :

توسط jquery میتوانید مستقیما استایل یک شی را در صفحه تغییر دهید . برای تغییر استایل چند تابع مهم وجود دارد :

 

  • $(selector).css(name,value)
  • $(selector).css({properties})
  • $(selector).css(name)
  • $(selector).height(value)
  • $(selector).width(value)

توسط تابع 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 شما میتوانید به راحتی محتوای تگ ها و عناصر موجود در صفحه را تغییر نمایید .

برای اینکار چندین تابع در 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 : فصل سوم : افکتهای jquery

فصل سوم :

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 انتخاب شده است ) می گردد .