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:
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:
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:
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;
}
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:
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:
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:
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:
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:
You can also use a shorthand notation to add and then assign a value to a variable. Ex:
In the looping section above we were performing comparisons. Here is a list of the ways you can compare information:
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:
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…
Outstanding. Absolutely outstanding.
I don’t know why I bothered with Lynda.com –
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 🙂
so kind of you
You’re very welcome
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.
You seem to be using the same format as the example below. What error are you getting?
ResellerAPISoapClient _client = new ResellerAPISoapClient();
3rd_party_domain user = _client.AddUserWithLimit("10E3C4A0-7159-4809-8C6FEA216C2CF710",
"john.doe@3rd_party_domain.com", "s3cr3t", "s3cr3t", "johndoe",
StorageCapacity.HalfTeraByte, StorageCapacity.HalfTeraByte, true,
true, "John","Doe", "123", ProductType.BackupAndBriefCase );
If you just want to call a function for example when someone clicks on a link do this
var elementEx = document.getElementById(
example
);elementEx.onclick = functionToCall;
function functionToCall() {
alert(
In the function
);return true;
}
id=
example
rel=nofollow
rel=”nofollow”>Click to call function* Remove the back quotes in the last example
I am not sure how to see what error code I am getting. How do I find out?
The function I wrote was supposed to show me the error code, but it is not working…
Did you get the function to fire when you clicked on the link?
No, I did not yet get it to work 🙁
Do you get the message The program has successfully ran, and this is the result: ?
What are you doing with the rest of the code on the page?
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.
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
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?
Not really. While you can do a lot of cool things with JQuery you will be very limited without a strong understanding of JavaScript. It’s kind of like jumping on a motorcycle before you learn how to ride a bike. I have a newer JavaScript tutorial that may help you understand the language better JavaScript Video Tutorial
If you have any other questions just post them and I’ll do my best to help
Thanks for reply. I’ll check it out.
No problem. I hope it helps
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
Thank you very much Ramsay. I have many more tutorials coming. It amazes me that people all over the world watch my videos. Thank you
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.
Here are most of my web design tutorials on one page Web Design Tutorial. I also have the entire list of tutorials here Web Design Sitemap
That should answer any question you could ever have on web design. I hope you like them
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!
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 🙂
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… ^_^
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
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
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
Hi Darek,
as java script is awesome i want to learn more in depth level, can you suggest me some books or tutorials?
Thanks.
That depends on what you want to do with JavaScript?
precisely i want to learn high level java script, java script frameworks and more into this (ie. how to create js frameworks).
Those tutorials are in the works. Thanks for the request 🙂
kool man, sounds good. 🙂
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 ?
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
Hey Derek,
Thank you so much. You make difficult things real simple.
God bless.
Thank you and may God bless you and your family as well 🙂
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. 🙂
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
NO words to say……Really outstanding……Thank u very much
Thank you very much 🙂
Amazing. Simply Amazing. You, sir, simply are great !!
Thank you and God Bless You !
Thank you 🙂 I try to do my best. May God bless you and your loved ones as well.