reading-notes

Welcome to Read: 02

Read: 02 “HTML Text, CSS Introduction, and Basic JavaScript Instructions”

In this Read: 02, I will talk about those topics:

Text.
Introducing CSS.
Basic JavaScript Instructions.
Decisions and Loops.

Text
When you are ready to build up your page you will write some texts, and those text should be stylized to be more attractive for the user to read it.

So, what are the main concepts here?
Structural markup: the elements that you can use to describe both headings and paragraphs. Semantic markup: which provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation.[1]

Structural markup
We have many structural markup in the Html and CSS, we will mention some of them here.

Headings
- We use the letter h with numbers from 1 to 6, to style the header.(<h1>,<h2>,<h2>,<h4>,<h5> and <h6>)
```
  <h1> This is h1 header </h1>
```
  This is h1 header
```
  <h6> This is h6 header </h6>
```
  This is h6 header
  
  </span>
Paragraphs
- We use the <p> tag for the paragraph.
```
  <p>
  This is a paragraph
  </p>
```
  </span>
Bold & Italic
- We use the <b> for Bold and <i> for Italic.
  </span>

Semantic markup
We have many Semantic markup in the Html and CSS, we will mention some of them here.

Strong and Emphasis
- We use the <strong> tag to indicate that its content has strong importance.
```
  <strong>
  This is a important text.
  </strong>
```
  This is a important text.
- We use <em> tag to indicate emphasis that subtly changes the meaning of a sentence.[2]
```
  <em>
  This is demo
  </em>
```
  This is demo

</span>

Quotations
- We use the <blockquote> for longer quotes that take up an entire paragraph.[3]
```
  <blockquote>
  <p>
  This is a blockquote
  </p>
  </blockquote>
```
  This is a blockquote
- We use the <q> or shorter quotes that sit within a paragraph.[4]
```
  <p>
  This is <q>a short quote</q>
  </p>
```
  This is “a Short quote” </span> —

Introducing CSS
When you bulit your html page, you of course want it to look good when someone visit it, so here come the CSS.

CSS allows you to create rules that specify how the content of an element should appear.[5]

We will show you a brief of CSS elemnts:

  ```
  p {
      font-family:Courier New; 
  }
  ```   > p is the selector.<br>   > {} between them is the declaration.<br>   > font-family is a property.<br>   > Courier New is a value. </span> 

You can use CSS externally or internally:
- Externally:
```
  <link href="css/styles.css" type="text/css"
  rel="stylesheet" />
```
  <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.[6]
  href This specifies the path to the CSS file.
  type This attribute specifies the type of document being linked to.[6]
  rel This specifies the relationship between the HTML page and the file it is linked to.[6]
  </span>
- Internally:
```
  <style>
  font-family:Courier New; 
  font-size:15px;
  </style>
```
  <style> include CSS rules within an HTML page, which usually sits inside the <head> element of the page. </span>
There are many way to select element to apply the CSS on them, they called selector[7]:

Selector

Basic JavaScript Instructions
Now to make your page live and it can interact with the user, you should use JavaScript.

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.[8]

In the js we have a lot of concepts that we used here. So, we will mention some of them.

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.[9]
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.[10]
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.[11]
- var name = "Shady";
  
  name is the variable here, which contain the string value "Shady"
- There is six rules to name the variables are shown below.

Naming

</span>

Data Types:
JavaScript distinguishes between numbers, strings, and true or false values known as Booleans.[12]
- Numeric: var num = 5;
- String: var name = “Shady”;`
- Boolean: var checkIf = true; </span>
Arrays:
An array is a special type of variable. It doesn’t just store one value; it stores a list of values.[13]
- Creating an array:
```
  var colors;
  colors = ['white', 'black'];
```
- Accessing items in an array:
```
  var itemThr ee;
  itemTwo = colors [1] ;
```
- Number of items in an array:
```
  var numColors ;
  numColors = colors.length;
```
  </span>
Expressions:
An expression evaluates into (results in) a single value. Broadly speaking there are two types of expressions.[14]
- Expressions that just assign a value to a variable:
```
  var color = 'blue';
```
- Expressions that use two or more values to return a single value:
```
  var speed = 5 * 6;
