WSTĘP

Skrypt tworzący generator liczb losowych w formie prostej strony www.
Do wykonywania obliczeń wykorzystuje zarówno JS jak i PHP.

INDEX.PHP

Kod odpowiedzialny za działanie naszego generatora.
Każda z kolumn spełniających określone działanie opisana jest poniżej.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
        <head>
                <meta charset="utf-8"/>
                <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
                <div id="container">
                        <div id="header"></div>
                        <div class="column" id="1">
                                <script>
                                        var a = Math.floor((Math.random() * 200) + 80);
                                        document.getElementById("1").innerHTML += a;
                                </script>
                        </div>
                        <div class="column" id="2">
                                <form>
                                        <p>Podaj a<input type="text" id="a" name="a"></p>
                                        <p>Podaj b<input type="text" id="b" name="b"></p>
                                        <p><input type="button" value="Stwórz tablice" onclick="table()"></p>
                                </form>
                                <script>
                                        function table(){
                                       
                                                var a1 = document.getElementById("a").value;
                                                var b1 = document.getElementById("b").value;
                                                       
                                                var a = parseFloat(a1);
                                                var b = parseFloat(b1);
                                               
                                                var HTML = "<table border=1><tr>";
                                                for (j = a; j <= b; j++){
                                                        HTML += "<tr>";
                                                        for (i = 1; i <= a; i++){
                                                                HTML += "<td>" + j + "," + i + "</td>";
                                                        }
                                                        HTML += "</tr>";
                                                }
                                                HTML += "</table>";
                                                document.getElementById("2").innerHTML = HTML;
                                        }
                                </script>
                        </div>
                        <div class="column" id="3">
                                <?php
                                        $a = rand(1,3);
                                        echo "<img width="150" height="150" src="$a.jpg"></img>";
                                ?>
                        </div>
                        <div id="clear"></div>
                        <div id="footer"></div>
                </div>
        </body>
</html>

Kolumna 1

Generuje losową liczbę z przedziału 80-200, używając funkcji biblioteki Math.
Następnie wpisuje ją do kolumny z id „1”.

1
2
3
4
<script>
var a = Math.floor((Math.random() * 200) + 80);
document.getElementById("1").innerHTML += a;
</script>

Kolumna 2

Najbardziej rozbudowana z kolumn. Wyświetla formularz w którym wpisujemy dowolną liczbę a oraz b.
Skrypt generuje tabele o podanym przedziale i zapisuje ją jako ciąg znaków.

Dzieje się tak, ponieważ innerHTML automatycznie zamyka tagi html,
przez co niemożliwe byłoby tworzenie tabeli krok po kroku.

Następnie wygenerowany ciąg znaków zapisywany jest do kolumny o id „2”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form>
        <p>Podaj a<input type="text" id="a" name="a"></p>
        <p>Podaj b<input type="text" id="b" name="b"></p>
        <p><input type="button" value="Stwórz tablice" onclick="table()"></p>
</form>
<script>
        function table(){
                                       
                var a1 = document.getElementById("a").value;
                var b1 = document.getElementById("b").value;
                                                       
                var a = parseFloat(a1);
                var b = parseFloat(b1);
                                               
                var HTML = "<table border=1><tr>";
                for (j = a; j <= b; j++){
                        HTML += "<tr>";
                        for (i = 1; i <= a; i++){
                                HTML += "<td>" + j + "," + i + "</td>";
                        }
                        HTML += "</tr>";
                }
                HTML += "</table>";
                document.getElementById("2").innerHTML = HTML;
        }
</script>

Kolumna 3

W tej kolumnie użyty został prosty skrypt php generujący losową liczbę od 1 do 3.
Następnie tworzy on obraz o podanym numerze i umieszcza go w kolumnie „3”.

1
2
3
4
<?php
        $a = rand(1,3);
        echo "<img width="150" height="150" src="$a.jpg"></img>";
?>

STYLE.CSS

Podstawowy styl css, dzieki któremu stworzymy układ strony oparty na 3 kolumnach.
Tradycyjnie w kodzie wykorzystujemy do tego float oraz clear.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#container{
width: 960px;
margin: 0 auto;
}

#header{
width: 938px;
height: 150px;
margin: 10px;
border: 1px solid #000;
}

.column{
width: 298px;
height: 350px;
margin: 10px;
border: 1px solid #000;
float: left;
}

#clear{
clear: both;
}

#footer{
width: 938px;
height: 50px;
margin: 10px;
border: 1px solid #000;
}

ZASOBY

Potrzebne nam będą również 3 dowolne obrazki które nazwiemy kolejno 1.jpg, 2.jpg oraz 3.jpg.
Wszystkie umieszczamy w tym samym folderze co index i style.

HTML + CSS, JavaScript, PHP