UNIT - 6: HTML, CSS & JavaScript Structure 6.0 Learning Objectives. 6.1 Introduction. 6.2 HTML CSS and Java Script. 6.3 Summary. 6.4 Glossary. 6.5 References. 6.0 Learning Objectives After studying this unit, you will be able to: Classify HTML CSS and Java Script. 6.1 Introduction Hypertext Markup Language (HTML) is one of the three main components of modern web pages, along with Cascading Style Sheets (CSS) and JavaScript. HTML specifies to the browser what elements should be included in the webpage also the order of these elements. CSS specifies how each element should be styled. JavaScript provides ways for webpage authors to manipulate these elements programmatically and in response to actions by the end user.
6.2.1 HTML What is HTML? HTML is an abbreviation which stands for Hyper Text Markup Language which is used for making web pages and web applications. Hyper Text: HyperText means Text within Text. When a text has a link within then, it is a hypertext. When you click on a link which brings you to a new page on a website, you have clicked on a hypertext. HyperText is a method to link two or more web pages (HTML documents) with each other. Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc. Web Page: A website page is a record which is ordinarily written in HTML and interpreted by an internet browser. A site page can be distinguished by entering a URL. A Web page can be of the static or dynamic sort. With the assistance of HTML no one but, we can make static website pages. Thus, HTML is a markup language which is utilized for making appealing pages with the assistance of styling, and which examines a decent organization on an internet browser. A HTML archive is made of numerous HTML labels and every HTML tag contains different content.
Comments Input: <!DOCTYPE html> <html> <head></head> <body> This is sample text...<br/> You are beginning to learn HTML. <!-- We use this syntax to write comments --> <!-- Page content and rest of the tags here.... --> <!-- This is the actual area that gets shown in the browser --> </body> </html> Output: Comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Comments are here to explain your code, which can help you when you edit the source code at a later date. Tags HTML tags are like keywords which defines that how web browser will display the content. With the help of tags, a web browser can differentiate
between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and extract their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement. • HTML tags are surrounded by the two characters < and > (They are called angle brackets) • The tag name can either start from an alphabet or an underscore (_). • The text between the start and end tags is the element content. • Tags with an opening and closing can have any number of tags within itself • HTML tags are not case sensitive, means the same as • HTML tags normally comes in pairs (container tags), i.e. both opening and closing (it is same, just the name of the tag with character '/ ' in the beginning) tag. • E.g.: <html> and </html> is a tag that comes in pair • E.g.: does not have a closing tag. Description of HTML Tags
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML. <html >: This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE> <head>: It should be the first element inside the <html> element, which contains the metadata (information about the document). It must be closed before the body tag opens. <title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional) <body>: Text between body tag defines the body content of the page that is visible to the end user. This tag contains the main content of the HTML document. HTML elements. An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consists of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Paragraphs HTML paragraph or HTML <p> tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.
Input: <!DOCTYPE html> <html> <head> <title>p tag</title> </head> <body> <p>This is line 1.</p> <p>This is line 2.</p> <!-- trying to format the text without using p-tag --> This is line 1. This is line 2. This is line 3. </body> </html> Output: Heading A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of headings. There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. Headings in HTML helps the search engine to understand and index the structure of web page. Input:
<!DOCTYPE html> <html> <head> <title>Heading Levels</title> </head> <body> <h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6> </body> </html> Output: BR Tag It is generally used in poem or address where the division of line is necessary. It is an empty tag, which means it does not need a company of end tag. If you place the <br> tag in the HTML code, then it works the same as pressing the enter key in a word processor. Input: <!DOCTYPE html> <html> <head> <title>br tag</title> </head> <body> <h3>We are studying<br>HTML Break tag</h3>
</body> </html> Output: Lists Lists are used to group together related pieces of information so they are clearly related with each other and easy to read. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy to maintain document. HTML supports unordered, ordered and definition lists Unordered List HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list. The Unordered list starts with <ul> tag and list items start with the <li> tag. Input: <!DOCTYPE html> <html> <head> <title>Unordered Lists</title> </head> <body> <h1>Lists</h1> <li>first item</li> <li>second item</li> <li>third item</li> </ul> </body>
</html> Output: HTML provides an interesting feature to change the style of the list item marker. There are 4 types of style in unordered lists: ● type=\"disc\" - sets the list item marker to a bullet (default) ○ type=\"circle\" - sets the list item marker to a circle ■ type=\"square\" - sets the list item marker to a square type=\"none\" - the lists items will not be marked.
Input: ul style=\"list-style-type: circle\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style=\"list-style-type: disc\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style=\"list-style-type:square\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Output: Ordered Lists Ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
Input: <!DOCTYPE html> <html> <head> <title>Ordered Lists</title> </head> <body> <h1>Lists</h1> <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> </body> </html> Output: Similarly, like the unordered lists, there are also different types of ways to number the ordered lists using the 'type' attribute: 1. type=\"1\" - The list items will be numbered with numbers (default) A. type=\"A\" - The list items will be numbered with uppercase letters. a. type=\"a\" - The list items will be numbered with lowercase letters. I. type=\"I\" - The list items will be numbered with uppercase roman numbers. i. type=\"i\" - The list items will be numbered with lowercase roman numbers.
Input: <ol type=\"1\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"A\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"a\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"I\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type=\"i\"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
output: Description List or Definition List HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: <dl> tag defines the start of the list. <dt> tag defines a term. <dd> tag defines the term definition (description).
Input: <!DOCTYPE html> <html> <head> <title>Description Lists</title> </head> <body> <h2>Description List</h2> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html> Output: Nested List A list within another list is termed as nested list. For example, if you want a bullet list inside a numbered list then such type of list will be called as nested list.
Input: <ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! -- > <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --><ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the list that contains the third unordered list --> <li>second item third subitem</li> </ul> </li><!-- Here is the closing </li> tag --> <li>third item</li> </ul> Output: Images in HTML HTML can also display images in a document. In HTML, images are defined with the <img> tag. To display an image on a page, you need to
use the src attribute. Src stands for \"source\". The value of the src attribute is the URL of image you want to display on your page. • <img> tag is a self-closing tag which means that it doesn't contain the closing tag. • The src tag can contain both relative and absolute paths, as well as internet image links. Input: <img src=\"C:/HTML/img.png\" Output: ALT Attribute The alt attribute or alternate text tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Input: <img src=\"C:/HTML/img.png\" alt=\"Not Found\"> Output:
Height and Width Height and Width The height and width of an image can be set directly by using the height=\"value\" and width=\"value\" attributes. By default, the value provided is in pixels. Input: <img src=\"C:/HTML/img.png\" alt=\"Not Found\" height=\"300\" width=\"300\" > Output: Attributes Attributes can provide additional information about the HTML elements on your page and control their behaviour. Input: <tag_name attribute_name=\"value_value\">Content Enclosed</tag_name>. Output: • Attributes always come in name/value pairs like this: attribute_name=\"value\".
• Attributes are always added to the start tag of an HTML element. • Attribute values should always be enclosed in quotes. Double style quotes (“ ”) are the most common, but single style quotes (‘ ’) are also allowed. • In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John \"ShotGun\" Nelson' and vice-versa. Anchor tag The <a> tag defines a hyperlink, which is used to link from one page to another. Clicking on a link opens a new page may be on the same page or another. These web pages are connected using links. They give the ability to go to a different webpage without each time entering its URL. This kind of links are external links i.e., they help in connecting to external web pages. Links can also be internal which means that they will be linking the content within the same page. Eg: link to the top of the page or any link to any specific content on the page. By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red href Attribute The most important attribute of the element is the href attribute, whichindicates the link's destination. In other words, the href attribute is used to address the document to link to. Input: <a href=\"https://html.com/\">Visit this site</a>.
Output: 6.2.2 CSS What is CSS? CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides a supplementary feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL. CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications. The syntax for CSS is: selector { properties; }
ach property ends with a semicolon. Each property includes a CSS property name and a value, separated by a colon. Input: <!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html> Output: CSS Comments Just like HTML, CSS also contains comments and can be used to define the various sections of HTML element styles that can help in changes at later stage, easily. You can also describe where certain generic style(s) can be used. A CSS comment starts with /* and ends with */. Comments can also span multiple lines. Adding CSS To HTML Page The browser formats the HTML document based upon the information in the stylesheet. The browser access the stylesheets from the HTML
document itself. There are 3 ways to add CSS styles in your document. Each of them can contain multiple properties: • Inline styles • Internal styles • External styles Inline styles Inline stylesheet is applied directly to our HTML code using the style attribute. The inline stylesheet syntax contains properties written inside the style attribute. Multiple properties can be defined at a time. An inline style is used to apply a unique style for a single element Input: <!DOCTYPE html> <html> <body> <h1 style=\"color:blue;text-align:center;\">This is a heading</h1> <p style=\"color:red;\">This is a paragraph.</p> </body> </html> Output: Internal styles An internal or in-page stylesheet holds the CSS code for the web page. The internal stylesheet contains the styles for that HTML document only. They cannot be reused. Internal CSS can be applied using tag.
Input: <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: External styles External stylesheet, change the look of an entire website by changing just one file. The syntax is similar to internal stylesheets, but it is applied using an entirely different CSS file. It is saved with '.css' extension. Eg. 'styles.css'.
Input: <!DOCTYPE html> <html> <head> <link rel=\"stylesheet\" href=\"mystyle.css\"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> mystyle.css body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Output: • The rel defines the relationship with the linked document (here, favicon). • The href defines the location of the lined document (here, favicon). • The type defines the media type of the linked document (here, favicon) Selectors Selectors point to the HTML element which we want to style. We use selectors in internal and external stylesheets. There are mainly 3 types of selectors that are used to apply styles:
• Element selector • Class selector • Id selector • Grouping selector Specificity here defines which style will be applied when same multiple styles are applied on an element. If the specificity is same, then the latest rule is applied. Specificity order: inline > id selector > class selector > tag selector > browser default. Element Selector The element selector selects all elements with the specified element name. This will select all the elements in the HTML document. But most of the time we don't want this. So, to apply styles to only some elements we need to use some restrictions. We will look into this later in this section only. Input: <!DOCTYPE html> <html> <head> <style> body { background-color: #00FFFF; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> </body> </html>
Output: Class Selector The class selector selects multiple elements with a specific class attribute. To select elements with a specific class, write a period(.) character, followed by the name of the class. Input: <!DOCTYPE html> <html> <head> <style> p.hometown { background: yellow; } </style> </head> <body> <h1>Demo of the .class selector</h1> <p>My name is Donald.</p> <p class=\"hometown\">I live in Ducksburg.</p> </body> </html>
Output: Id Selector The id selector will select only one element with a specific id attribute. To select element with a specific id, write a hash(#) character, trailed by the name of the id. Input: <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id=\"para1\">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> Output:
Grouping Selectors It happens that most of the time that we use same css for multiple elements and we can't use too much classes. This would bring classes without any meaning in the scenario and would become difficult to manage. So, CSS provides with a grouping feature where you can apply CSS rules to multiple elements with the use of combination of either tag, class or id. For grouping, we use comma between the different selectors. Input: <!DOCTYPE html> <html> <head> <style> h1, h2, p { text- align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html> Output:
6.2.3 JAVASCRIPT What is JavaScript JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow clientside script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities. Data types There are 7 data types available in JavaScript. You need to remember that JavaScript is loosely typed (or dynamic language), so any value can be assigned to variables in JavaScript Number The number data type is used to represent positive or negative numbers with or without decimal place, or numbers written using exponential notation e.g., 1.5e-4 (equivalent to 1.5x10-4). The Number data type also includes some special values which are: Infinity, Infinity and NaN. Infinity denotes the mathematical Infinity ∞, which is greater than any number. var a = 25; // integer var b = 80.5; // floating-point number var c = 4.25e+6; // exponential notation, same as 4.25e6 or 4250000 var d = 4.25e-6; // exponential notation, same as 0.00000425 String The string data type is used to denote textual data (i.e., sequences of characters). Strings are created using single or double quotes surrounding one or more characters. var a = 'Hi there!'; // using single quotes var b = \"Hi there!\"; // using double quotes Boolean
The Boolean data type can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc. var isReading = true; // yes, I'm reading var isSleeping = false; // no, I'm not sleeping Boolean values also come as a result of comparisons in a program. The following example compares two variables var a = 2, b = 5, c = 10; alert(b > a) // Output: true alert(b > c) // Output: false Undefined The undefined data type can only have one value-the special value undefined. If a variable has been declared, but has not been assigned a value, has the value undefined. Var a; var b = \"Hello World!\" alert(a) // Output: undefined alert(b) // Output: Hello World! Null This is another special data type that can have only one value-the null value. A null value means that there is no value. It is not equivalent to an empty string (\"\") or 0, it is simply nothing. var a = null; alert(a); // Output: null var b = \"Hello World!\" alert(b); // Output: Hello World! b = null; alert(b) // Output: null
Symbol Symbol is a built-in object whose constructor returns a symbol primitive also called a Symbol value or just a Symbol that’s guaranteed to be unique. Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object. let sym1 = Symbol() let sym2 = Symbol('foo') let sym3 = Symbol('foo') Object The object is a complex data type that allows you to store collections of data. An object contains properties, defined as a key-value pair. A property key (name) is always a string, but the value can be any data type, like strings, numbers, Booleans, or complex data types like arrays, function and other objects. var emptyObject = {}; var person = {\"name\": \"Clark\", \"surname\": \"Kent\", \"age\": \"36\"}; // For better reading var car ={ \"modal\": \"BMW X3\", \"color\": \"white\", \"doors\": 5 } Variables JavaScript declare a variable in different ways by using different keywords. Each keyword holds some specific reason or feature in JavaScript. Basically, declaration of variables can be done in three different ways by using var, let and const keyword. Each keyword is used in some specific conditions.
var This keyword is used to declare variable globally. If you used this keyword to declare variable then the variable can accessible globally and changeable also. It is good for a short length of codes, if the codes get huge then you will get confused. <script>varabc = \"Hello World\";console.log(abc);</s cript> let This keyword is used to declare variable locally. If you used this keyword to declare variable then the variable can accessible locally and it is changeable as well. It is good if the code gets huge. <script>if(tr ue) { let abc = \"Hello World\";console.log(abc); } /* This will be error and show geeks is not defined */console.log(abc); </script> const This keyword is used to declare variable locally. If you use this keyword to declare a variable then the variable will only be accessible within that block similar to the variable defined by using let and difference between let and const is that the variables declared using const values can’t be reassigned. So, we should assign the value while declaring the variable. <script> Const abc = \"Hello World\";console.log(abc);</scrip t>
Operators An operator is capable of manipulating a certain value or operand. Operators are used to perform specific mathematical and logical computations on operands. In JavaScript operators are used for compare values, perform arithmetic operations etc. There are various operators supported by JavaScript: • Arithmetic Operators • Assignment Operators • Increment and Decrement Operator • Comparison Operators • Logical Operators • • Bitwise Operators Arithmetic Operators Arithmetic operators take numerical values as operands and evaluates it to a single numerical value. Some of the arithmetic operators are Addition (+): It adds the numerical operands and is also used for string concatenation. It will add numerical and string operand to a number if the string can be converted to a number. Else it concatenates them. Y = 5 + 5 gives Y = 10 Y = “Welcome\" + \"to\" + \"JavaScript\" gives Y = \"WelcometoJavaScript” Y = \"Welcome\" + 2 + \"JavaScript\" gives Y = \"Welcome2JavaScript\" Subtraction (-) - It subtracts the two numeric operands. If any one of them is not a number or cannot be converted to number, then 'NaN' is printed. Y = 5 - 3 gives Y = 2 Division (/) - It divides the first operand with the second operand. If the second operator is '+0' or '-0', then 'Infinity' and '-Infinity' are printed respectively. If they are not divisible 'NaN' is printed.
Y = 5 / 5 gives Y = 1 Multiplication (*) - It multiplies the two numeric operands. Any number multiplied with Infinity prints 'Infinity'. If the other number is zero, then 'NaN'is printed. Y = 5 * 5 gives Y = 25 Remainder (%) - It finds the remainder left after division. If one of the operands is 'Infinity' or 'NaN', then 'NaN' is printed. A % B means remainder (A/B) Y = 5 % 4 gives Y = 1 Assignment Operators Assignment operators are used to assign value of the right operand/expression to the left operand. The simplest assignment operator is equal (=), which assigns the right operand value to left operand. Other assignment operators are shorthand operations of other operators. They are called compound assignment operators. Some of them with their meaning (i.e. the extended version of these operations) are provided below: Addition Assignment The simple assignment operator (=) is used to assign a value to a variable. The assignment operation evaluates to the assigned value. Chaining the assignment operator is possible in order to assign a single value to multiple variables. If A = 10 and Y = A then Y = 10 Division Assignment
The division assignment operator (/=) divides a variable by the value of the right operand and assigns the result to the variable. Y /= A is equivalent to Y = Y / A Exponentiation Assignment The exponentiation assignment operator (**=) raises the value of a variable to the power of the right operand. let a = 3; console.log(a **= 2); // expected output: 9 console.log(a **= 0); // expected output: 1 console.log(a **= 'hello'); // expected output: NaN Right Shift Assignment The right shift assignment operator (>>=) moves the specified amount of bits to the right and assigns the result to the variable. let a = 5; // 00000000000000000000000000000101 a >>= 2; // 00000000000000000000000000000001 console.log(a); // expected output: 1 let b = -5; // -00000000000000000000000000000101 b >>= 2; // - 00000000000000000000000000000010 console.log(b); // expected output: -2 Bitwise XOR assignment
The bitwise XOR assignment operator (^=) uses the binary representation of both operands, does a bitwise XOR operation on them and assigns the result to the variable. let a = 5; // 00000000000000000000000000000101 a ^= 3; // 00000000000000000000000000000011 console.log(a); // 00000000000000000000000000000110 // expected output: 6 Increment and Decrement Operator The increment operator increments the value of the numeric operand by one. The decrement operator decreases the value of the numeric operand by one. Postfix increment operator The increment operator (++) increments (adds one to) its operand and returns a value. let x = 3; y = x++; // y = 3 // x = 4 Postfix decrement operator The decrement operator (--) decrements (subtracts one from) its operand and returns a value. let x = 3; y = x--; // y = 3 // x = 2
Prefix increment operator Increment operator increments and returns the value after incrementing. let a = 2; b = ++a; // a = 3 // b = 3 Prefix decrement operator Decrement operator decrements and returns the value after decrementing. let a = 2; b = --a; // a = 1 // b = 1 Comparison operators A comparison operator compares its operands and returns a Boolean value based on whether the comparison is true. Equality The equality operator (==) checks whether its two operands are equal, returning a Boolean result. Unlike the strict equality operator, it attempts to convert and compare operands that are of different types. 1 == 1; // true \"hello\" == \"hello\"; // true
Inequality The inequality operator (!=) checks whether its two operands are not equal, returning a Boolean result. Unlike the strict inequality operator, it attempts to convert and compare operands that are of different types. 1 != 2; // true \"hello\" != \"hola\"; // true 1 != 1; // false \"hello\" != \"hello\"; // false Greater than The greater than operator (>) returns true if the left operand is greater than the right operand, and false otherwise. console.log(5 > 3); // true console.log(3 > 3); // false console.log(3 > 5); // false Greater than or equal The greater than or equal operator (>=) returns true if the left operand is greater than or equal to the right operand, and false otherwise. console.log(5 >= 3); // true console.log(3 >= 3); // true console.log(3 >= 5); // false Less than The less than operator (<) returns true if the left operand is less than the right operand, and false otherwise. console.log(5 < 3); // false console.log(3 < 3); // false console.log(3 < 5); // true
Less than or equal The less than or equal operator (<=) returns true if the left operand is less than or equal to the right operand, and false otherwise. console.log(5 <= 3); // false console.log(3 <= 3); // true console.log(3 <= 5); // true Logical Operators The logical operators use Boolean values as their operands. These operands are mostly expressions that evaluate to 'true' or 'false' Logical AND The logical AND (&&) operator (logical conjunction) for a set of Boolean operands will be true if and only if all the operands are true. Otherwise, it will be false. const a = 3; const b = -2; console.log(a > 0 && b > 0); // expected output: false Logical OR The logical OR (||) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true. It is typically used with Boolean (logical) values. When it is, it returns a Boolean value. However, the || operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value. const a = 3; const b = -2; console.log(a > 0 || b > 0); // expected output: true
Logical NOT The logical NOT (!) operator (logical complement, negation) takes truth to falsity and vice versa. It is typically used with boolean (logical) values. When used with non-Boolean values, it returns false if its single operand can be converted to true otherwise, returns true. const a = 3; const b = -2; console.log(!(a > 0 || b > 0)); // expected output: false Bitwise Operators The bitwise operators treat operands as sequence of 32 bits binary representation (0and 1). Bitwise AND The bitwise AND operator (&) returns a 1 in each bit position for which the corresponding bits of both operands are 1s. 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) Bitwise OR The bitwise OR operator (|) returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s.
9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) Bitwise XOR The bitwise XOR operator (^) returns a 1 in each bit position for which the corresponding bits of either but not both operands are 1s. 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) Bitwise NOT The bitwise NOT operator (~) inverts the bits of its operand. Like other bitwise operators, it converts the operand to a 32-bit signed integer. 9 (base 10) = 00000000000000000000000000001001 (base 2) -------------------------------- ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) Left shift The left shift operator (<<) shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right. 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
Right shift The right shift operator (>>) shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the left most bit are shifted in from the left. Since the new leftmost bit has the same value as the previous left most bit, the sign bit (the left most bit) does not change. Hence the name \"sign-propagating\". 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) Unsigned right shift The unsigned right shift operator (>>>) (zero-fill right shift) shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative. Unlike the other bitwise operators, zero-fill right shift returns an unsigned 32-bit integer. 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) Conditionals Statements Conditional statements are used to run different set of statements according to the conditions. This means that based upon different conditions, we can perform different actions. These are same as used in other languages. if Statements The 'if' statement specifies block of statements (JavaScript code) that gets executed when the 'condition' specified in the 'if' statement evaluates to true.
if (condition) { ... STATEMENTS ... } First, the condition is evaluated and if it is true, then the statements inside it are executed. Else if condition is false, statements inside 'if' are not executed. if-else Statements The 'if' statement specifies block of statements (JavaScript code) that gets executed when the 'condition' specified in the 'if' statement evaluates to true. Else, if the condition is false then the statements inside the 'else' block if (condition) { ... STATEMENTS ... } else { ... SOME OTHER STATEMENTS ... } else-if Statements The above two works for only two options i.e., whether the condition is true or false. Using else-if we can define more than one conditions and forma chain. The first condition that returns true gets executed, else the last 'else' block is executed. if (condition-1) { ... STATEMENTS ... } else if (condition-2) { ... SOME OTHER STATEMENTS ... } ... ... ... else if (condition-(n)) { ... SOME OTHER STATEMENTS ... } else { ... EXECUTE IF NO CONDITION IS SATISFIED ... }
Now the first condition is checked. If it evaluates to true, it gets executed and other 'else-if' blocks are not checked. If the first condition is false, then the second condition is checked. Like this, each 'if' condition is checked one by one, until one is true or 'else' block is reached. If any one of them is true, the block associated with it gets executed. Else the 'else' block is executed. switch Statements The switch statements are similar to else-if statements, but works on a single expression. This expression evaluates to different values which decide which block of code needs to be executed. switch (expression) { case choice1: Run if expression=choice1 break; case choice2: run if expression=choice2 break; ... ... ... case choice(n): run if expression=choice(n) break; default: run if no choice is found } The expression gives some result which is checked against the choices. If any of them matches, its set of statements get executed. Else the last 'default' block gets executed. We have provided a 'break;' statement after each case is completed, to top the execution of the 'switch' block. If break is not present, then the cases after the one that matches also gets executed until 'break;' is found or switch block does not end. Loops Loops are used to do something repeatedly. There are many different kinds of loops, but they almost do the same thing. Their use vary on the type of situation, where one loop will be easy to implement over another.
for Statement A for loop is used to repeat something until the condition evaluates to false. for( [initializationStatement] ; [condition] ;[updateStatement]) { ... STATEMENTS ... } • The initialization Statement used to initialize loop counters. • The condition is the expression that is evaluated to Boolean value 'true' or 'false'. • The update Statement is used to update the loop counters. while Statement The while statement executes the statements until the condition is not false. while(condition ) { ... STATEMENTS ... } First, the condition is evaluated and if it is true, then the statements are executed and again the condition is tested. The execution stops when condition returns false. do...while Statement The do-while loop is similar to while loop, except that the statements are executed at least once. do { ... STATEMENTS ... } while( condition ); First, the statements are executed without checking the condition. After that the condition is checked and if it is true the statements are executed again.
6.3 Summary Today we have learnt: • How HTML tags are used to make basic websites • CSS style use for Look and formatting of a document which is written in a markup language • Adding interactive behaviour to web pages using Java Script 6.4 Glossary • URL: It is stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web • XML: (Extensible Markup Language) is a markup language similar to HTML, but without predefined tags to use. • SVG: Scalable Vector Graphics is an XML-based vector image format for two- dimensional graphics with support for interactivity and animation • XUL: Which stands for XML User Interface Language, is a user interface markup language 6.5References • https://www.javatpoint.com/what-is-html • https://www.tutorialspoint.com/html/index.htm • https://www.w3schools.com/w3css/defaulT.asp • https://www.w3schools.com/js/default.asp
Search
Read the Text Version
- 1 - 45
Pages:
