JavaScript For Beginners

Discussion in 'JavaScript and AJAX' started by coderzone, Dec 6, 2008.

  1. coderzone

    coderzone Super Moderator

    Joined:
    Jul 25, 2004
    Messages:
    736
    Likes Received:
    38
    Trophy Points:
    28
    JavaScript is the scripting language and is used for the web. It is used webpages for validating forms,adding different functionalities , for detecting different browsers and creating cookies. One can also improve the design of web page using JavaScript. With the help of JavaScript one can work on any browser.Before working with JavaScript it necessary to know HTML and also XHTML. JavaScript is an interpreted language and so is directly used in HTML pages.

    Let us start working with JavaScript. For example in the code below we have start with JavaScript.
    HTML:
    <html>
    <body>
    
    <script type="text/javascript">
    document.write("Hello");
    </script>
    
    </body>
    
    </html>
    
    The output is Hello.

    When we write <script type="text/javascript"> it means we are using JavaScript in the program. To start with JavaScript you have to insert this tag and to end you need to write </script> document.write is for giving the out put.You need to write this command in between this tags <script> and </script> so that browser will accept it as a JavaScript command and then execute it.

    When one places a script in head section it gets loaded and then gets executed when it is called.In following way it is written to place in head section

    HTML:
    <html>
    <head>
    <script type ="text/javascript>
    ....
    </script>
    </head>
    When one has to place Javascript in body section it can be written this way

    HTML:
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
    ....
    </script>
    </body>
    If has to be placed in both then it is written this way

    HTML:
    <html>
    <head>
    <script type="text/javascript">
    ....
    </script>
    </head>
    <body>
    <script type="text/javascript">
    ....
    </script>
    </body>
    Sometimes one has to write same code on many pages so it becomes difficult to write same thing on many pages so to avoid one can create an external file.
    You have to write that code program in external file and save it as .js extension.You can place it in following way

    HTML:
    <script src="abc.js"> </script>
    You can place it where you actually want to write the script.In the above example abc is the name of the file. Javascript statements are the commands to the browser and they are case sensitive.It is optional to write semicolon after each statement in Javascript but writing semicolon helps programmer to write multiple statements on one line.

    Statements in Javascript are written in following way

    HTML:
    <script type="text/javascript">
    	document.write("<h1>This is a header</h1>");
    	document.write("<p>This is a first paragraph</p>");
    	document.write("<p>This is a second paragraph</p>");
    </script>
    Javascript statements are grouped together in blocks. If one wants to execute the statements in specific sequence then can be written in blocks.In Javascript blocks are written in curly braces { }. Let us see how they are written

    HTML:
    <script type="text/javascript">
    {
    	document.write("<h1>This is a header</h1>");
    	document.write("<p>This is a first paragraph</p>");
    	document.write("<p>This is a second paragraph</p>");
    }
    </script>
    Now let us see how to write comments in Javascript.Single line comments start with //.

    For example
    HTML:
    // This statement is for header:
    document.write("<h1>This is a header</h1>");
    
    // This statement is for first paragraph:
    document.write("<p>This is for first paragraph</p>");
    
    For Multi line comments start with /* and end with */.
    
    /*
    The code given below will write
    one header and one paragraph
    */
    document.write("<h1>This is a header</h1>");
    document.write("<p>This is a first paragraph</p>");
    
    You can declare JavaScript variables using var statement. For example var a=10; Now let us see JavaScript If...Else Statements.

    First let us start with if statement.

    if statement is executed when condition is true.

    The syntax is as follows

    if (condition)
    {
    code to be executed if condition is true
    }

    Let us see an example

    HTML:
    <script type="text/javascript">
    if (time<10) 
    {
    	document.write("<b>Good morning</b>");
    }
    </script>
    
    Second example

    HTML:
    <script type="text/javascript">
    
    if (time==1) 
    {
    	document.write("<b>Lunch-time!</b>");
    }
    </script>
    In both the examples when condition is true then only if statement will be executed.

    In If...else Statement ( if statement is executed when condition is true and else will be executed when condition is not true.)

    The syntax is as follows

    if (condition)
    {
    code to be executed if condition is true
    }
    else
    {
    code to be executed if condition is not true
    }

    Let us see an example

    HTML:
    if (salary < 100000) 
    {
    	document.write("Senior");
    }
    else
    {
    	document.write("Junior");
    }
    </script>
    In the above example if an employee is having salary more than 100000 then employee is having Senior post else Junior post.

    Now let us discuss about loops in Javascript

    1. For loop

    2. While loop

    1. For loop :- This loop is used when you know how many times the script has to be executed.

    Syntax

    for (var=startvalue;var<=endvalue;var=var+increment)
    {
    code to be executed
    }

    Example

    HTML:
    <html>
    <body>
    <script type="text/javascript">
    var i=0;
    for (i=0;i<=10;i++)
    {
    	document.write("The number is " + i);
    	document.write("<br />");
    }
    </script>
    </body>
    </html>
    The example below defines a loop that starts with i= 0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

    While loop

    The while loop is used when you want the loop to execute and continue executing while the specified condition is true.

    Syntax

    while (var<=endvalue)
    {
    code to be executed
    }


    Example

    HTML:
    <html>
    <body>
    <script type="text/javascript">
    var i=0;
    while (i<=10)
    {
    	document.write("The number is " + i);
    	document.write("<br />");
    	i=i+1;
    }
    </script>
    </body>
    </html>
    The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.
     
    Nishant24 likes this.
  2. neo_vi

    neo_vi Member

    Joined:
    Feb 1, 2008
    Messages:
    720
    Likes Received:
    16
    Trophy Points:
    18
    Occupation:
    Software engineer
    Location:
    Earth
    Home Page:
    http://computertipaday.blogspot.com
    nice info. wats the difference b/w placing the <script> Part in <head> section and <body> section. What happens? can we see any difference while executing?
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    I don't think so.
     
  4. neo_vi

    neo_vi Member

    Joined:
    Feb 1, 2008
    Messages:
    720
    Likes Received:
    16
    Trophy Points:
    18
    Occupation:
    Software engineer
    Location:
    Earth
    Home Page:
    http://computertipaday.blogspot.com
    Then why do we use it in different sections. which is the script's default standard.
     
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    At time you cannot and should not link in the head.

    Say for example on some pages I need to include some script I put in the body but for all pages inclusion I put it in header. This is what I follow here and may not be actually true.
     
  6. growingboy

    growingboy New Member

    Joined:
    Dec 1, 2008
    Messages:
    26
    Likes Received:
    0
    Trophy Points:
    0
  7. skp819

    skp819 New Member

    Joined:
    Dec 8, 2008
    Messages:
    89
    Likes Received:
    3
    Trophy Points:
    0
    Thanks for share it. Some place I not able to understand.
     
  8. neo_vi

    neo_vi Member

    Joined:
    Feb 1, 2008
    Messages:
    720
    Likes Received:
    16
    Trophy Points:
    18
    Occupation:
    Software engineer
    Location:
    Earth
    Home Page:
    http://computertipaday.blogspot.com
    can u tell me in which place u can't understand
     
  9. Xintruder

    Xintruder New Member

    Joined:
    Dec 28, 2008
    Messages:
    24
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Adminstrator Assistant
    Location:
    Oxford, England
    Great basic stuff. Why not continue this tutorial.
    I suggest moving onto simple site browsing effects such as: mouse over effects.

    1 question though:
    Does this mean:

    For i = 0 to 10 step 1

    as in increment in ones?
    Would the loop excecute correctly if I don't enter the "i++" part?

    Thank you
     
  10. neo_vi

    neo_vi Member

    Joined:
    Feb 1, 2008
    Messages:
    720
    Likes Received:
    16
    Trophy Points:
    18
    Occupation:
    Software engineer
    Location:
    Earth
    Home Page:
    http://computertipaday.blogspot.com
    No. It wont execute correctly. Since it is in a loop it must contain an increment/decrement part. If its not there it'll be an infinite loop. ur browser(firefox) opens a dialog box saying there is an error, and will give u the options "stop script" and "continue"..
     
  11. Xintruder

    Xintruder New Member

    Joined:
    Dec 28, 2008
    Messages:
    24
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Adminstrator Assistant
    Location:
    Oxford, England
    Thanks for yor quick response,
    Ok, I see it is necessary. But does ++i means increment in ones?

    When we did for loops in vb.net, I remember doing something like:
    var i as integer
    for i = 0 to 10 step one

    step one meant to increment by ones. I asked my instructor he said if I had step 2, it will increment in two (ie possibly half of the total number of steps if I had step 2). I have no idea why would someone increment in two or more steps. Why not makes the steps lesser instead. So step one in vb.net = i++ j/script?
     
  12. neo_vi

    neo_vi Member

    Joined:
    Feb 1, 2008
    Messages:
    720
    Likes Received:
    16
    Trophy Points:
    18
    Occupation:
    Software engineer
    Location:
    Earth
    Home Page:
    http://computertipaday.blogspot.com
    i++ increments the variable only once. if u need to step up by 2, use i=i+2 in the place of i++. or u can also use i+=2.
     
  13. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  14. oyeLucky

    oyeLucky New Member

    Joined:
    Dec 27, 2008
    Messages:
    18
    Likes Received:
    0
    Trophy Points:
    0
    Nice Article Bro ! Thank you.
     
  15. sarah_9

    sarah_9 New Member

    Joined:
    Jan 24, 2009
    Messages:
    4
    Likes Received:
    0
    Trophy Points:
    0
    Hello,

    JavaScript is very strong language, if any one is really interested in website development, then he has to learn JavaScript properly, though it is not complete language, but very useful in web development.


    Regards,
    sarah_9

    Website Development Company India
    infoseeksoftwaresystems
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice