JavaScript Basics
What is JavaScript?
JavaScript is a high-level, dynamic, untyped, single
threaded and interpreted programming language
CIS 233
Code Styling Isn't your Choice!
When it comes to your coding style, it's exactly that: your
style. Some people prefer to place their curly braces on the
same line as the control, others prefer that it goes on its own.
CIS 233
Make it Understandable
Choose easy to understand and short names for
variables and functions.
Bad variable names: x1 fe2 xbqne
Also bad variable names:
createNewMemberIfAgeOverTwentyOneAndMoonIsFull
Your code is a story - make your storyline easy
to follow!
CIS 233
Avoid Globals
You run the danger of your code being
overwritten by any other JavaScript added to
the page after yours
Bad
var current = null;
function init(){ };
CIS 233
Avoid Globals
You run the danger of your code being overwritten
by any other JavaScript added to the page after
yours
GOOD
var MyNamespace = {
current:null,
init:function(){
},
};
CIS 233
Avoid Globals
Always Declare Local Variables
All variables used in a function should be
declared as local variables.
Local variables must be declared with
the var keyword, otherwise they will become
global variables.
CIS 233
Declarations on Top
Give cleaner code
Provide a single place to look for local
variables
Make it easier to avoid unwanted (implied)
global variables
Reduce the possibility of unwanted redeclarations
CIS 233
Declarations on Top
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
CIS 233
Declarations on Top
This also goes for loop variables:
// Declare at the beginning
var i;
// Use later
for (i = 0; i < 5; i++) {
CIS 233
Initialize Variables
Give cleaner code
Provide a single place to initialize variables
Avoid undefined values
CIS 233
Initialize Variables
// Declare and initiate at the beginning
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};
CIS 233
JavaScript Terminology.
JavaScript programming uses specialized
terminology.
Understanding JavaScript terms is
fundamental to understanding the script.
Objects, Properties, Methods, Events, Functions,
Values, Variables, Expressions, Operators.
CIS 233
Reduce Activity in Loops
Loops are often used in programming.
Each statement in a loop, including the for
statement, is executed for each iteration of the loop.
Search for statements or assignments that can be
placed outside the loop.
CIS 233
Reduce Activity in Loops
Bad Code:
var i;
for (i = 0; i < arr.length; i++) {
Better Code:
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
CIS 233
Properties
Properties are object attributes.
Object properties are defined by using the
object's name, a period, and the property
name.
e.g., background color is expressed by:
document.bgcolor .
document is the object.
bgcolor is the property.
CIS 233
Methods
Methods are actions applied to particular
objects. Methods are what objects can do.
e.g., document.write(Hello World")
document is the object.
write is the method.
CIS 233
Events
Events associate an object with an action.
e.g., the OnMouseover event handler action can
change an image.
e.g., the onSubmit event handler sends a form.
User actions trigger events.
CIS 233
Functions
Functions are named statements that performs
tasks.
e.g., function doWhatever () {statement here}
The curly braces contain the statements of the
function.
JavaScript has built-in functions, and you can
write your own.
CIS 233
Values
Values are bits of information.
Values types and some examples include:
Number: 1, 2, 3, etc.
String: characters enclosed in quotes.
Boolean: true or false.
Object: image, form
Function: validate, doWhatever
CIS 233
Variables
Variables contain values and use the equal
sign to specify their value.
Variables are created by declaration using
the var command with or without an initial
value state.
e.g. var month;
e.g. var month = April;
CIS 233
Expressions
Expressions are commands that assign
values to variables.
Expressions always use an assignment
operator, such as the equals sign.
e.g., var month = May; is an expression.
Expressions end with a semicolon.
CIS 233
Operators
Operators are used to handle variables.
Types of operators with examples:
Arithmetic operators, such as plus.
Comparisons operators, such as equals.
Logical operators, such as and.
Control operators, such as if.
Assignment and String operators.
CIS 233
Methods of Using JavaScript.
1. JavaScripts can reside in a separate page.
2. JavaScript can be embedded in HTML
documents -- in the <head>, in the
<body>, or in both.
3. JavaScript object attributes can be placed
in HTML element tags.
e.g., <body onLoad="alert('WELCOME')">
CIS 233
1. Using Separate JavaScript Files.
Linking can be advantageous if many pages use
the same script.
Use the source element to link to the script file.
<script src="myjavascript.js
language="JavaScript1.2
type="text/javascript">
</script>
CIS 233
2. Embedding JavaScript in HTML.
When specifying a script only the tags
<script> and </script> are essential, but
complete specification is recommended:
<script language="javascript
type="text/javascript">
<!-- Begin hiding
window.location=index.html"
// End hiding script-->
</script>
CIS 233
Using Comment Tags
HTML comment tags should bracket any script.
The <!-- script here --> tags hide scripts
in HTML and prevent scripts from displaying in
browsers that do not interpret JavaScript.
Double slashes // are the signal characters
for a JavaScript single-line comment.
CIS 233
3. Using JavaScript in HTML Tags.
Event handlers like onMouseover are a perfect
example of an easy to add tag script.
<a href=index.html
onMouseover="document.logo.src='js2.gif'"
onMouseout="document.logo.src='js.gif'">
<img src="js.gif" name="logo">
</a>
CIS 233
Creating an Alert Message
The following script in the <body> tag uses the
onLoad event to display an Alert window
The message is specified within parenthesis.
<body onLoad="alert('WELCOME. Enjoy
your visit. Your feedback can improve
cyberspace. Please let me know if you
detect any problems. Thank you.')">
CIS 233
Return to
jqjacobs.net/web -- JavaScript Basics
References and Recommended Readings
The Web Wizards Guide to JavaScript by Steven Estrella
JavaScript for the World Wide Web by Tom Negrino and Dori Smith
2003 by James Q. Jacobs. All rights reserved.
My photography, graphics, and writings may be used and reproduced for
non-commercial, educational purposes, such as classroom materials,
without my permission if you cite the source in some way.
CIS 233
