FRontEnd
What are the 3 languages related to Web Development?
- HTML - HyperText Markup Language - Defines the structure for the webpage - CSS - Cascading Style Sheets - CSS makes our HTML look PRETTY - We can style specific elements to make it look like what we want. - JavaScript - Scripting language that adds functionality to our web page.
The box model consists of:
- Padding - references the space between the content and the border - Border - border is referencing the line that wraps the element - Margin - references the space outside of the border
What is a promise?
- a promise represents an object that will be EVENTUALLY become available or an error occurs (because requesting data across a network takes time).
What is an attribute?
- additional information that you can add on to an element - <div class="container" id="unique-div">
What is an event listener?
- an entity that actively listens for an event on an element - when that event is triggered, we provide functionality for that specific event
common attributes:
- class - convention to identify an element with a grouping of elements - id - convention to identify a single element - style - add css styling inline -heading -hyperlink
JS scoping
- global - can be seen globally in the application (even other javascript files) - function - can be seen within the function. can see global variables - block - can be seen within the block - lexical - functions created in a function have access to the variables in the parent function NOTE: - var has global and function scope only. - let has all 4
Ways we can style HTML
- inline - by style attribute - internal - by style tag - external - by external style sheet
hoisting
- the interpreter appears to move the variable/function declaration to the top of their scope. - so if you attempt to use var before it is declared it will show "undefined" instead of an error
var vs let
- var variables are hoisted and let variables are not. - let has additional scopes
js reference type
-objects -array -functions
default alignment of flexbox
/* flex box is horizontal alignment by default. */
Fetch Hardcore
1.Fetch() is a global method , we can call it from anywhera 2. it returns a Promise object 3.it recevies 2 parameters (url ,optional configuration(http method, headers, body))
types if arrow function
1.one line arrow functions have implicit return and defined without curly braces 2.multiline arrow functions,. have curly braces and an explicity return
<form> tag
<!-- action attribute is the url method attribute is for the HTTP verb -->
lorem ipsum
<!-- lorem ipsum is a way to auto generate words when we are testing out how our page looks --> <!-- type "lorem" to generate latin -->
<dl> tag
<dl><!-- description list --> <dt>Description Title</dt> <!-- description title --> <dd>Description Definition</dd> <!-- descripton definition --> </dl>
<ol> tag
<ol> <li>item 1</li> <!-- list item --> <li>item 2</li> <!-- list item --> </ol>
table tag
<table border="1"> <!-- root tag for tables --> <thead><!-- where we add the the header row --> <tr><!-- create a row --> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody><!-- where we add the table data --> <tr> <td>data for header 1</td> <td>data for header 2</td> </tr> <tr> <td>data2 for header 1</td> <td>data2 for header 2</td> </tr> </tbody> </table>
<ul> tag
<ul><!-- unordered list --> <li>item 1</li> <!-- list item --> <li>item 2</li> <!-- list item --> <ul> <li>subitem 1</li> <li>subitem 2</li> </ul> </ul>
what is the difference between == amd ===
== compares value === compares value AND datatype
What is a CSS style rule composed of ?
A CSS style rule composed of selectors and declarations. The selector is an HTML Element like h3 used in the below example. The declaration is comprised of a property and a value surrounded by curly braces. I h3 { font-family: Arial; font-style: italic; color: red }
What is a selector?
A SELECTOR is the HTML Element you want to give a style NOTE: the SELECTOR does not have the right and left caret <body>
block and inline elements
A block-level element always starts on a new line. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). A block level element has a top and a bottom margin, whereas an inline element does not. div>>>>block-level element Inline Elements An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph. span>>>inline-level element
Callback function
A function that is triggered by another function when something is true.
var and const
Allow the variable declared in block scope have block scope . so if they are declare in side a block ,can not be accessed from outside the block . const: const is block scoped , like let , - the primitive value of a constant variable cannot be changed -we can change the properties of a constant object but we can not reassign the constant object .
What is AJAX?
Asynchronous JavaScript and XML
Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
CSS Margins property
CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders.
CSS Padding property
CSS Padding Property The CSS padding property allow you to set the padding area for an element that separates its border from its content.
what is the DOM
Document Object Model - it is a object representation of your html page - We can us the DOM to manipulate HTML elements
What is ECMAScript?
ECMAScript is the standardized format of JavaScript.
What is tags
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. ( ) <----------parenthesis[ ] <-------------brackets, square brackets{ } <-------------curly braces, curly brackets< > <------------angle brackets, chevrons, diamond
What are truthy values?
In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy
CSS Declaration
Includes a CSS property name and a value, separated by a colon
How do you run javascript code without the browser?
Install an independent Javascript runtime such as NodeJS.
What is JavaScript?
Its a scripting language originally designed to make our pages dynamic.
What is a scripting language?
Its a snippet of interpreted code that automates some functionality - a script is not compiled, its interpretted - by "interpretted", I mean its ran line by line
what does it mean when we say javascript is loosely typed
JavaScript is a loosely typed language, meaning you don't have to specify what type of information will be stored in a variable in advance. ... Many other languages, like Java, require you to declare a variable's type, such as int, float, boolean, or String.
JavaScript
JavaScript is the most commonly used client-side scripting language. It is a high-level, multi-paradigm, interpreted programming language used to create dynamic webpages. When the browser loads a webpage, the browser interprets javascript code in it and executes it.
flex box
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities Flex box provides a way to layout, align (distribute space) among items in a container --> When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together
Variable scope
The Variable scope defines the lifetime and visibility of a variable . each variable associated with a scope. The variable can be accessed only within its scope . *Globlal scope :Variables defined outside any function, blocl,or module have global scope. The global scope variables are accessed everywhere in the application.The global variables lifetime is throughout the application we can declare the global variables in a browser using the global window object. *Local scope>>>>function scope the variable declared in a function is only visible inside that function . var is the keyword to define variable for a functionscope accessibility. *Blcok scope is the scope of the variables declared inside the {} curly brackets. const , and let keywords can be defined in block scope *lexical Scope : Lexical scope is that a variable defined outside a function can access the inside another function defined after the variable declaration. The inner functions are lexically bound to the execution context of their outer functions.
what is a fetch method
The fetch method is a method that returns a promise.
CSS properties
There are a number of CSS properties that you can use to style our webpage. Here we'll discuss some of the CSS properties such as Border, Padding, Margin, display, position, color text-align.
What are all the properties of the CSS flexbox?
There are six properties of the flexbox in CSS3: flex-direction:row.rowrevers.column,column revers. flex-wrap:non-wrap,wrap,wrap-reverse; justify-content;start,left,space-between.space-around,space-evenly align-items flex-flow align-content
== and type coercion
Type Coercion is the process of converting a value from one data type to another data type. *explicit type coercion *implicit type coercion == implicitly convert the type of variables,.
Type of selectors
Types of selectors: - element - ex: div - class - ex: .class-name - id - ex: #unique-identifier
Types of the selectors
Types of selectors: - element - ex: div - class - ex: .class-name - id - ex: #unique-identifier
What are the 3 ways we can style an element?
Ways we can style HTML - inline - by style attribute - internal - by style tag - external - by external style sheet
selector
What is a selector? a selector identifies which elements we want to style.
css box model
What is the CSS box model? It is referring to the "box" that wraps around the element we are working with The box model consists of: - Padding - references the space between the content and the border - Border - border is referencing the line that wraps the element - Margin - references the space outside of the border
There are essentially 2 ways to send a request -
XMLHttpRequest object (dated) - fetch() method - fetch().then() - async and await keywords
What is an event?
an action that happens to an HTML element
arrow function
an arrow function is a copmpact alternative to a traditional function expression . we can decompose a traditional ananymous function down to the simplest arrow function function(a){ return a+100;} 1.remove the key word function , place arrow between the argument and the opening body bracket 2.remove the body brackts and the word return 3.remove the argument parentheses
What is a truthy value?
anything that is not a falsey value
Transpilers
are also known as source-to-source compilers. So in essence they are a subset of compilers which take in a source code file and convert it to another source code file in some other language or a different version of the same language. Emscripten: Transpiles C/C++ to JavaScript Babel: Transpiles ES6+ code to ES5 (ES6 and ES5 are different versions or generations of the JavaScript language)
What is CSS
cascading style sheet; determines how a given element is presented on a webpage; gives more control over the appearance of a webpage to the creator. CSS consists of selectors and declarations
what are some common events?
common events: - click - submit - mouseover - load - etc
what is the DOM object name
document
retrieving elements
document.getElementById(); document.getElementsByClassName(); document.getElementsByTagName(); let gremlinsElem = document.getElementById("movie3"); console.log(gremlinsElem); gremlinsElem.style.color = "red"; gremlinsElem.style.fontSize = "30px";
What are falsey values?
false, 0, null, undefined, "", NaN
flex box is horizontal alignment by default. */
flex box is horizontal alignment by default. */
javascript functions
group of reusable code which can be called anywhere in the program. A JavaScript function is defined using the function keyword
What is the CSS box model?
is essentially boxes within boxes that wraps around HTML elements, and it consists of from outer box to inner box: margins, borders, padding, and the actual content.
Type coercion
is when a variable is when a variable has implicitly changed data types.
create an element from dom
let btn =document.createElement("button"); btn.innerText = "Click Me!"; document.body.appendChild(btn);
What is a declaration?
sets specific properties that you can assign for the selector specified
What are the primitive types in JavaScript?
string number, boolean, null and undefined (BigInt and Symbol with the latest ECMAScript)