Połącz się z nami

Internet Maker

Jak wyświetlać losową treść przy użyciu JavaScript

W tym tutorialu nauczymy się jak utworzyć prosty skrypt w JavaScript, który automatycznie będzie wyświetlał losową treść za każdym razem, gdy użytkownik odświeży stronę.

  

Krok pierwszy

W pierwszej kolejności musimy utworzyć dwa pliki: index.html i javascript.js.
?

Krok drugi

Teraz otwórz plik index.html jakimkolwiek edytorem tekstu i napisz poniższy kod HTML:

 


	Jak wyświetlać losową treść przy użyciu JavaScript
	




To jest pierwszy news z linkiem treści.
To jest drugi news. W tym bloku <div> możesz napisać co chcesz.
To jest trzeci news z tekstem pogrubionym.

To jest czwarty news z tekstem pisanym kursywą i listą nieuporządkowaną:

  • Przykład1
  • Przykład2
  • Przykład3

Powyższa treść zmieni się za każdym razem, gdy odświeżysz stronę.
Zobacz cały tutorial pod tym adresem: http://www.magazynt3.pl

Po napisaniu wszystkich tych wierszy kodu bez użycia jakichkolwiek stylów CSS lub JavaScript, nasz dokument HTML będzie pokazywał całą treść od razu. A nie o to nam przecież chodzi.

Krok trzeci

Zatem aby wszystko zaczęło działać jak należy, otwórz plik javasript.js jakimkolwiek edytorem tekstu. Teraz będziemy musieli stworzyć:

  • Zmienną nazwaną ?randomNumber?, które będzie generować losową liczbę,
  • Dwie funkcje wewnątrz naszej zmiennej: ?Math.floor? oraz ?Math.random?,
  • Funkcję, które będzie ukrywać pozostałe newsy, gdy strona zostanie załadowana.
  • 
    randomNumber = Math.floor(Math.random()*4+1);
    
    window.onload = function() {
    	if (randomNumber == 1) {
    		document.getElementById("news1").style.display = "inline"; 
    		document.getElementById("news2").style.display = "none"; 
    		document.getElementById("news3").style.display = "none"; 
    		document.getElementById("news4").style.display = "none"; 
    	}	
    	if (randomNumber == 2) {
    		document.getElementById("news1").style.display = "none"; 
    		document.getElementById("news2").style.display = "inline"; 
    		document.getElementById("news3").style.display = "none"; 
    		document.getElementById("news4").style.display = "none"; 
    	}
    	if (randomNumber == 3) {
    		document.getElementById("news1").style.display = "none"; 
    		document.getElementById("news2").style.display = "none"; 
    		document.getElementById("news3").style.display = "inline"; 
    		document.getElementById("news4").style.display = "none"; 
    	}
    	if (randomNumber == 4) {
    		document.getElementById("news1").style.display = "none"; 
    		document.getElementById("news2").style.display = "none"; 
    		document.getElementById("news3").style.display = "none"; 
    		document.getElementById("news4").style.display = "inline"; 
    	}
    }

    Krok czwarty – rozumienie kodu

    W tym kroku wyjaśnię jak działa powyżej zaprezentowany kod JavaScript.

    randomNumber – Jest to zmienna, której nazwę możesz dowolnie zmienić. Pamiętaj jednak o podmienieniu starej nazwy na nową w całym skrypcie.

    Math.floor(liczba) ? zwraca liczbę typu integer. Dla przykładu:

  • Math.floor(0.2) zwraca cyfrę 0
  • Math.floor(-6.1) zwraca cyfrę 7
  • Math.random() ? zwraca liczbę pomiędzy 0 i 1. W naszym przypadku Math.random()*4 zwraca cyfrę pomiędzy 0 i 3. Jako, że potrzebujemy cyfry z zakresu od 1 do 4, to musimy do zwróconego wyniku dodać 1. Dla przykładu:

  • Math.random() zwraca 0.42362819185,
  • Math.random()*4+1 zwraca cyfrę pomiędzy 1 and 4,
  • Math.random()*10 zwraca cyfrę pomiędzy 0 and 9,
  • Math.random()*5+2 zwraca cyfrę pomiędzy 2 and 6.
  • window.onload = function() { kod } ? Ten element tworzy całą naszą funkcję. Gdy strona jest ładowana kod wewnątrz tej funkcji zostanie uruchomiony tylko raz. Jeśli odświeżysz stronę kod zostanie uruchomiony ponownie, i tak dalej.

    document.getElementById(?news1?).style.display = ?inline?; – Ta funkcja wybierze element o określonym ID z naszego dokumentu HTML (w tym przypadku ?news1?). Następnie zostanie ustalona wartość CSS na ?inline? lub ?none?.

    Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

    Kliknij, by skomentować

    Zostaw komentarz

    Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

    Popularne

    Wizytówka przy użyciu pluginu Hovercard

    Internet Maker

    Jak zbudować aplikację na Androida?

    Internet Maker

    Jak napisać prostą aplikację na Facebook’a w JavaScript SDK?

    Internet Maker

    JavaScriptu w kilku słowach

    Internet Maker

    Połącz
    Newsletter

    Zapisz się do naszego newslettera i bądź na bieżąco!