Home Explore BCA121_Web Designing(Draft 2)-converted

BCA121_Web Designing(Draft 2)-converted

Published by Teamlease Edtech Ltd (Amita Chitroda), 2021-04-20 17:50:35

Description: BCA121_Web Designing(Draft 2)-converted

Read the Text Version

Pages:

• https://www.tutorialrepublic.com/css-reference/css3-properties.php • https://www.w3.org/Style/CSS/all-properties.en.html • Layout for the Web with CSS Regions and ExclusionsBy Christian CantrellPublished: August 3rd, 2012 • Mastering CSS Principles: A Comprehensive Guide The Smashing EditorialJuly 2, 2012 .151 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT8 CASCADING STYLE SHEETS 3 Structure LearningObjectives Introduction Working with block elements and objects Working with Lists and Table Summary KeyWords/Abbreviations LearningActivity Unit End Questions (MCQ andDescriptive) References LEARNINGOBJECTIVES After studying this unit, you will be able to: • Explain Working with block elements and objects • Discuss working with Lists and Table. INTRODUCTION Early on in web development, HTML tables were very basic and lacked extensive styling options. Today, however, most tables are styled to create a more aesthetically pleasing and functional experience for users.CSS provides a number of attributes for styling tables. These attributes allow you to—among other things—separate cells in a table, specify table borders, and specify the width and height of a table. This tutorial will discuss, with examples, how to style a table using CSS. By the end of this tutorial, you’ll be an expert at it. WORKING WITH BLOCK ELEMENTS AND OBJECTS .152 CU IDOL SELF LEARNING MATERIAL (SLM)

All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements. Block Elements Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line. Inline Elements Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements. Grouping HTML Elements There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag The <div> tag This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS. Example Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <div> tag − <!DOCTYPE html> <html> <head> .153 CU IDOL SELF LEARNING MATERIAL (SLM)

<title>HTML div Tag</title> .154 </head> <body>  <divstyle=\"color:red\"> <h4>This is first group</h4> <p>Following is a list of vegetables</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div>  <divstyle=\"color:green\"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <ul> <li>Apple</li> CU IDOL SELF LEARNING MATERIAL (SLM)

<li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html> This will produce the following result – The <span> tag The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS. The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements. Example Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <span> tag − <!DOCTYPE html> <html> .155 CU IDOL SELF LEARNING MATERIAL (SLM)

<head> <title>HTML span Tag</title> </head> <body> <p>This is <spanstyle=\"color:red\">red</span> and this is <spanstyle=\"color:green\">green</span></p> </body> </html> This will produce the following result − WORKING WITH LISTS AND TABLE In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout. Authors may specify the visual formatting of a table as a rectangular grid of cells. Rows and columns of cells may be organized into row groups and column groups. Rows, columns, row groups, column groups, and cells may have borders drawn around them (there are two border models in CSS 2.1). Authors may align data vertically or horizontally within a cell and align data in all cells of a row or column. Here is a simple three-row, three-column table described in HTML 4: <TABLE> .156 CU IDOL SELF LEARNING MATERIAL (SLM)

<CAPTION>This is a simple 3x3 table</CAPTION> <TR id=\"row1\"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id=\"row2\"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id=\"row3\"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE> This code creates one table (the TABLE element), three rows (the TR elements), three header cells (the TH elements), and six data cells (the TD elements). Note that the three columns of this example are specified implicitly: there are as many columns in the table as required by header and data cells. The following CSS rule centers the text horizontally in the header cells and presents the text in the header cells with a bold font weight: th {text-align: center; font-weight: bold} The next rules align the text of the header cells on their baseline and vertically center the text in each data cell: th {vertical-align: baseline} td {vertical-align: middle} The next rules specify that the top row will be surrounded by a 3px solid blue border and each of the other rows will be surrounded by a 1px solid black border: table {border-collapse: collapse} tr#row1 {border: 3px solid blue} tr#row2 {border: 1px solid black} tr#row3 {border: 1px solid black} The following rule puts the table caption above the table: caption {caption-side: top} .157 CU IDOL SELF LEARNING MATERIAL (SLM)

The preceding example shows how CSS works with HTML 4 elements; in HTML 4, the semantics of the various table elements (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In other document languages (such as XML applications), there may not be pre-defined table elements. Therefore, CSS 2.1 allows authors to \"map\" document language elements to table elements via the 'display' property. For example, the following rule makes the FOO element act like an HTML TABLE element and the BAR element act like a CAPTION element: FOO {display:table} BAR {display: table-caption} We discuss the various table elements in the following section. In this specification, the term table element refers to any element involved in the creation of a table. An internal table element is one that produces a row, row group, column, column group, or cell. The CSS table model The CSS table model is based on the HTML4 table model, in which the structure of a table closely parallels the visual layout of the table. In this model, a table consists of an optional caption and any number of rows of cells. The table model is said to be \"row primary\" since authors specify rows, not columns, explicitly in the document language. Columns are derived once all the rows have been specified -- the first cell of each row belongs to the first column, the second to the second column, etc.). Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).Thus, the table model consists of tables, captions, rows, row groups (including header groups and footer groups), columns, column groups, and cells. The CSS model does not require that the document language include elements that correspond to each of these components. For document languages (such as XML applications) that do not have pre-defined table elements, authors must map document language elements to table elements; this is done with the 'display' property. The following 'display' values assign table formatting rules to an arbitrary element: table (In HTML: TABLE)-Specifies that an element defines a block-level table: it is a rectangular block that participates in a block formatting context inline-table (In HTML: TABLE)-Specifies that an element defines an inline-level table: it is a rectangular block that participates in an inline formatting context) .158 CU IDOL SELF LEARNING MATERIAL (SLM)

table-row (In HTML: TR)-Specifies that an element is a row of cells table-row-group (In HTML: TBODY)-Specifies that an element groups one or more rows table-header-group (In HTML: THEAD)-Like 'table-row-group', but for visual formatting, the row group is always displayed before all other rows and row groups and after any top captions. Print user agents may repeat header rows on each page spanned by a table. If a table contains multiple elements with 'display: table-header-group', only the first is rendered as a header; the others are treated as if they had 'display: table-row-group'. table-footer-group (In HTML: TFOOT)-Like 'table-row-group', but for visual formatting, the row group is always displayed after all other rows and row groups and before any bottom captions. Print user agents may repeat footer rows on each page spanned by a table. If a table contains multiple elements with 'display: table-footer-group', only the first is rendered as a footer; the others are treated as if they had 'display: table-row-group'. table-column (In HTML: COL)-Specifies that an element describes a column of cells table-column-group (In HTML: COLGROUP)-Specifies that an element groups one or more columns table-cell (In HTML: TD, TH)-Specifies that an element represents a table cell table-caption (In HTML: CAPTION)-Replaced elements with these 'display' values are treated as their given display types during layout. For example, an image that is set to 'display: table-cell' will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell. Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none'), but they are useful, because they may have attributes which induce a certain style for the columns they represent. The default style sheet for HTML4 in the appendix illustrates the use of these values for HTML4: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } .159 CU IDOL SELF LEARNING MATERIAL (SLM)

col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } User agents may ignore these 'display' property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering. However, this is not meant to discourage the use of 'display: table' on other, non- table elements in HTML Anonymous table objects Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the \"missing\" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline- table' element, a 'table-row' element, and a 'table-cell' element. Missing elements generate anonymous objects (e.g., anonymous boxes in visual table layout) according to the following rules: For the purposes of these rules, the following terms are defined: row group box-A 'table-row-group', 'table-header-group', or 'table-footer-group' proper table child-A 'table-row' box, row group box, 'table-column' box, 'table-column- group' box, or 'table-caption' box. proper table row parent-A 'table' or 'inline-table' box or row group box internal table box-A 'table-cell' box, 'table-row' box, row group box, 'table-column' box, or 'table-column-group' box. tabular container-A 'table-row' box or proper table row parent Consecutive-Two sibling boxes are consecutive if they have no intervening siblings other than, optionally, an anonymous inline containing only white spaces. A sequence of sibling boxes is consecutive if each box in the sequence is consecutive to the one before it in the sequence. For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height. Their containing blocks are chosen accordingly.The following steps are performed in three stages. .160 CU IDOL SELF LEARNING MATERIAL (SLM)

Remove irrelevant boxes: All child boxes of a 'table-column' parent are treated as if they had 'display: none’. If a child C of a 'table-column-group' parent is not a 'table-column' box, then it is treated as if it had 'display: none’. If a child C of a tabular container P is an anonymous inline box that contains only white space, and its immediately preceding and following siblings, if any, are proper table descendants of P and are either 'table-caption' or internal table boxes, then it is treated as if it had 'display: none'. A box D is a proper table descendant of A if D can be a descendant of A without causing the generation of any intervening 'table' or 'inline-table' boxes. If a box B is an anonymous inline containing only white space, and is between two immediate siblings each of which is either an internal table box or a 'table-caption' box then B is treated as if it had 'display: none'. Generate missing child wrappers: If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children. If a child C of a row group box is not a 'table- row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes. If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes. Generate missing parents: For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes. For each proper table child C in a sequence of consecutive proper table children, if C is mis parented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.) A 'table-row' is mis parented if its parent is neither a row group box nor a 'table' or 'inline-table' box. A 'table- column' box is mis parented if its parent is neither a 'table-column-group' box nor a 'table' or 'inline-table' box. A row group box, 'table-column-group' box, or 'table-caption' box is mis parented if its parent is neither a 'table' box nor an 'inline-table' box. Visual layout of table contents Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins. The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules. These rules do not .160 CU IDOL SELF LEARNING MATERIAL (SLM)

