Jump to content
Rúben Periquito Developer

Projecto Final do tema JAVASCRIPT

Recommended Posts

Rúben Periquito Developer

devo fazer um projeto slider mas acho que ainda não me ensinaram tudo do que pedem...

quem me pode desenrascar uma ajuda?

 

PROJETO FINAL DO MÓDULO JAVASCRIPT

Criação de um banner slider com Javascript

 

 

Neste projeto vamos continuar a implementar o que aprendemos na secção de JavaScript e incluí-lo no projeto já existente que fizemos no módulo anterior de HTML5/CSS3.

O nosso projeto consistia em criar as bases de uma loja online, com páginas, links e imagens.

 Nesta fase terá de implementar um banner rotativo com imagens (2 ou 3) na página inicial ou homepage (ficheiro index.html).

Isto terá de ser feito com código JavaScript. 

Tem de seguir os seguintes passos:

1. Implementar um banner rotativo no index.html do nosso projeto usando JavaScript.

Criar duas imagens, a destaque-home.png e a destaque-home-2.png que queremos trocar a cada 4 segundos; usa a função “setInterval” para fazê-lo. Há várias formas de implementar esta troca de imagens. Uma hipótese é manter um array com os valores possíveis para a imagem e um inteiro que guarda o banner atual.

Crie um arquivo “banner.js” e não se esqueça de o adicionar ao HTML do index.html <script type="text/javascript" src="js/banner.js"></script>

No ficheiro “banner.js tem de criar o código base javascript para o banner funcionar.

 2. Crie um botão de pausa para parar a troca de banner.

 Dica: use o clearInterval para interromper a execução.

 3.  Crie um botão de play para reativar a troca dos banners.


Rúben Periquito 

Share this post


Link to post
Share on other sites
M6

Coloca as tuas dúvidas e problemas de forma concreta.
Despejares aqui o enunciado não permite que alguém te ajude uma vez que não se sabe quais são os problemas que tens.


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
1 hora atrás, M6 disse:

Coloca as tuas dúvidas e problemas de forma concreta.
Despejares aqui o enunciado não permite que alguém te ajude uma vez que não se sabe quais são os problemas que tens.

os problemas é: como faço o que está no enunciado?

e ainda não aprendi tudo o que eles pedem................


Rúben Periquito 

Share this post


Link to post
Share on other sites
antseq
48 minutos atrás, Rúben Periquito Developer disse:

os problemas é: como faço o que está no enunciado?

e ainda não aprendi tudo o que eles pedem................

já pensaste em seguir o que está enunciado:

- criar página "index.html" (tens dúvidas?)

- criar ficheiro “banner.js” (tens dúvidas?)

- associar <script> “banner.js” ao "index.html" (tens dúvidas?)

- ter duas imagens PNG (tens dúvidas?)

- colocar uma das imagens PNG na página (tens dúvidas?)

* se fizeres o que está acima, já tens 100% da base do projecto => só falta a implementação dos "banners":

- fazer "algo" no "banner.js" para substituir as imagens... e tens várias dicas no enunciado (array, trocar a 4 seg, setinterval) (tens dúvidas?)

- fazer "algo" no "banner.js" para por em pausa (pause) e continuar(play) na substituição das imagens.. e tens uma dica no enunciado (clearInterval) (tens dúvidas?)

 

Edited by antseq

Share this post


Link to post
Share on other sites
M6
50 minutes ago, Rúben Periquito Developer said:

os problemas é: como faço o que está no enunciado?

e ainda não aprendi tudo o que eles pedem................

Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim.

De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas.


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
1 minuto atrás, M6 disse:

Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim.

De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas.

tenho estado com isto o dia todo xD

algo de errado não está certo xD


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

repito: há coisas que ainda não aprendi


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
16 minutos atrás, M6 disse:

Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim.

De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas.

"Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro." o meu prof pede

por exemplo, fazer um slider ele nem me ensinou isso


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

até eu já lhe disse algumas vezes que ele pede coisas nos testes que não ensina, este não é a primeira vez que isso acontece -.-


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
29 minutos atrás, antseq disse:

olocar uma das imagens PNG na página (tens dúvidas?)

colocar só uma imagem? mas é para colocar as 2 em um slider com o tempo e incorporar botões de "Next" e "Back" serei eu que li mal?


Rúben Periquito 

Share this post


Link to post
Share on other sites
antseq
24 minutos atrás, Rúben Periquito Developer disse:

colocar só uma imagem? mas é para colocar as 2 em um slider com o tempo e incorporar botões de "Next" e "Back" serei eu que li mal?

se tiveres por exemplo só isto <button><img><button>

- só tens 1 imagem visível de cada vez [forma simplista]

[* o próprio enunciado clarifica "Há várias formas de implementar esta troca de imagens"]

[* não sei se sabes usar DIV, UL, etc + CSS para outros tipos de implementação...]

- tens  de fazer a funcionalidade de trocar o img.src de x em x segundos [forma simplista]

- tens de fazer algo com os botões [salvo erro PAUSE e PLAY]

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

ainda não sei como criar o slider em si, como colocar lá imagens nem como as fazer trocar automaticamente com tempo perceberam? se eu percebesse tudo não vinha aqui fazer nada


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
2 horas atrás, antseq disse:

já pensaste em seguir o que está enunciado:

- criar página "index.html" (tens dúvidas?)

- criar ficheiro “banner.js” (tens dúvidas?)

- associar <script> “banner.js” ao "index.html" (tens dúvidas?)

- ter duas imagens PNG (tens dúvidas?)

- colocar uma das imagens PNG na página (tens dúvidas?)

* se fizeres o que está acima, já tens 100% da base do projecto => só falta a implementação dos "banners":

- fazer "algo" no "banner.js" para substituir as imagens... e tens várias dicas no enunciado (array, trocar a 4 seg, setinterval) (tens dúvidas?)

- fazer "algo" no "banner.js" para por em pausa (pause) e continuar(play) na substituição das imagens.. e tens uma dica no enunciado (clearInterval) (tens dúvidas?)

 

eu uso o fórum porque o meu prof me recomendou quando eu lhe perguntei o que fazia se houvesse algo que eu não conseguisse fazer...............

certamente não foi para levar sermões 

eu não sou formado nisto, tenho um conhecimento mínimo nisto ainda


Rúben Periquito 

Share this post


Link to post
Share on other sites
antseq
2 minutos atrás, Rúben Periquito Developer disse:

eu uso o fórum porque o meu prof me recomendou quando eu lhe perguntei o que fazia se houvesse algo que eu não conseguisse fazer...............

certamente não foi para levar sermões 

eu não sou formado nisto, tenho um conhecimento mínimo nisto ainda

1. a intenção foi ajudar... se acha que o meu texto/ajuda - passos a seguir - acima é um "sermão"... nem comento...

2. tb já te disseram que aqui no forum, ninguém te vai fazer a aplicação...

3. se tivesses seguido a minha ajuda (e de outros), e colocado aqui no forum o código da página html + js e com a dúvida de onde está "encravado" ou onde não consegue avançar, já o tinham dado + dicas de como resolver o problema.

4. até agora não mostraste 1 linha de código teu, nem html, nem js => em contrapartida já várias pessoas do forum, perderam o seu tempo para escrever linhas e linhas com indicações de por onde podes começar

da minha parte, as minhas desculpas por algo que tenha dito e desejos de boa sorte no seu desenvolvimento.

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
38 minutos atrás, antseq disse:

já te disseram que aqui no forum, ninguém te vai fazer a aplicação...

a ver se a gente se entende...

38 minutos atrás, antseq disse:

se tivesses seguido a minha ajuda (e de outros), e colocado aqui no forum o código da página html + js e com a dúvida de onde está "encravado" ou onde não consegue avançar, já o tinham dado + dicas de como resolver o problema.

segui os passos sim mas ainda não chegou lá, meter imagem SIMPLES sei eu meter....

38 minutos atrás, antseq disse:

até agora não mostraste 1 linha de código teu, nem html, nem js => em contrapartida já várias pessoas do forum, perderam o seu tempo para escrever linhas e linhas com indicações de por onde podes começar

html: 

<!DOCTYPE html>

<html>

    <head>

        <title>PROJETO FINAL DO MÓDULO JAVASCRIPT</title>

        <script type="text/javascript" src="banner.js"></script>

        <link rel="stylesheet" type="text/css" href="css.css">

    </head>

    <body>

 

        <div class="slideshow-container"></div>

 

        <div class="Slide">

            <div class="numbertext">1 / 2</div>

            <img src="paisagem/destaque-home.png" alt="floresta" style="width:100%">

          </div>

 

          <div class="Slide">

            <div class="numbertext">2 / 2</div>

            <img src="paisagem/destaque-home-2.png" alt="floresta" style="width:100%">

          </div>

 

        <div id="slide"></div>

        <input type="button" value="Play">

        <input type="button" value="Stop">

    </body>

 

</html>

 

JS: 

ainda em branco porque não entendo o que lá devo colocar para criar o slider...

 

css externo:

body {

    background-color: green;

}

 

 

Edited by Rúben Periquito Developer

Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

preciso de ajuda apenas para IMPLEMENTAR O SLIDER E QUE ELE MUDE COM TEMPO OU COM BOTÕES NO CASO DE CLICAR NELES

onde não me expressei correctamente? 


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

porque não dizem como se faz? este fórum é para quê, mesmo?


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

tá quase xD

só falta saber colocar o tempo para as imagens mudarem sozinhas...

podem me ajudar? 

