Last active
June 26, 2018 11:25
-
-
Save johnkyony/8b294707ceb94c0e18806d0becf1edc0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Html Syntax | |
| -trees: type of data | |
| - parent ( Parent to siblings) | |
| - child ; child | |
| -<div> : division : groups content together | |
| -<div> content </div> : content is just not text , can be anything . therefore div is the parent to content inside | |
| Html Structure Part 2 | |
| -doctype: describes type of htl | |
| - different types (html: common) | |
| -<head></head> : describes meta information about site ( site title , links) | |
| -<body></bodby> : describes actual content | |
| -basic html tree structure : | |
| - html | |
| - head | |
| - meta , link | |
| - body | |
| - nav | |
| - ul | |
| - li | |
| - a | |
| - div | |
| - h1 , img , p | |
| -<meta charset= "utf-8"> : display unicode character | |
| -paths: way of describing where a file is stored | |
| -street address: absolute path to a location | |
| -local paths: directories | |
| -filesystem: organization of all your files into a tree of directories | |
| - " Every file has an address we call the path " | |
| -Absolute path : written in relation to computer's root directory | |
| - Eg: "users/cameron/documents/file.txt" | |
| - only works on localhost | |
| -external paths: | |
| - The process behind how it works -> loading url => request to server => server finds file and server back to the user | |
| - Protocols = [ http/https , tcp/ip ] | |
| - Eg: <a href="https://labs.udaciti\y.com/tend/example/hello-world"> | |
| -relative paths : similar to absolute path | |
| - describes path to file from directory that is not root | |
| - Eg: <a href="/users/cameron/udacity/etc/labs/tend/example/hello-world.html"> | |
| Css Syntax: all about style | |
| - css: cascading stylesheet | |
| - markup language used to describe how elements on websites should look | |
| - allows us to seperate html(content) , css(content styling) | |
| - Mdn: mozilla developer network css-tricks.com | |
| - " Each browser comes with unique default styling" | |
| - css rule set: | |
| - div { tex-align: right; } | |
| - selector: code that selects html code that is going to be styled | |
| - delaration block: code you want to apply to html element | |
| - declarations: lines of code written inside declaration block | |
| - properties: { color: blue;} | |
| - always written in plain english | |
| - identify a feature of html element that you want to change | |
| - code comment: // | |
| - human readable message inside code | |
| - surrounded by or preceded by special characters(instruct computer to ignore) | |
| - tag selectors: p { background-color: white;} | |
| - selects all elements that are paragraphs | |
| - useful when changing global style | |
| - attributes & selectors: .class > #id | |
| - <p id= "sitedescription"> | |
| - <p class="booktitle"> | |
| - "id should be used sparingly , html element can have one id , ids can be used one per page" | |
| - "id's useful when styling a collection of html elements" | |
| - classes can be added to multiple html elements , html elements can have multiple classes | |
| - classes extremely powerful & flexible | |
| - css units: pixels/percentages | |
| - absolute: pixels , mm(in,cm) | |
| - fied unit of measurment | |
| - relative: % , em(vw,vh) | |
| - vw: viewport width | |
| - vh: viewport height | |
| - css colours: | |
| - nibble: half of a byte | |
| - RGB: red green blue | |
| - colour palette has 16777216 colour variations | |
| - reference colour palette | |
| - Rgb notation: { red: 0-255 , green: 0-255 , blue: 0-255 } , 0 == 0% light && 255 == 100% | |
| - Eg: magenta ( body { background-color: rgb(255,0,255);}) | |
| - Hexadecimal notation: {red: 00-ff , blue: 00-ff , green: 00-ff} , 00 == 0% light && ff == 100% light | |
| - Eg: magenta ( body { background-color: #ff00ff; } | |
| - css properties to remember : | |
| - Border | |
| - Cursor | |
| - Box-shadow | |
| - Font-family | |
| - Font-size | |
| - Text-transfrom | |
| - Text-decoration | |
| - Color | |
| Javascript: written in ten days in 1995 by Brandan Eich | |
| - also known as livescript | |
| - netscape first browser | |
| - html + css (markup languages) | |
| - markup languages describe & define elements within a document | |
| - Javascript is a programming language | |
| - communicates instructions to machines | |
| - control behavior of machine & express algorithms | |
| - Ecma international: set standard | |
| - es2016 , es2017 | |
| - Javascript Console | |
| - console.log : used to display content to javascript console | |
| - "all major browsers come with builtin javascript engines" | |
| - allows to run & excute code | |
| - allows to print strings && excute code | |
| - Data types & variables | |
| - "Data & data types building blocks of any programming languages" | |
| - help organize information | |
| - determine how program will run | |
| - primative data types: | |
| - numbers | |
| - strings | |
| - boolean | |
| - undefined | |
| - null | |
| - "variables store data" | |
| - creating a variable: var variableName = value; | |
| - camelcase: totalAfterTax | |
| - first word lowercase , word there after upper case | |
| - indexing: "james"[0]= "j" | |
| - access individual characters in a string | |
| - escaping character: ( \ , \" , \' , \n , \t ) | |
| - comparing strings: ("Yes" == "yes") = false | |
| - case sensetive | |
| - null: data type | |
| - value of nothing | |
| - undefined: data type | |
| - absence of value | |
| - NaN: not a number | |
| - Eg: var x = null; var y; | |
| - difference is that variable y is undefined since it as not been assigned any value | |
| - implicit type coercion: javascript lossely typed language | |
| - strongly typed language: generates errors if data does not match expected type(java) | |
| - conditionals: | |
| - flow chart: visual diagram outlines solution to a problem through series of logical steps | |
| - control flow : order which statements evaluated & executed | |
| - if ... else statement | |
| - allows you to execute cetain pieces of code based on condition / set of conditions being met | |
| - elseif: secondary check | |
| - falsy values: | |
| - " ": empty string | |
| - null | |
| - undefined | |
| - 0 | |
| - NaN | |
| - truthy values: everything not in falsy list | |
| - tenary operator: provides shortcut alternatives for writing lengthy if...else statement | |
| - conditional ? (if condition is true) : (if condition is false) | |
| - Eg : var isGoing = true; var color = isGoing ? "green" : "red"; console.log(color); | |
| - Switch statements: work in situation where you want to excute statements of code based on value of some variable | |
| - break: statement used to exit switch statement | |
| - fallthrough: When switch statement doesn't have a break; | |
| - leverage heirarchical type structure | |
| - content builds | |
| - Loops: iterate over values & repeatedly run block of code | |
| - 3 main pieces of a loop: | |
| - when to start | |
| - when to stop | |
| - how to get the next item | |
| - for loops : for (start ; stop; step) | |
| - start is forced opposite from while loop | |
| - most common type of loops in javascript | |
| - nested loops: extra layer of complexity | |
| - Functions: let you group lines of code together & run all at the same time | |
| - reusable chunk of code | |
| - package code | |
| - Eg: function functionName(parameter){code;return} | |
| - functionName(): run function parameter | |
| - parameters: store data passed through | |
| - variable name | |
| - arguments: actual code passed through | |
| - value | |
| - Functions always going to return some value to the caller | |
| - undefined | |
| - return keyword: use to stop excution of a function & return value back to the caller | |
| - scope: part of program , where particular identifier , such as a functionName , variable is visible / accesible | |
| - global scope : accesseed everywhere | |
| - function scope: only within the function | |
| - shadowing: globalVariable clash with other global variable with the same name | |
| - hoisting: before any javascript executed all function declaration are hoisted to the top of the current scope | |
| - hoists function declaration & varaible declarations top of current cope | |
| - variable assignemnt not hoisted | |
| - function top of your script | |
| - function expression: function stored inside variale | |
| - anonymous function: var vatSays = function(max){} | |
| - no need to name function | |
| - inline function expressions: stream line your code | |
| - callback: function passed into another function | |
| - Arrays: var arrayName = [element] | |
| - data type allows to store data into a single organized data structure | |
| - can hold multiple data values | |
| - element: individual pieces of data in an array | |
| - index: references the location ?? position of an element | |
| - mulitiple indices | |
| - array properties: special pieces of information about data structure | |
| - eg: arrayName.length | |
| - array methods : special predefined functions that data structure can call | |
| - push() : adds value at end of array | |
| - returns length of array after an element has been added | |
| - pop(): removes elements from the end of an array | |
| - don't need to pass values | |
| - returns element in case you need to use it | |
| - splice(): allows you to add & remove elements from anywhere within an array | |
| - foreach(): special method to iterate & perform operations on collections of data | |
| - map(): callback functions perfoms an operation on each elements in the array | |
| - returns a new array , with new values the function calculated | |
| - Objects: var objectName = {propertiesOfObject} | |
| - objects are a data structure in javascript that lets you store data about a particular thing & helps you keep track of | |
| that data using a key | |
| - allows us to wrap pieces of related data & functionality into 1 container | |
| - Eg: var umbrella = {color: "pink" , isOpen: false , open: function(){}, stripes:false} | |
| - object literal notation: var objectName = { properties & methods}; | |
| - key:value[ reference hashes] | |
| - bracket notation: objectName["properties"] | |
| - dot notation: objectName.propertyName | |
| - Object Naming conventions: | |
| - dont use property "" | |
| - dont use numbers as properties | |
| - dont use space or // or - | |
| - for each(variable in object){statement} | |
| - variable: bariable to iterate over property values | |
| optionally declared with var | |
| - local to the function not the loop | |
| - Jquery: javascript library | |
| - focus on ux , not browser quirks | |
| - javascript functions also objects therefore jquery object is also a function | |
| - $: pointer to jquery | |
| - short hand | |
| - jquery collection: returns array like object which we call jquery collection looks & behave like array with add | |
| methods | |
| - dom: is a data structure , best described as a tree | |
| - dom tree: refer to html trees | |
| - cdn is the best to import jquery | |
| - $('tag-selector') , $('.class-selector') , $('#id-selector') | |
| - selector: allow us to select part of dom | |
| - can use jquery select collection of dom elements based on tagname//class/id | |
| - usually select handful of dom elements for changes | |
| - $('selector').parent() , $('selector').parents(),$('selector').children(),$('selector').find(),$('selector').siblings() | |
| - dom manipulation methods to NB: | |
| - .toggleClass() | |
| - .next() | |
| - .attr({}): add attributes , 1 gets , 1 sets | |
| - .css("" , "") | |
| - .html() : scrapes the page | |
| - .text() : scrapes the page | |
| - .remove() | |
| - .first() | |
| - adding dom elements methods to NB: | |
| - .append() | |
| - .prepend() | |
| - .insertBefore() | |
| - .insertAfter() | |
| - .each(function) | |
| - $(this): select current element in a loop | |
| - event listeners: | |
| - console(monitorEvents()) : peek underhood to see events | |
| - 3 items needed to listen for events & react to them: | |
| - target element to listen to | |
| - event we want to react to | |
| - actions to take in response | |
| - Eg: $('selector').on(event , function) | |
| - primative way to listen to events | |
| - The event object: e/evt/event | |
| - reacting to an event often requires knowledge obout the event itself | |
| - Eg: $('selector').on('click', function(evt){console.log(evt);}) | |
| - target element calls callback function when event occurs | |
| - several properties that you can use for flow of code | |
| - evt.target: holds page element that is target of the event | |
| - Eg: $(evt.target).css(background,red) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Wow ! I love how concise this is