1 Chapter 1 Introduction to Computers and the Internet Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

2 What is a Computer ? Computer is a device capable of – Performing computations – Making logical decisions – Works billions of times faster than human beings hardware devices Keyboard Screen (monitor) Disks Memory Processing Units

Fall 2008Yanjun Li CSRU What is Software ? Computer Programs are called software – sets of instructions that process data – guide computer through orderly sets of actions specified by computer programmers programming languages – Programmers write instructions that comprise software in various programming languages

Fall 2008Yanjun Li CSRU Types of Programming Languages Three general types of programming languages – Machine languages dependent machine dependent – Assembly languages dependent machine dependent – High-level languages portable most are portable

Fall 2008Yanjun Li CSRU High-level Programming Languages Programming languages, such as C, C++, Visual Basic and Java, must be compiled before execution. Scripting languages, such as JavaScript, VBScript and Perl, is interpreted by another program at runtime.

Fall 2008Yanjun Li CSRU The Internet A "network of networks" that consists of millions of smaller domestic, academic, business, and government networks. – Worldwide, publicly accessible Mixing computing and communications technologies. electronic mailonline chatfile transfer World Wide Web Carrying information and services, such as electronic mail, online chat, file transfer, and the interlinked Web pages and other documents of the World Wide Web.

Fall 2008Yanjun Li CSRU The World Wide Web Introduced in 1990 by Tim Berners-Lee A system of interlinked, hypertext documents accessed via the Internet. – With a web browser, a user views web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.

Fall 2008Yanjun Li CSRU Everybody Wants a Web Site Figure is from “Head First Servlets & JSP”

Fall 2008Yanjun Li CSRU Client-Server Model A web browser (client) lets a user request a resource. A web server takes the client request and gives something back to the client. Clients and servers know HTML. Client Request Response

Fall 2008Yanjun Li CSRU Scripting Languages Scripting languages, which can be embedded within HTML, commonly are used to add functionality to a Web page. Scripting languages came about largely because of the development of the Internet as a communications tool. JavaScript, ASP, JSP, PHP, Perl and Python are examples of scripting languages.InternetJavaScriptASP JSPPHPPerlPython

Fall 2008Yanjun Li CSRU What is Web Browser ? A Web browser is a software that enables a user to display and interact with the Web’s rich multimedia content such as text, images, and other information. The Web could be the World Wide Web, a local area network, or a web page on your own machine. Microsoft Internet Explorer or Netscape Navigator – The appearance of a Web page may differ between browsers.

Fall 2008Yanjun Li CSRU URL & Hyperlinks URL (Uniform/Universal Resource Locator) – Web page address – typing in Address field HTTP (HyperText Transfer Protocol) – Protocol for transferring data over the Internet HTTPS (Secure HyperText Transfer Protocol) – Protocol for transferring encrypted data over the Internet. Hyperlinks – Graphical or textual elements Click to link to another Web page Loads new page into browser window

Fall 2008Yanjun Li CSRU Goal of This Course HTML – Focuses on writing HTML files. JavaScript – Teaches programming language and programming language principles. Client-side applications – Teaches how to create Internet-based and Web-based applications. CSRU3300 focuses on building a web server.

Fall 2008Yanjun Li CSRU Examples An Interesting Map: – United States Map United States Map A Moving Text: – Dynamic Position Dynamic Position By Hansary Laforest.

Fall 2008Yanjun Li CSRU Online Resources – The World Wide Web Consortium (W3C). – Full Web Building Tutorials - All Free – The official web page for the text book.

Fall 2008Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Spring 2009Yanjun Li CSRU Chapter 4 Introduction to XHTML: Part 1 Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Spring 2009Yanjun Li CSRU What is XHTML? XHTML EXtensible HyperText Markup Language – XHTML 1.1 – A markup language that specifies the format of the text that is displayed in a Web browser. presentation structure – Separation of the presentation of a document from the structure of the document’s information – Based on HTML A legacy technology of the World Wide Web Consortium (W3C)

Spring 2009Yanjun Li CSRU Editing XHTML XHTML documents – Source-code form – Text editor (e.g. Notepad, emacs, etc.) –.html or.htm file-name extension – Web server Stores XHTML documents – Web browser Requests XHTML documents

Spring 2009Yanjun Li CSRU First XHTML Example (1) XHTML comments starts with Mandatory XHTML Elements: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “ Title goes here

Spring 2009Yanjun Li CSRU First XHTML Example (2) html element is the root element of a XHTML document – head element Head section: Title of the document and Style sheets and scripts – body element Body section: Page’s content the browser displays

Spring 2009Yanjun Li CSRU First XHTML Example (3) Every element starts with Start tag and ends with End tag, with the displayed content in between them. Example:...,.... Start tag may have attributes (provide additional information about an element) – A name and value pair – Example:

Spring 2009Yanjun Li CSRU XHTML Syntax Rules XHTML documents must have one root element XHTML elements – be properly nested – be closed – be in lowercase Attribute names – be in lower case Attribute values – be quoted

Spring 2009Yanjun Li CSRU main.html (1 of 1)

Spring 2009Yanjun Li CSRU Headers Six headers ( header elements): h 1 ~ h6

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Linking Hyperlink – References other sources such as XHTML documents and images – Both text and images can act as hyperlinks – Created using the a (anchor) element: Attribute href specifies the location of a linked resource : href = “ Link to addresses: href =

Spring 2009Yanjun Li CSRU links.html (1 of 2)

Spring 2009Yanjun Li CSRU contact.html (1 of 1)

