Javascripts Scripting Tutorial Part 1

Posted by on Mar 24, 2010 in Javascript Scripting Tutorial | 42 comments

YouTube Preview ImageIn the Javascripts Free Scripting Tutorial I will completely cover all of the capabilities Javascript offers. Javascript is a scripting language that allows you to make your website more interactive. While HTML provides the structure and CSS provides the styling, Javascript allows you to add functionality to your website that users visitors expect.

I provide a tutorial on How to Use CSS Here and you can Learn How to Write HTML W3C Here.

Introduction to the Scripting Tutorial

In this first article, I’m going to give you a brief overview on how Javascript works. In those articles that follow I will teach by walking you step-by-step through real working Javascript Scripts.I’m going to assume you have read or watched the above HTML and CSS tutorials. Anytime I refer to Javascript Code, I’m talking about a series of commands I am making to the browser.

You know now that HTML is a structuring language that provides structure to a website by surrounding all of the content with <Tags>. Javascript gives you the ability to manipulate those tags even further than you can with CSS. Javascript attaches an event handler to the HTML tags, and then performs an action when a specific event occurs. For example:

  • When a page loads, Javascript code is made aware of that if there is an event handler assigned
  • If a person puts their mouse pointer on an image, Javascript code knows if an event handler has been assigned to watch out for that action
  • If a person clicks on the submit button in a form, javascript knows if an event handler has been assigned.

To put it simply an event handler is an alarm that alerts Javascript code to do something if the alarm has been triggered by some action the visitor performs. Now on to where to place your Javascript code.

Where do you Write your Javascript

Like CSS, you can either write the code directly into a web page, or link to an external Javascript file, that contains the code. If you want to embed the code in the HTML file create this tag <script language=”javascript” type=”text/javascript”> in between your head tags. After you are done writing your code end the script with the closing script tag </script>.

The preferred way to use Javascript code, is to link to an external file. The reason it is better to link to an out side file includes:

  • It helps you avoid changing the code on multiple pages
  • It keeps your HTML pages neat and clean

You link to an external Javascript page by typing <script language=”javascript” src=”javacode.js”> between the head tags. Please note that the javacode file ends with the extention .js, make sure when you save your code in the future it has that same extention.

Before I finish this part of the article, I want you to be aware that a small percentage of browsers don’t support Javascript. So you want to add <! — Hide Javascript code, before your code. So to be safe your code would look like this if you embedded the Javascript:

<script language=”javascript” type=”text/javascript”>
<! — Hide Javascript

… Your Javascript Code …

// –> Stop Hiding Code
</script>

I’m starting to feel like Columbo, but “One More thing…” If you want to alert people that your website is much better with a Javascript browser, or Javascript enabled put the following in your HTML:

<noscript>
You must use a Javascript enabled browser to get the most from this website. Please install a newer version of Firefox, Opera, Safari or Internet Explorer, to get the most from the internet.
</noscript>

The Javascript Scripting Basics

I wrote above that, Javascript attaches event handlers to HTML code and then performs certain actions when certain events occur. These web page components are referred to as the Document Object Model (DOM). This is very easy to understand after you have seen some examples, I just wanted to mention it now so I didn’t have to type Document Object Model again.

Javascript code is made up from the following series of commands:

  • Functions: Groupings of statements that you can type once and then use over and over again. Ex. Let’s say you need to add a bunch of numbers together over and over in your program. It’s easiest to give that series of additions a name and then have that Function done for you each time you call that Function, than it is to type the code over and over again.
  • Loops: You use looping statements to perform a repetitive action over and over until some condition is met. Ex. Add one to this number over and over again until it is equal to 10,000.
  • Conditionals: Conditionals provide you with the ability to do one thing is something is true and do another thing if it is false. Ex. If your best friend buys you a gift on your birthday, thank him and if not, punch him.
  • Variables: Variables are locations that you define you want to store information in. Ex. You store your receipts and checks in a box named Taxes, so that you know where to find them come tax day. Think of a variable as a labeled box you store stuff in.
  • Pre-Built Functions & Operators: Javascript includes many functions that will perform common actions for you. Also it has all of the common operators such as +, -, *, =, etc.
  • Comments: Javascript provides you with the ability to leave notes or comments inside of your code. Here you would describe what the code is doing. You can define that something is a comment by starting the line with // and then everything that follows til the end of the line will be ignored. Or, you could comment out multiple lines by typing this /* ….Code… */

