JavaScript

name: portada
layout: true
class: portada-slide, middle, right
---
# JavaScript
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# Web page: JavaScript
In a web page:
- .b[HTML] defines the .blue[structure] and contents of the page.
- .b[CSS] defines the .blue[style] of the elements of the HTML.
- .b[JavaScript] defines the .blue[behaviour] of the elements of the page.

__JavaScript__ is a programming language present in all major web browsers,
used to program the client side behaviour of the web page.

---
# JavaScript: Where to
JavaScript is defined in a `<script>` tag in the HTML. The `<script>` is usually placed
inside the `<head>` tag.

JavaScript can be imported as a external file,
using the `src=` attribute of a `<script>` tag
```html
<script src="myScript.js"></script>
```

.center[[W3Schools JS Where](https://www.w3schools.com/js/js_whereto.asp)]

```html
<script>
  function demoFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
  }
</script>
<p id="demo">A Paragraph</p>
<button type="button" onclick="demoFunction()">Try it</button>
```

<p id="demo">A Paragraph</p>
<button type="button" onclick="demoFunction()">Try it</button>

---
# JavaScript: Output
JavaScript can "display" data in different ways:
- `console.log()` method: Writes in the browser console.
- `window.alert()` method: Writes an alert box.
- Writting into a HTML element, using `innerHTML`.

.center[[W3Schools Output](https://www.w3schools.com/js/js_output.asp)]
```html
<script>
  function consoleFunction() { console.log("Console button pressed"); }
  function alertFunction() { window.alert("Alert button pressed"); }
  function writeFunction() {
    document.getElementById("demo2").innerHTML = "Paragraph changed.";
  }
</script>
<p id="demo2">A Paragraph</p>
<button type="button" onclick="consoleFunction()">Console</button>
<button type="button" onclick="alertFunction()">Alert</button>
<button type="button" onclick="writeFunction()">Write to paragraph.</button>
```

<p id="demo2">A Paragraph</p>
<button type="button" onclick="consoleFunction()">Console</button>
<button type="button" onclick="alertFunction()">Alert</button>
<button type="button" onclick="writeFunction()">Write to paragraph.</button>

---
# JavaScript: Statements
A __computer program__ is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called __statements__.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

```
let x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      // Statement 4
```

.center[[W3Schools Statements](https://www.w3schools.com/js/js_statements.asp)]

---
# JavaScript: Variables
Variables are containers for storing data. Variables are defined using the
`let` or `var` keyword.

The following data types are supported:
- __Integer numbers__: `-10, -5, 0, 2, 5, 100`
- __Float numbers__: `-2.3, 0.1, 40.46, 200.54`
- __Strings__: `"València", "Peugeot 3008"`
- __Boolean values__: `true or false`

```
let x1 = 34.00;     // Written with decimals
let x2 = 34;        // Written without decimals
let name = "Pere"   // String
let raining = true  // Boolean value
```

.center[[W3Schools JS DataTypes](https://www.w3schools.com/js/js_datatypes.asp)]

---
# JavaScript: Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations
with multiple values.

| Operator | Description |
| - | - |
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| -- | Decrement |

.center[[W3Schools Arithmetic](https://www.w3schools.com/js/js_arithmetic.asp)]

---
# JavaScript: Assignment Operators
Assignment operators are used to assign a value to a variable.

| Operator | Example | Same as |
| - | - | - |
| = | x = 5 ||
| += | x += 5 | x = x + 5 |
| -= | x -= 5 | x = x - 5 |
| *= | x *= 5 | x = x * 5 |
| /= | x /= 5 | x = x / 5 |
| %= | x %= 5 | x = x % 5 |
| **= | x **= 5 | x = x ** 5 |

.center[[W3Schools Assignment](https://www.w3schools.com/js/js_assignment.asp)]

---
# JavaScript: functions
A JavaScript function is a block of code designed to perform a particular task.
The code inside a function is executed when the function is called.

```
function name(parameter1, parameter2, ...) {
  // code to be executed
}
```

Function parameters are listed inside the parentheses () in the function definition
and store the values received when the function is invoked.

When JavaScript reaches a `return` statement, the function will stop executing and
will return the value specified.

```
function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

let x = myFunction(4, 3);   // Function is called, return value will end up in x
console.log(x);             // Will print 12
```

.center[[W3Schools Functions](https://www.w3schools.com/js/js_functions.asp)]

---
# JavaScript: Events
Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser.

Most common events:

.center[[W3Schools Events](https://www.w3schools.com/js/js_events.asp)]
.center[[W3Schools Full Event List](https://www.w3schools.com/jsref/dom_obj_event.asp)]

---
# JavaScript: jQuery
__jQuery__ is a JavaScript library that  makes HTML document traversal, manipulation and event handling much simpler, among others.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

In order to use jQuery you just need to include it in your HTML file:

```
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
```

.center[[W3Schools jQuery](https://www.w3schools.com/jquery/default.asp)]
.center[[W3Schools jQuery Get Started](https://www.w3schools.com/jquery/jquery_get_started.asp)]

---
# jQuery: document ready event
It is a good practice to wait to the page to be loaded before executing any JavaScript code. For example,
if we try to find an element that isn't loaded yet, an error will occour.

It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the head section.

```
$(document).ready(function(){

// jQuery methods go here...

});
```
.center[[W3Schools jQuery Ready](https://www.w3schools.com/jquery/jquery_syntax.asp)]

---
# jQuery: Selectors
jQuery allows us to select and manipulate HTML elements using a syntax similar to CSS Selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

.center[[W3Schools jQuery Selectors](https://www.w3schools.com/jquery/jquery_selectors.asp)]

---
# jQuery: Handling events
HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

```html
<element event="JavaScript code"></element>

<button onclick="this.innerHTML = Date()">The time is?</button>
```
<button onclick="this.innerHTML = Date()">The time is?</button>

Events can be defined inside in the JavaScript files using jQuery, instead of the HTML:
```html
<button id="date-button">The time is?</button>
```
```
$(document).ready(function() {
  $("#date-button").click(function() {
    $(this).text(Date());
  });
});
```

---
# jQuery: Handling events
.center[[W3Schools jQuery Events](https://www.w3schools.com/jquery/jquery_events.asp)]

---
# jQuery: Hide/Show
jQuery provides the following methods to hide and show elements:
- `hide()`: Hides the selected elements.
- `show()`: Shows the selected elements.
- `toggle()`: Toggles between hide and show.
- `fadeIn()`, `fadeOut()`, `faddeToggle()`, `fadeTo()`: Fading elements in and out of visibility.
- `slideDown()`, `slideUp()`, `slideToggle()`: Sliding elements up and down. (Better use CSS)

.center[[W3Schools jQuery Hide/Show](https://www.w3schools.com/jquery/jquery_hide_show.asp)]
.center[[W3Schools jQuery Fade](https://www.w3schools.com/jquery/jquery_fade.asp)]
.center[[W3Schools jQuery Slide](https://www.w3schools.com/jquery/jquery_slide.asp)]

---
# jQuery: Get Content
jQuery provides the following methods to get or set the content from elements:
- `text()`: Sets or gets the inner text of the selected elements.
- `html()`: Sets or gets the content of the selected elements (including HTML tags).
- `val()`: Sets or gets the value of form fields.
- `find(selector)`: Searches a child elements using a selector.

.center[[W3Schools jQuery Get](https://www.w3schools.com/jquery/jquery_dom_get.asp)]
.center[[W3Schools jQuery Set](https://www.w3schools.com/jquery/jquery_dom_set.asp)]

---
# jQuery: Get Content Examples

```html
<div>
  <input type="text" value="Pere" name="" id="name-input"/>
  <span class="name">This is a description.</span>
  <p id="length"></p> 
</div>
```
```js
let name = $("#name-input").val();
// Gets the value from the input

$("#length").text("The length of the name is: " + name.length) 
// Sets the #length text (innerHTML)
// Result will be: <p id="length">The length of the name is: 4<p>

$("div").find(".name").text(name);
// Searches elements with class "name" inside all divs
// Sets the innerHTML to name variable
```

---
# jQuery: Add/Remove elements
jQuery provides the following methods to add or remove HTML elemets.
- `append()` - Inserts content at the end of the selected elements
- `prepend()` - Inserts content at the beginning of the selected elements
- `after()` - Inserts content after the selected elements
- `before()` - Inserts content before the selected elements
- `remove()` - Removes the selected element (and its child elements)
- `empty()` - Removes the child elements from the selected element

.center[[W3Schools jQuery Add](https://www.w3schools.com/jquery/jquery_dom_add.asp)]
.center[[W3Schools jQuery Remove](https://www.w3schools.com/jquery/jquery_dom_remove.asp)]

---
# jQuery: Add/Remove classes
jQuery provides the following methods to add or remove classes from HTML elemets.
- `addClass()` - Adds one or more classes to the selected elements
- `removeClass()` - Removes one or more classes from the selected elements
- `toggleClass()` - Toggles between adding/removing classes from the selected elements
- `hasClass()` - Returns `true` or `false` if the element has a class or not.
- `css()` - Sets or returns the style attribute

.center[[W3Schools jQuery Manipulationg CSS](https://www.w3schools.com/jquery/jquery_css_classes.asp)]
.center[[W3Schools jQuery CSS](https://www.w3schools.com/jquery/jquery_css.asp)]