1. JavaScript Scripting language IT @YCCE 2011-12

2. What is Scripting ? A scripting language, script language, or extension language is a programming language that allows control of one or more applications. Scripts are often interpreted from source code or bytecode, whereas the application is typically first compiled to native machine code. IT @YCCE 2011-12

3. What is Client Side Scripting ? Client Side Scripting: Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side (on the web server). IT @YCCE 2011-12

4. Client-Side Scripting Languages Netscape and others – JavaScript Internet Explorer – Jscript (MS name for JavaScript) – VBScript – PerlScript IT @YCCE 2011-12

5. What is JavaScript JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language (a scripting language is a lightweight programming language) A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license IT @YCCE 2011-12

6. Why do we use JavaScript ? Add content to a web page dynamically. Alter a web page in response to user actions. React to user events. Interact with frames. Manipulate HTTP cookies IT @YCCE 2011-12

7. Features Browser support Detecting user’s browser and OS Can be used on Server as well as Client Performing simple Computation Support objects IT @YCCE 2011-12

8. Structure of JavaScript program JavaScript Page document.write("Hello world!"); Content of the Page IT @YCCE 2011-12

9. JavaScript and HTML Comments <!-- document.write(“Hello World"); --> HTML comment IT @YCCE 2011-12

10. Language Elements Variables Literals Operators Control Structures Objects Arrays IT @YCCE 2011-12

11. Variables Untyped! Can be declared with var keyword: var foo; Can be created automatically by assigning a value: foo=1; blah="Hi Dave"; IT @YCCE 2011-12

12. Variables (cont.) Using var to declare a variable results in a local variable (inside a function). If you don't use var – the variable is a global variable. IT @YCCE 2011-12

13. Literals(Values) Values are bits of information. Values types and some examples include: – Number: 1, 2, 3, etc. – String: characters enclosed in quotes. “Hi” – Boolean: true or false. – Object: image, form – Function: validate(), doWhatever() IT @YCCE 2011-12

14. Expressions Expressions are commands that assign values to variables. Expressions always use an assignment operator, such as the equals sign. – e.g., var month = May; is an expression. Expressions end with a semicolon. IT @YCCE 2011-12

15. Operators Arithmetic, comparison, assignment, bitwise, boolean (pretty much just like C). + - * / % ++ -- == != > < && || ! & | > IT @YCCE 2011-12

16. Control Structures Again – pretty much just like C: if if-else ?: switch for while do-while And a few not in C for (var in object) with (object) IT @YCCE 2011-12

17. Function function functionname (Parameter list) { Commands; return value; } The two parts of a JavaScript function are ✦ Parameter list: Defines any data and their data types that the function needs to work. If the function doesn’t need to accept any values, the parameter list can be empty. ✦ Return: Defines a value to return. IT @YCCE 2011-12

18. User-defined functions function definitions are similar to C++/Java, except: – no return type for the function (since variables are loosely typed) – no types for parameters (since variables are loosely typed) – by-value parameter passing only (parameter gets copy of argument) function isPrime(n) // Assumes: n > 0 // Returns: true if n is prime, else false { if (n < 2) { return false; } else if (n == 2) { return true; } else { for (var i = 2; i <= Math.sqrt(n); i++) { if (n % i == 0) { return false; } return true; } can limit variable scope if the first use of a variable is preceded with var, then that variable is local to the function for modularity, should make all variables in a function local IT @YCCE 2011-12

19. Embedding JavaScript in HTML. When specifying a script only the tags and are essential, but complete specification is recommended: <script language="javascript” type="text/javascript"> <!-- Begin hiding window.location=”index.html" // End hiding script--> IT @YCCE 2011-12

20. Objects Objects have attributes and methods. Many pre-defined objects and object types. Using objects follows the syntax of C++/Java: objectname.attributename objectname.methodname() IT @YCCE 2011-12

21. Array Objects Arrays are supported as objects. Attribute length Methods include: Concat() join() pop() push() reverse() sort() IT @YCCE 2011-12

22. Array example code var a = [8,7,6,5]; for (i=0;i<a.length;i++) a[i] += 2; b = a.reverse(); IT @YCCE 2011-12

23. Many other pre-defined object types String : manipulation methods Math : trig, log, random numbers Date : date conversions RegExp : regular expressions Number : limits, conversion to string IT @YCCE 2011-12

24. Alert Box An alert dialog box displays a message on the screen and gives the user the option of closing the dialog box. To create an alert dialog box, you need to define the text you want displayed, such as alert(“Message here”); An alert dialog box displays an OK button. As soon as the user clicks this OK button, the alert dialog box goes away. IT @YCCE 2011-12

25. Confirmation Box A confirmation dialog box displays a message and offers the user two or more choices. A confirmation dialog box gives users a choice of OK and Cancel buttons. To create a confirmation dialog box, you must display text and include commandsthat do something when the user clicks either OK or Cancel: if (confirm(“Text message”)) command; else command; IT @YCCE 2011-12

26. Prompt Box A prompt dialog box gives users a chance to type in data. To create a prompt dialog box, you need to display text to appear in the dialog box and then optional text to appear as a default value, such as prompt(“Text to display”, optionalvalue); IT @YCCE 2011-12

27. Simple program using JavaScript <!-- function hello() { document.write("Hello,This is JavaScript Output"); } --> IT @YCCE 2011-12

28. Queries ??