Diskuze: Seznam filmů pomocí javascriptu?

Aleš Novotný

Člen

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('<table border="2">');
for (let i = 0; i< filmy.length; i++){

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

document.write("</td></tr>")
}
document.write("</table>");

......................................................................

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('<table 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("</table>");

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

Jiří S.

Tvůrce

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

Peter Mlich

Člen

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

Aleš Novotný

Člen

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

Peter Mlich

Člen

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

Aleš Novotný

Člen

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

Peter Mlich

Člen

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

Peter Mlich

Člen

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

Aleš Novotný

Člen

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