[AP CSP] JavaScript Programming Lesson 2025-2026

👉 HTML creates the structure of a website

👉 JavaScript gives motion and logic to a website

👉 CSS gives style to the website

​

​Bookmark this Webpage for our JavaScript Learning Needs

​w3schools JavaScript Tutorials

​

​Login to GCPS - CodeHS Account

​

Intro to
JavaScript Syntax

Open Ended

Provide 1 - 2 Syntax Rules you noticed in JavaScript Code.

How does is it different/similar to Python Code?

​

Complete JavaScript
Syntax Practices 1-6

Multiple Choice

Which JavaScript code correctly gets a user’s age, converts it to a number, and prints how old they will be next year?

Multiple Choice

Which JavaScript conditional statement correctly assigns a grade of "A" when score is 90 or higher?

Multiple Choice

Which JavaScript statement correctly adds a new item to the end of an array called items?

Multiple Choice

Which for loop correctly prompts the user for steps on Day 1 through Day 5?

Multiple Choice

Which line of code correctly calls the function and stores its returned value?

Multiple Choice

Which line of code correctly calls the function and stores its returned value?

Only ONE version below will run correctly without a scope error.

​

JavaScript Example

Analyze the code and predict its behavior.

✍️Annotate the code with comments 📝predicting each line’s role.

Multiple Choice

View the HTML & JavaScript code for the webpage.

Which line creates the input box for the web-page, what allows the user to type in the temperature?

• Line 16

  in the

  HTML Script

• Line 50

  in the

  HTML Script

• Line 4

  in the

  JavaScript Code

• Line 7

  in the

  JavaScript Code

Multiple Choice

View the HTML & JavaScript code for the webpage.

Which lines create the convert to: drop-down menu on the web-page for the 3 temperature options?

• Lines 21 - 26

  in the

  HTML Script

• Lines 29 - 34

  in the

  HTML Script

• Lines 4 - 5

  in the

  JavaScript Code

• Lines 9 - 20

  in the

  CSS Code

Multiple Choice

View the Image for JavaScript code for the webpage.

Which line of code Retrieves the value from the user input box in HTML, and stores the value into a Variable?

• Line 7

• Line 9

• Line 11

• Line 13

• Line 4

Multiple Choice

View the JavaScript code for the webpage.

Which line of code Retrieves the value from the user Dropdown Selection (Convert From) in HTML, and stores the value into a Variable?

• Line 2

• Line 7

• Line 9

• Line 11

• Line 13

Multiple Choice

View the JavaScript code for the webpage.

Which line of code Retrieves the value from the user Dropdown Selection (Convert To) in HTML, and stores the value into a Variable?

• Line 4

• Line 7

• Line 9

• Line 11

• Line 38

Multiple Choice

View the JavaScript code for the webpage.

Which line executes the equation to convert from Fahrenheit to Kelvins?

• Line 9

• Line 21

• Line 32

• Line 15

Multiple Choice

View the JavaScript code for the webpage.

Which line of code displays the resulting converted temperature to the HTML Web Page?

• Line 9

• Line 11

• Line 13

• Line 36

• Line 38

Multiple Choice

View the HTML & JavaScript code for the webpage.

Interact with webpage.

Which line contains the element where the output of emojis pictures display?

• Line 46

  in the

  HTML Script

• Line 47

  in the

  HTML Script

• Line 37

  in the

  JavaScript Code

• Line 39

  in the

  JavaScript Code

Multiple Choice

In Python, we use the function int() to convert a string data type to integer data type.

In JavaScript, we use the _____________ function to perform the same conversion.

• parseInt()
• getElementById()

• convertINT()

• Integer()

Dropdown

The HTML input box for the Temperature Converter App had an id = "temp".

Complete the JavaScript Code below that would obtain the value from the input box and store it in a variable.



temp_value = document.​

Select answer

("temp")​

Select answer

;

Dropdown

The Element in our HTML that will display the Temperature Output has an id = "result".

Complete the JavaScript Code below that would OUTPUT the convertedTemp onto the Webpage Element.



​

Select answer

.​

Select answer

(​

Select answer

)​

Select answer

= ​

Select answer

+ "Degrees";

​

Make your OWN Conversion App

​

Choose 1 of these Conversion Apps to CREATE

​

​

​

​Currency Converter

Distance Converter

​Data Units Converter

• Dollars (USD)

• Euros (EUR)

• Yens (JPY)

• Meters (m)

• Miles (mi)

• Inches (in)

• Bits (b)

• MegaBytes (Mb)

• ExoBytes (Eb)

Open Ended

Describe 1-2 Programming Challenges 🧐 we encountered while modifying the Conversion Application using HTML and JavaScript.

​

​JavaScript Choice Task

Open Ended

https://new-sandbox-program-3-13476603.codehs.me/index.html

☝️Click Link above to access the

Number Guessing Web Game.

List ALL the HTML Elements you see present on the webpage.

Multiple Select

https://new-sandbox-program-3-13476603.codehs.me/index.html

☝️Click Link above to access the

Number Guessing Web Game.

How does the user interact with the webpage to play the game?

• Typing in the Text Boxes

• Choosing an option in the Dropdown Menu

• Clicking Buttons

• Click Images on the Webpage

• Pressing ENTER on the Keyboard

Open Ended

https://fuzwbrusdd-2302514603-sukjfypgvx-t.codehs.me/index.html

☝️Click Link above to access the

Rock Paper Scissors Lizard Spock Web Game.

List ALL the HTML Elements you see present on the webpage.

Multiple Choice

https://fuzwbrusdd-2302514603-sukjfypgvx-t.codehs.me/index.html

☝️Click Link above to access the

Rock Paper Scissors Lizard Spock Web Game.

How does the user interact with the webpage to play the game?

• Clicking on Buttons

• Click on the Images

• Typing on the Keyboard

• Click and Dragging Images

Multiple Select

https://fuzwbrusdd-2302514603-sukjfypgvx-t.codehs.me/index.html

☝️Click Link above to access the

Rock Paper Scissors Lizard Spock Web Game.

When the Rock Button is clicked, what happens on the webpage?

• A SAME Image always shows on the LEFT cell above the word YOU

• 1 of 5 Random Image shows on the RIGHT Cell above the word CPU

• The Text Box below the Image Updates with a NEW String

• 1 of 5 Random Image shows on the LEFT Cell above the word YOU

• The Text Box for the SCORE Updates with a NEW String.

​

JavaScript with HTML Practice

​

​CODE HS JavaScript Choice Task