apply to HTML 4 or earlier HTML versions; HTML imposes its own limitations on row and column spans. Each row box occupies one row of grid cells. Together, the row boxes fill the table from top to bottom in the order they occur in the source document (i.e., the table occupies exactly as many grid rows as there are row elements).A row group occupies the same grid cells as the rows it contains. A column box occupies one or more columns of grid cells. Column boxes are placed next to each other in the order they occur. The first column box may be either on the left or on the right, depending on the value of the 'direction' property of the table. A column group box occupies the same grid cells as the columns it contains. Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined, a user agent may have special knowledge about the source document; a future update of CSS may provide a way to express this knowledge in CSS syntax.) Each cell is thus a rectangular box, one or more grid cells wide and high. The top row of this rectangle is in the row specified by the cell's parent. The rectangle must be as far to the left as possible, but the part of the cell in the first column it occupies must not overlap with any other cell box (i.e., a row-spanning cell starting in a prior row), and the cell must be to the right of all cells in the same row that are earlier in the source document. If this position would cause a column-spanning cell to overlap a row- spanning cell from a prior row, CSS does not define the results: implementations may either overlap the cells (as is done in many HTML implementations) or may shift the later cell to the right to avoid such overlap. (This constraint holds if the 'direction' property of the table is 'ltr'; if the 'direction' is 'rtl', interchange \"left\" and \"right\" in the previous two sentences.) A cell box cannot extend beyond the last row box of a table or row group; the user agents must shorten it until it fits. The edges of the rows, columns, row groups and column groups in the collapsing borders model coincide with the hypothetical grid lines on which the borders of the cells are centered. (And thus, in this model, the rows together exactly cover the table, leaving no gaps; ditto for the columns.) In the separated borders model, the edges coincide with the border edges of cells. (And thus, in this model, there may be gaps between the rows, columns, row groups or column groups, corresponding to the 'border-spacing' property.) Note. Positioning and floating of table cells can cause them not to be table cells anymore, according to the rules,when floating is used, the rules on anonymous table objects may cause an anonymous cell object to be created as well. The following illegal (X)HTML snippet defines conflicting cells: <table> <tr><td>1 </td><td rowspan=\"2\">2 </td><td>3 </td><td>4 .161 CU IDOL SELF LEARNING MATERIAL (SLM)

</td></tr> <tr><td colspan=\"2\">5 </td></tr> </table> User agents are free to visually overlap the cells, as in the figure on the left, or to shift the cell to avoid the visual overlap, as in the figure on the right. Fig 8.1 conflicting cells Lists- Thelist- style- typepropertycanbeusedtovarythedefaultstylesusedforbulletedand numberedlistitems.InHTML,thispropertynormallyonlyappliestotheli elementtype. However,itisinherited,socanbesetonaparento loru lelementinordertoaffectthe styleofallofthatelement’schildren.Forbulletedlists,thevaluesdisc,circle, andsquaremaybespe ciﬁed.Fornumberedlists,someofthenormalvaluesaredecimal(1,2,. . . ), lower- roman(i,ii,. .. ),upper-roman(I,II,. . . ),lower-alpha(a,b,. .. ),andupper- alpha(A,B,... ).Avalueofnonecanalsobespeciﬁedtoindicatethatnomarker(leadingbullet or number) should be generated fora li element. Arelatedli elementtypepropertyislist- style- image, whichhasaninitialvalue ofnone.IfaURIisspeciﬁedforthisproperty(usingtheu r l( \" . . . \") syntax),andifanimagecanbeloa dedfromthisURI,thenthisimagewillbeusedin placeofthenormalmarkerasspeciﬁedbylist- style- type. Onceagain,thispropertyis inherited and is often set onparent elements rather than directlyon li elements. The list- style- positionproperty can be usedto changethe locationof themarker relativetothecontentofanli. Abrowsernormallygeneratestwoboxesforanli: aspecialboxtoholdthemarker,andablockboxtoholdtheelementcontent.If list - style- position has itsinitialvalueofoutside, themarkerboxisoutsidethecontent blockbox.However,ifthevalueisspeciﬁedasinside,thentheboxgeneratedforthe markerwillbetheﬁrstinlineboxplacedwithinthecontentblockbox.Thevisualeffectin thiscasewillbethattheﬁrstlineofthelistitemcontentisindentedtomakeroomforthe marker. Finally,theshortcutpropertylist - stylecan beusedtospecifyvaluesforanyorall of the mentioned properties, in anyorder. .162 CU IDOL SELF LEARNING MATERIAL (SLM)

