Scribd
Upload
14 views6 pages

0054 Course Training Tutorial Js

Js tutorial

Uploaded by

Brian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views6 pages

0054 Course Training Tutorial Js

Js tutorial

Uploaded by

Brian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Web-Based Information Publishing On the Web

Systems • Writing HTML with a text editor allows to generate


web pages. These pages are said static in the sense that
Fall 2006 they do not change.
CMPUT 410: JavaScript • What if we want to personalize pages for particular
visitors or events?
Dr. Osmar R. Zaïane • What if we want to have actions on the page?
• What if the content of the page is from a database?
• Etc.
University of Alberta
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 1  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 2

Course Content Objectives

• Introduction • Perl & Cookies


• Internet and WWW • SGML / XML
• Learn how JavaScript stores data, how a document
• Protocols • CORBA & SOAP is structured in JavaScript
• HTML and beyond • Web Services • Learn event-based programming with JavaScript.
• Animation & WWW • Search Engines • Learn how JavaScript is event driven and how user
• CGI & HTML Forms • Recommender Syst. actions are tracked
• Javascript • Web Mining • See and analyze some concrete examples with
• Databases & WWW • Security Issues JavaScript.
• Dynamic Pages • Selected Topics

Web-based Applications

 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 3  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 4
Content Introduction to Variables
I. JavaScript and the Details
• Variable identifiers and their types
• The notion of objets • A variable in Javascript has a type:
• Arrays
– number (integer or non integer)
• Control structures
• Condition and selection – String
• Iteration – Boolean
• Procedures and functions – Null
II. Event-Based Programming with JavaScript
• What is an event? • JavaScript is not strongly typed.
• What are the recognized events?
• Capturing events.
III. Practical Examples
• Data entry validation within a form;
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 5  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 6

Declaring Variables
Type Conversion on the fly
The first time a variable is used it must be declared with the
keyword ‘var’.
• Because JavaScript is not strongly typed, it
var identifier = value; is possible to:
The identifier must start with a letter or underscore ‘_’ and can – Change the type of a variable;
have as many characters as necessary (letters, digits, – Do operations on variables of different types.
underscore).
– The major type, or default type, is string.
Javascript is sensitive to capital letters.
myvariable is different from MyVariable and x ≠ X

 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 7  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 8
Variable Examples Variable Examples (con’t)
<HTML> <BODY>
<HEAD> <script language="JavaScript">
<TITLE>My First Java Script with variables</TITLE> <!-- hide script
<script language="JavaScript"> document.write("myAddition="+myAddition+"<BR>");
<!– hide script document.write("myConcatenation="+myConcatenation+"<BR>");
var myNumber=35; document.write("myError="+myError+"<BR>");
var myString="2004"; document.write("myDream="+myDream+"<BR>");
var myOtherString=“CMPUT410"; myError = myNumber * 3;
var myAddition = myNumber+myNumber; document.write("myError="+myError+"<BR>");
var myConcatenation = myStyring + myOtherString; myNumber=“Bye!";
var myError = myNumber + myOtherString; document.write("myNumber="+myNumber+"<BR>");
var myCalculation = myNumber + myString; // end of hide --> myAddition=70
var myDream = myOtherString + myString; </script>
myConcatenation=2004CMPUT410
// end of hide --> </BODY>
</script> </HTML> myError=35CMPUT410
</HEAD> myDream= CMPUT4102004
myError=105
myNumber=Bye!
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 9  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 10

Content
I. JavaScript and the Details
• Variable identifiers and their types JavaScript & Concept of Objects
• The notion of objets
• Arrays
• Control structures • JavaScript is not an object-oriented language.
• Condition and selection • JavaScript is an object-based language.
• Iteration • There are many pre-defined objects, but
• Procedures and functions programmers can define their own objects.
II. Event-Based Programming with JavaScript
• What is an event? • An object has attributes (specific properties) as
• What are the recognized events? well as methods (behaviour of objects).
• Capturing events. • An attribute could be a value or recursively
III. Practical Examples another object.
• Data entry validation within a form;
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 11  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 12
A Book is an Object What are the Objects, What
Title
are their Properties?
Authors
Editors
Number of pages
Price
Set of Chapters
Set of figures and images
etc.
?
Each book has the same
attributes with different
values

 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 13  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 14

Access Object Properties Access Object Methods


myObject.oneProperty myObject.oneMethod(parameters)
Object Name . Attributre Name Object Name . Method Name ( parameters )
If the attribute is also an object, to access the property of the If there are no parameters:
attribute’s attribute:
myObject.oneMethod()
myObject.oneProperty.aPropertyOfProperty
Ex: Book.Editor.Address Ex: document.write(“Hello!”)

document.MyForm.Name.value
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 15  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 16
Predefined Object Classes Object Date
• There are many intrinsic pre-defined objects in • The object Date needs to be instantiated
JavaScript: with the keyword new.
var today= new date();
–Date –Navigator
–String –History • The class Date doesn’t have properties but
–Math –Location the following methods:
–Window –Form •getDate() •getYear()
–Document etc… •getDay() •setDate()
•getHours() •setHours()
•getMinutes() •setMinutes()
etc…
• These objects have their pre-defined attributes and •getMonth() •setMonth()
methods. •getSeconds() •getSeconds()
•getTime(); •setTime();
•getTimezoneOffset() •setYear()
 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 17  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 18

Example with Date The Object String


<HTML> • Where we define a string constant or a string variable,
<HEAD> JavaScript creates an instance of an object String.
<TITLE>My test with dates</TITLE><script language="JavaScript">
var thisIsNow=new Date(); • The object String has one property, lenght, and many
var BirthDate = new Date(60,05,18); methods:
</script></HEAD>
<BODY> <script language="JavaScript">
document.write(“Today we are the: "+thisIsNow+"<BR>"); •anchor() astring.anchor(anchor)Î<A name=“anchor”>astring</A>
document.write(“Alfred’s birthdate is the "+ BirthDate +"<BR>"); •big() astring.big()Î<BIG>astring</BIG>
document.write(“The date:"+ BirthDate.getDate()+ "/" +
•blink() astring.bink()Î<BLINK>astring</BLINK>
(BirthDate.getMonth()+1) + "/" +
(BirthDate.getYear()+1900)+"<BR>"); •bold() astring.bold()Î<BOLD>astring</BOLD>
document.write(“The time now is:" + thisIsNow.getHours() + ":" + •fontcolor() astring.fontcolor(#FF0000)Î<FONT color=“#FF0000”>astring</FONT>
thisIsNow.getMinutes() + ":" + •fontsize() astring.fontsize(5)Î<FONT size=5>astring</FONT>
thisIsNow.getSeconds()+"<BR>"); •italics(); astring.italics() Î<I>astring</I>
thisIsNow.setYear(2010); •small() astring.small()Î<SMALL>astring</SMALL>
document.write(“The new date in the future is:<br>"+ thisIsNow); •sub() astring.sub() Î<SUB>astring</SUB>
</script></BODY></HTML> •sup() astring.sup() Î<SUP>astring</SUP>

 Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 19  Dr. Osmar R. Zaïane, 2001-2006 Web-based Information Systems University of Alberta 20
Click here to download full PDF material

You might also like