Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15.

Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15

Introduction to JavaScript 22 Today’s Topics Working with objects JavaScript data types and operators Conditional and loop statements Using events

Introduction to JavaScript 23 Review: A First JavaScript Program The Tag  JavaScript programs are run from within an HTML document  and Used to notify the browser that JavaScript statements are contained within

Introduction to JavaScript 24 Review: A First JavaScript Program The Tag  language attribute Denotes the scripting language being used  Default  JavaScript  Other languages (e.g., VBScript) may be used  Can also specify script language version No space between name and version Checked by browser, scripts ignored if browser doesn’t support version  For ECMAScript compatible browsers, omit version

Introduction to JavaScript 25

6 Review: Working with Variables Variables  To create: Use keyword var to declare the variable Use the assignment operator to assign the variable a value  Declare, then assign value (initialize) var employeeName; employeeName = “Ric”;  Declare and assign variable in a single statement var employeeName = “Ric”;

Introduction to JavaScript 27 Review: Working with Functions Defining Custom Functions  A function definition consists of three parts: Reserved word function followed by the function name (identifier) Parameters required by the function, contained within parentheses following the name  Parameters  variables used within the function  Zero or more may be used Function statements, delimited by curly braces { }

9 Some Built-in Functions http://www.devguru.com/Technologies/ecmascript/quickref/js_functions.html

Introduction to JavaScript 210 Working with Objects An object is a collection of properties and these properties include:  Primitive data types  Other objects  Functions(methods) Constructor function(constructor) is a function to create an instance of the object Use the new keyword with the constructor to create a new object You access the property that belongs to an object using the dot access operator, “.” :  document.writeln(``my message’’);  Some_variable: = document.form_name.input_element_name.value;

Introduction to JavaScript 211 Objects There are built-in objects that relate to the browser and its contents:  Window  Document  Navigator  Frames  Location  History  … These objects are global objects and you need not create a new instance when you use them

Introduction to JavaScript 213 Working with Objects There are also built-in JavaScript objects that extend the functionality of the language: JavaScript includes 11 built-in objects that relate to the language itself Each object contains various methods and properties for performing a particular task Can be used directly in program without instantiating a new object

Introduction to JavaScript 215 Working with Objects JavaScript built-in object properties and methods reference  http://archive.devx.com/projectcool/developer/ reference/jscript_obj.html http://archive.devx.com/projectcool/developer/ reference/jscript_obj.html

Introduction to JavaScript 216 Working with Objects Custom JavaScript objects (not required in this course)  Based on constructor functions Instantiate a new object or extending an old object Objects inherit all variables and statements of constructor function  Any JavaScript function can serve as a constructor Online reference:  http://www.sitepoint.com/article/oriented- programming-1/2 http://www.sitepoint.com/article/oriented- programming-1/2

Introduction to JavaScript 217 JavaScript Data Types Data Types  Primitive data types Data types that can be assigned only a single value JavaScript supports five primitive data types  Integers  Floating points  Booleans  Strings  Null

Introduction to JavaScript 219 Using Data Types Data Types  Primitive data types (cont’d) Null value  Data type and a value  Signifies that the variable contains no value Undefined variable  Has never had a value assigned to it  Has not been declared or  Does not exist

Introduction to JavaScript 220 Using Data Types Data Types  Reference (composite) data types Collections of data represented by a single variable name JavaScript supports three reference data types  Functions  Objects  Arrays

Introduction to JavaScript 221 Using Data Types Data Types  Strongly typed programming languages Data types do not change after they have been declared (data type declaration required) Also know as static typing  Loosely typed programming languages Variable data types are not required to be declared Also know as dynamic typing

Introduction to JavaScript 222 Using Data Types Data Types  JavaScript language Loosely typed programming language JavaScript does not allow data typing Determined automatically by JavaScript interpreter  Can be determined using typeof() operator typeof(variableName)  PrintDataTypes.html PrintDataTypes.html

Introduction to JavaScript 224 Using Data Types Numeric Data Types  JavaScript supports two numeric data types Integers  Positive or negative number with no decimal point  Range from –2 53 to 2 53 Floating points  Contains decimal places or written using exponential notation  Range from  1.7976931348623157 X 10 308 to  5 X 10 -324

Introduction to JavaScript 225 Using Data Types Boolean Values  Logical value of true or false Can be thought of as yes/on/1 or no/off/0  Used for decision making and comparing data Recall use in overriding internal event handler with custom code

