فریم ورک های جاوا اسکریپت -1 جی کوئری jquery -2 دوجو dojo -3 بک بیس Backbase -4 گوکل وب تولکیت gwt jquery جی کوئری یکی از.

Transcript فریم ورک های جاوا اسکریپت -1 جی کوئری jquery -2 دوجو dojo -3 بک بیس Backbase -4 گوکل وب تولکیت gwt jquery جی کوئری یکی از.

‫فریم ورک های جاوا اسکریپت‬
‫‪ -1‬جی کوئری ‪jquery‬‬
‫‪ -2‬دوجو ‪dojo‬‬
‫‪ -3‬بک بیس ‪Backbase‬‬
‫‪ -4‬گوکل وب تولکیت ‪gwt‬‬
‫‪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
: ‫رویدادهای جی کوئری‬
.‫رویدادها چکونکی اجرا فانکشن را مشخص می کنند‬
:‫بعضی از رویدادهای جی کوئری عبارتند از‬
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
‫رویدادهای جی کوئری ‪:‬‬
‫)‪ $(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">
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 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 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>

<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‬‬
‫گوگل وب تولکیت‬
‫گوگل وب تولکیت مجموعه ای از ابزارهای اپن سورس است که به توسعه دهندگان وب اجازه میدهد تا ایجاد کنند وحفظ‬
‫کنند برنامه های کاربردی جاوا اسکریپت پیچیده را‪.‬‬
‫به غیراز تعداد کمی از کتابخانه های اصلی وبومی همه چیز منبع جاوا است که ساخته میشود روی یک پلت فرم پشتیبانی شده‬
‫با اینکلود کردن گوگل وب تولکیت سازنده فایل‪.‬‬
‫تاکید کردن گوگل وب تولکیت به استفاده مجدد و راه حل کارا برای چالش های ایجکس و روش های تماس دور و مدیریت‬
‫تاریخ و نشانه گذلری کردن وبین المللی کردن ومرورگرهی قابل حمل است‪.‬‬
‫با استفاده از گوگل وب تولکیت توسعه دهندگان میتوانند به صورت سریع توسعه بدهند و عیب یابی کنند برنامه های کاربردی‬
‫ایجکس را‪.‬‬
‫گوگل وب تولکیت مجموعای از ابزارهی جنرال است برای ساختن قابلیت های جاوا اسکریپت سمت کالینت با کارایی باال‪.‬‬
‫اجزا اصلی گوگل وب تولکیت عبارتنداز‪:‬‬
‫و ‪GWT Java-to-JavaScript Compiler‬و ‪GWT Development Mode‬و ‪ JRE emulation library‬و‬
‫‪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‬‬
‫پایان‬

فریم ورک های جاوا اسکریپت -1 جی کوئری jquery -2 دوجو dojo -3 بک بیس Backbase -4 گوکل وب تولکیت gwt jquery جی کوئری یکی از.

Transcript فریم ورک های جاوا اسکریپت -1 جی کوئری jquery -2 دوجو dojo -3 بک بیس Backbase -4 گوکل وب تولکیت gwt jquery جی کوئری یکی از.

Directory