Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Javascript Function complete guide : How do I ?


  • Please log in to reply
1 reply to this topic

#1 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 02 April 2010 - 06:23 AM

this is my first tutorial on JavaScript and i want to make it big ,in this tutorial let us learn about writing functions in the renowned scripting language.

IDE Recommended :

Visual Studio 2008 [no 2005 as it lacks the javascript intellisense ] or Visual Web Dev Express
[ Microsoft Web Platform - Start building better Web sites ]

Komodo IDE [ Komodo IDE: The professional development environment for dynamic languages and open technologies from ActiveState ] comes as a 21 day trial.

Aptana Studio [ Aptana ] really good product was free , but not now!

Browsers:

Firefox 3.2 - Firefox 3.6
[ Download Firefox 3.6.3 - FileHippo.com ]
Firebug addon for firefox [ https://addons.mozil...efox/addon/1843 ]

Let's get started:

Where do you put javascript code?
javascript code can be put into separate files of extension *.js , typed with the HTML of the page , inlined with the HTML Tags.

Could you explain that a bit?
writing javascritpt files and including them is a common practice as leads to faster loading webpages and responsive ones too.
create a empty textfile and just rename the extension to " js " then you include them in the page like below:
<head runat="server">
    <title>CSharp Website</title>
    <script type="text/javascript" src="JScript1.js">
    
    </script>
</head>
exactly in line 3 is the statement to add the javascript to the webpage.javascript has to be put inside the
<Script type=""> 
</Script>
tags created under the title tag inside the HEAD tag of the webpage.

how do i write a code Inpage?
this is all you need to do to write your code inPage
<head runat="server">
    <title>CSharp Website</title>
    <script type="text/javascript" src="JScript1.js">
    //write your javascript code here
    </script>
</head>
Is writing inline good ?
I donno , but it clutters up your code and messes your understanding of the code.I recommend not to.Its upto you.If you want to know how to write code inline this is how its done
<input id="Button1" type="button" value="button" onload="javascript code here" />

Ok lets get into functions ,functions are a group of code you want the browser to execute when something happens, intentionally you call the function !

a function is declared as below inside the script tags
<script type="text/javascript">
        function Foo() {
        }
    </script>
you can make a function recieve a parameter like below

<script type="text/javascript">
        function Foo(name,age,city) {
        }
    </script>
a function can also return variables and objects like below

<script type="text/javascript">
        function Foo(name, age, city) {
            [COLOR=Red]var myname = name;
            return myname;[/COLOR]
        }
    </script>
I have created a variable named myname and assigned it with the parameter "name" and returned it to something that invoked the function.

This is how you execute a function:
write the function first,
<script type="text/javascript">
        function Foo(name) {
            var myname = name;
            return myname;
        }
    </script>
then call the function in the buttonclick , onLoad or any event that you want the function to be executed.I have called a function here in button click ,
<script type="text/javascript">
        function Foo(name) {
            var myname = name;
            return myname;
        }
    </script>
</head>
<body>
    <p>
        <input id="Button1" type="button" value="button" [COLOR=Red]onclick="Foo('gokujames')"[/COLOR] /></p>
</body>
it is upto you , on what you want to do with the returned variable.

Writing a function to add 2 numbers:

lets create 2 textbox to get the user input.

<body>
    <p>
        <input id="Text1" type="text" /></p>
    <p>
        <input id="Text2" type="text" /></p>
</body>
lets add the button ,whose onClick event will call the function and it will display result in messagebox.

<body>
    <p>
        <input id="Text1" type="text" /></p>
    <p>
        <input id="Text2" type="text" /></p>
    <p>
        <input id="Button1" type="button" value="Result" /></p>
</body>
now lets write the function

<script type="text/javascript">
        function add() {
           [COLOR=Red] var num1 = parseInt(document.getElementById("Text1").value);[/COLOR]
           [COLOR=DarkRed] var num2 = parseInt(document.getElementById("Text2").value);[/COLOR]
          [COLOR=Orange]  var result = num1 + num2;[/COLOR]
           [COLOR=RoyalBlue] alert(result);[/COLOR]
        }
    </script>
red line declares a variable named "num1" and parses the value from the "textbox1" as "Integer"
brown line declares a variable named "num2" and stores / parses the value from the "textbox2" as "Integer"
line in orange adds the two numbers and stores the sum in variable result.
line in blue is the messagebox inside which is the variable result with the sum of two numbers.

Invoke the above function in your code like below

<input id="Button1" type="button" value="Result" [COLOR=Red]onclick="add()"[/COLOR] /></p>
now open the HTML file in Firefox ,enter some numbers into the textbox ,click the button you will have the result in the messagebox.

pic1..PNG

great that's it guys for today , based on your comments i will be writing more on javascript in future.

Edited by gokuajmes, 02 April 2010 - 07:17 AM.

  • 0

#2 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 16 June 2010 - 03:53 AM

Update:
Will be making a Screen cast for the same in Visual Studio.
  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download