Frontend Development

Closure

a programming concept that allows functions to access variables outside their lexical scope

Selfinvoking functions

Functions executed right after being created let a = { function (x, y) {return x + y;} ()};

Anonymous function

Inside a variable declaration

For loop

For ([initialization]; [condition]; [final expression]){…}

For…in

Iterates over all enumerable keys in an object —> for (variable in object){…}

Optional chaining

Prevents errors when ascessing properties of null or undefined —> guard clause : user?.isNotLoggedIn && login();

Nullish coalescing

Provides a default value only when the left side is null or undefined —>  age ?? 18

custom errors

throw new Error(”error”);

Non-primitive data types

To store multiple and complex values —> object

Hoisting

Js automatically moves declarations of variables and functions to he top

Arrays

In js they can have mixed data types, .push() to add something to an array

Comparison operators

are they equal in value or === are they equal in value and type

Try catch

Try : contains the cpde that might throw exception, catch : code to handle the exception, finally: code that always runs

Even handler 

Used to respond to certain actions that might come from the user or the webpage, ex: 1. Get html element 2. Add event listener form.addEventListener(’submit’, function (event) {event.preventDefault()});

Modifying DOM

DOM : document object model, js can modify the DOM with getelementbyid to change the content of exixting html elements or createelement to ceate a new html element 

Document fragments 

Minimal cod obj that has no parent, creates nodes that can be assembled and inserted together giving reasurance and minimizing DOM manipulation overhead

Asynchronous programming 

Tasks are executed idependently, allowing non blocking execution and allowing js to handle multiple tasks efficiently

Async/ await

Functions can be declared as asynchronous and use await to return a promise 

Promise

Js object that will return a value at some point, promise → .then (the promise is resolved) → promise (can be in pending) → .catch ( the promise is rejected) 

Callback function

Function passed as an argument to anther function, used to be the way of handling asynchronous tasks but can create nested callback hell

Constructor functions

Creates function objects that execute in the global scope only let car = new Function(a, b , return a+b);

Super()

Used to call the constructor of its parent class

Object.create()

Sets up inheritance via prototype link, const animal = {speak()…} const dog = object.create(animal); now dog can use the cariables and functions inside of the animal object

Prototypal inheritance

Let us reause code between similar objects, every obj in js has an internal prototype linked to another obj.

<section>

Part of a page that covers grouping of a specific theme or idea ex: books of an specific genre

<article>

independent, self contained content that could stand alone ex: blog posts

<div>

Basic container just to group things together, default display : block

Importance of different header using

They go from 1 to 6, 1 being the most important; using them correctly makes a page easier to read and better structured, shows the important contents of a page and allows search eangines to easily look thru your website for specific keywords searched by the user.

Embedded multimedia

Media elements provide built in attributes that let the user control the media, they improve user experience by giving them control 

Fallback content or alternative media

Fallback content and alternative media ensure that all users can access multimedia, even if their browser doesn’t support certain formats. Improving accessibility and ensuring a smooth experience across different devices.

Pseudo-classes

Target a state of elements like :hover or :active

Pseudo-elements

Target a piece of an element like the first line of a paragraph, slelected like this  ::first-child

Responsive design 

Important since webpages should be able to be accessed from any device, we can use media quaries to stablish a layout for an specific screensize, we can also use percentages ex: width : 80% they keep the intended proportions in different screen sizes

Semantic tags 

improves accessibility by helping screen readers and search engines understand the content structure. It also enhances SEO and maintains better code organization, making it easier to read and maintain.

semantic Tags vs Css styling

• HTML tags provide semantic meaning and help with screen reader navigation, making content accessible.

• CSS styling ensures visual accessibility (contrast, legibility, and focus), improving the overall user experience for everyone.

Selectors in css

identify HTML elements to apply styles.

• Universal Selector: *

• Type (Element) Selector: element

• Class Selector: .class

• ID Selector: #id

• Pseudo-class Selector: :pseudo-class

• Pseudo-element Selector: ::pseudo-element

Specificity css

determines which CSS rule wins when multiple rules target the same element, based on a hierarchy of rules. This and selectors help making your styling efficient, organized, and predictable. Inline > id > class > element

let and const

Both are block scoped but let lets u modify the value while const doesnt const is used when we know the value shouldnt be modified both are hoisted.