Javascript Functions

Like I said above functions are, groupings of statements that you can type once and then use over and over again. This is what a function definition looks like:

function nameoffunction( parameter1, parameter2)
{
javascript code…
return value;
}

And here is a real function:

function addThese(numberOne, numberTwo)
{
var total = numberOne + numberTwo;
return total;
}

  • This code gives the function the name “addThese”.
  • It defines that it accepts two numbers, that will be assigned the name numberOne and numberTwo.
  • It creates a variable named total and gives it the value of the two variables added together
  • It returns the value of the addition, back to the location that called for the function.

You would call for the above function like this: addition = addThese(firstNumber, secondNumber);

Or, you could embed the function like this: bigAddition = addThese(firstNumber, secondNumber) + 2;

That is all there is to know about creating and calling functions in Javascript. If you don’t think your totally getting it wait for the examples ahead.

Javascript Looping

The For Loop

You use looping to perform an action over and over again. One of the ways you can loop, is to use what is called a for loop. A for loop continues performing actions until a condition is met. This is the basic structure of a for loop:

for (initial expression; condition to be met; edit the value of expression)
{
…javascript code…
}

An example of a real for loop looks like this:

for (var i = 1; i < 100; i++)
{
document.writelin(i);
}

The above code performs the following actions:

  • Create a variable i and assign it an initial value of 1
  • Define that the code below will be performed over and over until i is no longer less than 100
  • i++, is shorthand for add 1 to i. This action will be preformed after the code below is run through. So, the first number printed will be the number 1.
  • The code document.writelin(i); prints the value of i on the browser screen. document.writeln, is a prebuilt function for writing to the browser screen and it is ended with a semicolon (;)
  • The curly braces are used to define the code that needs to be performed over and over again.

The While Loop

A while loop can also be used for looping. It’s basic structure is:

while (condition)
{
…code…
iterator
}

An example of a real while loop:

while ( i < 100)
{
document.writelin(i);
i++;
}

It performs the same action as the previous for loop.

The Do-While Loop

The Do-While loop is almost identical to the while loop except it doesn’t check if the condition has been met before executing the code in curly braces first. It’s basic structure is:

do {
…code…
}
while ( i < 100 )

An example of a real do-while loop:

var i = 1;
do{
document.writelin(i);
i++;
}
while( i < 100 )

This code performs the same exact actions as the previous for and while loop.

The For-In Loop

The final looping tool may be a little confusing. Everything in Javascript is considered an object. Objects have variables and functions that they can perform. Programming languages used to be called procedural languages because they mainly performed an action and then another over and over again. Then a new form of programming was invented called object oriented programming. Through OOP, you instead create a bunch of objects that interact with each other. I’ll dive more into this subject later, but I thought I should explain OOP before I dive into the next loop.

You use the for-in loop for looping through all of the variables of an object. If you have variables assigned to an object you created, this loop cycles through them. Here is the basic structure of a for-in loop:

for (var objectVariable in objectItself)
{
…code…
}

Here is a real example:

for (var objectVariable in objectItself)
{
infoOnObject = objectName + “.” + objectVariable + ” = ” + objectItself[objectVariable];
document.writelin(infoOnObject);
}

If the previous code is confusing, skip it and we’ll come back to it later. Otherwise, this is what it is doing:

  • The for-in loop, loops through all of the variables of the object, which is named “objectItself”
  • Each time it finds a new variable it assigns that variable to the variable objectVariable
  • Then the name of the objects variable and the value of that variable are combined and stored in the variable infoOnObject
  • Then the function document.writelin prints out the variable name and variable value, to the browser screen. Ex. “variable1 = 23”

We’ll talk a lot more about objects later. Don’t worry if you didn’t totally grasp this one concept.

Javascript Variables

