1. JS Basics 1 Lecture JavaScript - Basics

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

3. JS Basics 3 JavaScript is Embedded in HTML //the Javascript here produces content for the BODY on loading Deferred Script //the Javascript here creates functions for later use

4. JS Basics 4 A Simple Example Simple Javascript First Example of JavaScript <!-- hide from old browsers by embedding in a comment document.write(“Last updated on “ + document.lastModified + “.”) // end script hiding -->

5. JS Basics 5 Example 1: Browser Output

6. JS Basics 6 JavaScript has Event Handlers Handling Events Example Handling Events in JavaScript <INPUT TYPE=”button” VALUE=”Click me” onClick=alert(“You clicked me”) >

7. JS Basics 7 Example 3

8. JS Basics 8 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

9. JS Basics 9 What JavaScript 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

10. JS Basics 10 JavaScript - The Basics JavaScript is case-sensitive sum, SUM and Sum are 3 different identifiers –HTML is NOT case-sensitive JavaScript 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 */

11. JS Basics 11 JavaScript Literals Escape sequences are used to embed special characters in a string \bbackspace\ttab \fform feed\’single quote \nnewline\”double quote \rcarriage 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”

12. JS Basics 12 JavaScript Variables Variables should be declared, but not their type var i, sum; var zero = 0;//declaration and initialization var myName = “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

13. JS Basics 13 JavaScript Data Types TypeExampleDescription String“a string”a series of characters inside quote marks Number123.45Any number not inside quote marks Booleantruea logical true and false Nullnullcompletely devoid of any value, not a number, not a string, different than 0 in C/C++ Objectall properties and methods belonging to the object Functiona function

14. JS Basics 14 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.lastModified 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

15. JS Basics 15 Example Using new Example using new function outputDate() { var d = new Date(); //creates today’s date and time document.write(d.toLocaleString()); } // converts a //date to a string The date and time are outputDate();

16. JS Basics 16 Date: Browser Output

17. JS Basics 17 Using alert(), confirm(), and prompt() Example of alert, confirm, prompt function alertUser() { alert("An alert box contains an exclamation mark");} function confirmUser() { var msg = "\n please confirm that you want\n" + "to test another button?"; if (confirm(msg)) document.write(" You selected OK "); else document.write(" You selected Cancel "); } function promptUser() { name1=prompt("What is your name?”, “ “); document.write(" welcome to this page " + name1 + " "); }

18. JS Basics 18 Using alert(), confirm(), and prompt() welcome to this page

19. JS Basics 19 Clicking on alert()

20. JS Basics 20 Clicking on confirm()

21. JS Basics 21 Clicking on prompt()