Results 1 to 6 of 6

Thread: JavaScript - Three Chapters

  1. #1
    Senior Member
    Join Date
    Nov 2001
    Location
    Ireland
    Posts
    734

    Post JavaScript - Three Chapters

    Another tutorial I wrote for my website. It's a three-chaptered JavaScript tutorial.




    JavaScript Chapter One by Jethro
    --------------------------------

    Index:

    o introduction
    o variables
    o arithmetic
    o conditional
    o loops
    o source code


    Introduction
    ------------

    Welcome to the first in my three chapter tutorial on JavaScript. By the
    end of this tutorial, you will (hopefully) have quite a good grip on
    the basics of JavaScript. In this chapter, we will deal with the basic
    layout of JavaScript.

    This text is ideally based towards people already with experience in
    programming previously. If you have no experience with programming
    read one of the many (of my ) tutorials on C++ or PHP or something...

    JavaScript is a client-side language, which basically means that your
    browser works as the language interpreter (unlike server-side
    languages like PHP and CGI which make the actual web server itself do
    all the work).

    Instead of giving you a big long lecture on the history of JavaScript,
    I'll just tell you that it's very big in the world of web design and
    creation. The syntax itself has many resemblences to languages such as
    C++ and PHP. It is a relatively high-level language also.

    JavaScript is integrated seamlessly into HTML. To indicate the opening
    and closing of a JavaScript, we use the <SCRIPT>...</SCRIPT> tags:

    ---------------------------------
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    JavaScript code in here
    </SCRIPT>
    ---------------------------------

    A lot of programmers put their whole JavaScript in HTML <!-- comments
    -->, in case a person viewing that page has a browser *so* old, that
    it doesn't understand JavaScript. If you want to do this, you can do
    it, like so:

    -------------------------------
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Optional Text in here
    Actual JavaScript code in here
    // Optional Text in here -->
    </SCRIPT>
    -------------------------------

    That's enough of the syntax, here's how you actually use it!


    Variables
    ---------

    Unfortunately (in my opinion), in JavaScript, you cannot declare what
    *type* of variable you want it to be, whether you want it to be a
    string, integer...etc. There is only one variable declaration keyword
    (which might be hard to grasp for all you C++ gurus .

    var variable_name = value;

    var is the *only* way to declare a variable, unfortunately. I suppose
    the people who made it, wanted it to be *very* easy to write.

    However, if there variable you wanted to declare was a number, you
    would declare the value without quotation marks, unlike if it as a
    string. Here's an example:

    ----------------------
    var number = 3;
    var string = "three";

    ---------------------


    Arithmetic
    ----------

    To perform arithmetic, like in any other language, it's just simply:

    x operator y

    Here is a table of common operators and their respective descriptions:

    ___________________________________
    LIST - Description |
    ----------------------------------- |
    = - Equals |
    + - Add |
    - - Subtract |
    * - Multiply |
    / - Divide |
    % - Remainder |
    ^ - XOR |
    > - Bigger Than |
    < - Smaller Than |
    >= - Bigger or Equal to |
    <= - Smaller or Equal to |
    -----------------------------------
    Conditional
    -----------

    The conditional statements in JavaScript are the same as in languages
    such as C++ and PHP.


    The syntax is:

    -------------------
    if (condition) {
    statements
    }
    else {
    statements
    }

    -------------------

    If the condition is true, then the statements inside the "if" brackets
    will be executed, if not, the statements inside the "else" brackets
    will be.


    Here is a working example:

    Code:
    ---------------------
    if (variable >= 6) {
    alert("Your variable is bigger or equal to 6!");
    }
    else {
    alert("Your variable is smaller than 6!");
    }
    ---------------------
    ====
    Note: The alert() function will be explained in Chapter Two.
    ====

    Loops
    -----

    The two loops in JavaScript are FOR and WHILE.
    Again, the syntax is identical to C++, PHP and other such languages. As
    you can see, many parallels can be drawn between these languages.

    The FOR syntax is as follows:

    --------------------

    for (i=0; i>=100; i++) {
    statements;
    }


    --------------------

    As you can see, the statements enclosed in the brackets will be
    executed until the condition is met. i=0 can actually work as the
    declaration of that variable in JavaScript, you don't need to declare
    it already, before hand.

    The i++ segment increments (adds one) to the i variable. It has the
    function: i=i+1.

    The WHILE syntax is as follows:

    ---------------------

    while (i=5) {
    statements;
    }


    ---------------------

    If you have experience in programming, you will know that the
    statements will continually be executed *while* the variable 'i'
    equals 5.

    ==========
    Note: Of course, you don't have to choose 'i' as the variable name, but
    it's an age-old tradition to use 'i' as the variable name when using
    loops, whatever the language.
    ==========


    Source Code
    ------------

    Here is a working example of the processes we have just covered in this
    chapter:

    All functions included in this code will be explained in the next
    chapter....

    Code:
    *** javascript1.html ***
    
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide from old browsers
    
    var age = 5;
    
    if (age==10) {
      alert("Age equals 10");
    }
    
    else {
      alert("Age doesn't equal 10");
    }
    
    for (i=0; i>=10; i++) {
      alert(i);
    }
    
    while (age==5) {
      age = prompt("Please enter an age OTHER than 5","");
    }
    
    alert("5 x 6 = "+5*6);
    
    //--></SCRIPT>
    
    *********************
    Until the next chapter, happy programming!

    Jethro

















    JavaScript Chapter Two by Jethro
    --------------------------------

    Index:

    o User Functions
    o JavaScript Functions
    o Input Methods
    o Objects
    o External JavaScripts
    o Source Code Examples


    Welcome to the second chapter in my three-part series of web
    programming and design with JavaScript.


    User Functions
    --------------

    Functions exist in JavaScript, just like in other languages. JavaScript
    functions are pretty similar to C++ functions, only instead of having
    to declare a return type of the function like in C++, we only have to
    declare JavaScript functions with the keyword "function". This is
    probably because there is only one way of declaring variables in
    JavaScript (var).

    Here is an example of a JavaScript function which returns a value:


    Code:
    function askName() {
    var name = prompt("What is your name?","");
    return name;
    }
    
    var yourname = askName();
    alert("Your name is: "+yourname)

    Here is an example of a function which doesn't return a value.


    Code:
    function doBoxes() {
    var name = prompt("What is your name","");
    alert(name);
    }
    
    doBoxes();

    And here is an example of a function which accepts arguments.


    Code:
    function addNumers(num1, num2) {
    return num1+num2;
    }
    
    alert(addNumbers(3, 5));

    As you can see, the arguments are passed to the function through the
    function's parenthesis (brackets).


    JavaScript Functions
    --------------------

    Here are some functions already available in JavaScript. Here is a list
    of the most common ones.


    alert(text) - This pops up a message which the text.

    confirm(text) - This gives a confirm box with the text.

    prompt(text1, text2) - This prompts the user for input and then RETURNs that value

    window.close() - This closes the window. If the window was opened
    with JavaScript, then it will close automatically, if not, it will
    close with a confirm prompt.

    window.open(url) - This opens a window.

    history.back(1) - This gos to the first page back in the history.

    math.Random() - This makes a random number.

    math.Floor(number) - This rounds off a number to an integer.

    document.write(text) - This writes text to the page.

    string.substring(number) - This cuts off a string.

    string.substr(number) - Another method off cutting a string.

    Input Methods
    -------------

    Of course, as I've said in Chapter One, JavaScript can be added
    seamlessly (almost) to normal HTML pages. So, JavaScript can interact
    with a lot of HTML objects and properties. Here's an example of
    getting input from a form. I just decided to make a complete HTML
    page.


    Code:
    <HTML><HEAD>
    <TITLE>JavaScript with a Form</TITLE>
    
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide from older browsers
    
    function showName(form) {
      alert(form.name.value);
    }
    
    //-->
    </SCRIPT></HEAD>
    
    <BODY>
    
    <form>
    Name: <input type=text name=name><input type=button value="Show Name!" onClick="showName(this.form)">
    </form>
    
    </BODY></HTML>

    As you can see, we passed 'this.form' as an argument to the showName()
    function. Basically, this is a quick pointer to the form object.

    Then we sent the "form.name.value" to the alert() function. This way of
    gaining input from a form, works with any type of HTML input form,
    such as radio, text, textarea, select, checkboxes, buttons...etc.

    I will have to write another chapter of its own for HTML objects in my
    "Advanced HTML" tutorial.


    Objects
    -------

    There are many objects which we can use in JavaScript.
    Here's an example of some, along with some of their properties.


    Code:
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDay()+1;
    alert(year+" - "+month+" - "+day);

    As you can see, the Date object controls everything to do with the
    date. Here is an example of another object.


    var names = new Array("Jethro", "Fred", "Jones", "Flintstone", "Jimmy", "Sam");
    alert(name[3]);



    The Array object is what we use to create arrays in JavaScript.


    We can also create our own objects and properties in JavaScript.
    Basically we create a function and then assign it with properties.
    Then we assign that function to a variable, with the keyword "new".


    Code:
    function customer(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
    }
    var jethro = new customer("Jethro Jones", 167, "Stolen Keyboard");
    var freddie = new customer("Fred Flintstone", 43, "Rock Monitor");
    var mary = new customer("Mary Black", 12, "Ripped Mouse Mat");
    alert(jethro.name);
    alert(freddie.age);
    alert(mary.product);

    As you can see, the object and its respective properties are assigned
    to the variable.


    External JavaScripts
    --------------------

    External JavaScripts are great if you want to ``hide`` your precious
    JavaScripts or (for some reason) you want to shorten or clear up the
    source code of a certain HTML page. Here's how you do it:

    Code:
    <SCRIPT LANGUAGE="JavaScript" src="myfuntions.js"></SCRIPT>
    This will have to effect of putting whatever is in "myfunctions.js"
    into the <SCRIPT>...</SCRIPT> tags.

    *****
    Note: In the actual .js file itself, you don't need to actually add the
    <SCRIPT>...</SCRIPT> tags and if you like adding
    from the start to the end of your JavaScripts, so they won't spit up
    an error in older or text-based browsers, they are useless in external
    JavaScripts. But if you want to, it doesn't matter
    *****


    Source Code Examples
    --------------------

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function groceries(form) {
      this.customer = form.customer.value;
      this.product = form.product.value;
      this.price = form.price.value;
    }
    
    function getGroceries(form) {
      var groceryList = new groceries(form);
      alert("The Price is: "+groceryList.price);
    }
    </SCRIPT>
    <form>
    Customer Name: <input type=text name=customer>
    
    Product: <input type=text name=product>
    
    Price: <input type=text name=price>
    
    <input type=button value="Check!" onClick="getGroceries(this.form)"></form>

    Here's a script I wrote called "change2weird.html". It basically messes up a string,
    putting letters here, there and everywhere. You might find something useful there...


    Code:
    <html><head>
    
    <title>Change2Weird</title>
    
    <style><!--
    
    input{border-color:white; background-color:black; font-family:Verdana; color:white;}
    
    .newname{border-color:black;}
    
    //--></style>
    
    <script language=javascript>
    
    <!-- Weird name script by Jethro
    
    //                                                            ________________________                  
    function getNewName(form) {                       // Declare the function     //
    var urname = form.urname.value;                 // Get the original name    //
    var letters = new Array(urname.length);       // open a new array        //
    var weird = "";                                       // Declare the variable     //
    for (i=1; i<=urname.length; i++)              // The loop                    //
      letters[i] = urname.substring(i,i-1);      // Seperate all the letters //
    for (i=1; i<=letters.length-3; i++)         // Another loop               //
      weird += letters[i]+letters[i+2]         // Mess them all around    //
    form.newname.value = weird;           // Print the new name      //
    //                                             -----------------------------
    }
    
    //-->
    
    </script></head><body bgcolor=black>
    
    
    
    <form name=changename><center>
    
    
    
    <input type=text name=urname value="Your Name" size=30 onClick=this.value=''></p>
    
    
    
    <input type=button value="Change" onClick="getNewName(this.form)"><input type=reset></p>
    
    
    
    <input type=text name=newname size=70 readonly class=newname></center></form>
    
    
    
    </body></html>

    And again, here is another script I wrote. It basically tells you whether an argument is a string or a
    number...


    Code:
    <HTML>
    
     <HEAD>
    
      <TITLE>Check Number</TITLE>
    
      <style><!--
        input{text-decoration:none; font-family:Verdana; border-color:black; background-color:black;     color:white}
        .ageplace{border-color:gray;}
      //--></style> 
    
      <script language=javascript>
       function isNumber(num1) {
        if ((num1 == "")||(num1 == " ")||(num1 == "  ")||(num1.length==0))
         return false
        else if ((num1 / 2 >= 0)||(num1 / 2 < 0)) 
         return true
        else
         return false
       }
       function getAge(form) {
        var age = form.age.value;
        var ageboolean = isNumber(age);
        if (ageboolean)
         form.answer.value = "Okay"
        else
         form.answer.value = "Nope"
       }
      </script>
    
     </HEAD>
     
     <body bgcolor=black onLoad="alert('This script tells you whether a value is a number...')">
    
      <form name=getage>
       <input type=text size=2 maxlength=3 name=age class=ageplace>hthyhhtyhtyty
       <input type=button value="Check Age" onClick=getAge(this.form) class=ageplace>
    
       <input type=text name=answer size=4 readonly maxlength=4>
      </form>
    
     </BODY>
    
    </HTML>

    That's all for this Chapter. We'll wrap up all this stuff in the next
    and final chapter, ``Chapter Three!``

    Happy coding,
    Jethro



























    [b]JavaScript Chapter Three by Jethro[/code]
    -----------------------------------

    Index:

    o Incorporating JavaScript With Other Languages - VBScript &amp; PHP
    o Browser support
    o Conclusion


    Welcome to the final installment in my three part guide to programming
    with JavaScript. If you have found this guide confusing, I'm sorry,
    but you have to remember that it was specifically directed towards
    programmers.

    However, if you have found it helpful and if you have learnt anything
    from it, or if you remembered something you had forgotten,
    congratulations. That's the whole point of this text.

    In this chapter, I hope to tie up some loose ends. If you have any
    comments/queries/suggestions, please drop me a line, at
    jethrojones@gmx.net



    Incorporating JavaScript With Other Languages
    ---------------------------------------------

    JavaScript doesn't have to be the only language on your webpage of
    course. Because it is a browser-orientated language, it can be wrapped
    around other languages, client or server.

    In this section, I am going to (briefly) comment on two languages,
    VBScript (client/browser) and PHP (server).


    VBScript.
    This language, unfortunately *only* runs on Microsoft Internet
    Explorer, because it is made by Microsoft. So if you are trying to
    make a website for everybody, you have to take into consideration,
    that *a lot* of people use Netscape Navigator. Most people use
    Internet Explorer though, that's why I'm commenting on it.

    VBScript runs in much the same way as JavaScript, interpreted by the
    browser. However, the syntax is quite different (the language itself
    has its roots in the *old* BASIC language), so it uses SUBs, different
    variables...etc.

    However, a cool thing with VBScript, is that it can use JavaScript
    variables. Here's an example of JavaScript and VBScript intermingling.


    Code:
    <SCRIPT LANGUAGE="JavaScript">
    var name = prompt("What is your name?","");
    </SCRIPT>
    <SCRIPT LANGUAGE="VBScript">
    msgBox name,64,"You rock my world!"
    </SCRIPT>

    Here, we are using VBScript to avail of something we can't get in
    JavaScript, the wonderful "msgBox".

    *****
    Note: By the time you read this, I probably will have released a text
    on VBScript.
    *****

    PHP.
    PHP is a server-side language. This means that the browser doesn't
    interpret the PHP statements, the http (web) server installed on the
    server does.
    PHP has many similarities in syntax to JavaScript, however their
    functions are entirely different.

    Here's an example of a .php page using JavaScript.


    Code:
    <?php
    echo "<SCRIPT LANGUAGE=/"JavaScript/">";
    echo "alert(/"Welcome to my page $name!/")";
    echo "</SCRIPT>";
    ?>

    And here's an example of PHP *inside* JavaScript, instead of vica
    versa, like the example I've shown you before.


    Code:
    <SCRIPT LANGUAGE="JavaScript">
    document.write("Your IP Address: ");
    document.write("<?php echo $REMOTE_ADDR; ?>
    ");
    </SCRIPT>

    Both pages use another language to do something which they can't.

    *****
    Note #1: Don't trying running these examples (the .php pages) on your
    computer. They must be run on a server with PHP installed.
    *****
    Note #2: Like I said for VBScript, you'll probably be able to find a
    tutorial in PHP written by me on the TechnoRats site.
    *****


    Browser Support
    ---------------

    Here's a list of common browsers (old versions and new) and whether
    they support JavaScript.

    *****
    Note: All the new versions do, of course.
    *****

    ____________________________________
    Browser - Is JavaScript supported?
    ------------------------------------
    Explorer 6.0 - Yes
    Explorer 5.5 - Yes
    Explorer 5.0 - Yes
    Explorer 4.0 - Yes
    Explorer 3.0 - Yes
    Explorer 2.0 - No
    Explorer 1.0 - No

    Netscape 6.1 - Yes
    Netscape 6.0 - Yes

    Navigator 4.7 - Yes
    Navigator 4.5 - Yes
    Navigator 3.0 - No
    Navigator 2.0 - No
    Navigator 1.1 - No

    Mosaic 3.0 - No
    Mosaic 1.0 - No

    Mozilla - Yes

    AOL Browser 5.0 - No
    AOL Browser 4.0 - No
    AOL Browser 3.0 - No
    AOL Browser 1.0 - No

    Opera 5.11 - Yes
    Opera 4.02 - Yes
    Opera 3.60 - Yes
    Opera 3.5 - No

    Lynx - No
    ------------------------------------

    Conclusion
    -----------

    Thank you for bearing with me and reading this text on JavaScript.
    Hopefully you've learnt (or remembered) something.

    Happy JavaScripting,
    Jethro.

  2. #2
    Senior Member
    Join Date
    Nov 2001
    Location
    Ireland
    Posts
    734
    I have attached a zip file to this post, for anybody who can't be arsed reading it now..

  3. #3
    Senior Member
    Join Date
    Apr 2002
    Posts
    324
    Good work Jethro! Many well deserved greenies coming your way I think!

    /me bumps this thread
    \"I may not agree with what you say, but I will defend to the death your right to say it.\"
    Sir Winston Churchill.

  4. #4
    Senior Member
    Join Date
    Nov 2001
    Location
    Ireland
    Posts
    734
    Thanks ntsa. I am advertising like a bitch on #antionline atm

  5. #5
    nice tut brah!

  6. #6
    nice tut brah!

Posting Permissions

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