Home arrow JavaScript arrow Javascript for Beginners: An Introduction

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.

TABLE OF CONTENTS:
  1. Javascript for Beginners: An Introduction
  2. How to Comment Your Javascript Code
By: James Payne
Rating: starstarstarstarstar / 0
August 10, 2012

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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 ("")




 
 
>>> More JavaScript Articles          >>> More By James Payne
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: