wypelnianie tablic js

pytanie zadane 9 lipca 2020 w JavaScript przez lujasjeden Użytkownik (860 p.)

Dzisiaj zaczalem js, wczesniej mialem do czynienia tylko z c++, dlaczego ten kod nie wypelnia mi tablic arr, a przynajmniej nie widze tego w konsoli

var arr = [];

for (var i=10; i<=0; i--) {

	arr[i]=i;
}

console.log(arr);

1	komentarz 9 lipca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.) Tak na prawdę to Twój kod nie działa bo źle zapisałeś warunek. (var i=10; i<=0; i--) nie wykona się ani razu

komentarz 9 lipca 2020 przez lujasjeden Użytkownik (860 p.)

ale glupio z mojej strony XD

1 odpowiedź

odpowiedź 9 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 9 lipca 2020 przez _Pita_

Prawdopodobnie dlatego, że próbujesz dodawać elementy "od końca". Tzn. zaczynasz od 10 pozycji, a kończysz na 0

Taki kod działa poprawnie:

var arr = [];

for (var i = 10; i >= 0; i--) {
	arr[i]=i;
}
console.log(arr)

Odwróciłem tylko kolejność dodawania elementów, teraz pierwszy element jest dodawany na pozycji 0, zamiast 10.

komentarz 9 lipca 2020 przez Comandeer Guru (601,550 p.)

Bez problemu da się dodawać od dowolnego indeksu w JS. Jeśli w pustej tablicy dodamy coś do indeksu 10, to zostanie stworzona tablica z 10 pustymi elementami i 11 ustawionym na naszą wartość. A później będziemy po prostu nadpisywać puste elementy.

komentarz 9 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

W takim razie co nie zadziałało?

komentarz 9 lipca 2020 przez Comandeer Guru (601,550 p.)

Niepoprawny warunek: https://forum.pasja-informatyki.pl/498501/wypelnianie-tablic-js?show=498508#c498508

komentarz 9 lipca 2020 przez Comandeer Guru (601,550 p.)

Pomijam, że Twój kod wstawia elementy od końca.

komentarz 10 lipca 2020 przez lujasjeden Użytkownik (860 p.)

moj blad, ogolnie zaczalem js bo umozliwi mi to "zademonstrowanie" kodu z c++ na stronie internetowej, wiecie co odpowiada cin>> z c++? Zebym mogl zrobic petle zagniezdzona gdzie wykona sie x razy (wartosc podana przez uzytkownika)

komentarz 10 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

co odpowiada cin>> z c++?

Jeśli chodzi o odczytanie w JavaScript wartości wpisanej przez użytkownika, to jest parę sposobów: najprostszy (ale słaby UXowo) pokazanie np. prompt'a do którego użytkownik wpisze tekst i ta wartość będzie zwrócona w JS; ciut bardziej skomplikowany (wymaga kodu HTML), ale raczej standardowo stosowany, to stworzenie <input type="number">, do którego user będzie wpisywał wartość liczbową, podpięcie się do niego np. na zdarzenie input w JS i odczytywanie wpisanej wartości w listenerze. Na tej podstawie możesz wykonać pętlę N liczbę razy dostarczoną przez użytkownika.

komentarz 10 lipca 2020 przez lujasjeden Użytkownik (860 p.)

moglbys napisac przykladowy kod? <input type="number"> tworze w pliku z kodem javascript? Co to listener?

komentarz 10 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czy przeczytałeś podlinkowane dokumentacje? Input tworzysz bezpośrednio w kodzie HTML lub możesz zrobić to dynamicznie z JavaScriptu.

komentarz 14 lipca 2020 przez VBService Ekspert (253,340 p.)
edycja 14 lipca 2020 przez VBService

Moja "luźna" propozycja.

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                padding: 0;
                min-height: 100vh;
                font-size: 14px;
                background: linear-gradient(45deg, hsl(240, 50%, 78%), hsl(30, 100%, 50%));
                overflow: hidden;
            }
            .wrap {
                width: 400px;
                height: 400px;
                margin: 10px 10px;
                padding: 10px 10px;
                font-family: Arial, sans-serif;
                font-weight: bold;
                font-size: 1em;
            }
            .cin {
                width: 100px;
                outline: none;
            }
            .cin::placeholder {
                font-size: 0.7em;
            }
            .cin[data-state="valid"] {
                border: 2px solid greenyellow;
            }
            .cin[data-state="invalid"] {
                border: 2px solid orangered;
            }
            .label-cin {
                margin-right: 10px;
            }
            .button-execute {
                cursor: pointer;
                text-shadow: 1px 1px 1px black;
                -webkit-text-shadow: 1px 1px 1px black;
                -moz-text-shadow: 1px 1px 1px black;
                box-shadow: 2px 2px 2px black;
                -webkit-box-shadow: 2px 2px 2px black;
                -moz-box-shadow: 2px 2px 2px black;
                font-variant: small-caps;
            }
            .button-execute:active {
                transform: translateY(1px);
                -webkit-transform: translateY(1px);
                -moz-transform: translateY(1px);
                box-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
            }
            .button-execute:disabled {
                cursor: default;
                color: gray;
            }
            .button-clear {
                border: none;
                background-color: transparent;
                cursor: pointer;
                float: right;
                text-shadow: 1px 1px 1px black;
                -webkit-text-shadow: 1px 1px 1px black;
                -moz-text-shadow: 1px 1px 1px black;
                outline: none;
            }
            .button-clear:active {
                transform: translateY(1px);
                -webkit-transform: translateY(1px);
                -moz-transform: translateY(1px);
            }
            .board {
                width: 100%;
                height: 90%;
                padding: 10px;
                background-color: honeydew;
                color: darkslategray;
                border: 1px solid lightgrey;
                border-radius: 5px;
                overflow-x: auto;
            }
            .board::-webkit-scrollbar {
                width: 0.6em;
            }
            .board::-webkit-scrollbar-track {
                border: 3px solid honeydew;
                background-color: lightgrey;
            }
            .board::-webkit-scrollbar-thumb {
                width: 0.4em;
                background-color: darkgrey;
                border-radius: 5px;
            }
            .board .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <label for="cin_x" class="label-cin">Twój tekst ...</label>
            <input id="cin_x" class="cin" type="text" autofocus placeholder value="">
            <button id="button_execute" class="button-execute" disabled>Wykonaj</button>
            <button id="button_clear" class="button-clear" glose="Wyczyść">x</button>
            <pre id="board" class="board"></pre>
        </div>
    <script>
        const cin = document.getElementById("cin_x"); // <input id="cin_x" ... >
        const b_exec = document.getElementById("button_execute"); // <button id="button_execute" ... >
        const b_clear = document.getElementById("button_clear"); // <button id="button_clear" ... >
        const board = document.getElementById("board"); // <pre id="board" ... >
 
        // Dozwolona liczba z przedziału ...
        const range_lower = 1;
        const range_upper = 100;
        cin.placeholder = `od ${range_lower} do ${range_upper}`; // tekst podpowiedzi w <input id="cin_x" ... >
 
        cin.addEventListener("input", event => {
            const value = cin.value;
            let valid = false;
 
            if (!value) { // puste pole - neutralne
                cin.dataset.state = '';
            } else {
                const trimmed = value.trim();
 
                if (!trimmed) { // ze spacjami - błąd
                    cin.dataset.state = 'invalid';
                } else {
                    let regex = /[^\d]+/; // tylko cyfry
 
                    if (regex.test(value) ) {
                        cin.dataset.state = 'invalid';
                    } else {
                        if (!inRange(value, range_lower, range_upper)) {
                            cin.dataset.state = 'invalid';
                        } else {
                            cin.dataset.state = 'valid';
                            valid = true;
                        }
                    }
                }
            }
 
            b_exec.disabled = (!valid) ? true : false; // włączenie lub nie przycisku <button id="button_execute" ... >
        });
 
        b_exec.addEventListener("click", event => { // Oczekiwanie na kliknięcie <button id="button_execute" ... >
            let x = cin.value * 1; // https://flaviocopes.com/how-to-convert-string-to-number-javascript/#use-1
            let html = "";
            let result;
            let rnd;
 
            board.innerHTML = "";
 
            for (i=1; i<=x; ++i) {
                rnd = getRandomIntInclusive(1, 100);
                result = i * rnd;
 
                if (i<10) i = " " + i;
                if (rnd<10) rnd = rnd + " ";
                html += i + " <span class='blue'>*</span> " + rnd + " <span class='blue'>=</span> " + result + "\n";
            }
 
            if (typeof html == "undefined") html = 0;
            board.innerHTML += html;
        });
 
        b_clear.addEventListener("click", event =>{ // Oczekiwanie na kliknięcie <button id="button_clear" ... >
            cin.value = ""; // czyszczenie <input id="cin_x" ... >
            cin.dataset.state = '';
            cin.focus();
            b_exec.disabled = true;
            board.innerHTML = ""; // czyszczenie <pre id="board" ... >
        });
 
        function inRange(value, lower, upper) {
            return value >= lower && value <= upper; // true - false
        }
 
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>
    </body>
</html>