Spring 2009Yanjun Li CSRU Malicious Link Manipulation Phishing: a link in an leads to the spoofed websitelink spoofed website – Make the anchor text for a link appear to be validanchor text for a link – Misspelled URL BR

Spring 2009Yanjun Li CSRU Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) – img element with attributes: src attribute : Specifies the location of the image file width and height attributes: Pixels (“picture elements”) alt attribute : the text will be displayed if the browser could not display the image.

Spring 2009Yanjun Li CSRU Images (2) Empty elements – Terminated by character / inside the closing right angle bracket ( > ), or by explicitly including the end tag – Example: br element: Line break – tag: Bold characters – Bold

Spring 2009Yanjun Li CSRU picture.html (1 of 1)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Image as Link Use an image as a link Image has no border <img src="home.png" width="125" height="26" alt="Go Home" border="0" />

Spring 2009Yanjun Li CSRU nav.html (1 of 2)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Internal Linking Enables the user to jump between locations in the same document – First, create an internal hyperlink destination by setting attribute id of an element – Second, create an internal link to this element. – Example: Bugs : Go to Bugs

Spring 2009Yanjun Li CSRU links.html (1 of 3)

Spring 2009Yanjun Li CSRU links.html (3 of 3)

Spring 2009Yanjun Li CSRU Creating and Using Image Maps (1) Designate certain areas of an image (called hotspots) as links – Element map Attribute id identifies the image map – Element img Attribute usemap refers the map by id. – Example:..

Spring 2009Yanjun Li CSRU Creating and Using Image Maps (2) Element area defines hotspot – Attribute shape and coords Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” ) – Attribute href Specifies the link’s target. – Attribute alt Provides alternative text for the link.

Spring 2009Yanjun Li CSRU picture.html (1 of 3)

Spring 2009Yanjun Li CSRU picture.html (2 of 3)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Unordered Lists Unordered list element ul – Creates a list in which each item begins with a bullet symbol (called a disc) – li (list item): Entry in an unordered list – Format:

Spring 2009Yanjun Li CSRU links2.html (1 of 2)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Nested and Ordered Lists Represent hierarchical relationships Ordered lists ( ol ) – Creates a list in which each item begins with a number – Format

Spring 2009Yanjun Li CSRU list.html (1 of 3)

Spring 2009Yanjun Li CSRU list.html (2 of 3)

Spring 2009Yanjun Li CSRU list.html (3 of 3)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Type of Ordered List Attribute type defines the type of list Available types: type=“A” type=“a” type=“I” type=“i” type=“1”

Spring 2009Yanjun Li CSRU Type of Unordered List Attribute type defines the type of list Available types: type=“disc” type=“square” type=“circle”

Spring 2009Yanjun Li CSRU Special Characters and More Line Breaks Character entity references: &code; Numeric character references (e.g. & ) – See Appendix A, (page 1429) – A complete list : A complete list : Strike-out text : Superscript text : Subscript text : Horizontal rule (horizontal line)

Spring 2009Yanjun Li CSRU contact2.html (1 of 2)

Spring 2009Yanjun Li CSRU contact2.html (2 of 2)

Spring 2009Yanjun Li CSRU W3C XHTML Validation Service (1) Validation service ( validator.w3.org ) – Checking a document’s syntax URL that specifies the location of the file Uploading a file to the site validator.w3.org/file-upload.html

Spring 2009Yanjun Li CSRU W3C XHTML Validation Service (2)

Spring 2009Yanjun Li CSRU Web Resources validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML

Spring 2009Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Spring 2009Yanjun Li CSRU Chapter 5 Introduction to XHTML: Part 2 Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Spring 2009Yanjun Li CSRU Objectives Tables – Present information Forms – Collect information from visitor Frames – Display multiple documents in the browser

Spring 2009Yanjun Li CSRU Basic XHTML Tables (1) Organize data into rows and columns table element with useful attributes: – border : s pecifies the table’s border width in pixels. No border: border=“0” – width : specifies the width of table. In percentage or in pixels. – summary : d escribes the table’s contents – Example:

Spring 2009Yanjun Li CSRU Basic XHTML Tables (2) caption element: like the title of the table – d escribes the table’s content and helps text- based browsers interpret table data Head section (header cell, defined with a thead element) – Contains header information such as column names Foot section (defined with a tfoot element)

Spring 2009Yanjun Li CSRU Basic XHTML Tables (3) For head and foot sections : – tr element (defines an individual table row) – th element (defines the columns in the head/foot sections) Most browsers center and display text formatted by th elements in bold.

Spring 2009Yanjun Li CSRU Basic XHTML Tables (4) Table body (defined with a tbody element) For body sections : – tr element (defines an individual table row) – Each row has a tr element – td element ( Data cells ) – Empty data cell:

Spring 2009Yanjun Li CSRU table.html (1 of 3)

Spring 2009Yanjun Li CSRU table.html (2 of 3)

Spring 2009Yanjun Li CSRU table.html (3 of 3)

Spring 2009Yanjun Li CSRU Tags inside a Table Write html tags inside a table cell: Example: This is a paragraph. This is another paragraph.

Spring 2009Yanjun Li CSRU Cell Padding Attribute of table element: – cellpadding=“10” – create more white space between the cell content and its borders.

Spring 2009Yanjun Li CSRU Cell Spacing Attribute of table element: – cellspacing=“10” – increase the distance between the cells.

Spring 2009Yanjun Li CSRU Background of Table/Cell Attribute of table or cell element: – bgcolor=“red” Background color of a table. – background=“yellow.jpg” Background image of a table

Spring 2009Yanjun Li CSRU Layered Tables Example: – Art Frame ……

