Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 04 Induction to Java Script
Document related concepts
no text concepts found
Transcript
Introduction to Web Application
Introduction to Java Script
1
Topics
•
•
•
•
Review CSS
Overview Java Script
A simple Java Script in Web Page
Syntax of Java Script
2
Review CSS
•
•
•
•
•
•
•
What is CSS?
Box model
text flow
id and class
inline, embedded, and outsource CSS
Develop CSS in Dreamweaver
How to use CSS?
3
Overview of Java Script
4
Introduction to JavaScript
• JavaScript scripting language
– Enhances functionality and appearance
– Client-side scripting
• Makes pages more dynamic and interactive
– Foundation for complex server-side scripting
5
History of JavaScript
• Originally developed by Netscape, as
LiveScript
• Became a joint venture of Netscape and
Sun in 1995, renamed JavaScript
• Now standardized by the European
Computer Manufacturers Association as
ECMA-262 (also ISO 16262)
• Microsoft’s JScript
6
JavaScript vs. Java
• JavaScript and Java are only related through
syntax
– JavaScript is dynamically typed
– JavaScript’s support for objects is very different
7
JavaScript and Object Orientation
• JavaScript is NOT an object-oriented
programming language
– Does not support class-based inheritance
– Cannot support polymorphism
– Has prototype-based inheritance, which is much
different
8
JavaScript and Object Orientation
• JavaScript Objects:
– JavaScript objects have collections of
properties, which are like the members of
classes in Java and C++
• Properties can be data properties or method
properties
– All JavaScript objects are accessed through
references
9
Write a Simple Java Script in Web Page
10
Ways to Add JavaScript to HTML
• Inline Style
<html>
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!-document.writeln(
"<h1>Welcome to JavaScript Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
11
12
Ways to Add JavaScript to HTML
• Written in the <head> of a document
• <script> tag
– Indicate that the text is part of a script
– type attribute
• Specifies the type of file and the scripting language
use
– writeln method
• Write a line in the document
13
Ways to Add JavaScript to HTML
• Scripts are often hidden from browsers
that do not include JavaScript
interpreters by putting them in special
comments
<!--- JavaScript script –
//-->
14
Ways to Add JavaScript to HTML
• Indirectly, as a file specified in the src attribute of
<script>, as in
<script type=“text/javascript” language =
"JavaScript" src = "myScript.js"> … </script>
<html><head>
<title>Use External Script</title>
<script type="text/javascript"
language="Javascript"
src="scripts/alert.js"/>
</head>
<body></body>
</html>
15
Other Example of
Java
Script
\”
“
\n
new line
<html>
\t
horizontal
<head>
table
<title>Printing a Line with Multiple
Statements</title>
Carriage return
<script type = "text/javascript">\r
\\
\
<!-\’
‘
document.write( "<h1 style = \"color: magenta\">" );
document.write( "Welcome to JavaScript " +
"Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
16
17
Other Example of Java Script
<html >
<head><title>Printing Multiple Lines</title>
<script type = "text/javascript">
<!-document.writeln( "<h1>Welcome to<br />
JavaScript" +
"<br />Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
18
19
Other Example of Java Script
<html>
<head><title>Printing Multiple Lines in a Dialog Box</title>
<script type = "text/javascript">
<!-window.alert( "Welcome to \n
JavaScript\n
Programming!" );
// -->
</script>
</head>
<body><p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
20
21
Other Example of Java Script
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using Prompt and Alert Boxes</title>
<script type = "text/javascript">
<!-- Different with Java
var name; // string entered by the user
name = window.prompt( "Please enter your name",
"GalAnt" );
document.writeln( "<h1>Hello " + name +
", welcome to JavaScript programming!</h1>" );
// -->
</script>
</head>
<body><p>Click Refresh (or Reload) to run this script again.</p> </body>
</html>
22
23
Other Example of Java Script
<script type = "text/javascript">
<!-var name; // string entered by the user
now = new Date();
hour = now.getHours();
name = window.prompt( "Please
enter your name", "GalAnt" );
if ( hour < 12 )
document.write( "<h1>Good Morning, " );
// determine whether the time is PM
…
document.writeln( name + ", welcome to
JavaScript programming!</h1>" );
// -->
</script>
24
25
Summary of Example
•
•
•
•
Write some simple tag in Page
Alert
Prompt
Difference between Java and Java Script
26
Syntax of Java Script
•
•
•
•
•
•
•
•
Identifiers and reserved words
Comments
Data types, literals and variables
Operators and expressions
Control statements
Functions and screen output
Object creation and modification
Array
27
Identifiers and reserved words
• Identifier form:
– Begin with a letter or underscore, followed
by any number of letters, underscores, and
digits.
– No length limitation
– Case sensitive
– Can not be reserved words
• Example
– _a, a, a1
28
Identifiers and reserved words
• In JavaScript, identifiers are used to:
– name variables,
– name functions,
– provide labels for loops.
• 25 reserved words, plus future reserved
words
29
Comments
• Two forms of comments:
– //
Rest of a line is considered a comment
– /* … */
All lines in it are comments
• JavaScript statements usually do not need to
be terminated by semicolons, but we’ll do it
30
Data Types
• In JavaScript, there are three primary data
types (String, Number, Boolean) one
composite data type (Object), and two
special data types (Null, Undefined).
31
Data Types
• Number, String, and Boolean have wrapper
objects (Number, String, and Boolean), the
wrapper objects provide properties and
methods for primitive values
• All objects are allocated on the heap; all
primitive values are allocated elsewhere
32
Data Types
33
Data Types
• String Data Type:
– A string value is a chain of zero or more
Unicode characters (letters, digits, and
punctuation marks) strung together.
• Number Data Type:
– In JavaScript, there is no distinction between
integer and floating-point values; a JavaScript
number can be either (internally, JavaScript
represent all numbers as floating-point values).
34
Data Types
• Boolean Data Type:
– Whereas the string and number data types can
have a virtually unlimited number of different
values, the Boolean data type can only have
two. They are the literals “true” and “false”
• Null Data Type:
– The null data type has only one value in
JavaScript: null.
– The null keyword cannot be used as the name
of a function or variable.
35
Data Types
• Null Data Type:
– You can erase the contents of a variable
(without deleting the variable) by assigning it
the null value
• Undefined Data Type:
– The undefined value is returned when you use:
• an object property that does not exist,
• a variable that has been declared, but has never had
a value assigned to it.
36
Literals
• Numeric literals
– Just like Java
– All numeric values are stored in doubleprecision floating point
• String literals
– Delimited by either ' or “
– Can include escape sequences (e.g., \t)
– All String literals are primitive values
37
Literals
• Boolean values are true and false
• The only Null value is null
• The only Undefined value is undefined
38
Variables
• The first time a variable appears in your
script is its declaration
• Variables can be either implicitly or
explicitly declared, and explicit
declarations are recommended. You do this
using the var keyword.
• A variable that has been declared but not
assigned a value has the value undefined
39
Operators
40
String Properties and Methods
• String catenation operator: +
– Operands can be variables or string literals
• String properties & methods:
–
–
–
–
–
length e.g., var len = str1.length; (a property)
charAt(position) e.g., str.charAt(3)
indexOf(string) e.g., str.indexOf('B')
substring(from, to) e.g., str.substring(1, 3)
toLowerCase() e.g., str.toLowerCase()
41
String Properties and Methods
• Conversion Functions
– parseInt(string) and parseFloat(string)
• The string must begin with a digit or sign and
have a legal number; otherwise NaN is returned
• Not often needed, because of coercions
– toString()
42
Control Statements
• Similar to C, Java, and C++
• Compound statements are delimited by
braces, but compound statements are not
blocks (cannot declare local variables)
43
Control Statements
• Selection Statements:
– If…else
– Switch
–?:
44
Control Statements
• Loop Statements:
–
–
–
–
for
for…in…
while
do…while
<script type="text/javascript"
language="Javascript">
var myArray = new
Array("itemA","itemB","itemC");
for( key in myArray )
{
document.writeln("<br />");
document.writeln(myArray[key]);
}
</script>
45
Control Statements
• Others:
– break
– continue
– return
46
Functions
• We place all function definitions in the head
of the HTML document, and all calls in the
body
function function_name([formal_parameters]) {
-- body –
}
47
Functions
• Variables explicitly declared in a function
are local
• If a variable appears in a script that is
defined both as a local variable and as a
global variable, the local variable has
precedence.
48
Functions
• Actual parameter vs. formal parameter
• Parameters are passed by value, but when a
reference variable is passed, the semantics
are pass-by-reference
• There is no clean way to send a primitive by
reference
49
Functions
• All parameters are sent through a property
array, arguments, which has the length
property
• There is no type checking of parameters,
nor is the number of parameters checked
(excess actual parameters are ignored,
excess formal parameters are set to
undefined)
50
Functions
• Return value is the parameter of return
– If there is no return, or if the end of the function
is reached, undefined is returned
– If return has no parameter, undefined is
returned
51
Functions
• Functions are objects, so variables that
reference them can be treated as other
object references (can be passed as
parameters, assigned to variables, and be
elements of an array)
– If fun is the name of a function:
ref_fun = fun;
/* Now ref_fun is a reference to fun */
ref_fun(); /* A call to fun */
52
Function
• Recursive
function factorial(number){
if (number <= 1) //base case
return 1;
else
return number*factorial(number-1);
}
53
Screen Output
• The JavaScript model for the HTML
document is the Document object
• The model for the browser display window
is the Window object
• The Window object has two properties,
document and window, which refer to the
Document and Window objects,
respectively
54
Screen Output
• The document object has methods write and
writeln which dynamically create contents
55
Screen Output
• The Window object has three methods for
creating dialog boxes, alert, confirm, and
prompt
– The default object is the current window, so the
object need not be included in the call to any of
these three
56
Objects in JavaScript
• JavaScript objects are collections of
properties and methods.
– A property is a value or set of values (in the
form of an array or object) that is a member of
an object
– A method is a function that is a member of an
object
57
Objects in JavaScript
• JavaScript supports two kinds of objects
– Intrinsic (or "built-in") objects, includes Array,
Boolean, Date, Math, etc.
– User-define objects
58
Object Creation
• Objects can be created with a new
expression
– The most basic object is one that uses the
Object constructor, as in
var myObject = new Object();
• The new object has no properties - a blank
object
59
Constructors
• JavaScript constructors are special methods
that create and initialize the properties for
newly created objects
• When the constructor is called, this is a
reference to the newly created object
60
<html>
<head>
<title>JavaScript object</title>
<script type="text/javascript" language="Javascript">
<!--
function pasta(grain, width, shape, hasEgg)
{
this.grain = grain;
this.width = width;
this.shape = shape;
this.hasEgg = hasEgg;
}
var myobj = new pasta("wheat", 0.3, "oval", true);
//-->
</script>
</head>
<body>
<h1>This is H1 element</h1>
<p>Let's see the effective of javascript</p>
<script type="text/javascript" language="Javascript">
document.writeln("<h1>" + myobj.grain + "</h1>");
</script>
</body>
</html>
61
Constructors
function plane(newMake, newModel, newYear){
this.make = newMake;
this.model = newModel;
this.year = newYear;
}
myPlane = new plane("Cessna",
"Centurnian",
"1970");
62
Constructors
• Can also have method properties:
function displayPlane() {
document.write("Make: ", this.make, "<br />");
document.write("Model: ", this.model, "<br />");
document.write("Year: ", this.year, "<br />");
}
Now add the following to the constructor:
this.display = displayPlane;
63
Object Modification
• Properties can be added to any object, any
time:
var myAirplane = new Object();
myAirplane.make = "Cessna ";
myAirplane.model = "Centurian";
• The number of properties in a JavaScript
object is dynamic
• Objects can be nested, so a property could be
itself another object, created with new
64
Object Modification
• Properties can be accessed in two ways:
– by dot notation
var property1 = myAirplane.model;
– in array notation
var property1 = myAirplane["model"];
• If you try to access a property that does not
exist, you get undefined
65
Object Modification
• Properties can be deleted with delete, as in
delete myAirplane.model;
• Another Loop Statement
– for (identifier in object) statement or compound
for (var prop in myAirplane)
document.write(myAirplane[prop] + "<br
/>");
66
Arrays
• Arrays in JavaScript are objects with some
special functionality
• Array elements can be primitive values or
references to other objects
• All array elements are allocated
dynamically from the heap, JavaScript
arrays have dynamic length
67
Arrays
• Array objects can be created in two ways:
with new, or by assigning an array literal,
which is a list of values enclosed in brackets:
– var myList = new Array(24);
– var myList2 = new Array(24, "bread", true);
– var myList3 = [24, "bread", true];
68
Arrays
• Length of array:
– The array length is dynamic and the length
property stores the length
– The lowest index of every JavaScript array is
zero
– The length of an array is the highest subscript
to which an element has been assigned, plus 1
• myList[122] = "bitsy"; // length is 123
69
Arrays
• Length of array:
– Because the length property is writeable, you
can set it to make the array any length you like,
as in
• myList.length = 150;
– This can also shorten the array (if the new
length is less than the old length)
– Only assigned elements take space
70
Sort in Array p355
• A.sort (compareIntegers)
• function compareIntegers(value1, value2)
• {
return parseInt(value1)-parseInt(value2)<=0;
• }
71
Multidimensional Arrays
• Two-dimensional arrays analogous to tables
– Rows and columns
• Specify row first, then column
– Two subscripts
72
Multidimensional Arrays
Column 0
Column 1
Column 2
Column 3
Row 0
a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]
Row 1
a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]
Row 2
a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]
Column subscript (or index)
Row subscript (or index)
Array name
Fig. 11.12 Two-dimensional array with three rows and four columns.
73
Multidimensional Arrays
• Declaring and initializing multidimensional
arrays
– Group by row in square brackets
– Treated as arrays of arrays
– Creating array b with one row of two elements
and a second row of three elements:
var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];
74
Multidimensional Arrays
• Also possible to use new operator
– Create array b with two rows, first with five
columns and second with three:
var b;
b = new Array( 2 );
b[ 0 ] = new Array( 5 );
b[ 1 ] = new Array( 3 );
75
Summary
• Java Script Examples
• Java Script Syntax
• Preview Chapter 13, 14, 15, 16
76
