We take developers from good to great

WE ARE THE JSLEAGUE

Intro to Web

HTML+CSS+JS

Whoami

Diana Miron

10 years experience as front-end dev

CEO JSLeague & JSKids

UI/UX & web animations enthusiast

JSLeague

Whoareyou

Let's get to know each other

- intro

- expectations

- future plans with Web

Agenda

Day 1

- Intro to Web: HTML + CSS + JS

- Practice in Codepen

- My first web page

Day 2

- Website components with Bootstrap

- CSS Modern Layouting with Flexbox

- Adding JS

Day 3

- Intro to JavaScript

- Website functionalities with JS

Materials

Exercises

- https://git.jsleague.ro/dee/intro-web-dec-2021

Slides

- shorturl.at/lEQV7

2x 15' coffee break + 1h lunch break

We expect cooperation from all participants to help ensure a safe environment for everybody.

We treat everyone with respect, we refrain from using offensive language and imagery, and we encourage to report any derogatory or offensive behavior to a member of the JSLeague community.

We provide a fantastic environment for everyone to learn and share skills regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices.

We value your attendance and your participation in the JSLeague community and expect everyone to accord to the community Code of Conduct at all JSLeague workshops and other events.

Code of conduct

90's kids will remember

Web history

A short history of web 👩🏻‍💻

Web history

The World Wide Web was invented by Tim Berners-Lee and developed at CERN in 1989-1990

The first web browser was released to the public on August 1991

http://info.cern.ch/hypertext/WWW/TheProject.html

The first web page

First browsers

1993 - Mosaic browser - first commercial browser

1995 - Netscape and Internet Explorer

Early days

Second generation websites

Table based layouts

Spacer gif

Web timeline

1991 - HTML
1994 - HTML 2
1996 - CSS 1 + Javascript
1997 - HTML 4
1998 - CSS 2
2000 - XHTML 1
2002 - Tableless Web design
2005 - AJAX
2009 - HTML 5
2012 - CSS 3
2016 - AngularJS first release

New generation websites

https://www.awwwards.com/

https://www.cssdesignawards.com/

Today

1.86 billion websites

The website trio

Introduction to HTML

HTML + CSS + JS = 💙

The Mighty Trio

HTML + CSS + JS

HTML = Hyper Text Markup Language

CSS = Casscading Style Sheets

JS = JavaScript

JavaScript != Java

HTML + CSS + JS

Process

Front-end vs. Back-end

Front-end

HTML + CSS + JS

Back-end

Java, C#, Objective-C, Python

Scala, Go Lang etc

700 programming languages https://en.wikipedia.org/wiki/List_of_programming_language

Code

Text editors

What web is made of

Web page structure

Sugar, spice and everything nice 🌈

HTML

HTML = Hyper Text Markup Language
is a mark-up language
can be used by anyone
can be written in a variety of text editors (Notepad, Notepad ++, Sublime, Atom etc.)
can be processed by a variety of devices (computer, mobile phone, tablet etc).

HTML

All HTML code is made up of tags
These are two-fold:
pair (close)
unpaired (no need to be closed)
tag names are case-insensitive

<p> My name is Diana </p>

opening tag

closing tag

content

HTML

<html>
    <head>
        <title> Prima mea pagina </title>
    </head>
    <body>
        <div>
            <p>>Hello, there!</p>
        </div>
    </body>
</html>

HTML

Tags

Primary tags

Tag, you're it! 🙀

HEAD

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, 
        shrink-to-fit=no, minimum-scale=1">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=
             Open+Sans:300,400,600,700&lang=en" />
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

  <link rel="stylesheet" href="stylesheet.css">
  <script type="text/javascript" src="script.js"></script>

  <title>My First Hero App</title>

</head>

Types of tags

<section></section>
<header></header>
<footer></footer>
<aside></aside>
<div></div>

<p></p>
<h1></h1> .... <h6></h6>
<span></span>
<small></small>

<form></form>
<input/>
<select></select>
<button></button>

<ul></ul>
<ol></ol>
<table></table>

<a></a>
<img/>
<hr/>
<br/>

https://www.w3schools.com/tags/

Semantic elements

header
nav
main
section
article
aside
footer
figure

https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantic_elements

Attributes

<div id="container"> ... </div>

<p class="details"> ... </div>

<a href="http://example.com"> link </a>

<input type="checkbox" checked>

<button disabled> Click </button>

Block vs. Inline elements

Lists

Unordered list

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
</ul>

Ordered list

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
</ol>

Images, video, links

Images

<img src="image.png" alt="What the picture is about">

Anchors

<a href="http://example.com" target="_blank">link</a>

Video

<video controls width="250" height="300" src="vide.mp4">
    Video not supported
</video>

Tables - Deprecated

<table border>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1 column 1</td>
            <td>row 1 column 2</td>
        </tr>
    </tbody>
</table>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Forms

<form action="script.php" method="POST">
    <label for="name"> user name: </label>
    <input type="text" name="user-name" id="name">
  
    <label for="user-password" id="password"> password </label>
    <input type="password" name="user-password" id="password">
  
    <label for="remember"> Remember me </label>
    <input type="checkbox" name="remember-me" id="remember" checked> 
  
    <input type="submit" value="Log in">
