Other Java Related Technologies

Other Java Related Technologies

ارتباط Java و JavaScript

مقايسه جاوا و جاوااسکريپت • JavaScript براي انجام کارهاي ساده خوب است. • GUI آساني دارد و سريع آماده مي شود. انواع داده اي آن انعطاف پذير هستند. • براحتي با HTML ترکيب مي شود. • پشتيباني کتابخانه اي زيادي ندارد و از ساختمان داده هاي محدودي استفاده ميکند. • براي پروژه هاي بزرگ و چند فايلي و OO مناسب نيست. • جاوا براي انجام کارهاي پيچيده و مخصوصا گرافيکي مناسب است. • کامل است – توابع وکلاسهاي کتابخانه اي زيادي دارد. • براي انجام پروژه هاي بزرگ مناسب است. • GUI آن مشکلتر است. • ترکيب جاوا و HTML واضح نيست. • ايده آل: استفاده از تواناييهاي هر دو زبان • استفاده از اپلتهاي جاوا در هنگام نياز ( مثل گرافيک) • ايجاد ارتباط بين کد جاوا و JavaScript

Calling Java Routines from JavaScript • Netscape و اپرا اجازه دسترسي مستقيم به روتينهاي جاوا را مي دهند. • يايد اسم کامل روتين را مشخص کنيد. • ممکن است IE از اين خاصيت پشتيباني نکند. <html>   <head> <title>Java+JavaScript Demo</title> </head> <body> <script type=“text/javascript"> document.write(java.lang.Math.random()); </script> </body> </html> view page

Calling Applet Methods • معمولا ما مي خواهيم که يک اپلت را به صفحه الحاق کنيم و از طريق رخدادهاي HTML و JavaScript آن را کنترل کنيم. • مثال: • مي خواهيم تعدادي نقطه داخل يک مربع رسم کنيم.

