MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Nesta avaliação, você será encarregado de utilizar parte do conhecimento que você adquiriu nos artigos deste módulo e aplicá-lo para criar um aplicativo divertido que gera histórias bobas aleatórias. Diverta-se!

Pré-requisitos: Antes de tentar esta avaliação, você já deveria ter trabalhado com todos os artigos deste módulo.
Objetivo: Testar a compreensão dos fundamentos de JavaScript, como variáveis, números, operadores, cadeias de caracteres e matrizes.

Ponto de partida

Para começar esta avaliação, você deve:

  • Pegue o arquivo HTML para o exemplo e salve uma cópia local deste arquivo como index.html em um novo diretório em algum local do seu computador. Este arquivo ainda contém o CSS para estilizar o exemplo contido no arquivo.
  • Vá para a página que contém o texto bruto e matenha-a aberta em uma aba separada do navegador em algum lugar. Você precisará dela mais tarde.

Nota: Alternativamente, você pode utilizar um site como JSBin ou Thimble para fazer a sua avaliação. Você pode colar o HTML, CSS e javaScript em um desses editores online. Se o editor online que você estiver utilizando não possuir um painel separado para javaScript, sinta-se a vontade para inseri-lo em um elemento <script> dentro da página HTML.

Resumo do projeto

Você recebeu algum HTML/CSS em bruto e algumas strings de texto e funções de JavaScript; Você precisa escrever o JavaScript necessário para transformar este em um programa funcional, que faz o seguinte:

  • Gera uma história boba quando o botão "Gerar história aleatória" é pressionado.
  • Substitui o nome padrão "Bob" na história com um nome personalizado, somente se um nome personalizado for inserido no campo de texto "Inserir nome personalizado" antes que o botão de geração seja pressionado.
  • Gera outra história boba aleatória se você pressionar novamente o botão (e novamente...)

A seguinte captura de tela mostra um exemplo do que o programa concluído deve produzir:

Para dar-lhe mais uma ideia, dê uma olhada no exemplo concluído (sem espreitar o código fonte!)

Passos para completar

As seções a seguir descrevem o que você precisa fazer.

Configuração básica:

  1. Crie um novo arquivo chamado main.js, no mesmo diretório que o arquivo index.html.
  2. Aplique o arquivo JavaScript externo ao seu HTML inserindo um elemento <script> no seu HTML referenciando o main.js. Coloque-o antes da etiqueta de fechamento </ body>.

Variáveis e funções iniciais:

  1. No arquivo de texto cru, copie todo o código abaixo do cabeçalho "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" e cole-o no topo do arquivo main.js. Isso dá a você três variáveis que armazenam referências ao campo de texto "Inserir nome personalizado" (customName), o botão "Gerar história aleatória" (randomizar), E o elemento <p> na parte inferior do corpo HTML para onde a história será copiada (história), respectivamente. Além disso, você tem uma função chamada randomValueFromArray () que recebe um vetor e retorna um dos itens armazenados dentro do vetor aleatoriamente.
  2. Agora, veja a segunda seção do arquivo de texto bruto - "2. RAW TEXT STRINGS". Ele contém strings de texto que atuarão como entrada em nosso programa. Gostaríamos que você contivesse essas dentro de variáveis no main.js:
    1. Armazene a primeira, grande e longa linha de texto dentro de uma variável chamada storyText.
    2. Armazene o primeiro conjunto de três strings dentro de um vetor chamado insertX.
    3. Armazene o segundo conjunto de três strings dentro de um vetor chamado insertY.
    4. Armazene o terceiro conjunto de três strings dentro de um vetor chamado insertZ.

Colocando o manipulador de eventos e a função incompleta:

  1. Agora volte ao arquivo de texto bruto.
  2. Copie o código encontrado abaixo do cabeçalho "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" E cole ele na parte inferior do arquivo main.js. This:
    • Adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
    • Adds a partially-completed result() function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.

Completing the result() function:

  1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
  2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
  3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
  4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
  5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and farenheit into stones and centigrade. What you need to do is as follows:
    1. Look up the formulae for converting pounds to stone, and farenheit to centigrade.
    2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
    3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 farenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
    4. Just under the two variable definitions, add two more string replacement lines that replace '94 farenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
  6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.

Dicas e sugestões

  • Você não precisa editar o HTML de nenhuma maneira, exceto para adicionar o JavaScript ao seu HTML.
  • If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the <html> element red — so the entire browser window should go red if the JavaScript is applied properly:
    document.querySelector('html').style.backgroundColor = 'red';
  • Math.round() is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.

Avaliação

Se você estiver seguindo esta avaliação como parte de um curso organizado, você está apto a entregar seu trabalho ao seu professor/mentor para avaliação. Se você é auto-didata, então você pode consultar o guia de marcação com bastante facilidade perguntando  no tópico do Discurso da área de aprendizagem, ou no no canal #mdn IRC no IRC Mozilla. Tente realizar o exercício primeiro  — não há nada a ganhar com a trapaça!

Etiquetas do documento e colaboradores

 Colaboradores desta página: fenobalao, carlos-rafael
 Última atualização por: fenobalao,