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

فریم ورک های جاوا اسکریپت jquery1- جی کوئری dojo2- دوجو Backbase3- بک بیس gwt4- گوکل وب تولکیت

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

سلکتورهای جی کوئری اجازه می دهند به شما تا المنت های اچ تی ام ال را بوسیله نام و صفت و محتوای المنت انتخاب کنید. جی کوئری از سلکتورهای سی اس اس برای انتخاب المنت های اچ تی ام ال استفاده میکند. مثلا: $("p") selects all <p> elements. $("p.intro") selects all <p> elements with class="intro« $("p#demo") selects all <p> elements with id="demo« سلکتورهای صفت جی کوئری : $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value equal to "#". $("[href!='#']") select all elements with an href attribute NOT equal to "#". $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg". سلکتورهای سی اس اس جی کوئری : مثال:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

This is a heading This is a paragraph. This is another paragraph. Click me

This is a heading This is a paragraph.. This is another paragraph. Click me

رویدادهای جی کوئری : رویدادها چکونکی اجرا فانکشن را مشخص می کنند.بعضی از رویدادهای جی کوئری عبارتند از:

رویدادهای جی کوئری : متصل میکند یک تابع را به رویداد آماده از یک داکیومنت.$(document).ready(function) متصل می کند یک تابع را به رویداد کلیک از المنت انتخاب شده.$(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) $(selector).mouseover(function عمومی ترین راه برای معرفی یک فانکشن جی کوئری استفاده از دات ردی است. .ready() و window().load() وقتی صفحه بالا می اید اجرا می شوند. $(document).ready(function() { // jquery goes here }); افکت ها: نشان میدهد متد هاید جی کوئری را که مخفی می کند آخرین المنت $(this).hide() نشان میدهد متد هاید جی کوئری را که مخفی میکند همه پاراگراف ها را .$("p").hide() نشان میدهد متد هاید جی کوئری را که مخفی میکند همه المنت هایی که کلاس تست دارند. $(".test").hide() نشان میدهد متد هاید جی کوئری را که مخفی میکند همه المنت هایی که آی دی تست دارند. $("#test").hide()

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>

If you click on me, I will disappear. Click me away! Click me too! *

If you click on me, I will disappear. Click me away! *

If you click on me, I will disappear. *

: این تابع ایجاد محو شدگی می کند.fadeout() مثال: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.0); }); }); </script> </head> <body> <div style="background:yellow;width:300px;height:300px"> <button>Click to Fade</button> </div> </body> </html>

Clik to fade

: مخفی کردن قسمتی از متن.Hide explanations : نشان دادن پنل و بستن آن.Slide panel : برای ایجاد انیمیشن استفاده میشود برای مثال برنامه زیر یک مربع ساخته و بعد از کلیک ارتفاع را زیاد میکند بعد عرض را زیاد می کن و بعد ارتفاع را کم می کند و سپس عرض را کم می کند و به حالت اول برمیگردد..jQuery animate() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script>

</head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html> با جی کوئری می توان اچ تی ام ال و سی اس اس را هم دستکاری کرد. تغییر محتوای یک المنت اچتی ام ال و اضافه کردن متوا به یک المنت اچ تی ام ال و و اضافه کردن متوا بعد از یک المنت اچ تی ام ال و تغییر یک ویزگی سی اس اسی المنت اچ تی ام ال و تغییر چند ویزگی سی اس اسی المنت اچ تی ام ال و بدست آوردن صفت از یک المنت جی کوئری از علامت دلار به عنوان شورت کات استفاده میکند و بعضی دیگر از کتابخانه های جاوااسکریپت نیز از دلار برای توابعشان استفاده میکنند . متدی است که ازیک نام رسمی شبیه جی کیو به جای دلار استفاده میکند.مثال:noConflict()

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> varjq=jQuery.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

This is a heading This is a paragraph. This is another paragraph. Click me

This is a heading Click me

) jQuery Callback Functions جملات جاوااسکریپت خط به خط اجرا میشوند اما با انیمیشن ها خط بعدی کد می تواند اجرا شود حتی اگر انیمیشن تمام نشده باشد.برای جلوگیری از این کار باید یک تابع کال بک بسازیم. تابع کال بک بعد از این که انیمیشن یا افکت تمام شد اجرا می شود. $("p").hide(1000,function(){ alert("The paragraph is now hidden");}); این دستور ابتدا عمل هاید را انجام می دهد و بعد پیغام را نشان می دهد.

پایان فصل اول

بخش 2دوجو

دوجویکی از بزرگترین فریم ورک ها برای توسعه آژاکس است ویکی از قوی ترین زبان ها برای ایجاد اینترنت اپلیکیشن می باشد. دوجوقدرتمند وسبک است ووظایف معمولی را سریعتر و آسان تر میسازد. دوجو برای ساخت انیمیشن و سینتکس ساده سی ا س اس ودستکاری دی او ام بکارمی رود. برای دسکتاپ اپلیکیشن ها و موبایل اپلیکیشن ها دوجو کمک میکند با اچ تی ام ال 5 قابلیت هایی ازجمله تاچ اسکرین. مثال : ساختن یک دکمه برای مثال ما می خواهیم ایجاد کنیم یک دکمه هلو ورد . برای ایجاد یک دکمه در دوجو نیاز داریم به یک ویدجت باتن که شامل سه حالت است. :mouseOut, mouseOver and mouseDown <script type="text/javascript"> // Load Dojo's code relating to widget managing functionsdojo.require("dojo.widget.*"); // Load Dojo's code relating to the Button widgetdojo.require("dojo.widget.Button");</script> این دستور میدهد که اینکلود کند ویدجت دوجو را.dojo.require("dojo.widget.*") این دستور می دهد که اینکلو کند باتن ویدجت دوجو را.dojo.require("dojo.widget.Button")

