mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-22 21:08:12 +08:00
fix: fixed review pages typos and grammatical errors (#58074)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Kolade Chris
GitHub
parent
bbe67e1e35
commit
c2343196d6
@ -138,7 +138,7 @@ fetch('https://api.example.com/data')
|
||||
|
||||
In the above example, we first fetch data from one URL, then fetch data from another URL based on the first response, and finally log the second data received.
|
||||
|
||||
The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each individual step, which can greatly simplify your code.
|
||||
The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each step, which can greatly simplify your code.
|
||||
|
||||
## Using `async/await` to handle promises
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
## CSS Basics
|
||||
|
||||
- **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
|
||||
- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors.
|
||||
- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors.
|
||||
|
||||
Here is the general syntax of a CSS rule:
|
||||
|
||||
@ -98,7 +98,7 @@ h2 + p {
|
||||
}
|
||||
```
|
||||
|
||||
- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent.
|
||||
- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent.
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
|
||||
@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- **Central Processing Unit(CPU)**: a processor that is responsible for executing instructions and performing calculations.
|
||||
- **Random Access Memory(RAM)**: a temporary storage location for the computer's CPU.
|
||||
- **Hard Disk Drive(HDD)**: a permanent storage location that is used to store data even when the computer is turned off.
|
||||
- **Solid State Drive(SSD)**: non volatile flash memory and can be used in place of a hard drive.
|
||||
- **Solid State Drive(SSD)**: non-volatile flash memory and can be used in place of a hard drive.
|
||||
- **Power Supply Unit(PSU)**: responsible for converting the electricity from the wall outlet into a form that the computer can use.
|
||||
- **Graphics Processing Unit(GPU)**: responsible for rendering visuals on the computer screen.
|
||||
- **Different Types of Internet Service Providers**: An Internet Service Provider (ISP) is a company that provides access to the internet. There are different types of ISPs, including dial-up, DSL, cable, fiber-optic, and satellite.
|
||||
|
||||
@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
## Color Contrast Tools
|
||||
|
||||
- **WebAIM's Color Contrast Checker**: This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards.
|
||||
- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tools also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
|
||||
- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
|
||||
|
||||
## Best Practices With CSS and Accessibility
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited.
|
||||
- **`:hover pseudo-class`**: This pseudo-class is used to style an elements where a user is actively hovering over them.
|
||||
- **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it.
|
||||
- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. Common example would be when the user clicks on a button.
|
||||
- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button.
|
||||
|
||||
## Working with Backgrounds and Borders
|
||||
|
||||
|
||||
@ -14,13 +14,13 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color.
|
||||
- **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived.
|
||||
- **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors.
|
||||
- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
|
||||
- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet are examples of tertiary colors.
|
||||
- **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness.
|
||||
- **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
|
||||
- **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations.
|
||||
- **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
|
||||
- **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
|
||||
- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example.
|
||||
- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, as you can see in this example.
|
||||
- **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
|
||||
|
||||
## Different Ways to Work with Colors in CSS
|
||||
|
||||
@ -41,7 +41,7 @@ flex-flow: column wrap-reverse;
|
||||
- **`justify-content: center;`**: This centers the flex items along the main axis.
|
||||
- **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis.
|
||||
- **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.
|
||||
- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis.
|
||||
- **`justify-content: space-evenly;`**: This will distribute the items evenly along the main axis.
|
||||
|
||||
## The `align-items` Property
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
## CSS Grid Basics
|
||||
|
||||
- **Definition**: CSS Grid is a two dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
|
||||
- **Definition**: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
|
||||
|
||||
```css
|
||||
.container {
|
||||
|
||||
@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
## Working With Floats
|
||||
|
||||
- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, text will wrap around that floated content.
|
||||
- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content.
|
||||
|
||||
```css
|
||||
float: left;
|
||||
@ -30,8 +30,8 @@ float: right;
|
||||
|
||||
## Static, Relative and Absolute Positioning
|
||||
|
||||
- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom, and left to right one after another.
|
||||
- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element withing the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
|
||||
- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another.
|
||||
- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
|
||||
|
||||
```css
|
||||
.relative {
|
||||
@ -64,7 +64,7 @@ float: right;
|
||||
}
|
||||
```
|
||||
|
||||
- **Sticky Positioning**: This type of positioning will act as an relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element.
|
||||
- **Sticky Positioning**: This type of positioning will act as a relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element.
|
||||
|
||||
```css
|
||||
.positioned {
|
||||
|
||||
@ -26,7 +26,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- **`:checked` Pseudo-class**: This pseudo-class is used to indicate to the user that it is checked.
|
||||
- **`:valid` Pseudo-class**: This pseudo-class targets the input fields that meet the validation criteria.
|
||||
- **`:invalid` Pseudo-class**: This pseudo-class targets the input fields that do not meet the validation criteria.
|
||||
- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes applies styles to elements based on whether their values are within or outside specified range constraints.
|
||||
- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints.
|
||||
- **`:required` Pseudo-class**: This pseudo-class targets `input` elements that have the `required` attribute. It signals to the user that they must fill out the field to submit the form.
|
||||
- **`:optional` Pseudo-class**: This pseudo-class applies styles input elements that are not required and can be left empty.
|
||||
- **`:autofill` Pseudo-class**: This pseudo-class applies styles to input fields that the browser automatically fills with saved data.
|
||||
@ -83,7 +83,7 @@ p:is(.example, .this-works-too) {
|
||||
}
|
||||
```
|
||||
|
||||
- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements who contain child elements specified in the selector list.
|
||||
- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements that contain child elements specified in the selector list.
|
||||
|
||||
```css
|
||||
article:has(h2) {
|
||||
|
||||
@ -19,7 +19,7 @@ Review the concepts below to prepare for the upcoming exam.
|
||||
## Inline, Internal, and External CSS
|
||||
|
||||
- **Inline CSS**: These styles are written directly within an HTML element using the `style` attribute. Most of the time you will not be using inline CSS due to separation of concerns.
|
||||
- **Internal CSS**: These styles are written within the `<style>` tags inside the `<head>` section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
|
||||
- **Internal CSS**: These styles are written within the `<style>` tags inside the `<head>` section of an HTML document. This can be useful for creating short code examples, but usually, you will not use internal CSS.
|
||||
- **External CSS**: These styles are written in a separate CSS file and linked to the HTML document using the `<link>` element in the `<head>` section. For most projects, you will use an external CSS file over internal or inline CSS.
|
||||
|
||||
## Working With the `width` and `height` Properties
|
||||
@ -37,7 +37,7 @@ Review the concepts below to prepare for the upcoming exam.
|
||||
- **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. The following example will target all `p` elements that are direct children of the `container` class.
|
||||
- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
|
||||
|
||||
- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent.
|
||||
- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent.
|
||||
|
||||
## Inline, Block, and Inline-Block Level Elements
|
||||
|
||||
@ -74,7 +74,7 @@ Review the concepts below to prepare for the upcoming exam.
|
||||
- **Contrast**: This is the process of creating clear distinctions between the elements. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability.
|
||||
- **White Space(negative space)**: This is the empty space in a design. It's the area surrounding the elements.
|
||||
- **UI(User Interface)**: UI includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons.
|
||||
- **UX(User Experience)**: UX is about how users feel when using a product or service. An application with a well-design user experience is intuitive, easy to use, efficient, accessible, and enjoyable.
|
||||
- **UX(User Experience)**: UX is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable.
|
||||
- **Design Brief**: This is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client.
|
||||
- **Vector Based Design**: This involves creating digital art using mathematical formulas to define lines, shapes, and colors.
|
||||
- **Prototyping**: This refers to the process of creating an interactive model of a product or user interface.
|
||||
@ -402,7 +402,7 @@ Review the concepts below to prepare for the upcoming exam.
|
||||
## Static, Relative and Absolute Positioning
|
||||
|
||||
- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom, and left to right one after another.
|
||||
- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element withing the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
|
||||
- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
|
||||
- **Absolute Positioning**: This allows you to take an element out of the normal document flow, making it behave independently from other elements.
|
||||
|
||||
## Fixed and Sticky Positioning
|
||||
@ -469,7 +469,7 @@ Review the concepts below to prepare for the upcoming exam.
|
||||
|
||||
## CSS Grid Basics
|
||||
|
||||
- **Definition**: CSS Grid is a two dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
|
||||
- **Definition**: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
|
||||
- **The `fr` (Fractional) Unit**: This unit represents a fraction of the space within the grid container. You can use the `fr` unit to create flexible grids.
|
||||
- **Creating Gaps Between Tracks**: There are three ways to create gaps between tracks in CSS grid. You can use the `column-gap` property to create gaps between columns. You can use the `row-gap` property to create gaps between rows. Or you can use the `gap` shorthand property to create gaps between both rows and columns.
|
||||
- **`repeat()` Function**: This function is used to repeat sections in the track listing. Instead of writing `grid-template-columns: 1fr 1fr 1fr;` you can use the `repeat()` function instead.
|
||||
|
||||
@ -35,7 +35,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- **User Research**: This is the systematic study of the people who use your product. The goal is to measure user needs, behaviors, and pain points.
|
||||
- **User Testing**: This refers to the practice of capturing data from users as they interface with your application.
|
||||
- **A/B Testing**: This is the process of shipping a new feature to a randomly selected subset of your user base. You can then leverage analytics data to determine if the feature is beneficial.
|
||||
- **User Requirements**: This refers to the stories or rubric that your application needs to follow. User requirements might be defined by user research, or industry standards. They can even be defined by stakeholder input.
|
||||
- **User Requirements**: This refers to the stories or rubric that your application needs to follow. User requirements might be defined by user research or industry standards. They can even be defined by stakeholder input.
|
||||
- **Progressive Disclosure**: This is a design pattern used to only show users relevant content based on their current activity and hide the rest. This is done to reduce cognitive load and make the user experience more intuitive.
|
||||
- **Deferred/Lazy Registration**: This is a UI design pattern that allows users to browse and interact with your application without having to register.
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
const container = document.getElementById("container");
|
||||
```
|
||||
|
||||
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as argument.
|
||||
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as an argument.
|
||||
|
||||
```html
|
||||
<section class="section"></section>
|
||||
@ -200,14 +200,14 @@ para.addEventListener("mouseover", () => {
|
||||
|
||||
## Working with `style` and `classList`
|
||||
|
||||
- **`Element.style` Property**: This property is a read only property that represents the inline style of an element. You can use this property to get or set the style of an element.
|
||||
- **`Element.style` Property**: This property is a read-only property that represents the inline style of an element. You can use this property to get or set the style of an element.
|
||||
|
||||
```js
|
||||
const paraEl = document.getElementById("para");
|
||||
paraEl.style.color = "red";
|
||||
```
|
||||
|
||||
- **`Element.classList` Property**: This property is a read only property that can be used to add, remove, or toggle classes on an element.
|
||||
- **`Element.classList` Property**: This property is a read-only property that can be used to add, remove, or toggle classes on an element.
|
||||
|
||||
```js
|
||||
// Example adding a class
|
||||
@ -286,7 +286,7 @@ const animation = square.animate(
|
||||
|
||||
## The Canvas API
|
||||
|
||||
- **Definition**: The Canvas API is a powerful tool that lets you and manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `<canvas>` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contains methods and properties you can use to create graphics in your JavaScript file.
|
||||
- **Definition**: The Canvas API is a powerful tool that lets you and manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `<canvas>` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contain methods and properties you can use to create graphics in your JavaScript file.
|
||||
|
||||
```html
|
||||
<canvas id="my-canvas" width="400" height="400"></canvas>
|
||||
|
||||
@ -135,7 +135,7 @@ console.log(index); // 1
|
||||
console.log(fruits.indexOf("not found")); // -1
|
||||
```
|
||||
|
||||
- **`splice()` Method**: This method is used to add or remove elements from any position in an array. The return value for the `splice()` method will be an array of the items removed from the array. If nothing was removed, then an empty array will be returned. This method will mutate the original array, modifying it in place rather than creating a new array. The first argument specifies the index at which to begin modifying the array. The second argument are the number of elements you wish to remove. The following arguments are the elements you wish to add.
|
||||
- **`splice()` Method**: This method is used to add or remove elements from any position in an array. The return value for the `splice()` method will be an array of the items removed from the array. If nothing is removed, then an empty array will be returned. This method will mutate the original array, modifying it in place rather than creating a new array. The first argument specifies the index at which to begin modifying the array. The second argument is the number of elements you wish to remove. The following arguments are the elements you wish to add.
|
||||
|
||||
```js
|
||||
const colors = ["red", "green", "blue"];
|
||||
|
||||
@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
## `Audio` Constructor and Common Methods
|
||||
|
||||
- **Definition**: The `Audio` constructor, like other constructors, is a special function called with the `new` keyword. It returns an `HTMLAudioElement`, which you can then use to play audio for the user, or append to the DOM for the user to control themselves. When you call the constructor, you can optionally pass a URL as the (only) argument. This URL should point to the source of the audio file you want to play. Or, if you need to change the source dynamically, you can assign the URL to the `src` property of the returned audio element.
|
||||
- **Definition**: The `Audio` constructor, like other constructors, is a special function called with the `new` keyword. It returns an `HTMLAudioElement`, which you can then use to play audio for the user or append to the DOM for the user to control themselves. When you call the constructor, you can optionally pass a URL as the (only) argument. This URL should point to the source of the audio file you want to play. Or, if you need to change the source dynamically, you can assign the URL to the `src` property of the returned audio element.
|
||||
- **`play()` Method**: This method is used with the `<audio>` or `<video>` elements to begin playback for the media.
|
||||
|
||||
```js
|
||||
|
||||
@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
- Functions can be defined using the `function` keyword followed by a name, a list of parameters, and a block of code that performs the task.
|
||||
- Arguments are values passed to a function when it is called.
|
||||
- When a function finishes its execution, it will always return a value.
|
||||
- By default the return value of a function is `undefined`.
|
||||
- By default, the return value of a function is `undefined`.
|
||||
- The `return` keyword is used to specify the value to be returned from the function and ends the function execution.
|
||||
|
||||
## Arrow Functions
|
||||
@ -29,7 +29,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
## Scope in Programming
|
||||
|
||||
- **Global scope**: This is the outermost scope in JavaScript. Variables declared in the global scope are accessible from anywhere in the code and are called global variables.
|
||||
- **Local scope**: This is refers to variables declared within a function. These variables are only accessible within the function where they are declared and are called local variables.
|
||||
- **Local scope**: This refers to variables declared within a function. These variables are only accessible within the function where they are declared and are called local variables.
|
||||
- **Block scope**: A block is a set of statements enclosed in curly braces `{}` such as in `if` statements, or loops.
|
||||
- Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable.
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@ closure(); // 15
|
||||
|
||||
## `var` Keyword and Hoisting
|
||||
|
||||
- **Definition**: `var` was the original way to declare variables before 2015. But there were some issues that came with `var` in terms of scope, redeclaration and more. So that is why modern JavaScript programming using `let` and `const` instead.
|
||||
- **Definition**: `var` was the original way to declare variables before 2015. But there were some issues that came with `var` in terms of scope, redeclaration and more. So that is why modern JavaScript programming uses `let` and `const` instead.
|
||||
- **Redeclaring Variables with `var`**: If you try to redeclare a variable using `let`, then you would get a `SyntaxError`. But with `var`, you are allowed to redeclare a variable.
|
||||
|
||||
```js
|
||||
@ -143,7 +143,7 @@ if (true) {
|
||||
console.log(num); // 5
|
||||
```
|
||||
|
||||
- **Hoisting**: This is JavaScript's default behavior of moving declarations to the top of their respective scopes during the compilation phase, before the code is executed. When you declare a variable using the `var` keyword, JavaScript hoists the declaration to the top of its scope.
|
||||
- **Hoisting**: This is JavaScript's default behavior of moving declarations to the top of their respective scopes during the compilation phase before the code is executed. When you declare a variable using the `var` keyword, JavaScript hoists the declaration to the top of its scope.
|
||||
|
||||
```js
|
||||
console.log(num); // undefined
|
||||
|
||||
@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
## Working with Loops
|
||||
|
||||
- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: initialization statement, condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable.
|
||||
- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: the initialization statement, the condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable.
|
||||
|
||||
```js
|
||||
for (let i = 0; i < 5; i++) {
|
||||
@ -19,7 +19,7 @@ for (let i = 0; i < 5; i++) {
|
||||
}
|
||||
```
|
||||
|
||||
- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables would be arrays, and strings.
|
||||
- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables are arrays and strings.
|
||||
|
||||
```js
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
|
||||
@ -56,7 +56,7 @@ console.log(typeof result2); // number
|
||||
|
||||
## Operator Precedence
|
||||
|
||||
- **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence then addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For example, the exponent operator is also right to left associative:
|
||||
- **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence than addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For example, the exponent operator is also right to left associative:
|
||||
|
||||
```js
|
||||
const result = (2 + 3) * 4;
|
||||
@ -89,7 +89,7 @@ console.log(y++); // 5
|
||||
console.log(y); // 6
|
||||
```
|
||||
|
||||
- **Decrement Operator**: This operator is used to decrease the value by one. The prefix and postfix notation work the same way as earlier with the increment operator.
|
||||
- **Decrement Operator**: This operator is used to decrease the value by one. The prefix notation and postfix notation work the same way as earlier with the increment operator.
|
||||
|
||||
```js
|
||||
let num = 5;
|
||||
@ -220,8 +220,8 @@ console.log(theme); // light
|
||||
## The `Math` Object
|
||||
|
||||
- **The `Math.random()` Method**: This method generates a random floating-point number between 0 (inclusive) and 1 (exclusive). This means the possible output can be 0, but it will never actually reach 1.
|
||||
- **The `Math.max()` Method**: This method takes a set of numbers and return the maximum value.
|
||||
- **The `Math.min()` Method**: This method takes a set of numbers and return the minimum value.
|
||||
- **The `Math.max()` Method**: This method takes a set of numbers and returns the maximum value.
|
||||
- **The `Math.min()` Method**: This method takes a set of numbers and returns the minimum value.
|
||||
- **The `Math.ceil()` Method**: This method rounds a value up to the nearest whole integer.
|
||||
- **The `Math.floor()` Method**: This method rounds a value down to the nearest whole integer.
|
||||
- **The `Math.round()` Method**: This method rounds a value to the nearest whole integer.
|
||||
@ -236,7 +236,7 @@ console.log(Math.round(4.8)); // 5
|
||||
- **The `Math.sqrt()` Method**: This method will return the square root of a number.
|
||||
- **The `Math.cbrt()` Method**: This method will return the cube root of a number.
|
||||
- **The `Math.abs()` Method**: This method will return the absolute value of a number.
|
||||
- **The `Math.pow()` Method**: This method takes two numbers and raise the first to the power of the second.
|
||||
- **The `Math.pow()` Method**: This method takes two numbers and raises the first to the power of the second.
|
||||
|
||||
## Common Number Methods
|
||||
|
||||
|
||||
@ -186,7 +186,7 @@ const jsonString = JSON.stringify(user);
|
||||
console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'
|
||||
```
|
||||
|
||||
- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or from localStorage and you need to manipulate the data in your application.
|
||||
- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or localStorage and you need to manipulate the data in your application.
|
||||
|
||||
```js
|
||||
const jsonString = '{"name":"John","age":30,"isAdmin":true}';
|
||||
|
||||
@ -71,7 +71,7 @@ console.log(char); // A
|
||||
- **The `trim()` Method**: This method is used to remove whitespace from both the beginning and the end of a string.
|
||||
- **The `trimStart()` Method**: This method removes whitespace from the beginning (or "start") of the string.
|
||||
- **The `trimEnd()` Method**: This method removes whitespace from the end of the string.
|
||||
- **The `prompt()` Method**: This method is used to get information from a user through the form of a dialog box. This method takes two arguments. The first argument is the message which will appear inside the dialog box, typically prompting the user to enter information. And the second one is a default value which is optional and will fill the input field initially.
|
||||
- **The `prompt()` Method**: This method is used to get information from a user through the form of a dialog box. This method takes two arguments. The first argument is the message which will appear inside the dialog box, typically prompting the user to enter information. The second one is a default value which is optional and will fill the input field initially.
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
@ -158,10 +158,10 @@ let number = 42; // second statement starts here
|
||||
## Comments in JavaScript
|
||||
|
||||
- Any line of code that is commented out is ignored by the JavaScript engine. Comments are used to explain code, make notes, or temporarily disable code.
|
||||
- Single line comments are created using `//`.
|
||||
- Single-line comments are created using `//`.
|
||||
|
||||
```js
|
||||
// This is a single line comment and will be ignored by the JavaScript engine
|
||||
// This is a single-line comment and will be ignored by the JavaScript engine
|
||||
```
|
||||
|
||||
- Multi-line comments are created using `/*` to start the comment and `*/` to end the comment.
|
||||
|
||||
@ -22,7 +22,7 @@ Data types help the program understand the kind of data it's working with, wheth
|
||||
- **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
|
||||
- **String**: A string is a sequence of characters, or text, enclosed in quotes. `"I like coding"` and `'JavaScript is fun'` are examples of strings.
|
||||
- **Boolean**: A boolean represents one of two possible values: `true` or `false`. You can use a boolean to represent a condition, such as `isLoggedin = true`.
|
||||
- **Undefined and Null**: An undefined value is a variable that has been declared but not assigned a value. A null value is an empty value, or a variable that has intentionally been assigned a value of `null`.
|
||||
- **Undefined and Null**: An undefined value is a variable that has been declared but not assigned a value. A null value is an empty value or a variable that has intentionally been assigned a value of `null`.
|
||||
- **Object**: An object is a collection of key-value pairs. The key is the property name, and the value is the property value.
|
||||
|
||||
Here, the `pet` object has three properties or keys: `name`, `age`, and `type`. The values are `Fluffy`, `3`, and `dog`, respectively.
|
||||
@ -37,7 +37,7 @@ let pet = {
|
||||
|
||||
- **Symbol**: The Symbol data type is a unique and immutable value that may be used as an identifier for object properties.
|
||||
|
||||
In this example below, two symbols are created with the same description, but they are not equal.
|
||||
In the example below, two symbols are created with the same description, but they are not equal.
|
||||
|
||||
```js
|
||||
const crytpicKey1= Symbol('saltNpepper');
|
||||
@ -159,10 +159,10 @@ let number = 42; // second statement starts here
|
||||
## Comments in JavaScript
|
||||
|
||||
- Any line of code that is commented out is ignored by the JavaScript engine. Comments are used to explain code, make notes, or temporarily disable code.
|
||||
- Single line comments are created using `//`.
|
||||
- Single-line comments are created using `//`.
|
||||
|
||||
```js
|
||||
// This is a single line comment and will be ignored by the JavaScript engine
|
||||
// This is a single-line comment and will be ignored by the JavaScript engine
|
||||
```
|
||||
|
||||
- Multi-line comments are created using `/*` to start the comment and `*/` to end the comment.
|
||||
@ -320,7 +320,7 @@ console.log(typeof result2); // number
|
||||
|
||||
## Operator Precedence
|
||||
|
||||
- **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence then addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For example, the exponent operator is also right to left associative:
|
||||
- **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence than addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For example, the exponent operator is also right to left associative:
|
||||
|
||||
```js
|
||||
const result = (2 + 3) * 4;
|
||||
@ -353,7 +353,7 @@ console.log(y++); // 5
|
||||
console.log(y); // 6
|
||||
```
|
||||
|
||||
- **Decrement Operator**: This operator is used to decrease the value by one. The prefix and postfix notation work the same way as earlier with the increment operator.
|
||||
- **Decrement Operator**: This operator is used to decrease the value by one. The prefix and postfix notation works the same way as earlier with the increment operator.
|
||||
|
||||
```js
|
||||
let num = 5;
|
||||
@ -499,7 +499,7 @@ console.log(Math.round(4.8)); // 5
|
||||
- **The `Math.sqrt()` Method**: This method will return the square root of a number.
|
||||
- **The `Math.cbrt()` Method**: This method will return the cube root of a number.
|
||||
- **The `Math.abs()` Method**: This method will return the absolute value of a number.
|
||||
- **The `Math.pow()` Method**: This method takes two numbers and raise the first to the power of the second.
|
||||
- **The `Math.pow()` Method**: This method takes two numbers and raises the first to the power of the second.
|
||||
|
||||
## Common Number Methods
|
||||
|
||||
@ -584,7 +584,7 @@ switch (dayOfWeek) {
|
||||
- Functions can be defined using the `function` keyword followed by a name, a list of parameters, and a block of code that performs the task.
|
||||
- Arguments are values passed to a function when it is called.
|
||||
- When a function finishes its execution, it will always return a value.
|
||||
- By default the return value of a function is `undefined`.
|
||||
- By default, the return value of a function is `undefined`.
|
||||
- The `return` keyword is used to specify the value to be returned from the function and ends the function execution.
|
||||
|
||||
## Arrow Functions
|
||||
@ -598,7 +598,7 @@ switch (dayOfWeek) {
|
||||
## Scope in Programming
|
||||
|
||||
- **Global scope**: This is the outermost scope in JavaScript. Variables declared in the global scope are accessible from anywhere in the code and are called global variables.
|
||||
- **Local scope**: This is refers to variables declared within a function. These variables are only accessible within the function where they are declared and are called local variables.
|
||||
- **Local scope**: This refers to variables declared within a function. These variables are only accessible within the function where they are declared and are called local variables.
|
||||
- **Block scope**: A block is a set of statements enclosed in curly braces `{}` such as in `if` statements, or loops.
|
||||
- Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable.
|
||||
|
||||
@ -620,7 +620,7 @@ developers[1] // "Naomi"
|
||||
developers[10] // undefined
|
||||
```
|
||||
|
||||
- **`length` Property**: This property is used to return the number of items in a array.
|
||||
- **`length` Property**: This property is used to return the number of items in an array.
|
||||
|
||||
```js
|
||||
const developers = ["Jessica", "Naomi", "Tom"];
|
||||
@ -978,7 +978,7 @@ const jsonString = JSON.stringify(user);
|
||||
console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'
|
||||
```
|
||||
|
||||
- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or from localStorage and you need to manipulate the data in your application.
|
||||
- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or localStorage and you need to manipulate the data in your application.
|
||||
|
||||
```js
|
||||
const jsonString = '{"name":"John","age":30,"isAdmin":true}';
|
||||
@ -991,7 +991,7 @@ console.log(userObject);
|
||||
|
||||
## Working with Loops
|
||||
|
||||
- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: initialization statement, condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable.
|
||||
- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: the initialization statement, the condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable.
|
||||
|
||||
```js
|
||||
for (let i = 0; i < 5; i++) {
|
||||
@ -999,7 +999,7 @@ for (let i = 0; i < 5; i++) {
|
||||
}
|
||||
```
|
||||
|
||||
- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables would be arrays, and strings.
|
||||
- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables are arrays and strings.
|
||||
|
||||
```js
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
@ -1126,7 +1126,7 @@ let hasPermission = false;
|
||||
let canEdit = true;
|
||||
```
|
||||
|
||||
- **Naming Functions**: For functions, the name should clearly indicate what the function does. For functions that return a boolean (often called predicates), you can use the same "is", "has", or "can" prefixes. When you have functions that retrieve data, it is common to start with the word "get". When you have functions that set data, it is common start with the word "set". For event handler functions, you might prefix with "handle" or suffix with "Handler".
|
||||
- **Naming Functions**: For functions, the name should clearly indicate what the function does. For functions that return a boolean (often called predicates), you can use the same "is", "has", or "can" prefixes. When you have functions that retrieve data, it is common to start with the word "get". When you have functions that set data, it is common to start with the word "set". For event handler functions, you might prefix with "handle" or suffix with "Handler".
|
||||
|
||||
```js
|
||||
function getUserData() { /* ... */ }
|
||||
@ -1158,7 +1158,7 @@ console.log(sparseArray.length); // 4
|
||||
## Linters and Formatters
|
||||
|
||||
- **Linters**: A linter is a static code analysis tool that flags programming errors, bugs, stylistic errors, and suspicious constructs. An example of a common linter would be ESLint.
|
||||
- **Formatters**: Formatters are tools that automatically format your code to adhere to a specific style guide. An example of a common formatter would be Prettier.
|
||||
- **Formatters**: Formatters are tools that automatically format your code to adhere to a specific style guide. An example of a common formatter is Prettier.
|
||||
|
||||
## Memory Management
|
||||
|
||||
@ -1183,7 +1183,7 @@ closure(); // 15
|
||||
|
||||
## `var` Keyword and Hoisting
|
||||
|
||||
- **Definition**: `var` was the original way to declare variables before 2015. But there were some issues that came with `var` in terms of scope, redeclaration and more. So that is why modern JavaScript programming using `let` and `const` instead.
|
||||
- **Definition**: `var` was the original way to declare variables before 2015. But there were some issues that came with `var` in terms of scope, redeclaration and more. So that is why modern JavaScript programming uses `let` and `const` instead.
|
||||
- **Redeclaring Variables with `var`**: If you try to redeclare a variable using `let`, then you would get a `SyntaxError`. But with `var`, you are allowed to redeclare a variable.
|
||||
|
||||
```js
|
||||
@ -1206,7 +1206,7 @@ if (true) {
|
||||
console.log(num); // 5
|
||||
```
|
||||
|
||||
- **Hoisting**: This is JavaScript's default behavior of moving declarations to the top of their respective scopes during the compilation phase, before the code is executed. When you declare a variable using the `var` keyword, JavaScript hoists the declaration to the top of its scope.
|
||||
- **Hoisting**: This is JavaScript's default behavior of moving declarations to the top of their respective scopes during the compilation phase before the code is executed. When you declare a variable using the `var` keyword, JavaScript hoists the declaration to the top of its scope.
|
||||
|
||||
```js
|
||||
console.log(num); // undefined
|
||||
@ -1268,7 +1268,7 @@ numbers.forEach((number) => {
|
||||
|
||||
## Higher Order Functions
|
||||
|
||||
- **Definition**: A higher order function takes one or more functions for the arguments and returns a function or value for the result.
|
||||
- **Definition**: A higher-order function takes one or more functions for the arguments and returns a function or value for the result.
|
||||
|
||||
```js
|
||||
function operateOnArray(arr, operation) {
|
||||
@ -1375,7 +1375,7 @@ const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);
|
||||
console.log(hasSomeEvenNumbers); // true
|
||||
```
|
||||
|
||||
## Working with the DOM and Web API's
|
||||
## Working with the DOM and Web APIs
|
||||
|
||||
- **API**: An API (Application Programming Interface) is a set of rules and protocols that allow software applications to communicate with each other and exchange data efficiently.
|
||||
- **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
|
||||
@ -1387,7 +1387,7 @@ console.log(hasSomeEvenNumbers); // true
|
||||
|
||||
## Working with the `querySelector()`, `querySelectorAll()` and `getElementById()` Methods
|
||||
|
||||
- **`getElementById()` Method**: This method is used to get an object that represents the HTML element with the specified `id`. Remember that ids must be unique in every HTML document, so this method will only return one Element object.
|
||||
- **`getElementById()` Method**: This method is used to get an object that represents the HTML element with the specified `id`. Remember that IDs must be unique in every HTML document, so this method will only return one Element object.
|
||||
|
||||
```html
|
||||
<div id="container"></div>
|
||||
@ -1397,7 +1397,7 @@ console.log(hasSomeEvenNumbers); // true
|
||||
const container = document.getElementById("container");
|
||||
```
|
||||
|
||||
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as argument.
|
||||
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as an argument.
|
||||
|
||||
```html
|
||||
<section class="section"></section>
|
||||
@ -1562,18 +1562,18 @@ para.addEventListener("mouseover", () => {
|
||||
|
||||
## DOMContentLoaded
|
||||
|
||||
- **Definition**: The `DOMContentLoaded` event is fired when everything in the HTML document has been loaded and parsed. If you have external stylesheets, or images, the `DOMContentLoaded` event will not wait for those to be loaded. It will only wait for the HTML to be loaded.
|
||||
- **Definition**: The `DOMContentLoaded` event is fired when everything in the HTML document has been loaded and parsed. If you have external stylesheets or images, the `DOMContentLoaded` event will not wait for those to be loaded. It will only wait for the HTML to be loaded.
|
||||
|
||||
## Working with `style` and `classList`
|
||||
|
||||
- **`Element.style` Property**: This property is a read only property that represents the inline style of an element. You can use this property to get or set the style of an element.
|
||||
- **`Element.style` Property**: This property is a read-only property that represents the inline style of an element. You can use this property to get or set the style of an element.
|
||||
|
||||
```js
|
||||
const paraEl = document.getElementById("para");
|
||||
paraEl.style.color = "red";
|
||||
```
|
||||
|
||||
- **`Element.classList` Property**: This property is a read only property that can be used to add, remove, or toggle classes on an element.
|
||||
- **`Element.classList` Property**: This property is a read-only property that can be used to add, remove, or toggle classes on an element.
|
||||
|
||||
```js
|
||||
// Example adding a class
|
||||
@ -1601,7 +1601,7 @@ setTimeout(() => {
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
- **`setInterval()` Method**: This method keeps runs a piece of code repeatedly at a set interval. Since `setInterval()` keeps executing the provided function at the specified interval, you might want to stop it. For this, you have to use the `clearInterval()` method.
|
||||
- **`setInterval()` Method**: This method keeps running a piece of code repeatedly at a set interval. Since `setInterval()` keeps executing the provided function at the specified interval, you might want to stop it. For this, you have to use the `clearInterval()` method.
|
||||
|
||||
```js
|
||||
setInterval(() => {
|
||||
@ -1652,7 +1652,7 @@ const animation = square.animate(
|
||||
|
||||
## The Canvas API
|
||||
|
||||
- **Definition**: The Canvas API is a powerful tool that lets you and manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `<canvas>` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contains methods and properties you can use to create graphics in your JavaScript file.
|
||||
- **Definition**: The Canvas API is a powerful tool that lets you and manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `<canvas>` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contain methods and properties you can use to create graphics in your JavaScript file.
|
||||
|
||||
```html
|
||||
<canvas id="my-canvas" width="400" height="400"></canvas>
|
||||
@ -1788,7 +1788,7 @@ arr.length = -1;
|
||||
|
||||
## The `throw` Statement
|
||||
|
||||
- **Definition**: The `throw` statement in JavaScript is used to throw a user defined exception. An exception in programming, is when an unexpected event happens and disrupts the normal flow of the program.
|
||||
- **Definition**: The `throw` statement in JavaScript is used to throw a user-defined exception. An exception in programming, is when an unexpected event happens and disrupts the normal flow of the program.
|
||||
|
||||
```js
|
||||
function validateNumber(input) {
|
||||
@ -2446,7 +2446,7 @@ The Cache API is a storage mechanism that stores Request and Response objects. W
|
||||
|
||||
## Cache/Service Workers
|
||||
|
||||
- **Definition**: A Service Worker is a script that runs in the background which is separate from your web page. It can intercept network requests, access the cache, and make the web app work offline. This is one of a key component of Progressive Web Apps.
|
||||
- **Definition**: A Service Worker is a script that runs in the background which is separate from your web page. It can intercept network requests, access the cache, and make the web app work offline. This is a key component of Progressive Web Apps.
|
||||
|
||||
## Basics of Working with Classes
|
||||
|
||||
@ -2594,7 +2594,7 @@ function findFactorial(n) {
|
||||
In the above example, the `findFactorial` function is called recursively until `n` reaches `0`. When `n` is `0`, the base case is reached and the function returns `1`. The function then returns the product of `n` and the result of the recursive call to `findFactorial(n - 1)`.
|
||||
|
||||
- Recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree.
|
||||
- A call stack is used to keep track of the function calls in a recursive function. Each time a function is called, it is added to the call stack. When the base case is reached, the function calls are removed off the stack.
|
||||
- A call stack is used to keep track of the function calls in a recursive function. Each time a function is called, it is added to the call stack. When the base case is reached, the function calls are removed from the stack.
|
||||
- You should carefully define the base case as calling it indefinitely can cause your code to crash. This is because the recursion keeps piling more and more function calls till the system runs out of memory.
|
||||
- Recursions find their uses in solving mathematical problems like factorial and Fibonacci, traversing trees and graphs, generating permutations and combinations and much more.
|
||||
|
||||
|
||||
@ -127,7 +127,7 @@ The Cache API is a storage mechanism that stores Request and Response objects. W
|
||||
|
||||
## Cache/Service Workers
|
||||
|
||||
- **Definition**: A Service Worker is a script that runs in the background which is separate from your web page. It can intercept network requests, access the cache, and make the web app work offline. This is one of a key component of Progressive Web Apps.
|
||||
- **Definition**: A Service Worker is a script that runs in the background which is separate from your web page. It can intercept network requests, access the cache, and make the web app work offline. This is a key component of Progressive Web Apps.
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: review-recursion
|
||||
|
||||
Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
- Recursion is programming concept that allows you to call a function repeatedly until a base-case is reached.
|
||||
- Recursion is a programming concept that allows you to call a function repeatedly until a base-case is reached.
|
||||
|
||||
Here is an example of a recursive function that calculates the factorial of a number:
|
||||
|
||||
@ -25,7 +25,7 @@ function findFactorial(n) {
|
||||
In the above example, the `findFactorial` function is called recursively until `n` reaches `0`. When `n` is `0`, the base case is reached and the function returns `1`. The function then returns the product of `n` and the result of the recursive call to `findFactorial(n - 1)`.
|
||||
|
||||
- Recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree.
|
||||
- A call stack is used to keep track of the function calls in a recursive function. Each time a function is called, it is added to the call stack. When the base case is reached, the function calls are removed off the stack.
|
||||
- A call stack is used to keep track of the function calls in a recursive function. Each time a function is called, it is added to the call stack. When the base case is reached, the function calls are removed from the stack.
|
||||
- You should carefully define the base case as calling it indefinitely can cause your code to crash. This is because the recursion keeps piling more and more function calls till the system runs out of memory.
|
||||
- Recursions find their uses in solving mathematical problems like factorial and Fibonacci, traversing trees and graphs, generating permutations and combinations and much more.
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ Review the concepts below to prepare for the upcoming quiz.
|
||||
|
||||
## Commons Issues Styling `datetime-local` and `color` Properties
|
||||
|
||||
- **Common Issues**: These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way you intend may be entirely different on another browser.
|
||||
- **Common Issues**: These special types of inputs rely on complex pseudo-elements to create things like date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way you intend may be entirely different on another browser.
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user