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.
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.
JavaScript
Print This
Tags:
