5.pdf - Sign in Search MDN Technologies \u25bc References Guides \u25bc Feedback \u25bc Storing the information you need \u2014 Variables English \u25bc Previous

5.pdf - Sign in Search MDN Technologies u25bc References...

This preview shows page 1 - 5 out of 21 pages.

Search MDNSign inStoring the information you need — VariablesTechnologiesReferences & GuidesFeedbackEnglishPreviousOverview: First stepsNext After reading the last couple of articles you should now know what JavaScript is, what it can dofor you, how you use it alongside other web technologies, and what its main features look likefrom a high level. In this article, we will get down to the real basics, looking at how to work withthe most basic building blocks of JavaScript — Variables.Prerequisites:Basic computer literacy, a basic understanding of HTML andCSS, an understanding of what JavaScript is.Objective:To gain familiarity with the basics of JavaScript variables.
Background image
Throughout this article, you'll be asked to type in lines of code to test your understanding of thecontent. If you are using a desktop browser, the best place to type your sample code is yourbrowser's JavaScript console (see What are browser developer tools for more information onhow to access this tool).A variable is a container for a value, like a number we might use in a sum, or a string that wemight use as part of a sentence. But one special thing about variables is that their containedvalues can change. Let's look at a simple example:Tools you needWhat is a variable?<button>Press me</button>1const button = document.querySelector('button'); button.onclick = function() { let name = prompt('What is your name?'); alert('Hello ' + name + ', nice to see you!');}123456
Background image
In this example pressing the button runs a couple of lines of code. The first line pops a box upon the screen that asks the reader to enter their name, and then stores the value in a variable.The second line displays a welcome message that includes their name, taken from the variablevalue.To understand why this is so useful, let's think about how we'd write this example without usinga variable. It would end up looking something like this:You may not fully understand the syntax we are using (yet!), but you should be able to get theidea — if we didn't have variables available, we'd have to implement a giant code block thatPress melet name = prompt('What is your name?'); if (name === 'Adam') { alert('Hello Adam, nice to see you!'); } else if (name === 'Alan') { alert('Hello Alan, nice to see you!'); } else if (name === 'Bella') { alert('Hello Bella, nice to see you!'); } else if (name === 'Bianca') { alert('Hello Bianca, nice to see you!'); } else if (name === 'Chris') { alert('Hello Chris, nice to see you!'); } // ... and so on ...123456789101112131415
Background image
checked what the entered name was, and then display the appropriate message for any name.This is obviously really inefficient (the code is a lot bigger, even for only five choices), and it justwouldn't work — you couldn't possibly store all possible choices.Variables just make sense, and as you learn more about JavaScript they will start to becomesecond nature.
Background image
Image of page 5

You've reached the end of your free preview.

Want to read all 21 pages?

  • Fall '19
  • myname

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture