JavaScript

Teacher: Sarah Marie Joy A. Dela Vega

Objectives:
 Learn what JavaScript is and what it can do, its features and
disadvantages, guidelines and its proper use
 Know how to insert JavaScript line in HTML
 Explore writing HTML tags inside JavaScript
 Apply positioning the scripts
 Understand the impact when scripts are placed in different positions
 Identify web sites with JavaScript
Introduction to JavaScript
 All of the major browsers, including Internet Explorer, Firefox, Opera, Safari, and
Google Chrome, support JavaScript, making it the most commonly used and
well-known scripting language on the internet.
 When we use the term "scripting language," as defined by Webopedia, we mean a
language that "is interpreted by another program at runtime rather than being
compiled by the computer's processor as other programming languages (such as C
and C++) are." In this case, the web browser program is the program that
executes and displays the script.
 The language is developed by Brendan Eich of Netscape under the name Mocha,
which was later renamed to LiveScript. The name change fro LiveScript to
JavaScript coincided with NetScape addind support to Java Technology in its
Netscape Navigator web browser.
Introduction to JavaScript
 The languages 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 Emca International for standardization resulting
in the standardized version named EMCAScript.
 JavaScript and Java are two completely different languages; however, both are
influenced by the C language. Users who are adept in programming find
JavaScript easier to deal with than Java. It copied Java’s naming conventions and
names.
Introduction to JavaScript
 JavaScript is a client-side, high-level scripting, interpreted, and object-oriented.
 Client side is where codes and formulas are processed right on the user’s computer.
 High level scripting means that codes are written in words that are close to English as
possible.
 Interpreted means 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 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 are values or instructions that will be used
inside the method.
Introduction to JavaScript
 JavaScript was designed to add interactivity and functionality to the Web site. By
doing so, the contents of the web page become more dynamic and the elements
are enhanced. JavaScript is case-sensitive so be careful when you type the syntax
and other names. Missing and unbalanced quotation mark cause the browser from
loading and displaying properly. Semi-colons at the end of each statement are not
required; however, it is deal to place it for readability and to 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/ XHTML. 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?
 JavaScript can react to events.
 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.
 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.
 A cookie is used to save or retrieve information from a visitor’s computer. This can be
used to monitors the visitor’s internet habit and preferences.
 JavaScript can enhance a webpage.
 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 website, so interaction within the user and the
site is faster or more responsive.
 JavaScript can detect user actions, such as mouse clicks, which HTML 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 messages, scrollers,
mouse trails and falling snow.
Disadvantages of JavaScript
 Some browsers do not support JS. For example, PDA and mobile phones do
not execute JS. Some browsers disable execution of JS as a security
precaution.
 Any secret embedded in JS could be extracted by a determined adversary.
 JS 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 JS operates, because the
code is sent to client.
 Source codes that have been deliberately made hard to understand can be
reverse engineered so your codes are still exposed to possible threat.
How to Start Using JavaScript
 <script></script> is used to connote JS.
 type attribute to define the scripting language and identify its version.
However, it is only optional.
 If the browser does not support JS, it will display JS as page content. To
prevent this from happening, enclose the code in comments instead.
 If you are coding in JS and want to display an output in the webpage, the
document.write command should be used.
 JS is an object- based language. Every object has its own method or property.
For example document.write (“Hi”); document is the object name, write is
the method, and “Hi” is the parameter that holds the instructions
JavaScript Sample
Commonly used properties and methods:
Object Definition
window Window is the main object

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 Document is derived from the window object. It is a container for all HTML,
HEAD, and BODY objects associated within the HTML tags of the HTML
documents.

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
Commonly used properties and methods:
Object Definition
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
pow (a, b)- takes the value 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 in running. You need to write the
object name to use these methods.

Sample methods:
appName- to determine the browse’s code name
appVersion- to determine the browser’s release version
cookieEnabled- to determine whether cookies are enabled or not
platform- a description of the operating system
Commonly used properties and methods:

<tag attribute eventHandler = “function/JavaScript code”>

Syntax for creating an event

An event is the result of the 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 a HTML document, mouse clicks,
and even keyboard press are examples of events. Events are objects with properties.

<input type= “text” onClick=“displaySum() ”

Example an event
Where Can You Place Scripts?
<html>
<head>
<script type=“text/JavaScript” function intro ()
{ JavaScript inside
alert (“Welcome Visitors!”); <head></head>
}
</script>
</head>
<body onload=“intro()”></body>
</html>

Whenever the scripts are placed here, you are assured that they will be pre-loaded– it means the
scripts will be executed before anyone triggers an event. Scripts that are ideally placed here are for
functions calls.
Where Can You Place Scripts?

<html>
<head>
</head> JavaScript inside
<body><script type=“text/JavaScript”> <body></body>
document.write (“Message by JavaScript”);
</script>
</body>
</html>

Scripts that are placed here are executed when the page loads.
Where Can You Place Scripts?

<html>
<head>
<script type=“text/JavaScript”>
document.write (“Head Section”);
</script> JavaScript inside
<body></body> and
</head> <head></head>
<body><script type=“text/JavaScript”>
document.write (“Body Section”);
</script>
</body>
</html>

You can place your script tags wherever and how many you want to.
Where Can You Place Scripts?

External JavaScript

<script type=“text/JavaScript” src=“myEvents.js”></script>

External JavaScript files are helpful especially if you are using them to control different HTML files.
There is no need to rewrite them all over again. Save the file having an extension of .js. To use the
JavaScript file, all you have to do is use the src attribute and provide the destination of the file.
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.
What are the JavaScript Guidelines?
The Do and Don’ts in coding JavaScript.
 Case sensitive- 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 HTML, uppercase letters are not equivalent to lowercase
letters in JavaScript.
 White Space- JavaScript ignores white space as long as it is within the line of the code. It is good
practice to use white spaces between expressions to make your codes easier to read.
 Breaking up of codes lines – 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.

document.write (“wow \ Philippines”); Accepted

document.\write (“wow Philippines”); Not Accepted

Thank you