Skip to content

Commit

Permalink
quiz: change fetch/setTimeout/setInterval mentions to methods
Browse files Browse the repository at this point in the history
  • Loading branch information
yangshun committed Jun 8, 2024
1 parent 2dc187f commit 8417e54
Show file tree
Hide file tree
Showing 22 changed files with 27 additions and 27 deletions.
2 changes: 1 addition & 1 deletion .wip/topics/javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ WIP.
### Async

- Reference: [Async and Peformance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance)
- `setTimeout`, `setInterval` and event loop
- `setTimeout()`, `setInterval()` and event loop
- [setImmediate() vs nextTick() vs setTimeout(fn,0)](http://voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/)
- Event Loop
- Debounce and Throttle
Expand Down
2 changes: 1 addition & 1 deletion contents/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Regardless of which type of format you are given, one thing stays true - you nee
Be _extremely_ familiar with the following concepts:

- CSS: Specificity, Box model, Layout, Positioning
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout`, `setInterval`)
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
- JavaScript design patterns: Observer pattern, Module pattern
- HTML: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
Expand Down
2 changes: 1 addition & 1 deletion contents/javascript-questions.md
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ This is a browser-reported string that allows the network protocol peers to iden

Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.

The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch` API.
The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch()` API.

###### References

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ JavaScript coding interviews share a lot of similarities with algorithmic coding
| Algorithms | Binary Search, Breadth-first Search, Depth-first Search, Recursion |
| JavaScript Language | Data types (checking for types, type coercion), Scope, Closures, Callbacks, How `this` keyword works, Object-oriented Programming in JavaScript (prototypes, classes, methods), Arrow functions vs normal functions, Invoking functions via `Function.prototype.apply()`/`Function.prototype.call()`, `Promise`, Handling variadic arguments |
| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
| Runtime APIs | Timer (`setTimeout`, `setInterval`) |
| Runtime APIs | Timer (`setTimeout()`, `setInterval()`) |

## JavaScript Coding Interview Rubrics

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
| Algoritmos | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão |
| Linguagem JavaScript | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
| DOM | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos |
| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`) |
| APIs em Tempo de Execução | Temporizador (`setTimeout()`, `setInterval()`) |

## Critérios de Avaliação para Entrevistas de Codificação em JavaScript

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ JavaScript 编码面试与算法编码面试有许多相似之处。 一般来
| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
| JavaScript 语言 | 数据类型(检查类型、类型强制转换)、范围、闭合、回调、如何使用此处关键字、面向对象编程(原型、类、方法),箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数,`Promise`,处理多参数 |
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
| 运行时 API | 计时器(`setTimeout``setInterval`|
| 运行时 API | 计时器(`setTimeout()``setInterval()`|

## 如何准备 JavaScript 编码面试

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ As you can see, you can be expect to be asked quiz questions in almost every pos
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, Media Queries |
| JavaScript | Data types, Scope, Closures, `this`, Variable declaration (`var`, `let`, `const`), Array methods, Object methods, Promises, Classes, Async/Await |
| DOM | DOM creation/manipulation/traversal, Event bubbling/capturing, Event delegation |
| Runtime APIs | `fetch`, Storage (`localStorage`, `sessionStorage`), Timers (`setTimeout`, `setInterval`) |
| Runtime APIs | `fetch()`, Storage (`localStorage`, `sessionStorage`), Timers (`setTimeout()`, `setInterval()`) |

## Tips

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas
| CSS | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia |
| JavaScript | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
| DOM | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos |
| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`) |
| APIs em Tempo de Execução | `fetch()`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout()`, `setInterval()`) |

## Dicas

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ description: 准备测验式前端面试问题的指南——预期情况,需
| CSS | 盒模型,选择器,优先级,定位,单位,Flexbox,Grid,媒体查询 |
| JavaScript | 数据类型,作用域,闭包,`this`,变量声明(`var``let``const`),数组方法,对象方法,Promise,类,异步/等待 |
| DOM | DOM 创建/操作/遍历,事件冒泡/捕获,事件委托 |
| 运行时 API | `fetch`,存储(`localStorage``sessionStorage`),定时器(`setTimeout``setInterval`|
| 运行时 API | `fetch()`,存储(`localStorage``sessionStorage`),定时器(`setTimeout()``setInterval()`|

## 提示

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ User interface coding interviews share a fair bit of similarity with non-front e
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, CSS custom properties (variables) |
| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, Handling variadic arguments |
| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
| Runtime APIs | Timer (`setTimeout`, `setInterval`), Network (Ajax, `fetch`) |
| Runtime APIs | Timer (`setTimeout()`, `setInterval()`), Network (Ajax, `fetch()`) |
| Accessibility | ARIA roles, states & properties, Keyboard interactions |

## User Interface Coding Interview Rubrics
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
| CSS | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos |
| DOM | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos |
| APIs de runtime | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`) |
| APIs de runtime | Temporizador (`setTimeout()`, `setInterval()`), Rede (Ajax, `fetch()`) |
| Acessibilidade | Papéis, estados e propriedades ARIA, Interações de Teclado |

## Rubricas para Entrevistas de Codificação de Interface do Usuário
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性(变量) |
| JavaScript | 闭包、回调、`Promise``async`/`await`、变长参数处理 |
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
| 运行时 API | 计时器(`setTimeout``setInterval`)、网络(Ajax、`fetch`|
| 运行时 API | 计时器(`setTimeout()``setInterval()`)、网络(Ajax、`fetch()`|
| 可访问性 | ARIA 角色、状态和属性、键盘交互 |

## 用户界面编码面试评分标准
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Since cookies have a relatively low maximum size, it is not advisable to store a

With that in mind, the best kind of data to store within cookies is small pieces of data that needs to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the `HttpOnly`, `Secure`, and `Expires`/`Max-Age` capabilities that cookies provide.

`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent on HTTP requests. While you can manually include values from Web Storage when making AJAX/`fetch` requests, the initial browser request will contain them.
`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent on HTTP requests. While you can manually include values from Web Storage when making AJAX/`fetch()` requests, the initial browser request will contain them.

Hence Web Storage should not be used to store data that is relied on by the server for the initial rendering of the page if server-side rendering is being used (typically authentication/authorization-related information). `localStorage` is most suitable for user preferences data that do not expire, like themes and layouts (if it is not important for the server to render the final layout). `sessionStorage` is most suitable for temporary data that only needs to be accessible within the current browsing session, such as form data (useful to preserve data during accidental reloads).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Explain Ajax in as much detail as possible.

## TL;DR

Ajax (asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like `XMLHttpRequest` or the `fetch` API to send and receive data in the background. In modern web applications, `fetch` API is more commonly used to implement Ajax.
Ajax (asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like `XMLHttpRequest` or the `fetch()` API to send and receive data in the background. In modern web applications, `fetch()` API is more commonly used to implement Ajax.

Using `XMLHttpRequest` API:

Expand All @@ -23,7 +23,7 @@ xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();
```

Using `fetch` API:
Using `fetch()` API:

```js
fetch('https://jsonplaceholder.typicode.com/todos/1')
Expand All @@ -41,7 +41,7 @@ fetch('https://jsonplaceholder.typicode.com/todos/1')

Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. Unlike traditional web applications where every user interaction triggers a full page reload, with Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.

Initially Ajax was implemented using the `XMLHttpRequest` API, but the `fetch` API is more suitable for modern web applications.
Initially Ajax was implemented using the `XMLHttpRequest` API, but the `fetch()` API is more suitable for modern web applications.

## `XMLHttpRequest` API

Expand All @@ -62,9 +62,9 @@ xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();
```

## `fetch` API
## `fetch()` API

Alternatively, the `fetch` API provides a modern, promise-based approach to making Ajax requests. It is more commonly used in modern web applications.
Alternatively, the `fetch()` API provides a modern, promise-based approach to making Ajax requests. It is more commonly used in modern web applications.

Here's how you can use it:

Expand All @@ -86,7 +86,7 @@ Here's a breakdown of the core functionalities involved in an Ajax request:

- **Event Trigger**: A user interacts with a web page element, like clicking a button or submitting a form.
- **JavaScript Code Execution**: JavaScript code embedded in the web page captures the event and initiates an asynchronous communication using the XMLHttpRequest object (or the Fetch API in modern implementations).
- **`XMLHttpRequest` (or `fetch`) API**: This object establishes a connection with the server and sends the user's request, which might include data to be submitted or specific information to be retrieved.
- **`XMLHttpRequest` (or `fetch()`) API**: This object establishes a connection with the server and sends the user's request, which might include data to be submitted or specific information to be retrieved.
- **Server Processing**: The web server receives the request, processes it, and generates a response containing the requested data (e.g., updated content, validation results).
- **Data Reception**: The XMLHttpRequest object or Fetch API receives the response from the server.
- **DOM Manipulation**: JavaScript processes the received data and dynamically alters the HTML content of the web page using the Document Object Model (DOM). This allows for targeted updates without reloading the entire page.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ title: 尽可能详细地解释Ajax

Ajax (异步 JavaScript 和 XML) 是一套网络开发技术,在客户端使用许多网络技术创建异步 Web 应用程序。 使用 Ajax, Web 应用程序可以将数据异步地发送到服务器(后端)并从服务器上检索,而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦,Ajax 允许网页,以及扩展的 Web 应用程序,动态地改变内容,而不需要重新加载整个页面。 实际上,现代实现通常使用 JSON 而不是 XML,因为 JSON 是 JavaScript 的原生优势。

`XMLHttpRequest` API 或如今的 `fetch` API 经常用于异步通信。
`XMLHttpRequest` API 或如今的 `fetch()` API 经常用于异步通信。
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ They can be implemented manually or included through libraries and are often use
Common use cases include:

- **New JavaScript Methods**: For example, `Array.prototype.includes()`, `Object.assign()`, etc.
- **New APIs**: Such as `fetch`, `Promise`, `IntersectionObserver`, etc. Modern browsers support these now but for a long time they have to be polyfilled.
- **New APIs**: Such as `fetch()`, `Promise`, `IntersectionObserver`, etc. Modern browsers support these now but for a long time they have to be polyfilled.

Libraries and services for polyfills:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ if (document.getElementsByTagName) {

Ajax(非同期 JavaScript と XML)は、クライアント側で多くの Web テクノロジを使用して非同期 Web アプリケーションを作成する一連の Web 開発手法です。Ajax を使用すると、Web アプリケーションは、既存のページの表示や動作を妨げずに、バックグラウンドで非同期的にサーバーにデータを送信し、サーバーから取得することができます。Ajax は、データ交換レイヤーをプレゼンテーション・レイヤーから切り離すことにより、Web ページ、さらには Web アプリケーションに対して、ページ全体を再ロードせずにコンテンツを動的に変更できるようにします。実際には、現代の実装では、XML を JSON に置き換えるのが一般的です。これは、JavaScript 固有のメリットがあるからです。

`XMLHttpRequest` API は、非同期通信や最近の `fetch` API のためによく使われます。
`XMLHttpRequest` API は、非同期通信や最近の `fetch()` API のためによく使われます。

###### 参考

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ if (document.getElementsByTagName) {

Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써, 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.

`XMLHttpRequest` API는 비동기 통신에 자주 사용되며, 최근에는 `fetch` API가 자주 사용됩니다.
`XMLHttpRequest` API는 비동기 통신에 자주 사용되며, 최근에는 `fetch()` API가 자주 사용됩니다.

###### 참고자료

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ Jest to string zgłaszany przez przeglądarkę, który umożliwia elementom prot

Ajax (asynchronous JavaScript and XML - asynchroniczny JavaScript i XML) to zestaw technik tworzenia stron internetowych wykorzystujących wiele technologii sieciowych po stronie klienta do tworzenia asynchronicznych aplikacji internetowych. Dzięki Ajax aplikacje internetowe mogą wysyłać dane i pobierać je z serwera asynchronicznie (w tle) bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Oddzielając warstwę wymiany danych od warstwy prezentacji, Ajax pozwala stronom internetowym, a poprzez rozszerzenia aplikacji internetowych, dynamicznie zmieniać treść bez konieczności ponownego ładowania całej strony. W praktyce nowoczesne implementacje często zastępują użycie JSON zamiast XML, ze względu na zalety natywnej obsługi JSON w JavaScript.

API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w dzisiejszych czasach, `fetch` API.
API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w dzisiejszych czasach, `fetch()` API.

###### Bibliografia

Expand Down
Loading

0 comments on commit 8417e54

Please sign in to comment.