NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Seznam filmů pomocí javascriptu?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:17.3.2021 12:46

Ahoj. Nejde mi v javascriptu vytvořit tabulkový seznam se třemi sloupci. Začal jsem dva návrhy, ale ani jeden mi nejde zprovoznit.
Možná používám i špatný postup jak takový seznam vytvořit.

Zkusil jsem: let filmy = ["Babovřesky 1", "Avatar", "Pán prstenů", "Kurýr 1"];
filmy.sort();
let rok = ["2015", "2004", "2000", "2020"];
let zanr = ["komedie", "scifi", "akční", "akční"];

document.write('<ta­ble border="2">');
for (let i = 0; i< filmy.length; i++){

document.write('<tr><td width="40%">')
document.write( filmy[i] + "<br />");

document.write("</td></t­r>")
}
document.write("</ta­ble>");

.............­.............­.............­.............­.............­.....

let film = [
["Babovřesky 1", "komedie", "2015"],
["Avatar","sci-fi","2004"],
["Pán Prstenu","akční","2001"],
["Kurýr 1","akční","2020"]

];
film.sort();

document.write('<ta­ble border="1" width="100%">');
for(let l = 0; l < film.length; l++){
document.write("<tr>");

document.write('<td>' + film[l] + '</td>');
document.write("</tr>");
}

document.write("</ta­ble>");

Chci docílit: Ahoj. Snažím se vytvořit seznam asi 200 filmů jako webovou stránku. Tři sloupce (název, rok, žánr). Nové filmy zapíšu do kodu ručně, ale aby se mi pak seřadily podle abecedy.
Časem bych přidal tlačítko aby se seznam vypsal podle žánru.
Děkuji

 
Odpovědět
17.3.2021 12:46
Avatar
Jiří S.
Tvůrce
Avatar
Jiří S.:17.3.2021 13:42

Ahoj :-)
já bych asi nepoužil document.write, ale udělal bych to takto:

let films = [
    ["Babovřesky 1", "komedie", "2015"],
    ["Avatar","sci-fi","2004"],
    ["Pán Prstenu","akční","2001"],
    ["Kurýr 1","akční","2020"]
    ];

    films.sort();

    // vytvoří tabulku
    let table = document.createElement("table");
    // přidá tabulku do body elementu
    document.body.appendChild(table);

    // postupně přidá do tabulky řádky
    for(let i = 0; i < films.length; i++){

        // vytvoří řádek
        let row = document.createElement("tr");
        // přidá řádek do tabulky
        table.appendChild(row);

        // postupně projede pole filmu a vypíše jednotlivé buňky
        for (let j = 0; j < films[i].length; j++) {

            // vytvoří buňku
            let cell = document.createElement("td");

            // přidá do buňky text z pole
            cell.innerText = films[i][j];

            // přidá buňku do řádku
            row.appendChild(cell);
        }
    }

Trochu jsem ti to okomentoval, snad to pochopíš :-)

 
Nahoru Odpovědět
17.3.2021 13:42
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.3.2021 14:30

Co vypisuje javascriptova konzola? Presne ta resi takovehle chyby.

<script>
var film_list, out, i, i_end; // jsem zvykly pouzivat var, to neres

film_list = [ // je uzitecne, seznamum dat do nazvu list, pro polozky pouzivam item
["Babovřesky 1", "komedie", "2015"], // film_list[i] je pole ... (***)
["Avatar","sci-fi","2004"],
["Pán Prstenu","akční","2001"],
["Kurýr 1","akční","2020"]
];
film_list.sort();

i_end = film_list.length;
out = '';
out += '<table border="1" width="100%">';
for(let i = 0; i < i_end; i++) // nikdy nepouzivej .length v cyklu, je to funkce, konstanta je rychlejsi
// nez opakovane spoustet v kazdem cyklu zjistovani delky pole, ktera se mohla zmenit
// i = je dobre pouziva i jako increment nebo index, symbolika pismene
{
out += "<tr>";
out += '<td>' + film_list[i].join(', ') + '</td>'; // (***) ...takze pri vypisu bys to mel joinovat nebo vypsat zvlast film_list[i][0] = film_list[i][1] + ...
out += "</tr>";
}

out += "</table>";

document.write(out); // nikdy nepouzivej presun dat vic nez jednou, document.write, tag.innerHtml, ... Je to asi mnohem rychlejsi na zpracovani
</script>
Editováno 17.3.2021 14:32
 
Nahoru Odpovědět
17.3.2021 14:30
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:17.3.2021 19:43

Děkuji, jdu zkoumat kód.
Jsem začátečník, tak jsem tam psal co už jsem uměl použít z lekcí Javascriptu.
Pokud se mi nebude dařit, tak se zas přihlásím.

 
Nahoru Odpovědět
17.3.2021 19:43
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.3.2021 23:13

Pouzil jsem tvuj kod, jenom tam neco zmenil a snazil se to okomentovat. Ale jestli jsi zacatecnik, tak nevim, zda to pochopis :)
V zasade, ti to nemuselo fungovat, kvuli tomu joinu. Ale ve Firefoxu tvuj kod bez problemu funguje, protoze FF ma jednu z nej podpor pro JS, v nem funguje skoro vse :) Tipnul bych si, ze zkousis chrome nebo IE, je to tak?

 
Nahoru Odpovědět
17.3.2021 23:13
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:18.3.2021 11:06

Mlich: v chromu to zobrazím. Postup jsem rozebral, akorát nějak nevím to 'out' a '+=' co to znamená? To 'join' jsem ještě nestudoval.
Šlo by vytvořit aby to bylo ve sloupcích?

Satora: na mobilu mi to žádny prohlížeč nezobrazí(na PC se učí teď děti).
Je tam použito 'table' a dole pak 'row' a jestli se to neruší.
Jinak použití elementů Domu mi smysl dává, ale proč se dole používá 'row'?
Stylování tabulky by mělo jít v css.
Zvažuju jestli by tabulka neměla být v gridu.

 
Nahoru Odpovědět
18.3.2021 11:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18.3.2021 21:17

Slo.

x += y // x = x + y
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators

[1, 2, 3, 4].join('xxx') // = string "1xxx2xxx3xxx4"
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
 
Nahoru Odpovědět
18.3.2021 21:17
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Aleš Novotný
Peter Mlich:18.3.2021 21:31

Dom funguje tak, ze?

- vytvor table ... let table = document.createElement("table");

opakuj pro vsechny radky tr
  {
  - vytvor tr ... let row = document.createElement("tr");

  opakuj pro vsechny bunky td
    - vytvor td ... let cell = document.createElement("td");
    - vytvor text ...
    - pripoj na td element text ... on misto posl. 2 radku pouzil cell.innerText
    - pripoj na tr element td ... row.appendChild(cell);

  - pripoj na table element tr ... table.appendChild(row);
  }
- pripoj na dokument element table ...  document.body.appendChild(table);

On to sice udelal v jinem poradi, take moznost. Proste to delas, jako bys vytvarel html kod

<table>
<table><tr>
<table><tr><td>
<table><tr><td>text
<table><tr><td>text <td>
<table><tr><td>text <td>text ...
 
Nahoru Odpovědět
18.3.2021 21:31
Avatar
Aleš Novotný
Člen
Avatar
Aleš Novotný:19.3.2021 21:26

Ten první návrh od Satora, mi funguje na PC pěkně, ale neotevřu ho v žádném prohlížeči na mobilu.
A kvůli zobrazení v mobilu to dělám.

 
Nahoru Odpovědět
19.3.2021 21:26
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.