Your name or email adress:
Do you already have an account?
Forgot your password?
  • Log in or Sign up



    Advertise here
    Results 1 to 11 of 11
    1. #1
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Javascript Tutorial Part 7 - Forms & Functions

      Introduction

      In part 6 I showed you how to use If and loops. In this part I will show you how you can manipulate HTML forms with JavaScript to improve your website.

    2. # ADS
      Advertise here Circuit advertisement
      Join Date
      My Birthday
      Posts
      Million and counting


       
    3. #2
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Changing The Value Of A Text Box

      Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.

      Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):

      <form name="formname">
      </form>

      In this form you can place a text box using:

      <input type="text" name="boxname">

      Once you have this you can create your first JavaScript to refer to a form:


      Move the mouse over here to add some text to the box

      This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:

      window.document.example1.first_text.value='Hi there';

      This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called 'example1'.

      You can also do this with multiline text boxes. You can use
      /n
      to start a new line.

      In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.

      ahmadatta2009 - ahmad paolo

    4. #3
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Events

      Just like links, you can set events for items in a form. They are:

      onBlur - Happens when the cursor is moved out of the field
      onFocus - Happens when the cursor is moved into the field
      onChange - Happens when the field is changed and the cursor moves out of it

      These are placed into the code as part of the form's item for example:

      <input type="text" onBlur="dothis">

      ahmadatta2009 - ahmad paolo

    5. #4
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      JavaScript Functions

      JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.

      Functions take the following form:

      function functionname(parameters)
      {

      }

      For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):

      function sayhi()
      {
      alert(Hi there!);
      }

      Then, anywhere in the text you could place this:

      <a href="#" onMouseOver="sayhi();">Say Hi</a>

      Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.


      ahmadatta2009 - ahmad paolo

    6. #5
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Parameters

      Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:

      function say(what)
      {
      alert(what);
      }

      in the head, then:

      <a href="#" onMouseOver="say(hi);">Say Hi</a>
      <a href="#" onMouseOver="say(bye);">Say Bye</a>

      What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word 'what'. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what='something'. You can even do this with multiple pieces of information by separating th
      em by commas.

      As you can see functions and parameters are very useful.


      ahmadatta2009 - ahmad paolo

    7. #6
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      I hope that everyone is

      Has benefited from the my lesson

      Greetings: ...

      ahmadatta2009 - ahmad paolo

    8. #7
      Join Date
      Mar 2011
      Posts
      429
      MTV$
      282
      Thanks
      0
      Thanked 0 Times in 0 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Nice tutorial, something like what I was looking for, Thanks, Looks neat, I'll try to integrate it in my site's script, hope it works well, as JS is a very good and loads really fast !

    9. #8
      Join Date
      Sep 2012
      Posts
      1,698
      MTV$
      5,031
      Thanks
      2
      Thanked 9 Times in 9 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Javascript functions
      To keep the browser from executing a script as soon as the page is loaded you can write your script as a function.
      A function contains some code that will be executed only by an event or by a call to that function.
      You may call a function from any where within the page from other pages if the function is embedded in an external javascript files.
      Functions are defined at the beginning of a page in the <head> section.
      Function is a reusable code block that will be executed by an event or when the function is called.
      Ex:- 1
      <head>
      <script>
      Function display message()
      {
      Alert (“hello world !”)
      }
      </script>
      </head>
      <body>
      <input type=”button” value=”cluck me !” onclick=” display message()”>
      </body>
      hahahahhaha........... lol its ease of using

    10. #9
      Join Date
      Sep 2012
      Posts
      1,124
      MTV$
      3,336
      Thanks
      1
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.

      Functions take the following form:

      function functionname(parameters)
      {

      }

      For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):

    11. #10
      Join Date
      Sep 2012
      Posts
      1,037
      MTV$
      1,042
      Thanks
      2
      Thanked 2 Times in 2 Posts

      Re: Javascript Tutorial Part 7 - Forms & Functions

      Changing The Value Of A Text Box

      Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.

      Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):

      <form name="formname">
      </form>

      In this form you can place a text box using:

      <input type="text" name="boxname">

    12. #11
      Join Date
      Jun 2013
      Posts
      769
      MTV$
      1,993
      Thanks
      0
      Thanked 1 Time in 1 Post

      Re: Javascript Tutorial Part 7 - Forms & Functions

      forms and functions are one of the document so that css, events, nodes is considered to be one of the javascript and so many other function things. they are used to allow one of the forms, document such as creating functions that are built into the document object and so many other form things.

    Thread Information

    Users Browsing this Thread

    There are currently 1 users browsing this thread. (0 members and 1 guests)

    Tags for this Thread

    Bookmarks

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •