View on GitHub

reading-notes

Reading Notes about Markdown-Html-Css-JavaScript

Class 02

Text

1- HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with the < h1> to < h6> tags.

< h1> defines the most important heading. < h6> defines the least important heading.

Example

< h1>Heading 1< /h1>

< h2>Heading 2< /h2>

< h3>Heading 3< /h3>

< h4>Heading 4< /h4>

< h5>Heading 5< /h5>

< h6>Heading 6< /h6>

HTML Formatting Elements

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text 

HTML < sup> Tag

Example

Superscript text:

<p>This text contains <sup>superscript</sup> text.</p>

Definition and Usage The < sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].

HTML < sub> Tag

Example Subscript text:

 <p>This text contains <sub>subscript</sub> text.</p>

Definition and Usage The _{tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
____}

Line Breaks & Horizontal Rules

< br />

As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag < br />. Line Breaks &

< hr />

To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the < hr /> tag. There are a few elements that do not have any words between an opening and closing tag. They are known as empty elements and they are written differently. An empty element usually has only one tag. Before the closing angled bracket of an empty element there will often be a space and a forward slash character. Some web page authors miss this out but it is a good habit to get into. __

Strong & Emphasis

< strong>

The use of the < strong> element indicates that its content has strong importance. For example, the words contained in this element might be said with strong emphasis. By default, browsers will show the contents of a < strong> element in bold.

< em>

The < em> element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an < em> element in italic. _____

Quotation

< blockquote>

The < blockquote> element is used for longer quotes that take up an entire paragraph. Note how the < p> element is still used inside the < blockquote> element. Browsers tend to indent the contents of the < blockquote> element, however you should not use this element just to indent a piece of text — rather you should achieve this effect using CSS.

< q>

The < q> element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the < q> element, however Internet Explorer does not — therefore many people avoid using the < q> element. Both elements may use the cite attribute to indicate where the quote is from. Its value should be a URL that will have more information about the source of the quotation. _____

HTML < abbr> Tag

Example An abbreviation is marked up as follows:

The WHO</>abbr> was founded in 1948. More “Try it Yourself” examples below.

Definition and Usage The < abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. ___ # Introducing CSS ## CSS Tags Selectors

“*’ /all elements
divall div tags
div,pall divs and paragraphs /div pparagraphs inside divs
div > /pall p tags, one level deep in div
div + pp / tags immediately after div
div ~ pp/ tags preceded by div
.class /nameall elements with class
#id /nameelement with ID
div.classname/divs with certain classname
div#idname /div with certain ID
#idname *all elements inside #idname ____
Pseudo classes

a:linklink in normal state

a:activelink in clicked state

a:hoverlink with mouse over it

a:visitedvisited link

p::after{content:”yo”;}add content after p

p::beforeadd content before p

input:checkedchecked inputs

div:emptyelement with no children

p::first-letterfirst letter in p

Attribute selectors

a[target]links with a target attribute

a[target=”_blank”]links which open in new tab

[title~=”chair”]title element containing a word

[class^=”chair”]class starts with chair

[class

=”chair”]class starts with the chair word

[class*=”chair”]class contains chair

[class$=”chair”]class ends with chair

input[type=”button”]specified input type __

JAVASCRIPT

___

JavaScript Objects

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car:

var car = {type:”Fiat”, model:”500”, color:”white”};

–

Object Methods Objects can also have methods.

Methods are actions that can be performed on objects.

Methods are stored in properties as function definitions.

Example

var person = { firstName: “John”, lastName : “Doe”, id : 5566, fullName : function() { return this.firstName + “ “ + this.lastName; } };
The this Keyword In a function definition, this refers to the “owner” of the function.

In the example above, this is the person object that “owns” the fullName function.

In other words, this.firstName means the firstName property of this object.

Read more about the this keyword at JS this Keyword.

Accessing Object Methods You access an object method with the following syntax:

objectName.methodName()

Data types :

Numbers : int , long int, double etc .

Strings : “ some thing”

Char : ‘c’

Boolean : T ,F (1,0) __

The variables :

Var …name… and then the value .

Ex .

String :

number:

__

how can I show the value of a variable ?

Consol.log (age) .. consol.log (variable name)

Boolean : Var checked = true ;

Consol.log( checked) …. The result will be( true )

Ex. The check box 😊 . ___

How can we start our js .

Using

**** (‘Class 04’) ;

Examples

 * console.log (‘Class 04’) ;

 * Var fname = ‘Aseel ’ we can use single quotation in Js ;
 Console.log (fname)

 * Var age = 22 ;
 Console.log (age)

 * Console.log(‘first name :’ + fname);
  (the result will be first name : Aseel)

 * Var Female = true ;
Console.log (Female)

* Console.log(‘first name :’ + fname + ’ age ’+ age +’is Female’+ Female );

Note :

Console.log (‘5’+5+5) the result will be 555 . as a String because the first parameter was a string .. if it was an integer for example the result will integer . ____

Comments :

Single line comments start with //. Multi-line comments start with /* and end with */.

Ps : “WE can do it using CTRL and forward slash on the keyboard ” . __

How can we print it directly in html not in th consol ?

’’’

’’’ ____

Another type to show a message to the user is Alert

Why the content will not shown untel we exit the alert ? ,

Bacouse , the execution is sequinntly line by line .

Note

If I have the result in the console and not shown in the html pages the I should know there’s a false in ordering code . Tf the result didn’t shown in both then I have error in my code .

So console is very important for developers to fix problems ,bugs And to check the outputs .
___

Prompt()

Function inside it we can add message Prompt(“Whats your name ? ”);

How can we use it ??

Var fname = Prompt(“Whats your name ? ”);

Console.log (fname);

3- Var fname = Prompt(“Whats your name ? ‘DEfoult’ ”); _____

SCRIPT

A script is a series of instructions that a computer can follow to achieve a goal.

JavaScript Arrays

JavaScript arrays are used to store multiple

1- values in a single variable.

Example

var cars = [“Saab”, “Volvo”, “BMW”];

2- Using the JavaScript Keyword new The following example also creates an Array, and assigns values to it:

Example

var cars = new Array(“Saab”, “Volvo”, “BMW”);

3- Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

var name = cars[0];

4- Changing an Array Element

This statement changes the value of the first element in cars:

cars[0] = “Opel”; ___

Expressions :

An expression evaluates into (results in) a single value. Broadly speaking there are two types of expressions.

1- ASSIGN A VALUE TO A VARIABLE

2- USE TWO OR MORE VALUES TO RETURN A SINGLE VALUE ___

JavaScript Date Objects

JavaScript Date Output

By default, JavaScript will use the browser’s time zone and display a date as a full text string:

Sun Feb 14 2021 02:39:37 GMT-0800 (Pacific Standard Time) .

Creating Date Objects Date objects are created with the new Date() constructor.

There are 4 ways to create a new date object:

1-new Date()

2- new Date(year, month, day, hours, minutes, seconds, milliseconds)

3- new Date(milliseconds)

4- new Date(date string)

5- new Date()

6- new Date() creates a new date object with the current date and time:

Example

var d = new Date(); Date objects are static. The computer time is ticking, but date objects are not.

new Date(year, month, …) new Date(year, month, …) creates a new date object with a specified date and time.

JavaScript Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Different Kinds of Loops JavaScript supports different kinds of loops:

for - loops through a block of code a number of times

for/in - loops through the properties of an object

for/of - loops through the values of an iterable object

while - loops through a block of code while a specified condition is true

do/while - also loops through a block of code while a specified condition is true

Comparison Operators

Operator	Comparisons	Description
Equal (==)	x == y	Returns true if the operands are equal.
Strict equal (===)	x === y	Returns true if the operands are equal and of the same type.
Not equal (!=)	x != y	Returns true if the operands are not equal.
Strict not equal (!==)	x !== y	Returns true if the operands are not equal and/or not of the same type.
Greater than (>)		x>y	Returns true if the left operand is greater than the right operand.
Greater than or equal (>=)	x>=y	Returns true if the left operand is greater than or equal to the right operand.
Less than (<)	x<y	Returns true if the left operand is less than the right operand.
Less than or equal (<=)	x<=y	Returns true if the left operand is less than or equal to the right operand.

Class 02

Text

1- HTML Headings

Example

HTML Formatting Elements

HTML < sup> Tag

HTML < sub> Tag

Line Breaks & Horizontal Rules

Strong & Emphasis

Quotation

HTML < abbr> Tag

Pseudo classes

Attribute selectors

JAVASCRIPT

JavaScript Objects

Data types :

The variables :

Ex .

how can I show the value of a variable ?

How can we start our js .

Note :

Comments :

How can we print it directly in html not in th consol ?

Another type to show a message to the user is Alert

Note

Prompt()

How can we use it ??

SCRIPT

JavaScript Arrays

Expressions :

JavaScript Date Objects

JavaScript Loops

Comparison Operators