کد زیر را در اچ تی ام ال <buttondojoType="Button"widgetId="helloButton"onClick="helloPressed();">HelloWorld!</button> اتصال یک اونت به ویدجت : dojo.require("dojo.event.*"); این کدشامل می شود قابلیت های رویدادهای دوجو را ولی نه همه ویدجت هارا. <html><head><title>button</title> <script type="text/javascript">dojo.require("dojo.event.*");dojo.require("dojo.widget.*");dojo.require("dojo.widget.Button"); function helloPressed() { alert('Click on the Hello World Button'); } function init() {varhelloButton = dojo.widget.byId('helloButton');dojo.event.connect(helloButton, 'onClick', 'helloPressed') }dojo.addOnLoad(init); </script></head>

<body bgcolor="#FFFFCC"><p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p><button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button><br></body></html> dijit.form.CheckBoxبرای ساختن چک باکس نیاز داریمبه : <html><head><title>checkbox</title><scripttype="text/javascript">dojo.require("dojo.parser");dojo.require("dijit.form.CheckBox");</script></head><body><h2>Checkbox</h2><inputid="cb"dojotype="dijit.form.CheckBox"name="developer" checked="checked"value="on" type="checkbox"/><labelfor="cb">AreyouaDeveloper</label></body></html>

<html>: مثال ساختن یک اسلایدر <head><title>Slider Example 1</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit.form.Slider"); </script></head> <body class="tundra"> <b>Slider:</b> <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider" value="5" minimum="-10" maximum="10" discreteValues="11"intermediateChanges="true"onChange="dojo.byId('horizontalSlider').value = arguments[0];"handleSrc="preciseSliderThumb.png"></div> </body></html> مطالب برگرفته از : دوجو تولکیت و وکیپدیا و روزایندیا

بخش3بک بیس

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

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:xi="http://www.w3.org/2001/XInclude"xmlns:e="http://www.backbase.com/2006/xel"> <head> <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/> <title>Backbase - Welcome</title> <script type="text/javascript" src="../../backbase/4_3_0/engine/boot.js"></script> </head> <body> <script type="application/backbase+xml"> <xi:includehref="../../backbase/4_3_0/bindings/config.xhtml_btl.chameleon.xml" /> <div> <e:handler event="click" type="text/javascript"> alert('Backbase says hello!'); </e:handler> Click me </div> </script> </body></html>

بخش 4گوگل وب تولکیت

گوگل وب تولکیت مجموعه ای از ابزارهای اپن سورس است که به توسعه دهندگان وب اجازه میدهد تا ایجاد کنند وحفظ کنند برنامه های کاربردی جاوا اسکریپت پیچیده را.به غیراز تعداد کمی از کتابخانه های اصلی وبومی همه چیز منبع جاوا است که ساخته میشود روی یک پلت فرم پشتیبانی شده با اینکلود کردن گوگل وب تولکیت سازنده فایل.تاکید کردن گوگل وب تولکیت به استفاده مجدد و راه حل کارا برای چالش های ایجکس و روش های تماس دور و مدیریت تاریخ و نشانه گذلری کردن وبین المللی کردن ومرورگرهی قابل حمل است.با استفاده از گوگل وب تولکیت توسعه دهندگان میتوانند به صورت سریع توسعه بدهند و عیب یابی کنند برنامه های کاربردی ایجکس را.گوگل وب تولکیت مجموعای از ابزارهی جنرال است برای ساختن قابلیت های جاوا اسکریپت سمت کلاینت با کارایی بالا.اجزا اصلی گوگل وب تولکیت عبارتنداز: و JRE emulation libraryو GWT Development Mode وGWT Java-to-JavaScript Compilerو GWT Web UI class libraryبرنامه های زبان جاوا را به جاوااسکریپت ترجمه میکند.1اجازه میدهد به توسعه دهندگان که اجرا کنند برنامه های کاربردی گوگل وب تولکیت2تقلید کتابخانه : جاوا اسکریپت پیاده سازی شده با کلاس های عمومی بکاررفته در در کتابخانه های جاوا.3مجموعه ای از رابط های رسمی و کلاس ها برای ایجاد ویجت (ابزارهای ریز و کوچک مانند تغییر دادن تکست باکس) برای ارجاع به ماژول جی دبل یو تی کد زیر لازم است

<HTML> <HEAD> <TITLE>HTML for WebApp</TITLE>  <META name='gwt:module' content='com.juixe.gwt.WebApp'> <SCRIPT language="javascript" src="gwt.js"> </SCRIPT> <STYLE></STYLE> </HEAD> <BODY> <H1>My WebApp</H1> Any text or HTML goes here. <DIV id="changeOnRollOver"></DIV> </BODY></HTML>

پایان گرد آورنده : حمید فردوسی www.hferdowsi.com

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

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

Presentation Transcript