INTRODUCTION TO

JAVASCRIPT
By Dan Gitau
History kidogo
• JavaScript: the first Web scripting language, developed by Netscape in 1995
• syntactic similarities to Java/C++, but simpler, more flexible in some
respects,
• limited in others
• (loose typing, dynamic variables, simple objects)

• JScript: Microsoft version of JavaScript, introduced in 1996

• same core language, but some browser-specific differences
• fortunately, IE, Netscape, and Firefox can (mostly) handle both
• JavaScript & JScript

• JavaScript 1.5 & JScript 5.0 cores both conform to ECMAScript standard

• VBScript: client-side scripting version of Microsoft Visual Basic

JAVASCRIPT
• 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, Mozilla, Firefox, Netscape, 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)
• A JavaScript consists of lines of executable computer
code
• A 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
Html ….
• HTML is good for developing static pages
• can specify text/image layout, presentation, links, …
• Web page looks the same each time it is accessed

• in order to develop interactive/reactive pages, must integrate

programming in some form or another
 Content vs. Presentation
• most HTML tags define content type, independent of presentation
• exceptions? (e.g. <b> …… </b> for bold text)

• style sheets associate presentation formats with HTML elements

• CSS1: developed in 1996 by W3C
• CSS2: released in 1998, but still not fully supported by all browsers

• HTML style sheets are known as Cascading Style Sheets, since can be defined
at three different levels
1. inline style sheets apply to the content of a single HTML element
2. document style sheets apply to the whole BODY of a document
3. external style sheets can be linked and applied to numerous documents

lower-level style sheets can override higher-level style sheets

 Web rules of thumb
• HTML and CSS provide lots of neat features,
but just because you can add a feature doesn't mean you should!
don't add features that distract from the content of the page

 use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts
e.g. I find bright white text on a black background difficult to read

 use images only where appropriate

e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of standard HTML buttons or links can slow access
 don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained
 don’t be annoying
e.g., lots of pop-up windows, excessive advertising, silly music

 break a large document into several smaller ones or provide a menu for navigation

 stick to standard features and test several browsers if possible (and versions of the
same browser)

 utilize style sheets to make changes easy & ensure consistency

Are Java and JavaScript the Same?
• NO!
• Java and JavaScript are two completely different languages in
both concept and design!
• Java (developed by Sun Microsystems) is a powerful and much
more complex programming language - in the same category
as C and C++.
 Scripts vs. Programs
• a scripting language is a simple, interpreted programming language
• scripts are embedded as plain text, interpreted by application

• simpler execution model: don't need compiler or development environment

• saves bandwidth: source code is downloaded, not compiled executable
• platform-independence: code interpreted by any script-enabled browser
• but: slower than compiled code, not as powerful/full-featured
How to Put a JavaScript Into an HTML
Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Html
• HTML is good for developing static pages

• can specify text/image layout, presentation, links,

…
• Web page looks the same each time it is accessed

• in order to develop interactive/reactive pages,

must integrate programming in some form or
another
Client side programming
• client-side programming
• programs are written in a separate programming (or scripting)
language
e.g., JavaScript, JScript, VBScript
• programs are embedded in the HTML of a Web page, with
(HTML) tags to identify the program component
e.g., <script type="text/javascript"> … </script>
• the browser executes the program as it loads the page,
integrating the dynamic output of the program with the static
content of HTML
• could also allow the user (client) to input information and
process it, might be used to validate input before it’s
submitted to a remote server
Ending Statements With a
Semicolon?
• With traditional programming languages, like C++ and Java,
each code statement has to end with a semicolon (;).
• Many programmers continue this habit when writing
JavaScript, but in general, semicolons are optional! However,
semicolons are required if you want to put more than one
statement on a single line.
JavaScript Variables
• Variables are used to store data.
• 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.
• Rules for variable names:
• Variable names are case sensitive
• They must begin with a letter or the underscore
character
• strname – STRNAME (not same)
 Common Scripting Tasks
• adding dynamic features to Web pages
• validation of form data (probably the most commonly used application)
• image rollovers
• time-sensitive or random page elements
• handling cookies

• defining programs with Web interfaces

• utilize buttons, text boxes, clickable images, prompts, etc
limitations of client-side scripting

• since script code is embedded in the page, it is viewable to the world

• for security reasons, scripts are limited in what they can do
• e.g., can't access the client's hard drive
• since they are designed to run on any machine platform, scripts do not
contain platform specific commands
• script languages are not full-featured
• e.g., JavaScript objects are very crude, not good for large project
development
JavaScript Operators
Arithmetic Operators Operator

+
Description

Addition
Example

x=2
Result

4
y=2
x+y
- Subtraction x=5 3
y=2
x-y
* Multiplication x=5 20
y=4
x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division 5%2 1
remainder)
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--
JavaScript Operators – 2
Assignment Operators Operator Example Is The Same As

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y
JavaScript Operators - 3
Comparison Operators Operator

==
Description

is equal to
Example

5==8 returns false

=== is equal to (checks for x=5

both value and
type) y="5"

x==y returns true

x===y returns
false

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal 5>=8 returns false

to

<= is less than or equal to 5<=8 returns true

JavaScript Operators - 4
Logical Operators
Operator Description Example

&& and x=6

y=3

(x < 10 && y > 1)

returns true

|| or x=6

y=3

(x==5 || y==5)
returns false

! not x=6

y=3

!(x==y) returns
true
JavaScript Basic Examples
<script>
document.write("Hello World!")
</script>  format text with HTML code - heading

<script>
alert("Hello World!")
</script>
Example
<script>
x=“Hello World!”
document.write(x)
</script>

<script>
x=“karanja”
document.write(“Mzalendo” +x)
</script>  use line break html code
JavaScript Popup Boxes
• Alert Box
• An alert box is often used if you want to make sure information
comes through to the user.
• When an alert box pops up, the user will have to click "OK" to
proceed.
<script>
alert("Hello World!")
</script>
JavaScript Popup Boxes - 2
• Confirm Box
• A confirm box is often used if you want the user to verify or
accept something.
• When a confirm box pops up, the user will have to click either
"OK" or "Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.
JavaScript Popup Boxes - 3
• 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 user will have to click either
"OK" or "Cancel" to proceed after entering an input value.
• If the user clicks "OK“, the box returns the input value. If the user
clicks "Cancel“, the box returns null.
Prompt Box Example
<html>
<body>
<script language="JavaScript">
var name = prompt("whats the name of your university? ");
document.writeln(name.fontcolor("red") + "University");

</script>
</body>
</html>
 Exercise 2 on prompt
<html>
<body>
<script language="JavaScript">
<!-- html comment
var name = prompt("What is your name? ");
document.writeln(name.fontcolor("red"));
document.writeln(name.italics());
document.writeln(name.toUpperCase());
// -->
</script>
</body>
</html>
Conditional Statements
• Very often when you write code, you want to perform different
actions for different decisions. You can use conditional statements
in your code to do this.

In JavaScript we have the following conditional statements:

• if statement - use this statement if you want to execute some code
only if a specified condition is true
• if...else statement - use this statement if you want to execute some
code if the condition is true and another code if the condition is
false
• if...else if....else statement - use this statement if you want to select
one of many blocks of code to be executed
• switch statement - use this statement if you want to select one of
many blocks of code to be executed