Introduction to JavaScript 226 Using Data Types Strings  Text string contains zero or more characters delimited by double or single quotation marks  Text strings can be: Used as literal values Assigned to a variable Assigned a zero-length string value (empty string)

Introduction to JavaScript 227 Using Data Types Strings  Using quotation marks and apostrophes Use one to delimit and the other in the literal  var thisString = “Dave’s house”;  var anotherString = ‘The “house” of Dave’; Or, use escape sequence  var aThirdString = ‘Dave\’s house’;

Introduction to JavaScript 233 Using Data Types Strings  Using HTML tags in strings Use tags to format strings  Tag must be contained inside string quotes  var newString = “Dave’s house. ”;

Introduction to JavaScript 234 Using Data Types Arrays  Contains a set of data represented by a single variable name i.e., collection of variables contained in a single variable Used to store related things To create, use Array() constructor function  hospitalDepartments = new Array(numberOfElements);

Introduction to JavaScript 235 Using Data Types Arrays  Each piece of data in array is an element  Numbering of elements in array starts with 0  Size of array is declared and each element in array is accessed using brackets [ ] hospitalDepartments = new Array(10); hospitalDepartments[0] = “Oncology”;  Arrays can contain different data types  Array elements are undefined unless value is assigned

Introduction to JavaScript 236 Array Built-in Methods  myArray.length length return the number of elements in the array (which is alway one less than the last index).  myArray.sort() sort() sorts an array in alphabetical order.  myArray.push([value]) push([value]) appends value to the end of the array.  myArray.pop() pop() extracts and returns the last item of the array.

Introduction to JavaScript 237 Array Built-in Methods (cont’d)  myArray.unshift([value] unshift([value]) inserts value at the from of the array.  myArray.shift() shift() extracts and returns the first item of the array.  Online references: http://www.classes.cs.uchicago.edu/classes/archive/2004/win ter/10100-1/02/javascript/arrayMethods.html http://www.classes.cs.uchicago.edu/classes/archive/2004/win ter/10100-1/02/javascript/arrayMethods.html http://developer.netscape.com/viewsource/goodman_arrays. html http://developer.netscape.com/viewsource/goodman_arrays. html

Introduction to JavaScript 238 Automatic Arrays in Document Objects Some objects in the document object model can contain more than one nested object of the same type  Example: list of all links or a list of all forms or a list of all components in a form  http://archive.devx.com/projectcool/developer/referen ce/jscript_obj.html http://archive.devx.com/projectcool/developer/referen ce/jscript_obj.html The browser automatically maintains arrays of those items  Example: document.links, document.forms, document.forms[0].elements

Introduction to JavaScript 239 Automatic Arrays in Document Objects (cont’d) How to access the object in these arrays, for example, a link in the document?  By array syntax. If this link is the first link definition in the document (in source code order), the reference would be document.links[0]  Or you can also use the name (as a string) in array syntax, as follows: document.links["home"] Does not work in IE!  Examples: http://people.cs.uchicago.edu/~hai/hw6/accessobject.html

Introduction to JavaScript 240 Expressions and Operators Expressions  Combination of literal values, variables, operators, and other expressions that can be evaluated by the JavaScript interpreter to produce a result

Introduction to JavaScript 242 Expressions and Operators Expressions  Operators and operands can be used to create more complex expressions Operand  Variables and literals contained in an expression Operators  Symbols used in expressions to manipulate operands Example:  myNumber = 100;

Introduction to JavaScript 244 Expressions and Operators Operators  Can be binary or unary Binary  Requires an operand both before (left operand) and after (right operand) the operator  e.g.,  myNumber = 100; Unary  Requires a single operand either before or after the operator  e.g.,  myNumber++

Introduction to JavaScript 245 Expressions and Operators Arithmetic Operators  Used to perform mathematical calculations  Comprised of both binary and unary operators  Note: Addition operator (+), when used on strings concatenates the operands (operator overloading)

Introduction to JavaScript 246 Expressions and Operators Arithmetic Operators  Converting strings to integers: Reference: page 165 of JavaScript, the Definitive Guide.  Can use the Number() built-in function: var number = Number(string_value); only works with base-10 numbers, does not allow any non-space characters to appear in the string following the number

Introduction to JavaScript 247 Expressions and Operators Arithmetic Operators  Can use the parseInt() built-in function: var number = parseInt(“3 blind mice”) ; places the integer 3 into the var number only works with any base number, converts any number at the beginning of a string, ignores any non-number characters at the end.

Introduction to JavaScript 248 Expressions and Operators Arithmetic Operators  Can use the parseFloat() built-in function: var number = parseFloat(“3.12 blind mice”) ; places the value 3.12 into the number variable works with both integers and floating point numbers.

Introduction to JavaScript 249 Expressions and Operators Precision: You can adjust the number of digits a number has with number.toPrecision() var n = 12345.6789 n.toPrecision(1)// returns 1e+4 n.toPrecision(3)// returns 1.23e+4 n.toPrecision(5)// returns 12346: note rounding n.toPrecision(7)// returns 12345.67 n.toPrecision(10)// returns 12345.67890: note added zero

Introduction to JavaScript 250 Expressions and Operators Rounding: You can adjust a number by rounding with Math.round(theNum); Rounds a float number to nearest integer (.5 goes up). var n = 12345.6789 theNum = Math.round(n); // theNum now contains 12346

Introduction to JavaScript 252 Expressions and Operators Examples:  numInPrompt.html numInPrompt.html  simple expressions folder ArithmeticExamples.html BirthInfo.html ImprovedProgram.html

Introduction to JavaScript 253 Expressions and Operators Arithmetic Operators  Unary operators Prefix operator  Placed before the operand ++count  Value returned after operation Postfix operator  Placed after the operand count++  Value returned before operation

Introduction to JavaScript 254 Expressions and Operators Assignment Operators  Used for assigning a value to a variable  Basic assignment operator (=) Assign initial value to new variable Assign a new value to an existing variable  NaN Not a Number Returned when a mathematical expression does not result in a numerical value

Introduction to JavaScript 257 Expressions and Operators Comparison Operators  Used to compare two operands for equality and if one numeric value is greater than another  Can use number or string values as operands

Introduction to JavaScript 259 Expressions and Operators Comparison Operators  Conditional operator Executes one of two expressions, based on the results of a conditional expression Syntax  cond_expression ? expression1 : expression2; If con_expression = true  expression1 executes If con_expression = false  expression2 executes

Introduction to JavaScript 260 Expressions and Operators Logical Operators  Used for comparing two Boolean operands for equality  Comparison returns a Boolean value  Comprised of both binary and unary operators

Introduction to JavaScript 262 Logical Operators Examples:  BooleanVariables.html BooleanVariables.html  LogicalExamples.html LogicalExamples.html

Introduction to JavaScript 263 Expressions and Operators Working with Strings  JavaScript has two operators that can be used with Strings to combine two strings Concatenation operator (+)  var oneString = “one”;  var anotherString = oneString + “, two, three, …”; Assignment operator (+=)  var oneString = “one”;  oneString += “, two, three, …”;

Introduction to JavaScript 264 Expressions and Operators String Object  Literal strings and string variables in JavaScript are represented by a String object  The String object contains methods for manipulating text strings

Introduction to JavaScript 265 Expressions and Operators String Object  length property Returns the number of characters in a string  Parsing Act of extracting characters or substrings from a larger string

Introduction to JavaScript 266 Expressions and Operators String Object  Parsing using the split() built-in function Reference: Javascript: the Definitive Guide, p 529. stringVariable.split(delimiter). Returns an array of strings, created by splitting string into substrings at the boundaries specified by delimiter.

Introduction to JavaScript 267 Expressions and Operators String Object  Parsing using the split() built-in function. Example: var myVar = “John Barr”; var newVar = myVar.split(“ “); newVar contains [“John”, “Barr”]

Introduction to JavaScript 268 Expressions and Operators String Object  Parsing using the split() built-in function. Example: var myVar = “red;blue;green;yellow”; var newVar = myVar.split(“;“); newVar contains [“red”, “blue”.”green”,”yellow”]

Introduction to JavaScript 269 Expressions and Operators Example:  StringExamples.html StringExamples.html

Introduction to JavaScript 270 Expressions and Operators Operator Precedence  Order of priority in which operations in an expression are evaluated  Expressions are evaluated On a left-to-right basis With the highest priority precedence evaluated first

Introduction to JavaScript 271 Expressions and Operators Operator Precedence  Parentheses/brackets/dot (( ) [ ].)  Negation/increment (! - ++ -- typeof void)  Multiplication/division/modulus (* / %)  Addition/subtraction (+ -)  Comparison ( >=)  Equality (== !=)  Logical AND (&&)  Logical OR (||)  Assignment operators (= += -= *= /= %=)  Comma (,)

Introduction to JavaScript 272 Decision Making Statements if statements if…else statements Nested if statements switch statements

Introduction to JavaScript 273 Decision Making  Process of determining the order in which statements execute in a program AKA – flow control  Decision-Making Structures Special type of JavaScript statements used for making decisions

Introduction to JavaScript 274 Decision Making if Statements  Used to execute specific programming code if the evaluation of a conditional expression returns a value of true “Do this or don’t do this”  Syntax (3 primary parts) if (conditional_expression) { statement(s); }

Introduction to JavaScript 275 Decision Making if Statements  Operation If the conditional expression is true, the statement(s) is/are executed Control then continues to subsequent code  Command block Multiple statements contained within a set of braces (require curly braces)

Introduction to JavaScript 279 Decision Making if Statements  Conditional Expression Can consist of:  Comparison operators  Logical operators  Combination of the two Must resolve to Boolean value

Introduction to JavaScript 280 Decision Making if…else Statements  Used to execute one set of code if the evaluation of a conditional expression returns a value of true, otherwise executes another set of code “Do this or do something else”  Syntax if (conditional_expression) { statement(s); } else { statement(s); }

Introduction to JavaScript 282 Decision Making Nested if and if…else Statements  Nested statements Statements contained within other statements  Syntax (variable) if (conditional_expression) { statement(s); if (conditional_expression) { statement(s); } } else { statement(s); }

Introduction to JavaScript 285 Decision Making switch Statements  Controls program flow by executing a specific set of statements, depending on the value of an expression  Syntax switch (expression) { case label1: statement(s); break; case label2: statement(s); break; default: statement(s); }

Introduction to JavaScript 286 Decision Making switch Statements  Case labels Identify specific code segments Can use a variety of data types as case labels  Break statement Used to exit switch statements  Default label Contains statements that execute when the condition expression doesn’t match any of the case labels

Introduction to JavaScript 288 Repetition Statements while statements do…while statements for statements for…in statements with statements continue statements

Introduction to JavaScript 289 Repetition The if, if…else and switch statements select only a single branch of code to execute, then continue to the statement that follows  Loop statements Repeatedly execute a statement or a series of statements while a specific is true or until a specific condition becomes true

Introduction to JavaScript 290 Repetition while Statements  Used for repeating a statement or a series of statements as long as a given conditional expression evaluates to true Typically uses a counter to keep track of iteration  Syntax while (conditional_expression) { statement(s); }

Introduction to JavaScript 291 Repetition while Statements  Example: var count = 1; while (count <= 5) { document.writeln(count); ++count; } document.writeln(“You have printed 5 numbers.”);

Introduction to JavaScript 293 Repetition while Statements  Example: var count = 10; while (count > 0) { document.writeln(count); --count; } document.writeln(“We have liftoff.”);

Introduction to JavaScript 295 Repetition while Statements  Example: var count = 1; while (count <= 100) { document.writeln(count); count *= 2; }

Introduction to JavaScript 297 Repetition while Statements  Infinite loop A situation in which a loop statement never ends because the conditional expression is never updated or is never false  Need to include code within the body of the while statement that changes some part of the conditional expression  Should also include code that monitors the conditional expression

Introduction to JavaScript 298 Repetition do…while Statements  Executes a statement or statements once, then repeats the execution as long as a given conditional expression evaluates to true “Do once, then test to see if it is done again”  Syntax do { statement(s); } while (conditional_expression) ;

Introduction to JavaScript 2101 Repetition for Statements  Used for repeating a statement or series of statements as long as a given conditional expression evaluates to true “Do for a prescribed number of iterations”  Syntax for (initialization_expression; condition; update_statement) { statement(s); }

Introduction to JavaScript 2102 Repetition for Statements  Steps in processing a for loop Initialization expression is started  Only occurs once, when loop is first encountered Evaluate condition  If condition == true  execute loop body, go to next step  If condition == false  for statement ends Execute update statement  Then return to condition evaluation

Introduction to JavaScript 2106 Repetition break Statements  Stop executing the looping statement continue Statements  Halts a looping statement and restarts the loop with a new iteration

Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15.

Similar presentations

Presentation on theme: "Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15.

Similar presentations

Presentation on theme: "Introduction to JavaScript 21 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 15."— Presentation transcript:

Similar presentations

About project

Feedback