2. IT – som værktøj Bent Thomsen Institut for Datalogi Aalborg Universitet

3. 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 }

4. JavaScript - example function testsalary(f) { if (f < 200000) document.write("Poor sod!") else if (f == 200000) document.write("Congratulations - you are an exact Mr. Avarage") else if ((f > 200000) && (f <= 500000)) document.write("High earner - HUH!.") else document.write("Hello Rockefeller") }; f=prompt("Input your salary",""); testsalary(f)

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

6. 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()

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

8. Objects 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() JavaScript enabled browsers have built-in objects which have properties, events and methods which can be used by JavaScript. For example:

9. 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)

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

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

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

13. Form Validation Introduction The creation of forms was covered in the HTML lectures. Review of form elements – most based on the tag –Type = Text –Type = Checkbox –Type = Radio –The exception - the drop down selection box –

14. 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?

15. 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: – 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

16. Calculator Example Square Calculator Function <!-- Hide script from old browsers function square(number) { return number * number } // End script hiding from old browsers --> Square Calculator Enter a number <INPUT NAME="activate" VALUE="Calculate" TYPE="BUTTON" OnClick="form.answer.value = square(form.number1.value)"> The square is

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

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

19. Event Handlers

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

21. onMouseOver Code inside the 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!

22. Tips for Writing JavaScript Use comments throughout to help you understand the program. 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 don’t support the code. Test your JavaScript program with several browsers if possible.

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

24. Opgaver og kursusmateriale http://www.cs.auc.dk/~bt/FITE03/index.htm