Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wystwietlanie danych z JS w HTML
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
barthezz
19.12.2013, 15:06:00
Witam.
Nigdy nie miałem styczności z JS a niestety mam do wykonania pewnie zdanko tongue.gif Otóz trzeba wygenerowac liczby od 1-30, stwierdzić, które są parzyste a które nie i je wyświetlić w tabelce skonfigurowanej za pomocą CSS'a. Mam te dwie rzeczy, ale nie potrafie wyświetlić tych danych w tabelce.. 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3.   <meta http-equiv="Content-type" content="text/html; charset=iso 8859-2">
  4.   <meta name="Author" content="x">
  5.   <meta name="Generator" content="kED2">
  6. 	<title>JavaScript</title>
  7. 	<link rel="stylesheet" href="style.css" type="text/css">
  8. </head>
  9. <body>
  10.  
  11. //SKRYPT NA LOSOWANIE LICZB!
  12. <script type="text/javascript">
  13. for (i=0; i<30; i++) {
  14. document.write(i+". ");
  15. (x=Math.floor(Math.random()*0) + Math.round(Math.random()*20)); //przedział od 0-20.
  16. if (Math.floor(x/2)==x/2) {document.write(x+' jest parzysta')} else {document.write(x+' nie jest parzysta')}
  17. document.write ("<BR>");
  18. }
  19. </script>
  20.  
  21. <table align=center>
  22. <tr>
  23. <td align=center bgcolor=#bbb style=width:125px>Numer liczby</td><td align=center bgcolor=#bbb style=width:125px>Liczby parzyste</td><td align=center bgcolor=#bbb style=width:125px>Liczby nieparzyste</td>
  24. </tr>
  25. <tr>
  26. <td align=center bgcolor=#eee> </td><td align=center bgcolor=#eee> </td><td align=center bgcolor=#eee> </td>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext
Turson
19.12.2013, 15:11:37 
[JAVASCRIPT] pobierz, plaintext 
  1. for (i=0; i<30; i++) 
[JAVASCRIPT] pobierz, plaintext

var i

Włącz konsolę i zobacz co mówi
com
19.12.2013, 16:43:17
Turson
Nie zrozumiałeś autora a var nie gra tu roli, bo równie dobrze można go pominąć ale lepiej go dawać żeby się nie pomylić gdzieś odwołując do undefinded, jeśli chcesz dynamicznie wpisywać do tej tabelki to musisz ja tworzyć w js nie na sztywno w html wink.gif
barthezz
19.12.2013, 17:52:33
Cytat(com @ 19.12.2013, 16:43:17 ) *
Turson
Nie zrozumiałeś autora a var nie gra tu roli, bo równie dobrze można go pominąć ale lepiej go dawać żeby się nie pomylić gdzieś odwołując do undefinded, jeśli chcesz dynamicznie wpisywać do tej tabelki to musisz ja tworzyć w js nie na sztywno w html wink.gif


To mi właściwie nic nie mówi bo i tak tego nie potrafię zrobić.. Dobra.. A jak zrobić aby liczby parzyste wyświetlały się w jednej kolumnie a nieparzyste obok? | nr liczby | liczby parzyste | liczby nieparzyste |
Dark Smark
19.12.2013, 18:03:08
Brakuje Ci sposobu myślenia programisty.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3.   <meta http-equiv="Content-type" content="text/html; charset=iso 8859-2">
  4.   <meta name="Keywords" content=" pogrzeb,?mierć,wifi,lepsze jutro,trumna premium,">
  5.   <meta name="Author" content="Bartosz Lorek">
  6.   <meta name="Generator" content="kED2">
  7. 	<title>JavaScript</title>
  8. 	<link rel="stylesheet" href="style.css" type="text/css">
  9. </head>
  10. <body>
  11.  
  12.  
  13.  
  14. <table align=center>
  15. <tr>
  16. <td align=center bgcolor=#bbb style=width:125px>Numer liczby</td><td align=center bgcolor=#bbb style=width:125px>Liczby parzyste</td><td align=center bgcolor=#bbb style=width:125px>Liczby nieparzyste</td>
  17. </tr>
  18. <script type="text/javascript">
  19. //SKRYPT NA LOSOWANIE LICZB!
  20. var iloscLiczb = 30;
  21. var maxLiczba = 20;
  22. for (i=0; i<iloscLiczb; i++) {
  23. document.write("<tr><td align=center bgcolor=#eee><b>"+i+"</b></td>");
  24. (x=Math.floor(Math.random()*0) + Math.round(Math.random()*maxLiczba)); //przedział od 0-20.
  25. if (Math.floor(x/2)==x/2) {document.write("<td align=center bgcolor=#eee>"+x+"</td><td align=center bgcolor=#eee></td>")} else {document.write("<td align=center bgcolor=#eee></td><td align=center bgcolor=#eee>"+x+"</td>")}
  26. document.write ("</tr>");
  27. }
  28. </script>
  29. </table>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext


Zmodyfikowałem z deka wzbogacając o zmienna iloscLiczb i maxLiczba.
PrinceOfPersia
19.12.2013, 18:39:12
Cytat(com @ 19.12.2013, 16:43:17 ) *
Turson
Nie zrozumiałeś autora a var nie gra tu roli, bo równie dobrze można go pominąć ale lepiej go dawać żeby się nie pomylić gdzieś odwołując do undefinded,

Bez var, wyjdzie nam zmienna globalna (zamiast lokalnej). W tym wypadku to raczej bez roznicy, bo i tak autor korzysta ze zmiennej globalnej (bo nie wstawił pętli w żadną funkcję, mimo że tak byłoby bardziej elegancko), ale var a bez var to jest kolosalna różnica w większości przypadków. Coś jak global $zmienna, a $zmienna w PHP, tylko że odwrotnie, bo w JS zmienne są domyślnie globalne.

Do ustalania parzystości można zastosowac operator reszty z dzielenia:
if (liczba % 2 == 0) alert('liczba jest parzysta');

Samo wystylowanie można (ale nie trzeba) zrobić w samym CSS: nth-child(odd), jesli dobrze pamietam.

