DEV Community

Cover image for Web Dev Notes - Resource Compilation + Cheat Sheet
World In Dev profile image Lorenzo
Lorenzo for World In Dev

Posted on

Web Dev Notes - Resource Compilation + Cheat Sheet

#javascript #webdev #career #productivity

Hello World! Seems like we're in a streak to be the best articles of the week here at DEV, will this one be too at the top? Leave a like to know! I discovered online an incredible Roadmap / Web Development notes written by Bronson Avila, who in his great kindness allowed me to post the content here. Hope this will help you!

--> Grab the downloadable PDF version here

πŸ”– - Waaait, don't leave this page without bookmarking (save) it!!

Table of Content:

<-- Conversion to Markdown In Progress --> Available here for now

Remember the like ❀️

Frontend

  1. HTML
  2. CSS
  3. Bootstrap
  4. Javascript Basics
  5. DOM
  6. JS Advanced

HTML

Document (individual elements combined to form an entire HTML page)

Doctype: <!DOCTYPE html>

Required as the first line of an HTML document (historical artifact).

Root Element: <html>

Follows the "doctype" and wraps around all content on the entire page.

Head Element: <head>

Container for things that do not appear as viewable content (e.g., keywords and descriptions that will appear in search results, CSS, character set declarations, etc.).

Character Set: <meta charset="UTF-8">

Allows document to use "utf-8" character set, which includes most characters from all known human languages (nests within head element).

Title: <title>Β 

Sets the title that appears in browser tab (nests within head element).

Also appears as the search result in Google.

Body: <body>

Contains all of the content that will be shown to the viewer.

Elements (content + opening/closing tags)

Article: The ultimate HTML Tags Cheat Sheet πŸ”₯

Block Elements form a visible block on a page (e.g., paragraphs, lists, navigation menus, footers, etc.):

Paragraph: <p>

Divider: <hr>

Headings: <h1> through <h6>

NOTE: As a general rule, try to have only one <h1> tag in your HTML document, and it should be the biggest text element on the page.

Generic Container: <div>

Lists (each item within a type of list needs to be identified by the "<li>" tag):

Ordered Lists (lists that are numbered): <ol>

