JQuery for Web Designers - Programming Interactions for Non-Programmers (in Javascript)

# JQuery for Web Designers

adding interactive behavior to static web pages

---

# Agenda

1. [Overview](#overview)
1. [Interactive Behaviors](#interaction)
1. [Installing JQuery](#install)
1. [Handling Events](#events)
1. [Modifying Content](#content)
1. [Conclusions](#conclusions)

---

# Overview

---

## Javascript

Javascript is an interpreted programming language originally invented by Brendan Eich in 1995 at Netscape.

- The first widely used web browser with a Graphical User Interface (GUI) was _Mosaic_, created by Marc Andreessen and Eric Bina at the National Center for Supercomputing Applications (NCSA) - a federal/state/corporate/academic research center housed at the University of Illinois at Urbana-Champaign - in 1993
- These two people then left the NCSA and started the **Netscape** company to create an improved successor, the Netscape browser, in 1994
- A year later, **Eich's Javascript interpreter** was included in the Netscape browser, along with the usual [HTML](../html) interpreter ([CSS](../css) didn't begin to be supported by web browsers until 1996)

---

## The browser wars

- Microsoft released its first web browser, **Internet Explorer** (IE), in 1995 - based on Mosaic, which they had licensed
- IE included a clone of Netscape's Javascript Microsoft called **JScript**
- Microsoft had reverse-engineered Netscape's interpreter
- JScript and Javascript were almost identical, with sufficient difference to _require programmers to usually write two versions of their code_ - one for Netscape browsers and another for IE
- Many websites of this era contained signs saying "_Best viewed in Netscape_" or "_Best viewed in Internet Explorer_" to pick sides and warn users that the site was not fully cross-browser compatible
- Thus began the era of [the first browser war](https://en.wikipedia.org/wiki/Browser_wars) (1995 - 2001), with Internet Explorer and Netscape vying to dominate the web browser market.
- Eventually, _Netscape lost the war_ and they released their code to the open source community
- _The US government sued (and won) Microsoft_ in 2001 for maintaining a monopoly on web browsers primarily because it included Internet Explorer as part of the operating system.
- Browsers today are mostly compatible in how they interpret Javascript

---

## The browser wars

Some additional resources about the browser wars, for those interested.

- [The lore of the browser wars and the user-agent string](https://webaim.org/blog/user-agent-string-history/)
- [A podcast episode about the browser wars on Spotify](https://open.spotify.com/episode/11ASgKaXAtHW2rmjwdJvdo?si=qDgb5hjbQqu1I4h5XcwgQA)

---

## Neverending war

The browser wars never quite ended...

- **Google's Chrome**, first released in 2011, [maintains the lead](https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_tables), with **Safari** in second place by market share
- **Mozilla**, a non-profit foundation spun off by Netscape to maintain their source code, continues to maintain its successor, Firefox - the third most popular web browser
- Brendan Eich, inventor of Javascript, has recently created the **[Brave browser](https://en.wikipedia.org/wiki/Brave_(web_browser)**) which attempts to offer an alternative funding model for websites besides the standard ad and behavior profiling model promoted by the big tech companies.
- With many of the old-timers unhappy with the way The Web turned out, with corporate and nation-state actors battling for control, and with the emergence and growth of the [Dark Web](https://en.wikipedia.org/wiki/Dark_web), the future direction of The Web and the browsers is still uncertain

---

## Javascript today

Today, the browsers are mostly compatible in how they interpret Javascript

- The capabilities of Javascript, and its use in web development, have continued to grow... it is now also used for server side logic with the **Node.js** interpreter.
- Internet Explorer mostly supports standard Javascript - it is still considered something of a pariah by developers.
- There remain some differences in browser implementation, but easy-to-install **frameworks**, like JQuery, easily smooth them out.
- **JQuery** provides a single set of interactive behaviors that work consistently across browsers by abstracting the code away from the browser-specific implementations.

---

# Interaction

---

## Event-driven programming

When we speak fo using Javascript to add interactive behaviors to web pages, we are usually referring to Javascript's ability to respond to **events**:

- **clicking** something on the page
- **moving the mouse over** something on the page
- **moving the mouse off** of something on the page
- **pressing a key** while viewing a web page
- and more...

---

## Types of events

We can broadly categorize events into three buckets

- Events where the user has done something (e.g. loading a page)
- Events where the browser itself has done something (e.g. clicking, typing, etc)
- Time-based events (e.g. a certain amount of time passing)

---

# Installing JQuery

---

## Download

To install JQuery, simply download it from the [jquery.com](https://jquery.com/) web site.

- JQuery is nothing but a file containing some well-written Javascript code.
- Place the downloaded Javascript file into a nice directory, for example a `js` sub-directory of your main project directory

---

## Install

Once downloaded, add links to two Javascript files to your HTML.

- Add a link to the downloaded from the `head` of your HTML document using the `script` tag... make sure the path is correct!
- Add another link to a custom javascript file you will make yourself **after** the link to the JQuery file.

```html
<head>
  <title>JQuery Example</title>
  <meta charset="utf-8" />
  
  
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>
</head>
```

---

## Start using

Create the custom Javascript file you linked to and add the following starter code to it.

- Any code you place between the two comments will be executed when the web page it is linked from finishes loading.

```js
$(function () {
  //everything else you put into this file goes below here
  //everything else you put into this file goes above here
})
```

---

# Handling Events

---

## Click events

To handle click events, you will need to put something the user can click on into your HTML code.

```html
<input type="button" id="my_button" value="Click me!" />
```

And then detect clicks on this element in your custom Javascript code (placed between the two comments noted previously).

```js
$("input#my_button").click(function () {
  //everything you want to have happen when the button is clicked goes below here
  //everything you want to have happen when the button is clicked goes above here
})
```

---

## Mouseover events

To handle mouseover events, when the user hovers their mouse over an element, you will need to put something the user can hover over into your HTML code.

```html
<p id="my_paragraph">
  Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto
  percolator. As, single shot dripper a doppio americano wings.
</p>
```

And then detect mouseover events on this element in your custom Javascript code (placed between the two comments noted previously).

```js
$("p#my_paragraph").mouseover(function () {
  //everything you want to have happen when the mouse goes over the paragraph goes below here
  //everything you want to have happen when the mouse goes over the paragraph goes above here
})
```

---

## Mouseout events

To detect mouseout events - when the user stops hovering over this element - in your custom Javascript code (placed between the two comments noted previously).

```js
$("p#my_paragraph").mouseout(function () {
  //everything you want to have happen when the mouse goes out of the paragraph goes below here
  //everything you want to have happen when the mouse goes out of the paragraph goes above here
})
```

---

## Time-driven events

To perform some change to the page after a certain period of time has passed, use the setTimeout function.

```js
setTimeout(function () {
  //everything you want to have happen after the specified time has passed goes below here
  //everything you want to have happen after the specified time has passed goes above here
}, 2000) // 2000 represents 2 seconds (in milliseconds) ... adjust this number as needed
```

---

# Modifying Content

---

## Hiding an element

Let's say you had an image of a donkey in the HTML.

```html
<img id="my_donkey" src="images/donkey.jpg" />
```

To hide this element, place this in the appropriate event handler code.

```js
$("img#my_donkey").hide()
```

You can alternatively make an element gradually fade away.

```js
$("img#my_donkey").fadeOut()
```

---

## Showing a hidden element

To show an element that has been hidden, place this in the appropriate event handler code.

```js
$("img#my_donkey").show()
```

You can alternatively make an element gradually fade in.

```js
$("img#my_donkey").fadeIn()
```

---

## Changing the content nested within an element

To alter the text nested within an element...

```js
$("p#my_paragraph").text("Tri-tip prosciutto drumstick swine")
```

You can alternatively write HTML that will be nested within the selected element

```js
$("p#my_paragraph").html(
  "<strong>Tri-tip <a href='http://nytimes.com'>prosciutto</a> drumstick swine"
)
```

---

## Changing the style of an element

Any CSS styles can be adjusted through Javascript code

```js
$("p#my_paragraph").css("color", "green")
```

Multiple styles can be changed at once:

```js
$("p#my_paragraph").css({
  color: "green",
  "background-color": "blue",
  opacity: 0.5,
})
```

---

## Modifying an element's class

It is possible to change an element's style by dynamically adding or removing a class to it.

For example, assume the following CSS code:

```css
.pretty {
  font-weight: bold;
  background-color: pink;
}
```

The following would add the `pretty` class to an element, which would apply the corresponding CSS styles.

```js
$("p#my_paragraph").addClass("pretty")
```

Removing a class is equally easy.

```js
$("p#my_paragraph").removeClass("pretty")
```

---

## Changing an attribute value

Any attribute of any HTML element can have its value changed.

For example, to change the source image used by an `img` element.

```js
$("img#my_donkey").attr("src", "images/mule.jpg")
```

This, of course, assumes you have an image named `mule.jpg` in the `images` directory.

---

## Animating an element

Any element can be animated by transitioning from its current styles to a new style. Animations can include transitions involving the dimension (`width` and `height`), position (`top` and `left`), or `opacity` (a number from 0 to 1)

For example, to move an element to near the top left of the browser viewport while resizing it:

```js
// first make sure the element can be positioned before trying to change its position
$("img#donkey").css("position", "absolute")

// now animate it!
$("img#donkey").animate(
  {
    top: "10px",
    left: "20px",
  },
  2000
) // 2000 represents 2 seconds in milliseconds
```

---

# Conclusions

---

At this point you have a solid understanding of the history and main uses of Javascript in general and JQuery in particular. Now try it!

- Thank you. Bye.