Edit. To document.write też nie jest zbyt eleganckie, ale co poradzić... (Jesli to pierwszy skrypt autora w JS to ujdzie w tłumie wink.gif
barthezz
19.12.2013, 19:26:12
Jak mam wypisać tablicę 200 element. w postaci tabeli 20x10 to robię tablicę dwuwymiarową?
CODE

var tablica = new Array(200);
for(var i in tablica) {
var tablica[i]= new Array(200);
for(var j in tablica[i]) {
tablica[i,j]=Math.floor(Math.random()*0 + Math.round(Math.random()*1));
document.write(tablica[i,j]); //wypisanie tablicy
}}
werdan
19.12.2013, 20:15:21
http://jsbin.com/UYAhoxu/1/edit?js,console,output
barthezz
19.12.2013, 20:59:30
Cytat(werdan @ 19.12.2013, 20:15:21 ) *
http://jsbin.com/UYAhoxu/1/edit?js,console,output


Super, tylko mam problem z wypisaniem.

CODE
var tablica = [];
for(var i = 0; i < 20; i++){
tablica[i] = [];
for(var j = 0; j < 10; j++){
tablica[i][j] = Math.floor(Math.random()*0 + Math.round(Math.random()*1));
}
}
for(var i=0;i<20;i++) {
for(var j=0;j<10;j++) {
document.write("<tr><td align=center bgcolor=#ddd>"+tablica[i,j]+"</td>")}
document.write ("</tr>")}


W tym przypadku wypisuje mi po 10 elementow w jednym wierszu. Efekt jaki chciałbym osiągnąć to 20 wierszy i 10 kolumn z 1 elementem każdy.
werdan
19.12.2013, 21:01:44 
[HTML] pobierz, plaintext 
  1. tablica[i][j]
[HTML] pobierz, plaintext


Tak sprobuj.
barthezz
19.12.2013, 21:08:08
Zrobiłem - efekt wink.gif W/w koncepcja nie do końca działała, ale dałem radę smile.gif. Teraz liczyłbym na perfidnego gotowca ;P Otóż:
Oblicz długość:
- najdłuższego podciągu składającego się z samych zer,
- najdłuższego podciągu składającego się z samych jedynek,
- zaznacz odmiennymi kolorami najdłuższe ciągi zer i jedynek.

Nie wiem jak bezdusznym nauczycielem trzeba być, aby zadać coś takiego osobie, która nigdy nie miała styczności z Javascript tongue.gif.
werdan
19.12.2013, 22:43:14
Mozesz sie klasc spac biggrin.gif

http://jsbin.com/obOPAGIl/1

w max0 i max1 masz liczba najdłuzszych.

Duble nie sa uwzglednione. Tylko pierwszy lepszy biggrin.gif
PrinceOfPersia
19.12.2013, 22:49:42
To zadanie ze szkoły? To trochę mieszanie dwóch zagadnień. Algorytmów i tworzenia stron internetowych. Podczas, gdy każde zagadnienie wymagałoby osobnej uwagi, bo inaczej ani to ani to nie zostanie dobrze zrobione.

- najdłuższego podciągu składającego się z samych zer,
Najprostszy sposób to chyba przejechanie sie tablicy, i jesli masz na poczatku zero, to ustawiasz gdziesz flage JestZero=true, i jedziesz dalej. Jesli jest zero, to jedziesz dalej. Az bedzie jeden. Wtedy masz "podciąg". Zapisujesz gdzies w osobnej tablicy PodciagiZero dane czyli wspolrzedne podciagu i dlugosc.

a potem musisz przejechac sie po tablicy podciagow i wybrac najdluzszy.

Analogicznie z podciagami jedynkowymi (zapisujesz do tablicy PodciagiJeden)

Tak mi przyszlo do glowy, co nie znaczy, ze bedzie to specjalnie wydajny algorytm (ale nie wiem co ci beda oceniac, czy tylko to czy dziala czy beda patrzec na zlozonosc obliczeniowa i inne bajery?)
barthezz
19.12.2013, 22:51:48
Cytat(werdan @ 19.12.2013, 22:43:14 ) *
Mozesz sie klasc spac biggrin.gif

http://jsbin.com/obOPAGIl/1

w max0 i max1 masz liczba najdłuzszych.

Duble nie sa uwzglednione. Tylko pierwszy lepszy biggrin.gif


Dzięki wielkie.. Straszne jest to, że coś takiego miałem sam napisać..
//EDIT: Coś wypelnianie kolorami nie działa prawidłowo, ale i tak wieelkie podziękowania ;]

Cytat(PrinceOfPersia @ 19.12.2013, 22:49:42 ) *
Tak mi przyszlo do glowy, co nie znaczy, ze bedzie to specjalnie wydajny algorytm (ale nie wiem co ci beda oceniac, czy tylko to czy dziala czy beda patrzec na zlozonosc obliczeniowa i inne bajery?)

Wedle mnie może być i 1000 linijek kodu tongue.gif Po prostu ma działać. Niech się nauczyciel męczy;]
werdan
19.12.2013, 23:17:38
> //EDIT: Coś wypelnianie kolorami nie działa prawidłowo, ...

Co jest nie tak?
barthezz
19.12.2013, 23:27:53
Cytat(werdan @ 19.12.2013, 23:17:38 ) *
Co jest nie tak?


Zmień u siebie kolor, gdy wypadnie fałsz w ostatnim ifie ;]
werdan
20.12.2013, 06:46:47
Kurde nadal nie wiem co jest nie tak biggrin.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.