Code 201: Class 02 - Basics of HTML, CSS & JS

HTML Chapter 2: Pages 40-61

Structural Markup used to describe headings and paragraphs Semantic Markup provides extra information and emphasis on certain parts of a sentence or paragraph

Text Emphasis, Line Breaks, and Horizontal Rules

 Bolds text
 italic
 Superscript
 Subscript
  Creates a line break in the text
<hr /> Creates a horizontal rule

White space condensing multiple spaces in a row are condensed to a single space, multiple blank rows are condensed to a single blank row

Semantic Tags

 Emphasis on text between the tags, browser will default to bold
 Emphasis that subtly changes the meaning of a sentence, browser defaults to italics
<blockquote></blockquote> Used for quotes that take up more than one line, browsers will likely indent text by default
<q></q> Inline quote, browser should add in quotes, but not all do
<abbr></abbr> Abbreviation tag shows full description of a short form
- Example: <abbr title="National Aeronautics and Space Administration">NASA</abbr>
<cite></cite> Citation used to indicate where a citation if from, will render in italics
<dfn></dfn> Definition, used when first explaining new terminology
<address></address> Contains the contact information for the author of the page
<ins></ins> Used to show content that was inserted into a page
<del></del> Used to show content that was deleted from a page
<s></s> Element that indicates something that is no longer accurate or relevant but should not be deleted, shown as strikethrough text

HTML Chapter 10: Pages 226-245

CSS allows the programmer to create rules that determine how each element box is presented

Associates a style rule with an html element
- Example: p{font-family: Arial;}
 - p selector, in this case indicating all  tags
 - {font-family: Arial;} declaration, setting text font to arial
 - font-family: property, indicates the aspect of the element to be controlled
 - arial; value, specific setting to be used

To link style.css doc to index.html, use similar code in the html doc:

<head>
    <link href="css/example.css" type="text/css" rel="stylesheet" />
</html>

To control styles in an html doc, use <style></style> tags

<style type="text/css">
    body{
        font-family: arial;
        background-color: rgb(255,255,255);
    }
</style>

Full chart of css selectors can be found on page 238

CSS Rule Cascade

Last Rule if two selectors are identical, the one furthest down the document will take precedence
Specificity more specific rules out rank less specific
Important !important can add the !important after any property value to force it to take precedence
- Example: p{color: blue !important;}

JS Chapter 2: Pages 53-84

Statement each individual step that the computer is intended to follow, ends with a ;

Comments programmer side notes that are used to convey code intent for easier debugging and future updating

In VS Code use cmd+/ to automatically comment a line

Variable a data storage unit

Must be declared before they can be used
var quantity; declaring the variable named quantity
quantity = 3; assigning the value 3 to the variable quantity

Data Types

Numeric Data Types	String Data Types	Boolean Data Types
Example = `0.75`	Example = `'Hi, Ivy!'`	Example = `true`
For tasks involving counting or sums	Enclosed in a pair of single or double quotes used for working with text	True / False

Strings must always be surrounded by quotes either "string" or 'string' but not a combination. It must also be on one line.

6 Rules for naming variables

must begin with a letter, dollar sign $, or underscore _
no dashes -, or dots . are allowed in a name
no keywords or reserved words are allowed
names are case sensitive
create a name that represents the information it stores
use camelCase for names with more than one word

Array a variable that stores a list of values

Programmer does not have to specificity how many variables it will hold
Declare an array similar to other variables, but assign the value using [] and comma separated items
- Example: var colors = ['white', 'black', 'custom']; this format is known as an array literal, this is the preferred method
- Example: var colors = new Array('white', 'black', 'custom'); this format is know as an array conductor
Can use different data types in the same array
Items in an array are automatically assigned an index number indicating its position, count starts with 0 not 1
- From the example above: Index 0 is 'white', 1 is 'black', and 2 is 'custom'
To access a specific item in an array use the form arrayName[index number]
- Example: var itemThree = colors[2] sets variable itemThree to 'custom'
Number of items in an array is a property of each array to access it use arrayName.length;
- Example: var numColors = colors.length;
To change a specific value in an array arrayName[index number] = 'new value';
- Example: colors[2] = 'beige'; changes the third array item from 'custom' to 'beige'

Expressions evaluate into a single value

First type are expressions that just assign a value to a variable
- Example: var color = 'beige'; The value of color is now beige
The second type are expressions that use two or more values to return a single value
- Example: var area = 3 * 2 The value of area is now 6

Operators allow programmers to create a single value from one or more values

Assignment operators *assign a value to a variable
- Example: var color = 'beige'; The value of color is now beige
Arithmetic operators perform basic math
- Example: area = 3 * 2 The value of area is now 6
String Operators combine two strings
- Example: greeting = 'Hi ' + 'Molly';
Comparison Operators compare two values and return true or false
- Example: buy = 3 > 5; Value of buy is now false
Logical Operators combine expressions and return true or false
- buy = (5>3) && (2<4); The value of buy is now true

Arithmetic Operators JS contains the standard operators +, -, /, * which can be used with numbers as well as the following special operators

++ (Increment) adds one to the current number
-- (Decrement) subtracts one from the current number
% (Modulus) divides two values and returns the remainder example: 10 % 3 = 1

String Operator just one operator + used to join strings on either side

Concatenation the joining of two or more strings to form one new string

Mixing numbers and strings

Quotes around a number (#) create a string, not a numeric number type. Arithmetic operators cannot be used on strings
- Example: '2' + '2' = '22' Adding strings concatenates them, it does not add.
- Example: 12 + 'Bob' = '12Bob' Adding a number to a string, creates a new concatenated string
- Example: 'seven' * 'nine' = NaN (Not a Number) attempting to use arithmetic operators on strings will return a value called NaN

JS Chapter 2: Pages 145-162

Comparison operators can compare one value in the script to its expected value and result boolean

== Is Equal To compares two values (numbers, strings, or booleans) to see if they are the same
- 'ABC' == 'DEF' returns false
- 'ABC' == 'ABC' returns true
!= Is Not Equal To compares two values to see if they are not equal
- 'abc' != 'def' returns true
- 'abc' != 'abc' returns false
=== Strict Equal To compares two values to see if both their value and data type are the same
- '3' === 3 returns false not same data type
- '3' === '3' returns true
!== Strict Not Equal To compares two value to confirm that both the data type and value are not the same
- '3' !== 3 returns true not the same data type or value
- '3' !== '3' returns false same data type and value
> Greater Than checks to see if the number on the left is greater than the one on the right
- 4 > 3 returns true
- 3 > 4 returns false
< Less Than checks to see if the number on the left is less than the one on the right
- 4 < 3 returns false
- 3 < 4 returns true
>= Greater Than or Equal TO checks if the number on the left is greater than or equal to the number on the right
- 4 >= 3 returns true
- 3 >= 4 returns false
- 3 >= 3 returns true
<= Less Than or Equal TO checks if the number on the left is less than or equal to the number on the right
- 4 <= 3 returns false
- 3 <= 4 returns true
- 3 <= 3 returns true

Logical Operators

&& Logical And tests more than one condition
- ((5 < 2) && (2 >= 3)) returns false
|| Logical Or tests for at least one condition being true
- ((5 < 2) || (2 >= 3)) returns false
- ((5 < 2) && (2 <= 3)) returns true
! Logical Not inverts a single boolean value
- !(2 < 1) returns true

Short Circuit Evaluation logical evaluations evaluate from left to right and will stop as soon as they are satisfied of the result

false && anything returns false without evaluating anything because both values cannot be true
true || anything returns true without evaluating anything at least one of the values is true

If Statement runs the code in the code block if the if statement is true If Else Statement runs the code in the if code block if true otherwise runs code in the else block

if(score >= 50) {
    congratulate();
} else {
    encourage();
}

Additional Resources: http://chris.beams.io/psots/git-comit/

Commit messages should have a plan to incorporate the following characteristics

Style agree on items like markup syntax, wrap margins, grammar, capitalization, punctuation, spell things out
Content agree on what should and should not be in the body of the commit message
Metadata agree on how tracking IDs, pull request numbers, and other items be referenced

Correct commit subject lines will work in the following format

If applied, this commit will your subject line here

Return to reading-notes Deployed Site

Return to reading-notes Mark Down