Introduction to JavaScript

Dr. John P. Abraham

University of Texas RGV
 What is JavaScript
• Object-based scripting language
• Developed by Sun Microsystems
• Syntax is similar to C++
• HTML is static, JavaScript adds
interactivity.
• JavaScript can store information as cookies.
 SCRIPTING LANGAUGES
• Programming languages developed to serve a
particular purpose.
• JAVA SCRIPT was developed to add interactivity
to Web pages
• Interpreted rather than compiled
• Interpreter is built into the web browsers
• First made available as part of Netscape 2.0
(Javascript created by Brendan Eich of Netscape)
 Flavors of Java Script
• Core
– Basic JavaScript language. It includes the
operators control structures and built-in
functions.
• Client side
• Server side
 Client side javascript
– Extends the core to provide access to browser and
documents via DOM (document Object Model). Runs
on the client’s (visitor) computer.
– Example: an image on the web page can be
manipulated by JavaScript, we can change its source
property (src) to display a different image in response
to something the user is doing such as moving the
mouse.
– Javascript can be used to create cookies and read from
it.
– Also can be used for form validation saving time for a
response from the server.
 Popular Uses for JavaScript
• Client must have javascript enabled browser
• Can do many things: Rollovers, status bar
messages, browser detection, redirecting the
visitor, random images and quotes, pop-up
windows, form validations, loading multiple
frames at once, cookies, slide shows,
calculations, plug-in detection, random sounds,
cycling banners, displaying current date,
displaying last modified date, etc.
 Server side (SSJS)
• Provides access to databases and converts
results into HTML format and delivers to
the browser.
• In this class for server-side scripting we use
PHP
• You are free to use other server-side
scripting languages.
 Other approaches to making web
interactive
• Common Gateway Interface, CGI
• Java applets,
• Client pull (eg <meta http-equiv=“refresh” content
= “7”> reload every 7 sec.
• Server push. (server maintains the connection and
delivers additional data over a period of time)
• Plug-ins (adds animation and interactivity)
• Various other scripting languages
 Web programming
• Web applications
• Many scripting languages available
• I assign these languages to different groups
• I begin with Java Scripting. Many of you end up
doing PHP
• Most web applications work with a DBMS,
mySQL, MSSQL, Oracle
• Database server can reside on another computer
 Client/Server Application
• Server Computer (Web server, IIS, Apache)
• Client Computer (web browser, explorer,
firefox)
• Requests are sent
• Responses are received
• Communication takes place using HTTP
(Hypertext transfer protocol)
 Web browser
• Runs at the client site
• Provides an user interface for the application
• What is displayed is a web page
• Each web page is identified by a URL and
defined by a web form
• Web form is designed using HTML
• The request to a server is sent using Hypertext
transfer protocol (HTTP)
• A web page does not change depending on the
request is known as a static page
 Style
• You can embed the style inside your html,
or create Cascading Style Sheet.
 Client/Server Interaction using HTTP
(Static)
• Into a web browser the user types an URL or clicks on a
link pointing to a URL
• The web browser uses HTTP to send the request to the
web server. The request contains several pieces of
information, address of the requester, address of the
server including the page requested (URL). Etc.
– URL contains protocol, domain name, path and file name
• When the server receives the request it retrieves the page
and sends it as the HTTP response.
• The browser receives the information and formats it and
displays it.
 Default
• If a document name is omitted, it looks for
default.htm, default.asp, index.htm, or
iisstart.asp.
 Client/Server Interaction using HTTP
(Dynamic)
• A dynamic page does not exist on the disk at the server,
it is a form that contains server controls such as labels,
buttons, or text boxes.
• The page is dynamically generated at the server
• The request sent to the server contains the URL and
information entered by the user
• When the server receives the request it looks at the
extension (htm, html, aspx, cgi, etc). The first two are
static. Others are handed over to the appropriate
application server to assemble the page as an HTML
document.
• The browser receives the information and formats it and
displays it.
 JavaScript and HTML
• HTML tag attributes can be accessed as
object properties with javaScript.
• Document.bgcolor=“white”
• Document.write(“Hello”)
• You can even use script to write html
– Document.write(“h1
align=center>Hello</h1>”)
 Example of html with script
<html>
<head>
<title>Script 1.1: Using the Write Method</title>
</head>
<body bgcolor="white" text="black">
<script language="JavaScript" type="text/javascript">
document.write("Hello")
</script>
</body>
</html>
Run
 Example 2
<html>
<head>
<title>Script 1.3: Changing Background &amp; Foreground
Colors</title>
</head>
<body bgcolor="white" text="black">
<script language="JavaScript" type="text/javascript">
document.write("<h1 align=center>Hello</h1>")
document.bgColor = "blue"
document.fgColor = "white"
</script>
</body>
</html>
 Script in HTML head
<script type = “text/javascript”> says it a text
file and the scripting language is javaScript
<!— Those browsers that do not support script
will consider this as comments and ignore
SCRIPT CODE HERE
// 
 Document Object
• The most import object in JavaScript is the
document object
• To refer to a method for this object we
write:
• document.write(“hello”)
• document.write(“<h1 align=center>
hello”</h1>”)
• document.bgColor = “blue”
 Obtaining user input with prompt
dialog
• After <script – declare variables
• Var visitorName
• Read it this way:
– vistorName=window.prompt(“Please enter your
name”);
• Display it
– Document.writeln(“Hello, “ + name)
 Arithmatic
+-*/%
Show the rolls program here
 Examine properties
• Document.write (“appName: “,
navigator.appName);
– Microsoft explorer
• Document.write(“Window location:
“,window.location)
– File:///A:/script.html
• Document.write(“history: “,
window.history.length)
– Length: 1
 The Event Model
• Most popularly capture events
– Load – finishes loading a page
– Unload – loads a new one
– Mouseover – mouse moved
– Mouseout – move mouse off of object
– Click
– Focus – make active an object
– Change – changes data selected
– Submit – submits a form
– Reset – resets a form
• Event handlers are onLoad, onClick, onChange,
etc.
• http://members.ozemail.com.au/~dcrombie/javascr
ipt/chap07.html
 First JavaScript program
<html>
<head>
<title>Reporting Browser Information</title>
</head>
<body>
<h1>Your Browser</h1>
<script language = "JavaScript" type ="text/javascript">
document.write("<b>appCodeName:</b> ", navigator.appCodeName, "<br>")
document.write("<b>appName:</b> ", navigator.appName, "<br>")
document.write("<b>appVerson:</b> ", navigator.appVersion, "<br>")
document.write("<b>Platform:</b> ", navigator.platform, "<br>")
</script>
</body>
</html>
 JAVA SCRIPT
HOW TO PROGRAM
DR. JOHN ABRAHAM
PROFESSOR
UTPA
SOME SLIDES FROM W3SCHOOLS
 SCRIPT IN BODY OF HTML
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
 FUNCTIONS IN THE
HEADING
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">

</body>
</html>
SEE NEXT SLIDE FOR RUN
PROGRAM RUN
 Scripts in the head section:
Scripts to be executed when they are called,
or when an event is triggered, go in the
head section. When you place a script in the
head section, you will ensure that the script
is loaded before anyone uses it.
http://www.w3schools.com/js/js_function_inv
ocation.asp
 Scripts in the body section:
Scripts to be executed when the page loads go
in the body section. When you place a script
in the body section it generates the content
of the page.
 Using an External JavaScript

Sometimes you might want to run the same

JavaScript on several pages, without having
to write the same script on every page.
To simplify this, you can write a JavaScript
in an external file. Save the external
JavaScript file with a .js file extension.
Explain future value program