This free JavaScript tutorial shows you some basis JavaScript tips and tricks to develop your JavaScript applications, web applications better. JavaScript tips and tricks mentioned in this free JavaScript article are: JavaScript Functions, JavaScript Looping, JavaScript Variables, JavaScript Pre-Built Functions and JavaScript Operators, Comments.

Try more JavaScript lessons on jsB@nk as you want:
- Some Basic Tips and Tricks for Speeding Up JavaScript
- The basics of Javascript for beginners
- JavaScript Tutorial 1.1 - The Very Basics

• Demo
• Enlarge
• Reload
• New window

In 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="/javascript/article/Some_JavaScript_Scripting_Basics.php/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.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New