MontePI initيک توليد کننده اعداد تصادفي ايجاد مي کند و اندازه اپلت را مي خواند. drawDotsنقاط را داخل صفحه رسم می کند و در بافر می ریزد. paint با استفاده از بافر صفحه را دوباره رسم می کند. import java.awt.*; import java.applet.*; import java.util.Random; public class Monte6 extends Applet { private static Random randy; private int SIZE; private Image offScreenImage; private Graphics offScreenGraphics; private int randomInRange(int low, int high) {…} private double distance(int x1, int y1, int x2, int y2) {…} public void init() { randy = new Random(); Dimension dim = getSize(); SIZE = dim.width; drawCircle(); } public void drawCircle() { // DRAWS CIRCLE ON BOTH getGraphics() AND // offScreenGraphics } public void drawDots(int numPoints) { // DRAWS numPoints RANDOM DOTS ON BOTH getGraphics() // AND offScreenGraphics } public void paint(Graphics g) { g.drawImage(offScreenImage, 0, 0, null); } }

MontePI (cont.) <html> <!–- COMP519 Monte6.html 22.10.2007 --> <head> <title>Monte Carlo Darts Page</title> <script type=“text/css”> body { background-color: gray; } </script> </head> <body> <div style="text-align: center;"> <applet code="Monte6.class" name="MonteApplet" height=“300” width=“300”> You must use a Java-enabled browser to view this applet. </applet> <p><br /><br /></p> <form name="MonteForm"> <input type="button" value="Generate points" onclick="document.MonteApplet.drawDots(500);“ /> </form> </div> </body> </html> در اینجا دکمه های HTML با استفاده از JavaScript روتینهای Java را شدا می زنند. view page

Example (cont.) <html> <!–- COM519 Monte6a.html 22.10.2007 --> <head> <title>Monte Carlo Darts Page</title> <style type=“text/css”> body { background-color: gray; } </style> </head> <body style=“background-color: gray;"> <div style="text-align: center;"> <applet code="Monte6.class" name="MonteApplet" height=“300” width=“300”> You must use a Java-enabled browser to view this applet. </applet> <p><br /></p> <form name="MonteForm"> <input type="button" value="Generate" onClick="numDots = parseFloat(document.MonteForm.numPoints.value); document.MonteApplet.drawDots(numDots);“ /><input type="text" name="numPoints"size=“6” value=“500”/> points <p><br /></p> <input type="button" value="Clear the screen" onclick="document.MonteApplet.drawCircle();“ /> </form> </div> </body> </html> یک واسط بهتر: می توان به کاربر اجازه داد که تعداد نقاط را مشخص کند. view page

HTML DOM

HTML DOM • HTML DOM مجموعه ای استاندارد از اشیاء را برای HTML تعریف می کند و یک راه استاندارد برای دسترسی و دستکاری سندهای HTML است. • DOM به تمام عناصر HTML به همراه متن داخل آنها و خاصیت های آنها دسترسی دارد. • می توان محتوی را حذف کرد یا تغییر داد و عناصر جدیدی به سند اضافه کرد. • می توان از DOM به همراه هر زبان برنامه نویسی مثل Java، JavaScript و VBScript استفاده کرد.

اشیاءHTML DOM • Anchor object • Document object • Event object • Form and Form Input object • Frame, Frameset, and IFrame objects • Image object • Location object • Navigator object • Option and Select objects • Screen object • Table, TableHeader, TableRow, TableData objects • Window object

Document Object: Write text totheoutput <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

Document Object: UsegetElementById() <html> <head> <script type="text/javascript"> function getElement() { var x=document.getElementById("myHeader") alert("I am a " + x.tagName + " element") } </script> </head> <body> <h1 id="myHeader" onclick="getElement()”>Click to see what element I am!</h1> </body> </html> view page

Document Object: UsegetElementsByName() <html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput") alert(x.length + " elements!") } </script> </head> <body> <input name="myInput" type="text" size="20"><br /> <input name="myInput" type="text" size="20"><br /> <input name="myInput" type="text" size="20"><br /> <br /> <input type="button" onclick="getElements()" value="How many elements named 'myInput'?"> </body> </html> view page

Document Object: Return theinnerHTMLof the first anchor in a document <html> <body> <a name="first">First anchor</a><br /> <a name="second">Second anchor</a><br /> <a name="third">Third anchor</a><br /> <br /> InnerHTML of the first anchor in this document: <script type="text/javascript"> document.write(document.anchors[0].innerHTML) </script> </body> </html> view page

Document Object: Access anitem in acollection <html> <body> <form id="Form1" name="Form1"> Your name: <input type="text"> </form> <form id="Form2" name="Form2"> Your car: <input type="text"> </form> <p>To access an item in a collection you can either use the number or the name of the item:</p> <script type="text/javascript"> document.write("<p>The first form's name is: " + document.forms[0].name + "</p>") document.write("<p>The first form's name is: " + document.getElementById("Form1").name+ "</p>") </script> </body> </html> view page

Event Object: What are thecoordinates of the cursor? <html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X coords: " + x + ", Y coords: " + y) } </script> </head> <body onmousedown="show_coords(event)"> <p>Click in the document. An alert box will alert the x and y coordinates of thecursor.</p> </body> </html> view page

Event Object: What is theunicodeof the key pressed? <html> <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p><b>Note:</b> Make sure the right frame has focus when trying this example!</p> <p>Press a key on your keyboard. An alert box will alert the unicode of the keypressed.</p> </body> </html> view page

Event Object: Which eventtypeoccurred? <html> <head> <script type="text/javascript"> function whichType(event) { alert(event.type) } </script> </head> <body onmousedown="whichType(event)"> <p>Click on the document. An alert box will alert which type of event occurred.</p> </body> </html> view page

JSON

JSON example • “JSON” stands for “JavaScript Object Notation” • Despite the name, JSON is a (mostly) language-independent way of specifying objects as name-value pairs • Example (http://secretgeek.net/json_3mins.asp): • {"skillz": { "web":[ { "name": "html", "years": 5 }, { "name": "css", "years": 3 }] "database":[ { "name": "sql", "years": 7 }]}}

JSON syntax, I • An object is an unordered set of name/value pairs • The pairs are enclosed within braces, { } • There is a colon between the name and the value • Pairs are separated by commas • Example: { "name": "html", "years": 5 } • An array is an ordered collection of values • The values are enclosed within brackets, [ ] • Values are separated by commas • Example: [ "html", ”xml", "css" ]

JSON syntax, I

JSON syntax, II • A value can be: A string, a number, true, false, null, an object, or an array • Values can be nested • Strings are enclosed in double quotes, and can contain the usual assortment of escaped characters • Numbers have the usual C/C++/Java syntax, including exponential (E) notation • All numbers are decimal--no octal or hexadecimal • Whitespace can be used between any pair of tokens

JSON syntax, II

eval • The JavaScript eval(string) method compiles and executes the given string • The string can be an expression, a statement, or a sequence of statements • Expressions can include variables and object properties • eval returns the value of the last expression evaluated • When applied to JSON, eval returns the described object

JSON and—methods? • In addition to instance variables, objects typically have methods • There is nothing in the JSON specification about methods • However, a method can be represented as a string, and (when received by the client) evaluated with eval • Obviously, this breaks language-independence

Comparison of JSON and XML • Similarities: • Both are human readable • Both have very simple syntax • Both are hierarchical • Both are language independent • Both can be used by Ajax • Differences: • Syntax is different • JSON is less verbose • JSON can be parsed by JavaScript’s eval method • JSON includes arrays • Names in JSON must not be JavaScript reserved words • XML can be validated • JavaScript is not typically used on the server side

Others

Prototype • JavaScript library written by Sam Stephenson • prototype.js • http://prototype.conio.net • Supports utility JavaScript functions including AJAX utility function - Ajax.Request • $() same as document.getElementById('someid'); • $F() - working with Forms • $R()

Dojo Toolkit • Open Source DHTML toolkit written in JavaScript • It is a set of JavaScript libraries • Aims to solve some long-standing historical problems with DHTML • Browser incompatibility • Allows you to easily build dynamic capabilities into web pages • Widgets • Animations

AJAX • Asynchronous communication replaces "synchronous request/response model." • A user can continue to use the application while the client program requests information from the server in the background • Separation of displaying from data fetching

Comet

Comet • Ajax is still typically synchronous with user events • Full asynchrony has updates pushed from server any time • Update pages after they load • Send users notifications • Allow users to communicate and collaborate within the web application • Called “Comet”, “Server-side Push”, “Ajax Push”, or “Reverse Ajax”

Other Java Related Technologies