Reading Notes
[Link Text](url)*text* or _text_**text** or __text__~~text~~~~***text***~~# = <H1>, ## = <H2>, and so on up to ###### for <H6>.* = Unordered- = Unordered+ = Unordered1. = OrderedTo quote a line of text use
>.
To quote a block of text or code, use ``` "fences" before and after.
To create a task list use the following
- [ ] Item (Incomplete)
- [x] Item (Complete)
To create a chart: Letter|1|2| —|—|— A|A1|A2 B|B2|B3
Chart code
Letter|1|2|
---|---|---
A|A1|A2
B|B2|B3
GitHub supports emoji :+1:! Here is an emoji cheat sheet.
Four primary features that make for a good text editor
Emmet is a shorthand language that is built into some text editors that allow the user to code in HTML and CSS much more quickly.
Preinstalled Text Editors (Typically very bare bones.)
3rd Party Tex Editors (Most provide some or all of the desirable features.)
IDE = Integrated Development Environment *a suite of software including text editor, file manager, compiler, and debugger
command arguments example: ls -l. This would list the contents of the current directory in long form (one item per line)./~ (tilde) home directory. (dot) current directory.. (dotdot) parent directoryTab Completion pressing the “tab” key will invoke the auto complete\ before the space to nullify it. is a hidden file. To hide or unhide simply add or remove a . at the begining of a file name.ls (Lower case L before the s) Lists the contents of the current directoryls -a Lists the contents of the current directory including hidden filesecho $SHELL Displays the current shellpwd Print Working Directory outputs the current directorycd Change Directory run by itself will return you to your home directory. With an argument takes you to the argument path locationfile Outputs the file type of a pathVersion Control system that records changes and allows easy access to previous versions
Git a DVCS that saves system of snapshots of your project
Getting Git help in Terminal
git help *command*
git *command* --help
man git-*command*
Cloning a repository Git will automatically give the name “origin” to the server and the name “master” to your local branch
$ git clone (url)
List of terminal commands
$ git status Returns the current branch as well as the status of working files$ git add filename Stages the filename$ git add * Stages all files in a repository$ git commit -m “message here describing the changes” Commits the file and includes a describing message$ git push origin master *Pushes changes from the local “master” branch to the remote repository named “origin”.$ git stash Temporarily removes changes and hides them, giving you a clean working directory$ git stash apply Retrieves hidden changes$ git remote See the short names of all specified remote handles$ git remote -v Shows all the remote URLs next to their short namesRemote repositories versions of a project stored online or on network. Teams can push info to and pull info from remote repositories
Visual Hierarchy most users do not read entire web pages. Using contrast can help focus a users attention.
Grouping and Similarity visually grouping items of related content through similar element styles
Navigation a good design allows users to better find and understand your content
HTML (Hypertext Markup Language) describes the structure of a webpage
HTML Elements *usually made up of two tags inside angle brackets <example></example>
Attributes provide more information and instruciton in a tag, consist of two parts: name and value seperated by “=”
<p lang="en-us">Paragraph in English</p>
lang = name"en-us" = attribute valueList of Tags
<body></body> everything in this element is shown in the browser window<head></head> contains information about the page<title></title> title above the window tabView Source in browser allows you to see the code for the current page, this can be useful in figuring out how to achieve certain structures
HTML 5 introduced new tags that are more specific for the structure of the page
Common Structural Tags
<header> used at the top of a page or the top of a section to hold the descriptive info for that section<footer> at the bottom of a page to contain info like copyright or at the bottom of a section<nav> used to contain the major navigational blocks<article> used to contain any section that could potentially stand alone<aside> when used nested inside an article it should convery secondary information like a quote, when outside of an article acts as container for info relating to the entire page<section> element groups related content to gether<hgroup> used to contain a title and subtitle within an element<figure> used to contain any content that is referenced from a main article, the article should still make sense even if the figure is moved to another location<figurecaption> provides a text caption of the figure<div> contains related elements<a href="url"> allows whole sections to be treated as a link if nested insde the <a></a>Older browsers may need to be updated or have extra JavaScript added to function properly.
## Read: 04 HTML & CSS Textbook Chapter 8
Doctypes tells the browser what kind of HTML it is using
<!DOCTYPE html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html14/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><?xml version="1.0" ?>Comments in HTML
<!--Comment--> allows coder to place notes in the code ignored by the computer
ID Attribute *every html element can have an id attribute used to individually name it.
<p id="idname">Class Attribute *allows multiple elements to be given the same label
<p class="exampleclassname">Block Elements will always appear to start on a new line
- <h1>
- <p>
- <ul>
- <li>
Inline Elements always appear to continue on the same line as their neighboring elements
- <a>
- <b>
- <em>
- <img>
Span acts like an inline equivalent of the <div> tag.
<span class="classname">Text that is spanned</span>IFrames short for inline frame, holds a seperate window within your window
<iframe width="desiredwidth" height="desiredheight" src="url"></iframe>Meta provides information about your page
<head> element<meta name="description" content="Descriptionofpage" />
<meta name="robots" content="noindex" /> *do not add to search results<meta name="robots" content="nofollow" /> add this page to search results but do not follow any linksEscape characters allow the coder to add characters to the page that would otherwise be operands in html
© = copyright symbolCSS (Cascading Style Sheets) alows developer to set rules to specify how content and layout should appear
CSS Rule governs how content of specified elements should be displayed
p {font-family: Arial;}p = Selector indicates which elements rule applies tofont-family: Arial; = Declaration how the elements should be styled
{} and is made up of two parts: a property and a value;External CSS Allows a single seperate file to contain all of the style information for a multipage website
<link> *element placed inthe html document in the <head> element telling the browswer where to find the CSS<link href="urlofcss" type="textorcss" rel="stylesheet" />
href indicates the path to the CSS filetype specifies type of doc being linked to text or cssrel specifies relationship between html page and file linked to, should be stylesheet when linking to CSS fileInternal CSS *can use CSS in html page by placing them within a <style> element, usually inside a <head> element
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
</style>
</head>
CSS Selectors
Selector | Meaning | Example
— | — | —
Universal Selector | applies to all elements in doc | *{}
Type Selector | matches element names | h1, h2, h3 {}
Class Selector | matches element whose class attribute has value specified after the . | .example {}
ID Selector | matches element whose id attribute has value specified after the # | #example {}
Child Selector | matches the element that is a direct child of another | li>a {}
Descendant Selector | matches element that is a descendant of another specified element | ` p a {}
Adjacent Sibling Selector | matches and element that is the next sibling of another | h1+p {}
General Sibling Selector | matches element that is a sibling of another, does not have to be directly preceding element | h1~p {}`
Cascading Rules
!important after any rule to indicate that it should be treated as more important than other rules that apply to the same element
p b { color: blue !important:}Inheritance style properties that are inheritable can be given to all children of an element by default
inherit in the value of the propertyOnline tools that allow developer to test CSS appearance in multiple virtual browsers and or OS
CSS Bug Fixes and Tools
Color the color: property allows you to specify text color in an element
rgb(100,100,90)#, example: #ee3e80DarkCyanCSS Comments developer notes that will not effect the code
/*comment*/Background Color background color is set to transparent by default, most browsers show white, but not always
body {
background_color: rgb(200,200,200):}
Online Color Picking Tool Color Scheme Designer
Opacity allows developer to set the opacity of an element and its children, values from 0.0 to 1.0
rgba, example: rgba(231,112,56,0.5)HSL Colors defines a color in three terms: hue, saturation, and lightness
HTML, CSS, and JavaScript the three languages of a website
<html> provides the structure and content of a web page{css} styles the webpage and defines how the content is displayedjavascript() controls how the page behavesJavaScript plain text language so it does not require any additional tools to start
Link to Do Along project pages 46-49
Objects and Methods
document.write('Good afternoon!');
document = Object the document object represents the entire page. = Member Operatorwrite('Good afternoon!') = Method allows new content to be written into the page where the <script> element sits'Good afternoon!' = Parameters whenever a method requires some info to work, data is given inside the parenthesesJavaScript runs where it is found in the html, location maters.
Chrome Developer Tools Shortcuts
opt + cmd + Uopt + cmd + Iopt + cmd + Copt + cmd + JScript set of step by step instrucitons that a computer can follow, each should end with a ;
{} indicate the begining and ending of a code block;{} to form a singular related code block/*comment*/ Format for a multiline comment//comment Format for a single line commentVariables
var quantity;var = Variable Keywordquantity; = Variable Name sometimes called an identifier
oneTwoThreeFourquantity = 3;quantity = Variable name= = Assignment operator3 = Variable valueData 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
$, or underscore _-, or dots . are allowed in a nameComputers take in information, stores info, processes it, and outputs calculation resutls.
Data and Binary
Circuits and Logic
Memory, CPU, Input, and Output
Hardware and Software
JavaScript used in browsers to make websits more interactive
Script a seriese of instructions a computer can follow to achieve a goal
Vocabulary words that computers understand
Syntax how teh words are put together to create instructions that computers can follow
Computers solve problems proramattically, following a series of instrucitons, one step after another
Expressions evelauate into a singlge value
var color = 'beige'; The value of color is now beigevar area = 3 * 2 The value of area is now 6Operators allow programmers to create a single value from one or more values
var color = 'beige'; The value of color is now beigearea = 3 * 2 The value of area is now 6greeting = 'Hi ' + 'Molly';buy = 3 > 5; Value of buy is now falsebuy = (5>3) && (2<4); The value of buy is now trueArithmetic Operators JS contians 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) devides two values and returns the remainder example: 10 % 3 = 1String Operator just one operator + used to join strings on either side
Mixing numbers and strings
#) create a string, not a numberic number type. Arithmetic operators cannot be used on strings
'2' + '2' = '22' Adding strings concatenates them, it does not add.12 + 'Bob' = '12Bob' Adding a number to a string, creates a new concatenated string'seven' * 'nine' = NaN (Not a Number) attempting to use arethmetic operators on strings will return a value called NaNFunctions allow programmer to group a series of statements together to perform a specific task
{code block} Code blocks contain a series of related steps contained between two curly braces}Declaring a Function give it a name and then write its statements needed to achieve its taks inside the curly braces
(){}
function sayHello() {
document.write('Hello!');
}
function = Function KeywordsayHello() = Function Name{documnet.write('Hello!');} = Code BlockCalling a Function can execute all of the statements between a functions curly braces with just one line of code in the location that programmer desires
();sayHello();Declaring functions that need information give a function information by providing parameters
() after the function name
function getArea(width,height) {
return width * height;
}
width, height = Parameters used like veriables inside a functionCalling a Function that nees information specify the values it should use in the () following the name, these values are called arguments
getArea(3,5);
wallWidth = 3;
wallHeight = 5;
getArea(wallWidth,wallHeight);
Getting a single value out of a function “returning a result”
function calculateArea(width, height) {
var area = width * height;
return area;
}
var wallOne = calculateArea(3,5);
var wallTwo = calculateArea(8,5);
wallOne variable now holds 15wallTwo variable now holds 40Note: when the interpreter hits the return command it goes back to the statemnt that called it, subsiqent statements in the function would not be processed
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 true3 > 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 false3 < 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 true3 >= 4 returns false3 >= 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 false3 <= 4 returns true3 <= 3 returns trueLogical 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 trueShort 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 truetrue || anything returns true without evaluating anything at least one of the values is trueLoops check a condition, if it returns true a code block will run then will check again, if still true, code block will run again, until no longer true
For good for running a loop a specified number of times, uses a counter as a conditionWhile good for running loops that when you don't know how many times it should runDo While similar to the while loop, but will always run the statements in the curly braces at least once even if the condition evaluates to false
for (var i = 0; i < 10; i++) {
document.write(i);
}
The preceeding loop will write 0123456789 to the page.
for keyword indicating a for loop(var i = 0; i < 10; i++) Condition (Counter)docment.write(i); Code to execute during loopLoop Counter
var i = 0; Initialization *creates a variable and sets it to 0i < 10; Condition loop will continue to run until it reaches a specified number, may also use a variable that holds a numberi++ Update everytime the loop is run it adds one to the counterWhile Loop will continue as long as the condition in the () is true
var i = 1; //set counter to 1
var msg = ' '; // message
//store 5 times table in a variable
while (i < 10) {
msg += i + ' x 5 = ' + (i * 5) + '<br />;
i++;
}
document.getElementByID('answer').innerHTML = msg;
Loop returns the following:
1 x 5 = 5
2 x 5 = 10
3 x 5 = 15
4 x 5 = 20
5 x 5 = 25
6 x 5 = 30
7 x 5 = 35
8 x 5 = 40
9 x 5 = 45