Web

Network Programming

JSON, Websocket

Quiz

Forms and Validation

## <i class="fas fa-question-circle"></i> Question 1
                            
                            Etant donné le formulaire suivant hébergé sur l'URL http://www.example.com/, quel est l'URL résultant d'un clique sur le bouton "Send"?

```html
                            <form method="GET" action="send.html">
                                <input type="text" name="firstname" value="John" />
                                <input type="text" name="lastname" placeholder="Doe" />
                                <input type="submit" value="Send" />
                            </form>
                            ```

- (A) `http://www.example.com/send.html`
                            - (B) `http://www.example.com/send.html?firstname=John&lastname=`
                            - (C) `http://www.example.com/submit.html`
                            - (D) `http://www.example.com/submit.html?firstname=John&lastname=Doe`
                            - (E) Aucune réponse correcte

## <i class="fas fa-question-circle"></i> Question 2

Quelle est la valeur retournée par la regex suivante?

```js
                            console.log(/ab+c*d/.test("acd"));
                            ```
                            
                            - (A) `true`
                            - (B) `false`
                            - (C) `"acd"`
                            - (D) `undefined`
                            - (D) `null`
                            - (F) Aucune réponse correcte

Notes:

Answer (A): the `*` quantifier matches zero or more occurrences of the preceding element, while the `+` quantifier matches one or more occurrences of the preceding element. `"acd"` does not contain any `b`, hence the result is false.

Also, `test` returns a boolean describing whether a match is found or not, not the matched string.
                            
                            </div>

JavaScript Object Notation (JSON)

## <i class="fab fa-js"></i> JavaScript Object Notation (JSON)
                            
                            JSON is

- a *string formatting* standard for structured data,
                            - *based* on the Javascript object syntax

Used for data serialization (only handles objects, arrays, string, number, boolean, null), usually for further transmittion or storage.
                            
                            ```json
                            {
                                "firstname": "John",
                                "lastname": "Doe",
                                "age": 28,
                                "interests": ["ski", "bike"]
                            }
                            ```

- Extension: `.json`,
                            - MIME type: `application/json`
                            
                            https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

## <i class="fab fa-js"></i> Object to JSON (stringify)

The `JSON` global object offers conversion functions.
                            
                            `JSON.stringify` converts a Javascript object to a JSON string:

```js
                            // A JavaScript Object
                            var person = { 
                                firstname: "John",
                                lastname: "Doe",
                                age: 28,
                                interests: ["ski", "bike"],
                                get_age: function() { return this.age; }
                            };
                            
                            // And its JSON representation
                            console.log(JSON.stringify(person));
                            ```
                            
                            Note that functions and the prototype are *not* serialized. Stringifying an instance of a `Person` class will thus loose that information.
                            
                            <span class="detail">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON</span>

## <i class="fab fa-js"></i> JSON is NOT JavaScript!

Why does the following snippet results in a SyntaxError?

```js
                            // A JSON Object?
                            var person = '{firstname:"John",lastname:"Doe",age:28,interests:["ski","bike"]}';

// Uncaught SyntaxError: Unexpected token f in JSON at position 1
                            console.log(JSON.parse(person));
                            ```

Why is the following snippet considered harmful?

```js
                            // DON'T DO THIS!!!
                            eval('var person = {firstname:"John",lastname:"Doe",age:28,interests:["ski","bike"]}');
                            ```

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
                        
                            Notes:

The main difference between the syntax of JS and JSON is that JSON requires double quotes around property names and string values, while JS objects do not. A more subtle difference is that JSON does not allow trailing commas, while JS objects do.

In the second example, we are effectively using the Javascript execution engine to parse an object, instead of the JSON parser.

The JS execution engine is Turing complete, and can be made to execute anything, while the JSON parser is very limited, to only parse JSON.

Network Programming

## <i class="fab fa-js"></i> HTTP
                            
                            Recall that the Hypertext Transfer Protocol (HTTP) is a request/response protocol.
                            
                            **HTTP/1.0** had a **short-lived** connection model and allowed **persistent connection** with the `Connection: keep-alive` HTTP header.
                            
                            **HTTP/1.1**, the version of HTTP commonly used by Web browsers, introduced:
                              - **Persistent connections** that allow to reuse a TCP connection to send and receive multiple requests and responses (modern browsers **enable** this by default);
                              - **Pipelined connections** that allow to send multiple requests without waiting for the corresponding responses (modern browsers **do not enable** this by default);
                              - **Chunked transfers** that allow to divide the data stream into a series of chunks that are received independently of each other;
                              - **Protocol upgrades** that allow a client to ask the server for a change in the application protocol.

https://www.ietf.org/rfc/rfc2616.txt

Web

Network Programming

JSON, Websocket

Quiz

Forms and Validation

JavaScript Object Notation (JSON)

Network Programming

Strict mode