Intro to JavaScript - Part II: AJAX, the DOM, and Events in jQuery

background-image: url(../images/codecamp.png)
background-color: #cacaca

---

class: center, middle

# Intro to JavaScript
## Part II: AJAX, the DOM, and Events in jQuery

---

## JS In the Browser

JS can be included using `<script>` tags, either explicitely in the page:

```html
<html>
    <head>
        <script>
        // Some JS
        function myFun() {
            console.log("It works!");
        }
        </script>
    </head>
</html>
```

---

## JS In the Browser

Or via an external `.js` file:

```html
<html>
    <head>
        <script src="js/site.js"></script>
    </head>
</html>
```

With either method, we may place the `<script>` element anywhere in the `<head>` or `<body>`

---

## How This Works

1. When the page loads, the browser will scan the HTML document from top to bottom
--

2. As it finds JS, it parses the code, loading external files as necessary
--

3. Any JS code not contained in a function will be executed immediately
--

4. Any JS code that we want to run right away will likely need to wait until the pages fully loads

---

## The Document Object Model

Every page loaded in a browser has a representation as a collection of related JS objects, called the **Document Object Model (DOM)**, that allows us to interact with the page via JS

---

## Events

The DOM provides a collection of events for us to register JS code with, so that it is run upon certain actions.

Some examples:

- `click`
- `mouseover` and `mouseout`
- `submit` (forms only)
- `focus`
- `load` (document, frame, etc)

---

## Event Handlers

We can register functions to run when the event is executed by setting a node's `on*` property (`onclick`, `onhover`, etc)

```js
document.onload = function() {
    // runs when the document has finished loading
    alert("loaded!");
}

document.getElementById("heading").onclick = function(){
    alert("clicked!");
}
```

---

## jQuery

Working with the DOM API and events can be made much simpler using the [jQuery library](http://jquery.com/)

It can easily be included in any page by either downloading, or using the CDN links at [code.jquery.com](https://code.jquery.com/)

--
```html
<script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
```

---

## What jQuery Provides

jQuery is a JS library, which means it's written in pure JS itself. It provides:

- Browser-agnostic functionality
--

- Improved API for working with the DOM, events, and AJAX
--

- Functionality not directly available from the DOM or core JS (e.g. `toggleClass`)

---

## The jQuery Function

The jQuery function has the (somewhat unusual) name `$`. It takes any one of:

- CSS Selector: `$(".navbar")`
--

- String of HTML: `$("<div id='new-div'>Some stuff</div>")`
--

- DOM Node: `$(document)`
--

It returns a **jQuery object** representing the collection of DOM elements

This collection is a special object that has lots of methods that we can use to manipulate the DOM element(s)

---

## Some Examples

```js
// insert a new h2 with given contents after each h1
$("h1").after("<h2>blah</h2>")

// Turn each p element with class "red" to green
$("p.red").css("color", "green");

// Log a message each time the element with id "nav" is clicked
$("#nav").on("click", function(){
    console.log("navigation clicked");
});
```

---

## The jQuery Object

There is a collection of utility functions avaialable off of `$`, which is sometimes referred to as _the_ jQuery object, or the _global_ jQuery object.

- `$.support` - an object including information about featured supported by the current browser
--

- `$.post` and `$.get` - functions for making AJAX requests via HTTP
--

- `$.trim` - a function to trim whitespace from a string
--

- Lots more! See jQuery docs for reference.

---

## AJAX

**A**synchronous **J**avaScript **a**nd **X**ML

AJAX refers generally to a technique used to fetch data from a remote server/resource using JS (even if that data isn't returned in XML format)

---

## JSON

**J**ava**S**cript **O**bject **N**otation

This is a text format for data that can easily be parsed by JavaScript, and which is commonly returned by services and APIs

--
Example:

```json
{
    "first": "Chris",
    "last": "Bay"
}
```

Turn this into a JS object using `JSON.parse()`

---

## Parsing JSON

```js
var json = '{ "first": "Chris", "last": "Bay" }';
var nameObj = JSON.parse(json);
```

Then `nameObj` is an actual JS object that can be used as such.

---

## AJAX Examples

[Flickr search using vanilla JS](https://github.com/launchcode-rebootu/web-examples/blob/gh-pages/js/jquery/flickr/index.html)

[Flickr search using jQuery](https://github.com/launchcode-rebootu/web-examples/blob/gh-pages/js/jquery/flickr/index-jquery.html)

---

## Resources

[DOM API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) - Documentation of all of the objects and methods available for you to use to manipulate pages

[jQuery Documentation](http://api.jquery.com/) - Loads of documentation and tutorials

[web-examples repository](https://github.com/launchcode-rebootu/web-examples) - Includes some of the examples used in this workshop