You’ve been teaching a Web design class, and are comfortable with HTML and CSS. You’ve shown students how to design pages, but you want to show them how to add interactivity.
Students are taken through a series of exercises that allow them to create pages that take inputs from users and change the page display. They do this using a simple HTML editor, like TextWrangler and a modern browser like Firefox or Chrome, so access to expensive software is not necessary.
The exercises build on one another to increase complexity and execution of logic.
- Set up a Web page that includes a or that will be manipulated.
- Greeting: Write a script that asks for a prompt for your first name and last name and then changes the DOM to say Hello "firstname" where firstname is the name the user inputs. a. Modify the script to concatenate the first and last name in the greeting.
- Pop-Star Name: Write a script that generates the pop-star name for anyone (like JLo) by finding the first letter of the first name and the first two letters of the last name. The program will prompt for first and last name, and will use the substring function to calculate the pop-star name.
- Password Evaluation: Write a script that prompts for a password, and responds appropriately if it is greater than 8 characters. This script will use the length function.
- Do the Math: Write a script that handles a mathematical calculation from two numbers that are provided by a prompt.
- Form and Function: Convert to HTML form input. Set up a page with a form element to capture first and last name and have it manipulate the DOM for greeting. This input method can be applied to any of the above exercises by replacing the prompts.
- Name Evaluation: Write a script that uses a form to ask for three names, and responds with a name that has more than 5 characters in it. This will demonstrate an “if statement.” a. Change the script so that it asks the user to enter the number of characters to evaluate. b. Handle the situation if none of the names meet the condition and if more than one name meets the condition.
Students are first asked to provide a description of the algorithm they will use - the steps that their program will need to accomplish. They also create a prototype sketch of their application. Then they create the application.
This lesson is a good introduction to lead to more advanced topics like the JQuery library, using other languages and learning about scraping and application programming interfaces.
Code examples for each of the exercises is available in this repository.
Here is an example of one project created by a student this semester: SXSW Panel Advisor – asks questions that help recommend panels to attend - http://beckslarson.com/sxtxapp/
The poster display will include definitions of terms, code snippets for each example and screenshots of some of the projects. A laptop can be used to demonstrate these concepts and the resulting projects.
Prerequisite skills: Comfort with Hypertext Markup Language and Cascading Stylesheets
Additional Resources: CodeActually.com Codecademy.com