1 / 216

Java Script

Java Script. INTRODUCTION. Session1. Session Objectives. Describe JavaScript Differentiate between Client-Side and Server-Side Applications Differentiate between JavaScript and Java Integrate JavaScript in HTML. What is JavaScript (1).

perry
Download Presentation

Java Script

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Java Script INTRODUCTION Session1

  2. Session Objectives • Describe JavaScript • Differentiate between Client-Side and Server-Side Applications • Differentiate between JavaScript and Java • Integrate JavaScript in HTML

  3. What is JavaScript (1) • A scripting language that can be used to create client-side scripts and server-side scripts • JavaScript makes it easier to create interactive Web pages.

  4. What is JavaScript (2) • You can insert JavaScript statements directly into an HTML page. • JavaScript statements can recognize and respond to user events - - mouse clicks, or system generated events - - page resizing, and so on.

  5. Versions of JavaScript

  6. Client-Side and Server-Side Applications • JavaScript can be used to write both client-side and server-side applications. Client applications run in a browser, such as Netscape Navigator or Internet Explorer, and server applications run on a Web server, such as Microsoft’s Internet Information Server or Netscape Enterprise Server.

  7. Java Script in a Browser (1) • When the client requests an HTML page that includes a client-side script, the server forwards the full content of the HTML document - - the JavaScript statements and the HTML content. <HTML> <HEAD> <TITLE>Have Fun</TITLE> <SCRIPT LANGUAGE=”JavaScript”>

  8. Java Script in a Browser (2) alert(“Welcome to the world of JavaScript”); </SCRIPT> </HEAD> </HTML>

  9. Java Script in a Browser (3) Using JavaScript

  10. JavaScript on a Web Server (1) • Server-side statements can be used to: • connect to databases • share information across users of an application • access the file system on the server

  11. JavaScript on a Web Server (2) • The process of creating server-side applications is thus a two-stage process: • The HTML pages containing both client-side and server-side JavaScript statements are created along with JavaScript files. All of these files are then compiled into a single executable.

  12. JavaScript on a Web Server (3) • When the client browser requests the executable, the run-time engine executes the server-side JavaScript statements and returns the HTML page to the browser.

  13. JavaScript and Java(1) • Java-enabled browser is not automatically a JavaScript-enabled browser • Java, developed by Sun Microsystems, is a full-fledged object-oriented programming language.

  14. JavaScript and Java(2) • It can be used to create standalone applications and applets. Applets are mini applications, which are downloaded and executed in the browser. • JavaScript, developed by Netscape, is an object-based scripting language.

  15. JavaScript and Java(3) • While most Java syntax and basic control-flow constructs are supported by JavaScript, it does not have Java’s static typing and strong type checking. • JavaScript cannot be used to create applets or standalone applications.

  16. JavaScript and Java(4) • Java programs consist exclusively of classes and their methods. • JavaScript consists of a small range of data types representing numeric, Boolean, and string values. JavaScript provides dynamic inheritance.

  17. JavaScript and Java(5) • Functions in JavaScript need not have special declarations. Functions can be properties of objects, executing as loosely typed methods. • Java code must be compiled before it is executed.

  18. Embedding JavaScript • You can insert JavaScript statements into an HTML document in the following ways: • Embedding the statements directly in the document using the <SCRIPT> tag. • Linking a JavaScript source file to the HTML document.

  19. Embedding JavaScript (1) • Using JavaScript expressions within HTML tag attribute values. • As event handlers within certain other HTML tags.

  20. Using the SCRIPT tag(1) • JavaScript code is typically embedded into an HTML document using the SCRIPT tag. You can embed several scripts into a single document, provided you enclose each script with a SCRIPT tag.

  21. Using the SCRIPT tag(2) • The format is: <script language=”JavaScript”> JavaScript statements </script>

  22. Using the SCRIPT tag(3) • JavaScript statements must be terminated with a semi-colon (;). <html> <head> <script language = “JavaScript”> document.write(“Welcome to the world of JavaScript”); </script> </head> <body> <p> Enjoy learning <\body></html>

  23. Using an External file(1) • You can also link an external text file containing JavaScript code to an HTML document. The SRC (source) attribute of the SCRIPT tag can be used to include the external file.

  24. Using an External file(2) • You can specify absolute and relative pathnames to the SRC attribute. <scriptlanguage=”JavaScript” src=”filename.js”> • The external file is a text file containing JavaScript code, and whose filename ends with the extension “.js”.

  25. Using an External file(3) • The .js suffix must be mapped by the server to the MIME type application/x-javascript. The server then sends it back in the HTTP header. • The suffix can be mapped to the MIME type by adding the following line to the mime.types file in the server’s config directory.

  26. Using <Noscript>(1) • If the browser does not support JavaScript, you can make use of the <NOSCRIPT> tag. The browser will display HTML enclosed within a <NOSCRIPT> tag in plain text. Browsers that support JavaScript ignore the code within this tag.

  27. Using <Noscript>(2) • The following example shows a <NOSCRIPT> tag. <HTML> <HEAD> <SCRIPT> document.write(“Having fun”); </SCRIPT> </HEAD>

  28. Using <Noscript>(3) <BODY> <NOSCRIPT> <P>The browser does not support JavaScript<BR> <A HREF=”http://www.someserver/default.html”>Click Here</A>

  29. Using <Noscript>(4) <P>If your browser supports JavaScript, check the browser configuration to see if it is enabled. </NOSCRIPT> </BODY> </HTML>

  30. Using <Noscript>(5) Using NOSCRIPT

  31. Displaying Information(1) • Using write and writeln object.write(string) <HTML> <HEAD> <TITLE>Using Methods</TITLE> <SCRIPT LANGUAGE = “JavaScript”> document.write (“Are you having fun?”) </SCRIPT> </HEAD> </HTML>

  32. Displaying Information(2) object.writeln(string) <HTML> <HEAD> <SCRIPT LANGUAGE = “JavaScript”> function doloop() { var String1 = ‘<hr align=”center” width=’; document.open();

  33. Displaying Information(3) for (var size = 5; size <= 100; size+=5) document.writeln(String1 + size + ‘%”>’); document.close(); } </SCRIPT></HEAD> <BODY> <FORM> <INPUT type=”button” value=”Test the loop” onclick = “doloop()” > </FORM></BODY> </HTML>

  34. Using Alert(1) object.alert([message]) <HTML> <HEAD> <SCRIPT LANGUAGE = “Javascript”> alert (“Click OK to reboot the computer”); </SCRIPT> </HEAD> </HTML>

  35. Using Alert(2) Staying Alert

  36. Using Confirm • The confirm method is used to display a message with OK and Cancel buttons. object.confirm([message]) <HTML> <HEAD> <SCRIPT LANGUAGE = “Javascript”> confirm (“Do you want to continue?”); </SCRIPT> </HEAD> </HTML>

  37. Using Prompts • The prompt method is used to display a message box to accept user input. object.prompt([message[, inputDefault]]) where message - - is the string to be displayed. This is optional. Inputdefault - - is the string or integer that represents the default value of the input field.

  38. Session 2 Data types and Operators

  39. Session Objectives • List different data types available in JavaScript • Numeric – Integers and Floating-point Numbers • Alpha numeric – Strings • Boolean – TRUE or FALSE • Apply basic arithmetic and assignment operators • Use data declaration and assignment statements • Type casting in JavaScript

  40. Data types • Every data used in program should be declared first to be of a particular type Numbers 10, - 67,14.45, -454.45 Jack, michal and joe • TRUE, FALSE Boolean values Names

  41. Number • Comprises of Numeric Data and can be classified as • Integers ( without decimals) Eg : 123, 5040, -121 • Floating- point ( with decimals) Eg : 23.45 345.60

  42. Integers

  43. Floating point Numbers • Represent fractional numbers and can be positive and negative integers with exponents • Floating points numbers can be positive and negative • Example : 47.50 -123.45. 12e-2 ( 1/ 100)

  44. Boolean Value • Results from comparison operation returns either a TRUE or FALSE. • Eg : • is 10 < 20 Returns the value True • Is Night longer than Day? Returns the value False is 10 < 20 True ? False?

  45. String • In JavaScript strings are represented by data enclosed within ‘’ or “” and can contain • Numbers ( 0 – 9 ) • Alphabets ( a – z) and ( A – Z ) • Special characters like -, #, $, * • Blank spaces Eg : “ABC 12345” , ‘John Martin’

  46. String with Quotes • It can include ‘’ ( single quotes ) within double quotes and double quotes “ “ enclosed within single quotes “ John D’silva” and ‘string to display double quotes ( “” ) ’ • Escape characters are used to represent double quotes with double quotes and single quotes within single quotes  “ Double Quotes \“\” ” ‘Single Quotes \‘\’ ’

  47. \ ’ \ ” \ \ \ r \ f \ n \ b \ t Single Quote Double Quote Back Slash Carriage Return Form Feed New Line Back Space Tab List of Escape characters • Escape sequences should be used only with <PRE> </PRE> tag.

  48. Variable Declaration • Variables can be declared as follows • Declaring a single variable in JavaScript var sum ; • Declaring more than one variable in JavaScript, using a single declaration statement var sum, average,result ; Where sum, average and result are variables.

  49. Variable Initialization • Variables can be initalized in two ways ; • During Declaration . Var sum = 0 0 is assigned to variable sum Var name = ‘Smith’ Name ‘Smith’ is assigned to variable name • After Declaration var sum Sum = 0

  50. How much money do I have ? Displaying Variable Contents • In JavaScript document.write ( ) is used for displaying the contents of a variable Eg : var balance balance = $22 document.write(“Current Balance is = ” Output + balance) Current Balance is = $22 VALUE = ?

More Related