SUMMARY • Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line • Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements. • There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag • Important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS. • The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS. • The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements. • The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. • The border-spacing specifies the width that should appear between table cells. • The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. • The empty-cells specify whether the border should be shown if a cell is empty. .163 CU IDOL SELF LEARNING MATERIAL (SLM)

• The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. • The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length. • If you provide one value, it will apply to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing KEY WORDS/ABBREVIATIONS • Server: A software application that serves requests initiated by client programs. • Strict :( used at the top of a web page to specify HTML version) the strict version indicates that the web document does not use frames or any deprecated elements. If a web document is based on a strict definition, it must have clean HTML (meaning all opened tags must be closed, attribute values surrounded by double quotation marks, etc.). • Style sheet: A style sheet includes styling syntax (rules) that dictates how your web page will look. Style sheets are very useful as they help web developers create uniform (or consistent) presentation of web pages. • Syntax: Syntax basically refers to the rules a computer language uses to perform a task. Without syntax, a computer language would not be functional or useful at all. HTML syntax dictates what and how a web page will display. • Syntax error: A syntax error basically refers to a situation in which the rules (or a rule) of the computer language are (is) broken. In HTML, depending on the syntax error you produce, the web page may look completely different than what you had intended. LEARNINGACTIVITY 1. WAP to Create form to submit user records. 2. WAP that implements List. .164 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Question 1. Write CSS code for including a background image without repeating in a page? 2. State the difference between <div> and <span> tag? 3. Illustrate with example how do you include comments in CSS? 4. State and explain the border-collapse Property. 5. State and explain how to control list type, position, style using CSS. B. B. Multiple Choice Questions 1. Which of the following element is used within the table element to define a caption? (a) <tablecaption> (b) <caption> (c) <table-cap> (d) <table-caption> 2. Which of the following property is used to specify table borders in CSS? (a) table (b) border (c) table: border (d) none of the mentioned 3. Which of the following property sets whether the table borders are collapsed into a single border or separated: (a) border (b) border-collapse c) collapse d) table-border .165 CU IDOL SELF LEARNING MATERIAL (SLM)

4. Which of the following property is used to change the width of table? a) width (b) table (c) table-width (d) resize 5. Which of the following property sets the vertical alignment? (a) align (b) vertical (c) vertical-align (d) vertical-alignment Answers 1. (b), 2. (b), 3. (b), 4. (a), 5. (b) SUGGESTED READINGS • Designing with Progressive Enhancement: Building the Web That Works for Everyone (Paperback) by Todd Parke • Responsive Web Design with HTML5 and CSS3 (Paperback)by Ben Frai • Handcrafted CSS: More Bulletproof Web Design (Paperback)by Dan Cederholm • Beginning HTML, XHTML, CSS, and JavaScript (Paperback)by Jon Ducket • https://www.tutorialspoint.com/css/css_lists.htm • https://www.w3schools.com/css/css_list.asp • https://learn.shayhowe.com/html-css/creating-lists/ • A Complete Guide to the Table Element by Chris Coyier • How to Style HTML Tables with CSS by JAMES GALLAGHERAPR 17, 2020 .166 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 9CASCADING STYLE SHEETS 4 Structure LearningObjectives Introduction CSS Id and Class Box Model (Introduction, Border properties, Padding Properties, Margin properties) Summary KeyWords/Abbreviations LearningActivity Unit End Questions (MCQ andDescriptive) References LEARNINGOBJECTIVES After studying this unit, you will be able to: • Explain CSS Id and Class • Discuss Box Model INTRODUCTION In the previous sections, you have gone through the basics of style sheet and how to use them along with the web document. This section and next section provides details on some of the properties relating to font, lists, color and alignment of text. A detailed discussion on all the properties is beyond the scope of this Unit.When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. .167 CU IDOL SELF LEARNING MATERIAL (SLM)

