Introduction to JavaScript Programming: Basics and Applications

1. COP 3813Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript

2. JavaScript • JavaScript • Object-oriented programming language • Interpreted from source code • Supported by most browsers • Executed on client system in browser • Program text output is treated as html and rendered by browser • Includes extensive support for generating web page and window elements

3. Variables and Assignment • Variable names essentially as in C++ • No type in declaration var name1, name2, …; • Assignment operator =

4. Expressions • Very similar to C++ • Arithmetic Operators: + - * / % ++ -- etc. as in C++ • Comparison operators: < <= == … • String concatenation with + • also converts other values to string if possible • Output with document.writeln( str ); • Input with val = window.prompt(“msg”);

5. Basic Control Structures • if (cond) stmt else // optional else part stmt • { … } // block • while (cond) stmt • for (init; test; incr) stmt

6. Use on Web Page • Generates code where script is executed in body • Functions can go in head • Wrap with <script type = “text/javascript”> <!-- // code goes here --> </script>

7. Examples • Class Average 2 (fig. 8.9) • Analysis (fig. 8.11) • Interest Table (fig. 9.6)

8. More Control Statements • switch (choice) { case val: stmt break; … default: // optional stmt } • do stmt while (cond);

9. Examples • Bullet lists with switch (fig. 9.7) • Headings with do-while (fig. 9.9)

10. Logical Values and Operators • Logical Values are true false • Usual logical operators ! && || Short-circuit evaluation

11. Defining Functions • function fname(parm1, parm2, …) { //code return expr; } • Notes • No return type • expr in return omitted if no return value

12. Example • Table of Random Numbers (fig. 10.4) • Note use of functions from class Math • Die Roll (fig. 10.5) • Craps (fig. 10.6)

13. Arrays • Array is a class • Declare array with var list = new Array(size); • Access with list[index]; • Start with 0 • Can hold any type of value • Deallocation is automatic when another value is assigned to variable • list.length returns length

14. Arrays Initialization • In constructor new Array(“red”, “green”, “blue”); • By array object x = [1, 2, 3, 4]; • Can have undefined values; never assigned • Example: DieRoll, fig. 11.6

15. Reference Parameters • Arrays and objects are passed by reference so a change in the function changes the calling value • Scalars are passed by value

16. Two-dimensional Arrays • Declare an Array for rows • Then assign an Array to each element • Does not enforce rectangular form • Access with Array[i][j]

17. Objects • Similar to C++ • Declared with new • Math object has elements that are standard math functions Math.sin(x)

18. Strings • Class String supports character strings • Constants are surrounded by “ “ • Can use usual C++ \ escaped • Has many methods for string manipulation • Operator + for concatenation • Example: SplitAndSubString.html fig. 12.6

19. Date Object • Access and format date and time • See definitions at W3Schools • Example: DateTime.html fig. 12.9

20. Document and Window Objects • Document object allows access to all components of a document • See definitions at W3Schools • Window object allows control of window features • See definitions at W3Schools • Example: Window.html fig. 12.13

21. Cookies • Accessed through Document cookie property • Example: cookie.html fig. 12.15

22. Final Example • final.html fig. 12.16