Skip to content

Commit 4b2d82d

Browse files
authored
Merge pull request #271 from pierangelomiceli/021_urlobj
URL objects
2 parents dce6866 + facb2d6 commit 4b2d82d

File tree

1 file changed

+71
-71
lines changed

1 file changed

+71
-71
lines changed

5-network/07-url/article.md

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11

22
# URL objects
33

4-
The built-in [URL](https://url.spec.whatwg.org/#api) class provides a convenient interface for creating and parsing URLs.
4+
La classe built-in [URL](https://url.spec.whatwg.org/#api) fornisce una comoda interfaccia per la creazione ed il parsing degli URL.
55

6-
There are no networking methods that require exactly a `URL` object, strings are good enough. So technically we don't have to use `URL`. But sometimes it can be really helpful.
6+
Non esistono metodi di networking che richiedono esattamente un oggetto di tipo `URL`, in quanto le stringhe sono già abbastanza adatte allo scopo. Quindi, tecnicamente non siamo obbligati all'utilizzo di `URL`. Talvolta però può essere molto utile.
77

8-
## Creating a URL
8+
## Creare un URL
99

10-
The syntax to create a new `URL` object:
10+
Ecco la sintassi per creare un nuovo oggetto `URL`:
1111

1212
```js
1313
new URL(url, [base])
1414
```
1515

16-
- **`url`** -- the full URL or only path (if base is set, see below),
17-
- **`base`** -- an optional base URL: if set and `url` argument has only path, then the URL is generated relative to `base`.
16+
- **`url`** -- l'URL completo o solo il path (se il parametro `base` è stato impostato, vedi il parametro seguente),
17+
- **`base`** -- un *base URL* opzionale: se è impostato e l'argomento `url` contiene solamente il path, l'URL viene generato in relazione a `base`.
1818

19-
For example:
19+
Ad esempio:
2020

2121
```js
2222
let url = new URL('https://javascript.info/profile/admin');
2323
```
2424

25-
These two URLs are same:
25+
Questi due URL sono identici:
2626

2727
```js run
2828
let url1 = new URL('https://javascript.info/profile/admin');
@@ -32,7 +32,7 @@ alert(url1); // https://javascript.info/profile/admin
3232
alert(url2); // https://javascript.info/profile/admin
3333
```
3434

35-
We can easily create a new URL based on the path relative to an existing URL:
35+
Possiamo facilmente creare un nuovo URL basato su uno già esistente:
3636

3737
```js run
3838
let url = new URL('https://javascript.info/profile/admin');
@@ -41,7 +41,7 @@ let newUrl = new URL('tester', url);
4141
alert(newUrl); // https://javascript.info/profile/tester
4242
```
4343

44-
The `URL` object immediately allows us to access its components, so it's a nice way to parse the url, e.g.:
44+
L'oggetto `URL` ci permette di accedere alle sue componenti, fornendo un modo elegante di effettuare il parsing dell'url, ad esempio:
4545

4646
```js run
4747
let url = new URL('https://javascript.info/url');
@@ -51,121 +51,121 @@ alert(url.host); // javascript.info
5151
alert(url.pathname); // /url
5252
```
5353

54-
Here's the cheatsheet for URL components:
54+
Ecco una tabella informativa per le componenti dell'URL:
5555

5656
![](url-object.svg)
5757

58-
- `href` is the full url, same as `url.toString()`
59-
- `protocol` ends with the colon character `:`
60-
- `search` - a string of parameters, starts with the question mark `?`
61-
- `hash` starts with the hash character `#`
62-
- there may be also `user` and `password` properties if HTTP authentication is present: `http://login:[email protected]` (not painted above, rarely used).
58+
- `href` è l'url completo, equivalente di `url.toString()`
59+
- `protocol` termina con il carattere `:`
60+
- `search` è una stringa contenente parametri, comincia con il punto interrogativo `?`
61+
- `hash` comincia con il carattere cancelletto `#`
62+
- possono essere presenti anche le proprietà `user` e `password`, se è presente l'autenticazione HTTP: `http://login:[email protected]` (non illustrata nella figura precedente, perché è usata molto raramente).
6363

6464

65-
```smart header="We can pass `URL` objects to networking (and most other) methods instead of a string"
66-
We can use a `URL` object in `fetch` or `XMLHttpRequest`, almost everywhere where a URL-string is expected.
65+
```smart header="Possiamo passare gli oggetti `URL` ai metodi di networking (e molti altri) anziché una stringa"
66+
Possiamo usare un oggetto `URL` dentro `fetch` o `XMLHttpRequest`, ed in generale, quasi ovunque ci si aspetti una stringa.
6767

68-
Generally, the `URL` object can be passed to any method instead of a string, as most methods will perform the string conversion, that turns a `URL` object into a string with full URL.
68+
Generalmente, l'oggetto `URL` può essere passato a qualunque metodo al posto di una stringa, dal momento che la maggior parte di essi, effettueranno una conversione automatica in stringa, trasformando, quindi, un oggetto `URL` in una stringa con l'URL completo.
6969
```
7070
7171
## SearchParams "?..."
7272
73-
Let's say we want to create a url with given search params, for instance, `https://google.com/search?query=JavaScript`.
73+
Mettiamo il caso che volessimo creare un url con dei parametri prestabiliti, ad esempio, `https://google.com/search?query=JavaScript`.
7474
75-
We can provide them in the URL string:
75+
Possiamo inserirli dentro la stringa URL:
7676
7777
```js
7878
new URL('https://google.com/search?query=JavaScript')
7979
```
8080

81-
...But parameters need to be encoded if they contain spaces, non-latin letters, etc (more about that below).
81+
...Ma i parametri hanno bisogno di essere codificati se contengono spazi, lettere non latine, etc (chiarimenti su questo aspetto, poco più avanti).
8282

83-
So there's a URL property for that: `url.searchParams`, an object of type [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
83+
Abbiamo una proprietà URL appositamente per questo: `url.searchParams`, un oggetto di tipo [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
8484

85-
It provides convenient methods for search parameters:
85+
Fornisce metodi comodi per i parametri di ricerca:
8686

87-
- **`append(name, value)`** -- add the parameter by `name`,
88-
- **`delete(name)`** -- remove the parameter by `name`,
89-
- **`get(name)`** -- get the parameter by `name`,
90-
- **`getAll(name)`** -- get all parameters with the same `name` (that's possible, e.g. `?user=John&user=Pete`),
91-
- **`has(name)`** -- check for the existence of the parameter by `name`,
92-
- **`set(name, value)`** -- set/replace the parameter,
93-
- **`sort()`** -- sort parameters by name, rarely needed,
94-
- ...and it's also iterable, similar to `Map`.
87+
- **`append(name, value)`** -- aggiunge il parametro per nome: `name`,
88+
- **`delete(name)`** -- rimuove il parametro partendo dal `name`,
89+
- **`get(name)`** -- recupera il parametro dal nome: `name`,
90+
- **`getAll(name)`** -- recupera tutti i parametri con lo stesso `name` (un caso reale potrebbe essere ad esempio `?user=John&user=Pete`, nel caso di una select a scelta multipla),
91+
- **`has(name)`** -- controlla l'esistenza del parametro a partire dal nome `name`,
92+
- **`set(name, value)`** -- imposta/sostituisce il parametro,
93+
- **`sort()`** -- ordina i parametri per nome, raramente necessario,
94+
- ...ed è anche iterabile, similmente a `Map`.
9595

96-
An example with parameters that contain spaces and punctuation marks:
96+
Ecco un esempio con parametri che contengono spazi e segni di punteggiatura:
9797

9898
```js run
9999
let url = new URL('https://google.com/search');
100100

101-
url.searchParams.set('q', 'test me!'); // added parameter with a space and !
101+
url.searchParams.set('q', 'test me!'); // aggiunto un parametro con spazio e !
102102

103103
alert(url); // https://google.com/search?q=test+me%21
104104

105-
url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :
105+
url.searchParams.set('tbs', 'qdr:y'); // aggiunto un parametro con due punti :
106106

107-
// parameters are automatically encoded
107+
// i parametri vengono codificati automaticamente
108108
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
109109

110-
// iterate over search parameters (decoded)
110+
// itera i parametri di ricerca (decodificati)
111111
for(let [name, value] of url.searchParams) {
112112
alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
113113
}
114114
```
115115

116116

117-
## Encoding
117+
## Codifica (Encoding)
118118

119-
There's a standard [RFC3986](https://tools.ietf.org/html/rfc3986) that defines which characters are allowed in URLs and which are not.
119+
Lo standard [RFC3986](https://tools.ietf.org/html/rfc3986) definisce i caratteri ammessi e vietati utilizzabili all'interno degli URL.
120120

121-
Those that are not allowed, must be encoded, for instance non-latin letters and spaces - replaced with their UTF-8 codes, prefixed by `%`, such as `%20` (a space can be encoded by `+`, for historical reasons, but that's an exception).
121+
I caratteri non permessi devono essere codificati, per esempio lettere non latine e spazi, e devono essere sostituiti con il relativo codice, con il prefisso `%`, come `%20` (lo spazio può essere codificato con `+`, per ragioni storiche, ma si tratta di una eccezione).
122122

123-
The good news is that `URL` objects handle all that automatically. We just supply all parameters unencoded, and then convert the `URL` to string:
123+
La buona notizia è che l'oggetto `URL` gestisce questo aspetto in maniera del tutto automatica. È sufficiente inserire i parametri privi di codifica, e convertire l'`URL` in una stringa:
124124

125125
```js run
126-
// using some cyrillic characters for this example
126+
// per questo esempio usiamo qualche carattere in cirillico
127127

128128
let url = new URL('https://ru.wikipedia.org/wiki/Тест');
129129

130130
url.searchParams.set('key', 'ъ');
131131
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
132132
```
133133

134-
As you can see, both `Тест` in the url path and `ъ` in the parameter are encoded.
134+
Come possiamo notare, sia `Тест` nel path dell'url che il parametro `ъ` vengono codificati.
135135

136-
The URL became longer, because each cyrillic letter is represented with two bytes in UTF-8, so there are two `%..` entities.
136+
L'URL diventa più lungo, perché, il fatto che ogni lettera cirillica venga rappresentata con due bytes in UTF-8, ha come conseguenza quella di avere due entità `%..`.
137137

138-
### Encoding strings
138+
### Codificare le stringhe
139139

140-
In old times, before `URL` objects appeared, people used strings for URLs.
140+
Tempo addietro, prima che gli oggetti `URL` facessero la loro comparsa, si usavano le stringhe per gli URL.
141141

142-
As of now, `URL` objects are often more convenient, but strings can still be used as well. In many cases using a string makes the code shorter.
142+
Oggi come oggi, è spesso più conveniente usare gli oggetti `URL`, ma le stringhe possono essere usate alla stessa stregua. In molti casi, l'uso delle stringhe rende il codice più compatto.
143143

144-
If we use a string though, we need to encode/decode special characters manually.
144+
Comunque con l'uso delle stringhe siamo costretti a codificare/decodificare manualmente i caratteri speciali.
145145

146-
There are built-in functions for that:
146+
Ed esistono delle funzioni built-in adatte allo scopo:
147147

148-
- [encodeURI](mdn:/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
149-
- [decodeURI](mdn:/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
150-
- [encodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
151-
- [decodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
148+
- [encodeURI](mdn:/JavaScript/Reference/Global_Objects/encodeURI) - codifica l'URL per intero.
149+
- [decodeURI](mdn:/JavaScript/Reference/Global_Objects/decodeURI) - lo decodifica.
150+
- [encodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/encodeURIComponent) - codifica un componente dell'URL, come un parametro di ricerca, o l'hash, o il path.
151+
- [decodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/decodeURIComponent) - lo decodifica.
152152

153-
A natural question is: "What's the difference between `encodeURIComponent` and `encodeURI`? When we should use either?"
153+
Viene naturale porsi una domanda: "Qual'è la differenza tra `encodeURIComponent` e `encodeURI`? Quando usare uno piuttosto che un altro?"
154154

155-
That's easy to understand if we look at the URL, that's split into components in the picture above:
155+
È facile comprendere che se guardiamo un URL, diviso in componenti nella figura in alto:
156156

157157
```
158158
https://site.com:8080/path/page?p1=v1&p2=v2#hash
159159
```
160160

161-
As we can see, characters such as `:`, `?`, `=`, `&`, `#` are allowed in URL.
161+
Come possiamo notare, i caratteri come `:`, `?`, `=`, `&`, `#` sono perfettamente leciti all'interno di un URL.
162162

163-
...On the other hand, if we look at a single URL component, such as a search parameter, these characters must be encoded, not to break the formatting.
163+
...D'altra parte, se guardiamo i suoi singoli componenti, per esempio il parametro di ricerca, questo tipo di caratteri devono essere codificati, per non invalidarne la formattazione.
164164

165-
- `encodeURI` encodes only characters that are totally forbidden in URL.
166-
- `encodeURIComponent` encodes same characters, and, in addition to them, characters `#`, `$`, `&`, `+`, `,`, `/`, `:`, `;`, `=`, `?` and `@`.
165+
- `encodeURI` codifica solo i caratteri che sono del tutto vietati nell'URL.
166+
- `encodeURIComponent` codifica gli stessi caratteri, e in aggiunta a questi, anche i caratteri `#`, `$`, `&`, `+`, `,`, `/`, `:`, `;`, `=`, `?` and `@`.
167167

168-
So, for a whole URL we can use `encodeURI`:
168+
Quindi per un URL intero, possiamo usare `encodeURI`:
169169

170170
```js run
171171
// using cyrillic characters in url path
@@ -174,7 +174,7 @@ let url = encodeURI('http://site.com/привет');
174174
alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82
175175
```
176176

177-
...While for URL parameters we should use `encodeURIComponent` instead:
177+
...Invece, per i parametri dell'URL dovremmo usare `encodeURIComponent`:
178178

179179
```js run
180180
let music = encodeURIComponent('Rock&Roll');
@@ -183,7 +183,7 @@ let url = `https://google.com/search?q=${music}`;
183183
alert(url); // https://google.com/search?q=Rock%26Roll
184184
```
185185

186-
Compare it with `encodeURI`:
186+
Confrontiamolo con `encodeURI`:
187187

188188
```js run
189189
let music = encodeURI('Rock&Roll');
@@ -192,26 +192,26 @@ let url = `https://google.com/search?q=${music}`;
192192
alert(url); // https://google.com/search?q=Rock&Roll
193193
```
194194

195-
As we can see, `encodeURI` does not encode `&`, as this is a legit character in URL as a whole.
195+
Come possiamo vedere, `encodeURI` non codifica `&`, dal momento che questo è un carattere valido in un URL completo.
196196

197-
But we should encode `&` inside a search parameter, otherwise, we get `q=Rock&Roll` - that is actually `q=Rock` plus some obscure parameter `Roll`. Not as intended.
197+
Dovremmo però codificare `&` se si trova all'interno di un parametro di ricerca, altrimenti otterremmo `q=Rock&Roll`, che significherebbe `q=Rock` più un non specificato parametro `Roll`, e che è diverso da quello che intendevamo.
198198

199-
So we should use only `encodeURIComponent` for each search parameter, to correctly insert it in the URL string. The safest is to encode both name and value, unless we're absolutely sure that it has only allowed characters.
199+
Quindi dovremmo usare solo `encodeURIComponent` per ogni parametro di ricerca, per inserirlo correttamente nella stringa dell'URL. La cosa più sicura è quella di codificare sia il nome che il valore, a meno che non siamo certi che contengano solo caratteri leciti.
200200

201-
````smart header="Encoding difference compared to `URL`"
202-
Classes [URL](https://url.spec.whatwg.org/#url-class) and [URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams) are based on the latest URI specification: [RFC3986](https://tools.ietf.org/html/rfc3986), while `encode*` functions are based on the obsolete version [RFC2396](https://www.ietf.org/rfc/rfc2396.txt).
201+
````smart header="Differenze tra l'uso di encode ed `URL`"
202+
Le classi [URL](https://url.spec.whatwg.org/#url-class) e [URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams) sono entrambe basate sulle ultime specifiche URI: [RFC3986](https://tools.ietf.org/html/rfc3986), mentre le funzioni `encode*` sono basate sulla vecchia versione [RFC2396](https://www.ietf.org/rfc/rfc2396.txt).
203203

204-
There are a few differences, e.g. IPv6 addresses are encoded differently:
204+
C'è qualche piccola differenza, come per esempio nel caso degli indirizzi IPv6 che sono codificati in maniera differente:
205205

206206
```js run
207-
// valid url with IPv6 address
207+
// url valido con indirizzo IPv6
208208
let url = 'http://[2607:f8b0:4005:802::1007]/';
209209

210210
alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/
211211
alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/
212212
```
213213

214-
As we can see, `encodeURI` replaced square brackets `[...]`, that's not correct, the reason is: IPv6 urls did not exist at the time of RFC2396 (August 1998).
214+
Come possiamo vedere, `encodeURI` ha eseguito la sostituzione delle parentesi quadre `[...]`, e non è corretto: la ragione è che gli url IPv6 non esistevano ancora al tempo della RFC2396 (Agosto 1998).
215215

216-
Such cases are rare, `encode*` functions work well most of the time.
216+
Tuttavia questi sono dei casi rari, e le funzioni `encode*` vanno bene nella maggior parte dei casi.
217217
````

0 commit comments

Comments
 (0)