Prep: JavaScript Values and Variables

Session goals

By the end of this session students will be able to do the following with JavaScript:

• Describe how JavaScript differs from HTML and CSS
• Run JavaScript in the console and a code editor
• Declare values in JavaScript
• Use operators to combine, compare, and do arithmetic with values in JavaScript
• Assign and re-assign JavaScript variables

Videos and readings

Please set aside time to watch the following priority videos before class.

Together the priority videos are 66 minutes.

If you learn best by reading, check out the assigned chapters of the online textbook Eloquent JavaScript.

Priority

#1 What is JavaScript?, 4m 40s, Dev Dreamer (Amit), Youtube, 22 Nov 2020.

#2 Adding JavaScript to your Project, 7m 50s, Dev Dreamer (Amit), YouTube, 29 Nov 2020.

#5 How to Output JavaScript, 11m 3s, Dev Dreamer (Amit), YouTube, 20 Dec 2020.

#6 JavaScript Variables (let and const), 11m 19s, Dev Dreamer (Amit), YouTube, 10 Jan 2021.

#7 JavaScript Data Types, 13m 57s, Dev Dreamer (Amit), YouTube, 17 Jan 2021.

#12 JavaScript Strings, 8m 39s, Dev Dreamer (Amit), YouTube, 21 Feb 2021.

#13 How to Concatenate Strings in JavaScript, 8m 0s, Dev Dreamer (Amit), YouTube, 28 Feb 2021.

Chapter 1. Values, Types, and Operators, chapter from book Eloquent JavaScript, 4th ed. (2024), Marijn Haverbeke.

Chapter 2. Program Structure, chapter from book Eloquent JavaScript, 4th ed. (2024), Marijn Haverbeke.

Also Recommended

#4 JavaScript Syntax and Comments, 11m 22s, Dev Dreamer (Amit), YouTube, 13 Dec 2020.

#8 JavaScript Arithmetic Operators, 10m 24s, Dev Dreamer (Amit), YouTube, 24 Jan 2021.

#14 Template Literals, 8m 19s, Dev Dreamer (Amit), YouTube, 1 Mar 2021.

#18 JS Comparison Operators, 14m 9s, Dev Dreamer (Amit), YouTube, 5 Mar 2021.

#19 JS Logical Operators, 11m 43s, Dev Dreamer (Amit), YouTube, 8 Mar 2021.

“Reserved keywords,” Lexical grammar, Mozilla Developer Network, last updated 25 Nov 2024.

Yuankai Xue, Hanlin Chen, Gina R. Bai, Robert Tairas, and Yu Huang. 2024. Does ChatGPT Help With Introductory Programming? An Experiment of Students Using ChatGPT in CS1. In Proceedings of the 46th International Conference on Software Engineering: Software Engineering Education and Training (ICSE-SEET '24). Association for Computing Machinery, New York, NY, USA, 331–341. https://doi.org/10.1145/3639474.3640076

Check your understanding

1. Can you make a string like this?

   'Hello"

2. How many valid strings does this line have? Where do they start and end?

   "There are many "ways" you can "interpret" things."

3. Is this a valid string?

   "I told him I'm \"excited\" 🙄";

4. Does JavaScript think this is a number?

   "8,325";

5. How about this?

   -39.2301;

6. What data types does JavaScript think these things are?

   • a. true
   • b. 1
   • c. 'False'
   • d. "on"

7. Are there any problems with this program?

   let pizza = 9;
   let numPizzas = 2;
   let drinks = 8;
   let cash = 40;
   let moneyLeftOver = cash - pizza + numPizzas + drinks;
   console.log(moneyLeftOver);

8. What is wrong with this program?

   First episode name == 'Pilot';
   episodeCount = 8
   console.log(episodeCount);

9. What will be logged?

   const mostCommonOrder = 'juice ';
   let order1 = mostCommonOrder;
   order1 = 'tea ';
   let order2 = 'tea ';
   let table5Order = order1 + order2;
   console.log(table5Order);