Java Script Bartosz Sakowicz Java Script basics Java

  • Slides: 15
Download presentation
Java. Script Bartosz Sakowicz

Java. Script Bartosz Sakowicz

Java. Script - basics Java. Script is used in millions of Web pages to

Java. Script - basics Java. Script is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. Java. Script is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera.

Java. Script – basics (2) • Java. Script was designed to add interactivity to

Java. Script – basics (2) • Java. Script was designed to add interactivity to HTML pages • Java. Script is a scripting language • A Java. Script is usually embedded directly into HTML pages • Java. Script is an interpreted language • It is free Java != Java. Script !!!

Java. Script - examples <html> <body> <script type="text/javascript"> <!– document. write(“It is Java. Script!")

Java. Script - examples <html> <body> <script type="text/javascript"> <!– document. write(“It is Java. Script!") //--> </script> </body> </html>

<html><head> Java. Script – examples(2) <script type=“text/javascript”> function pushbutton() { alert(“Hello!"); } </script></head><body> <form>

<html><head> Java. Script – examples(2) <script type=“text/javascript”> function pushbutton() { alert(“Hello!"); } </script></head><body> <form> <input type="button" name="hello" value=“Hello" onclick="pushbutton()"> </form> </body></html>

<html><head> Java. Script – examples(3) <script type=“text/javascript”> function getname(str) { alert("Hi, "+ str+"!"); }

<html><head> Java. Script – examples(3) <script type=“text/javascript”> function getname(str) { alert("Hi, "+ str+"!"); } </script></head><body> <p>Enter your name: </p> <form> <input type="text" name="name" onblur="getname(this. value)" value=""> </form></body></html>

Inserting Java. Script 1) <head> section (as in previous transparencies) 2) Inline scripts: 3)

Inserting Java. Script 1) <head> section (as in previous transparencies) 2) Inline scripts: 3) <body> <script type="text/javascript">. . </script> </body> 4) 3) External file: 5) <head> 6) <script src=“menu. js"></script> 7) </head>

Hierarchy of objects

Hierarchy of objects

Basics usage of objects a) With dot (. ) – the same as in

Basics usage of objects a) With dot (. ) – the same as in C++ (preferred way) b) With usage the table of properties of object, eg: document[1] – useful with loops c) With usage of association table: document["href"]

Expressions & operators x=7; // variables doesn’t have type! str = “Some text"; (bool

Expressions & operators x=7; // variables doesn’t have type! str = “Some text"; (bool 1 == true) && (bool 2 == false); str = “Some" + " text"; All the operators are identical as in C++/Java.

Control flow statements Statement Example usage break continue for(i=1; i<5; i++) { // expressions

Control flow statements Statement Example usage break continue for(i=1; i<5; i++) { // expressions break; } The same as break. for See break. . for. . in for (i in obj) {// expressions} goto label 1; if. . else if(condition) {// expressions if true } else {// expressions if false } return function sum(a, b) {x=a+b; return x; } while do-while with while(condition) {//expressions} do { //expressions } while (condition) with (document) { write " Some text "; }

Events - onload and on. Unload Events are triggered when the user enters or

Events - onload and on. Unload Events are triggered when the user enters or leaves the page. The onload event is often used to check the visitor's browser type and browser version, Events are often used to deal with cookies that should be set when a user enters or leaves a page. Eg: <body onload="Do. Sthonload"> <body onunload="Do. Sthonunload">

Events - on. Focus, on. Blur and on. Change Events are often used in

Events - on. Focus, on. Blur and on. Change Events are often used in combination with validation of form fields. Eg: <input type="text" size="30“ id="email" onchange="check. Email()">;

Events - on. Submit Event is used to validate all form fields before submitting

Events - on. Submit Event is used to validate all form fields before submitting it. Eg: <form method="post" action="xxx. htm" onsubmit="return check. Form()">

Events - on. Mouse. Over and on. Mouse. Out Events are often used to

Events - on. Mouse. Over and on. Mouse. Out Events are often used to create "animated" buttons, eg: <html><head> <script type=“text/javascript”><!-function change. Image(i, j) { document. images[i]. src = “image"+j+". gif"; }--></script></head><body> <a href= "doc. htm" onmouseover="change. Image(0, 2)" onmouseout="change. Image(0, 1)"> <img src=“image 1. gif" alt=“image 1"/></a> <a href= "doc. htm" onmouseover="change. Image(1, 2)" onmouseout="change. Image(1, 1)"> <img src=“image 1. gif" alt=“image 1"/></a></body></html>