</form>

Exercise

Let's write some tags 💻

Challenge 1 + 2

CSS: Ids, classes and selectors, attributes

CSS

The pretty part 🎁

Intro

CSS (Cascading Style Sheets) is a declarative language that controls how web pages look in the browser.

a set of rules that describe the visual properties of elements look on a page; rules are organized in stylesheets

the rules are targeted to DOM elements through selectors

the style cascade and specificity decides which rules apply when multiple selectors match an element

Intro

CSS Rules

Selectors

tag

class

div {
    color: red;
}

#main {
    color: red;
}

p {
    color: red;
}

.content {
    color: red;
}

.green {
    color: green;
}

ID vs Class

Ids are unique:

relationship 1-1
an item can have a single id
an id with a given name can be used for a single element
identified by #

Classes are not unique:

multi-many relationship
an element can have as many classes as possible
the name of a class can be used for as many items as possible
identified by dot

ID vs Class

<img class="hero--image img-green red" 
     id="hero-diana"
     src="img/Doctor_Strange.jpg" />

HTML

CSS

.hero--image {
    border: none;
}

.red {
    color: red;
}

#hero-diana {
    background: pink;
}

Syntax

.hero {
  width: 70%;
  min-width: 900px;
  position: absolute;
  left: 15%;
  top: 115px;
  will-change: auto;
  transition: left .45s ease-out;
}

http://www.stylinwithcss.com/resources_css_properties.php

Nesting selectors

.myList li {
  color: red
}

<ul class="myList">
  <li>Colored element</li>
</ul>
<ol>
  <li>element</li>
<ol>

Implementation

1. External file as link

<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>

2. Internal style - in HEAD

<head>
    <style>
          .red {
              color: red;
          }
    
    </style>
</head>

3. Inline - as element attribute

<h1 style="color: red;" class="red">I am a green text</h1>

Specificity

h1 {
  color: red;
}

.headline {
  color: blue;
}

#myText {
  color: green
}

<h1 class="headline">Title 1</h1>

<h1 class="headline" id="myText">Title 2</h1>

!important

.myClass {
  color: red !important;
}

#special {
  color: blue;
}

<p class="myClass">
  Some text goes here
</p>

<p class="myClass" id="special">
  Some other text
</p>

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Importance

Pseudo-classes