Spring 2009Yanjun Li CSRU Size of Table/Cell For table as well as td, height and width attributes can be added to set the size. Example: …

Spring 2009Yanjun Li CSRU Absolute vs. Relative Size If the width is specified as an absolute size, if user’s monitors are 640x480 pixels, large table will not be shown fully on the screen. Relative Size:

Spring 2009Yanjun Li CSRU Intermediate XHTML Tables and Formatting (1) Element colgroup : groups and formats columns Element col has the following attributes: – align : determines the alignment of text in the column – span : determines how many columns the col element formats – valign : aligns data vertically One of the four values: “top”, “middle”, “bottom”, “baseline”

Spring 2009Yanjun Li CSRU Intermediate XHTML Tables and Formatting (2) Element tr, th, td have attributes – align – valign – rowspan and colspan specify the number of rows or columns occupied by a cell

Spring 2009Yanjun Li CSRU table2.html (1 of 4)

Spring 2009Yanjun Li CSRU table2.html (2 of 4)

Spring 2009Yanjun Li CSRU table2.html (3 of 4)

Spring 2009Yanjun Li CSRU Organize Webpage with Table Use table to set the layout of a webpage Set table attribute border =“0” Example: two-column page

Spring 2009Yanjun Li CSRU Forms Data is collected on the Internet and processed by a program on a Web server. Form : collect data from a user and send to a Web server. client-side Form performs the client-side functionality. server-side The program on the Web server performs the server-side functionality.

Spring 2009Yanjun Li CSRU Basic XHTML Forms (1) Forms can contain visual and non-visual components. – Visual components : graphical user interface components. – Non-visual components (hidden inputs): store useful data, such as how the program on the Web server processes the coming data.

Spring 2009Yanjun Li CSRU Basic XHTML Forms (2) Element form – Attribute method Specifies how the form’s data is sent to Web server method = “post” – Appends form data to the browser request method = “get” – Appends form data directly to the end of the URL – Attribute action Specifies the URL of a script on the Web server Example: :

Spring 2009Yanjun Li CSRU Basic XHTML Forms (3) Element input: specifies data to provide to the script that processes the form – Attribute type indicates the type of the input element. The default value is "text“, Other values are “hidden”, “submit”, “reset”. – Attribute name defines a unique name for the input element. – Attribute value defines the default value of the element. – Attribute size, maxlength defines the size of the input element and the maximum number of characters allowed in a text field. Element label : associate the label with a control.

Spring 2009Yanjun Li CSRU form.html (1 of 3)

Spring 2009Yanjun Li CSRU form.html (2 of 3)

Spring 2009Yanjun Li CSRU form.html (3 of 3)

Spring 2009Yanjun Li CSRU More Complex XHTML Forms (1) Element textarea inserts a multiline text box (text area) – Attribute rows s pecifies the number of rows – Attribute cols s pecifies the number columns Element input with password, size type – Inserts a password box with the specified size Element input with checkbox type – Enable users to select from a set of options – Checkboxes that belong to a group are assigned the same name. – Multiple checkboxes could be checked in one group. – checked =“checked” indicates that the input element should be checked when it first loads.

Spring 2009Yanjun Li CSRU form2.html (1 of 4)

Spring 2009Yanjun Li CSRU form2.html (2 of 4)

Spring 2009Yanjun Li CSRU form2.html (3 of 4)

Spring 2009Yanjun Li CSRU form2.html (4 of 4)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU More Complex XHTML Forms (2) Element input with radio type – Enable users to select one from a set of options – The radio buttons in a group are assigned the same name. – Only one radio button could be selected in one group. – checked =“checked” indicates that the input element should be checked when it first loads.

Spring 2009Yanjun Li CSRU More Complex XHTML Forms (3) Element select provides a drop-down list of items – Attribute disabled when set, it disables the drop-down list : disabled=“disabled” – Attribute multiple when set, it specifies that multiple items can be selected at a time : multiple=“multiple” – Attribute name defines a unique name for the drop-down list – Attribute size defines the number of visible items in the drop-down list Element option adds items to the drop-down list – Attribute selected s pecifies which item initially is displayed as the selected item

Spring 2009Yanjun Li CSRU form3.html (1 of 6)

Spring 2009Yanjun Li CSRU form3.html (2 of 6)

Spring 2009Yanjun Li CSRU form3.html (3 of 6)

Spring 2009Yanjun Li CSRU form3.html (4 of 6)

Spring 2009Yanjun Li CSRU form3.html (5 of 6)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU frameset Element (1) Allow browser display more than one document simultaneously – Element frameset Attribute cols defines the number and size of columns in a vertical frameset. Attribute rows defines the number and size of rows in a horizontal frameset. Values could be shown in pixels, %, *. Example: – There is no body element in the page.

Spring 2009Yanjun Li CSRU frameset Element (2) Element frame – Specifies the documents that will be loaded – Attribute src Specifies URL of the page to display – Attribute name Defines a unique name for the frame – Attribute frameborder Defines the border of the frame, “0” or “1” – Example :

Spring 2009Yanjun Li CSRU Jump to a specified section Attribute src could be a specified section in a file. The specified section has an id attribute set. Example: in mainFour.html :

Spring 2009Yanjun Li CSRU frameset Element (3) In nav.html file, the links should like : <a href = "links.html" target = "main“ > links – The name of the destination frame is the target.

Spring 2009Yanjun Li CSRU frameset Element (3) Element noframes – Displays text for browsers that do not handle frames. – The noframes element goes inside the frameset element. – Example: Your browser does not handle frames!

Spring 2009Yanjun Li CSRU index.html (1 of 2)

Spring 2009Yanjun Li CSRU index.html (2 of 2)

Spring 2009Yanjun Li CSRU nav.html (1 of 2)

Spring 2009Yanjun Li CSRU nav.html (2 of 2)

Spring 2009Yanjun Li CSRU Nested frameset s frameset s within frameset s Example : Frame is not handled

Spring 2009Yanjun Li CSRU index2.html (1 of 2)

Spring 2009Yanjun Li CSRU index2.html (2 of 2)

Spring 2009Yanjun Li CSRU

Spring 2009Yanjun Li CSRU Web Resources

Spring 2009Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 6 Cascading Style Sheets™ (CSS) Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Cascading Style Sheets (CSS) Separation of structure from presentation Three ways to define the style of XHTML files – External Style Sheet – Embedded Style Sheet – Inline Style

Fall 2007Yanjun Li CSRU Cascading Style Sheets (CSS) Separation of structure from presentation Inline Styles – Declare an individual element’s format – Attribute style inside a single XHTML element – CSS property Properties background-color, color Properties font-family, font-size Followed by a colon and a value For example: your paragraph

Fall 2007Yanjun Li CSRU Inline Styles

Fall 2007Yanjun Li CSRU Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head element. Element style – Attribute type describes a file’s content using Multipurpose Internet Mail Extensions (MIME) type – Example:

Fall 2007Yanjun Li CSRU CSS Rules For an element in XHTML, you can specify a displaying rule – The body of each rule is enclosed in { }. – Properties background-color, color – Properties font-family, font-size – Example : li, p {color: red; font-size: 12pt}

Fall 2007Yanjun Li CSRU Style Class Defines styles that can be applied to any type of element. The declaration:.special {... } Attribute class of an XHTML element is used to apply a style class: – Example :

Fall 2007Yanjun Li CSRU Linking External Style Sheets External style sheets – Can provide uniform look and feel to entire site – File extension : styples.css – CSS comments : /* ….*/ – Element link in the head section of the XHTML document : <link rel = “stylesheet” type=“text/css” href=“styles.css” />

Fall 2007Yanjun Li CSRU Conflicting Styles (1) Cascading: all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Embedded style sheet (inside the tag) 4. Inline style (inside an HTML element)

Fall 2007Yanjun Li CSRU Conflicting Styles (2) Inheritance : – Child (nested) element inherits styles of parent element. – Descendant’s properties have greater specificity than ancestor’s properties. Child’s style > Parent’s style

Fall 2007Yanjun Li CSRU Grouping Element XHTML Element span : a grouping/inline- level element. – Apply CSS rules to a block of text. XHTML Element div : a similar element, but display on its own line, with margins above and below (a block-level element). – Apply CSS rules to a block of text.

Fall 2007Yanjun Li CSRU Length Measurement Relative-length Measurement is based on screen resolution. – px (pixels) : margin-left: 75px – em (height of an uppercase M) : font-size: 1.5em – ex (height of a lowercase x) Absolute-length Measurement – in (inches), cm (centimeters), mm (millimeters), pt (points, 1 pt = 1/72 in ), pc (picas, 1 pc = 12 pt ).

Fall 2007Yanjun Li CSRU Font font-size sets the size of a font – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, XXpt, xx% font-family : a prioritized list of font family names and/or generic family names for an element – arial, sans-serif font-weight sets the weight of a font – normal, bold, bolder, lighter, 100 ~ 900 font-style sets the style of the font – normal, italic, oblique

Fall 2007Yanjun Li CSRU Backgrounds background-image specifies the image URL background-position places the image on the page background-repeat controls the tiling of the background image background-attachment – fixed – scroll

Fall 2007Yanjun Li CSRU background.html (1 of 2)

Fall 2007Yanjun Li CSRU background.html (2 of 2)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Element Dimensions CSS rules can specify the actual dimensions of each page element – Example: style=“width:20%; height:30%”

Fall 2007Yanjun Li CSRU width.html (1 of 2)

Fall 2007Yanjun Li CSRU width.html (2 of 2)

Fall 2007Yanjun Li CSRU Positioning Elements Absolute positioning – Property position : “position : absolute;” – Properties top, left, right, bottom The distances from margins of its containing block-level element. – z-index attribute Layer overlapping elements properly, higher in front of lower value. Relative positioning – Elements are positioned relative to other elements – Property position : “position : relative; ”

Fall 2007Yanjun Li CSRU positioning.html (1 of 1)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU positioning2.html (1 of 2)

Fall 2007Yanjun Li CSRU positioning2.html 2 of 2

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Web Resources tech.irt.org/articles/css.htm

Fall 2007Yanjun Li CSRU W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct jigsaw.w3.org/css-validator/validator-upload.html

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 7 JavaScript: Introduction to Scripting Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Introduction JavaScript scripting language – Enhances functionality and appearance – Client-side scripting Makes pages more dynamic and interactive – Web browser contains a JavaScript interpreter. JavaScript is an Object Oriented Programming (OOP) language. – Attributes (data) and behaviors (methods) are associated with the object.

Fall 2007Yanjun Li CSRU Simple JavaScript Program Inline scripting – Written in the or of a document – tag – JavaScript Single-line comment symbol: // – Example: <! - - script code here // - - >

Fall 2007Yanjun Li CSRU Programming with JavaScript (1) document object: the XHTML document the browser is currently displaying A statement should end with a semicolon (;). case sensitive JavaScript is case sensitive. writeln method writes a line in the document – document.writeln(“ Welcome ”);

Fall 2007Yanjun Li CSRU welcome.html (1 of 1)

Fall 2007Yanjun Li CSRU welcome2.html (1 of 1)

Fall 2007Yanjun Li CSRU welcome3.html 1 of 1

Fall 2007Yanjun Li CSRU Programming with JavaScript (2) Escape character ( \ ) – Indicates “special” character is used in the string window object : a browser window. – A Window object is created automatically with every instance of a or tag alert method creates a Dialog box – window.alert(“welcome”);

Fall 2007Yanjun Li CSRU welcome4.html 1 of 1

Fall 2007Yanjun Li CSRU Escape sequences

Fall 2007Yanjun Li CSRU Example JavaScript: document.writeln( “ ” ); Result

Fall 2007Yanjun Li CSRU Variables Variables are used to store data. – Keyword : var A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Name of a variable : a series of characters – letters, digits, underscores( _ ) and dollar signs ($) – no white space – not begin with a digit – not a keyword.

Fall 2007Yanjun Li CSRU Use Variables Declare a variable: – var name; – var size; – var name, size ; Assign a value to a variable: – name = “Lisa”; – size = 20; Combine two steps: – var name = “Lisa”;

Fall 2007Yanjun Li CSRU Dynamic Welcome Page A script can adapt the content based on input from the user or other variables prompt method of window object – window.prompt(“Please enter your name”, “Lisa”);

Fall 2007Yanjun Li CSRU welcome5.html (1 of 2)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Fig. 7.7Prompt dialog displayed by the window object’s prompt method. This is the prompt to the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. When the user clicks OK, the value typed by the user is returned to the program as a string.

Fall 2007Yanjun Li CSRU Arithmetic JavaScript performs arithmetic calculations. Arithmetic operators: – Addition: numberOne + numberTwo – Subtraction: numberOne – 5 – Multiplication: numberOne * numberTwo – Division: numberTwo / 6 Rules of operator precedence – a * ( b – c )

Fall 2007Yanjun Li CSRU Adding Integers Prompt user for two integers and calculate the sum parseInt method – Converts its string argument to an integer Assignment statement – sum = number1 + number2; If user types a non-integer value or clicks Cancel button, a runtime logic error will occur. – NaN (not a number): “The sum is NaN”

Fall 2007Yanjun Li CSRU Addition.html (1 of 2)

Fall 2007Yanjun Li CSRU Addition.html (2 of 2)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Display Floating Point Number toFixed() function Example: var number = 2; document.writeln(“ number.toFixed(2) ”; Result: 2.00

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2008Yanjun Li CSRU Chapter 8 JavaScript: Control Statements I Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2008Yanjun Li CSRU Control Structures Sequential execution – Statements execute in the order they are written Transfer of control – Next statement to execute may not be the next one in sequence add grade to total total = total + grade; add 1 to counter counter = counter + 1;

Fall 2008Yanjun Li CSRU Boolean Expression Using Equality Operators – x = = y – x != y Using Relational Operators – x > y – x < y – x >= y – x <= y The value of the expression is either true or false

Fall 2008Yanjun Li CSRU if Selection Statement (1) Indicate action only when the condition evaluates to true JavaScript Format: if if ( boolean expression ) statement; Example: if if (grade>= 60) document.writeln(“Passed”); grade >= 60 true false print “Passed”

Fall 2008Yanjun Li CSRU if Selection Statement (2) Multiple actions are performed when the condition is true JavaScript Format: if if ( boolean expression ) { statementOne; statementTwo; : } Example: if if (grade>= 60) { document.writeln(" " + "Congratulations! "); document.writeln(" You Passed! "); }

Fall 2008Yanjun Li CSRU if…else Selection Statement (1) Indicate different actions to be perform when condition is true or false grade >= 60 true print “Failed” false print “Passed”

Fall 2008Yanjun Li CSRU if…else Selection Statement (2) JavaScript Format: if if ( boolean expression ) statement;else JavaScript Example : if ( grade >= 60 ) document.writeln(“Passed”); else document.writeln(“Failed”);

Fall 2008Yanjun Li CSRU if…else Selection Statement (3) Multiple actions JavaScript Format : if if ( boolean expression ) { statementOne; statementTwo; : }else { statementThree; statementFour; : }

Fall 2008Yanjun Li CSRU while Repetition Statement (1) Repetition structure (loop) – Repeat action while some condition remains true. product <= 1000 product = 2 * product true false

Fall 2008Yanjun Li CSRU while Repetition Statement (2) JavaScript Format : initialization; while while ( boolean expression ) { statement; update; } JavaScript Example : var product=2; while ( product <= 1000 ) { document.writeln(product); product = 2 * product; }

Fall 2008Yanjun Li CSRU Counter-Controlled Repetition Counter-controlled repetition – Counter Control the number of times a set of statements executes – Definite repetition

Fall 2008Yanjun Li CSRU average.html (1 of 3)

Fall 2008Yanjun Li CSRU average.html (2 of 3)

Fall 2008Yanjun Li CSRU

Fall 2008Yanjun Li CSRU Sentinel-Controlled Repetition Indefinite repetition – Sentinel value

Fall 2008Yanjun Li CSRU average2.html (1 of 3)

Fall 2008Yanjun Li CSRU average2.html (2 of 3)

Fall 2008Yanjun Li CSRU average2.html (3 of 3)

Fall 2008Yanjun Li CSRU

Fall 2008Yanjun Li CSRU Note on Data Types Loosely typed – Automatically converts between values of different types

Fall 2008Yanjun Li CSRU Web Resources developer.netscape.com/tech/javascript

Fall 2008Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 9 JavaScript: Control Statements II Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU for Repetition Statement for repetition statement – Handles all the details of counter-controlled repetition JavaScript Format for for (initiation; test; update) { statement; : }

Fall 2007Yanjun Li CSRU for Repetition Statement (2) for (var counter =1; counter <=7; ++counter ) Initial value of control variable Increment of control variable Control variable name Final value of control variable for which the condition is true for keyword Loop-continuation condition

Fall 2007Yanjun Li CSRU ForCounter.html (1 of 1)

Fall 2007Yanjun Li CSRU for Repetition Statement counter <=7 document.writeln( "<p style=\"font-size: " + counter + "ex\">XHTML font size " + counter +"ex " ); true false var counter =1 ++counter Establish initial value of control variable. Determine if final value of control variable has been reached. Body of loop (this may be many statements) Increment the control variable.

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Examples Using the for Statement Summation with for Compound interest calculation with for loop – Math object Method pow(x,y) - x y Method round(x) – round-up to integer

Fall 2007Yanjun Li CSRU Sum.html (1 of 1)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Interest.html (1 of 2)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Logical Operators (1) More logical operators – Logical AND ( && ) – Logical OR ( || ) – Logical NOT ( ! )

Fall 2007Yanjun Li CSRU Logical Operators (2)

Fall 2007Yanjun Li CSRU Logical Operators (3)

Fall 2007Yanjun Li CSRU LogicalOperators.html (1 of 2)

Fall 2007Yanjun Li CSRU LogicalOperators.html (2 of 2)

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 10 JavaScript: Functions Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Program Modules in JavaScript (1) Software design – Break software up into modules Easier to maintain and debug – Divide and conquer Modules in JavaScript – Functions/Methods – Method belongs to an object – JavaScript includes many useful pre-defined methods

Fall 2007Yanjun Li CSRU Functions/Methods (1) A function/method is a collection of statements that performs a specific task. Allow programs to be broken down into smaller pieces. This makes programs easier to read and maintain. You can reuse a function/method multiple times.

Fall 2007Yanjun Li CSRU Functions/Methods (2) Methods you have used: – document.writeln(“... ”); – window.prompt(“please type a number”, “0”); – Global.parseInt(gradeString); parseInt(gradeString); – Global.parseFloat(inputString); parseFloat(inputString);

Fall 2007Yanjun Li CSRU Define A Function Function Format: – Header : keyword function, function-name, parameter(s). return – Body : a collection of statements (declarations of local variables, statements, return statement) Example: function function sum ( x, y ) { var sum =0; //declaration of local variables sum = x + y; //statement return sum; //return statement }

Fall 2007Yanjun Li CSRU User A Function Invoked with method name and parameters Example : var x = 4; var y = 5; var s = sum (4,5); s = sum(x,y);

Fall 2007Yanjun Li CSRU Calling function square and passing it the value of x.

Fall 2007Yanjun Li CSRU Variable y gets the value of variable x. The return statement passes the value of y * y back to the calling function.

Fall 2007Yanjun Li CSRU A Display Function Define this Function: function MsgBox (textstring) { window.alert (textstring); } Call this Function : <input name=“submit” type=“submit” value=“Show me” Onclick=“MsgBox(form.text1.value)” />

Fall 2007Yanjun Li CSRU A Change Color Function Define this Function function changecolor(code) { document.bgColor=code; } Call this Function <input type=“button” name=“button1” value=“RED” Onclick=“changecolor( ‘red’ )” />

Fall 2007Yanjun Li CSRU Random-Number Generation Random-number generation introduces element of chance – Math.random var randomValue = Math.random(); – Floating point value between 0 and 1

Fall 2007Yanjun Li CSRU Random-Number Generation Adjust range by scaling and shifting Math.floor ( returns integer) – Always round down Math.floor( Math.random() * 7 ) – range is [0,7); Math.floor( 1 + Math.random() * 7 ) – range is [1, 8);

Fall 2007Yanjun Li CSRU Random Image Generator Randomly selecting an image – Images named with numbers – Generate random number in proper range ( 0 to total – 1 ) – Update src property

Fall 2007Yanjun Li CSRU RandomPicture.html (1 of 1) Inserting a random number into the image’s src property with document.write and Math.random

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Password Protection Define the Function function password( ) { //see the example code } Call this Function...

Fall 2007Yanjun Li CSRU Work with Form Performing tasks without sending data over the Internet Confirm before submitting request Form validation

Fall 2007Yanjun Li CSRU Confirm Box To confirm a user’s answer to a question. – OK button is pressed, true is returned – Cancel button is pressed, false is returned. Example: window.confirm(“Are your ready?”);

Fall 2007Yanjun Li CSRU Animation It is possible to use JavaScript to create animated images. The trick is to let a JavaScript change between different images on different events. For onMouseOver event and onMouseOut event, run two JavaScript functions that will change between the images.

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 11 JavaScript: Arrays Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Arrays An array in JavaScript is an array object. An array object is a collection of related items, sharing the same name c

Fall 2007Yanjun Li CSRU Declaring and Allocating Arrays Use new operator. var c = new Array(6); Accessing a specific element by its index. – The index always starts from 0. var firstElement = c[0]; C[2] = 5; Property : Find out its length – c.length c Index 0 ->

Fall 2007Yanjun Li CSRU Examples Using Arrays Arrays grow dynamically – Allocate more space as items are added Must initialize array elements – Default value is undefined – for loops convenient – Referring to uninitialized elements or elements outside array bounds is an error

Fall 2007Yanjun Li CSRU Array n1 has five elements.The for loop initializes the elements in n1 to their subscript numbers (0 to 4). Array n2 is an empty array.

Fall 2007Yanjun Li CSRU The for loop adds five elements to Array n2 and initialize each element to its subscript number (0 to 4). Each function displays the contents of its respective Array in an XHTML table. The first time function ouputArray is called, variable header gets the value of “Array n1 contains” and variable theArray gets the value of n1. The second time function ouputArray is called, variable header gets the value of “Array n2 contains” and variable theArray gets the value of n2.

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Examples Using Arrays Possible to declare and initialize in one step – Specify list of values Initializer list var n = [ 10, 20, 30, 40, 50 ]; var n = new Array( 10, 20, 30, 40, 50 ); – Also possible to only initialize some values Leave uninitialized elements blank Uninitialized elements default to “undefined” var n = [ 10, 20,, 40, 50 ];

Fall 2007Yanjun Li CSRU Array integers1 is initialized using an initializer list. Two values are not supplied for integers2, which will be displayed as undefined.

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Random Image Generator Using Arrays Cleaner approach than previous version – Specify any file name rather than integers 1-7 – Result of Math.random call is index into array of image file names

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Passing Arrays to Functions Name of array is argument (parameter) – Not necessary to also pass size of array Arrays know their size – Passed by reference Individual elements are passed by value if numbers or booleans Method: ArrayName.join(“ ”) – Creates string containing all array elements – Specify separator: white space or other string

Fall 2007Yanjun Li CSRU Using Array Radio buttons – Represented as an array Name of radio buttons is name of array One element per button – checked property is true when selected

Fall 2007Yanjun Li CSRU Quiz.html (1 of 2) Determining the value of property checked.

Fall 2007Yanjun Li CSRU Quiz.html (2 of 2) Call the checkAnswers function when the form is submitted.

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Online Conversion Use select element of Form Set answer input field “ readonly ” Do the calculation based on the user’s selection

Fall 2007Yanjun Li CSRU Form Validation Function JavaScript can be used to validate input data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: – has the user left required fields empty? – has the user entered a valid address? – has the user entered a valid number?

Fall 2007Yanjun Li CSRU Empty Field Validation function validate_required( field, alerttxt ) { if (field.value==null || value=="") { window.alert(alerttxt); return false; } else return true; }

Fall 2007Yanjun Li CSRU indexOf( ) This method returns the index of the given char and returns -1 if the string value to search for never occurs Example: var string =“abc defg”; var index = string.indexOf(‘a’);

Fall 2007Yanjun Li CSRU charAt() This method returns the character at the given index. Example: var string = “1234”; var thisChar = string.charAt(1);

Fall 2007Yanjun Li CSRU lastIndexOf() This method returns the last index of the given char and returns -1 if the string value to search for never occurs. Example: var string =“aaabbbccc”; var index = string.lastIndexOf(b);

Fall 2007Yanjun Li CSRU Validation var apos = Var dotpos = field.value.lastIndexOf("."); var lastpos = field.value.length-1; //if there is no char or // there is no char and the last dot or // there are more than 4 characters after the last dot or // there are less than 2 characters after the last dot if ( apos < 1 || dotpos-apos < 2 || lastpos-dotpos>4 || lastpos-dotpos<2) { window.alert(alerttxt); return false; }

Fall 2007Yanjun Li CSRU A Valid Numeric Value Check each character of the user’s input If the character is not a valid digit or the decimal point, then the input is not numeric value. Use for statement to implement

Fall 2007Yanjun Li CSRU isNumeric() var sText = field.value; //user's input var ValidChars = " "; var IsNumber=true; //default value is true var once = 0; for(i = 0; i<sText.length && IsNumber==true; i++) { var Char = sText.charAt(i); var index = ValidChars.indexOf(Char); if (index == -1) //char is not a valid IsNumber = false; else if (index == 10 && once ==0) //the first decimal point once = 1; else if (index == 10 && once == 1) //the second decimal point IsNumber = false; }

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 12 JavaScript: Objects Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Thinking About Objects Objects : Abstraction of a group of related objects. – Attributes (Properties) – Methods (Behaviors) – Encapsulate data and methods – Property of information hiding – Details hidden within the objects themselves

Fall 2007Yanjun Li CSRU String Object JavaScript’s string and character-processing capabilities Appropriate for processing names, addresses, credit card information, etc.

Fall 2007Yanjun Li CSRU Fundamentals of Characters & Strings Characters – Fundamental building blocks of JavaScript programs String – Series of characters treated as a single unit

Fall 2007Yanjun Li CSRU Property of the String Object The length property of the String object – Find the length of a string – Example: var text = “12345”; document.write(text.length); – Result: 5

Fall 2007Yanjun Li CSRU Methods of the String Object charAt(index) – Example : var s = “abcd”; var s1 = s.charAt(0); – Result: s1 is “a”.

Fall 2007Yanjun Li CSRU Methods of the String Object concat(string): Concatenating – Example: var s1 = “abcd”; var s2 = “ABCD”; var s3 = s1.concat(s2); – Result: s3 is “abcdABCD” – Another way to do this: var s3 = s1 + s2;

Fall 2007Yanjun Li CSRU Methods of the String Object toLowerCase( ) & toUpperCase( ) – Example: var s1 = “AbCdEfG”; var s2 = s1.toLowerCase(); var s3 = s1.toUpperCase(); – Results: s2 is “abcdefg”; s3 is “ABCDEFG”;

Fall 2007Yanjun Li CSRU Searching Methods indexOf(substring, index) – Search for the first occurrence for a specified substring in a string from position index, return the starting index of the substring ; -1 if substring is not found. – Example: var s1=“abcdeabcd”; var index1 = s1.indexOf(“ab”,2); var index2 = s1.indexOf(“ab”); – Result: index1 is 5 and index2 is 0.

Fall 2007Yanjun Li CSRU Searching Methods lastIndexOf(substring, index) – Search for the last occurrence for a specified substring in a string from position index toward the beginning of the string, return the starting index of the substring ; -1 if substring is not found. – Example: var s1=“abcdeabcd”; var index1 = s1.lastIndexOf(“ab”,2); var index2 = s1.lastIndexOf(“ab”); – Result: index1 is 0 and index2 is 5.

Fall 2007Yanjun Li CSRU Splitting Strings & Obtaining Substrings Tokenization – The process of breaking a string into tokens Tokens – Individual words – Separated by delimiters

Fall 2007Yanjun Li CSRU Splitting Strings split(delimiter) – Break the string into individual token. – Example: var s1 = “a*bc*cd*ed”; var s2 =“This is a sentence”; var arrayOne = s1.split(“*”); var arrayTwo = s2.split(“ ”);

Fall 2007Yanjun Li CSRU Obtaining Substrings substring(startIndex, endIndex) – Returns a string containing the characters from startIndex up to but not including endIndex in the source string. – Example: var s1 = “abcdefgh”; var s2 = s1.substring(1,4); – Result: s2 is “bcd”;

Fall 2007Yanjun Li CSRU Obtaining Substrings substr(startIndex, length) – Returns a string containing length characters starting from startIndex in the source string. – Example: var s1 = “abcdefg”; var s2 = s1.substr(0,4); var s3 = s1.substr(0); – Result: s2 is “abcd” and s3 is “abcdefg”

Fall 2007Yanjun Li CSRU Date Object Provides methods for date and time manipulations Create a new Date object – Initialize the local computer’s Date object with the current date and time. var current = new Date(); – Set a specified date with arguments year, month, date, hours, minutes, seconds, and milliseconds. var thisDate = new Date(2007, 9, 30, 12, 50, 0,0);

Fall 2007Yanjun Li CSRU Methods of the Date Object toString() – Converts a Date object to a string and returns the result. Mon Sep 19 15:47:22 EDT 2007 toLocaleString() – Converts a Date object, according to local time, to a string and returns the result. Monday, September 19, :47:22 PM toUTCString() – Converts a Date object, according to Universal Coordinated Time (UTC), to a string and returns the result. Mon, 19 Oct :47:22 UTC

Fall 2007Yanjun Li CSRU Getters of the Date Object getDate() getDay() getMonth() getFullYear() getHours() getMinutes() getSeconds()

Fall 2007Yanjun Li CSRU Setters of the Date Object setDate() setMonth() setFullYear() setHours() setMinutes() setSeconds()

Fall 2007Yanjun Li CSRU document Object Manipulate document that is currently visible in the browser window document.write(string) document.writeln(string) document.lastModified – Last time the document was modified.

Fall 2007Yanjun Li CSRU window Object The Window object is the top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a or tag. Provides methods for manipulating browser window.

Fall 2007Yanjun Li CSRU Methods of the Window Object window.open(url) – Opens a new browser window – Returns a new window object window.focus() – Set focus to the current window

Fall 2007Yanjun Li CSRU Methods of the Window Object window.close() – Closes the current window window.alert( ) – Displays an alert box with a message and an OK button

Fall 2007Yanjun Li CSRU Properties of the Window Object The closed property returns whether or not a window has been closed if ( childWindow.closed ) The opener property returns a reference to the window that created the window childWindow.opener The document property returns the document object representing the document currently inside the window. childWindow.opener.document.writeln(“I am the parent”);

Fall 2007Yanjun Li CSRU Location Object The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. The Location object is part of the Window object and is accessed through the window.location property. The URL of this window is returned.

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.

Fall 2007Yanjun Li CSRU Chapter 13 Dynamic HTML:Object Model Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

Fall 2007Yanjun Li CSRU Introduction Dynamic HTML is the art of making HTML pages dynamic! Dynamic HTML Object Model – Allows Web authors to control the presentation of their pages – Gives them access to all the elements on their pages – The contents of these elements can be modified or deleted, and new elements can be created. Web page – Elements, forms, frames, tables – Represented in an object hierarchy

Fall 2007Yanjun Li CSRU Scripting The Dynamic Object Model is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript. Scripting – Retrieve and modify properties and attributes

Fall 2007Yanjun Li CSRU Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object – XHTML attributes become properties that can be manipulated by scripting Example: p element has a property – innerText. The value of innerText property is here.

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU innerHTML Property The innerHTML property is similar to the innerText property, but it can include XHTML formatting. thisElement.innerHTML = “ change you!” text

Fall 2007Yanjun Li CSRU Change Image Source Example: imageId.src=“newSource”;

Fall 2007Yanjun Li CSRU Dynamic Styles Element’s style can be changed dynamically CSS property : background-color -> style.backgroundColor

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Dynamic Styles Dynamic HTML Object Model also allows you to change the class attribute

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU

Fall 2007Yanjun Li CSRU Dynamic Positioning XHTML elements can be positioned with scripting – Declare an element’s CSS position property to be either absolute or relative – Move the element by manipulating any of the top, left, right or bottom CSS properties window.setInterval (“func()”, 100) : Every 100 milliseconds, run this function func() once.

Fall 2007Yanjun Li CSRU navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer – Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using navigator.appName : Microsoft Internet Explorer, Netscape navigator.appVersion : a floating point number, 4.0

Fall 2007Yanjun Li CSRU Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.