JavaScript چیست؟

Download Report

Transcript JavaScript چیست؟ 

‫بنام خدا‬
‫مفاهیم جاوا‬
‫ارائه کننده‪:‬رضا پورنقی‬
‫آذر ‪1384‬‬
‫دانشگاه صنعتی شریف – دانشکده مهندسی کامپیوتر‬
‫رئوس اصلی مطالب‬
Java Virtual Machine
Java Applets
JavaBeans
JavaScript
Java Servlet
Java Server Page
Java DataBase Connectivity







‫ماشین مجازی جاوا(‪)JVM‬‬
‫‪Java Application, Applet, API Classes‬‬
‫‪JVM‬‬
‫برای‬
‫‪Mac OS‬‬
‫‪JVM‬‬
‫برای ‪Solaris‬‬
‫‪JVM‬‬
‫برای ‪Windows‬‬
‫بار کننده کالس‬
‫بار کننده کالس‬
‫بار کننده کالس‬
‫بار کننده کالس‬
‫مفسر جاوا‬
‫مفسر جاوا‬
‫مفسر جاوا‬
‫مفسر جاوا‬
‫کد قابل اجرا برای‬
‫‪Linux‬‬
‫کد قابل اجرا برای‬
‫‪Mac OS‬‬
‫کد قابل اجرا برای‬
‫‪Solaris‬‬
‫کد قابل اجرا برای‬
‫‪Windows‬‬
‫‪JVM‬‬
‫برای ‪Linux‬‬
‫‪Linux‬‬
‫‪Mac OS‬‬
‫‪Solaris‬‬
‫‪Windows XP‬‬
‫سلسله مراتب ‪JApplet‬‬
Applet ‫چرخه زندگی‬
init()
)Initialize( ‫مقدار دهی اولیه‬
start()
)start( ‫شروع‬
stop()
)stop( ‫توقف‬
destroy()
)cleanup( ‫پاکسازی‬
‫مثال از بدنه ‪Applet‬‬
<applet> ‫تگ‬
<BODY>
...
<APPLET CODE=“Sample.class" WIDTH=150 HEIGHT=150>
</APPLET>
…
</BODY>
• CODEBASE=“example/”
• CODEBASE = “http://ce.sharif.edu/~r_pournaghi”
‫آدرس دهی نسبی‬
‫آدرس دهی مطلق‬
)...‫< (ادامه‬applet> ‫تگ‬
:html ‫بدنه فایل‬
<APPLET CODE=“Sample.class" WIDTH=150 HEIGHT=150>
<PARAM NAME=“xvalue” VALUE = “100”>
<PARAM NAME=“yvalue” VALUE = “100”>
</APPLET>
:applet ‫بدنه‬
…
x = Integer.parsInt)getParameter)“xvalue”((; //instead of x = 100;
Y = Integer.parsInt)getParameter)“yvalue”((; //instead of y = 100;
…
<applet> ‫ در بدنه تگ‬ARCHIVE ‫ و‬ALT•
‫محدودیت های ‪Applet‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫خواندن از و نوشتن در فایل در رایانه کاربر‪.‬‬
‫برقراری ارتباط با سایر رایانه ها‪.‬‬
‫اجرای برنامه ای در رایانه کاربر‪.‬‬
‫دسترسی به برخی صفت های رایانه( ‪system‬‬
‫‪)properties‬‬
‫بارگذاری کتابخانه به جز کتابخانه های موجود در *‪java.‬‬
‫مثال از اجرای ‪Applet‬‬
‫آشنایی با ‪JavaBeans‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫مولفه های(‪ )components‬نرم افزاری تحت زبان ‪java‬‬
‫قابل استفاده مجدد‪.‬‬
‫به صورت گرافیکی توسط ‪ builder tools‬قابل دستکاری‬
‫آشنایی با ‪JavaBeans‬‬
‫(ادامه)‬
‫جعبه ابزار(‪)Toolbox‬‬
‫لیست صفت ها(‪)properties‬‬
‫آشنایی با ‪JavaBeans‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫(ادامه)‬
‫کالس ها جاوایی هستند که دارای صفت (‪ )property‬می‬
‫باشند و از طریق رخدادها با سایر ‪ bean‬ها ارتباط‬
‫برقرار می کنند‪.‬‬
‫‪ java.awt.Canvas‬پدر تمامی ‪ bean‬هایی است که‬
‫دارای واسط گرافیکی می باشند‪.‬‬
‫‪ Serializable interface‬را باید پیاده سازی‬
‫(‪ )implement‬کنند‬
‫یک ‪ bean‬ساده‬
‫نمایش مثال قبل در ‪BeanBox‬‬
JavaBeans ‫مفاهیم اصلی در‬
Introspection
)‫(ماندگاری‬Persistence
Customization
)‫(متدها‬Methods
)‫(صفت ها‬Properties
)‫(رخدادها‬Events






‫‪Introspection‬‬
‫امکان نمایش گرافیکی ‪ bean‬و تغییر آن را در زمان‬
‫طراحی در ‪ builder tool‬فراهم می کند‪.‬‬
‫‪‬‬
‫‪‬‬
‫اجرای دستورالعمل های خاص(‪ )design patterns‬در‬
‫هنگام ایجاد یک ‪bean‬‬
‫در اختیار قراردادن اطالعات صفت ها‪ ،‬رخدادها‪ ،‬متدها از‬
‫طریق ایجاد کالس ‪:Bean Information‬‬
‫این کالس باید ‪ BeanInfo‬را که یک ‪ interface‬است پیاده سازی کند‪ .‬کالس‬
‫‪ BeanInfo‬لیست امکانات ‪ bean‬را به صورت آشکار در اختیار‬
‫‪ builder tool‬قرار می دهد‪.‬‬
‫‪(Persistence‬ماندگاری)‬
‫‪ ‬به ‪bean‬ها امکان ذخیره و بازیابی وضعیت‬
‫(‪ )state‬خود را می دهد‪.‬‬
‫‪ ‬با استفاده از ‪Java Object Serialization‬‬
‫‪ ‬پیاده سازی کالس ‪( Serializable‬که ‪interface‬‬
‫است)‬
‫(در ‪ ،object serialization‬تمامی اطالعات یک شی با فرمت‬
‫خاصی در فایل ذخیره می شود و با بازخوانی آن فایل شی‬
‫دوباره ساخته می شود‪).‬‬
Customization
property editor
:‫) متدهای‬overriding(‫با بازنویسی‬
paintValue)…(
getCustomEditor()
supportsCustomEditor()



PropertyManager ‫در کالس‬
‫‪(Methods‬متدها)‬
‫‪‬‬
‫‪‬‬
‫بدون تفاوت با متدهای معمول جاوا‬
‫قابل صدا کردن از طریق سایر ‪ bean‬ها یا سایر کالسهای‬
‫فاقد ساختار ‪bean‬‬
‫‪(Properties‬صفت ها)‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫کنترل کننده رفتار و ظاهر ‪bean‬ها‬
‫همان متغیرهای معمول که توسط ‪ builder tool‬قابل شناسایی هستند‬
‫از نوع متغیرهای خصوصی(‪)private‬‬
‫قابل دسترسی از طریق متدهای ‪ getter‬و ‪setter‬‬
‫نام متدها‪:‬‬
‫}…{()>‪public <returntype> get<Propertyname‬‬
‫}…{(‪public void set<Propertyname> )parameter‬‬
)‫(ادامه‬
)‫(صفت ها‬Properties
‫‪(Events‬رخدادها)‬
‫‪‬‬
‫‪‬‬
‫امکان برقراری ارتباط بین ‪Bean‬ها را فراهم می کند‪.‬‬
‫مانند متدهای معمول جاوا هستند ولی طبق الگوی خاصی‬
‫تعریف می شوند‪.‬‬
‫;)‪public void addTYPE(TYPE listener‬‬
‫;)‪public void removeTYPE(TYPE listener‬‬
‫به جای کلمه ‪ ،TYPE‬نام کالسی که مربوط به آن رخداد‬
‫است قرار داده میشود‪:‬‬
‫‪MouseListener  addMouseListener‬‬
‫‪ActionListener  addActionListener‬‬
‫‪(Events‬رخدادها)‬
‫(ادامه)‬
)‫(ادامه‬
)‫(رخدادها‬Events
:BeanBox ‫در‬
Edit
Events
action
actionPerformed
)‫(صفت ها‬Properties
Simple properties 
Bound properties 
Constrained properties 
Indexed properties 
‫‪Bound properties‬‬
‫‪‬‬
‫به یک ‪ bean‬این امکان را می دهد که سایر ‪bean‬ها را از تغییر‬
‫در مقدار یک صفت خود باخبر کند‬
)‫(ادامه‬
Bound properties
‫‪Constrained properties‬‬
‫‪‬‬
‫‪‬‬
‫مانند صفت های ‪bound‬‬
‫‪Bean‬ی که تغییر در صفت را دریافت می کند توانایی رد کردن‬
‫تغییر را دارد‬
Indexed properties
‫امکان دسترسی به مجموعه ای از مقادیر صفت را ممکن‬
.‫می کند‬
:‫فرم کلی‬
:‫دسترسی به تمامی مقادیر‬
public <PropertyType>[] get<PropertyName>();
public void set<PropertyName>(<PropertyType>[] value);
:‫دسترسی به مقادیر منحصربفرد‬
public <PropertyType> get<PropertyName>(int index);
public void set<PropertyName>(int index, <PropertyType> value);


)‫(مثال‬
Indexed properties
)‫(ادامه مثال‬
Indexed properties
‫قابل ایجاد از طریق‬
Customization
BeanBox ‫کار با‬
‫کار با ‪BeanBox‬‬
‫(ادامه)‬
‫کار با ‪BeanBox‬‬
‫(ادامه)‬
‫کار با ‪BeanBox‬‬
‫(ادامه)‬
‫آشنایی با ‪JavaScript‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫زبانی شی گرا ساخته شرکت ‪Netscape‬‬
‫کد حاصل تفسیر می شود نه کامپایل(‪)script‬‬
‫انواع ‪:JavaScript‬‬
‫‪ ‬سمت کاربر(‪)client-side‬‬
‫‪ ‬سمت خادم(‪)server-side‬‬
‫‪‬‬
‫مورد استفاده‪:‬‬
‫برای ساخت صفحات پویا(‪)dynamic‬‬
‫آشنایی با ‪JavaScript‬‬
‫(ادامه)‬
‫آشنایی با ‪JavaScript‬‬
‫(ادامه)‬
‫آشنایی با ‪JavaScript‬‬
‫(ادامه)‬
‫مقایسه ‪ JavaScript‬با ‪Java‬‬
‫‪JavaApplet‬‬
‫‪JavaScript‬‬
‫کد کامپایل شده و اجرا می شود‬
‫کد تفسیر(‪ )interpret‬می شود‬
‫مبتنی بر کالس(اشیاء نمونه هایی از کالس‬
‫ها هستند)‬
‫مبتنی بر شیء(مفهوم کالس وجود ندارد)‬
‫وراثت از طریق سلسله مراتب کالس ها‬
‫وراثت با استفاده از مفهوم نمونه‬
‫سازی(‪)prototype‬‬
‫متدها و صفت ها نمی توانند به صورت پویا‬
‫به کالس ها و اشیاء افزوده شوند‬
‫صفت ها و متدها به صورت پویا به شیء‬
‫اضافه می شود‬
‫کالس های ‪ Applet‬جدا از صفحات‬
‫‪ HTML‬می باشد‬
‫کد با تگ های ‪ HTML‬آمیخته هستند‬
‫نوع متغیرها باید اعالم شوند‬
‫نوع متغیرها اعالم نمی شوند‬
‫محدود در استفاده از منابع رایانه کاربر‬
‫محدود در استفاده از منابع رایانه کاربر‬
‫کار کردن با اشیاء در ‪JS‬‬
‫‪ ‬صفت های(‪ )properties‬شی‬
‫‪ ‬ایجاد شی جدید‬
‫‪ ‬افزودن صفت‬
‫‪ ‬افزودن متد‬
‫) شی‬properties(‫صفت های‬
objectName.propertyName
:‫مثال‬
myCar[make]="Ford”
myCar.make="Ford”
myCar[model]="Mustang
myCar.model="Mustang”
”
myCar[year]=1969
myCar.year=1969
‫ایجاد شی جدید‬
:Object Initializers ‫ استفاده از‬
objectName = {property1:value1,..., propertyN:valueN}
myCar = {make=“Ford”, model=“Mustang”, year=1996}
:)constructor(‫ استفاده از تابع سازنده‬
function Car(make, model, year) {
this.make = make
this.model = model
this.year = year
}
…
mycar = new Car("Eagle", "Talon TSi", 1993)
‫افزودن صفت‬
‫‪ ‬افزودن صفت به تمام‬
‫نمونه‪ -‬های هم نوع‪:‬‬
‫‪car.prototype.color = null‬‬
‫”‪car1.color = "black‬‬
‫‪ ‬افزودن صفت به یک‬
‫نمونه خاص‪:‬‬
‫”‪car1.color = "black‬‬
‫افزودن متد‬
:‫فرم کلی‬
object.methodname = function_name
object.methodname(params)
:‫مثال‬
function displayCar(){
print)“A beautiful “+this.year+” “+this.make+” “+this.model(;
}
…
function car(make, model, year) {
this.make = make; this.model = model; this.year = year;
this.displayCar = displayCar
}
…
car1.displayCar();
‫اشیاء از پیش تعریف شده‬

Array Object )sort, reverse, …(
Date Object )get, set, …(
Math Object )floor, abs, round, …(
String Object )charAt, substr, concat, …(

…



web ‫ در صفحات‬JS ‫قرار دادن‬
‫قرار دادن کد در بدنه صفحه‬

<SCRIPT LANGUAGE = "javascript1.2">
…
</SCRIPT>
)‫(مناسب برای به اشتراک گذاری کد‬.js
‫استفاده از فایل های‬

<SCRIPT SRC="common.js">
</SCRIPT>
‫ ها‬attribute ‫ به عنوان مقادیر‬JS
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
<H4>&{myTitle};</H4>

JS ‫نحوه پاسخ گویی به یک رخداد در‬
:‫تعریف کلی‬

<TAG eventHandler="JavaScript Code">
:‫مثال‬
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!”
onClick="window.open('mydoc.html', 'newWin')">

‫سلسله مراتب اشیاء در ‪JS‬‬
‫نمونه‪ :‬صفت ها و متدهای ‪From‬‬
‫صفت‬
‫توصیف‬
‫‪action‬‬
‫مقدار ‪ ACTION‬در تگ ‪ FORM‬را برمی گرداند‬
‫‪elements‬‬
‫آرایه ای که تمامی المان های ‪ FROM‬را برمی گرداند‬
‫‪encoding‬‬
‫مقدار ‪ ENCTYPE‬در تگ ‪ FORM‬را برمی گرداند‬
‫‪length‬‬
‫تعداد المان های موجود در ‪ FROM‬را برمی گرداند‬
‫‪method‬‬
‫مقدار ‪ METHOD‬در تگ ‪ FORM‬را برمی گرداند‬
‫‪name‬‬
‫مقدار ‪ NAME‬در تگ ‪ FORM‬را برمی گرداند‬
‫‪target‬‬
‫مقدار ‪ TARGET‬در تگ ‪ FORM‬را برمی گرداند‬
‫متد‬
‫توصیف‬
‫‪handleEvent‬‬
‫متدی که پاسخگوی وقوع رخداد خاصی است را صدا می کند‬
‫‪reset‬‬
‫کلیک ماوس بر دکمه ‪ reset‬را شبیه سازی می کند‬
‫‪submit‬‬
‫کلیک ماوس بر دکمه ‪ submit‬را شبیه سازی می کند‬
‫مثال از کار با ‪JavaScript‬‬
‫مثال از کار با ‪JavaScript‬‬
‫‪Java Servlet‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫جایگزین ‪CGI‬‬
‫برای ایجاد صفحات پویا‬
‫واسطی بین درخواست کاربر و کاربرد یا پایگاه داده سمت‬
‫کارگزار‬
‫کالس جاوا که ‪ HttpServlet‬را پیاده سازی می کند‪.‬‬
‫وظیفه ‪Servlet‬‬
‫‪‬‬
‫خواندن داده های ارسال شده از طرف‬
‫کاربر(معموال موجود در‬
‫‪)from‬‬
‫‪‬‬
‫دریافت سایر اطالعات موجود در درخواست‬
‫‪(HTTP‬مثل‬
‫قابلیت های مرورگر‪ cookies ،‬و ‪)...‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫نتیجه(از طریق اتصال با ‪ ،DB‬فراخوانی یک کاربرد عتیقه و‪)...‬‬
‫تولید‬
‫قرار دادن نتیجه در قالب سند ‪HTML‬‬
‫تعیین پارامترهای پاسخ‪(HTTP‬مثل ‪ set‬کردن ‪)cookies‬‬
‫ارسال سند به سمت کاربر‬
‫مزایای ‪ Servlet‬نسبت به ‪CGI‬‬
‫‪‬‬
‫کارا(‪)efficient‬‬
‫هر درخواست ‪ CGI‬یک پردازه می سازد ولی هر درخواست ‪ Servlet‬یک‬
‫بند(‪ )thread‬ایجاد می کند‪.‬‬
‫‪‬‬
‫راحتی(‪)convenient‬‬
‫‪ Servlet‬امکان تجزیه(‪ )parse‬داده ای ‪ HTTP‬را به صورت خودکار‬
‫تامین می کند‪.‬‬
‫‪‬‬
‫قدرتمند(‪)powerful‬‬
‫‪ Servlet‬امکان نگهداری داده های درخواست ها را فراهم می کند لذا امکان‬
‫مدیریت ‪ session‬را آسان تر می کند‪.‬‬
‫‪‬‬
‫قابلیت حمل(‪)portable‬‬
‫چرخه عمر ‪Servlet‬‬
‫قرار گرفتن در حافظه‬
‫حالت ایده آل(‪)ideal‬‬
‫فراخوانی از سمت کارگزار‬
‫اجرا برای تولید نتیجه‬
‫خروج از حافظه‬
Servlet ‫فراخوانی‬
Server
JServ Module
Apache’s
Web
Server via
JServ
Web page
Port 80
client
HTML controls
image
System Resources
applet
client
HttpServlet ‫متدهای‬




doGet(HttpServletRequest request,
HttpServletResponse response)
void doPost(HttpServletRequest request,
HttpServletResponse response)
void doPut(HttpServletRequest request,
HttpServletResponse response)
void doDelete(HttpServletRequest request,
HttpServletResponse response)
void
Servlet ‫مثال از‬
‫نتیجه اجرای مثال ‪Servlet‬‬
‫)‪Java Server Page (JSP‬‬
‫‪‬‬
‫امکان ایجاد صفحات پویا را با قراردادن کد ‪ JSP‬در بدنه‬
‫سند ‪ HTTP‬فراهم میکند‪.‬‬
‫‪JSP‬‬
‫=‬
‫>‪<HTML‬‬
‫‪+‬‬
‫‪Java‬‬
‫مزایای ‪ JSP‬نسبت به ‪:Servlet‬‬
‫‪ ‬امکان جداسازی طراحی صفحات ‪ web‬از محتوای پویا‬
‫‪ ‬نیاز به استفاده از (…)‪ out.println‬برای تولید ‪HTML‬‬
‫ندارد‪.‬‬
‫‪ ‬نیاز کمتری به آشنایی با زبان جاوا دارد‪.‬‬
JSP‫تگ های اصلی‬
Scriplet
Expression
Declaration



Scriplet ‫تگ‬
.‫ فراخوانی می شود اجرا می گردد‬JSP ‫هر بار که‬
<html>
<body>
<% for (int i = 0; i < 2; i++) { %>
<p>Hello World!</p>
<% } %>
</body>
</html>
<html>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
Expression ‫تگ‬
‫ مقدارش محاسبه میشود‬،‫ فراخوانی می شود‬JSP ‫هر بار که‬
<html>
<body>
<p><%= Integer.toString( 5 * 5 ) %></p>
</body>
</html>
<html>
<body>
<p>25</p>
</body>
</html>
Declaration ‫تگ‬
JSP ‫) جاوا در یک سند‬declarations( ‫برای قرار دادن اعالنات‬
.‫بکار می رود‬
<html>
<body>
<%! public boolean isPositive(int x)
{
if (x < 0) {
return false;
}
else {
return true;
}
} %>
</body>
</html>
‫‪Java DataBase Connectivity‬‬
‫)‪(JDBC‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫واسطی بین برنامه جاوا و پایگاه داده ‪SQL‬‬
‫یک برنامه جاوا از طریق ‪ JDBC‬یک ‪SQL‬‬
‫‪ statement‬را به پایگاه داده ارسال می کند و نتیجه را‬
‫دریافت می نماید‪.‬‬
‫هر ‪ driver‬پایگاه داده باید کالس ‪ Driver‬جاوا را پیاده‬
‫سازی کند‪.‬‬
‫ساختار معماری ‪JDBC‬‬
‫آمادگی برای کار با ‪JDBC‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫نصب پایگاه داده‬
‫دریافت ‪ driver‬مربوط به پایگاه داده نصب شده‬
‫افزودن مسیر ذخیره بسته(‪ )jar file‬پایگاه داده در ‪clathpath‬‬
‫اتصال به پایگاه داده‬
Class.forName(sun.jdbc.odbc.JdbcOdbcDriver);
Connection con = DriverManager.getConnection(url,usr,psw);
URL:
jdbc:db2://machine:6789/sample, jdbc:mysql://localhost:3306/schedule
Statement stm =
con.createStatement(resultSetType, resultSetConcurrency);
resultSetType:
•TYPE_FORWARD_ONLY
•TYPE_SCROLL_INSENSITIVE
•TYPE_SCROLL_SENSITIVE
resultSetConcurrency:
•CONCUR_READ_ONLY
•CONCUR_UPDATABLE
‫کار با پایگاه داده‬



int executeUpdate(String query)
ResultSet executeQuery(String query)
boolean execute(String query)
ReaultSet ‫دریافت نتایج از طریق‬




Array getArray(String colName) ;
Date getDate(String columnName);
int getRow();
boolean relative(int rows);
‫منابع‬








Netscape communication Corp. “Client-Side JavaScript
Guide, version 1.3”
Netscape communication Corp. “Client-Side JavaScript
Reference version 1.3”
Netscape communication Corp. “Server-Side JavaScript
Guide 1.2”
Sun Microsystems. “Java Tutorial, A practical guide for
programmers”. 2004.
Beth Smith, “JavaBeans” y. 2000
Sun Microsystems. “Overview of Servlets and Java Server
Pages”. Prentice Hall
Nelson Young. “Applets & Servlets”. University of Alberta,
2002
Julia Chen. “Introduction to JDBC”. 2005
‫پیوست ها‬
‫زبان های مبتنی بر کالس و مبتنی بر شی‬
‫زبان های مبتنی بر کالس و مبتنی بر شی‬
‫(ادامه)‬
‫زبان های مبتنی بر کالس و مبتنی بر شی‬
‫(ادامه)‬
‫رخدادها در ‪JS‬‬
‫رخدادها در ‪JS‬‬
‫(ادامه)‬
‫رخدادها در ‪JS‬‬
‫(ادامه)‬