Variables in javascript
PART 1
Learning target:
•define variables
•create them in JavaScript and use them to
store and manipulate data in their programs.
Let’s think!
How does the strategic use of variables in JavaScript,
contribute to the efficiency of code in complex
applications?
What are variables in JavaScript?
Declaring variables is one of the
fundamental concepts in
JavaScript. Variables are used to
store and manage data in your
programs.
JavaScript Variables can be declared in 4 ways:
•Automatically
•Using var
•Using let
•Using const
Var
var is used to declare variables. It has function-level scope, meaning it's
accessible throughout the function in which it's declared. However, it's not
block-scoped like let and const, which can lead to unintended issues,
especially in larger codebases. It's still used, but mostly in legacy code or
specific cases where its behavior is desired.
let
let is preferred over var for variable declaration in modern JavaScript. It's
block-scoped, meaning it's accessible only within the block it's declared
in (typically within curly braces {}). This helps in avoiding unintended
variable hoisting and makes code easier to reason about. Use let when
you need to reassign the variable later in the code.
const
const is used for constants, meaning variables that are intended to never
change their value. It's block-scoped like let, but once assigned, the value
cannot be reassigned. This provides immutability and helps in writing
safer, more predictable code. Use const by default whenever you're
declaring a variable that you don't intend to reassign.
Let’s practice!
1.Go to this link:
https://www.w3schools.com/js/js_variables.asp
Click all the try it yourself button and explore how variables
work in JavaScript. Answer all 5 exercises and save a
screenshot on your practice activity folder.
2. Answer FA 3.3 posted in the MS Teams Assignments Tab.
Variables in javascript
PART 2
Learning target:
create variables in JavaScript and use them to
store and manipulate data in their programs.
Let’s practice!
1.Open SublimeText.
2. Create an HTML document and save it as variables.html.
3. Create the 2 variables, number1 and number2.
4. Let the value for number 1 be 5 and number2 be 6.
5. Add number1 and number2.
Let’s practice!
<body>
<p>variables</p>
<script>
let number1 = 5;
console.log(number1);
let number2 = 6;
console.log(number2);
let total = number1+number2;
console.log(total);
</script>
</body>
Let’s think!
What if I want to change the
value of the variable?
Let’s practice!
<script>
let number1 = 5;
console.log(number1);
let number2 = 6;
console.log(number2);
let total = number1+number2;
console.log(total);
number1=7;
console.log(number1);
</script>
</body> You can change the value of your variables by doing this.
Let’s practice!
<script>
let number1 = 5;
console.log(number1);
let number2 = 6;
console.log(number2);
let total = number1+number2;
You can also do this.
console.log(total);
number1= number1 + 1;
console.log(number1);
</script>
</body>
Let’s think!
Can we store strings in our
variables?
Try this!
Let’s think!
Are there restrictions in the
syntax?
YES
Syntax rule
•You can’t use the reserved words like Let .
•Do not start a variable name with a number.
•Do not use special characters except for $ and _.
Let’s create a click counter.
Start by creating this 3 buttons inside the body:
Let’s create a click counter.
Place this inside our script:
Let’s create a click counter.
Make the show total and click me buttons interactive:
Let’s create a click counter.
Make the reset buttons interactive:
Remember alert code?
Add an alert code to your JavaScript that
would show the total clicks on the webpage
when the Show total click button is clicked.
RATE YOUR LEARNING!
