IT

1
IT som værktøj

• Bent Thomsen
• Institut for Datalogi
• Aalborg Universitet

2
Functions

• Functions are code sequences that do something
  (perform a function) that you can call by name
  from inside other code sequences.
• You can also give them different information to
  work with (pass parameters) each time you call
  them.
• Syntax
• function fName(passedInfo)
• code to do the function
• Example
• function square(number)
• return number number

3
JavaScript - example
function testsalary(f) if (f lt 200000)
document.write("Poor sod!") else if (f
200000) document.write("Congratulations - you
are an exact Mr. Avarage") else if ((f gt 200000)
(f lt 500000)) document.write("High earner -
HUH!.") else document.write("Hello
Rockefeller") fprompt("Input your
salary","") testsalary(f)
4
Control flow and value passing

• When the browser starts to execute lines of code
  in a function, the function is said to have been
  called.
• We say control has passed to the function
• Functions can call other functions
• Functions can call themselves (recursion)
• Functions can be called by events (onClick)

5
Built in functions (or methods)

• JavaScript has a wide variety of built in
  functions available
• document.write
• alert()
• confirm()
• prompt()
• Date and Time functions
• GetTime()

6
JavaScript is an Object-Based Language

• The Objects JavaScript deal with are
• Windows
• Forms
• Form Elements
• Buttons, and Radio Buttons
• Check Boxes
• Objects have their own Unique Names.

7
Objects
JavaScript enabled browsers have built-in objects
which have properties, events and methods which
can be used by JavaScript. For example

• Date Object
• GetDate()
• GetTime()
• GetDay()
• GetMonth()
• Math Object
• abs(number)
• log(number)
• random()

• String Object
• fontcolor()
• fontsize()
• ToLowerCase()
• ToUpperCase()
• Window Object
• alert(message)
• confirm(message)
• close()

8
The Browser Object Model

• You want to use JavaScript to dynamically change
  different properties of the browser, such as link
  colors, border widths, etc., etc.
• How would you describe all the hundreds of
  properties in a way that was understandable and
  could be easily expressed in JavaScript?
• Its called the BROWSER OBJECT MODEL (BOM)

9
JavaScript Objects have properties

• In JavaScript, a Window Object has a Property
  called a Title.
• A Form Object's Property could be a Check Box.

10
JavaScript Objects have Methods

• The things that Objects do are called Methods.
• Here a few Methods that JavaScripts Objects can
  do
• buttons click()
• windows open()
• text can be selected()
• The parentheses are referring to a method rather
  than a property.
• Think of Objects and Properties as Nouns and
  Methods as Verbs.

11
JavaScript Dot Syntax

• Place Objects, Properties and Methods together to
  get a better description of an object or process.
• In JavaScript, these are separated by periods
  AKA, dots or dot syntax.
• document.images.name
• window.status
• document.write()
• forms.elements.radio.click()

Object Properties
Object Methods
12
Form Validation Introduction

• The creation of forms was covered in the HTML
  lectures.
• Review of form elements most based on the
  ltINPUT TYPE .. gt tag
• Type Text
• Type Checkbox
• Type Radio
• The exception - the drop down selection box
• ltSELECTgt ltOPTIONSgt lt/SELECTgt

13
Form Validation (2)

• With HTML alone, you have no control over what
  the user enters and no interactivity.
• What do you do if the user skips a required
  field?
• What do you do if the user chooses incompatible
  options
• The answer is - you create JavaScript validation
  code to check the form values.
• But how do you get at the data that has been
  entered?

14
Form Validation (3)

• Because an HTML form is part of the BOM, we use
  dot notation to access the Form elements (the
  Form is an object composed of Element objects -)
• The syntax for accessing text entries
• ltINPUT TYPE TEXTgt is
• document.formName.elementName.value
• value is a keyword
• document can be skipped
• formName and elementName are the names you gave
  your form and text input element
• So to get the value a user entered into a text
  field
• myTextVariable formName.elementName.value

15
Calculator Example
ltHTMLgt ltHEADgt ltTITLEgtSquare Calculator
Functionlt/TITLEgt ltSCRIPT LANGUAGE"JavaScript"gt lt!
-- Hide script from old browsers function
square(number) return number
number // End script hiding from old browsers
--gt lt/SCRIPTgt lt/HEADgt ltBODYgt ltH1gtSquare
Calculatorlt/H1gtltHRgt ltFORM METHOD"POST" gt Enter a
number ltINPUT NAME"number1" TYPE"INT"
VALUE"0"gt ltINPUT NAME"activate"
VALUE"Calculate" TYPE"BUTTON" OnClick"form.answ
er.value square(form.number1.value)"gtltBRgt The
square is ltINPUT NAME"answer" TYPE"INT"
VALUE"0"gt lt/FORMgt lt/BODYgt lt/HTMLgt
16
Handling JavaScript Events

• Events are actions that the user performs while
  visiting your page.
• Submitting a form and moving a mouse over an
  image that has a roll-over.

17
JavaScript Event Handlers

• JavaScript deals with events with commands called
  event handlers.
• In JavaScript, if the user clicks on a button,
  the onClick() event handler will take note of the
  action and perform whatever duties it was
  assigned.
• See the next slide for a listing of Event
  Handlers.

18
Event Handlers
19
Event Example

• Some Web designers like to have special messages
  pop-up in the Status Bar when a mouse passes over
  a Hypertext link.
• We will use a onMouseOver trick for this one.
• Code is on the next slide.

20
onMouseOver Code inside the ltBodygt Tag

• I'll use a Hyperlink to Hotbot and give it a cool
  description for the status bar.

Note You can't have a Scrolling Message and this
too!
21
Tips for Writing JavaScript

• Use comments throughout to help you understand
  the program. lt!-- comments --gt
• Use indented text to make your code easier to
  read and follow.
• JavaScript is case-sensitive, be careful.
• Include HTML comment tag to hide JavaScript from
  older browsers that dont support the code.
• Test your JavaScript program with several
  browsers if possible.

22
JavaScript programming

• There are many JavaScripts on the Web that you
  can copy and/or modify quite easily to fit your
  needs
• JavaScript programming often consist of
• Finding effects on a page that you want to
  duplicate
• Locating the code that performs the effect use
  View/Source in your browser
• Cutting the code from the original page and
  embedding it in your page
• Getting it to work in the new environment
• The time honored name for that process is HACKING

23
Opgaver og kursusmateriale
http//www.cs.auc.dk/bt/FITE03/index.htm
Happy Hacking