Skip to content

Interaction: alert, prompt, confirm #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
4 commits merged into from Aug 3, 2020
Merged

Interaction: alert, prompt, confirm #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8fc84f
Update article.md
Jul 29, 2020
6f89704
Update article.md
Aug 3, 2020
900c410
Update task.md
Aug 3, 2020
d152cba
Update solution.md
Aug 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
JavaScript-code:
JavaScript kod:

```js demo run
let name = prompt("What is your name?", "");
alert(name);
```

The full page:
Cijela stranica:

```html
<!DOCTYPE html>
Expand Down
6 changes: 3 additions & 3 deletions 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
importance: 4
važnost: 4

---

# A simple page
# Jednostavna stranica

Create a web-page that asks for a name and outputs it.
Napravi stranicu koja traži ime i na kraju ga prikazuje.

[demo]
76 changes: 38 additions & 38 deletions 1-js/02-first-steps/06-alert-prompt-confirm/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,105 @@
# Interaction: alert, prompt, confirm
# Interakcija: alert, prompt, confirm

As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`.
Pošto ćemo koristiti pretraživač kao naše okruženje, pogledat ćemo nekoliko funkcija kojim možemo vršiti interakciju sa korisnicima: `alert`, `prompt` i `confirm`.

## alert
## alert (znak za uzbunu)

This one we've seen already. It shows a message and waits for the user to press "OK".
Ovaj smo već vidjeli. Pokaže poruku i čeka na korisnika da pritisne "OK".

For example:
Na primjer:

```js run
alert("Hello");
```

The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK".
Mini-prozorčić se naziva *modalni prozor* (eng. modal window). Riječ "modalni" znači da posjetilac ne može djelovati na ostatak stranice, pritiskati ostale tipke, itd, dok ne ugasi ovaj prozorčić. U ovom slučaju -- dok ne pritisne "OK".

## prompt
## prompt (redak)

The function `prompt` accepts two arguments:
Funkcija `prompt` prihvata dva argumenta:

```js no-beautify
result = prompt(title, [default]);
```

It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel.
Prikaže modalni prozorčić sa tekstualnom porukom, polje za unos, i tipke OK/Cancel.

`title`
: The text to show the visitor.
: Tekst prikazan posjetiocu.

`default`
: An optional second parameter, the initial value for the input field.
: Neobavezni drugi parametar, inicijalna vrijednost za polje unosa.

```smart header="The square brackets in syntax `[...]`"
The square brackets around `default` in the syntax above denote that the parameter as optional, not required.
```smart header="Srednje zagrade u sintaksi `[...]`"
Srednje zagrade oko `default` u sintaksi pokazuju da je taj parametar opcionalan, nije potreban.
```

The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`.
Posjetilac može nešto u polje napisati i pritisnuti OK. Onda ćemo dobiti taj tekst kao `result`. Ili mogu prekinuti unos pritiskom na Cancel ili `key:Esc` tipku, i tada dobijamo `null` kao `rezultat`.

The call to `prompt` returns the text from the input field or `null` if the input was canceled.
Poziv na prompt vraća tekst koji je unešen u polju, ili `null` ako je unos prekinut.

For instance:
Na primjer:

```js run
let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
alert(`You are ${age} years old!`); // You are 100 years old (Imate 100 godina) !
```

````warn header="In IE: always supply a `default`"
The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt.
````warn header="U Internet Explorer-u: Uvijek postavite `default` (tj. uobičajenu vrijednost)"
Drugi parametar je opcionalan, ali ako ga ne postavimo, Internet Explorer će ubaciti teksst `"undefined"` u prompt.

Run this code in Internet Explorer to see:
Pokrenite ovaj kod u Internet Explorer-u da vidite:

```js run
let test = prompt("Test");
```

So, for prompts to look good in IE, we recommend always providing the second argument:
Tako da prompt-ovi izgledaju dobro u IE, mi preporučujemo da uvijek unesete drugi argument:

```js run
let test = prompt("Test", ''); // <-- for IE
let test = prompt("Test", ''); // <-- za IE
```
````

## confirm
## confirm (potvrditi)

The syntax:
Sintaksa:

```js
result = confirm(question);
```

The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel.
Funkcija `confirm` pokazuje modalni prozorčić sa `question` (eng. pitanje) i dvije tipke: OK i Cancel (eng. otkazati).

The result is `true` if OK is pressed and `false` otherwise.
Rezultat je `true` ako je pritisnuta tipka OK a `false` u suprotnom.

For example:
Na primjer:

```js run
let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed
alert( isBoss ); // true ako je OK pritisnuto
```

## Summary
## Sažetak

We covered 3 browser-specific functions to interact with visitors:
Spomenuli smo 3 funkcije specifične za pretraživače sa kojima možemo vršiti interakciju sa korisnicima:

`alert`
: shows a message.
: prikazuje poruku.

`prompt`
: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`.
: prikazuje poruku i pita korisnika da unese tekst. Vraća tekst ili, ako je pritisnuta tipka Cancel ili `key:Esc`, vraća `null`.

`confirm`
: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`.
: prikazuje poruku i čeka na korisnika da pritisne "OK" ili "Cancel". Vraća `true` za OK a `false` za Cancel/`key:Esc`.

All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed.
Sve ove metode (eng. methods) su modalne: zaustave izvršavanje skripte i ne dozvoljavaju posjetiocu da ima interakciju sa ostatkom stranice dok se prozor ne zatvori.

There are two limitations shared by all the methods above:
Postoje dva ograničenja za svaku metodu koju smo naveli:

1. The exact location of the modal window is determined by the browser. Usually, it's in the center.
2. The exact look of the window also depends on the browser. We can't modify it.
1. Egzaktna lokacija modalnog prozorčića je određena od strane pretraživača. Najčešće je u sredini.
2. Egzaktni izgled prozorčića isto zavisi od pretraživača. Ne možemo izgled mijenjati.

That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine.
To je cijena koju plaćamo za jednostavnost. Postoje drugi načini da pokažemo prozorčiće sa boljim izgledom i interakcijom sa posjetiocima, ali ako nam ti faktori nisu bitni, ove metode rade sasvim u redu.