1. Introduction to JavaScript
Dr. John P. Abraham
University of Texas RGV

2. 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.

3. 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)

4. Flavors of Java Script Core Client side Server side
Basic JavaScript language. It includes the operators control structures and built-in functions.
Client side
Server side

5. 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.

6. 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.

7. Server side (SSJS)
Provides access to databases and converts results into HTML format and delivers to the browser.

8. 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

9. Web programming Web applications Many scripting languages available
I assign these languages to different groups
I begin with Java Scripting. Many of end up doing PHP
Most web applications work with a DBMS, mySQL, MSSQL, Oracle
Database server can reside on another computer

10. 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)

11. 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

12. Style
You can embed the style inside your html, or create Cascading Style Sheet.

13. 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.

14. Default
If a document name is omitted, it looks for default.htm, default.asp, index.htm, or iisstart.asp.

15. 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.

16. 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>”)

17. Example of html with script
<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>

18. Run

19. Example 2 <html> <head>
<title>Script 1.3: Changing Background & 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>

21. 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
// 

22. 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”

23. 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)

24. Arithmatic
+ - * / %
Show the rolls program here

25. 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

26. 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.

27. 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>

28. JAVA SCRIPT HOW TO PROGRAM
DR. JOHN ABRAHAM
PROFESSOR
UTPA
SOME SLIDES FROM W3SCHOOLS

29. SCRIPT IN BODY OF HTML <html> <body> <script>
document.write("Hello World!");
</script>
</body>
</html>

30. 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

31. PROGRAM RUN

32. 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. 

33. 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.

34. 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.

35. Explain future value program