Javascript for Beginners: An Introduction

Welcome to the first installment in a series that will teach you how to add Javascript functionality to your website and make your HTML pages more interactive.

When I first started working for the Dev Shed sites all the way back in 2007, I was quickly tasked with what – at the time – seemed to be an impossible task: write articles on every topic known to man. At that time, I was a lowly writer and not yet the mighty Editor-in-Chief that stands before you today. I knew bits and pieces of a handful of languages, but Javascript was not one of them. I started off writing about Java, Ruby on Rails, PHP, Perl, and Python. I slowly started branching out and inevitably, I was asked to do some articles on HTML, CSS, and of course, Javascript.

Sitting down to figure out what Javascript topic I would cover this week, I began looking through some of those articles from long past and realized two things: 1) I wasn’t as funny as I thought I was when I wrote those pieces and 2) I had written them about five years ago and they were in desparate need of an update, which brings us to the topic at hand.

Who This Article is For

This article is for anyone who wants to learn Javascript or review some of the basics. You should have a firm grasp of HTML and probably be proficient in CSS. Knowing the basics of how a website works doesn’t hurt either. Lastly, you should have two eyeballs, half a brain (that is 1/4 more than I have), and a desire to learn. Got all that? If not, consult your closest physician. If so, then please, keep reading.

What Can You Achieve with Javascript

There are many things you can achieve with a little Javascript and some elbow grease – anything from a simple pop-up warning or log-in box to a full-fledged game. Some typical uses for Javascript include:

  • Detecting what type of browser a partcular user is visiting your site with. This helps ensure that the web page displays properly for that visitor.
  • Storing using information from a user. For instance, maybe you want to display a survey to a user, but only want to display it to them once. You can store a cookie on their computer so that the survey will not display when they visit again.
  • Validating data that is entered into a form. For instance, if a user tries to enter text into a phone number field, you can detect this and give a warning message.
  • Adding interactivity to a website. You can have “clickable” events that respond to a users actions, such as when they click on a particular HTML element.
  • Update page content or submit data without needing to refresh the page.
  • Create animations and transitions, such as having HTML elements increase/decrease in size, change color, fade in and out, move, and so forth.

Basic Javascript Syntax

Before you can begin coding any Javascript, you have to know an HTML tag – namely, <script> and </script>. The opening <script> tag tells the browser where your Javascript code begins, while the closing </script> tag tells the browser where the code ends. Without these tags, the browser will not detect your code and think you are trying to have it display some simple text.

One more thing to know before we test out some code – the <script></script> tags can be placed in either the <head> or <body> section of your HTML document, with the typical placement being in the <head> portion of your page.

Here is a simple way to display some text in the user’s browser:

<html>
<body>

<p>This is text displayed in an HTML paragraph tag</p>

<script type=”text/javascript”>

document.write(“This text is written to the browser via Javascript”);

</script>
</body>
</html>

A couple of things to note here. First, we provided the <script> tag with a type attribute, which naturally, equalled “text/javascript”. This tells the browser to expect a script in the form of Javascript (as opposed to VBScript or another server-side scripting language).

Next you will note the document.write function (we will discuss functions in more detail in a later article, but for now, think of them as mini programs). This particular function causes the data contained within (” “); to be displayed to the user’s browser. If you pop this code into a .txt file, save the file with the extension .html, and double click on it, you should see a web page that displays the text:


This is text displayed in an HTML paragraph tag

This text is written to the browser via Javascript.


A few more things before we move forward:

  • Always end your Javascript lines with a semi-colon
  • Always encase text between quotation marks (“”)


{mospagebreak title=How to Comment Your Javascript Code}

How to Comment Your Javascript Code

Before we get any further, I think it is important that we delve into a topic that is often covered, but usually ignored by programmers, and that subject is (drumroll) commenting. In my years in the tech world, I’ve seen programming from many angles: as a writer, an editor, a programmer, quality assurance and testing, actual programming, and project management. It is amazing the amount of times I have had to look over someone’s code, only to find that there isn’t a single piece of documentation or commenting in the entire program. And since every programmer programs differently, it always turns into a hassle, if not a full-blown nightmare.

For new programmers, commenting means that you describe what a line or several lines of code are intended for, so that you can remember several months later (or another programmer several years later) what you intended that section of code to do. I am not saying a programmer cannot figure it out without comments, but it makes the job a hell of a later easier. It is a common courtesy at the very least and sound programming practice. Do it.

In Javascript, you can comment your code in one of two ways. The first, which I will showcase below, is for single line commenting. Here is an example:

<html>
<body>

<p>This is text displayed in an HTML paragraph tag</p>

<script type=”text/javascript”>

// Using document.write to print text to the screen

document.write(“This text is written to the browser via Javascript”);

</script>
</body>
</html>

The above code will display the same exact result to the user as our first program. However, when a programmer looks at the code, he will see your comment:

// Using document.write to print text to the screen

And instantly know what the code following it is supposed to achieve.

So why doesn’t the browser do anything with this text? When it sees “//”, it ignores everything else on that line and skips to the next line of code.

Commenting on Multiple Lines or Multi-Line Commenting

Sometimes you need more than one line of comments. Maybe it is a complicated section of code or maybe you want your comments to stand out more. There are two ways you can do this. For starters, you can use the method above:

<html>
<body>

<p>This is text displayed in an HTML paragraph tag</p>

<script type=”text/javascript”>

// Using document.write to print text to the screen
// This code was written by James Payne
// For use on www.devshed.com
// All Rights Reserved

document.write(“This text is written to the browser via Javascript”);

</script>
</body>
</html>

In this instance, I used multiple line comments to state who the author of the code is, what it will be used for, and where it will be published. Using “//” is not always the best method for multi-line commenting however. The standard way is by using this method:

<html>
<body>

<p>This is text displayed in an HTML paragraph tag</p>

<script type=”text/javascript”>

/*
Using document.write to print text to the screen
 This code was written by James Payne
 For use on www.devshed.com
 All Rights Reserved
*/
document.write(“This text is written to the browser via Javascript”);

</script>
</body>
</html>

Here, we use the opening multi-line comment “/*”, then place all of our comments in-between the opener and the closer – “*/”. Anything nestled between is considered a comment and is ignored by the browser.

Other Things to Note About Commenting

You can also put the comment code for a single line at the end of your code as well, like this:

document.write(“This text is written to the browser via Javascript”); // Using document.write to print text to the screen

There is really no difference, just a matter of taste.

And finally, commenting isn’t always about leaving notes for yourself or others. Sometimes, you may update a page and no longer need the program you wrote, but want to save it just in case you need it in the future, or maybe your page is screwing up and you want to try to debug (check for errors). In that case, you can comment out what you think might be causing the issue. If the page works when you comment out the suspect code, then you know where the problem lies; if not, you know you need to look elsewhere.

Summary

Well, that is it for this intro to Javascript tutorial – but never fear, there is much more to come, as we delve into much deeper aspects of Javascript programming and web design fundamentals. Stay tuned and be sure to check out other Javascript tutorials on our site and in our forums as well.

Till next time!

About the Author

James Payne is Editor-in-Chief of the Developer Shed Network of sites and has written articles on virtually every technology topic known to man and alien alike. His first book, Beginning Python: Using Python 2.6 and Python 3.1, was recently published by Wiley Books. In addition, he is the publisher of the Science Fiction and Fantasy magazine, Garbled Transmissions, located at www.garbledtransmission.com.

 

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye