Objectives

Coders will be able to explain what a script is and its role in making web pages interactive.
Coders will understand how to include JavaScript in an HTML file, both inline and as an external file.

What is JavaScript?

JavaScript is a programming language used to make web pages interactive. Just like a recipe gives instructions for baking a cake, a script in JavaScript provides instructions for the web browser to perform tasks on a web page.

Understanding a Script

Question: Imagine you're writing a recipe for baking a cake. How would you explain what a script is and its purpose in the context of a web page?

Answer: A script is like a recipe for a web page. Just as a recipe provides step-by-step instructions for baking a cake, a script provides step-by-step instructions for the web browser to make the web page interactive and dynamic. It tells the browser what actions to perform and when to perform them.

Designing a Script

Question: Suppose you need to write instructions for a friend on how to find a book in a library. How would you break down these instructions into detailed steps? Relate this process to designing a script for a web page.

Answer: To find a book in a library, you might break down the instructions as followed:

Enter the library.
Go to the catalog section.
Search for the book by title or author.
Note the book's location.
Go to the specified location.
Retrieve the book.

Objectives

Coders will learn key programming terms such as variables, functions, parameters, and events.
Coders will be able to describe these concepts using relatable analogies to reinforce their understanding.

Programming Vocabulary

Question: Think about the terms used in cooking, such as "ingredients" and "steps." How would you explain the following programming terms using cooking analogies: variables, function, parameter, and event?

Answer:

Variable: In cooking, an ingredient is like a variable. It's a placeholder for a value that you can use in your recipe. For example,

is like saying you need "2 cups of sugar" for your recipe.
Function: A function is like a specific step in a recipe, such as "mix the ingredients." It's a block of instructions that performs a particular task. For example,

Parameter: A parameter is like an ingredient list for a specific step. For example, when you say "add 2 cups of sugar," "sugar" is a parameter for the mixing step. In code,

Event: An event is like the moment you decide to start a step, such as "when the oven is preheated, put the cake in." In JavaScript, an event could be a user clicking a button:

Programming Syntax

Question: Imagine you're teaching someone how to write a proper sentence in English. How would you explain the importance of correct syntax in programming, and what might go wrong if the syntax is incorrect?
Answer: In English, correct syntax is important for forming meaningful sentences. For example, "The cat sat on the mat." is correct but "Cat the mat sat on the" is not. Similarly, in programming, syntax refers to the rules for writing code. If the syntax is incorrect, the code won't run properly, just like a sentence with jumbled up words doesn't make sense.

Practical Application

Question: Using the analogy of following a recipe, describe the steps you would take to create a script that changes the background color of a web page when a button is clicked.

Answer:

Identify Ingredients: Determine the elements involved (a button and the page background).
Write Recipe Steps:
1. Define a function to change the background color.
2. Link the function to the button click event.
Detailed Steps:
1. Create the HTML for the button: ```<button id="colorButton">Change Color</button>```
2. Write the JavaScript function: function changeColor() { document.body.style.backgroundColor = "lightblue"; }
3. Link the function to the button's click event: document.getElementById("colorButton").onclick = changeColor;
4. Execute the Recipe: Open the web page and click the button to see the background color change.

Intro to JavaScript