Unordered Lists (lists composed of bullet points: <ul>

Tables: <table>

Table Row: <tr>

Table Header (consists of one cell within a row): <th>

Should be nested within <thead> under main table (semantics).

Table Data (consists of one cell within a row): <td>

Should be nested within <tbody> under main table (semantics).

Borders can be added by entering <table border="1">, although this is discouraged, as CSS should be used for styling.

Forms (interactive controls to submit information to a web server): <form>

Typically contain the "action" (the URL to send form data to) and "method" (the type of HTTP request, such as "GET" to receive information from the server and "POST" to add information to the serve) attributes, e.g.:\
<form action="/my-form-submitting-page" method="POST">

Input (used to accept data from the user): <input>

The operation of <input> depends upon its type attribute.Β  For a complete list of attributes, view Form Input Types.Β  Examples:

Text (can be used for user names): type="text"

Password: type="password"

Placeholder (temporary text in input fields; used with "text" and "password" attributes): placeholder="insert-text-here"

Button: type="button" value="insert-text-here"

Simple Submit button: type="submit"

Alternatively, if placed at the end of a form, use the following to create an even simpler submit button: <button>insert-text-here</button>

Checkbox (square box for multiple choices): type="checkbox"

To have the checkbox already marked upon loading, add the attribute "checked" to the input.

Radio Button (circular icon for one choice): type="radio"

In order to make the user only able to select one choice, you must add the "name" attribute, which must be common among all choices.

The "value" attribute is necessary for the query string to understand the meaning behind each choice; otherwise, it will simply state "name=on".

Example:

<label for="cats">Cats:</label>
    <input name="pet-choice" id="cats" type="radio" value="CATS">
    <label for="dogs">Dogs:</label>
    <input name="pet-choice" id="dogs" type="radio" value="DOGS">
Enter fullscreen mode Exit fullscreen mode

Dropdown Menus: <select>

For every possible option to select, use an <option> tag.

In order for the query string to understand that an option has been selected from the dropdown menu, the "name" attribute must be included in the <select> tag, e.g.:

<select name="color">`
    <option>White</option>\
    <option>Black</option>\
</select>
Enter fullscreen mode Exit fullscreen mode

If you want the query string to contain text other than "White" or "Black" in the example above, use the "value" attribute in the <option> tag, e.g.:
<option value="happy">☺</option>

Text Areas (multi-line plain-text editing control): <textarea>

You can specify how large the text area is by using the "rows" and "cols" attributes.Β 

In order for the query string to process the data in the text area, you must use the "name" attribute.

Example: <textarea name="paragraph" rows="10" cols="50"></textarea>

Labels (add captions for individual items in a form): <label>

AΒ labelΒ can be used by placing the control element inside theΒ <label> element, or by using theΒ "for" and "id"Β attributes:

For example,

<label>Username<input type="text"></label>
    ...is identical to
<label for="username">Username</label>
<input id="username" type="text">
Enter fullscreen mode Exit fullscreen mode

Validations ensure that users fill out forms in the correct format, e.g.:

The Boolean attribute "required" makes a field mandatory:
<label>Username<input type="text" required></label>

Only works if the browser (like Chrome) allows it.

By changing type from "text" to "email", the browser will ensure that the field contains an @ symbol.

Inline Elements are contained within block level elements and do not cause new lines to appear:

Italics: <em>

Bold: <strong>

Generic Container: <span>

BUT NOTE: Empty Elements contain only a single tag:

Image: <img src="https://www.google.com/logo.png">

NOTE: Image width can be modified like so...
<img width="50" src="https://www.google.com/logo.png">
...but is discouraged, as styling should be done by CSS.

Input: <input type="text">

For a complete list of elements, view the MDN Element Reference.

TIP: In Sublime, press "Ctrl+Shift+D" to replicate an entire line of an element.

Attributes (extra info; does not appear in content; target of style info)

Components:

Space between it and the element name (or prior attribute),

Attribute name followed by an equals sign, and

Attribute value surrounded by quotation marks.

Double or single quotes may be used, but must be done consistently.Β  You can nest a single quote within a double quote (and vice versa), but if you want to nest the same type of quote, you must use HTML Entities (e.g., " or ').

Examples:

Class: <p class="editor-note">content</p>

Can be paired with the "anchor" element: <a>

Hyperlink with Title:
<a href="https://www.google.com/" title="Google">content</a>

BUT NOTE: Boolean Attributes can be written without a value, but technically always have only one value (generally the same as the attribute name:

Disabled: <input type="text" disabled="disabled">

Creates a text box in which typing is disabled.

May also be written as:
<input type="text" disabled>

For a complete list of attributes, view the MDN Attribute Reference.

Entity References (make special HTML syntax characters appear as normal text):

<  =  &lt;

>  =  &gt;

"  =  &quot;

'  =  &apos;

&  =  &amp;
Enter fullscreen mode Exit fullscreen mode

HTML Comments (write comments in the code that are invisible to the user by wrapping them in special markers):

<!-- and -->

TIP: In Sublime, you can (1) select text, and (2) hold "Ctrl+/" to turn text into comment.

⬆ Back to Top

CSS

The General Rule

selector {
property: value;
anotherProperty: value;
}
Enter fullscreen mode Exit fullscreen mode

For example, make all <h1> tags purple with 56-pixel font:

h1 {
    color: purple;
    font-size: 56px;
}
Enter fullscreen mode Exit fullscreen mode

Three Basic Selectors:

Element selectors select all instances of a given element.Β  For example, "div" is a CSS element selector that will modify the properties of all <div> HTML tags.

The ID selector selects a single element with an octothorp ("#") ID (only one per page).Β  For example, the following HTML/CSS combination will result in the word "hello" appearing in yellow, while the word "goodbye" will remain as is:

<div>
    <p id="special">hello</p>
</div>
<div>
    <p>goodbye</p>
</div>
Enter fullscreen mode Exit fullscreen mode 
#special {
    color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

The Class selector selects all elements in a given class by functioning just like an ID selector; however, a class is instead prefaced with a period (".").Β  For example, the following items marked as "completed" on a "To Do List" will be crossed out with a line:

<div>
    <p class="completed">TASK #1</p>\
</div>
<div>
    <p class="completed">TASK #2</p>\
</div>
Enter fullscreen mode Exit fullscreen mode 
.completed {
    text-decoration: line-through;
}
Enter fullscreen mode Exit fullscreen mode

An element can be modified by multiple class or ID tags by simply adding a space between the two tag names, e.g.:
<p class="completed uncompleted">Text</p>

Five More Advanced Selectors:

The Star (*) selector applies to every element on the page.

The Descendant selector applies to selectors that have been "nested" under another.Β  For example, if you want to modify the color of only those <a> tags that are nested within the <li>tags of a <ul> list, use the following:

ul li a {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

In addition to HTML tags, CSS selectors such as "ID" or "Class" may be used within a Descendant selector.

HOWEVER: If, for example, you have a second-tier <ul> nested within a first-tier <ul> that is nested within <div id="box">, and you only want to select the first-tier <ul> and not the second-tier, then you must use the ">" combinator to select only the DIRECT first-tier "child" <ul> (rather than the second-tier "grandchild" <ul>) of <div id="box">:

#box > ul {\
    color: red;\
}Β 
Enter fullscreen mode Exit fullscreen mode

The Adjacent (+) selector will select only the element that comes IMMEDIATELY after another element (a "sibling" element, rather than a "nested" element).Β  For example, to modify the font size of all <ul> tags that follow an <h4> tag (which are typed on the same "level" as the <ul> tags, and not nested under them), use the following:

h4 + ul {
    font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

If, in the above example, you want to select ALL <ul> tags after any <h4> tag, then use the more generalized sibling combinator of "~" instead of "+".

The Attribute selector will allow the selection of any element based off of any attribute.Β  For example, to change the font family of all <a> tags that link to Google, use the following:

a[href="https://www.google.com/"] {
    font-family: cursive;
}
Enter fullscreen mode Exit fullscreen mode

This selector an also be used to select all images of a particular source, or all inputs of a particular type, such as all checkboxes:

input[type="checkbox"] {
    border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

TIP:Β  See the complete list of Attribute Selectors.

The Nth-of-Type selector takes a specific number and selects the "-nth" instance of an element.Β  For example, to change the background color of every second <li> tag in every list (literally meaning the second tag, not every other tag), use the following:

li:nth-of-type(2) {\
    background-color: rgba(100, 175, 225, 0.5);\
}
Enter fullscreen mode Exit fullscreen mode

NOTE: To select every other tag, use the phrases (even) or (odd) instead of a specific number.

For more advanced selectors, view The 30 CSS Selectors You Must Memorize.

CSS Location:

CSS should generally be saved to its own file, but can also be included in the HTML head by using the <style> tag:

<style type="text/css">
li {
    color: red;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

The preferred method is to use a <link> tag in the HTML head to refer to the separate file containing CSS:
<link rel="stylesheet" type="text/css" href="directory/filename.css">

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied (e.g., if the body is styled to have red text, but a paragraph within the body is styled to have green text, then the text will be green because the green text style is more relevant to the specific paragraph than the general body).

The following list of selector types increases by specificity (in magnitudes of 10):

  1. Type selectors (e.g., li) and pseudo-element (e.g., :before)

  2. Class selectors (e.g., .hello), attributes selectors (e.g., [type="text"]) and pseudo-classes (e.g., :hover)

  3. ID selectors (e.g., #hello)

This Specificity Calculator may be used to test CSS specificity rules.

The Box Model

In a document, each element is represented as a rectangular box.Β  In CSS, each of these boxes is described using the standard "box model."Β  Each box has four edges: (1) Content Edge, (2) Padding Edge, (3) Border Edge, and (4) Margin Edge.Β  Padding is the space between the border and the element within the border, and the margin is the space between the border and everything outside of the border.Β 

The content edge can be controlled by setting the "width" and "height" properties in "px" or "%" (with percentage in relation to the parent element), which in turn pushes out the border edge as well, as there is direct contact between the content and border (if no padding has yet been set).

NOTE: By using the "max-width" property in conjunction with "width", you can tell the browser to make an element's width a certain percentage, but then also cap that width to a maximum number of pixels, e.g.:\

#container {\
    width: 66.66%;\
    max-width: 700px;\
}
Enter fullscreen mode Exit fullscreen mode

Space can be added between the content edge and border edge (and between the border edge and the next element's edge) by using the "padding" and "margin" properties respectively (in "px" or "%").

By default, padding and borders are set to go around all edges of an element, but can be limited by using more specific properties for top, right, bottom, and left---such as "padding-left" or "margin-top".

Alternatively, rather than typing a line of CSS for all four sides, the following shorthand can be used (with the first value setting the top property, and the remainder moving in a clockwise fashion):

p {
    margin: 20px 40px 60px 80px;
}
Enter fullscreen mode Exit fullscreen mode

NOTE: By setting the "margin" property to "auto" on the left and right, an element will automatically be horizontally centered:

p {
    margin: 0 auto 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

The above syntax can also be shorted as (with the first value representing the vertical axis, and the second value representing the horizontal axis):

p {
    margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Colors

Colors can be created through the Hexadecimal system by combining the octothorp (#) with a string of 6 hexadecimal "numbers" from 0-F, e.g.:
color: #FF1493;

This system follows an RGB scheme in which the first two numbers modify the amount of "red," the second two modify "green," and the last two modify "blue."

Alternatively, colors can be created through the RGB system: 3 channels consisting of red, green, and blue, with each ranging from 0-255, e.g.:
color: rgb(0, 255, 0);

Colors can be made Transparent through the RGBA system.Β  Just like RGB but with an alpha (transparency) channel ranging from 0.0-1.0, e.g.:
color: rgba(11, 99, 150, .6);

Backgrounds

Follows the same format as colors, e.g., background: #FF6789;

The background property can also set a background image, e.g.:

body {
    background: url(http://www.website.com/image.png);
}
Enter fullscreen mode Exit fullscreen mode

To prevent the background from Repeating an image, add the following property:
background-repeat: no-repeat;

To allow the background image to Stretch out across the entire body, use:
background-size: cover;

Borders

Borders have three key properties: "width" (typically in pixels), "color" (as noted above), and "style" (generally solid, dotted, or dashed).Β  All three properties must be present in order for a border to take effect, e.g.:

h1 {\
    border-width: 5px;
    border-style: solid;
    border-color: purple;
}
Enter fullscreen mode Exit fullscreen mode

The alternative shorthand syntax may also be used (in the specified order):
border: 5px solid purple;

Article: CSS: How to make a cool border animation

Fonts

Font-Family specifies the font for an element:

p {
    font-family: Arial;
}
Enter fullscreen mode Exit fullscreen mode

While not always necessary, you may sometimes have to put quotation marks around the font name---particularly when the font name begins with a number.

CSS Font Stack shows what percentages of operating systems have a given system font (useful for choosing a safe bet on system compatibility).

However, rather than using those limited fonts, it is better to use Google Fonts, choose a font, and embed the font's stylesheet link in your HTML <head> prior to the CSS link, e.g.:
<link href="https://fonts.googleapis.com/css?family=Esteban" rel="stylesheet">

Font-Size specifies how big the font appears (typically in pixels or "px"):

h1 {\
    font-size: 25px;
}
Enter fullscreen mode Exit fullscreen mode

Another size unit is "em", which dynamically sets font size in relation to a parent element.Β  For example, if you want to make a section of a paragraph's text in tags be twice the size of the rest of the text in the <p> tags, you would say:

span {\
    font-size: 2em;\
}
Enter fullscreen mode Exit fullscreen mode

BUT NOTE:Β  What constitutes the "standard" 1em (i.e., the default font size on a page without CSS markup) varies from browser to browser, although the size is typically around 16 PIXELS.Β  To ensure uniformity among browsers, it is useful to set the body's font size at the outset.

ALSO: Similar to "em" is "rem", which---rather than setting font size in relation to the parent element---sets the font size in relation to the "root" element on the page (i.e., the default font size discussed above).

Font-Weight specifies how thick or thin the font appears.

Typically involves absolute values of "normal" or "bold", or relative (to parent) values of "lighter" and "bolder", but can also be assigned a numeric value in increments of 100 generally from "100" to "800" depending on the font itself.

Line-Height controls the height of a given line (similar to changing line spacing in Word to 1.5 or 2.0, which means that a larger font will result in larger spacing).

Text-Align controls where an element's text is aligned on the page (typically "left", "right", and "center").

Text-Decoration is used to give text effects such as "underline", "overline", or "line-through".

Float

Normally, block level elements (such as <div>) are stacked directly underneath the preceding element on the page.Β  To change this, use the "float" property and specify a value of the direction in which the element should float ("left", "right", "none").Β Β 

When an element is floated, it is taken out of the normal flow of the document (though still remaining part of it), and it is shifted to the left or right until it touches the edge of its containing box, or another floated element.

When <img> tags are laid out in a consecutive sequence, HTML automatically places some small amount of white space between the images.Β  If you want to remove the white space, you can use "float" to remove that white space.

Article: CSS: How to make a website responsive

⬆ Back to Top

Bootstrap

About

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects.

To incorporate Bootstrap's CSS into your project, you can do either one of the following:

  1. Download the bootstrap.css file, placing it into your project directory, and creating a <link> to the bootstrap.css file; or

  2. Paste the following <link> to the bootstrap.css file, which is hosted online:\
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

NOTE: The semantics in Bootstrap have been criticized as being sometimes meaningless, and another contender for performing these tasks is Semantic UI.Β  However, Bootstrap is more popular and widely accessible through tutorials.

Important Pieces

Buttons require that they be identified first by a "btn" class followed by a second specific class.Β Β 

There are seven specific classes:

Default (standard white button): btn-default

Primary (provides extra visual weight; set to be the primary action in a set of buttons): btn-primary

Success (indicates successful or positive action): btn-success

Info (contextual button for informational alerts): btn-info

Warning (indicates caution should be taken): btn-warning

Danger (indicates a potentially dangerous action): btn-danger

Link (deemphasizes the button to look like a link while behaving like a button): btn-link

Buttons classes can be added to the <a>, <button>, or <input> elements, e.g.:

<a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
Enter fullscreen mode Exit fullscreen mode

Button sizes can be reduced or increased by adding a third size class.

Large: btn-lg

Small: btn-sm

Extra Small: btn-xs

To make a button appear "active," add the "active" class:
<button class="btn btn-success btn-xs active">Text</button>

To disable a button, add a "disabled" attribute and set its value to "disabled":
<button class="btn btn-success btn-xs" disabled="disabled">Text</button>

Jumbotron (class="jumbotron") extends the entire viewport to enlarge and showcase key content within.

By default, the Jumbotron will extend across the entire width of the screen.Β  To prevent this behavior, place the <div class="jumbotron"> within a <div class="container">, as the "container" class in Bootstrap will add padding and margins to center the Jumbotron.

Forms

Basic Form

Applying the class="form-group" attribute to all <div> elements in the form optimizes the spacing between the elements (e.g., between the username and password field).

Applying the class="form-control" attribute to an <input> element improves the style of the normal default appearance (adds rounded corners, padding, spacing, focus effects, etc.), but also makes changes to how the element behaves within the grid system.

Applying the class="help-block" to a <p> element modifies the text of a helpful hint to be more subtle and subdued in appearance.

Inline Form

A basic form will lay its contents by stacking them on top of each other.Β  However, by applying the class="form-inline" to your form (which doesn't necessarily have to be a <form> element) will place its contents in a line from left to right.

Navbar

Navbars serve as navigation headers for an application or site.Β  Navbars must be placed within a <nav> element, and, like buttons, require a general "navbar" class followed by a second specific class (typically "navbar-default", but may also be "navbar-inverse" for an inverted color scheme).

A navbar may contain a "Brand" image (e.g., company name or logo) as the first object in the navbar.Β  This is constructed by creating a "navbar-header" and placing an anchored "navbar-brand" within the header (to add a link to the homepage, typically), and then an <img> within the brand, if desired:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="#"></a>
    </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

The remaining content on the Left Side of the navbar should appear outside of the <div> containing the "navbar-header", and it should be placed in <ul class="nav navbar-nav">.Β  Each item within the navbar should be marked with <li> tags (and those should contain an <a> tag if a link is desired).

NOTE: The <li> tags will function normally even if contained in a <div> rather than <ul>; however, the <ul> should be used for semantics.

To add additional content to the Right Side of the navbar, use <ul class="nav navbar-nav navbar-right">.

To ensure that the content on the right side does not press too squarely on the right edge of the browser, everything within the <nav> should be placed within a <div class="container"> (fixed width) or <div class="container-fluid"> (full width).

To get the full benefit out of a navbar (such as dynamic dropdown menus), you must install the Bootstrap JavaScript file in your HTML <body>.Β  Like "bootstrap.css", you can either use the "bootstrap.js" file downloaded from Bootstrap, or you can use the following link:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

NOTE: Bootstrap's JavaScript requires jQuery to work, and its <script> must be placed BEFORE Bootstrap's:
<script Β src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

To have items Collapse when the browser hits mobile size, place everything that you want to collapse inside <div class="collapse navbar-collapse">.

To add the "hamburger" icon that provides a dropdown icon for the collapsed items, (1) change the above <div> to read <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">, and (2) place the following <button> within the "navbar-header":
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
 </button>
Enter fullscreen mode Exit fullscreen mode

The three "icon-bar" classes are responsible for making the three bars in the icon.

The "data-target" attribute is responsible for showing/hiding the content when the icon is clicked.Β  The value of this attribute should be set to whatever <div> (by ID) you want to show/hide.

To keep the navbar Fixed to Top, include the "navbar-fixed-top" class, and add a minimum of 50px of padding to the top of the <body> (as the navbar itself is 50px high), although it may better to add a little more for extra space.

Glyphicons

To place icons, use the link above to find the class of icon you wish to use (e.g., an envelope icon), and insert it according to the following syntax:
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>

The icon <span> should contain no text or child elements.

The aria-hidden="true" attribute is used to hide decorative icons on assistive technologies (e.g., Screen Readers).Β  If the icon is not decorative and is intended to convey meaning, then that meaning can be added through by using <span class="sr-only">, e.g.:

<div class="alert alert-danger" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error: Enter a valid email address</span>
</div>
Enter fullscreen mode Exit fullscreen mode

If you're creating controls with no text (such as a <button> that only contains an icon), you can add an "aria-label" attribute to the control and make its value be a description that will appear on screen readers.

For additional icons, install Font Awesome by placing the entire directory into your project, and then inserting the following into your <head>:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

The Grid System

Bootstrap includes a fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.Β  These 12 columns are contained within every instance of <div class="row">.Β  You can then place additional <div> elements within each row and divide them by the following syntax: <div class="col-size-#">.

The "#" option determines how many columns (out of 12) the <div>will occupy.Β  In the following example, the first row will have 3 evenly spaced <div> groups that are each 4 columns wide, and the second row will have 2 <div> groups, with the first being 9 columns in width and the second being 3 columns:

<div class="container>
    <div class="row">
       <div class="col-md-4">First Symmetrical Group</div>
       <div class="col-md-4">Second Symmetrical Group</div>
       <div class="col-md-4">Third Symmetrical Group</div>
    </div>
    <div class="row">
       <div class="col-md-9">First Asymmetrical Group</div>
      <div class="col-md-3">Second Asymmetrical Group</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The "Size" option determines the width of the <div>, which determines the "breaking point" at which the <div> elements in a single row will take up a full 12 columns and stack on top of each other, rather than appear side-by-side.

Four sizes and breaking points:

Extra Small ("col-xs-#") for mobile phones: Auto width.

Small ("col-sm-#") for tablets: 750 pixels.

Medium ("col-md-#") for smaller monitors: 970 pixels.

Large ("col-lg-#") for larger monitors: 1170 pixels.

Given the sizes above, if you were to have 4 <div class="col-md-3"> elements, the 4 elements would appear side-by-side until the screen width dropped below 970 pixels, at which point all 4 would stack on top of each other.Β  If, however, you wanted tablet users (below 970 pixels) to see the first two elements appear side-by-side and the last two elements below, you would say: <div class="col-md-3 col-sm-6">.Β Β 

This system also allows for Nesting additional "row" classes within other existing grid elements, e.g.:

<div class="container">
    <div class="row">
       <div class="col-md-3 col-sm-6">
          <div class="row">
             <div class="col-sm-6">First half of Group "1"</div>
             <div class="col-sm-6">Second half of Group "1"</div>
          </div>
       </div>
       <div class="col-md-3 col-sm-6">Group "2"</div>
       <div class="col-md-3 col-sm-6">Group "3"</div>
       <div class="col-md-3 col-sm-6">Group "4"</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Notes for Image Galleries:

Visit Unsplash for free high-quality images.

In order for images to be appropriately sized within its grid, a quick method is to nest the image within the "thumbnail" class, e.g.:

<div class="col-lg-4 col-md-6 col-sm-6">
    <div class="thumbnail">
       <img src="files/01.jpg">
    </div>\
</div>
Enter fullscreen mode Exit fullscreen mode

NOTE:

If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such asΒ Masonry,Β Isotope, orΒ Salvattore.

If you don't mind the images being of varying heights, but want to get rid of the white space bug, then seeΒ here.

If you want to crop all of the images to the same size, then see an example of this here.

⬆ Back to Top

JS Basics

JavaScript (Basic)

Intro - For beginners

What is JS (Javascript)

JavaScript is a scripting or programming language that allows you to implement complex features on web pages β€” every time a web page does more than just sit there and display static information for you to look at β€” displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. β€” you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies. MDN
image

What it used for?

To put things simply, JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. Things like menus, animations, video players, interactive maps, and even simple in-browser games can be created quickly and easily with JavaScript. JavaScript is one of the most popular programming languages in the world. BitDegree - What Is JavaScript Used For And Why You Should Learn It

Hello World In Javascript: 

alert("Hello World") β€” Output data in an alert box in the browser window
confirm("Hello World") β€” Opens up a yes/no dialog and returns true/false depending on user click
console.log("Hello World") β€” Writes information to the browser console, good for debugging purposes
document.write("Hello World") β€” Write directly to the HTML document
prompt("Remember the like!") β€” Creates a dialogue for user input
Enter fullscreen mode Exit fullscreen mode

Resources to learn it:

Mozilla’s JavaScript Guide
JavaScript track on Codecademy: Interactive tutorials for beginners.
JavaScript for Cats by Max Ogden
Eloquent JavaScript by Marijn Haverbeke
Wikibooks’ JavaScript book
JavaScript Lectures by Douglas Crockford
You Don't Know JS - Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
braziljs/js-the-right-way - An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web.
JSbooks - Directory of free JavaScript ebooks.
Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base.
SJSJ - Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
How to Write an Open Source JavaScript Library - A comprehensive guide through a set of steps to publish a JavaScript open source library.
JavaScript Tutorials - Learn Javascript online from a diverse range of user ranked online tutorials.
Functional-Light JavaScript - Pragmatic, balanced FP in JavaScript.
Clean Code JavaScript - Clean Code concepts adapted for JavaScript.
List at GitHub - Awesome Javascript - By Alexandru Gherasim

At Reddit - What 10 Things Should a Serious Javascript Developer Know Right Now?

  • Scope. If you don't understand this intimately then you aren't that serious about this language. This is the number one point intentionally and I cannot stress it enough.

  • Architecture. You don't have to be a master software architect, but if you cannot perform some basic planning and put pieces together without massive layers of tooling you are an imposter. Expecting frameworks and other tools to simply do it for you isn't very impressive.

  • DOM. It is very common to see developers hiding from the DOM by layers of abstractions and other stupid crap. querySelectors are great, but are also 2800x slower than the standard DOM methods. That isn't trivial. These methods are super simple, so there is no valid excuse for developers fumbling over this or hiding in fear. http://prettydiff.com/guide/unrelated_dom.xhtml

  • Node.js If you are a serious developer should have a pretty solid grasp of how to walk the file system. You should understand how to conveniently read files as text or less conveniently read files as bit for bit binary buffers.

  • Timing and asynchronous operations. Events, timers, network requests are all asynchronous and separate from each other and exist both in Node and in the browser. You have to be able to understand how to work with callbacks or promises.

  • Accessibility. The interactions imposed by JavaScript can present accessibility barriers. A serious JavaScript developer is already familiar with WCAG 2.0 and knows how to work within its recommendations or when to push back on violating business requirements.

  • Security. You need to have at least a basic understanding of security violations, security controls, and privacy. You don't need to be a CISSP, but you need to be able to supply recommendations and avoid obvious failures. If you cannot get this right in the most basic sense you aren't a serious developer.

  • Data structures. You need to understand how to organize data in a way that allows the fastest possible execution without compromising maintenance. This is something that is learned through academic study and repeated experience writing applications.

  • Presentation and semantics. You really need to have a basic understanding how to properly organize the content your users will consume and how to present in a consumable way efficiently. This is something almost completely learned from experience only. You might think CSS and HTML are simple skills that can be picked up when needed, but you would be absolutely wrong.

  • Knowing when to avoid the bullshit. Many developers lack the years of experience to be confident in their performance.... so some of these developers will try to fake it. Don't be an imposter, because everybody will see straight through it. Hoping mountains of abstractions, tooling, frameworks, compilers, and other bullshit will save you just bogs down your application and screws over your teammates. If you aren't confident then be honest about that and seek mentorship or get involved with open source software outside of work.

image
Source

Articles: 400+ JavaScript Interview Questions πŸŽ“ With Answers
250+ JS Resources to Master Programming πŸ’₯ Cheat SheetProjects ideas to become a javascript master πŸš€

Writing a JavaScript File

JavaScript must be saved to a file ending in the ".js" extension.

To add the JS file to your website, you must use a <script> tag in your HTML file:
<script src="filename.js"></script>

NOTE: Use double slashes "//" to make unexecuted Comments within your JS file (similar to comments that can be included in HTML and CSS).

The JavaScript Console

Accessible on the "Console" tab in "Developer Tools" in Chrome (accessed by F12).

Just as with using the Developer Tools for testing and understanding how your HTML/CSS work (rather than actually writing your HTML/CSS), the JS console serves the same function.

TIP: Pressing the "up" arrow in the console will bring back previously lines of code, so you do not have to retype it.

Primitives

There are 5 low-level, basic types of data used in JS:

Numbers

Whole, fractional, or negative numbers are all treated the same way.

In the console, the browser can perform mathematical processes in the same manner as a calculator by simply typing, e.g., "4 + 10" and pressing "Enter" to have the result returned to you.

One function known as Modulo (a.k.a., the Remainder Operator) uses the "%" placed between two numbers (like a "+" for addition), then it will divide the second number into the first number as many times as it can as a whole number, and then gives you the remainder as a result, e.g.:
10 % 3 = 1
20 % 5 = 0
15 % 11 = 4

Strings

All of the text within one pair of Quotation Marks constitutes one string.Β  This is also true of numbers that appear within quotes.

You can use either double quotes ("), single quotes (') but the pair must match or an error will result.Β 

IMPORTANT:Β  If you want to have a string include Newlines (i.e., the character that causes a line break to occur when you press Enter), then you must use the Backtick.Β  Other types of strings will remain on one line unless you use special escape characters (described below).

Backticks can also be used in conjunction with ${} to Embed Values within a string, e.g.:
Half of 100 is ${100/2}.
...translates to:
"Half of 100 is 50."

BUT NOTE: You can have a single quote within a pair of double quotes (e.g., if you are typing a word has an apostrophe), and it will still be valid.

Concatenation:

Strings can be added together formulaically to create a single string, e.g.:
'Charlie ' + 'Brown' = 'Charlie Brown'

Escape Characters:

Escape characters all start with a backslash (" "), and they are used to "escape" out of the string to write special characters that would not otherwise be valid within the string.Β  For example, if you want the string to say, "She said "Goodbye!"" without using single quotes around "Goodbye!", then say:
'She said "Goodbye! "'

The following link includes a List of Special Escape Notations.

Length Property:

Every string has a "length property," which refers to the number of characters (including spaces, numbers, etc.) within that string.Β  For example, by typing the following, the console will tell you that the string "hello" is 5 characters long:
'hello'.length;

You can also access individual characters by using Brackets, and placing a number (beginning with zero) within the brackets that corresponds to the position in the string in which the character appears (i.e., its "Index").Β  For example, JS will access the first letter in the string "hello" and return "h" if you say:
'hello'[0];

TIP: Rather than manually counting each character, you can determine the index number of the very last character by using ".length" and subtracting by 1.

NOTE:Β  To determine if something is a number or a string, you can use: console.log(typeof var);

Booleans

Only two options: true or false

TIP: To invert the value of a variable from true to false or vice versa, simply use the NOT ("!") operator, e.g.:
var x = true; // x will return true
x = !x; // x will return false
x = !x; // x will return true

Null & Undefined

These are actually values rather than a true category (no multiple types of "null" or "undefined").

Undefined variables are those which are declared but not initialized, whereas null variables are "explicitly nothing."

For example, if you run "var age;" without a value, then JavaScript is simply told to make some space for something called "age" but without storing anything there.Β  If you then ask the console to give you a return on "age", it will come back "undefined."Β  If you ask the console to return something that doesn't exist at all, like "color," then it will return an error.

By contrast, if you are making a game and making a string for the name of the current player as "var currentPlayer = 'charlie';" and that player dies (game over), you would set "currentPlayer = null;" to make it clear that there is no longer any "current player."

Variables

A variable is simply a named container with data stored within.Β  Variables are structured according to the following syntax:

var yourVariableName = yourValue; 
var name = 'Rusty'; 
var secretNumber = 73; 
var isAdorable = true;
Enter fullscreen mode Exit fullscreen mode

NOTE: The naming convention used in JS relies on a system of capitalization known as camelCase, in which the first word of the name starts with a lower-case letter, and subsequent words begin with an upper-case letter.

The name "variable" means that the data stored within that container can vary.Β  For instance, you can begin by setting the following in the console:
var name = 'Rusty';
However, if you later decide that you want to change the name, then you can simply state "name = 'Tater';" which will result in the console returning the value "Tater" when you simply type "name" into the console.

Math can also be performed with the name of a variable that has a number for its value.Β  For example, if you set a variable with the name of "num" and set its value to 73, you can type "num + 7" to receive the result of 80.

Useful Built-In Methods

Alert

Creates a pop-up message for the user when running the following:
alert('hello world');

Console.log

"Prints" data to the JavaScript console (so only those viewing the console can see the text/data):
console.log('hello world');

Prompt

Allows the browser to get input from a user via a pop-up message with a text field in which the user can input information:
prompt('What is your name?');

The information obtained through Prompt can also be stored as a variable for later use.Β  For example, the browser may run the following operation:
var userName = prompt('What is your name?');
Then after the user inputs his name, that name can be recalled by running "username".

NOTE: When a number is entered into a prompt by the user, it is stored as a string (e.g., 7 becomes "7").Β  To recall the stored string as a number, use the following syntax: Number(storedString);

If the prompt intends that the answer only be an answer and not contain any text, it would be most efficient to have the starting variable be something to the effect of:

var numberAnswer = Number(prompt('Enter a number.')); 
    or 
var answer = prompt('Enter a number.'); 
var numberAnswer = Number(answer);
Enter fullscreen mode Exit fullscreen mode

ALSO NOTE: Alternatively, you may use the Unary Plus operator ("+") to convert a string to a number: +storedString;

SEE ALSO: parseFloat()

Clear

Run "clear()" to clear the console.

Boolean Logic

Boolean logic relies upon Comparison Operators in determining whether a particular result should be labeled as "true" or "false".Β  For example, assuming the value of "x = 5", then the following operators would produce the following results:

image

Double Equals performs Type Coercion, which takes the two numbers, strings, or variables and tries to turn them into a similar type to compare them. Triple Equals, by contrast, does not perform type coercion, so a pure number 5 will not be treated the same way as a string containing the number "5".Β Β 

As a general rule, triple equals should always be preferred, as it is more specific than double equals.Β  For example, if you were to run "var y = null;" and then "y == undefined", the console would return a value of "true" because null and undefined are similar, even though the two are not technically true equivalents.

Additional quirks in JS demonstrating the anomalies that arise when using double equals:

    true == "1" // true 
    0 == false // true 
    null == undefined  // true 
    NaN == NaN // false ("NaN" stands for "not a number")
Enter fullscreen mode Exit fullscreen mode

Logical Operators

Logical operators are used to "chain together" expressions of Boolean logic.Β  For example, where "x = 5", and "y = 9", you would receive the following results:

image

AND requires both sides of the equation to be true to return a result of "true."Β  On the other hand, OR only requires one or the other to be true to return a result of "true."

NOT negates the truth (or falsity) of whatever is contained in its parentheses.Β  In the example above, the parenthetical statement says that "5 = 9", which is false.Β  Adding the NOT operator is tantamount to saying, "It is NOT TRUE that '5 = 9' is true," which is ultimately a true statement, thereby returning a result of "true."

The following values are treated as being "Falsy" in JS (whereas everything else is considered "Truthy"):
false (NOTE: This false is not within a string.Β  Any text within a string is "truthy.")
0
""
null
undefined
NaN

Conditionals

Conditionals are the means by which you add "decisions" to your code.Β  For example, when you log in to a website, there is code that checks the password you type in with the password stored on the site's server (and you are logged in if they match, and given an error message if they do not match).

Three Key Conditionals:

If

"If you are younger than 18, you cannot enter the venue":

    if (age < 18) { 
    console.log('Sorry, you are not old enough to enter the venue.'); 
    }
Enter fullscreen mode Exit fullscreen mode

Else If always follows an "if" statement as a secondary condition, as it will only run if the preceding "if" statement is false.

"If you are between 18 and 21, you can enter but cannot drink":

else if (age < 21) { 
    console.log('You can enter, but cannot drink.'); 
}
Enter fullscreen mode Exit fullscreen mode

Else will only run as a last-ditch effort when all preceding "if" and any subsequent "else if" statements are false.

"Otherwise, you can enter and drink":

else { 
    console.log('Come on in.Β  You can drink.'); 
}
Enter fullscreen mode Exit fullscreen mode

Ternary Operator

The ternary operator is a shorthand method of creating a simple "if/else" conditional by the following syntax:
condition ? ifStatement : elseStatement

For example, to perform an age check, you could state:
age >= 18 ? console.log('You can enter.') : console.log('You must leave.');

Loops

While Loops repeat code while a condition is true.Β  They are very similar to if statements, except they repeat a given code block instead of just running it once:

while (someCondition) { 
    // run some code 
}
Enter fullscreen mode Exit fullscreen mode

For example, to have the console print numbers 1-5, you would say:

var count = 1; 
    while (count < 6) { 
    console.log(count); 
    count++; 
}
Enter fullscreen mode Exit fullscreen mode

NOTE: Using "++" will add a value of 1, but you can add more value, for example, 4, by using "+= 4".Β  For subtracting, just use a "-" sign instead of a "+" sign.

If you want the user to enter a certain phrase into a prompt, but do not need exact specificity (only that the user provide the phrase somewhere in the response to the prompt), then you can use the Index Of method.Β  This method returns the first index (starting at 0) at which a given element can be found in the array (in this case, the user's response), or -1 if it is not present.

For example, if a prompt is set to loop until the user types "yes" (variable named "answer"), and the user instead types "hell yes",Β  then running answer.indexOf('yes') will return a result of 5, because the phrase "yes" begins at index 5 of the user's answer of "hell yes".Β  If the user typed "yes sir", then the result would be 0, because the phrase "yes" begins at index 0.Β  If the user fails to include the phrase "yes" anywhere in his response, then a result of -1 will be returned, due to the fact that the phrase "yes" appears nowhere in the user's answer.Β  Therefore, to make a prompt loop until the user types the word "yes" (and thereby returning a positive index to terminate the loop), the following expression may be used:

var answer = prompt('Are we there yet?');
while (answer.indexOf('yes') === -1) {
  var answer = prompt('Are we there yet?');
}
alert('Yay! We made it!');
Enter fullscreen mode Exit fullscreen mode

SEE ALSO: Do...While Loops

Infinite Loops occur when the terminating condition in a loop is never false.Β  For example, the code below will print 0 forever because "count" is never incremented:

var count = 0; 
    while (count < 10) { 
    console.log(count); 
}
Enter fullscreen mode Exit fullscreen mode

For Loops operate similarly to while loops, but with a different syntax.Β  Most significantly, the variable that is set to initialize the for loop is typically only meant to exist within the confines of that particular for loop:

Syntax:

for (init; condition; step) { 
    // run some code 
}
Enter fullscreen mode Exit fullscreen mode

"Init" (for "initialize") declares a variable and sets it to some initial value at the start of the loop, "Condition" states when this loop should keep running (for as long as the condition returns "true"), and "Step" states what should be done at the end of every iteration.

Example of how to print numbers 1-5 with a for loop:

for (var i = 1; i < 6; i++) { 
    console.log(i); 
}
Enter fullscreen mode Exit fullscreen mode

This statement "initializes" by setting "i" as 1, and provides that "i" will be printed to the console and then increased by an increment of 1 for as long as "i" is less than 6.

Example of how to print each character in the world "hello":

var str = 'hello'; 
    for (var i = 0; i < str.length; i++) { 
    console.log(str[i]); 
}
Enter fullscreen mode Exit fullscreen mode

This statement initializes by setting "i" as 0, and provides that the corresponding index of "hello" (as defined by the number at which "i" is currently set) will be printed to the console and then increased by an increment of 1 for as long as the numerical value of "i" is less than the numerical length of the "str" variable (in this case, the word "hello").

SEE ALSO: For...In Loops

Functions

Functions allow you to wrap bits of code up (with a suggested limit of 20 lines) into reusable packages.Β  They function by first "declaring" a function, e.g.:

function doSomething() { 
    console.log("HELLO WORLD"); 
}
Enter fullscreen mode Exit fullscreen mode 
...and then "calling" the function as many times you want, e.g.: 
doSomething(); 
doSomething(); 
doSomething(); 
doSomething();
Enter fullscreen mode Exit fullscreen mode

NOTE: It is necessary to include the empty parentheses after "doSomething" to actually Execute its code; otherwise, the console will simply spit the code back out for you to see in its entirety (i.e., give you the value of "doSomething").

Another Syntax:Β  As an alternative to a Function Declaration, you can also use a Function Expression:

var doSomething = function() { 
    console.log('HELLO WORLD'); 
}
Enter fullscreen mode Exit fullscreen mode

BUT NOTE: If the value of doSomething is modified, the function is lost.Β 

Arguments are how we can write functions that take inputs.Β  Rather than using empty parentheses, you insert the name of an argument within the parentheses following the function name.

For example, in order to create a function that can dynamically return the square of any numerical input, you would state:

function square(num) { 
    console.log(num * num); 
}
Enter fullscreen mode Exit fullscreen mode 
...and then "Call" square with whatever value you "pass in" (i.e., input), e.g.: 
square(10);  // prints 100 
square(4);  // prints 16 
square(3);  // prints 9
Enter fullscreen mode Exit fullscreen mode

Functions can have as many arguments as needed and can generally be given any name.Β  Simply separate the arguments with commas.Β  For example, to calculate the area of a rectangle, you must multiply length and width:

function area(length, width) { 
    console.log(length * width); 
}
Enter fullscreen mode Exit fullscreen mode 
...and then call the function, e.g.: 
area(2, 4)  // prints 8
Enter fullscreen mode Exit fullscreen mode

NOTE: If you want a function to have Default Parameters in the event the user does not specify a value, use the following syntax:

function area(length = 200, width = 400) { 
    console.log(length * width); 
}
Enter fullscreen mode Exit fullscreen mode

Other examples of useful functions include (1) being able to add or subtract from a player's score during a game (by inserting a positive or negative number as an argument); or (2) checking a user's login credentials by making their e-mail and password into two arguments, and then running an If statement to determine if they match correctly, or else return an error.

NOTE: All functions have an Arguments Object, which is an Array-Like Object that can be used to access the arguments in a manner similar to accessing an array item.Β  For example, if you have the following function...

function logNumbers(a, b, c)  { 
    console.log(arguments[0]); 
    console.log(arguments[1]); 
    console.log(arguments[2]); 
}
Enter fullscreen mode Exit fullscreen mode 
...the console will print the following upon executing logNumbers(2, 4, 6): 
2 
4 
6
Enter fullscreen mode Exit fullscreen mode

ALSO NOTE: The arguments object can be useful for constructing functions in which a varied number of arguments may be passed.Β  For example, if you want to create a function that will return the sum of any set of numbers that have been passed as arguments, you could say:

function addNumbers() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
Enter fullscreen mode Exit fullscreen mode

The Return Keyword

Every function returns something, but if you don't tell it what to return, it just returns "undefined."Β  In previous examples, functions have been used to print to the console, which is always an undefined return and cannot be used for anything.Β  For example, in the "square()" function above, if you ran square(4), the console would print 16, but it would also return "undefined".Β  Additionally, if you ran...
'4 squared is: ' + square(4);
...it would return: '4 squared is: undefined' rather than '4 squared is: 16'.Β  That is because the return keyword was not used in the original function.Β  Instead, you must state:

function square(num) { 
    return num * num; 
}
Enter fullscreen mode Exit fullscreen mode

The use of the return keyword in this example also provides the additional benefit of allowing the returned result to be stored as a variable.Β  For example, if you were to next run var result = square(104), then you would receive the returned value of 10816 after calling "result".

For another example of how the return keyword allows you to capture a returned value in a variable, consider this function which capitalizes the first character in a string:

function capitalize(str) { 
    return str.charAt(0).toUpperCase() + str.slice(1); 
}
Enter fullscreen mode Exit fullscreen mode

This is a functioned named "capitalize" that takes an argument named "str", converts the first character (at index 0) of "str" to upper case, and then adds that first character to the beginning of the remaining letters in "str" beginning at the "slice" that starts at index 1 (the second character).Β  If you run the following:

var city = "paris"; 
var capital = capitalize(city);
Enter fullscreen mode Exit fullscreen mode 
...then you would receive an output of "Paris" upon calling "capital", because the capitalize() function performed its return on the argument "str" (in the form of the substituted variable of "city").
Enter fullscreen mode Exit fullscreen mode

IMPORTANT: Once a return keyword is triggered, it will STOP THE EXECUTION OF A FUNCTION.Β  Therefore, if a function includes an if statement, such as:

function capitalize(str) { 
    if (typeof str === 'number') { 
    return "That's not a string." 
} 
    return str.charAt(0).toUpperCase() + str.slice(1); 
}
Enter fullscreen mode Exit fullscreen mode 
...if the user inputs a number rather than a word to the "str" argument, he will receive a return of "That's not a string.", and there will be no further execution of the second return statement.
Enter fullscreen mode Exit fullscreen mode

Higher Order Functions are functions into which another function can be "Passed" as an argument.Β  For example, JS includes a built-in function called setInterval().Β  Within the parentheses of this function, you first place the name of another function that you want setInterval() to run, and then follow that with the interval (in milliseconds) that the script should execute until terminated.Β  Thus, if you want to have another function (which has already been previously set) run every second, you would state:
setInterval(anotherFunction, 1000);
Upon executing this statement, setInterval() will run anotherFunction() every 1000 milliseconds.

NOTE: When the example above is executed, it will return a number (e.g., 661) in the console.Β  To stop the function from running, simply run clearInterval(661).

ALSO NOTE: If, in the above example, you want a function to run every second, but you don't want to name that function ahead of time, you can insert an Anonymous Function:

setInterval(function() { 
    // code that you want to run every second; 
}, 1000);
Enter fullscreen mode Exit fullscreen mode

Scope

Scope refers to the context in which JavaScript is being executed (i.e., which properties and variables are "visible" within a particular function, yet are excluded by or different in another function).Β  For example, if you declare the following function:

function getNumber() { 
    var x = 40; 
    console.log(x); 
}
Enter fullscreen mode Exit fullscreen mode 
...the console will print 40 if you call the function.Β  However, if you simply call "x", then the console will return an error saying "x" is undefined.Β  This is because the scope in which "x" exists in the function differs from the "Global" scope, where "x" does not exist.Β  Conversely, if you were to later define "x" as a variable with a value in the global scope, and then run the function, the function will still print 40 notwithstanding the value of "x" in the global scope.
Enter fullscreen mode Exit fullscreen mode

HOWEVER:Β  If you were to have set "var x = 40;" in the global scope, and then created the following:

function getNumber() { 
    console.log(x); 
}
Enter fullscreen mode Exit fullscreen mode 
...the Console will still print 40.Β  This is because when a variable is defined outside of a function, you still have access to it inside of that function AS LONG AS the interior of the function does not redefine that variable.Β  In other words, a more-specific "child" scope is governed by values set in the "parent" scope unless otherwise stated.Β  The converse, however, is not true, and the parent scope will not be governed by anything set in the child scope.
Enter fullscreen mode Exit fullscreen mode

BUT NOTE:Β  If the variable was set FIRST in the parent scope, then directly modified in the function, e.g.:

var x = 40; 
    function getNumber() { 
    x = 80; 
    console.log(x); 
}
Enter fullscreen mode Exit fullscreen mode 
...then simply calling "x" in the console will print a value of 80.Β  This is because the function is not declaring a "new" variable "x" within itself; rather, it recognized that there was already a variable "x" existing outside of itself and redefined that variable externally while incorporating the redefined value internally. HOWEVER, had the function stated "var  x = 80;", then the function would have created its own "x" as an internal variable, and calling "x" globally would print 40.
Enter fullscreen mode Exit fullscreen mode

Arrays

BasicsΒ 

Arrays are high-level data structures (ways of holding information using JS) containing lists of data.Β  For example, rather than making four "friend" variables:

var friend1 = 'Mac'; 
var friend2 = 'Dennis'; 
var friend3 = 'Charlie'; 
var friend4 = 'Dee';
Enter fullscreen mode Exit fullscreen mode 
...you could use an array by making a comma-separated list, like so: 
`var friends = ['Mac', 'Dennis', 'Charlie', 'Dee'];`
Enter fullscreen mode Exit fullscreen mode

Arrays are indexed starting at 0 (just like characters in a string).Β  The index method is used to get data out of the array, e.g.:

console.log(friends[0])  // "Mac"
friends[1] + ' <3 ' + friends[2]  // "Dennis <3 Charlie"
Enter fullscreen mode Exit fullscreen mode

Arrays are useful in that they can be updated by simply stating, for example:
friends[0] = 'Frank';
...and all lines of code that would have otherwise produced "Mac" now say "Frank".

Arrays are also useful in that new data can be added to them without modifying the original line of "var friends ..."Β  Rather, you can simply assign a new value/string (or any other data, including "true," "null," or even other arrays) to the next available index, and it will be added to the array, e.g.:
friends[4] = 'Cricket';

To initialize an array without yet adding data to the array, you can simply state:
var friends = [ ];
...or...
var friends = new Array();

Arrays also have a length property that can be called by using ".length", e.g.:

var friends =  ['Frank', 'Dennis', 'Charlie', 'Dee', 'Cricket'];
    friends.length;  // returns 5 (because there are 5 friend values)
Enter fullscreen mode Exit fullscreen mode

Arrays can be nested within arrays like so:

var friendGroups = [ 
    ['Friend 1', 'Friend 2'], 
    ['Friend A', 'Friend B'] 
    ];
Enter fullscreen mode Exit fullscreen mode

NOTE: When arrays are nested, you can call a specific index within a nested array like so :
console.log(friendGroups[1][0]); // "Friend A" (takes the second
// index of the first array, and the
// first index of the nested array)

Built-In Array Methods

For a complete list of Array Methods, refer to the "Methods" section in the MDN link to "Arrays" above.

Five Important Methods:

Push/Pop

Use push() to add a value to the END of an array (rather than having to count or use "length" to figure out which index in the array you would have to manually add the value to), e.g.:

var colors = ['red', 'orange', 'yellow']; 
colors.push('green');  // ['red', 'orange', 'yellow', 'green']
Enter fullscreen mode Exit fullscreen mode

If you were to then state "colors.pop();", then "green" would be removed, because pop() removes the last item in an array.

NOTE: When pop() is used, the console actually returns the removed variable.Β  Because a value is returned, that means it can be stored as a variable if so stated:
var removedColor = colors.pop(); // stores "green"

Unshift/Shift

unshift() and shift() operate in the same way as push() and pop(), except that they add/remove values to the BEGINNING of an array.

NOTE: While counterintuitive, remember that unshift() is used to ADD, not to remove.

indexOf

indexOf() takes an argument and tries to find that argument in a given array.Β  If it finds it, then it will return the FIRST index of where it's found in the array, e.g.:

var friends =  ['Frank', 'Dennis', 'Charlie', 'Dee', 'Cricket']; 
friends.indexOf('Dennis');  // 1
Enter fullscreen mode Exit fullscreen mode

NOTE: Remember that indexOf() will only return the FIRST index, so if the same argument appears elsewhere in the array, that index will not be returned.

ALSO: If an argument is NOT present, "-1" will be returned.

Slice

slice() is used to copy different portions of an array, e.g.:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
var citrus = fruits.slice(1, 3); 
    ...leads to... 
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
var citrus = ['Orange', 'Lemon'];
Enter fullscreen mode Exit fullscreen mode

NOTE: The first number in slice argument signifies the first index that will be copied ("Orange"), and the second number represents where the slice will end AND IS NON-INCLUSIVE ("Apple").Β  Thus, only "Orange" and "Lemon" are copied out.

TIP: If you want to Duplicate an entire array, simply omit the numbers in the slice argument, and all data in the array will be copied over.

Splice

splice() changes the contents of an array by removing and/or adding elements at any point in the index.

To Remove an element, use this syntax:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
fruits.splice(1, 2); 
    ...leads to... 
var fruits = ['Banana', 'Apple', 'Mango'];
Enter fullscreen mode Exit fullscreen mode

The splice syntax works by using the first number as the index number at which to start changing the array (in this case, index 1, which is "Orange").Β  The second number is the Delete Count, which can be 0 (to not delete the starting index) or any other positive number to indicate how many indices (beginning from your starting index) are to be deleted (in this case, delete two indices starting with index 1, which means deleting indices 1 and 2, i.e., "Orange" and "Lemon").

To Add an element, use this syntax:

var fruits = ['Banana', 'Apple', 'Mango']; 
fruits.splice(1, 0, 'Orange', 'Lemon'); 
    ...leads to... 
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
Enter fullscreen mode Exit fullscreen mode

In this case, splice() is told to:
(1) look at index 1 (starting as "Apple"),
(2) abstain from deleting the element at index 1,
(3) insert "Orange" as the new index 1, and
(4) insert "Lemon" after "Orange" (this addition process can be repeated indefinitely and will ensure that "Mango" remains as the last index).

Array Iteration is the process in which a code will run through every element in an array, rather than just one element.Β  For example, message board comments are stored in an array, and they are only displayed when some code runs through that array and creates HTML content for each comment stored in the array.

For Each Iteration (newer method):

var colors = ['red', 'orange', 'yellow', 'green']; 
colors.forEach(function(color) {  // "color" is a placeholder to represent a console.log(color);  // singular instance of any given element in });  // the collection; call it whatever you want
Enter fullscreen mode Exit fullscreen mode

Essentially, the "color" placeholder argument merely represents the value of every element in the array.Β  Thus, the code is calling the console.log() function "for each" element, and then passing in each element's value.

Alternatively, you could set a function beforehand, and then run it through forEach():

var colors = ['red', 'orange', 'yellow', 'green']; 
function printColors(color) { 
  console.log(color); 
} 
colors.forEach(printColors);
Enter fullscreen mode Exit fullscreen mode

IMPORTANT: forEach() executes a callback function once for each element in the array in ascending order.Β  The callback function is expected to have AT LEAST 1 (BUT UP TO 3) ARGUMENTS separated by commas).Β  The first argument represents the Element in the array.Β  The second argument represents the Index of said element.Β  The third argument represents the Array that forEach() was called on (which will be the same for every iteration of the loop).Β  Thus, if you want to print both the contents of a list along with its index number, you would state:

var colors = ['red', 'orange', 'yellow', 'green']; 
function printColors(x, i) { 
   console.log(i + ': ' + x); 
} 
colors.forEach(printColors);
Enter fullscreen mode Exit fullscreen mode 
...which would yield: 
0: red 
1: orange 
2: yellow 
3: green
Enter fullscreen mode Exit fullscreen mode

Article: Asynchronous JS: Working with try/catch and promises

For Loop Iteration (older method):

var colors = ['red', 'orange', 'yellow', 'green']; 
    for (var i = 0; i < colors.length; i++) { 
    console.log(colors[i]); 
}
Enter fullscreen mode Exit fullscreen mode

The above code will start by printing index 0 of "colors" to the console, and repeat the process until reaching index 3.Β  This is possible because the length of "colors" is 4, and the final index value is 3.Β  As the final index in an array will always be one digit smaller than the length of the array, this loop will necessarily run until all array values are printed.

Objects

Basics

An object, like an array, is a collection of related data (of any type) and/or functionality.Β  Unlike an array, objects are meant to handle data that does not follow a logical and progressive order.Β  Objects have no built-in order.Β  Objects use the following Syntax (Key-Value Pairs where the "key" (name) is separated from the value by a colon, and all key-value pairs are separated by commas):

var objectName = { 
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};
Enter fullscreen mode Exit fullscreen mode

Retrieving Data from an object is done by either Bracket or Dot Notation:

var dog = { 
    name: 'Rusty', 
    breed: 'Mutt', 
    age: 3 
};
Enter fullscreen mode Exit fullscreen mode 
...bracket notation: 
`console.log(dog['name']);  // "Rusty"` 
...dot notation: 
`console.log(dog.name);  // "Rusty"`
Enter fullscreen mode Exit fullscreen mode
Usage Notes:Β 

You CANNOT use dot notation if the property starts with a number:

someObject.1blah  // invalid 
someObject['1blah']  // valid
Enter fullscreen mode Exit fullscreen mode

You CANNOT use dot notation if the property name has a space in it (not a good practice anyway):

someObject.fav color  // invalid 
someObject['fav color']  // valid
Enter fullscreen mode Exit fullscreen mode

You CAN look up things using a variable when using bracket notation:

var str =  'name'; 
someObject.str  // doesn't look for "name" 
someObject[str]  // evaluates str and looks for "name"
Enter fullscreen mode Exit fullscreen mode

Updating Data in an object is done just like an array (access a property and reassign it):

objectName['propertyName'] = newPropertyValue; 
    ...or... 
objectName.propertyName = newPropertyValue;
Enter fullscreen mode Exit fullscreen mode

Creating Objects can be done in one of three ways:

Make an empty object and then add to it:

var person = {}; 
person.name = 'Travis'; 
person.age = 21; 
person.city = 'LA';
Enter fullscreen mode Exit fullscreen mode

Make an object by executing a built-in function and then add to it:

var person = new Object(); 
person.name = 'Travis'; 
person.age = 21; 
person.city = 'LA';
Enter fullscreen mode Exit fullscreen mode

Make an object all at once:

var person = { 
    name: 'Travis', 
    age: 21, 
    city: 'LA' 
};
Enter fullscreen mode Exit fullscreen mode

Objects can be inserted within arrays, so that each item within an array is its own object.Β  This is typical when working with an online array of comments, posts, friends, etc.:

var posts = [ 
    { 
    title: 'Article 1', 
    author: 'Author 1', 
    comments: ['Awesome post.', 'Terrible post.'] 
    }, 
    { 
    title: 'Article 2', 
    author: 'Author 2', 
    comments: ['I love this.', 'I hate this.'] 
    } 
];
Enter fullscreen mode Exit fullscreen mode

To access the title of the first post, you would state:
posts[0].titleΒ 

To access the second comment of the second post, you would state: posts[1].comments[1]

Adding Methods to Objects

A "method" (e.g., alert(), prompt(), indexOf(), etc.) is a function that is a property inside of an object. console.log() is an example of a method that has been added to an object.Β  "console" is a built-in object with "log()" as a built-in function.Β  By putting the two together (console.log), you are having JS look at the "console" object and run its "log()" function.Β Β 

Adding methods to objects (rather than having them stand alone) is useful for grouping things together logically to avoid a "Namespace Collision."Β  For example, to have a function return "WOOF" when a "dog" object "speaks," but have it return "MEOW" when a "cat" object speaks," you would state:

var pets = [ 
    { 
    type: 'dog', 
    speak: function() { 
      return 'WOOF'; 
    } 
    }, 
    { 
    type: 'cat', 
    speak: function() { 
      return 'MEOW'; 
    } 
    } 
];
Enter fullscreen mode Exit fullscreen mode 
...so that pets[0].speak() will return "WOOF", and pets[1].speak() will return "MEOW".
Enter fullscreen mode Exit fullscreen mode

ThisΒ 

The "this" keyword behaves differently depending on the context.Β  The following example illustrates how "this" behaves when used in methods that have been added to an object.

Suppose you're making an app that has some comments, and you want to have some comment data stored in an object:

var comments = {
  data: [
     'Good',Β 
     'Bad',Β 
     'Okay' 
  ]
};
Enter fullscreen mode Exit fullscreen mode

Now suppose you want to make a method called "print()" and add it to "comments".Β  You could define a separate function, and then "print" the data by running "print(comments.data)":

function print(arr) {
  arr.forEach(function(elem) {
  console.log(elem)
  });Β Β 
} 
print(comments.data);  // "Good,Bad,Okay"
Enter fullscreen mode Exit fullscreen mode

But if you want to add the print function to the comments object, you can use "this" to refer to the data that is contained in the same object (i.e., "this" object):

var comments = {
  data: [
  'Good',Β 
  'Bad',Β   
  'Okay'
  ],
print: function() {
  this.data.forEach(function(elem) {
    console.log(elem)
  });Β Β 
  }
};
Enter fullscreen mode Exit fullscreen mode

The "this" keyword essentially allows you to use the values contained in comments.data inside of comments.print without the need for any additional argument.Β  Thus, by writing "this" inside of a method, it refers to the object that the method is defined in.

⬆ Back to Top

DOM ("Document Object Model") Manipulation

Background

The DOM is the interface between JS and HTML/CSS (for making content interactive).Β  When you load an HTML page, the browser turns every HTML tag into a JS object that we can select and manipulate, and all of these are stored inside of a "document" object.Β  To view the HTML elements converted into JS objects (i.e., the DOM), type the following into the console: console.dir(document);

NOTE: When performing DOM manipulation, be sure that the JS files are loaded after all HTML is written (or else you will be trying to manipulate HTML that does not yet exist to the JS files, and it will not work.)

Important DOM Selector Methods (the following five methods have been added into the "document" object):

document.getElementById()

Takes in an ID name and returns the one element that matches that name (because an ID can only be associated with one element in a page).Β  For example, if you have an HTML element with the ID of "highlight", you can return that element by stating:
var tag = document.getElementById('highlight');

You can then use console.dir(tag) to see all of the properties contained in the "highlight" object.

document.getElementsByClassName()

Operates in the same way as getElementById(), but applies to all elements sharing the same class.Β  If you want to return a list of all elements with the class "bolded", you would state:
var tags = document.getElementsByClassName('bolded');

You can then simply state "tags" to see all of the properties for all "bolded" objects, and you can use console.log(tags[0]) to access the first index of the Node List (not technically an array, but is array-like) containing the "bolded" objects.

The node list is "array-like" in the sense that you can access individual indices, but you CANNOT apply forEach() to it (because there is no forEach() function defined for these node lists; they are defined for arrays).

BUT NOTE: You can use the "Array.from()" method to convert node lists and HTML collections into arrays.

NOTE: You can also access a specific index (e.g., the first index) more directly by simply stating:
var tags = document.getElementsByClassName('bolded')[0];

document.getElementsByTagName()

Operates in the same way as the two above, but it refers to a general HTML tag (such as <li>, <ul>, <h1>, <head>, <body>) rather than a specific class/ID.Β  If you want to return a list of all elements with the

  • tag, state: var tags = document.getElementsByTagName('li');

    document.querySelector()

    Operates in the same fashion as the methods above, but does so by using a CSS-Style Selector (i.e., "#" for ID, and "." for class). BUT, it differs significantly by only returning the FIRST MATCH.Β  For example, to if you want to return an HTML element with the ID of "highlight", you would state:
    var tag = document.querySelector('#highlight');

    If "highlight" were a class, you would use a period instead of an octothorp, but note that you will only return the first match.

    This works for any syntax that would be valid in CSS, e.g.:
    var tags = document.querySelector('li a.special');

    query.Selector can also take in basic HTML tag names like <h1>:
    var tag = document.querySelector('h2');
    ...but, again, only for the first match.

    If you want to select a Specific Type of element (e.g., a numerical input), you would use brackets and state:
    var tag = document.querySelector('input[type="number"]');

    document.querySelectorAll()

    Operates in the same manner as query.Selector, except it returns a node list of ALL elements (as objects) that match a given CSS-style selector.

    Manipulating Style

    A DOM object's Style property is one way to manipulate an HTML element's style, e.g.:

    // select your object: 
var tag = document.getElementById('highlight'); 
// manipulate your object: 
tag.style.color = 'blue'; 
tag.style.border = '10px solid red'; 
tag.style.fontSize = '70px'; 
tag.style.background = 'yellow'; 
tag.style.marginTop = '200px';

    NOTE: This is not actually the best way to manipulate an object, as it is very repetitious (not "dry" code), but more significant is the "Separation of Concerns" (the principle that HTML, CSS, and JS should each be responsible for their own separate domain, and crossover between the three should be avoided -- HTML should be pure structure, CSS should be pure presentation, and JS should be pure behavior).Β Β 

    Rather than changing multiple style properties in JS, you should turn them on/off by using the CSS file.Β  For example, you can define a CSS class, select an element in JS, and add the class to its classList:

    // define a class in CSS: 
.toggleWarning { 
    color: red; 
    border: 10px solid red; 
} 

    // add the .toggleWarning class to a select object in JS: 
var tag = document.getElementsByTagName('h1'); 
tag.classList.add('toggleWarning');

    If you so choose, you can later remove the class by stating:
    tag.classList.remove('toggleWarning');

    A similar useful method is toggle, which operates by (1) adding the specified class if it is not present in the class list, and (2) removing the specified class if it is present in the class list:
    tag.classList.toggle('toggleWarning');

    NOTE: A class list is technically NOT AN ARRAY.Β  This is why you must use add() and remove() rather than push() and pop().

    Manipulating Text and Content

    The textContent property retrieves the text inside of an HTML element.Β  "Text" is defined as anything between the HTML tags but not including any tags contained within (it extracts only Plain Text).Β  The method can be used to alter the text by the following syntax:
    tag.textContent = 'blah blah blah';

    NOTE: Because this method only works in plain text, no modifiers like <strong> or <em> will be preserved.

    The innerHTML property is used to manipulate both HTML Text and Inner Elements.Β Β 

    IMPORTANT SYNTAX NOTE: When manipulating text and content (or style), it is not necessary to set a variable first.Β  Instead, you can simply add the textContent or innerHTML property after the selector method, e.g.:
    document.querySelector('h1').textContent = 'Heading 1';

    Manipulating Attributes

    The attributes of an HTML element (e.g., href, src, or anything else following the name="text" syntax, such as id, class, etc.) can be modified by using getAttribute() and setAttribute() to read and write attributes.Β  For example, to return the URL for the following:
    <a href="https://www.google.com/">Search</a>
    ...you would state:
    var link = document.querySelector('a');
    link.getAttribute('href');
    ...and to modify the link, you would state the attribute as the first argument in the method, and the new URL as the second argument:
    link.setAttribute('href', 'https://www.yahoo.com/');

    NOTE: When manipulating Images, the "src" attribute may be ignored if the "srcset" attribute has also been set.Β  In such cases, srcset must be modified.

    DOM Events

    The MDN Event Reference contains all of the different events that are recognized by the DOM application programming interface (API).Β  Some common events to be most familiar with are "click", "change", "mouseover", and "mouseout".

    Events trigger the running of code when a certain action has been taken, as opposed to automatically executing when the page loads (e.g., clicking a button, hovering over a link, pressing a key, etc.).Β  The event must be selected and then attached to a specific element by means of an Event Listener (e.g., "Listen for a click on this <button>."Β  To add a listener, use the addEventListener method through this syntax:
    element.addEventListener('type', functionToCall);

    For example, to have a message print to console when the first button in a document is clicked, you would state:

    var button = document.querySelector('button');  // select element 
button.addEventListener('click', function() {  // add event listener 
    console.log('The button has been clicked.');  // run code 
});

    It is not necessary to use an anonymous function.Β  The same code could be executed as follows:

    var button = document.querySelector('button'); 
button.addEventListener('click', printConsole); 
function printConsole() { 
    console.log('The button has been clicked.'); 
} 

    However, unless there is a need to use a named function again somewhere else outside of the click listener, it is better to simply use the anonymous function.

    NOTE: You can have more than one listener on a given element.Β  They will execute in the order that they were added.

    THIS NOTE: Inside of a listener, the "this" keyword refers to the item that was clicked on (or hovered upon, or which a keypress referred to, etc.).Β  So whatever element is attached to the addEventListener is the event to which "this" refers.Β  This is useful in situations where you want a large number of similar but individual (sibling) elements to run specific code only upon itself when activated.Β  For example, if you have a <ul> with a dozen <li> tags within, and you want each individual <li> to change its color when clicked, you can use a for loop and "this" as follows:

    var lis = document.querySelectorAll('li'); 
for (var i = 0; i < lis.length; i++) { 
    lis[i].addEventListener('click', function() { 
      this.style.color = 'pink'; 
    }); 
}

    ⬆ Back to Top

    JS Advanced

    This

    "This" is a reserved keyword, which means it cannot be set as the value of any variable. The value of "this" is determined upon execution (i.e., "Execution Context").
    There are Four Rules governing how the value of "this" is determined:

    Global Context

    This rule applies when you see "this" applied outside of a declared object. When you see the word "this" in the global context, its value refers to the Global Object, which is the Window in the browser environment. Thus, if you were to console.log(this), you would return "window".
    In essence, every variable that you declare in the global context is in fact attached to the window object, which is what allows "this" to work in the global context without an object being declared. For example, you can create the following variable:
    var person = 'Ellie';
    …which can then be accessed as:
    window.person
    …and which is also synonymous with:
    this.person
    NOTE: Even when you use "this" inside of a Function, its value is still the global object if no other object is declared within the function, e.g.:

    function variablesInThis() {
    this.person = 'Ellie';  // still the same as var person = 'Ellie'
}

    HOWEVER: The above process is considered bad practice for setting global variables, as global variables should be declared at the top of your code (with the value either declared immediately or at a later time within a function). If you want to prevent the accidental creation of global variables in a function, you can state "use strict" (in quotes) at the top of your JS file, which will return a TypeError indicating that "this" is Undefined upon execution.

    Object/Implicit

    When "this" is found inside of a Declared Object, its value will always be the Closest Parent Object. For example, given the following object…

    var person = {
    firstName: 'Ellie',
    sayHi: function() {
        return 'Hi ' + this.firstName;
    }
}

    …executing "person.sayHi()" will return "Hi Ellie" because "this.firstName" is equivalent to stating "person.firstName" due to "person" being the closest parent object to "this".
    NOTE: Caution must be exercised with Nested Objects, as a reference to properties beyond the scope of the nested object may result in undefined values being returned when using "this" within the nested object.

    Explicit

    In order to avoid problems associated with nested objects, you can set the context of "this" by using the Call, Apply, or Bind methods (which can only be used by Functions, and not by any other data type).
    Call uses the following syntax:
    function.call(thisArg, arg1, arg2, …);
    The first argument is whatever object you want the value of "this" to be. The subsequent arguments are for any optional parameters to be used in the function in which you are changing the context of "this".
    NOTE: When the call method is used on a function, that function is immediately invoked.
    Consider the following example:

    var firstPerson = {
    firstName: 'John',
    lastName: 'Doe',
    fullName: function() {
            return this.firstName + ' ' + this.lastName;
    }
}

    var secondPerson = {
    firstName: 'Mary',
    lastName: 'Jane'
}

    If you want to return the full name of Mary Jane, there is no need to duplicate the fullName function from the first person (John Doe). Rather, you need merely state…
    firstPerson.fullName.call(secondPerson);
    …because using the "secondPerson" argument in call will result in the "this" keyword from the "firstPerson" object actually being applied to the "secondPerson" object instead (i.e., Mary Jane).
    Apply uses the following syntax:
    function.apply(thisArg, [argsArray]);
    Apply is almost identical to call except it only takes two arguments. The first argument operates the same as call, while the second is an Array (or ARRAY-LIKE OBJECT) that will be passed to the function in which you are changing the value of "this".
    NOTE: When the apply method is used on a function, that function is immediately invoked.
    Consider the following example:

    var firstP = {
    name: 'John',
    addNumbers: function(a, b, c, d) {
       return this.name + ' calculated ' + (a+b+c+d);
      }
}

    var secondP = {
    name: 'Jane'
}

    Stating "firstP.addNumbers(1, 2, 3, 4)" will return "John calculated 10". You can do the same for Jane by either using call:
    firstP.addNumbers.call(secondP, 1, 2, 3, 4);
    …or by using apply:
    firstP.addNumbers.apply(second, [1, 2, 3, 4]);
    Bind uses the following syntax:
    function.bind(thisArg, arg1, arg2, …);
    Bind is almost identical to call except that instead of invoking the function immediately, bind returns a function definition. This allows you to save a function with different values of "this" and invoke them at a later time (known as Partial Application), as you may not initially know all of the arguments that will be passed to a function.

    In the example for apply above, you might know that you always want to add 1 and 2 for the second person, but not know what other numbers will need to be calculated. You could first state:
    var sPCalc = firstP.addNumbers.bind(secondP, 1, 2);
    …and then include more numbers on execution:
    sPCalc(3, 4) // returns "Jane calculated 10"
    Bind is also important when working with asynchronous code (e.g., setTimeout), as it allows you to set the context of "this" for a function to be called at a later point in time. Consider the following:

    var person = {
    name: 'John',
    sayHi: function() {
        setTimeout(function() {
            console.log('Hi ' + this.name)
        }, 1000);
    }
}

    Although you may expect "Hi John" to be displayed in the console after 1 second, this does not occur. This is because setTimeout() does not run console.log() concurrently with the creation of the "person" variable; rather, it only executes after the timer expires. As a result, setTimeout() is run in the Global Context as a Window Object. Thus, "this" actually refers to window rather than "person", because window is the value of "this" upon execution. You can fix this by stating:

    var person = {
    name: 'John',
    sayHi: function() {
        setTimeout(function() {
            console.log('Hi ' + this.name)
        }.bind(this), 1000);
    }
}

    This may appear to be confusing, as you are using "this" to change the value of "this". However, at the time "person" is CREATED, "this" does in fact refer to "person" because "person" (not window.setTimeout) is the nearest parent object to "bind(this)". Here, "bind(this)" is equivalent to "bind(person)".
    Article: Asynchronous JS: Finally discover how to use SetTimeout and SetInterval

    New

    The new operator is used together with a Constructor Function to create a new object. Inside the constructor function definition, the keyword "this" refers to the object that is created. When the new operator is used, an implicit return "this" is added to the constructor function.
    NOTE: A popular convention in JS is to capitalize the names of Constructors, which basically operate as model templates upon which new objects will be based.
    For example, you can create a constructor function for a person's name:

    function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

    In this context, "this" would apply to window in the global context (as there is no object has been declared). However, when paired with the new operator, "this" will instead refer to the newly created object that has been stored as a variable. For example…
    var john = new Person('John', 'Doe');
    …results in "this.firstName" being equal to "john.firstName" (as "john" is the new object) and "this.lastName" being equal to "john.lastName".

    Object-Oriented Programming ("OOP")

    About

    OOP is a programming model that uses blueprints to create objects. Such blueprints are conventionally called Classes, and the created objects are called Instances. The goal is to make classes modular so they can be reused and shared among all parts of an application. JS does not have "built-in" classes in version ES5, but they can be implemented via constructor functions and objects.
    New Operator
    As noted in the "this" section above, the new operator is used together with a constructor function to create a new object. The new operator works by:
    (1) creating an empty object;
    (2) setting the keyword "this" to be that empty object;
    (3) adding an implicit "return this" line to the end of the function; and
    (4) adding a property onto the empty object called "proto" (a.k.a., "Dunder Proto", which links the created object to the prototype property on the constructor function.
    Multiple Constructors
    When working with multiple constructors, you can make use of "this" and call to optimize your code, e.g.:

    function Dog(name, age) {
    this.name = name;
    this.age = age;
    this.bark = function() {
        console.log(this.name + ' just barked!');
    }
}
function Cat(name, age) {
    Dog.call(this, name, age);
    this.meow = function() {
        console.log(this.name + ' just meowed!');
    }
}

    NOTE: It may be confusing to see that "this" is used as the first argument in Dog.call() of Cat() to redefine "this" as used in Dog(). However, remember that the constructor will be used with the new operator. This means that, when new is applied to Cat(), a NEW OBJECT will be created in which all "this" keywords in Cat() will refer to the new cat object (to which "this" will now apply because the cat is the closest parent object). Thus, you can use "this" as the first argument in Dog.call() to redefine all "this" keywords in Dog() to refer to the newly created Cat() object.
    For further optimization, you can use "this" and apply together with a built-in JS object called "arguments", which is an array-like object corresponding to the arguments passed to a function. As "arguments" is an array-like object, it can be used with apply as a shorthand, e.g.:

    function Cat(name, age) {
    Dog.apply(this, arguments);
    this.meow = function() {
        console.log(this.name + ' just meowed!');
    }
}

    Prototypes

    Basics

    Prototypes are the mechanism by which JS objects inherit features from one another. Upon creation, all constructors possess a prototype property, which is an object that can have properties and methods attached to it. The prototype property has two properties: (1) "constructor", which relates back to the definition of the constructor itself; and (2) "proto", which allows properties or methods of the prototype to be accessed by any object created from the constructor.
    NOTE: The "proto" property of a created object is identical to the prototype property of the constructor. Thus, if you created an object from a Cat() constructor, the following would be true:
    catObject.proto === Cat.prototype

    Prototype Chain

    If you want to add a property or method to all objects that will be (or, more significantly, already have been) created by a constructor, you need only add that property/method to the prototype of the constructor. For example, you have already created two cats (named "button" and "kiwi") from a Cat() constructor, and the only properties in the constructor are "name" and "age". However, you now want to add a property called "isMammal", which is to be set as "true" for all cats. You can state…
    Cat.prototype.isMammal = true;
    …which then results in the following statements returning true:
    button.isMammal; // true
    kiwi.isMammal; // true
    In the example above, if you were to access "button" to view its properties and methods, you would not immediately see "isMammal" as a property directly under "button" as you would with "name" and "age". Rather, you would have to access the "proto" property under "button" to see "isMammal". Nevertheless, you are still able to access "button.isMammal" without saying "button.proto.isMammal". This is because JS follows the prototype chain (by following a line of "proto" properties) to locate an object's properties or methods.

    The chain here works as follows:
    (1) If the requested property/method is not found directly in the cat object, check the cat's "proto".
    (2) If the cat's "proto" (which itself an object constructed by JS's built-in Object() constructor) does not contain the property/method, then refer to the Object() constructor's "proto" nested under the cat's "proto".
    (3) If the Object() constructor's "proto" does not contain the property/method, then the result is "undefined" and the inquiry goes no further, as the Object() constructor is the last link in the chain.
    NOTE: This manner in which JS finds methods can be applied to all created objects. For example, all arrays are created by JS's built-in Array() constructor, which contains a prototype object to which the "push" method (among others) is attached. If you create an array named "cats" and you want to push a new cat into the array, you are able to say "cats.push('Stumpy')" rather than "cats.proto.push('Stumpy')" due to prototype chaining.
    The prototype chain allows for further Code Optimization. For example, if you have a Dog() constructor and you want to apply a bark() method to each dog created by Dog(), you would have a lot of repetitive code if you inserted the bark() method directly into the Dog() constructor, as the bark() method would be repeated in every created dog object with the exact same value each time. But by taking advantage of the linking capabilities of the prototype chain, you could simply state:

    function Dog(name, age) {
    this.name = name;
    this.age = age;
}
Dog.prototype.bark = function() {
    console.log(this.name + ' just barked!');
}
    Closures
    About

    A closure is a function that makes use of variables defined in outer functions that have previously returned. Consider the following example:

    function outerFunc() {
    var outerData = 'closures are ';
    return function innerFunc() {
        var innerData = 'awesome';
        return outerData + innerData;
    }
}

    In this example above, if you were to simply call outerFunc(), you would only return the definition of the inner function, which would appear as:

    function innerFunc() {
    var innerData = 'awesome';
    return outerData + innerData;
}

    However, as the result of outerFunc() is itself a function, this gives you the ability to call innerFunc() immediately upon calling outerFunc() by simply stating outerFunc()(), which returns, "closures are awesome". Because innerFunc() makes use of the returned outerData variable defined in outerFunc(), that makes innerFunc() a closure.
    NOTE: If an inner function does not make use of any returned external variables, then it is merely a Nested Function.
    NOTE: When working with closures, you may either call the inner function right away (via "yourFunc()()"), or you can store the result of the outer function to be used by the inner function at a later time (similar to how bind() works), e.g.:

    function outer(a) {
    return function inner(b) {
        return a + b;
    }
}
var storeOuter = outer(5);
storeOuter(10)  // returns 15
    Usage

    Closures are useful for creating Private Variables, which are variables that cannot be modified externally.
    Consider the following example:

    function counter() {
    var count = 0;
    return function() {
        return ++count; // Pre-Increment
    }
}

    If you were to call counter()() repeatedly, you would return "1" each time, without the count ever going up. This is because there is no "container" to keep track of the incremented count variable that exists only within the counter() function. However, if you were to save counter() to a new variable in the global scope:
    var counter1 = counter();
    …then there is now a persistent variable (i.e., counter1) to "house" the increments to "count" within counter1's own counter() function.
    The primary benefit of using closures in this way is that it is no longer possible for the value of count within counter1 to be externally modified by any other function. Thus, you are free to repeat this process with a new variable named "counter2", which, in turn, will have its own internal count variable insulated from any external modification. Neither will have their count value increase except through their own internal operations.
    Consider the following for another more "practical" example:

    function classroom() {
    var instructors = ['Adam', 'Ben'];
    return {
        getInstructors: function() {
            return instructors;
        },
        addInstructors: function(instructor) {
            instructors.push(instructor);
            return instructors;
        }
    }
}

    Essentially, the classroom() function operates as a model template upon which new "course" objects can be created, and in which all courses will have Adam and Ben as instructors. You can create two courses as variables (e.g., "course1" and "course2"), and you can add an instructor to course 1: course1.addInstructor('Charlie'); // ['Adam', 'Ben', 'Charlie']
    …but this addition will not be reflected in course2:
    course2.getInstructors(); // ['Adam', 'Ben']

    ⬆ Back to Top

    Our Articles:

    HTML

    Article No Longer Available


    Article No Longer Available


    World In Dev

    4 Non-Popular HTML Tags πŸ’»

    Garvit Motwani for World In Dev ・ Apr 13 '21

    #html #webdev #beginners #css

    CSS

    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    World In Dev

    5 CSS Tricks & Tips That You Should Know πŸš€ + Giveaway

    Garvit Motwani for World In Dev ・ Apr 20 '21

    #css #webdev #html #beginners

    Javascript
    World In Dev

    400+ JavaScript Interview Questions πŸŽ“ With Answers 🌠

    Lorenzo for World In Dev ・ Apr 27 '21

    #javascript #webdev #career #productivity
    World In Dev

    250+ JS Resources to Master Programming πŸ’₯ Cheat Sheet

    Lorenzo for World In Dev ・ Apr 20 '21

    #javascript #webdev #productivity #beginners
    World In Dev

    Projects ideas to become a javascript master πŸš€ Resource compilation πŸ’₯ + Giveaway⚑

    Lorenzo for World In Dev ・ Apr 10 '21

    #javascript #webdev #programming #beginners

    Article No Longer Available


    World In Dev

    400+ JavaScript Interview Questions πŸŽ“ With Answers 🌠

    Lorenzo for World In Dev ・ Apr 27 '21

    #javascript #webdev #career #productivity

    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    World In Dev

    8 JavaScript Tips & Tricks That No One Teaches πŸš€

    Garvit Motwani for World In Dev ・ Apr 6 '21

    #javascript #webdev #html #es6
    World In Dev

    ES6 Cheatsheet πŸ”₯ - All You Need πŸš€

    Garvit Motwani for World In Dev ・ Apr 29 '21
    garvitmotwani

    5 Array Methods You Should Know πŸš€

    Garvit Motwani ・ Apr 27 '21

    #javascript #webdev #beginners #html
    World In Dev

    10 New JavaScript Features in ES2020 That You Should Know

    Garvit Motwani for World In Dev ・ Mar 30 '21

    Others
    World In Dev

    The ultimate Cheat sheets compilation (200+) - πŸ”₯🎁 / Roadmap to dev πŸš€

    Lorenzo for World In Dev ・ Mar 2 '21

    #productivity #webdev #beginners #javascript
    World In Dev

    Finally - How to understand math - Awesome resource list πŸš€

    Lorenzo for World In Dev ・ Mar 30 '21

    #productivity #webdev #beginners #javascript

    Article No Longer Available


    World In Dev

    Top Google Chrome Extensions For Devs πŸ”₯πŸš€

    Lorenzo for World In Dev ・ Mar 7 '21

    #showdev #productivity #career #webdev

    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Article No Longer Available


    Backend

    1. Basics
    2. Command Line
    3. Node JS
    4. EJS
    5. RESTful
    6. Databases
    7. Authentication
    8. Git
    9. Deployment

    Conversion to Markdown In Progress --> Available before others here for now.

    ⬆ Back to Top

    Hope you appreciate it, and Thanks for reading!

    PS: Big Thank Bronson for writing this ❀

    • Top comments (3)

    Collapse
     
    natalia_asteria profile image
    Natalia Asteria •

    This might be the longest DEV article, ever

    Collapse
     
    lorenzoblog profile image
    Lorenzo •

    Na, this one is: dev.to/worldindev/400-javascript-i...

    Collapse
     
    natalia_asteria profile image
    Natalia Asteria • • Edited

    Bro, you gotta fix those markdown errors

    Read next

    hitesh_developer profile image

    Angular vs Next.js vs Nuxt.js: Choosing the Right Framework for Your Project

    Hitesh Chauhan -

    abhay_yt_52a8e72b213be229 profile image

    Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

    Abhay Singh Kathayat -

    abhay_yt_52a8e72b213be229 profile image

    Mastering MobX: Simplified and Reactive State Management for React

    Abhay Singh Kathayat -

    abhay_yt_52a8e72b213be229 profile image

    Controlled vs Uncontrolled Components in React: Choosing the Right Approach

    Abhay Singh Kathayat -