Introduction to JavaScript

What is JavaScript?

JavaScript is the most popular and widely used scripting language on the internet, and is recognized
and works in all major browsers, such as Internet Explorer, Firefox, Opera, Safari and Google
Chrome. According to Webopedia, when we say scripting language, it means that "it is interpreted
by another program at runtime rather than compiled by the computer's processor as other
programming languages (such as C and C++) are", in this case, it is the weh browser program that
executes and displays the scripts.
The language was developed by Brendan Eich of Netscape under the name Mocha, which was
later renamed to LiveScript. The name changes from LiveScript to JavaScript coincided with
Netscape adding support for Java Technology in its Netscape Navigator web browser. The
language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for
Netscape bundling Sun's Java runtime with the latter's then-dominant browser. It was first
introduced and deployed in the Netscape browser version 2.0B in December 1994. Netscape
submitted JavaScript to Ecma International for standardization resulting in the standardized
version named ECMASCript.

JavaScript and Java are two completely different languages; however, both are influenced by the
C language. Users who are not adept in programming find JavaScript easier to deal with than Java.
It copied Java's naming conventions and names.

JavaScript is a client-side, high-level scripting, interpreted, and object-oriented. Client side is

where codes and formulas are processed right on the users computer. High-level scripting means
that codes are written in words that are close to English as possible. Interpreted means the program
is passed as source code then converted into machine code as it is being used. Just like C,
JavaScript is an object-based programming language. An object is a person, place, or thing:
Properties are about the attributes and description of an object. You can assign a value to the
property of an object by writing objectname. property = value. Methods are actions that an object
can perform. You can perform a method by writing objectname . method (parameters). Parameters
alo values or instructions that will be used inside the method.

JavaScript was designed to add interactivity and functionality to the Web site. By doing so, the
contents of the webpage become more dynamic and the elements are enhanced. JavaScript is case-
sensitive, so be careful when you type syntax and other names. Missing and unbalanced quotation
marks cause the browser from loading and displaying properly. Semi-colons statements are not
required; however, it is ideal to place it for readability and standardize your codes.
JavaScript is usually embedded directly on a webpage but before JavaScript can be used, you
should have a fundamental understanding of HTML/XHML. Take note that the term code and
script are used interchangeably but they both refer to the codes written using JavaScript.
What Can JavaScript Do?

Some of the things that JavaScript can do are:

• JavaScript can react to events.

o Certain events, such as mouse clicks, and pre-loading of webpage, can lead to executing
codes written in JavaScript.
• JavaScript can be used to validate data.
o Take for example a form that requires user input, instead of using server-side scripting,
JavaScript can be used to validate it and thus save processing time.
• JavaScript can be used to create cookies.
o A cookie is used to save or retrieve information from a visitor's computer. This can be
used to monitor the visitor's internet habit and preferences.
• JavaScript can enhance a web page.
o It can be used to add items such as pop-up window box, animation or
dynamic images, menu from a drop down box.

Features of JavaScript

• JavaScript supports all structured programming syntax in C (for example, if statements,

while loops)
• JavaScript has dynamic typing. Dynamic Typing means that the value of the variable is
dependent on what value was assigned to it so even during run time, the type can still
change.
• JavaScript can run locally in a Web site, so interaction within the user and the site is faster
or more responsive
• JavaScript can detect user actions, such as mouse clicks, which HTM Could not do alone.
• JavaScript can be combined with CSS to produce DHTML. DHTML Can make the site
more flexible by adding effects Such as message scrollers mouse trails and falling snow.

Disadvantages of JavaScript

• Some browsers do not support JavaScript. For example, PDA and mobile phones do
not execute JavaScript. Some browsers disable the execution of JavaScript as a security
precaution.
• Any secret embedded in JavaScript could be extracted by a determined adversary.
• JavaScript and DOM (Document Object Model) provide the potential for malicious
authors to deliver scripts to run on a client computer via the web.
• Web site authors cannot perfectly conceal how their JavaScript operates, because the
code is sent to the client.
• Source codes that have been deliberately made hard to understand can be reverse-
engineered so your codes are still exposed
How to Start Using JavaScript

