Java Script JQuery Java Script Resources Resources Java

Java. Script JQuery Java. Script Resources

Resources: Java. Script Guide - MDC Doc Center developer. mozilla. org/en/Java. Script/Guide Mozilla Java. Scripting Resources www. mozilla. org/js/scripting

Introduction • Introduction to Java. Script – NOT Java • Java. Script was developed by Netscape – Java was developed by Sun • Designed to ‘plug a gap’ in the techniques – available for creating web-pages • Client-side dynamic content • Interpreted language Java. Script

Java. Script vs JAVA Historically… • Complementary – Java. Script • Cannot draw, multi-thread, network or do I/O – Java • Cannot interact with Browser or control content Java. Script

Java. Script vs JAVA • Java. Script is becoming what Java was – originally intended to be – Java Applets were meant to be lightweight • downloadable programs run within the browser for cross-platform compatibility • JAVA was slow, inefficient • JAVA had many implementations • Java. Script is actually lightweight – accomplish most of what Applets do with a – fraction of the resources Java. Script

Java. Script Versions Java. Script 1. 5 was introduced back in 1999, so no worries. Java. Script is derived from a standard called ECMAScript. In most browsers Java. Script = Java. Script. However, in some browser it is not true… e. g. Microsoft Internet Explorer -> JScript. Java. Script

Java. Script today. . . • What is it used for today? – Handling User Interaction – Doing calculations – Checking for accuracy and appropriateness of data in forms • • • Doing calculations/manipulations of forms input data Search a small databased embedded in the downloaded page Save data as cookie so it is there upon visiting the page Generating Dynamic HTML documents Examples – Bookmarklets – Google Maps – Google Suggest Java. Script

Want more… ? • • • Groove. Shark. com Google. Calendar Aviary. com www. alexbuga. com … Java. Script

Embedding scripts in HTML <script type="text/javascript"> // Write a heading document. write("<h 1>This is a heading</h 1>"); // Write two paragraphs: document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); </script> <script type="text/javascript" src="script. js"></script> Java. Script Language Syntax

Variables and Literals • Declaration – Explicit: var i = 12; // no ‘var’ in declaration – Implicit: i = 12; • Variable Scope – Global • Declared outside functions • Any variable implicitly defined – Local • Explicit declarations inside functions Java. Script Language Syntax

Variables and Literals Dynamic Typing - Variables can hold any valid type: Number … var my. Int = 7; Boolean … var my. Bool = true; Function … [Discussed Later] Object … [Discussed Later] Array … var my. Arr = new Array(); String … var my. String = “abc”; Can hold values of different types Java. Script Language Syntax

Arithmetic Operators Operator Description Example x y + Addition x=y+2 7 5 - Subtraction x=y-2 3 5 * Multiplication x=y*2 10 5 / Division x=y/2 2. 5 5 % Modulus (division remainder) x=y%2 1 5 ++ Increment x=++y x=y++ 6 5 6 6 -- Decrement x=--y x=y-- 4 5 4 4 Java. Script Language Syntax

Assignment Operators Operator Example = x=y += x += y x=x+y x=15 -= x -= y x=x-y x=5 *= x *= y x=x*y x=50 /= x /= y x=x/y x=2 %= x %= y x=x%y x=0 Java. Script Same As Result x=5 Language Syntax

Control Flow • ‘if’ statement if ( boolean statement ) { … } else { … } • ‘switch’ statement switch ( my. Var ) { case 1: // if my. Var is equal to 1 this is executed break; case default: // if none of the cases above are satisfied OR if no ‘break’ statement are used in the cases above, this will be executed } Java. Script Language Syntax

Control Flow Check in the documentation: • while, and do-while loops, for loops • break and continue keywords Java. Script

Functions Call a function the same way You would in C my. Func(arg 1, arg 2, …); Declare a function using the ‘function’keyword No return type, nor typing of arguments function add(num. One, num. Two) { return num. One + num. Two; } Java. Script

Output The DOM document objects allows printing directly into the browser page • window object is implied Writing in text or HTML with script – No line-break document. write(“I am <B>BOLD</B>”); – With line-break document. writeln(“I am <U>underlined</U>”); Java. Script

A little more advanced… <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page. nn"; txt+="Click OK to continue viewing this page, n"; txt+="or Cancel to return to the home page. nn"; if(!confirm(txt)) { document. location. href="http: //www. w 3 schools. com/"; } } } </script> Java. Script

Objects • Not a full blown OO language, but object oriented • You can define your own objects • You can make your own variable types. Looking again at the previous slide… Java. Script

Declaring Objects function Lecture(my. Time, my. Place, my. Subject) { this. time = my. Time; this. place = my. Place; this. subject = my. Subject; } var lect = new Lecture(„ 08: 00”, “Here”, „JS”); Java. Script

Working with Objects • Accessing object’s properties – document. writeln(‘Subject: ‘ + lect. subject); • Objects and Associative Arrays are in fact two interfaces to the same data structure so…: – document. writeln(‘Subject: ‘ + lect[“subject”]); Java. Script

Inheritance in Java. Script • No built-in inheritance • Runtime Inheritance: Clone objects and add extra properties Java. Script

Global Properties and Functions decode. URI() Decodes a URI encode. URI() Encodes a URI escape() Encodes a string eval() Evaluates a string and executes it as if it was script code is. Finite() Determines whether a value is a finite, legal number is. Na. N() Determines whether a value is an illegal number Number() Converts an object's value to a number parse. Float() Parses a string and returns a floating point number parse. Int() Parses a string and returns an integer String() Converts an object's value to a string unescape() Decodes an encoded string Java. Script

Built-in Objects (some) • Number, Boolean, String – Primitive types are automatically converted to Objects when assigned to variables var str = “abc”; //var is a String object! • String has some helpful properties/functions: • • length to. Upper. Case substring link – Date • No properties, but contains a bunch of methods for getting, setting and manipulating dates. – Math • Calculate PI, find the SIN or COS of an angle, etc. Java. Script

DOM and JS • Browser – Built-in Objects – window. location – href represents a complete URL. – hostname represents the concatenation host: port. – window. location. href=“http: //www. google. com”; • window. history – length reflects the number of entries in the history list – history. go(-1) – history. back() Java. Script

DOM and JS • Window – alert("message") – window. close() – confirm("message") – focus() – open("URLname", "Windowname", ["options"]) – height, weight, always. Raised, location, menubar open(“http: //google. com”, “Google”, “toolbar=no, always. Raised=yes”); Java. Script

HTML Objects Hierarchy Java. Script

Java. Script

j. Query lightweight Javascript framework Java. Script

j. Q, HTML, DOM Java. Script

j. Query • • Very easy and powerful programming Attempts to be cross-browser Easier to support for multiple platforms Implements document. ready() handlers Full DOM support Event propagation manipulation Nice UI Java. Script

j. Q, HTML, DOM (Fire. Bug) Java. Script

Basic Usage Examples • Adding a class – $("a"). add. Class("test"); Note: HTML allows multiple classes to be added to an element. ( <span class="class 1 class 2 class 3"> ) • Removing a class – $("a"). remove. Class("test"); • Hide and show – $(this). hide(); – $(this). show("slow"); • Selectors: # >. Java. Script

j. Query selectors : animated : enabled : even : first-child : has() : hidden : button, : input, : image, etc… and more…. Java. Script

j. Query traversing. add(). children(). each(). first(). is(). next() … Java. Script

AJAX handlers <div class="trigger">Trigger</div> <div class="result"></div> <div class="log"></div> $('. log'). ajax. Complete(function() { $(this). text('Triggered ajax. Complete handler. '); }); $('. trigger'). click(function() { $('. result'). load('ajax/test. html'); }); Java. Script

Event propagation (bubbling) To stop bubbling one can use event. stop. Propagation(); Java. Script

Callback and Functions • Posibility to define functions inline, e. g. $(„a”). click(function() { $(this). css(‘border’, ’ 1 px solid black’); }); Java. Script

Callback and Functions • A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. $. get('myhtmlpage. html', my. Call. Back); Java. Script

Callback and Functions • What is we want to pass arguments to a callback function? WRONG: $. get('myhtmlpage. html', my. Call. Back(param 1, param 2)); This will not work because it calls the function and then passes the return value as the second parameter to $. get() Java. Script

Callback and Functions • What is we want to pass arguments to a callback function? $. get('myhtmlpage. html', function(){ my. Call. Back(param 1, param 2); }); Java. Script

$. get('myhtmlpage. html', my. Call. Back); j. Query UI Java. Script

j. Query Form Validation • Simplest method is to use j. Q plugin ( e. g. jquery. validate. js) • Include jquery. js and jquery. validate. js in the head • Run validate(); on the form object Java. Script

Java. Script

j. Query Form Validation <form id="comment. Form”> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <script> $(document). ready( function(){ $("#comment. Form"). validate(); }); </script> Adding more rules: $("#myinput"). rules("add", { minlength: 2 }); Java. Script

j. Query Form Validation $("#myinput"). rules("add", { required: true, minlength: 2, messages: { required: "Required input", minlength: j. Query. format("At least {0} characters are necessary") } }); Java. Script

j. Query Form Validation $("#myform"). validate({ rules: { email. Field: { required: true, email: true } } }); Java. Script

Thank You Questions? Java. Script