Connect with us

Cześć, czego dzisiaj szukasz?

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.

    Może cię też zainteresować

    Internet Maker

    Profile na portalach społecznościowych to świetna reklama, pozwalająca czytelnikom na bieżąco monitorować Twoją aktywność. Przedstawimy teraz ciekawą wtyczkę jQuery, która pozwoli na stworzenie ładnej wizytówki z informacjami kontaktowymi w formie pojawiającego...

    Internet Maker

    Jednym z atutów platformy Android w porównaniu do iOS jest to, że została ona oparta o Open Source. Taki stan rzeczy znacznie ułatwia tworzenie własnych aplikacji oraz rozpowszechnianie ich bez konieczności...

    Internet Maker

    Chcesz stworzyć aplikację na Facebooka? Koniecznie zapoznaj się z JavaScript SDK i stwórz pierwszą aplikację w kilkanaście minut.

    Internet Maker

    Od lat żadna technologia nie zagroziła JavaScriptowi, językowi uznawanemu za zabawkę dla dzieci. Czy uda się mu zachować popularność i zapewnić źródło utrzymania kolejnym programistom?