Lecture Java Script Basics JS Basics 1 What

Lecture Java. Script - Basics JS Basics 1

What is Java. Script • Java. Script is a “simple”, interpreted, programming language with elementary objectoriented capabilities • Java. Script has two distinct but overlapping systems –client-side Java. Script runs on Web browsers –server-side Java. Script runs on Web servers • Syntactically Java. Script resembles C, C++, Java • Java. Script was developed by Netscape (formerly called Live. Script) JS Basics 2

Java. Script is Embedded in HTML <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE=”Java. Script”> //the Javascript here produces content for the BODY on loading </SCRIPT> </BODY> </HTML> Deferred Script <HTML> <HEAD> <SCRIPT LANGUAGE=”Java. Script”> //the Javascript here creates functions for later use </SCRIPT> </HEAD> <BODY></HTML> JS Basics 3

A Simple Example <HTML> <HEAD> <TITLE>Simple Javascript</TITLE> </HEAD> <BODY> <H 1>First Example of Java. Script</H 1> <SCRIPT LANGUAGE=”Java. Script”>  </SCRIPT> </BODY> </HTML> JS Basics 4

Example 1: Browser Output JS Basics 5

Java. Script has Event Handlers <HTML> <HEAD><TITLE>Handling Events Example</TITLE></HEAD> <BODY> <H 1>Handling Events in Java. Script</H 1> <FORM> <INPUT TYPE=”button” VALUE=”Click me” on. Click=alert(“You clicked me”) > </FORM> </BODY> </HTML> JS Basics 6

Example 3 JS Basics 7

Javascript: Console • In addition to http: , ftp: etc. javascript: can also be used in any context where a URL is permitted • Entering javascript: in the location field brings up an error message window JS Basics 8

What Java. Script Programs Can Do • Write programs to perform any computation; it is equivalent in power to a general purpose programming language • Control Web page appearance and content (this is its intended use) • Control the Web browser, open windows and frames • Interact with document content • Retrieve and manipulate all hyperlinks • Interact with the user • Read/write client state with cookies JS Basics 9

Java. Script - The Basics • Java. Script is case-sensitive sum, SUM and Sum are 3 different identifiers – HTML is NOT case-sensitive • Java. Script ignores spaces, tabs, newlines • Semicolon is optional – but multiple statements on a line require a semicolon i = 1; j = 2 • C and C++ style comments are supported //comment to end of line /* this can be a multiple line comment */ JS Basics 10

Java. Script Literals • Escape sequences are used to embed special characters in a string b backspace t tab f form feed ’ single quote n newline ” double quote r carriage return \ backslash • Example of escape characters in strings msg = ‘You’re using an embedded single quote here. ’ msg = “This is on the first line n and this is on the second line. ” msg = document. title + “n” + document. links. length + “links present” JS Basics 11

Java. Script Variables • Variables should be declared, but not their type var i, sum; var zero = 0; initialization //declaration and var my. Name = “Ellis” • The type of value a variable can hold during execution may change. • Any variable outside a function is a global variable and can be referenced by any statement in the document • Variables declared in a function are local to the function • In a multi-frame or multi-window set up of the browser, scripts can access global variables from any other document currently loaded JS Basics 12

Java. Script Data Types Type Example String “a string” Description a series of characters inside quote marks Number 123. 45 Any number not inside quote marks Boolean true a logical true and false Null null completely devoid of any value, not a number, not a string, different than 0 in C/C++ Object all properties and methods belonging to the object Function a function JS Basics 13

Array and Objects • Objects and arrays are really identical typeof(array) = typeof(object) = object typeof() returns a string which is the type of its argument (“number”, “string”, “boolean, “object”, “function”, “undefined”) • Object elements are accessed using dot (. ) • An object/array on the left requires a field name on the right of dot document. last. Modified frames[0]. length • The dot operator can be used with arrays arr[1] is identical to arr. 1 but if i = 1, arr[1] is not equivalent to arr. i since property names are not evaluated JS Basics 14

Example Using new <HTML><HEAD><TITLE>Example using new</title> <SCRIPT LANGUAGE=Java. Script> function output. Date() { var d = new Date(); //creates today’s date and time document. write(d. to. Locale. String()); } // converts a //date to a string </SCRIPT></HEAD> <BODY> <H 1>The date and time are</H 1> <SCRIPT LANGUAGE=Java. Script> output. Date(); </SCRIPT></BODY></HTML> JS Basics 15

Date: Browser Output JS Basics 16

Using alert(), confirm(), and prompt() <HTML><HEAD><TITLE>Example of alert, confirm, prompt</TITLE> <SCRIPT LANGUAGE=Java. Script> function alert. User() { alert("An alert box contains an exclamation mark"); } function confirm. User() { var msg = "n please confirm that you wantn" + "to test another button? "; if (confirm(msg)) document. write("<h 2>You selected OK</h 2>"); else document. write("<h 2>You selected Cancel</h 2>"); } function prompt. User() { name 1=prompt("What is your name? ”, “ “); document. write("<h 2>welcome to this page " + name 1 + "</h 2>"); }</SCRIPT></HEAD> JS Basics 17

Using alert(), confirm(), and prompt() <BODY>welcome to this page <FORM> <INPUT TYPE=button VALUE="Click here to test alert()” on. Click="alert. User()"><BR> <INPUT TYPE=button VALUE="Click here to test confirm()" on. Click="confirm. User()"><BR> <INPUT TYPE=button VALUE="Click here to test prompt()" on. Click="prompt. User()"></FORM></BODY></HTML> JS Basics 18

Clicking on alert() JS Basics 19

Clicking on confirm() JS Basics 20

Clicking on prompt() JS Basics 21