JAVASCRIPT
What is JavaScript?
JavaScript is a programming language designed for Web pages
History
First web scripting language
Developed by Netscape and Sun
Initiated by Netscape and called LiveScript
In parallel with this, Sun was developing
Java
Why Use JavaScript?
• JavaScript enhances Web pages with dynamic
and interactive features.
• JavaScript runs in client software.
• JavaScript 1.3 works with version 4.0 browsers.
What can a JavaScript Do?
JavaScript gives HTML designers a
programming tool.
JavaScript can react to events.
Validate data.
It can be used to detect the visitor's browser
Create cookies.
Read/write/modify HTML elements
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.
Objects
Objects refers to windows, documents,
images, tables, forms, buttons or links, etc.
Objects should be named.
Objects have properties that act as
modifiers.
Client-Side Script
When client makes the request, the HTML and
all scripts will be downloaded into your browser
and then the resultant HTML will be displayed
in the browser is called client-side script.
Example: JavaScript, VB-Script etc.
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first →
JavaScript Page');
Note the symbol for
</script> line continuation
</body>
</html>
Naming Form Elements in HTML
<form name="addressform">
Name: <input
name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Objects
Objects refers to windows, documents, images,
tables, forms, buttons or links, etc.
Objects should be named.
Objects have properties that act as modifiers.
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.
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.
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.
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
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;
The HTML DOM (Document Object Model)
Finding HTML Elements
Finding HTML Elements by Id :
var
Example:
x=document.getElementById("intro");
Finding HTML Elements by Tag Name:
Example: var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
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>
JavaScript RegExp Object
var dob_regex = /^([0-9]){2}(\/){1}([0-9]){2}(\/)([0-9]){4}$/; //DD/MM/YYYY
var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
// email address
var username_regex = /^[\w.-]+$/;
// allowed characters: any word . -,
( \w ) represents any word character (letters, digits, and the underscore _ ),
equivalent to [a-zA-Z0-9_]
var num_regex = /^\d+$/; // numeric digits only
var password_regex = /^[A-Za-z\d]{6,8}$/;
// any upper/lowercase characters and digits, between 6 to 8 characters in total
var phone_regex = /^\(\d{3]\) \d{3}-\d{4}$/; // (xxx) xxx-xxxx