Introduction to JavaScript

Transcript Introduction to JavaScript

Server versus Client-Side Programming
Server-Side
Client-Side
What is JavaScript?
Embedding JavaScript in a Web Page
• To place JavaScript in a Web page use the tag:
<script type=”text/javascript”>
script commands
</script>
• Each script command is a single line that
indicates an action for the browser to take.
• Each command ends with a semi-colon.
• Place scripts anywhere. If placed in <head>, it
is immediately interpreted and run.
A Sample Command
• To write text to a Web page with JavaScript, use
the command:
document.write(“text”);
where text is the HTML code to be written to the
Web page.
• document is an example of an object (a thing you
manipulate)
• write is an example of a method (an action you
perform on the object)
Some JavaScript Syntax Rules
• JavaScript is case sensitive
• JavaScript ignores most occurrences of extra white
space
• In general, do not break a statement into several
lines
• The + symbol used in a command combines
several text strings into a single text string, e.g.
“Rick “ + “Bournique” is the same as
“Rick Bournique”
JavaScript Variables
• A variable is a named item in a program that stores a
data value
• Variables should always be declared (reserve memory)
but isn’t required by JavaScript
• To declare a JavaScript variable: var variable;
Example:
var area, diameter;
• To declare a JavaScript variable and set its initial value:
var variable = value;
Example: var pi = 3.14159;
• Assignment: variable = value;
Types of JavaScript Variables
• Numeric: any number, such as 13, 22.5, -77
• Text: any group of text characters, such as “Hello”
or ‘Happy Holidays!’
Must be enclosed within either double or single
quotations (but not both)
• Boolean:only true and false
• Null: no value at all, e.g. x = null;
• JavaScript is a weakly typed language. This is OK:
total = 5 + 4;
total = “face” + “book”;
// 9
// facebook
Creating a JavaScript Function
• A function is a collection of commands that performs an
•
•
•
•
action or returns a value. Good for reuse.
General form:
function function_name(parameters){
JavaScript commands
return value;
}
Example: function CalculateArea(radius) {
area = 3.14159 * radius * radius;
return area;
}
Functions are not required to return values.
Good practice to put all functions in <head>
Calling a JavaScript Function
• Once a function is created, you can call the function
(i.e., run it).
• Example: function CalculateArea(radius) {
area = 3.14159 * radius * radius;
return area;
}
var r = 10;
a = CalculateArea(r);
document.write(a);
Function is called
with a parameter, r,
of 10.
Placing JavaScript in an External File
• To access an external JavaScript file:
<script src="url"
type="text/javascript "></script>
where url is the URL of the external document
Inserting Comments in JavaScript
• Commenting your code is an important practice
Debugging JavaScript
• Debugging is the process of searching code to
locate a source of trouble
• Three types of errors can occur:
• Load-Time Errors (also called compile-time or syntax)
Example: area = 3.14159 * radius *radius
• Run-Time Errors
Example: area = 3.14159 * Radius *Radius;
• Logical Errors
Example: area = 13.14159 * radius *radius;
A Useful Debugging Tool: Alert Functions
• The alert function in JavaScript displays a dialog
box that shows a text message with an OK button
url = “[email protected]”;
alert(url);