THE BIG PICTURE

How does JavaScript interact with the browser?

What sort of things can we do with JavaScript? We can use JavaScript to process and check data entered in forms.

What sort of things can we do with JavaScript? We can use JavaScript to store and read information in “cookies.” Cookies are bits of data that are stored in the browser folder on the user’s local computer. They are used to track users (creepy) and are also used to customize content (convenient).

What sort of things can we do with JavaScript? We can use JavaScript to dynamically show and hide content.

What sort of things can we do with JavaScript? We can use JavaScript to dynamically access any part of the document.

Loops in JavaScript. In Scratch we used loops to repeat a series of instructions for a fixed period of time. In JavaScript, we can do the same thing with a “for” loop.

Conditional statements in JavaScript. In Scratch we use if and if-else statements to check if something was true. In JavaScript, we can do the same thing with if and if-else statements.

Variables in JavaScript. In Scratch we use variables as information containers. They can hold numbers or letters (strings). In JavaScript we create variables by giving them a name.

EXERCISE

1. Download the source files from TLEARN2: madlib.html and madlib.css

2. Link your HTML file to an external JavaScript file by adding the line in the.

3. Create a new file called madlib.js, and add the following code. Test by loading the page. Use your name instead of my name for the function. For example: zackFunction, ellenFunction.

4. Now, modify the page so the user will have to answer a question when the page loads. Your output should look like this: REFERENCE

5. NEXT: Ask the user for their name, and then greet them by name. From now on, these reference code blocks will show you the building blocks, will not give you the exact answer about how your code should look. Your output should look like this: REFERENCE

6. NEXT: Berate the user if their name is too long. Also, remember that you can find out the length of a string with: variableName.length Your output should look like this: REFERENCE

7. NEXT: Ask the user their name and then change the name of the author on the madlib page. (See following slide for hints.)

REFERENCE FOR PREVIOUS SLIDE