> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/1-5-javascript.md).

# 1-5 Javascript

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX70UChgA3GdBAkFg%2FClasses%20and%20IDs%20Review.png?generation=1527608018032863\&alt=media)

## 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

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX70WiJvnoIaujgvE%2FJavascript%20Sample.png?generation=1527608018067694\&alt=media)

## 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.&#x20;
* 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:

  ![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX70YdD77-IUWkfvU%2FVariables%20Syntax.png?generation=1527608036821568\&alt=media)

## 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

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX70aQkNM3Qj2b0ee%2FFunction%20Syntax.png?generation=1527608036814664\&alt=media)

## Assignment

### Standard Deliverable

1\) Use the Codepen we created together as a starting point. If you don’t have that, you can click [here](https://codepen.io/jrsmithpike/pen/eRKxJy).

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](https://docs.google.com/document/d/1s0s0waK-INt5ODxdxSC4DgVr0grmPDFJ9_amEwHz1nk/edit?usp=sharing) and follow the instructions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/1-5-javascript.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
