No description, website, or topics provided.
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
1-start.html
2-greeting.html
2a-greeting.html
3-popstar.html
4-password.html
5-dothemath.html
6-form.html
7-names_list.html
7a-names_list.html
7b-names_list.html
README.md

README.md

jumpinwithjavascript

This repository provides the files for the Jumpin' With Javascript exercise for the Great Ideas for Teachers competition at AEJMC.

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.

Enter JavaScript.

JavaScript is a programming language that works well in a browser without any special plugins, and it integrates with the Web design skills you already have.

JavaScript is a great gateway language that can lead to more advanced programming operations. And its usage is contextually relevant to the coding needs of communicators.

In this exercise, students learn the basics of programming through JavaScript. Students first learn about the elements of programming: strings, integers, variables, arrays, objects, if statements, loops and functions. Then they are introduced to the magical function “getElementById” that provides the ability to make the page interactive, or “manipulate the DOM.” The DOM is the Document Object Model, and it is the structure of a Web page.

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.

  1. Set up a Web page that includes a
    or that will be manipulated.
  2. 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.
  3. 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.
  4. 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.
  5. Do the Math: Write a script that handles a mathematical calculation from two numbers that are provided by a prompt.
  6. 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.
  7. 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.

A more advanced exercise demonstrates how to use JavaScript to manipulate the DOM to change the size of

containers on the page, so that they operate as a bar chart. http://codeactually.com/charting_ex.html

These exercises lead up to a project for the students to create their own interactive page. The assignment is to use the techniques learned in JavaScript and HTML/CSS to create a Web application that takes input from a user and provides something that changes the DOM. This can be a Buzzfeed-like quiz application, something that performs a calculation or creates a simple visualization.

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