<script></script> is used to connote JavaScript. We use the type attribute to define the scripting
language and identify its version; however, it is optional. If the browser does not support
JavaScript, it will display JavaScript: page content. To prevent this from happening, enclose the
code in comments instead.

Remember that HTML tells the browser how to display the text and image in the format you
desired. So, if you are coding in JavaScript and want to display an output in the Web page, the
[Link] command should be used. The example below outputs Hi There! in the HTML
document as viewed from a web browser.

1. Open Notepad and type the codes below.

2. Click File and select Save As.
3. Determine the location you want to save your file.
4. Give your file a file name ending in .html.

In the example below, the <script type="text/JavaScript"> and </script> tells the JavaScript
where to start and where to end. Remember that in HTML, the tags should have a beginning and
an end to separate it from other elements. If the script tags were not declared, the Web browser
will consider the [Link] command as pure text and will be displayed as is. You can also
use the [Link] command to output in the webpage different HTML tags.
As discussed in Lesson 1, JavaScript is an object-based language. Every object has its own method
or property. Take for example [Link] ("Hi"); document is the object name, write is the
method, and "Hi" is the parameter that holds the instructions. The following table contains
commonly used properties and methods under it.

Object Commonly Used Properties and Methods

Window The window object is the main object. Think
of it, as if you are pertaining to your whole
browser. Many of the window-object
properties are objects in their own right such as
document, frame, and location. There is no
need to write the object name, window, since it
is understood.

Sample methods:
location - to go to a new location
open - to open a new window
setTimeout - to set a time interval before
activating an event

Document The document object is derived from the

window object. It is the container for all
HTML, HEAD, and BODY objects associated
within the HTML tags of the HTML
documents. You need to write the object name
to use these methods.

Sample methods:
fgColor - to set the document foreground color
cookie - to read the information stored in a
cookie text file
write - to display a message
lastModified - to display the date it was last
modified
 Math The math object provides the capability to
perform math operations. You need to write the
object name to use these methods.

Sample methods:
PI - has the value of PI
pow (a, b) - takes the value of a to the power
b
max (a, b) - returns the larger value between a
and b
min (a,b) - returns the smaller value between a
and b
Navigator The navigator object determines which
browser is running. You need to write the
object name to use these methods.

Sample methods:
appName - to determine the browser's code
name
appVersion - to determine the browser's release
version
cookieEnabled - to determine whether cookies
are enabled or not
platform - description of the operating system

An event is the result of a user's action. Event handlers are the way to connect that action to a
function or a set of JavaScript codes to be executed. Loading of an HTML document, mouse clicks,
and even keyboard press are examples of events. Events are objects with properties

Where Can You Place Scripts?

There are times when we want to execute the codes depending on the situation. It could be you
want it pre-loaded, or be triggered whenever an event happens. Don't worry, this is not
impossible. You can control the execution of the codes by placing it in different sections of the
HTML file.
 o The src attribute will point to the source of the JavaScript external file.
Take note that the JavaScript file does not contain the opening and closing
script tags.

There are times when you want to add a statement to explain a set of codes, or when we
want to omit certain codes for debugging purposes, this can be done by inserting a
comment. For single line comments, you can use two backslash symbols; for multiple line
or block comments, start it with a / and end with a */.
What are the JavaScript Guidelines?

In coding JavaScript, it is important to know the Do's and Don'ts. This will save you time and
keep you away from trouble in case errors occur. Listed below are the guidelines:

• Case sensitive
o You must be careful in naming your variables. The variable myHome is not
equal to MyHome. It is important to keep track of your variables so there won't
be problems in calling variables, objects, or functions. Unlike in HTML,
uppercase letters are not equivalent to lowercase letters in JavaScript.
• White Space
o JavaScript ignores white space as long as it is within the line of the code. It is a
good practice to use white spaces between expressions to make your codes
easier to read.

• Breaking up of code lines

o You can break a code line by using a backslash ('\'). However, do not break the
code in between commands or else it will not work properly.