Embed Size (px)
DESCRIPTION
IT 2353 webtech notes
Citation preview
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-Operators-Literals-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 semi-
colon (;).• 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
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.
Selector string
Declaration Block
Valu
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 style="color: blue; font-style: italic"> I'm blue</H1>
2. Embedded:
defines style rules set within the HTML <HEAD> section of a document, using the STYLE tag. Embedded styles rules can include variety of HTML elements which will be applied to all the specified tags that are used within the <BODY> of the document. For example:
Syntax:
<STYLE type="text/css">H1 H2 H3 {color: green; text-transform: 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">
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
• 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. Content2. Padding3. Border4. Margins
Border properties
i. border-style ii. border-color
iii. 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. margin-bottom ii. margin-left
iii. margin-right iv. 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. padding-bottom ii. padding-left
iii. padding-right iv. 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 Comments like Java/C++ (/* */ also allowed)
Var thinkOf; //Number the computer has chosen (1 through 1000)Var guess; // User’s latest guess
//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 ?”, “ “) ;
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
Semi-colons are usually
not required, but always
allowed at statement end
Arithmetic operators same as Java/C++String concatenation operator as well as addition
Argument lists are comma-separated
Object dot notation for method calls as in Java/C++
Table: values returned by typeof for various operands:
Variables
• Naming conventions• Global
o Global variables are declared simply by assigning a value: x = 10;
• Localo 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. Trueii. 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 valueo Number.MAX_VALUE: largest possible JavaScript Number value
MathObject
Methods of the StringObject
Date Object:
Booleanand NumberObjects
JavaScript Global Functions
Java Script String Object:
Java Script String Object Method Description anchor() Creates an HTML anchor big() Displays a string in a big font blink() Displays a blinking string bold() Displays a string in bold charAt() Returns the character at a specified position charCodeAt() Returns the Unicode of the character at a specified position concat() Joins two or more strings fixed() Displays a string as teletype text fontcolor() Displays a string in a specified color fontsize() Displays a string in a specified size fromCharCode() Takes the specified Unicode values and returns a string indexOf() Returns the position of the first occurrence of a specified
string value in a string italics() Displays a string in italic lastIndexOf() Returns the position of the last occurrence of a specified
string value, searching backwards from the specified position in a string
link() Displays a string as a hyperlink
match() Searches for a specified value in a string replace() Replaces some characters with some other characters in a
string search() Searches a string for a specified value slice() Extracts a part of a string and returns the extracted part in a
new string small() Displays a string in a small font split() Splits a string into an array of strings strike() Displays a string with a strikethrough sub() Displays a string as subscript substr() Extracts a specified number of characters in a string, from a
start index substring() Extracts the characters in a string between two specified
indices sup() Displays a string as superscript toLowerCase() Displays a string in lowercase letters toUpperCase() Displays a string in uppercase letters toSource() Represents the source code of an object valueOf() Returns the primitive value of a String object
String Object Properties:
Property Description constructor A reference to the function that created the object length Returns the number of characters in a string prototype 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.
![14.juni02 - Colist.eu · Email: fahrschule.ñed@aon.at HALLO 04762/2352. Fax: 04762]2352 MÖLLTALER! noch besser noch schneller noch günstiger Ihr könnt den Fahrschulkurs ab jetzt](https://img.pdfslide.net/doc/110x75/6025080942b59e610d00e830/14juni02-email-fahrschuleedaonat-hallo-047622352-fax-047622352-mlltaler.jpg)
