JavaScript

1. JavaScript ShadiBanitaan

2. Outline • Introduction • JavaScript Functions • Using Objects in JavaScript • Built-in Objects • User-Defined Objects • Examples • Events

3. Java vs JavaScript

4. Web Scripting Languages • Fewer features • Can be client side or Server side • Server side • Invoked from browser • Run on the server • Client side - JavaScript • Invoked and Run on the browser

5. Adding Integers

6. Adding Integers

7. JavaScript: Functions • A function is a block of organized reusable code (a set of statements) for performing a single or related action. • Begins with keyword “function” and the function name and “( … )” • Inside the parentheses • We can pass parameters to the function • E.g. function myfunction(arg1, arg2) {…} • Built-in and user-defined functions

8. Built-In Functions • Functions provided by the language and you cannot change them to suit your needs. • Some of the built-in functions in JavaScript are shown here: • isFinite: Determines if a number is finite • isNaN: Determines whether a value is “Not a Number”

9. User-Defined Functions

10. JavaScript: Objects • You can instantiate an object by using the constructor function • JavaScript is said to be an Object-based programming language • What is property? • A variable belongs to the object. • What is method? • It is a function belongs to the object

11. JavaScript: Objects • Built-in Objects: • Math, Array, and String. E.g.) Math.random() • User-Defined Objects: • The Class: JavaScript uses functions as classes. • E.g.) function Person() { } • The Object (Class Instance) • var person1 = new Person(); • var person2 = new Person(); • The Property (object attribute): Properties are variables contained in the class

12. Math Object

13. Math Object

14. String Object

15. String Object

16. Date Object

17. Date Object

18. Date Object

19. document Object • Each HTML document loaded into a browser window becomes a Document object. • Provided by the browser and allows JavaScript code to manipulate the current document in the browser

20. document Object

21. document Object

22. Extracting document information

23. Extracting document information

24. Boolean Object • The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

25. Number Object • The Number object is an object wrapper for primitive numeric values.

26. JavaScript: user-defined objects • Fields Can Be Added On-the-Fly • Adding a new property (field) is a simple matter of assigning a value to one • If the field doesn’t already exist when you try to assign to it, JavaScript will create it automatically. • For instance: var test = new Object(); test.field1 = "Value 1"; // Create field1 property test.field2 = 7; // Create field2 property

27. Literal Notation • We can create objects using a shorthand “literal” notation of the form { field1:val1, field2:val2, ... , fieldN:valN} • For example, the following gives equivalent values to object1 and object2 var object1 = new Object(); object1.x = 3; object1.y = 4; object1.z = 5; object2 = { x:3, y:4, z:5 };

28. Objects: Iterates Over Properties • JavaScript, unlike Java or C++, has a construct that lets you easily retrieve all of the fields of an object • The basic format is as follows: For (fieldName in object) { doSomethingWith(fieldName); } • Also, given a field name, you can access the field via object["field"] as well as via object.field

29. Objects: Iterates Over Properties

30. Objects: Iterates Over Properties

31. Objects: Constructor • A “Constructor” is Just a Function that Assigns to “this” • JavaScript does not have an exact equivalent to Java’s class definition • The closest you get is when you define a function that assigns values to properties in the this reference function Ship(x, y, speed, direction) { this.x = x; this.y = y; this.speed = speed; this.direction = direction; }

32. Example (Constructor)

33. Example (Prototype)

34. Example (User-defined Object)

35. Example (User-defined Object)

36. Example (Instance)

37. Nested Object

38. Events • JavaScript events • allow scripts to respond to user interactions and modify the page accordingly • Events and event handling • help make web applications more dynamic and interactive

39. Simple button

40. Mouse Events