DCIT 65 – Web Development [JavaScript] Lecture # 1

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create
cookies, and much more.

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such
as Internet Explorer, Firefox, and Opera.

What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a license

What can a JavaScript Do?

 JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can
put small "snippets" of code into their HTML pages
 JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
 JavaScript can react to events - A JavaScript can be set to execute when something happens,
like when a page has finished loading or when a user clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can read and change the content
of an HTML element
 JavaScript can be used to validate data - A JavaScript can be used to validate form data before
it is submitted to a server. This saves the server from extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect
the visitor's browser, and - depending on the browser - load another page specifically designed for
that browser
 JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer

The Real Name is ECMAScript

ECMAScript
– javascript’s official name.

– its standard is developed and maintained by ECMA organisation

ECMA-262
- is the official JavaScript standard
- the standard is based on JavaScript (Netscape) and JScript (Microsoft).

The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all
Netscape and Microsoft browsers since 1996.

The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General
Assembly in June 1997.

1 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

The development of the standard is still in progress.

JavaScript Language Structure

 statements
Statements are simply commands that perform a certain purpose.

 functions
A function accepts parameters and returns a value. A function is a block of code that has a name.
Whenever that name is used the function is called, which means that the code within that function
is executed. Functions may also be called with values, known as parameters, which may be used
inside the body of the function. Functions serve two purposes.

The syntax for a function statement in JavaScript is as follows:

function Name ( listofparams ) {
body
}
You explore three built-in functions in the section titled Converting and Evaluating Variables and
Expressions.
parseInt converts strings to integers.
parseFloat converts strings to floating-point numbers.
eval evaluates JavaScript expressions.

 variables
A variable is simply a name given to a value. It is a "container" for information you want to store. A
variable's value can change during the script. You can refer to a variable by name to see its value
or to change its value. Variables can be given different values throughout the course of a
JavaScript program.

Rules for variable names:

- variable names are case sensitive.
- they must begin with a letter or the underscore character

 expressions
An expression is something that JavaScript interprets before using it in a statement. For example,
this statement assigns a number to the variable total, using an expression:
total = result1 + result2;

 objects, properties, and methods

JavaScript is an object-oriented language. This means that it supports objects. Objects are custom
data types that combine data with functions. An object includes properties, which hold the data.
In addition, it can include methods, functions to act on the data.

Comment
– is the final element you can include in a JavaScript program.
– ignored by the JavaScript interpreter.

2 types of comments:

2 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

