Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

Size: px

Start display at page:

Download "Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010"

Caren Hunter
6 years ago
Views:

1 Lecture 15 Javascript Announcements Project #1 Graded VG, G= doing well, OK = did the minimum, OK - = some issues, do better on P#2 Homework #6 posted, due 11/5 Get JavaScript by Example Most examples in book on class website Exam#2 No. Class Date Subject and Handout(s) 17 11/4/10 Examination Review Practice Exam PDF 18 11/9/10 More JavaScript Slides PDF UMass Thursday: Examination #2 (covers 19 11/10/10 Lec.11-16), location 142/150 1

2 Variables, types, etc. Variables Primitive Types provided by Javascript: Booleans, numbers and text (string) user-defined classes treated by Javascript as value types and when you pass them around they go as values some types, such as string, allow method calls Scope Complex Types standard or custom made Array Type untyped, so you can put everything you want in an Array possible to have thousands of items in an array Arrays are objects, they have methods and properties you can invoke at will e.g., the ".length" property indicates how many things are currently in the array var myarray = new Array(0, 2, 4);var myotherarray = new Array(); 2

3 Complex Types Array Type can also be created with the array notation, which uses square brackets: var myarray = [0, 2, 4];var myotherarray = []; Arrays are accessed using the square brackets: myarray[2] = "Hello";var text = myarray[2]; Complex Types Object Types An object within Javascript is created using the new operator: var myobject = new Object(); Objects can also be created with the object notation, which uses curly braces: var myobject = {}; JavaScript Objects can be built using inheritance and overriding, and you can use polymorphism. There are no scope modifiers, with all properties and methods having public access. 3

4 Variable scope In computer programming, scope is an enclosing context where values and expressions are associated. Various programming languages have various types of scopes. The type of scope determines what kind of entities it can contain and how it affects them -- or semantics. Variable scope local variables are those that are in scope within a specific part of the function, procedure, method, or subroutine, global variables are those that are in scope for the duration of program execution; can be accessed by any part of the program, and are read-write for all statements that access them 4

5 Scope In Javascript Variables declared within a function are local to that function (accessible only within that function) if a variable is initialized inside a function without var, it will have a global scope. Variables declared outside a function are global (accessible from anywhere on the page) A local variable can have the same name as a global variable Example declare a global variable a and assign it a value of 10 call a function in which we again initialize a variable named a var a = 10; disp_a( ); function disp_a( ) { var a = 20; alert("value of 'a' inside the function " + a); } alert("value of 'a' outside the function " + a); 5

6 Example example var a = 10; disp_a( ); function disp_a( ) { var a = 20; alert("value of 'a' inside the function " + a); } alert("value of 'a' outside the function " + a); since we have used the var keyword inside the function, the variable a will have a local scope once we come out of the function, the local variable no longer exists and the global variable takes over. Type conversion The rule is: If you add a number and a string, the result will be a string Example from W3C <html><head></head> <body> <script type="text/javascript"> x=5+5; document.write(x); document.write("<br />"); x="5"+"5"; document.write(x); document.write("<br />"); x=5+"5"; document.write(x); document.write("<br />"); x="5"+5; document.write(x); document.write("<br />"); </script> <p>the rule is: If you add a number and a string, the result will be a string.</p> </body> </html> 6

7 What are functions? a subroutine (also called procedure, method, function, or routine) is a portion of code within a larger program that performs a specific task and is relatively independent of the remaining code. Advantages decomposition into simpler steps reuse of code hiding implementation details Disadvantages computational overhead housekeeping JavaScript Functions To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to that function. You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external.js file). 7

8 JavaScript Functions Functions can be defined both in the <head> and in the <body> section of a document. to assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section JavaScript has built-in functions, objects and methods Functions, methods and objects Functions and methods are pretty much the same thing. Functions include event handlers, variables, and statements. Methods are associated with objects; an object is a collection of properties (primitive data types, other objects, or functions), functions in objects are called methods. document.write is a method, or actually document is the object, and write is the method. object hierarchy (subset) window document objects in the document Functions, in general, are a little more detailed. 8

9 Document object write( ) vs. writeln( ) methods write( ) outputs html to the document being parsed/interpreted document.write("<h1>this is a header</h1>"); writeln( ) does the same thing, except when it is inserted between html <pre> tags HTML <pre> </pre> <pre> is for pre-formatted 9

10 write( ) vs. writeln( ) methods <html> example <head><title>printing Output</title></head> <body bgcolor="yellow" text="blue"> <b>comparing the <em>document.write</em> and <em>document.writeln </em> methods</b><br> <script language="javascript"> document.write("<h3>one, "); // No newline document.writeln("two, "); document.writeln("three, "); document.write("blast off...<br>"); // break tag document.write("the browser you are using is " + navigator.useragent + "<br>"); </script> <pre> <script language="javascript"> document.writeln("with the <em>html <pre></em> tags, "); document.writeln("the <em>writeln</em> method produces a newline."); document.writeln("slam"); document.writeln("bang"); document.writeln("dunk!"); </script> </pre> </body> </html> Input/User Interaction Alert Box Example 1 Example 2 An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax: alert("sometext"); 10

11 Input/User Interaction Confirm Box example A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("sometext"); Input/User Interaction Prompt Box example A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax: prompt("sometext","defaultvalue"); 11

12 How to Define a Function function functionname(var1,var2,...,varx) { some code } How to develop the code? Variables, primitive & complex types, operators, assignments, condititionals Operators Because most JavaScript syntax is borrowed from C (and is therefore just like Java), we won t spend much time on it Arithmetic operators (all numbers are floating-point): + - * / % Comparison operators: < <= ==!= >= > Logical operators: &&! (&& and are short-circuit operators) Bitwise operators: & ^ ~ << >> >>> Assignment operators: += -= *= /= %= <<= >>= >>>= &= ^= = 12

13 JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators: Revise after here 13

14 JavaScript Arithmetic Operators When increment/decrement operators are used as prefixes, JavaScript first adds/subtracts one to the variable and then returns the value. When used as suffixes, the value is first returned and then the variable is incremented. var y = 5; x = --y; //Prefix; x is 4 document.write("x= ",x," y= ",y,"<br>"); var y = 5; x = y--; //Postfix; x is 5 document.write("x= ",x," y= ",y,"<br>"); var y = 5; x = ++y; //Prefix; x is 6 document.write("x= ",x," y= ",y,"<br>"); var y = 5; x = y++; //Postfix; x is 5 document.write("x= ",x," y= ",y,"<br>"); show Example Add two numbers <script type="text/javascript"> var num1, num2, sum num1 = prompt("enter first number") num2 = prompt("enter second number") sum = parseint(num1) + parseint(num2) alert("sum = " + sum) </script> The parseint() function parses a string and returns an integer. show 14

15 JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators: Operators String operator: + The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator. txt1="what a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a verynice day". 15

16 Operators To add a space between the two strings, insert a space into one of the strings: txt1="what a very "; txt2="nice day"; txt3=txt1+txt2; or txt1="what a very"; txt2="nice day"; txt3=txt1+" "+txt2 Additional Operators The conditional operator: condition? value_if_true :value_if_false Special equality tests: == and!= try to convert their operands to the same type before performing the test === and!== consider their operands unequal if they are of different types Additional operators (to be discussed): new typeof void delete 16

17 Statements Most JavaScript statements are also borrowed from C Assignment: greeting = "Hello, " + name; Compound statement { statement;...; statement } If statements: if (condition) statement; if (condition) statement; else statement; Familiar loop statements: while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement; Conditional Statements Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: if statement - use this statement if you want to execute some code only if a specified condition is true example if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false example if...else if...else statement - use this statement if you want to select one of many blocks of code to be executed example switch statement - use this statement if you want to select one of many blocks of code to be executed example 17

18 Statements This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them. <html> <body> <script type="text/javascript"> var r=math.random(); if (r>0.5) { document.write("<a href=' Web Development!</a>"); } Else { document.write("<a href=' Refsnes Data!</a>"); } </script> </body> </html> Random link Comparison Operators Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operator Operator == ===!= > < >= <= Description is equal to is exactly equal to (value and type) is not equal is greater than is less than is greater than or equal to is less than or equal to Example x==8 is false x===5 is true x==="5" is false x!=8 is true x>8 is false x<8 is true x>=8 is false x<=8 is true Can be used in conditional statements to compare values and take action depending on the result: if (age<18) document.write("too young") 18

19 Example <html> <head> Example <title>comparing Numbers</title> </head> <body> <script language = "JavaScript"> var x = 5; var y = 4; var result = x > y; document.writeln("<h3>the result is "+ result +".<br>"); result = x < y; document.writeln( "The result is " + result + ".<br>"); </script> </body> </html> Conditional with prompt box <html> <head> <title>using the JavaScript prompt box</title> </head> <body> <script language = "JavaScript"> var name=prompt("what is your name?", ""); document.write("<br>welcome to my world! "+ name + ".</font><br>"); 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? ", "")); </script> <body> </html> Example 19

20 Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator &&! Description and or not Example (x < 10 && y > 1) is true (x==5 y==5) is false!(x==y) is true JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. variablename=(condition)?value1:value2 Example greeting=(visitor=="pres")?"dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear". Logical Expressions Example <html> <head> <title>logical OR Operator</title> </head> <body bgcolor="lightblue"><font="+1"> <script language="javascript"> var answer = prompt("where should we eat? ", ""); if ( answer == "McDonald's" answer == "Taco Bell" answer == "Wendy's"){ alert("no fast food today, thanks."); } </script> </body> </html> 20

Type Conversion Remember JavaScript is loosely typed Three basic methods to convert the primitive data types String( ) Number( ) Boolean( ) This example The parseint( ) method parseint(string, radix)

21 Type Conversion Remember JavaScript is loosely typed Three basic methods to convert the primitive data types String( ) Number( ) Boolean( ) This example The parseint( ) method parseint(string, radix) string required, radix optional (base 2-36) If the string begins with "0x", the radix is 16 (hexadecimal) If the string begins with "0", the radix is 8 (octal). This feature is deprecated If the string begins with any other value, the radix is 10 (decimal) Parses from left to right and returns integers until it reaches a non-integer, then stops if the string doesn t begin with an integer, returns NaN 21

22 The parseint( ) method examples hello Route 66 6 dogs xa hexadecimal! 011 octal! 111, 2 12, 8 b, 16 Answers Example 5.15 parsefloat( ) method Like parseint( ), but returns a floating point number parsefloat(string) W3C example 22

23 eval( ) method The eval() function evaluates a string and executes it as if it was script code. If there is no result, undefined is returned W3C example Quigley example The return Statement The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement. This W3C example returns the product of two numbers (a and b) Another W3C example -- passing a parameter Another W3c example Scope reminder If you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. 23

24 Back to Conditional Statements We covered the following conditional statements: if statement - use this statement if you want to execute some code only if a specified condition is true if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false if...else if...else statement - use this statement if you want to select one of many blocks of code to be executed switch statement - use this statement if you want to select one of many blocks of code to be executed Next we will cover loops JavaScript Loops Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. In JavaScript there are two different kind of loops: for - loops through a block of code a specified number of time for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed } while - loops through a block of code while a specified condition is true while (var<=endvalue) { code to be executed } 24

25 For loop Example This W3C example defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs. Note: The increment parameter could also be negative, and the <= could be any comparing statement. The while loop Example This W3C example defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs: 25

26 The do/while loop Executes the body of the loop at least once before testing its condition example Quigley Examples for loop example while loop example 26

27 Nested loops <html> <head> <title>nested loops</title> </head> <body> <script language=javascript>  </script> </body> </html> Nested loops for ( var row = 0; row < 6; row++){ } document.write("<br>"); } row = 0 <br> row = <br> row and so on for ( var col=0; col < row; col++){ document.write(str); } col= 0 row col=0 <row col= 1 row col=0 <row col= 1 < row example 27

28 break and continue The break Statement will break the loop and continue executing the code that follows after the loop (if any) example The continue Statement will break the current loop and continue with the next value example JavaScript is not Java If you know Java, now you should have realized that you already know a great deal of JavaScript So far we have talked about things that are the same as in Java JavaScript has some features that resemble features in Java: JavaScript has Objects and primitive data types JavaScript has qualified names; for example, document.write("hello World"); JavaScript has Events and event handlers Exception handling in JavaScript is almost the same as in Java 28

29 JavaScript is not Java JavaScript has some features unlike anything in Java: Variable names are untyped: the type of a variable depends on the value it is currently holding Objects and arrays are defined in quite a different way JavaScript has with statements and a new kind of for statement Complex Types - Array Type All Arrays are untyped, so you can put in everything you want Arrays are objects, they have methods and properties you can invoke at will. the ".length" property indicates how many things are currently in the array add more things to the array, the value of the ".length" gets larger it is possible to have thousands of items in an array 29

30 Complex Types - Array Type Build an array by using the statement new followed by Array, as shown below. var myarray = new Array(0, 2, 4); var myotherarray = new Array(); Can also be created with the array notation, which uses square brackets: var myarray = [0, 2, 4]; var myotherarray = []; Accessed using the square brackets: myarray[2] = "Hello"; var text = myarray[2]; Object Types An object within Javascript is created using the new operator: var myobject = new Object(); JavaScript Objects can be built using inheritance and overriding, and you can use polymorphism. There are no scope modifiers, with all properties and methods having public access. You can access browser built-in objects and objects provided through browser JavaScript extensions. 30

31 Three ways to create an object You can use an object literal: var course = { number: "CIT597", teacher: "Dr. Dave" } You can use new to create a blank object, and add fields to it later: var course = new Object(); course.number = "CIT597"; course.teacher = "Dr. Dave"; You can write and use a constructor: function Course(n, t) { // best placed in <head> this.number = n; // keyword "this" is required, not optional this.teacher = t; } var course = new Course("CIT597", "Dr. Dave"); Object literals You don t declare the types of variables in JavaScript JavaScript has object literals, written with this syntax: { name1 : value1,..., namen : valuen } Example (from Netscape s documentation): car = {mycar: "Saturn", 7: "Mazda", getcar: CarTypes("Honda"), special: Sales} The fields are mycar, getcar, 7 (this is a legal field name), and special "Saturn" and "Mazda" are Strings CarTypes is a function call Sales is a variable you defined earlier Example use: document.write("i own a " + car.mycar); 31

32 Warnings JavaScript is a big, complex language So far, only scratched the surface It s easy to get started in JavaScript, but if you need to use it heavily, plan to invest time in learning it well Write and test your programs a little bit at a time JavaScript is not totally platform independent Expect different browsers to behave differently Write and test your programs a little bit at a time Browsers aren t designed to report errors 32

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010 Lecture 14 Javascript Announcements Project #2 New website Exam#2 No. Class Date Subject and Handout(s) 17 11/4/10 Examination Review Practice Exam PDF 18 11/9/10 Search, Safety, Security Slides PDF UMass