Suzanne J. Sultan Javascript Lecture 2

Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with parameters Structure of function: function function-name( ) { // ……….. ………… } javascript Statements parameters

Suzanne J. Sultan Function without parameter Accept the user name and write welcome statement to the entered user. function showMessage ( ) { var userName = prompt(”enter",""); alert(" welcome" + userName ); } // calling click to show message

Suzanne J. Sultan Function with parameter function showmessage(name) { alert(" welcome" + name ); } click

Suzanne J. Sultan Use the same function and send the parameter JavaScript Alert Boxes function change( color) {document.bgColor=color; } Box #1 Box #2 Property of the object document

Suzanne J. Sultan Multiple parameters function box (Text, color) { document.bgColor=color; alert (Text); document.bgColor="white";} Box #1 Box #2 Note: # the same page

Suzanne J. Sultan using the "document" object's location property <!-- function demo() { document.location=" } //--> google

Suzanne J. Sultan Using Date( ) object and time function displaydate() { date = new Date(); day= date.getDay(); month=date.getMonth(); year=date.getYear(); hour=date.getHours(); alert( day +" - "+month+" - "+ year +"\n"+hour); } display date and time Exercise: Adjusting For Military Time AM- PM

Suzanne J. Sultan forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information as:  text fields,  textarea fields,  drop-down menus,  radio buttons,  checkboxes, etc.) in a form.

Cont. A form is defined with the tag.. input elements. Suzanne J. Sultan

Component of form 1- tag to enter data and do specific function  Text field  Radio buttons  Check boxes  Submit  Reset  Normal button 2- tag (drop down menu)  Drop down menu Suzanne J. Sultan

1- and text field The most used form tag is the tag. The type of input is specified with the type attribute. Text Fields  Text fields are used when you want the user to type letters, numbers, etc. in a form. Examole: First name: <input type="text" name="firstname" value=“enter here” size= 30 maxlength=30> …. First name: * the width of the text field is 20 characters by default. Suzanne J. Sultan Enter here

and Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Male Female Suzanne J. Sultan Male female Write both attribute ( name –id) with the same name

and Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. I have a bike: I have a car: Suzanne J. Sultan I have a bike: I have a car:

and submit When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input. Suzanne J. Sultan submit

and reset Reset button Normal button Suzanne J. Sultan

2- tag and Drop down box your car: Volvo Saab Fiat Audi Suzanne J. Sultan

Form and javascript Enter your name into text field and alert message will be displayed “ welcome Omar” as an example. function display(c) { alert("hggfhj"+c); } Suzanne J. Sultan

Form + javascript Two buttons with label “red” and “green”, pressing button will affect background color..using function with parameter. function display(c) { document.bgColor=c; } Suzanne J. Sultan