Scribd Logo
Carica

Benvenuto in Scribd!

  • Lec #4 Javascript

    Caricato da

    Khim Alcoy
    9 visualizzazioni4 pagine
    Javascript tutorial lesson 4

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Javascript tutorial lesson 4

    Copyright:

    © All Rights Reserved
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    9 visualizzazioni4 pagine

    Lec #4 Javascript

    Caricato da

    Khim Alcoy
    Javascript tutorial lesson 4

    Copyright:

    © All Rights Reserved
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    DCIT 65 – Web Development Lecture # 4

    <FORM>...</FORM>
    These tags must begin and end your form.

    The following are attributes of the FORM and /FORM tags:


     ACTION is the location where you want this form to go.
     METHOD is the way in which you send this information. The METHOD is usually POST, but
    sometimes you can use GET.

    <INPUT>
    This tag creates various input fields.

    Pairing this tag with the following attributes allows you to manipulate specific field designations:
     NAME is the name of this field.
     VALUE is the string or numeric value that is sent with this field.
     CHECKED applies to checkboxes and radio boxes and defines if they are checked on page load.
     TYPE determines which type of input this field is.
    o TEXT-A plain text box.
    o PASSWORD-A text box that echos bullets when you type into it. The bullets hide the typed
    text.
    o CHECKBOX-Renders a small box that indicates whether it is selected. Usually for Yes or No
    questions. They are commonly referred to as checkboxes.
    o RADIO-Renders a small circle that allows you to choose one among many options. They are
    commonly referred to as radio buttons.
    o IMAGE-Returns the coordinates of the image selected here (with x=num, y=num as the
    parameters returned). This is very similar to imagemaps, but is useful if you want to just
    return the xy value that someone clicks. The following is an example:
    <INPUT NAME="thisimage" TYPE="IMAGE" SRC="jonjie.jpg" ALIGN="TOP">
    o SUBMIT-When this is clicked, it submits the form.
    o BUTTON
    o RESET-Clears all input fields and resets to the defaults.
    o MAXLENGTH sets the maximum number of characters to be allowed within a field of a text
    or password type.

    <SELECT>…</SELECT>
    These tags present either a scrolling list of choices or a pop-up menu.
     NAME is the name of the data (required).
     SIZE determines how many choices to show. If set to 1 or omitted, it renders a pop-up menu. If set
    to 2 or more it is a scrolling list.
     MULTIPLE allows you to select multiple options and always renders a scrolling list.

    <OPTION>
    Contained within the SELECT and /SELECT tags, this tag designates a selectable item.
     VALUE is the value returned when the form is submitted if this option was selected.
     SELECTED means when the page is loaded, this option is selected by default.

    1 Prepared by: Ms. Steffanie D. Maglasang


    DCIT 65 – Web Development Lecture # 4

    <TEXTAREA>…</TEXTAREA>
    These tags provide an area for a user to enter multiple lines of text. This defaults to four rows in length, with
    each row 40 characters wide.
     NAME defines the name for the information (required).
     ROWS is the number of rows in this field.
     COLS is the number of characters wide this field is.
     WRAP determines how text flows inside a text area. You have three options for this attribute:
    o OFF-No text wrap.
    o VIRTUAL-Text flows to right border then wraps to next line.
    o PHYSICAL-Text flows beyond right border beyond the text area window.

    HTML Objects in JavaScript

    These form elements consist of all the "clickable" elements.

     Buttons, Checkboxes, and Radio Buttons


     The form Object Whenever you declare a <FORM>...</FORM> in your Web page,

    form Attributes

    <FORM
    NAME = "formname"
    TARGET = "windowname" \ TARGET specifies the window that the responses go to.
    ACTION = "serverURL"
    METHOD = GET | POST
    [ onSubmit = "handlerText" ] > \ The event handler onSubmit is optional.
    </FORM>

     The button Object The button object is a new type of INPUT tag that allows you to create general
    purpose buttons in a form.

     checkbox Object

    Using the checkbox Object

    <html>
    <script language="javascript">
    function mystatus()
    {
    (document.theForm.theCheckbox.checked) ?
    alert("The box is checked") :
    alert("The box is not checked! Oh no!")
    }
    </script>
    <form name="theForm">
    <input type="checkbox" name="theCheckbox" value="myValue" onClick="mystatus()">
    </form></html>

    2 Prepared by: Ms. Steffanie D. Maglasang


    DCIT 65 – Web Development Lecture # 4

     The radio Object This object allows a user to make a choice of a single selection from many.

    radio Object Syntax

    <INPUT
    TYPE="radio"
    NAME = "radioName"
    [CHECKED]
    [onClick = "handlerText"]>
    textToDisplay

     The text Object The text input field in an HTML document is your workhorse for inputting many types
    of information. Most other types of input in forms are derivations of this kind of input.

    text Object Properties


    Property Example Description
    defaultValue myText.defaultValue The value of the input tag at page load time
    Name myText.name The NAME argument
    Value formName.elements[0].value The VALUE argument

    text Object Methods


    Method Example Description
    Focus myText.focus() Equivalent to clicking this field
    Blur myText.blur() Equivalent to clicking another field after using this one
    Select myText.select() Equivalent to dragging the mouse across all the text in this
    field-selecting it

    text Object Event Handlers


    Event Handler Example Description
    onBlur <input type=text Runs "alert()" when focus leaves this field
    onBlur="alert('blur!')">
    onChange <input type=text Runs "alert()" if the text has changed when
    onChange="alert('changed')"> focus leaves this field
    onFocus <input type=text Runs "alert()"when user clicks in (or other-
    onFocus="alert('start typing!')"> wise gives focus to)this field.
    onSelect <input type=text "alert('text Runs "alert()" once onSelect =some text in
    selected!')"> this field is selected

    3 Prepared by: Ms. Steffanie D. Maglasang


    DCIT 65 – Web Development Lecture # 4

    Event Handlers and Text Fields

    <script language = "javascript">


    <!--
    var num =0
    function showLink(num){
    if (num==1) {document.forms[0].elements[0].value= "one";
    }
    if (num==2) {document.forms[0].elements[0].value = "two";
    }
    if (num==3) {document.forms[0].elements[0].value = "three";
    }
    }
    -->
    </script>
    <form>
    <input type=text size=60 >
    </form>
    <a href="#" onMouseOver="showLink(1)">one</a><br>
    <a href="#" onMouseOver="showLink(2)">two</a><br>
    <a href="#" onMouseOver="showLink(3)">three</a><br>

     The textarea Object When you need a user to input more than just one line of text in a form you use
    the textarea input type.

     The submit Object The submit button was originally intended in HTML to be the final button a user
    would click to send a form back to the server.

     The reset Object The reset button allows a user to completely reset a form's input fields to their
    defaults.

    4 Prepared by: Ms. Steffanie D. Maglasang

    Potrebbero piacerti anche