Compute Science Dept: Javascript

Compute Science Dept
JavaScript
Lecture
Introduction
XHTML is limited in what it offers web suffers in terms of interactivity Web suffers can either click a hyperlink or fill in a form JavaScript makes Web page more dynamic by generating events that can results in many action
Introduction
The main two reasons that we use JavaScript in Web pages are
Dynamic Client-side execution
Introduction
JavaScript dynamic and visual effects including
Intercepting and processing mouse clicks Client-side execution including
Validating form input Processing client request that do not require server processing
Introduction
Client-side processing minimize client/server communication and traffic JavaScript is normally executed on client side, OR the server side.
Introduction
Like XHTML, JavaScript is an interpretive Its not a compiled language Browser has an interpreter that scan the JavaScript code and interpret it.
Introduction
JavaScript was developed by Netscape Microsoft has a clone of JavaScript called Jscript. Jscript is designed to run inside the IE Jscript is a carbon copy of Javascript.
Introduction
Two types of JavaScript exist
Client-side JavaScript- code that are executed on the client by the browser Server-side JavaScript stay on the server and can be executed only by the server.
Java vs. JavaScript

Requires the JDK to create the applet Requires a Java virtual machine to run the applet Applet files are distinct from the XHTML code Source code is hidden from the user Programs must be saved as separate files and compiled before they can be run Programs run on the server side Requires a text editor Required a browser that can interpret JavaScript code JavaScript can be placed within HTML and XHTML Source code is made accessible to the user Programs cannot write content to the hard disk Programs run on the client side
JavaScript and Java

JavaScript and Java are similar in someway
JavaScript does not use explicit variable type JavaScript supports most java expression syntax and Javas basic control structure
Common scripting tasks

adding dynamic features to Web pages
validation of form data image rollovers time-sensitive or random page elements handling cookies
defining programs with Web interfaces

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

since script code is embedded in the page, 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 designed to run on any machine platform, scripts do not contain platform specific commands
Embedding JavaScript in XHTML

JavaScript is designed to work inside Web pages and within Web browser It extends the XHTML philosophy of using tags It use <script> tag to embed JavaScript code in XHTML The <script> tag must be closed
WHERE TO
JavaScript can be embedded in head section or body section JavaScript in the body section is executed WHILE the page load JavaScript in the head section will be executed when CALLED
Generic template
<html> <head> <title>JavaScript Template </title> <script language=javascript> JavaScript code goes here </script> </head> <body> XHTML code goes here </body> </html>
JavaScript section
Embeding JavaScript
We prefer to embed JavaScript right before (or after ) the <head> tag closed This is a standard format Many web pages follow the same format JavaScript is included within the <body> section There is no limit on how many <script> tag can be embedded in the XHTML
Creating a Hello World: JavaScript program

<html> <head> <title>Hello World</title> <script language=javascript> alert(Hello world from Tanzania!); document.write(Hello world from Tanzania!); </script> </head> <body> </body> </html>
Interpreter output
Input and output

Client side JavaScript has limited input-output utilities Because of security, JavaScript cannot
Open file Read from Write Close file
JavaScript Variables
JavaScript are use to hold values or expressions Rules for JavaScript variable names
Variable name are case sensitive Variable names must begin with a letter or underscore
Creating JavaScript Variables

JavaScript is declared by using var statement var variablename var x var carname
After declaration, variable is always empty It needs to be assign a values after decleration var x = 5; var carname=volvo; X=5; carname=volvo;
Any computation can be done as normal if variable is already declared JavaScript operate in conditional statement like other programming language
Conditional statement in JavaScript

<script type=text/javascript> var d=new Date (); var time=d.getHours(); if (time <10){
document.write(<b>Good Mooring</b>)
} </script>
Input and Output

The only input functions available are
Prompt () Confirm()
Prompt function
The prompt() function has the following function
Prompt(message, default) Message is a string that informs the user of what to input Default is a value that the user can accept instead of inputting a value.
Example codes
<html> <head> <title>Untitled Document</title> <script language="javascript"> input=prompt("Please enter a number", 7); </script> </head> <body> </body> </html>
Prompt function
Confirm function
The confirm() function is used to ask the user to confirm an input value It return a Boolean whose value depends on the user confirmation. If user confirm the input, it return true Otherwise it return false
Confirm function
General syntax is confirm(question) Where question is a string.
Confirm function
<html> <head> <title>Untitled Document</title> <script language="javascript">answer=confirm("You input:"+ 10+" is this correct?"); </script> </head> <body> </body> </html>
Confirm output
Output function
The output function in JavaScript are
document.write (string) Alert(string)
JavaScript Events
Events are actions that can be detected by JavaScript Examples of events
A mouse click A web page or an image load Mousing over a host on the web page Selecting an input field in an HTML form Submitting an HTML form
JavaScript Object
JavaScript id an Object Oriented Programming (OOP) An OOP language allows you to define your own object and make your own variable type.
JavaScript Properties
Properties are the values associated with an object <script type=text/javascript> var txt=Hellow World; document.write(txt.length); </script> Output 12 The values is Hellow Word
JavaScript Methods
Methods are actions that can be performed on objects <script type=text/javascript> var str=Hellow Word document.write(str.toUpperCase()) </sript> toUpperCase is a method used to converted small letter string to Upper case
JavaScript Validation
JavaScript can be used to validate data in HTML forms before sending off the content to the server Form data that can be checked by JavaScript could be
User left required field empty User entered invalid e-mail address User entered invalid date User entered numeric in text field

Compute Science Dept: Javascript

Uploaded by

Copyright:

Available Formats

Compute Science Dept: Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Compute Science Dept: Javascript

Uploaded by

Copyright:

Available Formats

Compute Science Dept

Java vs. JavaScript

JavaScript and Java

Common scripting tasks

defining programs with Web interfaces

limitations of client-side scripting

Embedding JavaScript in XHTML

Creating a Hello World: JavaScript program

Input and output

Creating JavaScript Variables

Conditional statement in JavaScript

Input and Output

You might also like