Połącz się z nami

Internet Maker

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

Opublikowane

dnia

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.

    Kontynuuj czytanie
    Reklama
    Kliknij, by skomentować

    Zostaw komentarz

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

    Internet Maker

    Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

    Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

    Opublikowane

    dnia

    przez

    Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

    (więcej…)

    Kontynuuj czytanie

    Internet Maker

    Jak szybko i łatwo stworzyć stronę mobilną

    Opublikowane

    dnia

    W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

    (więcej…)

    Kontynuuj czytanie

    Internet Maker

    Strona na WordPressie? Grunt to dobry hosting

    Opublikowane

    dnia

    WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

    (więcej…)

    Kontynuuj czytanie

    Internet Maker

    Jak zabezpieczyć swoje zdjęcia w chmurze

    Opublikowane

    dnia

    Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

    Kontynuuj czytanie

    Internet Maker

    Jak usunąć historię swojej aktywności z Facebooka?

    Opublikowane

    dnia

    Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

    Kontynuuj czytanie
    Reklama

    Popularne