Introducing JavaScript

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 JavaScript programmers declare, initialize and assign data types to variables. Be able to describe how programmers assign values to variables. Be able to describe how programmers convert from one data type to another.

What is JavaScript? “Client-side” scripting language Usually housed in a Web-page Syntax is similar to C and Java NOT THE SAME AS JAVA! Deals with Objects

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 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)

What is an Object? (continued) 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). 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.

Examples of JavaScript Objects Examples of Common JavaScript Objects: A web browser’s window A string of characters An integer number A Boolean value (TRUE or FALSE) Text in a web page A menu in a web page

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 wise to add non-executable comments to your code

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 */)

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

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 * CREATED: 03.17.2002 * LAST MODIFIED: 03.19.2002 * MODIFIED BY: Bob Molnar * PURPOSE: The purpose of this program … */

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

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.

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!

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.

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.

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

Creating a Variable var userName = new String(“Dilbert”); 4 5 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. We use the constructor method String() to copy the string blueprint to our userName variable.

Creating a Variable var userName = new String(“Dilbert”); 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.

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 N201. 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!

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.

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

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

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

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 …

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!

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();

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);

Arithmetic Operators + a = b + c - a = b - c / a = b / c * a = b * c Name Example + Addition a = b + c - Subtraction a = b - c / Division a = b / c * Multiplication a = b * c

Arithmetic Operators % a = b % c + a = +b - a = -b Operator Name Example % Modulus a = b % c + Unary Addition a = +b - Unary Subtraction a = -b

Arithmetic Operators ++ b++ -- b-- Operator Name Example Increment Decrement b--

Assignment Operators Operator Name Example Equivalency = Assignment x = y; x = "Hi"; *None += Add by Value x += 5; x = x + 5; -= Subtract by Value x -= 5; x = x – 5;

Assignment Operators Operator Name Example Equivalency /= Divide by Value x /= 5; x = x / 5; *= Multiply by Value x *= 5; x = x * 5; &= Modulus by Value x %= 5; x = x % 5;

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!

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);

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

Questions?