Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall Project #1, Exam #1, old homework

Size: px

Start display at page:

Download "Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall Project #1, Exam #1, old homework"

Brian Harrell
5 years ago
Views:

1 Lecture 16 Javascript Announcements Project #1, Exam #1, old homework Wendy Cooper 312 MTuThFr 10-3; or other times if I am in 310 Project #2 Submit a single PDF by mail or a printout in person Get JavaScript by Example Most examples in book on class website Exam#2 11/10 (Review 11/4) 1

2 Vote Today!!!!! 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 2

3 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. 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. <html> example <head> <script type="text/javascript"> Function product(a,b) { var a=15; a 15 return a*b; </head> <body> <script type="text/javascript"> var a=4; document.write(product(a,3)); document.write("<br>",a); </body> </html> a gets the value of a (4), b 3 3

4 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: += -= *= /= %= <<= >>= >>>= &= ^= = 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 4

5 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 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. 5

6 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: The do/while loop Executes the body of the loop at least once before testing its condition example 6

-- Hiding JavaScript from old browsers var str = "@"; for ( var row = 0; row < 6;

7 Quigley Examples for loop example while loop example Nested loops <html> <head> <title>nested loops</title> </head> <body> <script language=javascript>  </body> </html> 7

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

Events JavaScript helps create dynamic web pages Events are actions that can be detected by JavaScript every element on a web page has certain events which can trigger a JavaScript onclick event of a

9 Events JavaScript helps create dynamic web pages Events are actions that can be detected by JavaScript every element on a web page has certain events which can trigger a JavaScript onclick event of a button element to call a function when a user clicks on the button. the function will not be executed before the event occurs! Examples of events: A mouse click A UNIVERSITY web OF page MASSACHUSETTS or an image AMHERST loading CMPSCI 120 Fall 2010 Mousing over a hot spot on the web page Event Handlers 9

10 onload and onunload are triggered when the user enters or leaves the page often used to deal with cookies that should be set when a user enters or leaves a page. e.g., you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!" onload event often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. onfocus, onblur and onchange are often used in combination with validation of form fields. onblur An element loses focus onchange The user changes the content of a field onfocus An element gets focus Here the check () function will be called whenever the user changes the content of the field: <input type="text" size="30" id=" " onchange="check ()"> 10

11 onmouseover and onmouseout onmouseover and onmouseout are often used to create "animated" buttons. example <a href=" onmouseover="alert('an onmouseover event');return false"><img src="w3s.gif" alt="w3schools" /></a> JavaScript is not Java So far we have talked about things that are the same as in Java, but JavaScript also 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 11

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

13 Warnings 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 Don t expect to get any helpful error messages Object Orientation - concepts Class defines the abstract characteristics of a thing (object), including its attributes, fields or properties and its behaviors Object/Instance a pattern (exemplar) of a class that consists of state and behavior that's defined in the object's class Message passing process by which an object sends data to another object or asks the other object to invoke a method. A Few JavaScript Objects window document form image A Few JavaScript Methods alert() write() focus() A Few JavaScript Properties href (url string) bgcolor value (in a form text field) src (path & filename of an image) 13

14 JavaScript and objects Start with built-in JavaScript objects Objects are a form of data methods for examing properties of datatypes we create and methods for manipulating these. Properties are the values associated with an object. <script type="text/javascript"> var txt="hello World!"; document.write(txt.length); The output of the code above will be: 12 Object string is associated with string datatypes, Declaring a variable by assigning a string to it, in effect invokes the constructor var txt=new String(); JavaScript and objects Methods are the actions that can be performed on (or by) objects. using the touppercase() method of the String object to display a text in uppercase letters: <script type="text/javascript"> var str="hello world!"; document.write(str.touppercase()); The output of the code above will be: HELLO WORLD! 14

15 Three ways to create an object 1. You can use an object literal: var course = {number: "CIT597",teacher: "Dr. Dave" 2. 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"; Three ways to create an object 3. 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"); You don t declare the types of variables in JavaScript 15

16 W3C Try it Yourself - Examples using the string object to style strings Style strings use the indexof() method to return the position of the first occurrence of a specified string value in a string The indexof() method use the match() method to search for a specified string value within a string and return the string value if found The match() method use the replace() method to replace some characters with some other characters in a string The replace() method The Array Object to create an Array object called mycars: var mycars=new Array(); There are two ways of adding values to an array (you can add as many values as you need to define as many variables you require). Option 1: var mycars=new Array(); mycars[0]="saab"; mycars[1]="volvo"; mycars[2]="bmw"; You could also pass an integer argument to control the array's size: var mycars=new Array(3); mycars[0]="saab"; mycars[1]="volvo"; mycars[2]="bmw"; Option 2: var mycars=new Array("Saab","Volvo","BMW"); Note: If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. document.write(mycars[0]); 16

17 Manipulating the array object How to use a for...in statement to loop through the elements of an array. For...In Statement from W3C An example from Quigley an array of strings <script language="javascript"> var book = new Array(6); // Create an Array object book[0] = "War and Peace"; // Assign values its elements book[1] = "Huckleberry Finn"; book[2] = "The Return of the Native"; book[3] = "A Christmas Carol"; book[4] = "The Yearling"; book[5] = "Exodus"; for(var i in book){ document.write("book[" + i + "] "+ book[i] + "<br>"); Manipulating the array object An example from Quigley an array of numbers <html><head><title>the Array Object</title><body> <body> <h2>an Array of Numbers</h2> <script language="javascript"> var years = new Array(10); for(var i=0; i < years.length; i++ ){ years[i]=i ; document.write("years[" + i + "] = "+ years[i] + "<br>"); </body> </html> 17

language="javascript"> var states = new Array(); states["ca"] = "California"; states["me"] = "Maine"; states["mt"] = "Montana";

18 Manipulating the array object An Example from JSBE9.4 - Associative arrays <html><head><title>associative Arrays</title></head> <body> <h2>an Array Indexed by Strings</h2> <script language="javascript"> var states = new Array(); states["ca"] = "California"; states["me"] = "Maine"; states["mt"] = "Montana"; for( var i in states ){ document.write("the index is:<em> "+ i ); document.write(".</em> The value is: <em>" + states[i] + ".</em><br>"); </body> </html> Array properties & methods W3C W3C mod Q9.7 Q9.8 18

19 Manipulating the array object How to shift, unshift and slice JSBE 9.9 and 9.10 How to use the sort() method to sort a literal array. Literal array - sort() How to use the sort() method to sort a numeric array. Numeric array - sort() The Date Object get today's date. Return today's date and time used to work with dates and times. var mydate=new Date() will automatically hold the current date and time as its initial value! set Dates var mydate=new Date(); mydate.setfullyear(2010,0,14); set a Date object to be 5 days into the future: var mydate=new Date(); mydate.setdate(mydate.getdate()+5); Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself! 19

getday() Compare Two Dates & more var mydate=new Date(); mydate.

20 Date object methods Use gettime() to calculate the years since 1970 gettime Use getday() and an array to write a weekday, and not just a number. getday() Compare Two Dates & more var mydate=new Date(); mydate.setfullyear(2010,0,14); var today = new Date(); if (mydate>today) { alert("today is before 14th January 2010"); else { alert("today is a:er 14th January 2010"); 20

21 More date object manipulations prototype Quigley 9.13, 9.14 How to display a clock on your web page Display a clock Using the prototype property to extend the capabilities of the date object 9.15 function weekday(){ var now = this.getday(); var names = new Array(7); names[0]="sunday";... names[6]="saturday"; return(names[now]); Date.prototype.DayOfWeek=weekDay; In <head> </head> var today=new Date(); In <body> </body> document.write("today is " + today.dayofweek() + ".<br>"); Math Object The Math object allows you to perform mathematical tasks. includes several mathematical constants and methods. is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it. Syntax for using properties/methods of Math var pi_value=math.pi; var sqrt_value=math.sqrt(16); 21

22 math object properties var pi_value=math.pi; math object methods var sqrt_value=math.sqrt(16); Q9.17 max() min() round() Q

23 User defined objects new operator used to create an instance of an object var car= new Object() var friends = new Array( Tom, Dick, Mary ) var now = new Date( July 4, 1776) Object constructor A function (or a method) that creates and initializes an object var car= new Object() creates a reference to the object but properties and methods are not defined with var Example (Q8.3) <html> <head><title>user-defined objects</title> <script language = "javascript"> var toy = new Object(); // Create the object toy.name = "Lego"; // Assign properties to the object toy.color = "red"; toy.shape = "rectangle"; </head> <body bgcolor="lightblue"> <script language = "javascript"> document.write("<b>the toy is a " + toy.name + "."); document.write("<br>it is a " + toy.color + " " + toy.shape+ "."); </body> </html> 23

24 Creating an object with a function (Q8.4) <html> <head><title>user-defined objects</title></head> <script language = "javascript"> function book(title, author, publisher){ // Defining properties this.title = title; this.author = author; this.publisher = publisher; <body bgcolor="lightblue"></body> <script language = "javascript"> var mybook = new book("javascript by Example", "Ellie", "Prentice Hall"); document.writeln("<b>" + mybook.title + "<br>" + mybook.author + "<br>" + mybook.publisher ); </body> </html> Defining methods <html> <head><title>simple Methods</title> <script language = "javascript"> function distance(r, t){ // define the object this.rate = r; // assign properties this.time = t; function calc_distance(){ // define a function that will // be used as a method return this.rate * this.time; </head> <body bgcolor="lightblue"> <script language="javascript"> var speed=eval(prompt("what was your speed (miles per hour)? ","")); var elapsed=eval(prompt("how long did the trip take (hours)?","")); var howfar=new distance(speed, elapsed); // call the constructor howfar.distance=calc_distance; // create a new property var d = howfar.distance(); // invoke method alert("the distance is " + d + " miles."); </body> </html>

25 More Examples Method defined in a constructor 8.6 More Examples JSBE8.9 the with keyword <script language = "javascript"> function book(title, author, publisher){ this.title = title; // properties this.author = author; this.publisher = publisher; this.show = display; // Define a method function display(anybook){ with(this){ // The with keyword var info = "The title is " + title; info += "\nthe author is " + author; info += "\nthe publisher is " + publisher; alert(info); </head> <body bgcolor="lightblue"> <script language = "javascript"> var childbook = new book("a Child's Garden of Verses","Robert Lewis Stevenson", "Little Brown"); var adultbook = new book("war and Peace", "Leo Tolstoy","Penguin Books"); childbook.show(childbook); // call method for child's book adultbook.show(adultbook); // call method for adult s book </body> </html> 25

26 Recursion - computing factorials n! = n x n-1 x n-2 x. x 2 x 1 Using a for loop 0!=1 function fact(n) 3! = 3*2*1 = 6 { 5! = 5*4*3*2*1 = 120 var n, nfac=1; for(i=n;i>0;i--) { nfac=nfac*i; document.factorialinput.nfac.value = nfac example 8! = 8*7*6*5*4*3*2*1 = Recursion - computing factorials n! = n x n-1 x n-2*. x 2 x 1 Using recursion <script type="text/javascript"> function factorial(n) { if ((n == 0) (n == 1)) return 1 else { result = (n * factorial(n-1) ) return result example 26

The first sample. What is JavaScript?

The first sample. What is JavaScript? Java Script Introduction JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. In this lecture