Skip to content

Latest commit

 

History

History
206 lines (141 loc) · 4.98 KB

class-03.md

File metadata and controls

206 lines (141 loc) · 4.98 KB
Raw

Class 03

Lists

img

HTML List Tags

Tag Description
< ul> Defines an unordered list
< ol> Defines an ordered list
< li> Defines a list item
< dl> Defines a description list
< dt> Defines a term in a description list
< dd> Describes the term in a description list
  • Ordered HTML List An ordered list starts with the < ol> tag. Each list item starts with the < li> tag.

The list items will be marked with numbers by default:

Example

<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
  • Unordered HTML List An unordered list starts with the < ul> tag. Each list item starts with the < li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

Boxes

  • CSS box-sizing Property

Box-decoration-break: slice|clone|initial|inherit|unset;

  • Property Values
Value Description
slice Default. Box decorations are applied to the element as a whole and break at the edges of the element fragments
clone Box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
  • Property Values
Value Description
content-box Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
border-box The width and height properties (and min/max properties) includes content, padding and border
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
  • CSS Border Style The border-style property specifies what kind of border to display.

1- dotted - Defines a dotted border

2- dashed - Defines a dashed border

3- solid - Defines a solid border

4- double - Defines a double border

5- groove - Defines a 3D grooved border. The effect depends on the border-color value

6-ridge - Defines a 3D ridged border. The effect depends on the border-color value

7-inset - Defines a 3D inset border. The effect depends on the border-color value

8- outset - Defines a 3D outset border. The effect depends on the border-color value

9- none - Defines no border

10- hidden - Defines a hidden border

JavaScript Booleans

  • Boolean Values

Very often, in programming, you will need a data type that can only have one of two values, like

YES / NO

ON / OFF

TRUE / FALSE

For this, JavaScript has a Boolean data type. It can only take the values true or false.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

  • Use if to specify a block of code to be executed, if a specified condition is true
  • Use else to specify a block of code to be executed, if the same condition is false
  • Use else if to specify a new condition to test, if the first condition is false
  • Use switch to specify many alternative blocks of code to be executed

Example

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

JavaScript Switch Statement

The JavaScript Switch Statement Use the switch statement to select one of many code blocks to be executed.

Syntax

switch(expression) {

  case x:

    // code block

    break;

  case y:

    // code block

    break;

  default:

    // code block
}

JavaScript For Loop

  • The For Loop

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

  • Statement 1 is executed (one time) before the execution of the code block.

  • Statement 2 defines the condition for executing the code block.

  • Statement 3 is executed (every time) after the code block has been executed.

Example
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}