1. Introducing JavaScript

2. Goals By the end of this lecture you should … Be able to describe the differences among object methods, object properties and events Be able to describe how we declare, initialize and type JavaScript variables Be able to describe how we assign values to variables Be able to describe how to convert values to different types

3. What is JavaScript? JavaScript is a “Client-side” scripting language. JavaScript is usually housed in a Web-page. JavaScript's syntax is similar to C and Java. JavaScript deals with objects. JAVASCRIPT IS NOT THE SAME AS JAVA!

4. What is an Object? An object is a unique entity in a script and/or web page. An object has object properties, object methods and can react to events in that object’s environment.

5. Object Properties A property is a characteristic that describes an object. It is similar to an adjective in grammar. Properties are given values (Hair Color is a property; its value might be brown or red).

6. Object Methods A method is something an object can do. It is similar to a verb in grammar. Sometimes we need to give methods descriptive words that tell it how to work. These descriptive words are called arguments (Running might be a method of the “human object”; an argument for running might be the speed at which to run).

7. Events An event is something in an object’s environment to which that object can react. For the human object, a fire alarm is an event; Humans react to a fire alarm using a method – exiting the building.

8. Examples of JavaScript Objects Examples of Common JavaScript Objects: ◦ A web browser’s window ◦ A string of characters ◦ An integer number ◦ Text in a web page ◦ A menu in a web page ◦ An image ◦ A path to an image saved in memory

9. Notes about Syntax Spaces do not matter to the computer (but they do improve readability for the programmer). Non-structure lines end with a semi-colon  ; Lines that introduce a structure (like loops or if structures) begins with a left curly brace  { Structures end with a right curly brace  } It's a good idea to add non-executable comments to your code.

10. JavaScript Comments Comments are non-executable lines of code that are used to describe, in English, what is going on in a section of code. Comments in any language are offset from other code using a special, reserved character Comments in JavaScript can be single-line comments (offset with two forward-slashes  //) Comments in JavaScript can also be multi-line comments (offset beginning with /* and ending with */)

11. Comment Example // This is a single-line comment // These // are also // single line comments. /* This is a multi-line comment */

12. Documentation Comments Give the user general information about the program Generally found near the beginning of a script: /* TITLE: Hello World, v 0.1 * AUTHOR: Bob Molnar (RSM) * CREATED: 03.17.2002 * LAST MODIFIED: 03.19.2002 * LAST MODIFIED BY: RSM * PURPOSE: The purpose of this program … * MODIFICATION HISTORY: … */

13. Code Comments Explain, in English, what’s going on in the code Used to clarify code Usually found near variable declarations and near structures //String variable to store the user’s name var userName = “”; //also a valid comment

14. Introducing JavaScript Variables Objects are represented by variables. Variables are virtual containers that hold information. The value of a variable can change with changes in a program. Different types of variables serve different purposes.

15. Typing Variables Different variables serve specialized purposes, based on what they hold: ◦ Primitive Types (natively understood by JavaScript)  String  Float (a.k.a “Real”)  Integer  Boolean (TRUE or FALSE) ◦ Objects Why do we type variables? Conservation of resources!

16. Creating a Variable Declare & name the variable Initialize the variable (give it an initial value) Type the variable (tell the computer how the variable is going to be used) We can use a Constructor method to create variables.

17. Constructor Methods JavaScript has a library of "blueprints" available to it that define the nature of some objects. To access those "blueprints" and create new primitives & objects from them, we can use constructor methods. Think of constructor methods as a way of building a new object from an existing blueprint.

18. Creating a Variable What's going on? 1. The reserved word "var" tells JavaScript to allocate some space in memory for a variable. 2. We give a label to that variable, giving it the name userName. 3. The "=" means "gets the value off" in programming. It does NOT mean "equals." var userName = new String(“Dilbert”); 1 23

19. Creating a Variable 4. The reserved word "new" is called an instance operator and it tells JavaScript to expect that we'll be creating a new instance of object from an existing "blueprint", in this case, from the String blueprint. 5. We use the constructor method String() to copy the string blueprint to our userName variable. var userName = new String(“Dilbert”); 45

20. Creating a Variable 6. The String() method allows us to supply an optional initial value for our new string. If we choose to, we need to supply a value that is of string-type. This is called variable initialization. Notice the word "Dilbert" is in quotations? The quotations are a way of identifying the word as a string. When we give a variable its first value, we also type the variable. JavaScript is an implicitly typed language. var userName = new String(“Dilbert”); 6

21. Creating Variables for Primitives For any of JavaScript's primitive data types (strings, integers, floats, Booleans), you can create a variable without calling on the constructor: var userName = "Dilbert"; Although this is syntactically correct, I want you to use constructor methods in N341. Why? Since other, more formal, languages (like Java) demand constructors, I want you to get used to the habit of using them here in JavaScript. Practice makes perfect!

22. Changing a Variable Value Changes in the program sometimes require changes in a variable’s value. To change a variable's value, we use variable assignment. Assignment replaces any previous variable values with a new value. Since JavaScript doesn't retain a variable's previous value during assignment, we say assignment is a destructive operation.

23. Assignment in JavaScript userName = “Dogbert”; “Gets the value of” Variable Name New Value

24. Variable Assignment: Input We can make our programs more interesting by interacting we our user via modal input Modal input is a way to ask a user a question and then put their answer into a variable In JavaScript, this is usually done using the prompt method. Prompt is a method of the Window object

25. Variable Assignment: Input Variable Name userName = window.prompt(“Your name?”, “”); Assignment Operator: “Gets the value of” Method Arguments: Question to be asked & default value Method: Creates a box to ask a question

26. Quick Note on the Dot Operator Did you notice in the previous example that the window object connected to its prompt method using a period? The period is called a dot operator. A dot operator is a way of showing how things are connected to objects. In the previous example, the dot operator connected the window object to its prompt method. We’ll learn more about the dot operator later …

27. Converting Variable Types Sometimes, it’s necessary to convert from one type of a variable value to another (for example, converting string input to an integer value). Converting values in JavaScript is usually done using any one of two parse functions or the toString() method: ◦ parseInt() – converts a variable value to an integer. ◦ parseFloat() – converts a variable value to a float. ◦ NUMBER.toString() – converts a variable value to a string. NOTE: When using modal windows, all input from the user comes back as a STRING type!

28. Conversion Example var myInteger = new Number(0); myInteger = window.prompt(“Give me an integer”, 0); myInteger = parseInt(myInteger); var myString = new String(""); myString = myInteger.toString();

29. Output in JavaScript One way to output information in JavaScript is to use the alert method of the window object The alert method takes either string literals or variable names as its argument: window.alert(“Hello World!”); var myMessage = new String(“Hello World!”); window.alert (myMessage);

30. Arithmetic Operators OperatorNameExample +Addition a = b + c -Subtraction a = b - c /Division a = b / c *Multiplication a = b * c

31. Arithmetic Operators OperatorNameExample %Modulus a = b % c + Unary Addition a = +b - Unary Subtraction a = -b

32. Arithmetic Operators OperatorNameExample ++ Pre-Increment a = ++b Post- Increment a = b++ -- Pre- Decrement a = --b Post- Decrement a = b--

33. Assignment Operators OperatorNameExampleEquivalency =Assignment x = y; x = "Hi"; *None += Add by Value x += 5; x = x + 5; -= Subtract by Value x -= 5; x = x – 5;

34. Assignment Operators OperatorNameExampleEquivalency /= Divide by Value x /= 5; x = x / 5; *= Multiply by Value x *= 5; x = x * 5; &= Modulus by Value x %= 5; x = x % 5;

35. String Concatenation A way to join variable values with other variable values or with string literals You should avoid long single-line concatenations (use multi-line instead). Use either the “+” operator or the “+=” operator. Hint: Keep spacing within quotes!

36. String Concatenation window.alert(“Hello ” + userName + “!”); or using a multi-line concatenation (preferred) … response = “Hello, ”; response += userName; response += “! It’s nice to meet you!”); window.alert(response);

37. Operator Precedence OrderDescriptionOperator 1 Parenthesis (Work from inside out) () 2 Dot Operator. 3 Instance Operator new 4 Multiplication, Division, Modulus * / % 5 Addition, Subtraction, Concatenation + - 6Assignment = += -= *= /= %=

38. Questions?