CSS ID AND CLASS The HTML id attribute is used to specify a unique id for an HTML element. Using the id Attribute The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific dither syntax for id is: write a hash character (#) character, followed by an id name. Then, define the CSS properties within curly braces {}. In the following example we have an <h1> element that points to the id name \"myHeader\". This <h1> element will be styled according to the #myHeader style definition in the head section: Example <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id=\"myHeader\">My Header</h1> </body> </html> You cannot have more than one element with the same id in an HTML document. The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class. The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. In the following example we have three <div> elements with .168 CU IDOL SELF LEARNING MATERIAL (SLM)

a class attribute with the valueof \"city\". All of the three <div> elements will be styled equally according to the .city style definition in the head section: Example <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class=\"city\"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class=\"city\"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class=\"city\"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> .169 CU IDOL SELF LEARNING MATERIAL (SLM)

BOX MODEL (INTRODUCTION, BORDER PROPERTIES, PADDING PROPERTIES, MARGIN PROPERTIES) When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. Fig 9.1 Box model The content area, bounded by the content edge, contains the \"real\" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content- box width) and the content height (or content-box height). It often has a background color or background image. If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, height, max-height properties. The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties. The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height. The thickness of the borders is determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border area's .170 CU IDOL SELF LEARNING MATERIAL (SLM)

size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. When there is a background (background-color or background- image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the background-clip css property. The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height. The size of the margin area is determined by the margin-top, margin-right, margin- bottom, margin-left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes. Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the borders and padding are still displayed around the content. Normal Flow Box Layout Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example: <p>I love my cat.</p> <ul> <li>Buy cat food</li> <li>Exercise</li> <li>Cheer up friend</li> </ul> <p>The end!</p> By default, the browser will display this code as follows: .171 CU IDOL SELF LEARNING MATERIAL (SLM)

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph. The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph. For many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in CSS. Starting with a well-structured HTML document is very important, as you can then work with the way things are laid out by default rather than fighting against The methods that can change how elements are laid out in CSS are as follows: The display property — Standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element. We also have entire layout methods that are switched on via specific display values, for example CSS Grid and Flexbox, which alter how elements inside the element they are set on are laid out. Floats — Applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts. The position property — allows you to precisely control the placement of boxes inside other boxes. Static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport. Table layout — features designed for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties. Multi-column layout — The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper. .172 CU IDOL SELF LEARNING MATERIAL (SLM)

Beyond the Normal Flow The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. Types of positioning • A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.) • A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. • An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents. • A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as \"stuck\" until meeting the opposite edge of its containing block. Syntax The position property is specified as a single keyword chosen from the list of values below. Values Static-The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. Relative-The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table- cell, and table-caption elements is undefined. Absolute-The element is removed from the normal document flow, and no space is created .173 CU IDOL SELF LEARNING MATERIAL (SLM)

for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins. Fixed-The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page. Sticky-The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element \"sticks\" to its nearest ancestor that has a \"scrolling mechanism\" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any \"sticky\" behavior. Formal syntax static | relative | absolute | sticky | fixed Examples Relative positioning-Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if \"Two\" were taking up the space of its normal location. HTML <div class=\"box\" id=\"one\">One</div> .174 CU IDOL SELF LEARNING MATERIAL (SLM)

<div class=\"box\" id=\"two\">Two</div> <div class=\"box\" id=\"three\">Three</div> <div class=\"box\" id=\"four\">Four</div> CSS .box{ display: inline-block; width:100px; height:100px; background: red; color: white; } #two{ position: relative; top:20px; left:20px; background: blue; } Absolute positioning-Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is .175 CU IDOL SELF LEARNING MATERIAL (SLM)

not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB which is the containing block of the document's root element. Fixed positioning-Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block. This can be used to create a \"floating\" element that stays in the same position regardless of scrolling. In the example below, box \"One\" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport. Sticky positioning-Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A sickly positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance. #one{position: sticky;top:10px;}. would position the element with id one relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top. A common use for sticky positioning is for the headings in an alphabetized list. The \"B\" heading will appear just below the items that begin with \"A\" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the \"B\" heading will then remain fixed to the top of the viewport until all the \"B\" items have scrolled offscreen, at which point it will be covered up by the \"C\" heading, and so on. You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. HTML <dl> <div> <dt>A</dt> <dd>Andrew W.K.</dd> <dd>Apparat</dd> <dd>Arcade Fire</dd> <dd>At The Drive-In</dd> <dd>Aziz Ansari</dd> </div> <div> <dt>C</dt> .176 CU IDOL SELF LEARNING MATERIAL (SLM)

<dd>Chromeo</dd> .177 <dd>Common</dd> <dd>Converge</dd> <dd>Crystal Castles</dd> <dd>Cursive</dd> </div> <div> <dt>E</dt> <dd>Explosions In The Sky</dd> </div> <div> <dt>T</dt> <dd>Ted Leo & The Pharmacists</dd> <dd>T-Pain</dd> <dd>Thrice</dd> <dd>TV On The Radio</dd> <dd>Two Gallants</dd> </div> </dl> CSS *{ box-sizing: border-box; } dl > div{ background:#FFF; padding:24px000; } CU IDOL SELF LEARNING MATERIAL (SLM)

dt{ background:#B8C1C8; border-bottom:1px solid #989EA4; border-top:1px solid #717D85; color:#FFF; font: bold 18px/21px Helvetica, Arial, sans-serif; margin:0; padding:2px0012px; position: -webkit-sticky; position: sticky; top:-1px; } dd{ font: bold 20px/45px Helvetica, Arial, sans-serif; margin:0; padding:00012px; white-space: nowrap; } dd + dd{ border-top:1px solid #CCC; } .178 CU IDOL SELF LEARNING MATERIAL (SLM)

SUMMARY • The simple selector form is used for a single element, such as element. It is a normal form of writing CSS rule. In this case, rule is applied to all the occurrences of named element. • Class selector is used to apply same style specifications to the content of more than one kind of elements with HTML class attribute. In style specification definition, the class attribute is defined with a name which is preceded with a period. • The id selector is used to select any element in an html page with specific or unique id. In style definition, id attribute is defined with hash character “#”. ID selectors are similar to class selectors. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one element • In a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the box model. Each box has four edges: the margin edge, border edge, padding edge, and content edge. • Each edge may be broken down into a top, right, bottom, and left edge. • The innermost area of box model is content area where the text and images appears. The content area is measured by width and height in terms of pixel and percentages. • Every element has a property, borderstyle. You can set the four sides of element with border-left-style, border-right-style, bordertop-style and border-bottom-style. The outermost area of box model is margin which is completely invisible. • Like border edge, margin edge has the properties margin-top, margin-bottom, margin-left, margin-right and padding have padding-left, padding-right, padding-top .179 CU IDOL SELF LEARNING MATERIAL (SLM)

and padding-bottom which is applies to all four sides of an element KEY WORDS/ABBREVIATIONS • Tags: The HTML code that controls the appearance of an HTML document's content. • Transitional :(used at the top of a web page to specify HTML version) A document defined as transitional may include deprecated elements and all the new HTML elements. However, the document cannot contain frames. • Uploading: Think of uploading as just opposite of downloading. While uploading simply means moving/sending files to the server, downloading means getting/receiving files from the server. • World Wide Web Consortium (W3C)-An organization consisting of representatives from member companies and responsible for making rules for the World Wide Web. LEARNINGACTIVITY 1. WAP to Demonstrate Table Tag. 2. WAP to Demonstrate anchor control. UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. How do you include comments in CSS? 2. Explain the box model and its utility with figure. 3. Write CSS code for including a background image without repeating in a page? 4. State margin properties with example. .180 CU IDOL SELF LEARNING MATERIAL (SLM)

5. With an example illustrate padding property. B. Multiple Choice Questions 1. Which of the following property adds padding to the top of an element? (a) height (b) padding-height (c) top (d) padding-top 2. Which of the following display property value is described by treats the element as inline? (a) inline-block (b) list-item (c) block (d) inline 3. Which of the following property defines the style for the bottom border of an element? (a) border-bottom-style (b) border-collapse (c) border-style-bottom (d) none of the mentioned 4. Which of the following property defines the style for the left border of an element? (a) border-style (b) border-left-style (c) border-left-width (d) border-right 5. Which of the following visibility property value is described by the element is not visible, but the layout of surrounding elements is not affected? (a) visible .181 CU IDOL SELF LEARNING MATERIAL (SLM)

(b) hidden (c) collapse (d) none of the mentioned Answers 1. (d), 2. (d), 3. (a), 4. (b), 5(b) REFERENCES • Simplified HTML & CSS for E-Books (Easy E-Book Formatting) by L.K. Sherman • Best CSS Books Bradley NiceJul 6, 2017 • HTML & CSS: The Good Parts: The Good Parts (Paperback)by Ben Henick • HTML5 & CSS3 For The Real World (Paperback) by Estelle Wey • https://www.w3schools.com/css/css_boxmodel.asp • https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model • https://www.w3.org/TR/CSS2/box.html • CSS Tricks: Journal break-downby pica-ae • DA Journal CSS + Tutorials by kuschelirmel-stock .182 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 10 JAVASCRIPT 1 Structure LearningObjectives Introduction Programming constructs: variables, operators and expressions, conditional checking, functions and dialog boxes Summary KeyWords/Abbreviations LearningActivity Unit End Questions (MCQ andDescriptive) References LEARNINGOBJECTIVES After studying this unit, you will be able to: • Discuss programming constructs • Explain variables, operators and expressions, conditional checking, functions and dialog boxes INTRODUCTION JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform. JavaScript is a must for students and working professionals to become a great Software Engineer especially when they are working in Web Development Domain. Below is a list of some of the key advantages of learning JavaScript: JavaScript is the most popular programming language in the world and that makes it a programmer’s great choice. Once you learnt JavaScript, it helps you developing great front-end as well as back-end software’s using different JavaScript based frameworks like jQuery, Node.JS etc.JavaScript .183 CU IDOL SELF LEARNING MATERIAL (SLM)

is everywhere, it comes installed on every modern web browser and so to learn JavaScript you really do not need any special environment setup. For example, Chrome, Mozilla Firefox, Safari and every browser you know as of today, supports JavaScript.JavaScript helps you create really beautiful and crazy fast websites. You can develop your website with a console like look and feel and give your users the best Graphical User Experience. JavaScript usage has now extended to mobile app development, desktop app development, and game development. This opens many opportunities for you as JavaScript Programmer PROGRAMMING CONSTRUCTS: VARIABLES, OPERATORS AND EXPRESSIONS, CONDITIONAL CHECKING, FUNCTIONS AND DIALOG BOXES JavaScript Variables Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows. <scripttype=\"text/javascript\">  </script> You can also declare multiple variables with the same var keyword as follows − <scripttype=\"text/javascript\">  </script> .184 CU IDOL SELF LEARNING MATERIAL (SLM)

Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable. For instance, you might create a variable named money and assign the value 2000.50 to it later. For another variable, you can assign a value at the time of initialization as follows. <script type = \"text/javascript\">  </script> Note − Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You should not re-declare same variable twice. JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of value the variable will hold. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically. JavaScript Variable Scope The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes. • Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code. • Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function. Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Take a look into the following example. .185 CU IDOL SELF LEARNING MATERIAL (SLM)

<html> <bodyonload= checkscope();> <scripttype=\"text/javascript\">  </script> </body> </html> This produces the following result − local JavaScript Variable Names While naming your variables in JavaScript, keep the following rules in mind. You should not use any of the JavaScript reserved keywords as a variable name. These keywords are mentioned in the next section. For example, break or boolean variable names are not valid. JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123test is an invalid variable name but _123test is a valid one. JavaScript variable names are case-sensitive. For example, Name and name are two different variables. JavaScript Reserved Words The list of all the reserved words in JavaScript, are given in the following table. They cannot be used as JavaScript variables, functions, methods, loop labels, or any object names. .186 CU IDOL SELF LEARNING MATERIAL (SLM)

Table 10.1 JavaScript Reserved Words abstract Else instance of switch boolean Enum int synchronized break Export Extends interface this byte False long throw case Final native throws catch Finally new transient char Float null true class For const function package try continue goto private typeof debugger protected default if public var delete implements return void do short volatile double import static while in super with .187 CU IDOL SELF LEARNING MATERIAL (SLM)

Operators and expression An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value. The value may be a number, a string, or a logical value. Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. For example, the expression x=7 is an expression that assigns x the value 7. This expression itself evaluates to 7. Such expressions use assignment operators. On the other hand, the expression 3+4 simply evaluates to 7; it does not perform an assignment. The operators used in such expressions are referred to simply as operators. JavaScript has the following kinds of expressions: • Arithmetic: evaluates to a number, for example • String: evaluates to a character string, for example \"Fred\" or \"234\" • Logical: evaluates to true or false The special keyword null denotes a null value. In contrast, variables that have not been assigned a value are undefined, and cannot be used without a run-time error. Conditional Expressions A conditional expression can have one of two values based on a condition. The syntax is (condition)? val1: val2 If condition is true, the expression has the value of val1, otherwise it has the value of val2. You can use a conditional expression anywhere you would use a standard expression. For example, status = (age >= 18)? \"adult”: \"minor\" This statement assigns the value \"adult\" to the variable status if age is eighteen or greater. Otherwise, it assigns the value \"minor\" to status. Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript supports the following types of operators. .188 CU IDOL SELF LEARNING MATERIAL (SLM)

• Arithmetic Operators • Comparison Operators • Logical (or Relational) Operators • Bitwise Operators • Assignment Operators • Conditional (or ternary) Operators Let us have a look on all operators one by one. Arithmetic Operators JavaScript supports the following arithmetic operators. Assume variable A holds 10 and variable B holds 20, then – Table 10.2 Operators Sr.No. Operator & Description 1 + (Addition) Adds two operands Ex: A + B will give 30 2 - (Subtraction) Subtracts the second operand from the first Ex: A - B will give -10 3 * (Multiplication) Multiply both operands Ex: A * B will give 200 4 / (Division) Divide the numerator by the denominator .189 CU IDOL SELF LEARNING MATERIAL (SLM)

Ex: B / A will give 2 5 % (Modulus) Outputs the remainder of an integer division Ex: B % A will give 0 6 ++ (Increment) Increases an integer value by one Ex: A++ will give 11 7 -- (Decrement) Decreases an integer value by one Ex: A-- will give 9 Note − Addition operator (+) works for Numeric as well as Strings. e.g. \"a\" + 10 will give \"a10\". Example The following code shows how to use arithmetic operators in JavaScript. <html> <body> <scripttype=\"text/javascript\">  </script> Set the variables to different values and then try... </body> </html> Output a + b = 43 a - b = 23 a / b = 3.3 a%b=3 a + b + c = 43Test .192 CU IDOL SELF LEARNING MATERIAL (SLM)

++a = 35 --b = 8 Set the variables to different values and then try... Comparison Operators JavaScript supports the following comparison operators .Assume variable A holds 10 and variable B holds 20, then Table 10.3 Comparison Operators Sr.No. Operator & Description 1 = = (Equal) Checks if the value of two operands is equal or not, if yes, then the condition becomes true. Ex: (A == B) is not true. 2 != (Not Equal) Checks if the value of two operands is equal or not, if the values are not equal, then the condition becomes true. Ex: (A != B) is true. 3 > (Greater than) Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true. Ex: (A > B) is not true. 4 < (Less than) Checks if the value of the left operand is less than the value of the right operand, if yes, then the condition becomes true. .193 CU IDOL SELF LEARNING MATERIAL (SLM)

Ex: (A < B) is true. 5 >= (Greater than or Equal to) Checks if the value of the left operand is greater than or equal to the value of the right operand, if yes, then the condition becomes true. Ex: (A >= B) is not true. 6 <= (Less than or Equal to) Checks if the value of the left operand is less than or equal to the value of the right operand, if yes, then the condition becomes true. Ex: (A <= B) is true. Example The following code shows how to use comparison operators in JavaScript. <html> <body> <scripttype=\"text/javascript\">  </script> Set the variables to different values and different operators and then try... </body> </html> Output (a == b) => false (a < b) => true (a > b) => false (a != b) => true (a >= b) => false a <= b) => true Set the variables to different values and different operators and then try... Logical Operators JavaScript supports the following logical operators. Assume variable A holds 10 and variable B holds 20, then Table 10.4 Logical Operators Sr.No. Operator & Description 1 && (Logical AND) 2 If both the operands are non-zero, then the condition becomes true. Ex: (A && B) is true. || (Logical OR) If any of the two operands are non-zero, then the condition becomes true. .196 CU IDOL SELF LEARNING MATERIAL (SLM)

Ex: (A || B) is true. 3 ! (Logical NOT) Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will make it false. Ex: ! (A && B) is false. Example Try the following code to learn how to implement Logical Operators in JavaScript. <html> <body> <scripttype=\"text/javascript\">  </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> Output (a && b) => false (a || b) => true !(a && b) => true Set the variables to different values and different operators and then try... i) Bitwise Operators JavaScript supports the following bitwise operators. Assume variable A holds 2 and variable B holds 3, then Table 10.5 Bitwise Operators Sr.No. Operator & Description 1 & (Bitwise AND) It performs a Boolean AND operation on each bit of its integer arguments. Ex: (A & B) is 2. 2 | (BitWise OR) It performs a Boolean OR operation on each bit of its integer arguments. Ex: (A | B) is 3. .198 CU IDOL SELF LEARNING MATERIAL (SLM)

3 ^ (Bitwise XOR) It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. Ex: (A ^ B) is 1. 4 ~ (Bitwise Not) It is a unary operator and operates by reversing all the bits in the operand. Ex: (~B) is -4. 5 << (Left Shift) It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on. Ex: (A << 1) is 4. 6 >> (Right Shift) Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand. Ex: (A >> 1) is 1. 7 >>> (Right shift with Zero) This operator is just like the >> operator, except that the bits shifted in on the left are always zero. Ex: (A >>> 1) is 1. Example .199 CU IDOL SELF LEARNING MATERIAL (SLM)

Pages:

Teamlease Edtech Ltd (Amita Chitroda)

BCA121_Web Designing(Draft 2)-converted

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

BCA121_Web Designing(Draft 2)-converted

Description: BCA121_Web Designing(Draft 2)-converted

Read the Text Version

Teamlease Edtech Ltd (Amita Chitroda)

TOP SEARCH

RELATED PUBLICATIONS