فریم ورک های جاوا اسکریپت
DESCRIPTION
فریم ورک های جاوا اسکریپت. jquery 1- جی کوئری dojo 2- دوجو Backbase 3- بک بیس gwt 4- گوکل وب تولکیت. jquery. جی کوئری یکی از سریعترین و مختصرترین کتابخانه های جاوااسکریپت میباشد که اداره رویدادها و انیمیشن و عملیات آژاکس برای توسعه سریع وب میباشد. - PowerPoint PPT PresentationTRANSCRIPT
اسکریپت جاوا های ورک فریم
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
Click me
This is a paragraph..
This is another paragraph.
کوئری : جی رویدادهای. کنند می مشخص را فانکشن اجرا چکونکی رویدادها
از عبارتند کوئری جی رویدادهای از :بعضی
Event Method Description
$(document).ready(function) Binds a function to the ready event of a document(when the document is finished loading)
$(selector).click(function) Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function) Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements
کوئری جی : رویدادهایداکیومنت یک از آماده رویداد به را تابع یک میکند ready(function).(document)$.متصل
شده انتخاب المنت از کلیک رویداد به را تابع یک کند می click(function).(selector)$.متصل $(selector).dblclick(function)
$(selector).focus(function)$(selector).mouseover(function
است ردی دات از استفاده کوئری جی فانکشن یک معرفی برای راه ترین .عمومی.ready )(وwindow().load. شوند)( می اجرا اید می باال صفحه وقتی
$(document).ready(function() {// jquery goes here});
ها :افکتالمنت آخرین کند می مخفی که را کوئری جی هاید متد میدهد ()hide.(this)$ نشان
را ها پاراگراف همه میکند مخفی که را کوئری جی هاید متد میدهد ()hide.("p")$. نشاندارند تست کالس که هایی المنت همه میکند مخفی که را کوئری جی هاید متد میدهد .نشان
$(".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">var jq=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 headingThis is a paragraph.This is another paragraph.
Click me
This is a headingClick 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 functions dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget dojo.require("dojo.widget.Button");</script>
را دوجو ویدجت کند اینکلود که میدهد دستور dojo.require("dojo.widget.*").اینرا دوجو ویدجت باتن کند اینکلو که دهد می دستور dojo.require("dojo.widget.Button").این
ال ام تی اچ در را زیر کد<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</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() { var helloButton = 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> <!-- check box --> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.CheckBox"); </script> </head> <body> <h2>Check box</h2> <input id="cb" dojotype="dijit.form.CheckBox" name="developer" checked="checked" value="on" type="checkbox" /> <label for="cb"> Are you a Developer </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:include href="../../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> <!-- You need this to reference your GWT module --> <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