Table of content

|Read No. | Name of chapter| |:———: |:————–:| |3|Lists| |3|Boxes| |3|Basic JavaScrit instructions| |3|Decisions and loops|

Lists

Ordered Lists

< ol >

The ordered list is created withthe < ol > element.

< li >

Each item in the list is placed between an opening < li > tag and a closing < /li > tag. (The li stands for list item.)

Unordered Lists

< ul >

The unordered list is created with the < ul > element.

< li >

Each item in the list is placed between an opening < li > tag and a closing < /li > tag. (The li stands for list item.)

Definition Lists

< dl >

The definition list is created with the < dl > element and usually consists of a series of terms and their definitions. Inside the < dl> element you will usually see pairs of < dt > and < dd > elements.

< dt >

This is used to contain the term being defined (the definition term).

< dd >

This is used to contain the definition

Nested Lists

You can put a second list inside an < li > element to create a sublist or nested list.

Boxes

Box Dimensions( width, height)

By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use the height and width properties.

The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size.

When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box.

When you use ems, the size of the box is based on the size of text within it. Designers have recently started to use percentages and ems more for measurements as they try to create designs that are flexible across devices which have different-sized screens.

Limiting Width (min-width, max-width)

Some page designs expand and shrink to fit the size of the user’s screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide.

Limitig Height (min-height, max-height)

In the same way that you might want to limit the width of a box on a page, you may also want to limit the height of it. This is achieved using the min-height and max-height properties.

Overflowing Content

overflow

The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of two values:

hidden: This property simply hides any extra content that does not fit in the box.

scroll: This property adds a scrollbar to the box so that users can scroll to see the missing content.

Border, Margin & Padding

Every box has three available properties that can be adjusted to control its appearance:

Border Width (border-width)

The border-width property is used to control the width of a border. The value of this property can either be given in pixels or using one of the following values:

• thin

• medium

• thick

####(You cannot use percentages with this property.)

You can control the individual size of borders using four separate properties:

• border-top-width

• border-right-width

• border-bottom-width

• border-left-width

You can also specify different widths for the four border values in one property, like so:

border-width: 2px 1px 1px 2px;

The values here appear in clockwise order: top, right, bottom, left.

Border Style (border-style)

You can control the style of a border using the border-style property. This property can take the following values:

• solid a single solid line

-[x] dotted a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap between each dot)

• dashed a series of short lines

• double two solid lines (the value of the border-width property creates the sum of the two lines)

• groove appears to be carved into the page

• ridge appears to stick out from the page

• inset appears embedded into the page

-[x] outset looks like it is coming out of the screen

-[x] hidden / none no border is shown

You can individually change the styles of different borders using: border-top-style, border-left-style, border-right-style, border-bottom-style

Border Color (border-color)

You can specify the color of a border using either RGB values, hex codes or CSS color names.

It is possible to individually control the colors of the borders on different sides of a box using: border-top-color, border-right-color, border-bottom-color, border-left-color

The border property allows you to specify the width, style and color of a border in one property (and the values should be coded in that specific order).

padding

The padding property allows you to specify how much space should appear between the content of an element and its border.

The value of this property is most often specified in pixels (although it is also possible to use percentages or ems).

You can specify different values for each side of a box using: padding-top, padding-right, padding-bottom, padding-left

Margin

The margin property controls the gap between boxes. Its value is commonly given in pixels, although you may also use percentages or ems.

Basic JavaScript Instructions

STATEMENTS

A script is a series of instructions that a computer can follow one-by-one. Each individual instruction or step is known as a statement. Statements should end with a semicolon.

COMMENTS

You should write comments to explain what your code does. They help make your code easier to read and understand. This can help you and others who read your code.

WHAT IS A VARIABLE?

A script will have to temporarily store the bits of information it needs to do its job. It can store this data in variables.

Variables: how to declare them

Before you can use a variable, you need to announce that you want to use it. This involves creating the variable and giving it a name. Programmers say that you Declare the variable.

Variables: how to assign them a value

Once you have created a variable, you can tell it what information you would like it to store for you. Programmers say that you assign a value to the variable.

DATA TYPES

JavaScript distinguishes between numbers, strings, and true or false values known as Booleans.

1- NUMERIC DATA TYPE: The numeric data type handles numbers.

2- STRING DATA TYPE: The strings data type consists of letters and other characters.

3- BOOLEAN DATA TYPE Boolean data types can have one of two values: true or false.

ARRAYS

An array is a special type of variable. It doesn’t just store one value; it stores a list of values.

CREATING AN ARRAY

You create an array and give it a name just like you would any other variable (using the var keyword followed by the name of the array).

The values are assigned to the array inside a pair of square brackets, and each value is separated by a comma. The values in the array do not need to be the same data type, so you can store a string, a number and a Boolean all in the same array.

Values in an array are accessed as if they are in a numbered list. It is important to know that the numbering of this list starts at zero (not one).

OPERATORS

Expressions rely on things called operators; they allow programmers to create a single value from one or more values.

JavaScript contains the following mathematical operators, which you can use with numbers. You may remember some from math class.

STRING OPERATOR

There is just one string operator: the+ symbol. It is used to join the strings on either side of it.

Decisions and Loops

Evaluating condition

You can evaluate a situation by comparing one value in the script to what ypu expect it might be. The resuklt will be a Boolean: true or false.

Examples

== (Is Equal to)

!= (Is not Equal to)

=== (Strict Equal to)

!== (Strict not Equal to)

> (Greater than)

< (Less than)

>-= (Greater than or Equal to)

<= (Less than or Equal to)

Logical operators

Comparison operators usually return single values of true or false. Logical operators allow you to compare the results of more than one comparison operator.

Examples:

&& (Logical and): This operator tests more than one condition.

II ( logical or): This operator tests at least one condition.

! (Logical not): this operator takes a single Boolean value and inverts it.

If statements

The if statement evaluates (or checks) a condation. If the condation evaluates to true, any statement in the subsequent code block are executed.

##If…Else statement

The If…else statement checks a condation. If resolves to true the first code block is executer. If the condation resolves to false the second code block is run instead.

Switch statements

Loops

Loops checks a condition. If it returns, a code block will run. Then the condition will be checked again and if it still returns true, the code block will run again. It repeats until the condition returns false. There are three common types of loops:

1. FOR: If you need to run code a specific number of times,use a for loops.

2. While: If you not know how many times the code should run, you can use a while loop.

Loop counters

A for loop uses a counter as a condition. This instructs the code to run a specified number of times.