UNIT II Style Sheets: CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets and HTML

Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study. Client-Side Programming: The JavaScript Language-History and Versions Introduction JavaScript in Perspective-Syntax-Variables and Data Types-Statements-OperatorsLiterals-Functions-Objects-Arrays-Built-in Objects-JavaScript Debuggers.

Style Sheets: a style sheet is a file or form that defines the layout of a document. Style sheets are useful because you can use the same style sheet for many documents. style sheets are also called templates. Cascading Style Sheets: Introduction: • Cascading Style Sheets, or CSS, are a series of instructions that specify how markup elements should appear on a Web page. Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

Features of CSS: • CSS allows “separation” between the information contained in a document and its presentation. Changes in the presentation can be made without disturbing the information of the document.

Style sheet allows user to decide the style of presentation and it is defined in separate file. Single style sheet used for all the pages of the web site and all the pages will have consistent look and feel.

Syntax of CSS:
• • • •

• •

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semicolon (;). Collection of style rules called “rule set”. Each rule set consist of two parts , “selector string” followed by “declaration block”.

<style type= “text/css”> h1 { Font-family:arial; Font-color:red; } </style> CSS Rules

Selector string Declaration Block Valu

A CSS rule defines the appearance attributes that HTML will acquire and so change the display of the document content in the browser. All style rules are composed of three parts: 1. Selectors: Selectors are string identifiers that defines to what HTML element the rule is applied. A selector can be an HTML tag, a class selector or an ID selector. 2. Properties: Properties are predefined attributes that can be applied

3. Values: Values are the specific setting chosen for a property. 4. The combination of a property and the associated value is called a definition.

