# Web Development

## Lesson 4: JavaScript

### 1. Intro to JavaScript

HTML and CSS are mostly static, but JavaScript can allow us to make changes to our website in response to user input like the example below:

### Example 1

Click the button below to see JavaScript in action!

Here is the code used to create the button and its surrounding container:

JavaScript gives us access to our entire HTML file in its document object. It uses the HTML tags we defined to break down our HTML. The document object model, or DOM, can be visualized something like this:

Everything we've done so far (adding and removing tags in HTML, changing the content of tags, and adding and removing CSS styles from tags) can also be done with JavaScript.

Below is the JavaScript code for the example above (with some comments):

JavaScript is well-known for its ability to alter websites in response to user actions, but it's actually a much more powerful programming language than many people realize.

To get started, we need to know a little bit about the basics.

### 2. Variables

First off, JavaScript Variables are containers for storing data values. These variables can change as our program runs and in response to the user's actions. We should declare a variable by using the `var` keyword before it.

### 3. Arithmetic Operators

We can use the following operators to perform arithmetic

Operator Description
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

Q. What are some uses of the ++ operator?

• A. Incrementing the score in a game.
• A. Counting

Q. What are some uses for the % operator?

• A. Calculating if a number is even or odd.
• A. Clock Arithmetic

### 4. Assignment Operators

Assignment Operators assign values to variables. We'll just need to know about the = operator, but there are others.

Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

### 5. Comparison Operators

We use Comparison Operators to compare two or more values.

Note that to test "equals to" we use == or two equals signs, not one.

Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator

### 6. Functions

A function is a JavaScript procedure — a set of statements that performs a task or calculates a value

```                        ```
/**

A function definition (also called a function declaration, or function
statement) consists of the function keyword, followed by:

The name of the function.

A list of arguments to the function, enclosed in parentheses and
separated by commas.

The JavaScript statements that define the function, enclosed in
curly brackets, { }.

**/

function square(number) {
return number * number;
}

var square = function(number) { return number * number };
var x = square(4) // x gets the value 16
```
```

Now, for a challenge.

#### CHALLENGE: Create a function that takes a number of minutes and prints out both hours and minutes.

For example, given the number 89, the function would print out:

Here's an HTML file with a `<script>` tag for your JavaScript:

1. Declare a function - use the `var` keyword and give your function a name. Remember to allow your function to accept a parameter - this will be where we will pass the function the number of minutes.
2. Inside the function, declare two variables named: `hours` and `minutes`.
3. Also inside the function, add the lines below. This will print your answer to the console.
4. Write out how you want to solve the problem in plain language first, then use the tools JavaScript gives you to execute your plan.

HINT: Use the modulus operator.

HINT: Use a method from JavaScript's built-in `Math` object.

### 7. Objects

We've seen how variables can refer to text, numbers, HTML tags. They can also refer to what are known as objects - groups of name / value pairs that refer to a particular thing.

The values are written as name:value pairs (name and value separated by a colon).

In the name:value pairs, the "name" (first thing) is known as a property of the object.

### 8. Arrays

JavaScript arrays are used to store multiple values in a single variable.

We can have arrays made up of various things: Strings, numbers, boolean values, or even entire objects

Array elements are refered to by their index number. Array indexes start with 0, not 1 and are put in brackets after the variable name

## Accessing Array Elements

```                          ```
var cars = ["Saab", "Volvo", "BMW"];

cars = "Volvo"
```
```