1-5 Javascript

What is Javascript?

-Javascript is a dynamic, object based programming language -Works with your HTML and CSS -Used to make websites interactive and also used in video games

Variables

• Variables are names that are associated with a value and that value can change.

• In JS, you can use variables to hold the values of text/string, numbers, or objects.

• A variable is used to store information for later use, similar to storing values for x and y in algebra.

• Start by declaring the variable in your JS code like this:

Variable Naming Rules

The key to using variables it to give them a meaningful name, so that it is easy to understand in your code.

Rules:

1. Must begin with a letter

2. Names are case sensitive (Ex: FirstName does not equal firstName)

3. No spaces in the name - if using multiple words just put them together

4. Start with a lowercase letter and capitalize the first letter of any other words used in the name (Ex: firstName, lastName)

5. Make sure the name is meaningful (Ex: firstName means more than x or y)

Additional HTML Elements

Input - gives the user a textbox to type into

<input id="inputName" placeholder="What you want the text on the input to be goes here"></input>

Button - used to allow the user to make something happen

<button onclick='functionName();'>Text on the Button Goes Here</button>

functionName() will connect to a function that is in the Javascript.

Functions in JS

Functions are blocks of code designed to perform a specific task.

Functions are executed when something calls it (clicking a button, clicking a hyperlink, hovering, etc.)

For example, if you are on Amazon placing an order, when you click Submit your order is processed. Clicking the Submit button would call a function that would process your order (charge your credit card, ship the order, etc.).

Function Syntax

Assignment

Standard Deliverable

1) Use the Codepen we created together as a starting point. If you don’t have that, you can click here.

2) Add or change the following things about your website:

a. Add a 3rd Input to your HTML to collect some other type of info about the user (age, date of birth, favorite food, etc.)

b. Add a Variable to your JS to store that 3rd input

c. Add a line of code to your displayMessage function that will pull the user’s response into the JS

d. Update the welcome message to include that new piece of information about the user. 

3) Make sure you test your website to make sure it looks and works like you want it to. Double-check that your welcome message displays with good punctuation, spelling, and spacing.

4) You can submit a link to your codepen. Be sure to save your work occasionally!!

Additional Activity

Print this document and follow the instructions.