```
  </span>
Operators:
Expressions rely on things called operators; they allow programmers to create a single value from one or more values.[15]

Operators </span>

Decisions and Loops
The code can take more than one path, which means the browser runs different code in different situations. Here we will learn how to create and control the flow of data in the scripts to handle different situations.

Decisions making:
There are often several places in a script where decisions are made that determine which lines of code should be run next.[16]
There are two components to a decision:
- An expression is evaluated, which returns a value.
- A conditional statement say what to do in a given situation.
```
  If (name == "Shady"){
      alert("Hi",name);
  } else {
      alert("You are not Shady");
  }
```
  (name == “Shady”) This is the conditional statement. </span>
Comparison Operators:
- Is equal to (==) :
  This operator compare two vaules (numbers, string or booleans) to see if they are the same value.
  - "Good" == "Bad" , it’s false.
- Is not equal to (!=) :
  This operator compare two vaules (numbers, string or booleans) to see if they are not the same value.
  - "Good" != "Bad" , it’s true.
- Strict equal to (===) :
  This operator compare two vaules (numbers, string or booleans) to see if they are the same value and type.
  - "Good" === "Bad" , it’s fasle.
- Strict not equal to (!==) :
  This operator compare two vaules (numbers, string or booleans) to see if they are not the same.
  - "Good" !== "Bad" , it’s true.
- Greater than (>) :
  This operator check if the left side is greater than than the rgiht side.
  - ( 5 > 4 ) , it’s true.
- Less than (<) :
  This operator check if the left side is less than than the rgiht side.
  - ( 4 < 5 ), it’s true.
- Greater than or equal to(>=) :
  This operator check if the left side is greater than than or eqaul the rgiht side.
  - ( 5 >= 5 ) , it’s true.
- Less than or equal to (<=) :
  This operator check if the left side greater than than or eqaul the rgiht side.
  - ( 4 <= 2 ) , it’s true.

</span>

Logical Operators:
- Logical and ( && ) :
  This operator test more than one condition.
  - ((5 < 5) && (5 >= 5)) , it’s false.
- Logical or ( || ) :
  This operator test at least one condition.
  - ((5 < 5) || (5 >= 5)) , it’s true.
- Logical not ( ! ) :
  This operator takes a single boolean value an invert it.
  - !(5 >= 5) , it’s fasle.

Read	Title	ToGo
Read: 01	Introductory HTML and JavaScript
Read: 02	HTML Text, CSS Introduction, and Basic JavaScript Instructions
Read: 03	HTML Lists, CSS Boxes, JS Control Flow
Read: 04	HTML Links, CSS Layout, JS Functions
Read: 05	HTML Images; CSS Color & Text
Read: 06	JS Object Literals; The DOM
Read: 07	HTML Tables; JS Constructor Functions
Read: 08	More CSS Layout
Read: 09	Forms and Events
Read: 10	JS Debugging
Read: 11	Assorted Topics
Read: 12	Docs for the HTML canvas Element & Chart.js
Read: 13	Local Storage
Read: 14a	CSS Transforms, Transitions, and Animations
Read: 14b	What Google Learned About Teams

Number	References
[1]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 41). Indianapolis, IN: John Wiley & Sons.
[2]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 51). Indianapolis, IN: John Wiley & Sons.
[3]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 52). Indianapolis, IN: John Wiley & Sons.
[4]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 52). Indianapolis, IN: John Wiley & Sons.
[5]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 227). Indianapolis, IN: John Wiley & Sons.
[6]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 235). Indianapolis, IN: John Wiley & Sons.
[7]	Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p. 238). Indianapolis, IN: John Wiley & Sons.
[8]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 54). John Wiley & Sons.
[9]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 56). John Wiley & Sons.
[10]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 57). John Wiley & Sons.
[11]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 58). John Wiley & Sons.
[12]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 62). John Wiley & Sons.
[13]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 70). John Wiley & Sons.
[14]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 74). John Wiley & Sons.
[15]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 75). John Wiley & Sons.
[16]	Duckett, J. (2014). JavaScript & JQuery: Interactive front-end web development. In JavaScript & JQuery: Interactive Front-End Web Development (p. 148). John Wiley & Sons.

reading-notes

Software Development Reading Notes

This is h1 header

This is h6 header