Economic and Computational Efficient Algorithms for a Combinatorial Auctions

1
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• By
• Benito Mendoza

Department of Computer Science Engineering
Benito Mendoza
1
2
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Repetitive code
• Same code needed in more than one place in a
  script
• Type the code over and over
• Copy and paste - still not very efficient
• Script gets longer and longer
• What if you make a mistake?

3
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• We need a way to
• Package that code in one place
• Refer to the package whenever/wherever
• Modularization
• Re-useable
• Self-contained
• Reduce script size
• Make it easier to find and correct errors or make
  changes later

4
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Objects are modules
• Self-contained
• Data (properties)
• Code (methods)
• Re-useable
• Can invoke a method
• At any point in a script
• Repeatedly
• Can we create our own methods?

5
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Generally, a function is simply a group of one or
  more statements
• In JavaScript specifically, a function is
• A method
• of the window object
• Functions are created by declaring them

6
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Syntax for function declaration
• function someName()
• JavaScript statements

Reserved word
Required
7
Using Functions
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Good practice to declare functions in the ltheadgt
  section
• Ensures browser knows of the function
• Use functions in the ltbodygt section
• Calling a function similar to calling a method
  except object name not required
• someName()
• window.someName()

8
Using Functions
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• lthtmlgt
• ltheadgt
• lttitlegt lt/titlegt
• ltscript gt
• function someName()
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltscript gt
• someName()
• lt/scriptgt
• ltbodygt
• lt/htmlgt

2
1
5
3
4
6
9
Using Functions
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Ch09-Ex-02.html

10
Using Functions
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• ltbodygt
• some HTML
• a function call
• some more HTML
• lt/bodygt

ltbodygt some HTML function statement 1
function statement 2 some more
HTML lt/bodygt
11
Using Functions
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Any number of functions can be declared in one
  ltscriptgt element (within the ltheadgt section)
• Functions are executed in the order in which
  theyre called, not the order in which theyre
  declared.

12
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Parameter/argument the means by which data is
  supplied to a method
• confirm(Are you sure?)
• ultraJava.changeGrind(coarse)
• Why parameters?
• General code is re-useable

13
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• function printGreeting()
• alert(Hello, Fred)

function printGreeting() alert(Hello, Mary)
function greetFred() alert(Hello, Fred)
function greetMary() alert(Hello, Mary)
14
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Need a printGreeting function that uses a
  parameter
• function printGreeting(personName)
• alert(Hello , personName)
• Call by
• personNameFred
• printGreeting(personName)

15
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Passing a parameter

printGreeting
Main program
var personName personNameFred printGreeting
(personName)
personName
Fred
Fred
16
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Ch09-Ex-05.html

17
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Multiple parameters
• Declaring
• function sample(a, b, c, d)
• Calling
• sample(Bob,Mary,user1, user2)

18
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• One-for-one correspondence between parameter
  order in declaration and in call
• Declaration function sample(a, b, c, d)
• Call sample(Bob,Mary,user1, user2)

19
Parameters
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Ch09-Ex-07.html

20
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Array concept
• Window object hierarchy
• Images are children of the document object
• Numbered
• document.images0
• document.images1
• document.imagesn

Square brackets required
Numbering begins with zero
21
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Images loaded in the order they appear in the
  HTML document
• Image numbers are assigned in the same order
• First image document.images0
• Second image document.images1

22
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Images have attributes
• height
• width
• src
• Attribute references
• document.images0.width
• document.images3.src

23
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Problem referring to images by their object name
  is clumsy
• Have to figure out the order in which theyre
  loaded to determine the images number
• Using document.images5 isnt descriptive and
  makes the script harder to read and understand

24
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Solution id attribute of the img tag
• ltimg srceiffeltower.jpggt
• ltimg srceiffeltower.jpg idtowergt
• Object reference
• document.tower.width
• document.tower.src

25
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• height and width properties are read-only
• Therefore, you cant change them from JavaScript
• src property is read-write
• So cant change original image dimensions but
  you can replace it with another one

26
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers
Assume this is the 3rd image loaded

• ltimg srceiffeltower.jpg idtowergt
• document.images2.srceiffelnight.jpg
• (or)
• document.tower.srceiffelnight.jpg
• However, height and width of new image will be
  the same as the original image

27
Image Objects
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Ch09-Ex-04.htm

28
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Create an img tag with the original image
• Create an ltagt element (link) that includes event
  handlers
• onmouseover replaces original image
• onmouseout restores original image
• When user hovers over link the image changes
• When user leaves link the image changes back

29
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• ltimg srceiffeltower.jpg idday_towergt
• lta hrefnightschedule.html onmouseoverdocume
  nt.day_tower.srceiffelnight.jpg
  onmouseoutdocument.day_tower.srceiffeltower.jp
  g gt
• Click here for evening eventslt/agt

30
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• function nightImage()
• document.day_tower.srceiffelnight.jpg
• function dayImage()
• document.day_tower.srceiffeltower.jpg
• lta hrefnightschedule.html
• onmouseovernightImage()
• onmouseoutdayImage()gt
• Click here for evening eventslt/agt

31
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Problem All these images have to be downloaded
  to the users machine as they needed
• Solution pre-loaded (pre-cached) images
• Pre-cached images are loaded at the same time as
  the other page content

32
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Process
• Create an image object
• Load an image into that object
• Image object
• var nightimage new image(69,120)
• Load image
• nightimage.src night_tower.jpg

33
Image Rollovers
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• Example.html

34
Debugging Exercise
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• ltheadgt
• lttitlegtParameter Examplelt/titlegt
• ltscript type"text/javascript"gt
• function displayMessages(firstMsg, secondMsg,
  thirdMsg)
• alert(thirdMsg)
• alert("The first message is firstMsg")
• alert(The second message is "secondMsg")
• lt/scriptgt
• lt/headgt
• ltbodygt
• This is a sample page that uses JavaScript
  functions and parameters.ltbr /gt
• ltscript type"text/javascript"gt
• displaymessages("Ready?", "Let's go", "Not
  yet")
• lt/scriptgt
• ltformgt
• ltinput type"button" value"Click here to see
  some more messages"
• onclick"displaymessages("Here we go again",
  "What did you say?", "Time to go")"gt
• lt/formgt

35
Debugging Exercise
Divide and Conquer Using Functions Adding a
Delivery System Parameters Creating Image
Rollovers

• ltheadgt
• lttitlegtParameter Examplelt/titlegt
• ltscript type"text/javascript"gt
• function displayMessages(firstMsg, secondMsg,
  thirdMsg)
• alert(thirdMsg)
• alert("The first message is "
  firstMsg) lt!----gt
• alert("The second message is "
  secondMsg) lt!----gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• This is a sample page that uses JavaScript
  functions and parameters.ltbr /gt
• ltscript type"text/javascript"gt
• displayMessages("Ready?", "Let's go", "Not
  yet") lt!----gt
• lt/scriptgt
• ltformgt
• ltinput type"button" name"btn1" value"Click
  here to see some more messages" lt!----gt
• onclick"displayMessages('Here we go again',
  'What did you say?', 'Time to go')"gt lt!----gt
• lt/formgt

36
Extra

• http//www.tutorialspoint.com/script.aculo.us/inde
  x.htm