Rule Definition: properties and values After the selector has been specified, the definition provides the properties and values to be used with the selector. CSS Types: • CSS effects document changes as style rules. Style rules can be implemented in three ways: 1. Inline: defines style rules set within individual HTML tags using the style attribute. Inline styles rules override any other influencing style rule. For example: Syntax: <H1 2. Embedded: defines style rules set within the HTML <HEAD> section of a using the STYLE tag. Embedded styles rules can include variety elements which will be applied to all the specified tags that are used <BODY> of the document. For Syntax: <STYLE type="text/css">H1 uppercase;}</STYLE> 3. External: defines the use of a separate text file containing the style rules. External style files have a css file extension name. External style sheets are implemented with the use of the <LINK> tag, and provide formatting standards that can be applied as a template to any number of documents at a Web site. The style is called from within the HTML document using the <LINK> tag: syntax: <LINK href="somefile.css" rel="stylesheet" type="text/css"> H2 H3 {color: green; text-transform: document, of HTML within the example: style="color: blue; font-style: italic"> I'm blue</H1>

Advantage: To allow for user preference and promote cost-time savings in web management, the desired styles should be defined externally in a separate file rather than "hard-code" formatted in the webpage. Another benefit of having external styles is that all webpages can reference one file and use the same styles; thus, subsequent changes can be made in one place and will take place in all webpages (vs. editing one page at a time). Example: <html> <head> <title>Document Title</title> <link href="my_style_sheet.css" rel="stylesheet" type="text/css"> </head> </html>


Selectors are a way to match styles to elements in the document tree.

1. Simple Selector • The simple selector is used for applying style to a single element to which the property and value is applied to it. • Example: <style type= “text/css”> H1 { Font-family:arial; Font-size:20pt; Font-color:red; } </style> 2. Universal Selector • Universal selector is used to apply the property and value to all the elements in the document which represent the universal selector symbol. • Example: <style type= “text/css”> *{

Font-family:arial; Font-size:20pt; Font-color:red; } </style> 3. Class selector • • • Class selector is used to apply different style to the same element. These difference style appear on different occurrence of that element. Example: <style type= “text/css”> H1.redText { Font-family:arial; Font-size:20pt; Font-color:red; } </style> <style type= “text/css”> H1.blueText { Font-family:arial; Font-size:20pt; Font-color:blue; } </style>

4. Generic selector • • • Generic selector is used to define the class in generalized form. Particular class information applied to any tag. Example: .blueText { Font-family:arial; Font-size:20pt; Font-color:blue; } </style> <h1 class=”red text”>

5. ID selector • ID selector is used to define the class in generalized form. • ID selector style applied to one specific element. • Example: #top { Font-family:arial; Font-size:20pt; Font-color:blue; } </style> <div id=”top”> Important Notes: • The <BR>, <FRAMESET> and <FRAME> tags cannot be used as selectors. • The <P> tag must include a close tag, </P>, when used with CSS. CSS: Text properties
• • • • • •

color letter-spacing text-align text-decoration text-indent text-transform

CSS: Background properties
• • • • •

background-color background-image background-repeat background-position background-attachment

CSS: Font properties
• • •

font-family font-size font-style

• •

font-variant font-weight

The Basis of CSS layout: Box Model:
• •

Every block element in CSS is effectively inside a box, and can have margins, padding and borders applied to it. Box widths can be specified in absolute values (e.g. px) or in relative values, usually: em - width values relative to the size of the font in ems percentage - width values relative the containing box’s content region The root (or top-most) element’s containing box is effectively the browser window. Every CSS box is divided into regions, consisting of: 1. Content 2. Padding 3. Border 4. Margins

Border properties
i. ii. iii.

border-style border-color border-width

• •

• •

Borders can be applied to any block element Borders always come outside the padding area, but inside the margin area. Border properties cannot have negative values If a border is not specified, the default is no-border (i.e. no border appears and no space between any margin and padding is allocated for a border) Border properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

CSS: Margin properties
i. ii. iii. iv. • • •

margin-bottom margin-left margin-right margin-top Margins define the space around elements outside the border Margin properties can have negative values in order to deliberately overlap content Margin properties will affect the position of background elements (graphics and/or colours) in relation to the edges of the containing block element Margin properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

CSS: Padding properties
i. ii. iii. iv. • • •

padding-bottom padding-left padding-right padding-top Padding defines the space around elements inside the border; i.e between the border and the content itself Padding properties cannot have negative values Padding properties do not affect the position of background elements (graphics and/or colours) in the containing block element; only the position of content. Padding properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

CSS: List properties

• • • •

list-style-type (unordered) list-style-type (ordered) list-style-image list-style-position

CSS: Normal Flow Model Floating • float property allows element boxes to be shifted to the right or left on the current line – Floated boxes are block boxes – Floated boxes are “pulled out” of the normal flow and repositioned – Must have explicit width – May overlap other boxes clear property specifies which side(s) of an element should NOT be adjacent to a floating box that is specified earlier in the document Setting the float property to left or right causes a box to be taken out of its position in the normal flow and moved as far left or right as possible.

Positioning • position property: – static – box is positioned according to normal flow – relative – box is positioned relative to where it would have been placed in the normal flow – absolute – box is positioned relative to its containing block; these boxes are taken out of flow – fixed – box is fixed in relation to the viewport (a browser window or a printed page)

Other CSS layout properties • • • • Color and background image Cursor style Border style, width, and color Height and width of element, plus overflow

Introducing JavaScript

• •

JavaScript is a scripting language developed by Netscape that is used to modify web pages. Most JavaScript must be written in the HTML document between <SCRIPT> tags. You open with a <SCRIPT> tag, write your JavaScript, and write a closing </SCRIPT> tag. Sometimes, as an attribute to script, you may add “Language=JavaScript” because there are other scripting languages as well as JavaScript that can be used in HTML. JavaScript is object-oriented. An Object in JavaScript is a resource that has specific characteristics known as properties and provides several services known as methods and events. A variable stores a value. It can be thought of as a labeled box, with the name of the variable as the label and the value as the contents. The JavaScript statement: var x= “hello”; A method is basically a collection of statements that does something. For example, a method “writeln()” exists in the document object that can be used to write html to your document. Methods are predefined in JavaScript

Java Script Versions

JavaScript Properties • Note that JavaScript code did not need to be compiled – JavaScript is an interpreted language – Portion of browser software that reads and executes JavaScript is an interpreter Interpreted vs. compiled languages: – Advantage: simplicity – Disadvantage: efficiency JavaScript is a scripting language: designed to be executed within a larger software environment JavaScript can be run within a variety of environments: – Web browsers (our focus in next chapter) – Web servers – Application containers (general-purpose programming) Components of a JavaScript implementation: – Scripting engine: interpreter plus required ECMAScript functionality (core library) – Hosting environment: functionality specific to environment • Example: browsers provide alert and prompt • All hosting environment functionality provided via objects All data in JavaScript is an object or a property of an object Types of JavaScript objects – Native: provided by scripting engine • If automatically constructed before program execution, known as a built-in object (ex: window) – Host: provided by host environment • alert and prompt are host objects

• •

• •

Basic JavaScript Syntax Notice that there is no main() function/method //HighLow.js Var thinkOf; Var guess; Comments like Java/C++ (/* */ also allowed) //Number the computer has chosen (1 through 1000) // User’s latest guess
Semi-colons are usually not required, but always allowed at statement end

//initialize the computer’s number thinkingOf = Math.ceil(Math.random() * 1000) ; //play until user guess the number

guess = window. Prompt(“ I am thinking of a number between 1 and 1000.” + “what is it ?”, “ “) ;
String concatenation operator as well as addition

Arithmetic operators same as Java/C++ Argument lists are comma-separated

Object dot notation for method calls as in Java/C++

Variables and Data Types • • Type of a variable is dynamic: depends on the type of data it contains JavaScript has six data types: – Number – String – Boolean (values true and false) – Object – Null (only value of this type is null) – Undefined (value of newly created variable) Primitive data types: all but Object typeof operator returns string related to data type – Syntax: typeof expression

• •

Table: values returned by typeof for various operands:

• •

• •

Naming conventions Global o Global variables are declared simply by assigning a value:  x = 10; Local o Local variables are declared inside a function:  var x; Undefined vs. Null-value Syntax rules for names (identifiers): o Must begin with letter or underscore ( _ ) o Must contain only letters, underscores, and digits (or certain other characters) o Must not be a reserved word

Reserved words in J Scripts:

JavaScript Statements • •

Expression statement: any statement that consists entirely of an expression – Expression: code that represents a value Block statement: one or more statements enclosed in { } braces Keyword statement: statement beginning with a keyword, e.g., var or if

JavaScript Operators Operators are used to create compound expressions from simpler expressions Operators can be classified according to the number of operands involved: – Unary: one operand (e.g., typeof i) • Prefix or postfix (e.g., ++i or i++ ) – Binary: two operands (e.g., x + y) – Ternary: three operands (conditional Escape sequence: • •

Arithmetic Operator:

Decision Making:

Associativity: – Assignment, conditional, and prefix unary operators are right associative: equal-precedence operators are evaluated right-to-left: – Other operators are left associative: equal-precedence operators are evaluated left-to-right Binary operators +, -, *, /, % convert both operands to Number – Exception: If one of operands of + is String then the other is converted to String Relational operators <, >, <=, >= convert both operands to Number – Exception: If both operands are String, no conversion is performed and lexicographic string comparison is performed

JavaScript Literals: • Literals are used to represent values in java script. Types of literals: 1. Numeric literals • Integers • Floating –point numbers 2. String literals • String literals is zero (or) more character enclosed in double (“ “) (or) single ( ‘ ‘) quotation marks. 3. Boolean literals • Boolean literal have two type of value. i. True ii. false Functions in JavaScript

• • • • • • •

Declared within other functions. These are called “inner functions” and are the main idea behind closures in JavaScript. Built-in functions are almost completely concerned with validating argument types which are commonly passed into functions or methods as well as converting variables to and from these types. This includes specifics such as NaN(), infinity(), and undefined(), as well as functions for encoding and decoding data. Functions can be created through several different techniques, and since JavaScript uses first-class functions, they are treated as objects. Function objects have properties, and can be passed around and used just like any other object. Variables, literals, and objects can be passed as arguments. The argument list is an array with the same name. Overloading is not implemented, but can be simulated Function declaration syntax: function validate() { alert(“this is example”); }

Function call semantics details:

– Arguments: • May be expressions: • Object’s effectively passed by reference (more later) – Formal parameters: • May be assigned values, argument is not affected – Return value: • If last statement executed is not return-value, then returned value is of type Undefined • Number mismatch between argument list and formal parameter list: – More arguments: excess ignored – Fewer arguments: remaining parameters are Undefined Recursive functions – Recursion (function calling itself, either directly or indirectly) is supported – C++ static variables are not supported – Order of declaration of mutually recursive functions is unimportant (no need for prototypes as in C++) Explicit type conversion supplied by built-in functions – Boolean(), String(), Number() – Each takes a single argument, returns value representing argument converted according to type-conversion rules given earlier

Flow Control
      

If…else While Do-while For Return Break Switch

Object Introduction

• • •

An object is a set of properties A property consists of a unique (within an object) name with an associated value The type of a property depends on the type of its value and can vary dynamically

• •

There are no classes in JavaScript Instead, properties can be created and deleted dynamically

Object Creation: • • Objects are created using new expression A constructor is a function – When called via new expression, a new empty Object is created and passed to the constructor along with the argument values – Constructor performs initialization on object • Can add properties and methods to object • Can add object to an inheritance hierarchy The Object() built-in constructor – Does not add any properties or methods directly to the object – Adds object to hierarchy that defines default toString() and valueOf() methods (used for conversions to String and Number, resp.)

Property Creation • • Assignment to a non-existent (even if inherited) property name creates the property: Object initializer notation can be used to create an object (using Object() constructor) and one or more properties in a single statement:

Enumerating Properties • Special form of for statement used to iterate through all properties of an object:

Accessing Property Values • The JavaScript object dot notation is actually shorthand for a more general associative array notation in which Strings are array indices:

Expressions can supply property names:

Object Methods • • • JavaScript functions are stored as values of type Object A function declaration creates a function value and stores it in a variable (property of window) having the same name as the function A method is an object property for which the value is a function

Object Constructors

User-defined constructor is just a function called using new expression:

Object created using a constructor is known as an instance of the constructor

JavaScript Arrays • The Array built-in object can be used to construct objects with special properties and that inherit various methods

The Array constructor is indirectly called if an array initializer is used

Array initializiers can be used to create multidimensional arrays

Value of length is not necessarily the same as the actual number of elements

Methods inherited by array objects:

Built-in Objects • JavaScript’s collection of built-in objects is relatively small compared to other languages, but still provides the basic objects needed for most functional programming. This includes mathematical objects, date/time objects and objective arrays. Each type of built-in object is supported with several methods used to manipulate and display the data associated with them. As stated before, JavaScript functions themselves are objects, and there are some other surprising objects such as strings and numbers which many programmers are used to seeing within built-in data types. This allows for elaborate string and number manipulation. Properties provided by Number built-in object: o Number.MIN_VALUE: smallest (absolute value) possible JavaScript Number value o Number.MAX_VALUE: largest possible JavaScript Number value

• • •


Methods of the StringObject

Date Object:

Booleanand NumberObjects

JavaScript Global Functions

Java Script String Object:

Java Script String Object Method anchor() big() blink() bold() charAt() charCodeAt() concat() fixed() fontcolor() fontsize() fromCharCode() indexOf() italics() lastIndexOf()


Description Creates an HTML anchor Displays a string in a big font Displays a blinking string Displays a string in bold Returns the character at a specified position Returns the Unicode of the character at a specified position Joins two or more strings Displays a string as teletype text Displays a string in a specified color Displays a string in a specified size Takes the specified Unicode values and returns a string Returns the position of the first occurrence of a specified string value in a string Displays a string in italic Returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string Displays a string as a hyperlink

match() replace() search() slice() small() split() strike() sub() substr() substring() sup() toLowerCase() toUpperCase() toSource() valueOf() String Object Properties: Property constructor length prototype

Searches for a specified value in a string Replaces some characters with some other characters in a string Searches a string for a specified value Extracts a part of a string and returns the extracted part in a new string Displays a string in a small font Splits a string into an array of strings Displays a string with a strikethrough Displays a string as subscript Extracts a specified number of characters in a string, from a start index Extracts the characters in a string between two specified indices Displays a string as superscript Displays a string in lowercase letters Displays a string in uppercase letters Represents the source code of an object Returns the primitive value of a String object

Description A reference to the function that created the object Returns the number of characters in a string Allows you to add properties and methods to the object

Java Script Debugger: • • JavaScript debugging has some specifics in comparison with stand-alone applications. JavaScript programs usually rely on interaction with the loaded page's Document Object Model (DOM) so errors may be caused by wrong DOM usage in a technically correct script. This makes JavaScript errors difficult to find. However nowadays there are al lot of reasonably good JavaScript debuggers.

• • •

JavaScript debugger provides you with a set of tools that aid in the process of inspecting, monitoring and editing JavaScript code. You can use the debugger to identify errors, or step through execution and explore the state of your application at any given moment. Numerous debugging windows are also at your disposal, affording an intuitive interface to examine variable and expression values, threads, sessions, breakpoints and more. The NetBeans JavaScript debugger offers a common user experience for both Firefox and Internet Explorer. Debugger support for FireFox is based on Firebug, whereas for Internet Explorer it is based on the Active Scripting debugger framework.

Enabling and Disabling Java Script Debugger: •

By default, the JavaScript debugger is disabled in the IDE. When starting the debugger for the first time however, the IDE presents you with a dialog that allows you to activate it for your browser. At all times, you can activate or disable the debugger from the Project Properties window. 1. In the Projects window, right-click your project and choose Properties. 2. In the Project Properties dialog, select the Debug category. 3. Toggle the Debug Web Application (Client side JavaScript) option. 4. Select the browser you plan to use (Firefox or Internet Explorer).

Click OK to close the window.

Starting the Debugger: When you run the debugger for the first time, the IDE first checks if you have the appropriate resources and extensions installed in your browser.
• •

Internet Explorer Firefox

Internet Explorer 1. Start the debugger by right-clicking your project in the Projects window and choosing Debug. 2. In the dialog box that displays, select the Server side Java with client side JavaScript in the selected browser option. Then select Internet Explorer.

3. Click Debug. When you select the client-side debugging option for Internet

Explorer and click Debug, the IDE first ensures that you have the Active Scripting debugger framework installed. If it have not been installed, you are prompted to download and install the framework.

Your browser is launched to the location on Microsoft's website where you can download the framework. Download and install the framework. 4. Once you receive confirmation that the Active Scripting debugger framework has been installed, return to the IDE and click OK. The IDE checks if you have the NetBeans Internet Explorer extension registered in your browser. If not, a dialog displays, prompting you to enable the IDE to install the NetBeans Internet Explorer extension. 5. Click OK. The IDE registers the extension in your browser, the debugging session is initiated, and the welcome page of the application you are running the debugging session on displays in your browser.
6. Return focus to the IDE. The debugger toolbar is displayed above the editor. All

icons of the toolbar are activated when the code becomes suspended. The project index page opens in the IDE's editor. By default, numerous windows are activated in the lower region of the IDE, including the Watches, Local Variables, and Call Stack windows. The debugger console initially displays in the Output window, indicating that a debugging session has been started. The debugger console can be used during a debugging session to show evaluation errors, thrown exceptions, and other information.

Sign up to vote on this title
UsefulNot useful