JavaScript

advertisement
Generations of Programming Languages
1
 First generation
 Machine Language
 Second Generation
 Assembly Language
 Third Generation
 Procedural language such as Pascal, C, Basic etc.
 Fourth Generation
 Non-procedural language, more natural.
Machine language
2
 10110000 01100001
Assembly Language
3
 mov al, 061h
Popular Programming Languages
4
 FORTRAN—the
oldest high-level
programming
language; designed for
scientific and
mathematical
applications.
Popular Programming Languages, Cont’d.
5
 COBOL—designed for business transaction
processing.
Popular Programming Languages, Cont’d.
6
 Pascal—designed to teach structured
programming; useful for math and science
applications.
Popular Programming Languages, Cont’d.
7
 BASIC—an easy-to-learn beginner’s programming
language.
 Visual Basic—
an object-oriented,
third-generation
version of BASIC.
Popular Programming Languages, Cont’d.
8
 C, C++, C#—versions of the highly efficient C
programming language; C++ and C# are objectoriented.
Popular Programming Languages, Cont’d.
9
 Java—object-oriented programming language
commonly used for Web applications.

Platform independence—Java programs can run on any
platform that supports the Java Virtual Machine.
Popular Programming Languages, Cont’d.
11
 Other high-level languages:




Ada
APL
LISP
Logo




PL/1
Prolog
RPG
SmallTalk
SQL – 4GL
12
Select address from Patients
Where Patients.name = “Johnson”
And Patients.age < 65
JavaScript
HIMA 4160
What is JavaScript
 Programming language designed for webpage
 To increase interactivity and dynamics
 Applications
 Form validation
 Shopping cart
 Calculations
 Special graphic and text effects
 Online email systems (Yahoo, Hotmail)
 Online mapping (Google Map)
 Online productivity suite (Google doc, ZOHO)
Before talking about JavaScript, we
need to talk about form in HTML
HTML Form
Explanation:
http://www.w3schools.com/html/html_forms.asp
JavaScript Syntax
 Unlike HTML, JavaScript is case sensitive.
 Dot Syntax is used to combine terms.
 e.g., document.write("Hello World")
 Certain characters and terms are reserved.
 JavaScript is simple text (ASCII).
JavaScript Terminology
 JavaScript programming uses specialized
terminology.
 Understanding JavaScript terms is fundamental to
understanding the script.

Objects, Properties, Methods, Events, Functions, Values,
Variables, Expressions, Operators.
Objects
 Objects refers to windows, documents, images,
tables, forms, buttons or links, etc.
 Objects should be named.
 Objects have properties that act as modifiers.
Properties
 Properties are object attributes.
 Object properties are defined by using the object's
name, a period, and the property name.



e.g., background color is expressed by: document.bgcolor .
document is the object.
bgcolor is the property.
Methods
 Methods are actions applied to particular
objects. Methods are what objects can do.



e.g., document.write(”Hello World")
document is the object.
write is the method.
Events
 Events associate an object with an action.
 e.g., the onMouseover event handler action can change
an image.
 e.g., the onSubmit event handler sends a form.
 User actions trigger events.
Functions
 Functions are named statements that performs
tasks.

e.g., function doWhatever () {statement
here}

The curly braces contain the statements of the function.
 JavaScript has built-in functions, and you can
write your own.
Values
 Values are bits of information.
 Values types and some examples include:
 Number: 1, 2, 3, etc.
 String: characters enclosed in quotes.
 Boolean: true or false.
 Object: image, form
 Function: validate, doWhatever
Variables
 Variables contain values and use the equal
sign to specify their value.
 Variables are created by declaration using
the var command with or without an initial
value state.


e.g. var month;
e.g. var month = “April”;
Expressions
 Expressions are commands that assign
values to variables.
 Expressions always use an assignment
operator, such as the equals sign.

e.g., var month = “May”; is an expression.
 Expressions end with a semicolon.
Operators
 Operators are used to handle variables.
 Types of operators with examples:
 Arithmetic operators, such as plus.
 Comparisons operators, such as equals.
 Logical operators, such as and.
 Control operators, such as if.
 Assignment and String operators.
JavaScript Syntax: Dynamic Typing
 Idea
 No need to declare variable type
 A value is only checked from proper type when it is operated
upon
 Example
var x = 5; //int
x = 5.5; //float
x = “five point five” //String
y=x/2
//wrong
Methods of Using JavaScript.
1. JavaScripts can reside in a separate page.
2. JavaScript can be embedded in HTML documents
-- in the <head>, in the <body>, or in both.
3. JavaScript object attributes can be placed in HTML
element tags.
e.g., <body onLoad="alert('WELCOME')">
1. Using Separate JavaScript Files.
 Linking can be advantageous if many pages use
the same script.
 Use the source element to link to the script file.
<script src="myjavascript.js”
language="JavaScript1.2”
type="text/javascript">
</script>
2. Embedding JavaScript in HTML.
 When specifying a script only the tags
<script> and </script> are essential, but
complete specification is recommended:
<script language="javascript”
type="text/javascript">
<!-- Begin hiding
window.location=”index.html"
// End hiding script-->
</script>
Using Comment Tags
 HTML comment tags should bracket any script.
 The <!-- script here --> tags hide scripts in
HTML and prevent scripts from displaying in
browsers that do not interpret JavaScript.
 Double slashes // are the signal characters for a
JavaScript single-line comment.
3. Using JavaScript in HTML Tags.
 Event handlers like onMouseover are a perfect
example of an easy to add tag script.
<a href=”index.html”
onMouseover="document.logo.src='js2.gif'"
onMouseout="document.logo.src='js.gif'">
<img src="js.gif" name="logo">
</a>
Creating an Alert Message
 The following script in the <body> tag uses the
onLoad event to display an Alert window
 The message is specified within parenthesis.
<body onLoad="alert('WELCOME. Enjoy
your visit. Your feedback can improve
cyberspace. Please let me know if you
detect any problems. Thank you.')">
Generating HTML Dynamically
 Idea
 Script is interpreted as page is loaded, and uses document.write or
document.writeln to insert HTML at the location the script occurs
 Template
…
<body>
Regular HTML
<script type=“text/javascript”>
<!-Build HTML Here
// -->
</script>
More regular HTML
</body>
A Simple Script
<html>
<head>
<title>First JavaScript Page</title>
<head>
<body>
<h1>First Javascript Page</h1>
<script type=“text/javascript”>
<!-document.write(“<hr>”);
document.write(“Hello World Wide Web”);
document.write(“<hr>”);
//-->
</script>
</body>
<html>
Simple Script, Result
Monitoring User Events
 Use various onXxx attributes related to HTML tags
 onClick
 onLoad
 onMouseOver
 onFocus
 …
User Events, Example
<html>
<head>
<title>Simple JavaScript Button</title>
<script type=“text/javascript”>
<!-function dontClick(){
alert(“I told you not to click!”);
}
//-->
</script>
</head>
<body bgcolor=“white”>
<h1>Simple JavaScript Button</h1>
<form>
<input type=“button” value = “Don’t click Me” onClick=“dontClick()”>
</form>
</body>
</html>
User Events, Result
JavaScript Syntax: Function Declaration
 Declaration syntax
 Functions are declared using the function reserved word
 The return value is not declared, nor are the types of the arguments

Example:
function square(x){
return(x*x);
}
function factorial(n){
if (n <= 0){
return(1);
} else{
return (n * factorial(n-1));
}
}
Next Class
 Bring your laptop on Thursday.
Download