Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Slides 02 client tier using html and java_script_fp2009 1.0

on

  • 2,353 views

Client Tier Slide 2 - Infosys Java stream

Client Tier Slide 2 - Infosys Java stream

Statistics

Views

Total Views
2,353
Views on SlideShare
2,353
Embed Views
0

Actions

Likes
2
Downloads
270
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Slides 02 client tier using html and java_script_fp2009 1.0 Slides 02 client tier using html and java_script_fp2009 1.0 Presentation Transcript

  • Client Tier using HTML and Javascript -Day 2 Long Cycle
  • General Guideline
    • © (2008) Infosys Technologies Ltd.
    • This document contains valuable confidential and proprietary information of Infosys. Such confidential and proprietary information includes, amongst others, proprietary intellectual property which can be legally protected and commercialized. Such information is furnished herein for training purposes only. Except with the express prior written permission of Infosys, this document and the information contained herein may not be published, disclosed, or used for any other purpose.
  • Confidential Information
    • This Document is confidential to Infosys Technologies Limited. This document contains information and data that Infosys considers confidential and proprietary (“Confidential Information”).
    • Confidential Information includes, but is not limited to, the following:
      • Corporate and Infrastructure information about Infosys
      • Infosys’ project management and quality processes
      • Project experiences provided included as illustrative case studies
    • Any disclosure of Confidential Information to, or use of it by a third party, will be damaging to Infosys.
    • Ownership of all Infosys Confidential Information, no matter in what media it resides, remains with Infosys.
    • Confidential information in this document shall not be disclosed, duplicated or used – in whole or in part – for any purpose other than reading without specific written permission of an authorized representative of Infosys.
    • This document also contains third party confidential and proprietary information. Such third party information has been included by Infosys after receiving due written permissions and authorizations from the party/ies. Such third party confidential and proprietary information shall not be disclosed, duplicated or used – in whole or in part – for any purpose other than reading without specific written permission of an authorized representative of Infosys.
  • Learning approach
    • The following are strongly suggested for a better learning and understanding of this course:
      • Noting down the key concepts in the class, explained by the educator
      • Analyze all the examples / code snippets provided
      • Study and understand the self study topics
      • Completion and submission of all the assignments on time
      • Completion of the self review questions in the lab guide
      • Study and understand all the artifacts including the reference materials / e-learning / supplementary materials specified
      • Completion of the project (if applicable for this course) on time inclusive of individual and group activities
      • Taking part in the self assessment activities
      • Participation in the doubt clearing sessions
  • Unit Plan
    • What are Style Sheets, Its syntax and working
    • Cascading Style sheets (CSS) with HTML doc
    • Style Sheet properties
    • Introduction to JavaScript
    • User defined and Pre defined functions
  • CSS – Cascading Style sheets
  • Cascading Style sheets (CSS)
    • In 1996, W3C announced style sheets.
    • Two cascading style sheet standards exist:
    • CSS1 was a set of rules to format and enhance text, paragraphs and documents.
    • CSS2 the current standard adds to the CSS1 base a set of styles for visual browsers, aural devices, printers and so on.
    • Features
      • Separates the presentation and contents of the HTML document.
      • Provide numerous attributes to create dynamic effects.
      • Simple.
      • Reusable.
    • Style Sheet
      • A set of statements that specify presentation of a document.
      • A powerful mechanism for adding styles.
      • Styles can be assigned by the <STYLE> </STYLE> tag.
  • Advantages
    • Good control over the presentation.
    • Consistency : A Standard flow, look & feel can be maintained for all pages of a Web Site
    • Ability to make global changes to all the documents from a single location.
    • Reduces the time spent on maintaining HTML Document
    • Less Cluttered
  • CSS samples
  • Which of the following statements is/are TRUE about CSS A B C D CSS is a replacement for HTML CSS is reusable Modify the look & feel of WebPages without modifying HTML TRUE FALSE TRUE TRUE Separates the presentation and contents of the HTML document
  • How do Style Sheets Work?
    • Separate Section is defined to place the Style Properties of the Document
      • Section consists of two parts
        • Selectors
        • Declarations
    • Defined sections in the document are attached with their respective properties
    • <STYLE > tag is used to define styles.
    <STYLE> P{ color:red; } </STYLE> Properties Value Selector
  • CSS demo
  • Selectors
    • A selector identifies elements on an HTML page
    • Element Selector (Type Selector)
      • An Element selector matches the name of a document language element.
    • Eg. <H1> , <P>
    • Inheritance
      • Style properties are inherited from the parent element to the child element .
    <BODY> <H1> H1 inherits to BODY style <H1> </BODY>
  • Selectors
    • Class selectors
      • With the class selector you can define different styles for the same type of HTML element.
      • Eg: <H1 class=“head1”>Hello</h1>
    • ID selectors
      • The ID attribute of a document language allows authors to assign an identifier to one element .
      • An ID attribute must be unique within the document. (Multiple elements with same ID will NOT show any error in CSS or HTML. The same will cause an error in Client Script)
        • Eg: <P id=“para1”>First para</P>
    • ID selectors are useful only in DHMTL where we can change the style of an element dynamically.
  • Selectors and Comments
    • Contextual Selectors
      • Contextual selectors are merely strings of two or more simple selectors separated by white space.
        • Eg. P EM { background: yellow }
    • Grouping
      • In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed.
        • Eg: H1, P, TD { color:red;}
    • Comments
      • Comments are denoted within style sheets with the same conventions that are used in C programming.
        • /* COMMENTS CANNOT BE NESTED */
  • Which of the following statements is/are TRUE about selectors A B C D A class attribute must be unique within the document Element selector uses the HTML tag name grouping selectors can be used to provide style for multiple html elements TRUE FALSE TRUE FALSE A class selector can be used with only one html tag type
  • Pseudo-classes
    • Pseudo-classes are special &quot;classes&quot; that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors).
    • Anchor Pseudo-classes
    • Pseudo-classes can be assigned to the A element to display links, visited links and active links differently.
    A:link { color: blue; } A:active { color: green; } A:visited { color: red; } A:hover { color: cyan; }
  • Ways of specifying styles
    • Inline
    • Embedded (Internal styles sheet)
    • External Style sheets (Linking)
    • Importing
  • Ways of specifying styles
    • Inline
      • Can be applied to a single occurrence of an element
      • Mixes content with presentation
      • Should be used sparingly
    <P style=“color:blue; margin-right: 10px;”> Styled paragraph </P>
  • Ways of specifying styles
    • Embedded (Internal styles sheet)
      • Can be used by single document.
      • Enclosed within the HEAD tag.
    <HEAD> <STYLE> HR { color:blue } P { margin-right:10px } </STYLE> </HEAD>
  • Ways of specifying styles
    • External Style sheets (Linking)
      • Style Properties are defined and placed in external files and is saved with extension .css
      • These files are then Cascaded with the HTML Documents and properties are suitably applied.
    <HEAD> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“mystyle.css”> </HEAD>
  • Ways to cascade style sheets
    • Importing
      • By importing the Style sheet
        • @import url(“<filename>.css ”)
      • Multiple websites can use the same style sheet.
    <style type=&quot;text/css&quot;> @import url(http://www.xyz.com/style2 .css ) </style>
  • Which of the following statements are TRUE about CSS. A B C D <link> tag is used to include external CSS Inline CSS is NOT reusable TRUE FALSE TRUE FALSE <style> tag is used to include external CSS Embedded CSS can be used in multiple pages
  • Related Tags (Self Study)
    • Tags used to apply styles to parts of the HTML document
    • <SPAN>
      • The SPAN element was introduced into HTML to allow authors
      • to give style that could not be attached to a structural HTML
      • element. It is a Inline element
    • <SPAN CLASS=&quot;greensection&quot; STYLE=&quot;color: lime&quot;>text within a span tag</SPAN>
    • <DIV>
    • The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for &quot;division&quot;) is a block-level element.
    • <div ALIGN=&quot;right&quot; CLASS=&quot;greensection&quot; STYLE=&quot;color: lime” width=“300” height=“100”> text</div>
  • DIV and SPAN ( Self Study)
      • <body>
      • <h3 class=&quot;heading&quot;> Diff between Div and Span</h3>
      • <div class=&quot;div1&quot;>
      • <span class=&quot;span1&quot;>SPAN</span> allow authors to give
      • style that could not be attached to a structural HTML element.
      • It is a <span class=&quot;span1&quot;>Inline element</span>
      • and <span class=&quot;span1&quot;>DIV</span> is a
      • <span class=&quot;span1&quot;>block level element</span>
      • </div>
      • </body>
  • Style properties
    • Color Properties
    • Background Properties
    • Font Properties
    • Text Properties
    • Margin Properties
    • Border Properties
    • Classification Properties
    • Position Properties
  • Background and Color Properties
    • background
      • background : “color” / “#rrggbb” / url(“*.gif”)
    • color
      • color : “color name” / “#rrggbb”
        • Eg. BODY{ Background:”red”;}
    Properties Values background-attachment scroll ,fixed background-image URL, none background-repeat repeat, repeat-x, repeat-y, no-repeat background-color color-rgb, color-hex, color-name, transparent
  • Font Properties
    • Properties Values
    • Font-family Arial, Monospace, ….
    • Font-style Normal, italic, oblique
    • Font-variant normal, small-caps
    • Font-size x-small, small, medium,large
    • Font-weight normal, bold, bolder, light, x-large
    • CSS measurements
    • When you manipulate text and other objects with a style sheet, you often must specify a length or size. CSS supports measurements such as
    • 1) inches (in) 2) centimeters (cm) 3) millimeters (mm)
    • 4) point size (pt) 5) pixels (px)
  • Text Properties
    • Properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • text-align
    • text-indent
    • Values
    • measurement (px/cm)
    • measurement (px/cm)
    • None, underline, overline, line-through
    • top,text-bottom,super,sub
    • none, capitalize, uppercase, lowercase
    • left, right, center, justify
    • measurement
  • Margin and Box Properties (Self Study) Properties Values
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • margin
    • border-width
    • border-color
    • Border-style
    • width
    • height
    • border
    measurements (in terms px,cm, mm, in) measurement thick, medium, thin #rrggbb dotted, dashed, solid, groove, ridge, inset, outset measurement measurement border-width, border-style, border-color
  • Classification Properties (Self Study) Properties Values cursor auto, crosshair ,pointer display inline, block, list-item list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha list-style-image url(“*.gif”) list-style-position Inside, outside
  • Position Properties (Self Study) Properties Values Position absolute, relative, static, fixed top measurement bottom measurement left Measurement right measurement visibility visible, hidden Z-index -1,1
  • Which of the following statements are TRUE A B C D Z-index property is used to specify the order of display Font-Size is used to specify the size of the font border property is used to specify only the color of the border. word-spacing is used to specify the space between each letters. TRUE TRUE FALSE FALSE
  • Introduction to JavaScript
  • Unit Objectives
    • To explain the necessity of Scripting
    • To explain writing client side scripting using JavaScript.
    • To discuss about the in-built and user defined objects.
    • To explain event handling using JavaScript.
  • Introduction to Scripting
    • Scripting Languages are mainly used to build the programming environment in HTML document
    • Make Web pages dynamic and interactive.
    • Some languages : VBScript, JavaScript, Jscript and ECMA Script
    • Browser Includes Scripting Interpreter
    • Choosing a Scripting Language
      • Browser compatibility
      • Programmer familiarity
    • Scripts can be executed on client or the server (JavaScript can be used with client or server, but mainly used only for client side scripting)
  • Client Vs. Server Scripting Client Side Scripting Server Side Scripting Runs on the user’s computer i.e. Browser interprets the script. Runs on the Web server and sends the output to the browser in HTML format Source code is visible to the user. (Source code is downloaded to the client and executed in browser) Source code is not visible to the user. Server side source is executed on server. Used for client side validations and functionality for the user events. Used for business logic and data access from the database. The pages are created dynamically. Depends on the browser and version. Not depend on the client, any server side technology can be used.
  • Sample JS screen
  • History of JavaScript
    • In 1995, Netscape Communications introduced ‘LiveScript’, a Web Scripting Language
    • Support for LiveScript began in June, 1995, with the release of Beta Version 2.0b1 of Netscape Navigator.
    • Later in 1995, after an agreement with Sun, LiveScript was re-named JavaScript, to leverage the popularity of Java.
    • To this date, JavaScript continues to evolve...
  • Features of JavaScript
    • An interpreted scripting language
    • Embedded within HTML
    • Minimal Syntax- Easy to learn( C syntax and java OOC)
    • Mainly used for client side scripting because it is supported by all the browsers.
    • Designed for programming user events
    • Platform Independence/ Architecture Neutral
  • Embedding JavaScript into HTML page
    • <SCRIPT>…..</SCRIPT> tag
    • LANGUAGE - the scripting language used for writing scripts
    <SCRIPT LANGUAGE=“JavaScript”> ----- (JavaScript code goes here) ---- </SCRIPT> JavaScript is NOT supported by old browsers (IE 1.0). You can enable or disable JS in new browsers
  • Deferred and Immediate Script
    • SCRIPT tag can be placed in HEAD or BODY tag
    • Placing Javascript in the HEAD tag ensures readability.
    • Immediate mode
      • Scripts gets executed as the page loads.
    <body> <h4> Immediate Demo</h4> <script language=&quot;JavaScript&quot;> document.write(&quot;<h5> Using JavaScript</h5>&quot;); </script> </body>
  • Deferred and Immediate Script
    • Deferred mode
      • Script is executed based on some user action
      • <script language=&quot;JavaScript&quot;>
      • <!--
      • /*calling function when user clicks on the button */
      • function msg(){
      • alert(&quot;Hi&quot;);
      • }
      • // -->
      • </script>
      • <form name=&quot;f1&quot;>
      • <input type=&quot;button&quot; value=&quot; ok &quot; onClick=&quot;msg()&quot;>
      • </form>
  • Which of the following statements are TRUE about JS A B C D <SCRIPT> can be placed in HEAD or BODY tag Compiled by browser JavaScript is a mark up language JavaScript is the ONLY client side scripting language FALSE TRUE FALSE FALSE
  • JavaScript – lexical structure
    • JavaScript is object based and action-oriented.
    • JavaScript is case sensitive.
    • A semicolon ends a JavaScript statement
    • C-based language developed by Netscape
    • Comments
      • Supports single line comments using //
      • and multi line comments using /*…..*/
  • JavaScript –Variables
    • Declared using the keyword var . Declaring variables is not mandatory.
    • Must start with a letter or an underscore and can have digits.
    • Does not have explicit data types.
    • The Data type is automatically decided by the usage.
    • Scope is by default global. If a variable is prefixed by the keyword “var” within a function then it is a local variable.
    • The formal parameters are local to the function.
    • function demo()
    • {
    • var inum1 = 10; // Local to the function
    • inum2 = 20; // Global to the document.
    • }
    • demo(); // Invoking function
    • inum1 = inum1+1; // Error because inum1 is local variable
    • inum2 = inum2+1; // no Error
  • How to declare a local variable in JavaScript A B C D Declare using var keyword inside a function Declare using var keyword Declare using var keyword outside the function Declare without var keyword FALSE FALSE TRUE FALSE
  • JavaScript – Implicit data types
    • JavaScript recognizes the following implicit data types
      • Number
      • String
      • Logical
      • Object
      • The special value null
    • Type conversion
      • JavaScript automatically converts between data types
      • Consider
        • str = “100”, num1 = 10, num2 = 20
        • num3 = num1+ num2
        • strsum = str + num2
        • strsum = num2 + str
    30 10020 20100
  • JavaScript – Operators
    • Arithmetic Operators
    • +, ++, -, --, *, /, %
    • Relational Operators
    • ==, !=, ===, !==, >, >=, < , <=
    • Logical Operators ( and , or , not)
      • &&, ||, !
    • Assignment Operators
    • =, +=, -=, *=, /=, %=
    • Strict equal (===)
    • Returns true if the operands are equal and of the same type.
    • Strict not equal (!==)
    • Returns true if the operands are not equal and/or not of the same type.
  • Special operators
    • typeof operator
      • Unary operator
      • Indicates the data type of the operand.
        • Eg:
          • x=123;
          • alert(typeof(x)); // Number
          • x=&quot;Hello&quot;
          • alert(typeof(x)); // String
    • new
      • Used for instantiation of objects.
        • Eg: today = new Date( )
  • Which of the following statements are TRUE about HTML A B C D JavaScript is case sensitive The formal parameters are local to the function No explicit data type declaration new operator is used to find the data type of the operand TRUE TRUE TRUE FALSE
  • JavaScript – Control structures
    • Control structure in JavaScript, as follows:
      • if
        • Is used to conditionally execute a single block of code
      • if .. else
        • a block of code is executed if the test condition evaluates to a boolean true else another block of code is executed.
      • switch …. case
        • switch statement tests an expression against a number of case options
        • executes the statements associated with the first match.
  • JavaScript – Loop
    • while loop
    • The while statement is used to execute a block of code while a certain condition is true
    • Syntax : while ( test condition)
    • {
    • zero or more statements
    • }
    • for loop
    • Iterate through a block of statements for some particular range of values
    • Syntax : for(initstmt; condstmt; updstmt ){
    • zero or more statements
    • }
    • do while loop
    • block of statements is executed first and then condition is checked
    • Syntax : do
    • {
    • zero or more statements
    • }while ( test condition)
  • User defined Functions
    • A function is a block of code that has a name.
    • Way to organize your code. User can write his own functions
    • JavaScript functions is to link actions on a web page with the JavaScript code.
    • JavaScript has some in-built functions.
    • To create a function you define its name, any values (&quot;arguments&quot;), and some statements:
    function myfunction( argument1,argument2,etc ) { some statements; }
  • Top-Level functions
    • eval
      • Evaluates a string of JavaScript code without reference to a particular object.
      • Syntax eval( string)
    • parseInt and parseFloat
      • Return a numeric value when given a string as an argument.
      • Syntax parseInt( string) , Syntax parseFloat( string)
    • isNaN
      • Evaluates an argument to determine if it is “NaN” (not a number).
      • Syntax isNaN( testValue)
    • isFinite
      • evaluates an argument to determine whether it is a finite number
      • Syntax isFinite( number)
    • Number and String
      • functions let you convert an object to a number or a string.
  • In-built properties
    • Infinity
      • Infinity is a numeric value representing infinity
    • NaN
      • NaN is a value representing Not-ANumber.
    • undefined
      • undefined is the value undefined.
    • Helpful for debugging the code based on these properties.
  • Which of the following functions can be used to check the given data is a number or not? A B C D isFinite isNaN parseInt parseFloat TRUE FALSE FALSE TRUE
  • Dialog boxes (Window Object methods)
    • Alert dialog box - alert(message)
      • Takes in a string argument and displays an alert box.
    • Prompt dialog box - prompt(message,[inputDefault])
      • Displays a message and a data entry field
    • Confirm dialog box - confirm(message )
      • Serves as a technique for confirming user actions
  • Summary
    • Using CSS
    • CSS Selectors
    • Ways of using CSS
    • Need of Scripting
    • Client side Scripting Vs Sever side scripting.
    • Introduction to JavaScript .
    • JavaScript Basics
    • Functions.
  • Thank You “ The contents of this document are proprietary and confidential to Infosys Technologies Ltd. and may not be disclosed in whole or in part at any time, to any third party without the prior written consent of Infosys Technologies Ltd.” “ © 2008 Infosys Technologies Ltd. All rights reserved. Copyright in the whole and any part of this document belongs to Infosys Technologies Ltd. This work may not be used, sold, transferred, adapted, abridged, copied or reproduced in whole or in part, in any manner or form, or in any media, without the prior written consent of Infosys Technologies Ltd.”