I.T. Discussion Community!
-Collapse +Expand
JavaScript
Search JavaScript Group:

Advanced
-Collapse +Expand JavaScript Store

Prestwood eMagazine

March Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite Scri...JavaScript a...Beginners Co...   Print This     
  From the March 2016 Issue of Prestwood eMag
 
JavaScript Beginners Corner:
A 10 Minute JavaScript Quick Start
 
Posted 16 years ago on 3/13/2003 and updated 11/7/2008
Take Away: Short 10 minute getting started JavaScript primer.

KB100140



Got 10 minutes? Want to get started with JavaScript?

This article is part of our series of 10 Minute Quick Starts. Each quick start is step by step, assumes you know very little about the subject, and takes about 10 minutes. You can use them to scratch the service of areas you want to learn and as a quick review when returning to something after a long absence.

JavaScript

You can execute browser-side or server-side JavaScript. When you execute server-side JavaScript, the server processes the code (runs it) and then returns the web page to your browser. When you execute browser-side JavaScript, your JavaScript enabled browser executes your JavaScript code. Browser-side JavaScript is sent down to your browser by the server and you can use your browsers "view source" option to view the HTML and JavaScript code sent to you. It is difficult to protect your browser-side JavaScript code and most webmasters don't even try.

This primer will focus exclusively on browser-side JavaScript.

Hello World!

Let's start with a few typical hello world examples.

Print Hello World

The following HTML with JavaScript prints Hello World to the page that calls it. In this case, since the JavaScript is embedded in the page, the text is printed on that page.

  • [Load Demo] - You can view the source of this page too!
<html> 
<head> 
<title>Hello World 1</title> 
</head>  
 
<body> 
 
<script language=JavaScript> 
<!-- 
document.write("Hello World!"); 
//--> 
</script> 
 
</body> 
</html>

Notice three things about this example. First, the use of the <script> and </script> tags indicate code and identify what type of code. Secondly, the use of HTML comment tags to hide the code (in this case JavaScript) from older non-JavaScript enabled browsers. Third, and finally, notice the use of the document object. The document object will be discussed more later.

Print Hello World using a function

JavaScript, like most languages, has functions. This next example moves the code above into a function.

The following is an example of a function in JavaScript.

function PrintHello() 
{
document.write("Hello World!");
}

Notice the use of curly brackets{} like many other languages to mark the start and end of the code for that particular function. Also notice the use of parens (). As you might have guessed, JavaScript functions can accepts parameters and return a value. More on this later.

You can call it the function just like other languages as follows:

PrintHello();

The following code is the complete example embedded in HTML.

  • [Load Demo] - Remember, you can always view the source of any browser-side JavaScript.
<html>
<head> 
<title>Hello World 1</title> 
 
<script language=JavaScript> 
<!-- 
function PrintHello() 
{ 
document.write("Hello World!"); 
} 
//--> 
</script> 
 
</head>  
 
<body>  
 
<script language=JavaScript>PrintHello();</script>  
 
</body> 
</html>

Commenting JavaScript Code

The // before any line indicates a comment in a JavaScript. A comment beginning with this symbol cannot span more than one line. If you have a multi-line comment to place within a script then use /* . . . */.

One-line comment example:
// This is a single line comment.
Multi-line comment example:
/* 
This is 
a multi-line comment.
*/

Declaring and using Variables

Declaring variables in JavaScript is not like most languages because you don't specify the type. You simply declare the variable. All variables can store all types of values: strings, numbers, etc. You get two syntaxes as follows:

Key Points
  • You can't specify an actual type.
  • Syntax 1: var VarName;
  • Syntax 2: var VarName = InitialValue;
  • Variable names ARE case sensitive
Syntax 1 Examples:
var sPath; var pages; var sTemp;
Syntax 2 Examples:
var sName = "Mike Prestwood"; 
var sPath = location.href; var pages = sPath.split("/");
Function Parameters

You can assign parameters directly to a variable within the function as follows:

function GetPageName(PageName) 
{ var sName = PageName;
// Use sName here.
} 
Variable Usage Examples:
var sName;
var Counter;
 
sName = "Mike Prestwood";
Counter = 0;
Counter = Counter + 1; // Add 1 to a counter.
Counter += 1; // Also adds 1 (C type syntax).
Counter -= 2; // Subtract 2.
 
if Counter == 3 { // Comparison operator. 
                  //Others are: >, <, >=, <=

What Next?

Now that you've had a simple introduction to embedding JavaScript within your HTML pages, it's time to learn about the JavaScript Event Model.

Revised version of our short 10 minute getting started JavaScript primer.You can execute browser-side or server-side JavaScript. When you execute server-side JavaScript, the server processes the code (runs it) and then returns the web page to your browser. When you execute browser-side JavaScript, your JavaScript enabled browser executes your JavaScript code. Browser-side JavaScript is sent down to your browser by the server and you can use your browsers "view source" option to view the HTML and JavaScript code sent to you. It is difficult to protect your browser-side JavaScript code and most webmasters don't even try.This primer will focus exclusively on browser-side JavaScript.


Comments

0 Comments.
Share a thought or comment...
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1204A1
Enter key:
Article Contributed By Mike Prestwood:

Mike Prestwood is a drummer, an author, and creator of the PrestwoodBoards online community. He is the President & CEO of Prestwood IT Solutions. Prestwood IT provides Coding, Website, and Computer Tech services. Mike has authored 6 computer books and over 1,200 articles. As a drummer, he maintains play-drums.com and has authored 3 drum books. If you have a project you wish to discuss with Mike, you can send him a private message through his PrestwoodBoards home page or call him 9AM to 4PM PST at 916-726-5675 x205.

Visit Profile

 KB Article #100140 Counter
13712
Since 4/2/2008
-
   Contact Us!
 
PrestwoodBoards.com was developed and is maintainted by me. Do you have a question or suggestion? Do you see a problem? Contact me now. My goal is to build an ad-free and spam-free source of I.T. information with many contributers (ok to promote your website/company in your bio). Yes, my company Prestwood IT Solutions is mentioned in my bio which shows with every post, but you can contribute and promote your pet project too!

2,535 People Online Now!!  
Sign In to see who's online now!  Not a member? Join now. It's free!
Show more stats...


©1995-2019 PrestwoodBoards  [Security & Privacy]
Professional IT Services: Coding | Websites | Computer Tech