Web Applications Development ITSE 3302 Dr Moamar G
Web Applications Development ITSE 3302 Dr. Moamar G. Elyazgi 1
Module 3 Web Page Design Basic HTML l Advanced HTML l Java. Script l Practical: creating a complex web page using the techniques described l 2
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 3
Java. Script l l 4 Java. Script is an interpreted programming language (a script language). Although there are interpreters that do not depend on a given browser, it is a script language usually linked to web pages. Java. Script and Java are two different programming languages with very different philosophies. The only thing they have in common is their syntax, since Netscape based its design of Java. Script on the syntax of Java.
First basic program l l l 5 As is now the norm when demonstrating programming languages, our first contact with Java. Script will be to create our first program displaying the typical "Hello world" message. Since Java. Script is a language that is generally linked to a web page, the following code will be a HTML file that we will need to display in a browser. This Java. Script program paints a button on our screen; this button opens a window with a message when we click on it.
First basic program 6 <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> function Greeting() { alert("Hello world"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Button“ VALUE="Press" on. Click="Greeting()"> </FORM> </BODY> </HTML>
First basic program l l l 7 As we can see, the Java. Script code is wrapped by <SCRIPT> tags. These tags can appear at whichever point in the document we wish; they do not have to appear in the header. Browsers that do not offer Java. Script support will ignore the content of the tags. Optionally, we may require our users to have a specific version of Java. Script if we use tags like: <SCRIPT LANGUAGE="Javascriptl. 1">. . . </SCRIPT>
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 8
Basic elements of Java. Script l l 1. l 9 Java. Script sentences end in ; (like C and Java) and can be grouped into blocks delimited by { and }. Another point to bear in mind is that symbols (names of variables, functions, etc. ) are case-sensitive. Comments There are two options for adding comments to the program: // Single-line comment /* comment that takes up several lines */
Basic elements of Java. Script 2. Literals l Java. Script follows the same mechanism as Java and C for defining literals, i. e. it has the following literals: • Integers 123 • Real 0. 034 • Boolean true, false • Strings "Text string" l 10 Java. Script also offers vector support: seasons = ["Autumn", " Winter", " Spring", " Summer"];
Basic elements of Java. Script Literals Special characters l Like Java, Java. Script uses certain character sequences for inserting special characters in our string constants. l Within these strings, we can indicate several special characters with special meanings. l The most widely-used are: l Character Meaning 11 n t ' " \ xxx New line Tab Inverted comma Quotation marks Backslash The ASCII number (Latin-1 code) of the hexadecimal character
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 12
Data types and variables l 13 In Java. Script, data types are dynamically assigned as we assign values to the different variables. These can be: • character strings • integers • real • Boolean • vectors • matrices • references • objects
Data types and variables Variables l l 14 In Java. Script, the names of variables begin with an alphabetical character or the character '_', and may be formed by alphanumeric characters and the character '_'. There is no need for an explicit declaration of variables as they are global. If you want a local variable, however, you will need to declare it using the reserved word var and do so in the body of a function. In a variable declaration with var we can declare several variables by separating their names with.
Data types and variables References l l 15 Java. Script eliminates pointers to memory from the language, but maintains the use of references. References work in a very similar way to pointers to memory, except that they skip out memory management tasks for programmers, which make pointers so prone to errors in other languages. Java. Script allows references to objects and to functions. This ability to reference functions will be very useful when using functions that hide differences between browsers.
Data types and variables Operators Javascript has the same operators as Java and C, and behaves in the same way as these languages usually do: • Arithmetical operators: the usual arithmetical operators are available (+, -, *, /, %, etc. ), as well as increment (+ +) and decrement (-) operators. • l 16
Data types and variables Operators l Comparison following: operators: – Equality == – Inequality != – Strict equality === – Strict inequality !== – Less than < – Greater than > – Less than or equal to <= 17 – Greater than or equal to <= we can use the
Data types and variables Operators • Logical operators: Java. Script has the following logical operators: l – Not ! l – and && l – or || • Object operators: for object handling we also have: l – Create an object new l – Delete an object delete l – Reference to the current object this 18
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 19
Control structures Conditional forks Like all programming languages, Java. Script has some control structures. 1. Conditional forks Java. Script offers the two best-known control structures: l if (condition) <code> else <code> 20
Control structures Conditional forks 21 switch(value) { case valuetest 1: <code> break; case valuetest 2: <code> break; . . . default: <code> }
Control structures Conditional forks 2. Loops There are three loops, while and do, while, and the for loop. while(condition) <code> do { <code> } while(condition); 22 for(start; condition; increase) <code>
Control structures Conditional forks 3. Object Handling Structures l l 23 There are two very specific structures for object handling. Firstly, we have the for. . in loop, which allows us to cycle through the properties of an object (generally in vectors): for (<variable> in <object) <code>
Control structures Conditional forks l Secondly, we have with, which is very convenient when dealing with multiple properties of a single object. We can write: with (object) { property 1 =. . . property 2 =. . . } Instead of: 24 object. property 1=. . . object. property 2=. . .
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 25
Functions l l Java. Script incorporates the necessary constructions for defining functions. The syntax is as follows: function name(argument 1, argument 2, . . . , argument n) { code } l 26 The parameters are passed by value.
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 27
Objects In Java. Script, an object is a data structure that contains both variables (object properties) and functions for handling the object (methods). l The object-oriented programming model used by Javascript is a lot simpler than that of Java or C++. l Java. Script does not distinguish between objects and object instances. value=object. method(parameter 1, parameter 2, . . . ) l 28
Objects l The mechanism for accessing the properties or methods of an object is as follows: object. property value=object. method(parameter 1, parameter 2, . . . ) 29
Objects Defining objects in Java. Script l l To define an object in Java. Script, we must first define a special function whose purpose is to build the object. We need to assign the same name to this function, called constructor, as we did to the Object. function My. Object(attr 1, attr 2) { this. attr 1=attr 1; this. attr 2=attr 2; } 30
Objects Defining objects in Java. Script l From now on we can create objects of the type My. Object object=new My. Object(. . ) object. attr 1=a; l 31 To add methods to an object we must first define these methods as a normal function: function Method 1(attr 1, attr 2) { //code // we have the object in this }
Objects Defining objects in Java. Script 32 l To assign this method to an object method, type: object. method 1=Method 1; l From now on, we can enter the following: object. method 1(. . );
Objects Inheritance 33 l In object-oriented programming, inheritance allows us to create new objects with the methods and properties of objects that are called parents. l This allows us to create derived objects, thus moving from generic implementations to increasingly specific implementations.
Objects Inheritance l The syntax for creating an object derived from another, such as a Child. Object derived from a Parent. Object that had two arguments (arg 1 and arg 2) will be: function Child. Object(arg 1, arg 2, arg 3) { this. base=Parent. Object; this. base(arg 1, arg 2); } l 34 At this point, we can obtain access through a Child. Object to both the methods and properties of the child and parent objects.
Objects Predefined objects The existing Java. Script implementations incorporate a series of predefined objects: • Arrays Vectors. • Date For storing and handling dates. • Mathematical methods and constants. • Number Some constants. • String handling. • Reg. Exp Regular expression handling. • Boolean values. 35 • Functions. l
Java. Script First basic program l Basic elements of Java. Script l Data types and variables l Control structures l Functions l Objects l Events l 36
Objects Events l l 37 One of the most important aspects of Java. Script is its browser interaction. For this, it incorporates a series of events triggered just as the user carries out an action on the web page.
Objects Event Description on. Load Page loading finishes. Available in: <BODY> on. Un. Load A page is left. Available in: <BODY> on. Mouse. Over The mouse is hovered over. Available in: <A>, <AREA>, . . on. Mouse. Out The mouse stops hovering over an element. on. Submit A form is sent. Available in: <FORM> on. Click An element is clicked. Available in: <INPUT> on. Blur The cursor is lost. Available in: <INPUT>, <TEXTAREA> on. Change Content is changed. Available in: <INPUT>, <TEXTAREA> on. Focus The cursor is found. Available in: <INPUT>, <TEXTAREA> on. Select Text is selected. Available in: <INPUT TYPE="text">, <TEXTAREA> 38
Objects Events l 39 There are two mechanisms for indicating the function to handle an event: <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> function Alarm() { alert("Hello World"); } </SCRIPT> </HEAD> <BODY on. Load="Greeting()">. . . </BODY> </HTML>
Objects Events 40 <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> function Greeting() { alert("Hello World"); } window. onload = Greeting; </SCRIPT> </HEAD> <BODY>. . . </BODY> </HTML>
- Slides: 40