button:hover {
  color: blue;
}
li:first-child {
  color: blue;
}
li:nth-child(3){
  color: blue;
}
li:nth-child(even){
  color: blue;
}
li:not(.red) {
  color: blue;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Text

p {
  color: red;
  font-family: Arial; 
  /* font-family: "Courier New"; */
  font-size: 24px;
  font-weight: bold;
  /* font-weight: 700; */
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

Text

div {
  text-align: center; /* left | right */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Text

div {
  text-align: center; /* left | right */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Color

text-color

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

https://developer.mozilla.org/en-US/docs/Web/CSS/color

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

p {
  color: red;
}

background-color

p {
  background-color: red;
}

Color

Hexadecimal

https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color#How_to_describe_a_color

p {
  color: #0000FF; /* blue */
}

RGB(A)

p {
  color: rgb(0,0,255); /* blue */

  color: rgba(0,0,255, 0.5); 
  /* blue + 0.5 transaprency */
}

Color

HSL (Hue-Saturation-Light)

https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color#How_to_describe_a_color

p {
  color: hsl(240, 100%, 50%); 
  /* blue */

  color: hsla(240, 100%, 50%); 
  /* blue + 0.5 transaprency */
}

Opacity

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

p {
  opacity: 0.33;
}

Background

https://developer.mozilla.org/en-US/docs/Web/CSS/background

div {
  background: red;

  background: no-repeat center/80% url("image.png");

  background: url("test.jpg") repeat-y;
}

Exercise

Let's write some styles 💻

Challenge 3 + 4 + 5 + 6

Box model

Box sizing

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

div {
  box-sizing: border-box;
}

Positions

https://developer.mozilla.org/en-US/docs/Web/CSS/position

div {
  position: relative;
}

z-index

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

div {
  z-index: 2
}

Display

https://developer.mozilla.org/en-US/docs/Web/CSS/display

div {
  display: block;
/*     default */
}
div {
  display: inline-block;
}
div {
  display: inline;
}

Margins

Paddings

Border

CSS measurements

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

CSS measurements

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

CSS measurements

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

div {
    /* property: calc(expression) */
    width: calc(100% - 80px);
}

:before & :after

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

a::after {
  content: "→";
}


a::before {
  content: "♥";
}

CSS Filters

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

CSS Drawing

Exercise

Let's write some styles 💻

Challenge 7 + 8

Modern Layouting

CSS

Flexbox & CSS Grid 🎄

Basis of layout

Float

img {
  float: right;
  margin: 0 0 1em 1em;
}

Basis of layout

Float layout

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

nav.clearfix

section

Basis of layout

Inline-block layout

.nav

section

.nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}

.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

.column

Centering content

Using padding

div {
  padding: 20px;
  display: inline-block;
}

Vertical centring - fixed size

div {
  width: 100px;
  height:100px;
}

.center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Responsive Web Design

Definition

Responsive web design means designing your website so that it responds to your users environment based on screen size, platform and orientation.

Responsive vs. Adaptive

Breakpoints

RWD Components

Flexible, grid-based layouts
- % widths and em units, not fixed pixels

Flexible images and media
- width/height not fixed

CSS3 Media Queries
- @media rule

Flexible layout

.container {
  width: 100vw;
}
.section {
  width: 75%;
}
.aside {
  width: 25%;
}

Flexible layout

Relative Viewport Lengths

vw - Viewports width
vh - Viewports height
vmin - Minimum of the viewport’s height and width
vmax - Maximum of the viewport’s height and width

Grid systems

Responsive images

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Some image">

Media queries

.container { 
    background: blue; 
}

@media screen and ( min-width: 500px ) and ( max-width: 800px ) {
    
    .container { 
        background: red; 
    }

}

@media screen and ( max-width: 500px ) {
    
    .container { 
        background: green; 
    }

}

Viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Flexbox

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model.

The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Flexbox

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

Flexbox

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

.container {
  display: flex;
}

Flexbox Axis

Flexbox Direction

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

.container {
  display: flex;
  flex-direction: column; // row is the default
}

Flexbox Direction

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
}

Flexbox Order

.item:nth-child(5) {
    order: -1;
}
.item:nth-child(2) {
    order: 1; /* default is 0 */
}

Flexbox Alignment

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

.container {
  display: flex;
  justify-content: center;
}

Flexbox Alignment

<div class="container">
    <div class="item">Red</div>
    <div class="item">Orange</div>
    <div class="item">Yellow</div>
    <div class="item">Green</div>
    <div class="item">Blue</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

Flexbox Centering

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Flexbox Grow

.container {
    display: flex;
}

.item:nth-child(4) {
    flex-grow: 1;
}

Flexbox Container

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Exercise

Let's write some Flexbox 💻

Challenge 9

CSS Grid

built by those who did

1996 - “frame-based” layout model

2005 - Advanced Layout Module

Jan 2017 - Chromium 56 for Android

March 2017 - Firefox Mozilla

2 days later - Chrome

end of March - Opera + Safari

CSS Grid

Ironically, the last company to ship CSS Grid was Microsoft

A terrific example of standards success and cross-browser collaboration.

It closes the loop on a process that has been more than 20 years in the making.

Why CSS Grid

CSS Grid can do things Flexbox can't do

Flexbox - layout in a single dimension – in a row OR a column

CSS Grid - layout of items in two dimensions – rows AND columns

Explicit about the size of a grid item + the size your content takes up

It is the most powerful layout tool that we have invented for CSS. Yet

Grid Container

.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Grid Container

.container {
  display: grid;
  grid-template-columns: repeat(3, 20px) 5%;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Grid Template Areas

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header     header     header     header"
    "main       main       .          sidebar"
    "footer     footer     footer     footer";
}
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

Grid Gap

.container {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

Grid Alignment

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

Grid Alignment

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

Grid Items

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3
}

Grid Items

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Grid Items

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

Grid Items

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

Dev Tools

Exercise

Let's write some CSS Grid 💻

Challenge 10

My first website

Intro to Web

Finally 👨🏻‍💻

Files structure

├── index.html
├── style.css
├── scripts.js
└── images
  └── image-1.png
  └── image-2.png
  └── image-3.png

├── index.html
├── pages
  └── about.html
  └── services.html
  └── contact.html
├── index.html
├── styles
  └── style.css
  └── lib.css
├── scripts
  └── myscripts.js
  └── lib.js
└── images
  └── image-1.png
  └── image-2.png
  └── image-3.png

Exercise

Let's build the website 💻

Challenge 11

Bootstrap (v5.1.3)

Build fast, responsive sites with Bootstrap

Exercise

Let's add Bootstrap 💻

Challenge 12

A11y

Intro to Web

Because it matters 🙃

What is Accessibility

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the WWW

Disabilities

auditory
cognitive
neurological
physical
speech
visual

A11Y

Without disabilities

mobile, watches, smart TVs, small screens, different input modes, etc.
older people
“temporary disabilities”
“situational limitations”
slow Internet connection, limited or expensive bandwidth

WCAG 2.1

Success criteria levels:

A (lowest)

AA (middle)

AAA (highest)

Color Contrast

https://webaim.org/resources/contrastchecker/

Patterns & signs

common fonts - dyslexia
at least 14px (0.875rem)
relative values (%, rem, or em)
only underline links
markup instead of text on images
80 characters per line
indentations and spacings

Typography

@media prefers-reduced-motion
allow control of sliders and carousels
HTML Videos instead of animated GIFs
prevent auto-play
no parallax

Animations

.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

Semantic

Headings

Images

<img src="blossoms.png" alt="Cherry trees in bloom on the UW campus">

Standard images

CSS background-image
empty alt=""
role="presentation"

Decorative images

Keyboard & Focus

tabindex in natural order
Tab, Enter/ESC, Spacebar support
links and buttons :focus, outline and title
trap focus inside modal

* {
    outline: none;
}

:focus {
    outline: none;
}

Touch area

Target Size (Level AAA) - 44x44 px

A Better Web

Performance

Security

Accessibility

All websites created after 23 September 2018 will have to be accessible by 23 September 2019.

Existing websites will have to comply by 23 September 2020.

All mobile applications will have to be accessible by 23 June 2021.

CSS Animations

CSS

Make the Web go round and round

Animations

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Keyframes

"from" and "to" (which represents 0% (start) and 100% (complete)

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Animations

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

animation-timing-function

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Animations

http://cubic-bezier.com/#0,0,.58,1

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Animations

Shorthand property

div {
  animation: example 5s linear 2s infinite alternate;
}

https://ianlunn.github.io/Hover/

https://daneden.github.io/animate.css/

Animations

Complex animations

Intro to JS

JavaScript

Syntax, data types, console, debugging

JavaScript was invented by Brendan Eich in 1995.
It was developed in 10 days.
It was developed for Netscape 2, and became the ECMA-262 standard in 1997.
After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser.
Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).
ECMA = European Computer Manufacturers Association
ES2015 (ES6) is the latest version of JavaScript programming language. It is the first major upgrade to JavaScript since 1997

History

Variables, objects,
Data types
Functions & Events
DOM accessing
Control Flow
onClick, onload
Hands on!

JavaScript Fundamentals

Implementation

<script type="text/javascript" src="script.js"></script>

1. External - as link

<script>
    document.getElementById('demo').innerHTML = 'This is so awesome';
</script>

2. Internal - inside HTML

Handling

Handling browsers that don’t support JavaScript

<noscript>
    Your browser does not support JavaScript so page
    functionality will be significantly reduced.
</noscript>

Controlling loading style of script files:
- async - script is executed asynchronously while the page continues the parsing.
- defer - script is executed after the page has finished parsing.

Handling

Myth:

JavaScript is a scripting, interpreted language

Reality:

JavaScript engine compiles and immediately runs the code

Usage

document.getElementById ("idulMeu")
//accesses an HTML element with a unique unique id

innerHTML
//a property that defines the HTML content of an item

window.alert ("Alert: Pay attention!")
alert on the screen

//document.write ()
web page prints

//console.log (myVariable + "message")
console printing, debugging

Statements

x = y + 10;

literal

value

addition

operator

variable

(identifier)

assignment

operator

expression

Statements

1. var a = 2;
2. var b = 3;
3. a = b * 2;
4. b = b / 4;
5. var c = a + b;

List of statements - executed in order

1. {
2.   var a = 1;
3.   var b = 2;
4.   a = a + b;
5. }

Grouping statements using { } - blocks

Primitives

1. Numbers

```
4, 24, 1034032, 4.56 etc.
```
up to 2^53
Special types of numbers: NaN, -Infinity, Infinity

2. Strings

A collection of characters used to represent text
Enclosed by single (') or double (") quotes

"This is some string"
'This is another string'
"And they're both great!"
"And then she said: \" Whoaaa! \"."

Primitives

3. Booleans

A True/False value using the true and false keywords

Falsey values

var myTrueVar = true;
var aFalseVar = false;

false
0 (zero)
'' or "" (empty string)
null
undefined
NaN

Operators

1. Addition ( + )

3 + 2 // => 5

'I am ' + 'the one!' // => 'I am the one'

1 + '2' // => 12
"I'm number " + 1 // => "I'm number 1"

Operators

2. Multiplication (*), Substraction (-) and Division ( / )

3 * 2 // => 6
4 / 2 // => 2
8 - 5 // => 3

'3' * 2 // => 6 , same for 3 * '2' 

'a' * 2 // => NaN - conversion failed

'a' - 'a' // => NaN

Operators

3. Equality (==, === and !=, !==)

1 == 1           // => true
'abc' === 'abc'  // => true

1 == '1'      // true
1 === '1'     // false
1 !== '1'     // true

1 < 2    // true
2 >= 3   // false

Operators

4. Logical operators: and (&&), or (||), and not (!).

'Apples' == 'Oranges' && 5 > 3  //

5 > 10 || 4 < 2                 //
 
3 < 10 && 10 > 8                //

7 > 5 || 1 > 2                  //

!(7 > 5 || 1 > 2)               //

Variables

var myVariable; // value is undefined

Declaring a variable

var myVariable;
myVariable = 42;

Assigning a value to a variable

var myVariable = 42;
var myOtherVariable = myVariable / 2;

Using a variable

var myNumber = 42;
myNumber = 'forty two';

Variables are dynamic

Variables

Variable names:

Can contain numbers, but they cannot begin with a number
Must not contain mathematical or logical operators.
Must not contain any punctuation marks of any kind other than the underscore (_) and dollar sign ($).
Must not contain any spaces
Must not be JavaScript keywords, but they can contain keywords
Are case-sensitive

Exercise

Let's write some JS 💻

Challenge 1+2

The DOM (Document Object Model) represents a hierarchy of objects, forming a model of your HTML document.

DOM

Window - represents the browser window object
Navigator - object linking to browser specific APIs
Document - an object representing the page loaded in the window. Use this to get references to elements and manipulate any HTML or CSS related properties

Accessing DOM Elements

<div id="main">
    <div class="pictureContainer">
        <img class="theimage" src="smiley.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="tongue.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="meh.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="sad.png" height="300" width="150"/>
    </div>
</div>

Getting elements by their id

var container = document.getElementById('main');  
// get element with #main

container; // div#main object

container.style
container.addEventListener(...)
container.appendChild(...)

Accessing DOM Elements

<div id="main">
    <div class="pictureContainer">
        <img class="theimage" src="smiley.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="tongue.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="meh.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="sad.png" height="300" width="150"/>
    </div>
</div>

Getting elements by class name

// get elements with .theimage
var images = document.getElementsByClassName('theimage'); 

Array.from(images).forEach(pict => {
  console.log(pict.tagName); // IMG, IMG, IMG, IMG
})

Accessing DOM Elements

<div id="main">
    <div class="pictureContainer">
        <img class="theimage" src="smiley.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="tongue.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="meh.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="sad.png" height="300" width="150"/>
    </div>
</div>

Getting elements by CSS selectors

var images = document.querySelectorAll('theimage'); 
images; 
// NodeList(4) [img.theimage, img.theimage, img.theimage, img.theimage]

var picture = document.querySelector('.pictureContainer'); 
var container = document.querySelector('#main'); 
var notAnElement = document.querySelector('not-a-tag'); 
picture;       // HTMLPictureElement
container;     // HTMLDivElement
notAnElement;  // null

Modifying DOM Elements

<div class="my-element">
    This is the content of <span> my </span> element
</div>

Changing the content of an element

var elem = document.querySelector('.my-element');

elem.innerHTML = 'Some other content of <span> mine </span>';

Modifying DOM Elements

<p>One</p>
<p>Two</p>
<p>Three</p>

Adding a new node

var newElement = document.createElement('p'); // create a new <p> element
newElement.textContent = 'Four';              // change the text content

document.body.appendChild(newElement);        // attach it to the DOM

// <p> One </p>
// <p> Two </p>
// <p> Three </p>
// <p> Four </p>

var paragraphs = document.body.getElementsByTagName("p"); 
// all <p> elements

document.body.insertBefore(paragraphs[2], paragraphs[0]); 
// add third after first

// <p> Three </p> <-- dom element can only appear once in document
// <p> One </p>
// <p> Two </p>
// <p> Four </p>

Modifying DOM Elements

Changing/adding attributes

var button = document.querySelector('button');

button.disabled = false;

var paragraph = document.querySelector('p');
paragraph.getAttribute('data-secret'); // don't tell anyone

<p data-secret="don't tell anyone">Title</p>

<button disabled="true">CLICK ME!</button>

Modifying DOM Elements

Modifying styles

var paragraph = document.querySelector('p');
paragraph.style.color = 'red';  // set new color to red

paragraph.style.height;         // '' <- not explicitly set
window.getComputedStyle(paragraph).height; // '18px'

paragraph.style.height = '50px';
console.log(paragraph.style.height);       // '50px'

window.innerWidth;   // browser current width
window.innerHeight;  // browser current height

<p style="color: purple">
  Some text
</p>

Exercise

Let's write some JS 💻

Challenge 3

{
  statement_1;
  statement_2;
  .
  .
  .
  statement_n;
}

Block statements are used to group statements together

Blocks

If/else conditional

if (condition) {
  // code block if contition evaluates to true
}

if (condition) {
  // contition is true
} else {
  // condition is false
}

if (condition1) { 
    // contition1 is true 
} else if(condition2) { 
    // contition2 is true 
} else { // condition1 AND condition2 is false }

While/do loop

while (condition) {
    // code gets executed as long as 
    // condition evaluates to true
}

do...while - code gets executed at least once

do {
    // code runs once
    // and then gets executed as long as 
    // condition evaluates to true
} while (condition)

Breaking out of loops

var a = 0;
while (true) {
    if( a >= 5 ) {
        break;
    }
    a = a+1;
}

For loop

for ([initialExpression]; [condition]; [incrementExpression]) {
    // code gets executed as long as
    // condition evaluates to true
}

for (var variable=startvalue; variable < endvalue; variable = variable + increment) {
    // code to be executed
}

for (var i=0; i<5; i++) {
    console.log(i);
}

// 0 1 2 3 4

Using the for loop for iterations

Try/catch

try {
    var a = 2 / b; // b is not defined
}
catch(e) {
    alert('The following error occurred: ' + e.message)
}
finally {
    alert('Finally block executed')
}

Catching code errors

throw 'Error2';   // String type
throw 42;         // Number type
throw new Error('something happened') // Error object

Throwing custom errors

Exercise

Let's write some JS 💻

Challenge 4 + 5

Functions

Declaring a function

function add(a, b) {
    return a + b;
}

declaration

keyword

function name

function parameters

function return value

Using (invoking) a function

var a = 1;
var b = 2;
var myVar = add(a, b);

arguments

assignment to function return value

Function scope

var addition = 10; // defined in global scope

function processNumber(num) {
    var multiply = 2; // function scoped variable
                      // available only in function
                      // block - {}

    // OK: use external scoped variable 'addition'
    return (num * multiply) + addition; 
}

var res = processNumber(5); // 20

console.log(multiply); 
// ReferenceError: num is not defined

Closure

function init() {
  var name = 'Mozilla'; 
  // name is a local variable created by init
  function displayName() { 
    // displayName() is the inner function, a closure
    alert(name); 
    // use variable declared in the parent function
  }
  displayName();
}
init();

Callbacks

function callback() {
    console.log('callback')
}

function caller(cb) {
    cb();
}

caller(callback); // 'callback'

Functions can be passed as arguments to other functions

Events

Simple event listeners

var inputedText = ''

document.querySelector('input').addEventListener('input', function(event) {
  inputedText = event.target.value; // display the last modified value of the input
})

function handler() {          // handler function
   console.log(inputedText);  // get the curent text in the input
}

var button = document.querySelector('button')

button.addEventListener('click', handler);    // register handler

button.removeEventListener('click', handler); // remove handler

<button>Click me!</button>
<input placeholder="Write here...">

Events

The event object

var button = document.querySelector("button");

button.addEventListener("mousedown", function(event) {
    if (event.button == 0) {
        console.log("Left button");
    } else if (event.button == 1) {
        console.log("Middle button");
    } else if (event.button == 2) {
        console.log("Right button");
    }
});

<button>Click me!</button>
<input placeholder="Write here...">

Events

The event object

var input = document.querySelector("input");


input.addEventListener("keydown", function(event) {
    if (event.key == "r") {
        button.style.background = "red";
    }
});

input.addEventListener("keyup", event => {
    if (event.key == "v") {
        button.style.background = "";
    }
});

<button>Click me!</button>
<input placeholder="Write here...">

Events

Event propagation

<div>
    <button>Click me!</button>
</div>

var div = document.querySelector('div');
var button = document.querySelector('button');
// button handler
button.addEventListener('click', function(event) {
    console.log('button click');
    event.stopPropagation(); // event stops here

});
// div handler
div.addEventListener('click', function(event) {
    console.log('div click');
});

Events

Preventing default behaviour

<a href="https://developer.mozilla.org/">MDN</a>

var link = document.querySelector("a");

link.addEventListener("click", function(event) {
    console.log("Won't navigate away");
    event.preventDefault();
});

Events

Document ready

document.addEventListener("DOMContentLoaded", function() {

    //  the browser fully loaded HTML, and the DOM tree 
    //  is built, but external resources like pictures <img> 
    //  and stylesheets may be not yet loaded.

});



window.onload = function() {
  
    //  the browser loaded all resources (images, styles etc).

};

Events

Timers

var timer = setTimeout(function() {
  console.log("It's time"); // will call after aprox 500ms
}, 500);


let ticks = 0;
let clock = setInterval(function() {
  console.log("tick", ticks++);
  if (ticks == 10) {
    clearInterval(clock); // stops the timer
    console.log("stop.");
  }
}, 200); // will call every aprox 200ms

Events

Client-side handling of forms

<form id="theForm" >
  <input id="name" name="name">
  <input type="submit">
</form>

let form = document.querySelector('#theForm')

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const nameInput = document.getElementById('name');
   
  let nameValue = nameInput.value;

  console.log(nameInput.validity.valid);  // true/false

  // do something depending on form state
});

Exercise

Let's write some JS 💻

Challenge 6

Object
Array
Boolean
Symbol
Error
Number
String
RegExp
Math
Set

Objects

Arrays

A collection object that has a sequence of items you can access and modify

var skills = [ 'HTML', 'CSS', 'JS' ];

var fibonacci = [ 1, 1, 2, 3, 5, 8, 13 ];

var array = [ 'string', 42, {name: 'Andrei'}, [1, 2, 3] ];

Access items using bracket nottaion and index for item position in collection

fibonacci[4] // 5 - array is 0 indexed

skills[1] = 'Python' // directly change a value

array[3][1]; // 2 - multidimensional array

Arrays

Obtaining the length of the array

var skills = [ 'HTML', 'CSS', 'JS' ];

skills.length;       // 3

skills[3] = 'Python';

skills;              // [ 'HTML', 'CSS', 'JS', 'Python' ];

skills.length;       // 4

skills [9] = 'C++';

skills;              // [ 'HTML', 'CSS', 'JS', 'Python', , , , , , 'C++' ]

skills.length;       // 10

skills[6];           // undefined

Arrays

Iterating arrays

var fibbonacci = [1, 1, 2, 3, 5, 8, 13, 21];

//for loop

for (var i = 0; i < fibbonacci.length; i++) {
  console.log(fibbonacci[i]);      // 1, 1, 2, 3, 5, 8, 13, 21
}

// for...in loop

for (var index in fibbonacci) {
    console.log(fibbonacci[index]) // 1, 1, 2, 3, 5, 8, 13, 21
}

// for...of loop

for (var number of fibbonacci) {
    console.log(number)            // 1, 1, 2, 3, 5, 8, 13, 21
}

Arrays - forEach()

executes a provided function once for each array element, without changing the array.

var skills = ['HTML', 'CSS', 'JS'];

skills.forEach(function(skill) {
    console.log(skill); 
});

// HTML
// CSS
// JS

skills.forEach(function(skill, index) {
    console.log(
        'Skill ' + (index + 1) + ': ' + skill.toLowerCase()
    ); 
});

// Skill 1: html
// Skill 2: css
// Skill 3: js

Array Methods

Concatenating 2 arrays

var skills1 = [ 'HTML', 'CSS', 'JS' ];

var skills2 = ['Python', 'Java'];

var skills = skills1.concat(skills2); 

// [ 'HTML', 'CSS', 'JS', 'Python', 'Java' ]

Finding items

var skills = [ 'HTML', 'CSS', 'JS' ];

skills.indexOf('JS')      // 2
skills.indexOf('Python')  // -1

skills.includes('HTML') // true
skills.includes(123)    // false

Array Methods

Modifying an array

var skills = [ 'HTML', 'CSS', 'JS' ];

// add at the end
skills.push('Python');  // [ 'HTML', 'CSS', 'JS', 'Python' ]

// remove from end
skills.pop();           // [ 'HTML', 'CSS', 'JS' ]

// remove from start
skills.shift();         // [ 'CSS', 'JS' ]

// add to start
skills.unshift('Java'); // [ 'Java', 'CSS', 'JS' ]

Array Methods

Working with strings

var names = 'Andrei George Elena Maria';

names.split(' ') // [ 'Andrei', 'George', 'Elena', 'Maria' ]

var skills = ['HTML', 'CSS', 'JS'];

skills.join(', ') // 'HTML, CSS, JS'

Working with strings

var name = 'Diana Miron';

name.charAt(2) // a
name[2] // a

Array Methods

var names = 'Andrei George Elena Maria';

names.sort();
names.slice();
names.splice();
names.find();
names.includes();
names.filter();
names.map();
names.reduce();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Objects

var basicObject = {};

A collection of key/value pair data (similar to a dictionary)

Can contain primitives, functions, arrays and/or other objects:

const anObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
  // ...
}

keys

values

properties

Objects

Literal notation

var person = {
    sex: 'female',                         // string
    age: 29,                               // number
    name: {                                // nested object
        'first': 'Diana', 
        'last': 'Miron'
    },
    skills: ['HTML', 'CSS', 'JavaScript'], // array
    sayHello: function() {                 // method
        console.log('Hello, friends!')
    },
    favoriteFood: null                     // null value
};

Objects

person.age; // 29
person.age = 32; // change the value
person.skills[0]; // 'HTML'
person.sayHello(); // call the function -> 'Hello, friends!'
person.name.first; // 'Diana'

person.isStudent = false; // add a new property to the object

delete person.isStudent; // remove property from the object

Dot notation

person.name

object

property name

dot operator

Objects

var person = {
    name: {                                
        first: 'Diana', 
        last: 'Miron'
    },
    education: {
        schoolName: 'ASE',
        yearGraduated: 2013
    }
};

person.name.first; // 'Diana'

person.education.yearGraduated; // 2013

Nested objects

Objects

person['age']; // 29
person[age] // ReferenceError: age is not defined

person['age'] = 18; // change the value
person['name'].first; // 'Diana'

person['isStudent'] = false; // add a new prop to the object

Bracket notation

person['name']

object

property name

Objects

Testing if objects have properties

var person = { name: 'Diana' };

if ('name' in person || person.name !== undefined) {
    // is true
}

if ('age' in person || person.age) {
    // is false
}

Getting all the object keys

var person = {
    name: 'Diana',
    age: 29,
    sex: 'female'
};

var keys = Object.keys(person) // [ 'name', 'age', 'sex' ]

for(var key in person) {
   console.log(person[key]);
}

Iterating object keys

this

this is used in functions refer to the object the function is being called from

var person1 = {
    age: 29,
    printAge: function() {
        console.log( 'My age is ' + this.age );
    }
};

person1.printAge(); // 29 - this will refer to person1

var person2 = { age: 25 };
person2.printAge = person1.printAge; 

person2.printAge(); // 25 - this will refer to person2

Classes(ES6)

class Person {
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    printName() {
        console.log('Hello, my name is ' + this.name);
    }
}

var p = new Person('Andrei', 31, 'male');
p.age; // 31
p.printName(); // 'Hello, my name is Andrei'

p.age = 'thirty one'; // asign new value of new type

JSON

{
    "name": "Diana Miron",
    "age":  29,
    "skills": [
        { "name": "HTML", "level": 7 },
        { "name": "CSS", "level": 8 }
    ]
}

A language agnostic data exchange format
Contains only data (primitives, arrays, other objects), no methods

var person = JSON.parse(paersonJSON);  // decode JSON

var json = JSON.stringify(paerson);    // encode JSON

Build-in objects

Date

Math.PI;            // 3.141592653589793
Math.round(4.7);    // 5
Math.ceil(4.4);     // 5
Math.floor(4.4);    // 4
Math.random();      // [0,1)

Math

var myDate = new Date(1995, 11, 17);
myDate.getFullYear(); // 1995
myDate.getMonth(); // 10 - months represented 0-11
myDate.getTime();  // 819151200000 - milliseconds since January 1, 1970

Exercise

Let's write some JS 💻

Challenge 7 + 8

HTTP requests

REST API

https://www.redhat.com/en/topics/api/what-is-a-rest-api

XMLHttpRequest

//create XMLHttpRequest object
const xhr = new XMLHttpRequest()
//open a get request with the remote server URL
xhr.open("GET", "https://world.openfoodfacts.org/category/pastas/1.json")
//send the Http request
xhr.send()

//EVENT HANDLERS

//triggered when the response is completed
xhr.onload = function() {
  if (xhr.status === 200) {
    //parse JSON datax`x
    data = JSON.parse(xhr.responseText)
    console.log(data.count)
    console.log(data.products)
  } else if (xhr.status === 404) {
    console.log("No records found")
  }
}

//triggered when a network-level error occurs with the request
xhr.onerror = function() {
  console.log("Network error occurred")
}

XMLHttpRequest

// create XMLHttpRequest object
const xhr = new XMLHttpRequest()
// open a POST request
xhr.open("POST", "/food")
// set content-type header to JSON
xhr.setRequestHeader("Content-Type", "application/json");
// send JSON data to the remote server
xhr.send(JSON.stringify(food))

// Event Handlers
// 
// triggered when the response is fully received
xhr.onload = function(response) {
  console.log(response)
}

POST

Exercise

Let's write some JS 💻

Challenge 9 + 10 (optional)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery Example</title>
        <script type="text/javascript" src="Scripts/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
    ...
        <script type="text/javascript">
            $(document).ready(function () {
                // some code
            });
        </script>
    </body>
</html>

jQuery

Selecting elements and traversing the DOM

$(document).ready(function () {
    $("h2").each(function () {
        this.style.color = "red";  // this -> currently selected element
    }); 
});

Tag name - $("h2")
Element ID - $("#logo")
Element class - $(".blue")
An attribute on an element - $("input[type=text]")

jQuery

Selecting elements and traversing the DOM

$( "span.subchild" ).parent();

Parents

Children

Siblings

$( "div.grandparent" ).children( "div" ); // direct children only
$( "div.grandparent" ).find( "div" ); // all descendants

$( "div.parent" ).siblings();
$( "div.parent" ).next();
$( "div.parent" ).prev();

jQuery

Adding, Removing, and Modifying Elements

append( htmlString )

html( htmlString )

detach()

$("#list").append("<li>The new last list item</li>");

$("#Warning").detach();

$(".title").html("<h1>New Heading</h1>");

jQuery

Adding, Removing, and Modifying Elements

$("#Warning").replaceWith("<p>Panic Over!</p>");

replaceWith( htmlString)

val()

attr()

$("input[type=text]").val();

$("button").attr(disabled,"disabled");

jQuery

Styling elements

// GET
$("p").css("font-size");
$("p").css("fontSize");

// SET

$("p").css("fontSize", "10px");
$("p").css({
    fontSize: "10px",
    color: "red"
})
h1.addClass( "big" );
h1.removeClass( "big" );
h1.toggleClass( "big" );
if ( h1.hasClass( "big" ) ) {
    ...
}

Handling events

$(document).ready(function () {
    $("#submit").bind(“click”, function () {
        var userName = $("#NameBox").val();        
        $("#thankYouArea").replaceWith("<p>Thank you " + userName + "</p>");
    }) 
});

Use the jQuery selector function to find the item that initiates the event

Use the bind method (or a shortcut) to bind the event handler to the event

jQuery

Handling events

click(), dblclick() : Binds to mouse click events.
error() : Binds to occurrence of errors in the document such as broken links and missing images.
focus(), focusin(), focusout() : Binds to element focus events.
keydown(), keyup(), keypress() : Binds to user keyboard input events.
hover(), mousedown(), mouseup(), mouseenter(), mouseleave(), mouseout(), mouseover(), mousemove() : Binds to mouse and cursor-related events.
load(), unload() : Binds to events triggered when a specified element is loaded or unloaded on the page.

jQuery

AJAX (Async JavaScript And XML)

// Using the core $.ajax() method
$.ajax({
    url: "post.php", // The URL for the request
    type: "GET", // Whether this is a POST or GET request
    dataType : "json", // The type of data we expect back
    success: function(data) { console.log(data) }
})

// POST: add data: {}

AJAX

Local & Session Storage

// set item
localStorage.setItem("name", "diana");

//get item
localStorage.getItem("name");

//delete any key
localStorage.deleteItem("name");

//clear all keys
localStorage.clear();

local storage

session storage

// set item
sessionStorage.setItem("name", "diana");

//get item
sessionStorage.getItem("name");

//delete any key
sessionStorage.deleteItem("name");

//clear all keys
sessionStorage.clear();

Exercise

Let's write some JS 💻

Challenge 11

Q&A

https://forms.gle/pM7So7oNagEGrZyn9

Any questions & curiosities?

Personal Feedback

We take developers from good to great

Intro to Web

Build fast, responsive sites with Bootstrap

Success criteria levels:

A (lowest)

AA (middle)

AAA (highest)

Target Size (Level AAA) - 44x44 px

Performance

Security

Accessibility

Myth:

JavaScript is a scripting, interpreted language

Reality:

JavaScript engine compiles and immediately runs the code

1. Numbers

2. Strings

3. Booleans

1. Addition ( + )

2. Multiplication (*), Substraction (-) and Division ( / )

3. Equality (==, === and !=, !==)

4. Logical operators: and (&&), or (||), and not (!).

Thank you!