o código tá assim:

 

 

<html>

    <head>   

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>

         html {

        border-top: 5px solid #fff;

        background: #f9f9f9;

    }

    #slider {

        position: relative;

        overflow: hidden;

        margin: 20px auto 0 auto;

        border-radius: 4px;

    }

    #slider ul {

        position: relative;

        margin: 0;

        padding: 0;

        height: 200px;

        list-style: none;

    }

    #slider ul li {

        position: relative;

        display: block;

        float: left;

        margin: 0;

        padding: 0;

        width: 1000px;

        height: 500px;

        background: #ccc;

        text-align: center;

        line-height: 300px;

    }

    a.control_prev, a.control_next {

        position: absolute;

        top: 40%;

        z-index: 999;

        display: block;

        padding: 4% 3%;

        width: auto;

        height: auto;

        background: #2a2a2a;

        color: #fff;

        text-decoration: none;

        font-weight: 600;

        font-size: 18px;

        opacity: 0.8;

        cursor: pointer;

    }

    a.control_prev:hover, a.control_next:hover {

        opacity: 1;

        -webkit-transition: all 0.2s ease;

    }

    a.control_prev {

        border-radius: 0 2px 2px 0;

    }

    a.control_next {

        right: 0;

        border-radius: 2px 0 0 2px;

    }

    .slider_option {

        position: relative;

        margin: 10px auto;

        width: 160px;

        font-size: 18px;

    }

    </style>

    

  </head>

<body>

<div id="slider">

    <a href="#" class="control_next">Next</a>

    <a href="#" class="control_prev">Back</a>

    <ul>

        <li>

                <img src="paisagem/destaque-home.png"/>

            </a>

        </li>

        <li>

                <img src="paisagem/destaque-home-2.png"/>

            </a>

        </li>

</div>

<script>

    $(function() {

    $('#checkbox').change(function () {

        setInterval(function () {

            moveRight();

        }, 2000);

    });

    var slideCount = $('#slider ul li').length;

    var slideWidth = $('#slider ul li').width();

    var slideHeight = $('#slider ul li').height();

    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({

        width: slideWidth,

        height: slideHeight

    });

    $('#slider ul').css({

        width: sliderUlWidth,

        marginLeft: -slideWidth

    });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {

        $('#slider ul').animate({

            left: +slideWidth

        }, 200, function () {

            $('#slider ul li:last-child').prependTo('#slider ul');

            $('#slider ul').css('left', '');

        });

    };

    function moveRight() {

        $('#slider ul').animate({

            left: -slideWidth

        }, 200, function () {

            $('#slider ul li:first-child').appendTo('#slider ul');

            $('#slider ul').css('left', '');

        });

    };

    $('a.control_prev').click(function () {

        moveLeft();

    });

    $('a.control_next').click(function () {

        moveRight();

    });

});

</script>

</body>

</html>

 

tá tudo no html xD


Rúben Periquito 

Share this post


Link to post
Share on other sites
antseq
9 horas atrás, Rúben Periquito Developer disse:

tá quase xD

só falta saber colocar o tempo para as imagens mudarem sozinhas...

podem me ajudar? 

o código tá assim:

tá tudo no html xD

5 comentários:

1) se o código acima fosse feito por si... onde colocar o tempo seria o menor dos seus problemas.

2) para quem a menos de 24 horas dizia não saber nada e o professor não ensinar nada... escrever o código acima.... é praticamente impossível..

3) mesmo que tenha tido uma epifania súbita, está a usar/recorrer a uma library "jQuery" ou seja uma biblioteca de funções "JavaScript". (e não puro "JavaScript"... nunca mencionou que seria para fazer com a utilização de "jQuery")

4) este seu código, salvo erro foi copiado "ipsis verbis" deste site "https://webframe.com.br/como-adicionar-um-slider-profissional-em-seu-site/".

5) o que é que o seu professor vai pensar de (2) (3) e (4)?

cps,

  • Vote 2

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
2 horas atrás, antseq disse:

5 comentários:

1) se o código acima fosse feito por si... onde colocar o tempo seria o menor dos seus problemas.

2) para quem a menos de 24 horas dizia não saber nada e o professor não ensinar nada... escrever o código acima.... é praticamente impossível..

3) mesmo que tenha tido uma epifania súbita, está a usar/recorrer a uma library "jQuery" ou seja uma biblioteca de funções "JavaScript". (e não puro "JavaScript"... nunca mencionou que seria para fazer com a utilização de "jQuery")

4) este seu código, salvo erro foi copiado "ipsis verbis" deste site "https://webframe.com.br/como-adicionar-um-slider-profissional-em-seu-site/".

5) o que é que o seu professor vai pensar de (2) (3) e (4)?

cps,

ele próprio disse que podia recorrer a ajuda

e que o google "is your friend" 


Rúben Periquito 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.