1. Data types, Literals (constants) and Variables Data types specify what kind of data, such as numbers and characters, can be stored and manipulated within a program. JavaScript has primitive data types and composite data types.

2. Primitive Data Types Numeric String Boolean Special types Null Undefined Composite Data Types (discussed later in the course) Objects Arrays Functions

3. Numeric Literals Integers – numbers that do not contain a decimal point. Can be expressed in decimal (10), octal(8) and hexadecimal(16) and are either positive or negative values (-39; +14). Floating Point – fractional numbers. They must contain a decimal point or an exponent specifier. The letter ‘e’ for the exponent can be either lowercase or uppercase (1.2e-3; 4.5E+6)

4. String Literals String literals are rows of characters enclosed in either double or single quotes. The quotes must be matched. Strings are called constants or literals. Escape sequences: mechanism for quoting a single character: \n (new line); \r (return); \f (form feed); \b (backspace); \t (tab); \uXXXX (Unicode character specified by the four hex digits XXXX.

5. Example <!-- Hide script from old browsers. document.write("\t\tHello\nworld!\n"); document.writeln("\"Nice day, Mate.\"\n"); document.writeln('Smiley face: \u263A\n'); document.writeln('Copyright: \u00A9\n'); //End hiding here. -->

6. String Concatenation The operator is a plus (+) signal. The operands are two strings. If on operand is a number and the other is a string, JavaScript will still concatenate them as strings. If both operands are numbers, then the (+) will be the addition operator: “5” + 10 = 510 5 + 10 = 15 This is one of the most common source of errors.

7. Boolean Literals Have only one of two values: true or false (yes or no; on or off; 1 or 0). Used to test if a condition is true or false. TRUE evaluates to 1 FALSE evaluates to 0

8. Null and undefined Null keyword represents no value, nothing, not even an empty string or zero. It is a type of JavaScript object. When a variable is assigned null, it does not contain any valid data type. A variable that has been declared but given no initial value, contains the value undefined and will produce a runtime error if you try to use it.

9. The “typeof” operator Returns a string to identify the type of its operand. If there is no value associated with the variable, the typeof operator returns undefined. Format: typeof (operand)

10. Example The typeof Operator <!-- Hide script from old browsers. document.write(" 55 is type " + typeof(55), " "); document.write(' "hello there" is type ' + typeof("hello there"), " "); document.write(" true is type " + typeof(true), " "); document.write(" null is type "+typeof(null), " "); document.write(" undefined is type "+typeof(undefined), " "); //End hiding here. -->

11. Variables Variables are data items that represent a memory storage location in the computer. Variables hold data such as numbers and strings. Variables have a “name”, a “type” and a “value”. The values assigned to variables may change throughout the run of a program whereas constants (literals) remain fixed. JavaScript variables can be assigned numeric, string, and Boolean data. In JavaScript you do not have to specify the data type of a variable. Doing so will produce an error. When you assign a value to a variable, JavaScript will figure out what type of data is being stored in the variable.

12. Valid names to variables Variable names consists of any number of letters and digits. First character must be a letter or an underscore. As reserved keywords do not contain underscores, if you use one, you are safe of inadvertently use a reserved keyword. Variable names are case sensitive. JavaScript does not allow you to use a number as the first character in an identifier, so that it can easily distinguish between an identifier and a literal value.

13. Declaring and Initializing Variables Variables must be declared before they can be used. Usually you declare them in the of the HTML document. You can use the keyword “var”. It is good practice to use it, but it is not mandatory. Examples: var first_name = “Roberto”; first_name = “Roberto”; var first_name; You can declare multiple variables on the same line by separating each one with a comma: var first_name, var middle_name, var last_name; When you declare a variable without assigning it a value, you must use “var”, and the variable will initially contain the value undefined.

14. Example of error Using the var Keyword var language="English"; var name; age; document.write("Name is "+ name);

15. Dynamically or Loosely Typed Language JavaScript interpreter will always convert the data to the correct type: Variable AssignmentConversion var item = 1.2;Assigned a float item = 3;Converted to integer item = “Today is Tuesday”; Converted to string item = true;Converted to Boolean item = null;Converted to null

16. Example JavaScript Variables var first_name="Christian"; // first_name is assigned a string var last_name="Dobbins"; // last_name is assigned a string var age = 8; // age is assigned an integer var ssn; // Unassigned variable var job_title=null; // job_title is assigned null document.write(" Name: " + first_name + " " + last_name + " "); document.write(" Age: " + age + " "); document.write(" Ssn: " + ssn + " "); document.write(" Job Title: " + job_title + " "); ssn="xxx-xx-xxxx"; document.write(" Now Ssn is: " + ssn, " ");

17. Scopes of Variables Scope describes where a variable is visible, or where it can be used within the program. A global variable can be accessed from any JavaScrip script on a page. A local (private) variable is created when a variable is declared within a function. They must be declared with the keyword var. They are accessible only from within the function from the time of declaration to the end of the enclosing block. They take precedence over any global variable with the same name.

18. Concatenation and Variables Concatenation var x = 25; var y = 5 + "10 years"; document.write( x + " cats", " "); document.write( "almost " + 25, " "); document.write( x + 4, " "); document.write( y, " "); document.write(x + 5 + " dogs"+ " "); document.write(" dogs"+ x + 5, " ");

19. Dialog Boxes Dialog Boxes are used to interact with the user. Dialog boxes are created with three methods: alert () prompt() confirm()

20. The alert() method Creates an independent box which contains a small triangle with an exclamation point. A user message is placed after the triangle, and beneath it, an OK button (IE). When this dialog box pups up, all execution is stopped until the user presses the OK button in the pop-up box. The message is a string of text enclosed in double quotes, and send as a single argument to the alert() method.

21. Creating first Window // this is used for comments alert ("Hello World");

22. Example of alert() dialog box Dialog Box Testing the alert method document.write(" "); document.write("Its a bird, "); document.write("Its a plane, "); alert("Its Superman!");

23. Using variables You can do a similar program like the Hello World using variables. Hello Mark Hello, Michael var greetings; greetings = "Hi there, Mirza"; alert (greetings);

24. Example Using JavaScript alert box alert("Welcome to\nJavaScript Programming!"); var message1="Match your Quotes and "; var message2="Beware of Little Bugs "; alert(message1 + message2); </script

25. Doing Math Adder The Adder var meal = 22.50; var tip = meal * 0.15; var total = meal + tip; alert ("the meal is $" + meal); alert ("the tip is $" + tip); alert ("Total Bill: $" + total);

26. Using Numeric Variables – the Bad Adder var meal; meal = prompt ("How much was the meal?"); var tip = meal * 0.15; var total = meal + tip; alert ("the meal is $" + meal); alert ("the tip is $" + tip); alert ("Total Bill: $" + total);

27. The Good Adder Application var meal; meal = prompt ("How much was the meal?"); meal = eval(meal); var tip = meal * 0.15; var total = meal + tip; alert ("the meal is $" + meal); alert ("the tip is $" + tip); alert ("Total Bill: $" + total);

28. The prompt() method It accept user inputs. It pops-up with a simple textfield box. After the user enters text into the prompt dialog box, its value is returned. The prompt dialog box takes two arguments: a string of text that is normally displayed as a question to the user, prompting him to do something, and another string of text which is the initial default setting for the box.

29. prompt() method example Using the JavaScript prompt box var name=prompt("What is your name?", ""); document.write(" Welcome to my world! "+ name + ". "); var age=prompt("Tell me your age.", "Age"); if ( age == null){ // if user presses the cancel button alert("Not sharing your age with me");} else{ alert(age + " is young"); } alert(prompt("Where do you live? ", ""));

30. String Methods stringVar.toUpperCase() -> converts stringVar to all uppercase letters. stringVar.length -> return the number of characters in the stringVar variable.

31. Name Game var firstName = ""; var lastName = ""; var numLetters = 0; firstName = prompt ("Hi, What's your first name?"); alert ("That's a nice name, " + firstName); alert ("I think I'll shout it: " + firstName.toUpperCase()); lastName = prompt ("So, what's your last name, " + firstName + "?"); alert ("Oh." + firstName + " " + lastName + "."); alert ("Sometimes called " + lastName + "," + firstName); numLetters = firstName.length + lastName.length; alert ("Did you know there are " + numLetters + " letters in your name?");

32. The confirm() method The confirm dialog box is used to confirm a user’s answer to a question. A question mark will appear in the box with an OK button and a Cancel button. Pressing OK, TRUE is returned. Pressing Cancel, FALSE is returned. This method takes only one argument, the question you will ask the user.

33. confirm() method example Using the JavaScript confirm box document.clear // Clears the page if(confirm("Are you really OK?") == true){ alert("Then we can proceed!"); } else{ alert("We'll try when you feel better? "); }