Variables are locations that you define you want to store information in. You use the keyword var to tell the browser you want to create a new place to store information and then assign that variable with a value. Ex. var myEmail = “derekbanas@newthinktank.com”;

You can change the value of a variable at anytime, just by assigning it a new value with the equals sign. The name of your variable can contain any letter of number and it is considered good form to start the name with a lower case letter and then capitalize each word there after. Ex. thisIsANiceName

Variables created inside of functions are only accessible inside of the function in which they are declared. If you want to be able to access a variable anywhere in your Javascript program make sure that you declare it outside of a function. You should also never create two variables with the same name.

Unlike most programming languages, Javascript is what they call loosely typed. You see most languages require you to tell them what types of information you will assign to a variable. Is it a small number, a really big number, text, etc. Javascript doesn’t care, except for a few instances. You can assign a number to a variable name and then text. Javascript will even convert text into a number and add it to another number, if at all possible. Ex:

var numberOne = 5; // Creates a variable named numberOne and assigns the value of 5 to it
var textTwo =”10″; // Creates a variable named textTwo and assigns the text string “10” to it
document.writelin(numberOne + textTwo); // Would print 15 to the screen even though textTwo is technically text and not a number.

Variables that Must be Defined

Arrays

There are only two variable types that must be declared, the Array and Date data types. An array is a variable that can store multiple values. You create an array as such: var vehicles = new Array(“car”, “truck”, “van”);

The values of this array variable can now be accessed by specifying the number of the value stored in the array. The numbers are assigned from zero on up. For example:

  • The value of vehicles[0] is equal to car
  • The value of vehicles[1] is equal to truck
  • The value of vehicles[2] is equal to van

You can also add additional values to the array. For example to add “bicycle” to the array, you would type: vehicles[3] = “bicycles”;

Dates

You define a date variable in the following ways:

  • var today = new Date(); // Will create a Date Variable and call the Date() function to assign the current time and date to it
  • var myBirthDay = new Date(1974, 12, 21); // Creates a Date variable and assigns my birthday to it

Javascript Pre-Built Functions & Operators

There are many pre-built functions and operators available to you with Javascript Scripting. To finish this article I’ll go over a few of the most common operators for you:

  • + (Addition): Used to add numeric values or combine 2 strings of text
  • – (Subtraction): Used to subtract values
  • * (Multiply): Used to multiply values
  • / (Divide): Used to divide values
  • % (Modulus): Used to return the remainder of a division of two numbers. Ex. 15 % 7 = 1
  • ++ (Increment): Shorthand way to add one to a value.
  • — (Decrement): Shorthand way to subtract one from a value

You can also use a shorthand notation to add and then assign a value to a variable. Ex:

  • x += y: Adds x and y, then stores that value in the variable x
  • x -= y: Subtracts y from x, then stores that value in the variable x

In the looping section above we were performing comparisons. Here is a list of the ways you can compare information:

  • x == y: Tests whether x equals y
  • x < y: Tests whether x is less than y
  • x > y: Tests whether x is less than y
  • x <= y: Tests whether x is less than or equal to y
  • x >= y: Tests whether x is greater than or equal to y
  • x != y: Tests whether x is not equal to y
  • x= (y < 5) ? 10 : 15 : Shorthand way to test and then assign a value based on the test. This code tests if y<5, if the answer is TRUE then x is assigned the value of 10, if not x is assigned the value of 15

Finally, there are three operators that can be used to test further on how different values compare. These operators are referred to as logical operators and include the following:

  • if ( x < y && a > b ): && is used here to check if both comparisons are TRUE. If x < y is true AND a > b, then this comparison returns the answer TRUE. If either is not TRUE it returns the value FALSE.
  • if ( x < y || a > b ): || is used to see if just one comparison is TRUE. If one or the other or both comparisons are TRUE, then TRUE is returned, if both are untrue then FALSE is returned.
  • if (!x): This is the NOT operator. It is used to check if values are not equal to the variable it is being used on.

That’s all Folks

Well that is it for now. In the next article I’ll explain what objects are and how they are used in Javascript. As well I’ll go into detail on how you use the Document Object Model (DOM) to jazz up your web pages.