A single-line comment begins with two slashes (//) and ends at the end of the line.
A multiple-line comment begins with the /* delimiter and ends with the */ delimiter.

4 fundamental data types:

Integers
An integer is simply a number that does not include a decimal. Integers in JavaScript can be only
positive numbers.
Ex:
document.write(47);

Floating-Point Numbers
These can be used to represent just about any number conveniently. A simple floating-point value
consists of an integer followed by a decimal point and a fractional value
Ex:
2.01

Boolean Values
Boolean values are the simplest data type. They can contain one of two values: true or false.
Because they can represent an on/off or 1/0 state, these are sometimes called binary values.

Strings
These consist of one or more characters of text. Strings are simply groups of characters, such as
"Hello" or "I am a jelly doughnut.".
Ex:
 "This is a string."
 'A'
 '25 pounds'
Confirm Box
A confirm box is used only if you want your visitor/user to verify or accept something.

When a confirm box pops up, the visitor/user will have to click either "OK" or "Cancel" to proceed.

when the visitor/user clicks "OK", the box returns true of if the visitor/user clicks "Cancel", the box returns
false.

put this code inside the script:

Quote
confirm("put sometext here")

example:
Code Box
<script type="text/javascript">
var c=confirm("press me")

if (c==true)
{
alert("you press the ok button")
}
else
{
alert("you press the cancel button")

3 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

}
</script>

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the visitor/user will have to click either "OK" or "Cancel" to proceed after
entering an input value.

If the visitor/user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns
null.

put this code inside the script:

Quote
prompt("put some text here","put here a defaultvalue")

example:
Code Box
<script type="text/javascript">
var name=prompt("Please enter your name","Harry Potter")
if (name!=null && name!="")
{
alert("Hello " + name + "! How are you today?")
}
else
{
alert("you have to put something")
}
</script>
Variables

A variable is a "container" for information you want to store. A variable's value can change during the
script. You can refer to a variable by name to see its value or to change its value.

IMPORTANT! JavaScript is case-sensitive! A variable named strname is not the same as a variable named
STRNAME!

Declare a Variable

You can create a variable with the var statement:

Quote
var strname = some value

You can also create a variable without the var statement:

Quote
strname = some value

Assign a Value to a Variable

You can assign a value to a variable like this:

4 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

Quote
var strname = "Hege"

Or like this:

Quote
strname = "Hege"

The variable name is on the left side of the expression and the value you want to assign to the variable is
on the right. Now the variable "strname" has the value "Hege".

<script language="JavaScript">
function validate_form ( )
{

if ( document.form1.user.value == "" )

{
alert("Username is required!");
document.form1.user.focus();
return false;
}
if (document.form1.user.value.length<3)
{
alert("Do not insert less then 3 characters");
document.form1.user.focus();
return false;
}
if ( document.form1.pass1.value == "" )
{
alert("Password is required!");
document.form1.pass.focus();
return false;
}
if ( document.form1.pass2.value == "" )
{
alert("Confirmation password is required!");
document.form1.pass.focus();
return false;
}
if ( document.form1.pass1.value != document.form1.pass2.value )
{
alert(" Password does not match!!");
document.form1.pass1.focus();
return false;
}
if ( document.form1.lname.value =="" )
{
alert(" Lastname is required!");
document.form1.lname.focus();

5 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

return false;
}
if ( document.form1.fname.value =="" )
{
alert(" First Name is required!");
document.form1.fname.focus();
return false;
}
if ( document.form1.bdate.value =="" )
{
alert(" Birdtdate is required!");
document.form1.bdate.focus();
return false;
}

}
</script>

[Forms and Form Elements]

<FORM>...</FORM>
These tags must begin and end your form.

The following are attributes of the FORM and /FORM tags:

 ACTION is the location where you want this form to go.
 METHOD is the way in which you send this information. The METHOD is usually POST, but
sometimes you can use GET.

<INPUT>
This tag creates various input fields.

Pairing this tag with the following attributes allows you to manipulate specific field designations:
 NAME is the name of this field.
 VALUE is the string or numeric value that is sent with this field.
 CHECKED applies to checkboxes and radio boxes and defines if they are checked on page load.
 TYPE determines which type of input this field is.
o TEXT-A plain text box.
o PASSWORD-A text box that echos bullets when you type into it. The bullets hide the typed
text.
o CHECKBOX-Renders a small box that indicates whether it is selected. Usually for Yes or No
questions. They are commonly referred to as checkboxes.
o RADIO-Renders a small circle that allows you to choose one among many options. They are
commonly referred to as radio buttons.
o IMAGE-Returns the coordinates of the image selected here (with x=num, y=num as the
parameters returned). This is very similar to imagemaps, but is useful if you want to just
return the xy value that someone clicks. The following is an example:
<INPUT NAME="thisimage" TYPE="IMAGE" SRC="jonjie.jpg" ALIGN="TOP">
o SUBMIT-When this is clicked, it submits the form.
o BUTTON
o RESET-Clears all input fields and resets to the defaults.
o MAXLENGTH sets the maximum number of characters to be allowed within a field of a text
or password type.

6 Prepared by: Ms. Steffanie D. Maglasang

 DCIT 65 – Web Development [JavaScript] Lecture # 1

<SELECT>…</SELECT>
These tags present either a scrolling list of choices or a pop-up menu.
 NAME is the name of the data (required).
 SIZE determines how many choices to show. If set to 1 or omitted, it renders a pop-up menu. If
set to 2 or more it is a scrolling list.
 MULTIPLE allows you to select multiple options and always renders a scrolling list.

<OPTION>
Contained within the SELECT and /SELECT tags, this tag designates a selectable item.
 VALUE is the value returned when the form is submitted if this option was selected.
 SELECTED means when the page is loaded, this option is selected by default.

<TEXTAREA>…</TEXTAREA>
These tags provide an area for a user to enter multiple lines of text. This defaults to four rows in length,
with each row 40 characters wide.
 NAME defines the name for the information (required).
 ROWS is the number of rows in this field.
 COLS is the number of characters wide this field is.
 WRAP determines how text flows inside a text area. You have three options for this attribute:
o OFF-No text wrap.
o VIRTUAL-Text flows to right border then wraps to next line.

7 Prepared by: Ms. Steffanie D. Maglasang