If you have questions or comments leave them below.

Till next time…

42 Responses to “Javascripts Scripting Tutorial Part 1”

  1. Daniel says:
    September 25, 2010 at 10:17 pm

    Outstanding. Absolutely outstanding.

    I don’t know why I bothered with Lynda.com –

    Reply
    • admin says:
      September 26, 2010 at 6:19 am

      Glad you liked them. If you need any help just ask. All I ever ask people to do if they like my stuff is to submit my articles to Stumbleupon or Delicious. Free and helps others. Thanks 🙂

      Reply
      • roshik says:
        October 2, 2011 at 3:30 pm

        so kind of you

        Reply
      • Michael Miller says:
        May 9, 2012 at 11:19 am

        I am a new web designer. I have known HTML and have made small websites for a long time, but what I mean is that I am new to Javascript and css and anything that can really help the website to really turn out well. I just watched all of your videos, and they are fantastic! You seem to think like I do in respect to understanding first principles. However, I have recently taken a website design job so that I can pay for my living expense while I go to college – I served in the Army in Iraq, and I am just now getting to go to college. I am trying to get this API key to work, and I watched these videos to enlighten me on what to do. So I created a javascript function, thinking that it would work. I am going to post the code here, but the API will be represented by *** for obvious security reasons. I cannot get the input to call the function I created onclick, and I am not sure that the function is written correctly. Here is is (I hope I have not been too wordy):

        function blixiao_o()
        {
        ResellerAPISoapClient _client = new ResellerAPISoapClient();
        LiveDriveUser user = _client.AddUserWithLimit(“***”, “iadem7@yahoo.com”, “s3cr3t”, “s3cr3t”, “johndoe”, StorageCapacity.HalfTeraByte, StorageCapacity.HalfTeraByte, true, true, “John”,”Doe”, “123”, ProductType.BackupAndBriefCase );
        window.alert(“The program has successfully ran, and this is the result: ” + user);
        }

        In the body is:

        —–
        I also am pointing to the livedrive website reseller .js file, and I hope that is the correct location. Everytime I ask another programmer to tell me how much they would charge just to do it for me, it has come out like $12000! Why so much? I get the feeling that they are overcharging because they know I understand a lot, and they know I will know how to do it after I see the code, but I am not trying to rip anyone off :(. I hope you can help me… My boss is willing to pay to get this done, so if you want to charge, please let me know your price.

        Reply
  2. jugdesi says:
    October 1, 2011 at 6:31 pm

    OK this is good I like they way you make your tutorials well done. I have one question I know what loops and conditional statements are and how to use them but can’t figure out how to use them in a real project. Like if I were to validate a user form how do I do that what goes where and where to start and end.

    Reply
    • admin says:
      October 2, 2011 at 9:44 am

      Just work your way through the whole tutorial and you’ll see a bunch of examples. I then use JavaScript in a ton of other tutorials that proceed it

      Reply
  3. vitmel says:
    October 22, 2011 at 3:39 pm

    I just found your tuts on youtube and loved it. Very well explained. I have question for you. JavaScript seems kind of complicated for me right now and I decided to learn jquery. I really like what this language can do, and it seems pretty easy. Does it make sense to learn jquery without having good knowledge of JavaScript?

    Reply
  4. ramsay says:
    November 24, 2011 at 8:18 pm

    i really appreciate that u could share what u got on internet, i have learned a lot from both ur website and ur youtube channel, the way you make tutorials is practical, especially for me.

    – a big THANKS from China

    Reply
  5. Gedamu Alemu says:
    December 19, 2011 at 1:13 pm

    hey newthinkthank.com
    I am new for this website ,i am lovely tutorial. i am very intersting to be web devoloper so places attach all tutorial in my email adress.

    Reply
  6. Igor says:
    January 15, 2012 at 1:06 pm

    Thanks very much for this tutorial! It is really good start for beginners like me! I know you can’t put a thanks in your pocket, but hopefully it will motivate you to keep on making these awesome tutorials!

    Reply
    • admin says:
      January 15, 2012 at 2:24 pm

      I very much value the fact that the video helped you. I didn’t make this site to make money. I just wanted people to be able to get a free education. Thank you 🙂

      Reply
  7. John says:
    March 21, 2012 at 9:41 pm

    Hi, can you give me a list of javascript list of code and there function / description so that I can read it. I’d like to learn more about javascript but seems you have a video tutorial I understand well, suddenly I need to read some javascript code for more info.

    thanks and more power… ^_^

    Reply
    • admin says:
      March 23, 2012 at 4:11 pm

      Sure, I have tutorials on JavaScript that are set up as articles. On this page Learn JavaScript, I have links to the articles as well as all of my long form video tutorials. I think that is exactly what you are looking for

      Reply
  8. benard says:
    June 3, 2012 at 6:49 pm

    Your tutorial has certainly increased my interest in learning javascript,..this is one of the best tutorial i have come across here online.Please up keep your good work in helping beginners like me here.I have been trying to follow various javascript book all over the market but,non of them gave this kind of simple and elegant approach to the language.

    Thanks very much,
    Ben in Brazil

    Reply
    • admin says:
      June 4, 2012 at 12:18 pm

      Thank you Ben 🙂 I’m glad you liked it. I have many more JavaScript tutorials planned for the future. Thanks for taking the time to show your appreciation

      Reply
  9. punit says:
    January 11, 2013 at 4:07 am

    Hi Darek,

    as java script is awesome i want to learn more in depth level, can you suggest me some books or tutorials?

    Thanks.

    Reply
  10. Nikolai says:
    February 27, 2013 at 12:35 pm

    Derek, to add functionality to a website, when would you choose JavaScript over PHP ? And when would you choose PHP over JavaScript ? Or is it just a matter of preference ?

    Reply
    • Derek Banas says:
      February 27, 2013 at 5:17 pm

      I use javascript for dynamic elements. I use php for grabbing information from the server and security. I use css as much as possible for the design and some animation on the site. Everything has its core ability and its core weakness. Play around with them and you’ll find your own style. I hope that helps

      Reply
  11. joshi says:
    March 19, 2013 at 9:20 am

    Hey Derek,

    Thank you so much. You make difficult things real simple.
    God bless.

    Reply
  12. Basavaraj says:
    March 20, 2013 at 2:52 am

    Hi,

    I have a become fan of your all tutorials. Its a great place to brush up basic as well learn new things. Thanks a lot for all the good work. I have small request — Please link your related tutorials for easy navigation.

    Thanks again. 🙂

    Reply
    • Derek Banas says:
      March 20, 2013 at 6:56 am

      Thank you very much 🙂 I’m sorry the videos aren’t better organized. I did combine most of them in the menu bar across the top of the site. You can see most of them in sitemap, videos, and web design. The pages then have all the tutorials and sometimes videos listed in order. I hope that helps until I’m able to redo the site

      Reply
  13. charankumar says:
    September 1, 2013 at 8:26 am

    NO words to say……Really outstanding……Thank u very much

    Reply
  14. boney says:
    September 13, 2013 at 4:24 am

    Amazing. Simply Amazing. You, sir, simply are great !!

    Thank you and God Bless You !

    Reply

Trackbacks/Pingbacks

  1. What is Object Oriented Programming | new think tank - [...] Sales « Javascript Scripting Tutorial [...]
  2. Tweets that mention Javascript Scripting Tutorial, Javascript Free Tutorial | new think tank -- Topsy.com - [...] This post was mentioned on Twitter by Derek Banas. Derek Banas said: Published: Javascript Scripting Tutorial @ http://ur.ly/7Ix1 [...]
  3. Free Javascript Scripting Tutorial, Javascripts Free | new think tank - [...] article I’ll explain Javascript Scripting. If you haven’t read my previous article on Javascript Scripting you should read it…
  4. Javascript Event Handling Regular Expression Form Validating | new think tank - [...] Javascript Scripting Tutorial: Introduction [...]
  5. Javascript Scripting Tutorial, Free Javascripts, Cookies | new think tank - [...] In the previous tutorials we covered just about everything there is to know about Javascript. If you missed those,…

Leave a Reply to admin Cancel reply

Your email address will not be published.

Google+