Introduction to web programming with JavaScript

Introduction to web
programming with
JavaScript
#t11sessions

T11 Sessions
● A series of workshops, talks and presentations
from various practical fields
● Once per month
● Future workshops: Introduction to 3D graphics,
Introduction to philosophy etc.
● Inspired by T11, opened for all
● Facebook | t11sessions@gmail.com

Discourse and /me
● Been into this thing for ~10 years, but more actively
involved last ~5 years
● Happily unemployed
● Don’t expect magic - I’m here to give you some basic
knowledge and understanding (nothing is a black box)
● Continuation?
● Ask / Write questions

Discourse and /me
● Been into this thing for ~10 years, but more actively
involved last ~5 years
● Happily unemployed
● Don’t expect magic - I’m here to give you some basic
knowledge and understanding (nothing is a black box)
● Continuation?
● Ask / Write questions
● Task at the end

Backend / Frontend web development - what’s up with
that?
● Backend development is related mostly to the data, data
processing and calculations that are not directly
interacting with the user
● Frontend development is related to the elements of a
website that are visible to the user and that user interacts
with (combination of programming skills and aesthetics)

Backend web development - what’s up with that?

Frontend web development - what’s up with that?

HTML (Hyper Text Markup Language) &
CSS (Cascading Style Sheets)
● HTML - web programming language that tells web
browsers how to structure and present content on a web
page (a, p, h1, h2, lists, header, footer, etc)
● CSS - defines a web page’s layout and in order to beautify
the page with design elements like colors, rounded
corners, gradients, and animation (attached to classes, ids
and so on)

HTML & CSS
<html>
<head>
<title>Motherfucking Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a motherfucking website.</h1>
<p class="alert-text">This is a part of '.alert-text' class and it's painted red (color: #FF0000;)</p>
<p class="alert-text bold-text">This one extends '.alert-text' but it also adds an additional style</p>
</body>
</html>

HTML & CSS
<p class="alert-text">This is a part of '.alert-
text' class and it's obviously painted red
(color: #FF0000;)</p>
.alert-text {
color: #FF0000;
}
This is a part of '.alert-text' class and it's
painted red (color: #FF0000;)

Hey browser, show me that website!
● Simple scenario:
Open your preferable (Chrome, for example) browser, go
to a specific website -> http://motherfuckingwebsite.com/

Server
http://www.mothefuckingwebsite.com
Your
browser
BROWSER MAKES A GET REQUEST TO /
RESPONSE (HTML, JS, CSS, IMAGES)
USER REQUIRES A www.motherfuckingwebsite.com
46.164.50.177 66.147.244.191

index.html style.css
main.jsimage.jpg image_1.jpg
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<img src=”image.jpg”> <img src=”image_1.jpg”>

● JavaScript is not Java!
● Dynamic programming language most commonly used as
part of web websites (interacts with the user, controls the
browser, used for games, form validations etc) - basically
every website today is using JavaScript
● Simple, easy to read and understand and there’s a lot of
resources, which is both good and bad
● No need to setup anything in order to use it
JavaScript introduction

JavaScript - what exactly is it used for?
● Random calculations (1)
● Animations (1, 2, 3)
● Dynamically change colors and other styles (1, 2)
● Form validations
● Some more heavy shit! (1, 2)
● Dynamically load data

Javascript / Browser console
● Chrome / Firefox - right mouse click, then select “Inspect”
(or: CTRL + SHIFT + i)
● Examples: Declare a variable, string length, alert(“Hello
World!”), select elements, simple calculations, inspect and
change element etc.
● copy(someArray.toString());

JavaScript overview
● Variables (String, Number, Boolean, Array, Object)
● Operators (+, -, /, *, =, ===, !, !==, &&, ||)
● Events (associated mostly with user behavior)
● Conditionals (if, if else, switch, for, …)
● Functions (built-in functions + custom ones)
● Comments (/* comment */, // comment)

JavaScript variables
Types: String, Number, Boolean, Array, Object
● Comparable with mathematics (x = 10, y = 1, z = 5)
● var dayOfTheMonth; // declares a variable, undefined
● var dayOfTheMonth = 12; // declares and assigns a
variable, Number
● var monthName = "April"; // declares and assigns, String
● var dogs = ["Fluffy", "April", "Archibald"]; // Array
● var person = { firstName: "April", lastName: "June" }; //
Object

JavaScript operators
● Similar to math
● Basic operators: +, -, /, *
● Assignment operator: =
● Equality operators: ===, !==, <, >
● Logical operators: && (and), || (or) and ! (not)

JavaScript logical operators
● And (&&)
○ true && true == true
○ true && false == false
○ false && true == false
○ false && false == false
● Or (||)
○ true || true == true
○ true || false == true
○ false || true == true
○ false || false == false
● Not (!)
○ !true == false
○ !false == true

JavaScript events
● Completely related to web development, and user
behavior
● You can define what to do when user clicks on a specific
button, selects an a different value in dropdown, gets
focus into a specific element and so on
● You can register them either in HTML or in JS

JavaScript statements (if)
var yourName = prompt("Please enter your name", ""); // gets the entered name
// if you don't provide a name, you'll become "Anonymous"
if (yourName === '') {
yourName = 'Anonymous';
}

JavaScript statements (if else)
// if you don't provide a name, you'll become "Anonymous"
if (yourName === '') {
} else if (yourName === 'Barack Obama') {
}

JavaScript statements (switch)
switch (yourName) {
case '':
break;
case 'Barack Obama':
break;
default: // all other cases
// don’t do anything
}

JavaScript statements (for)
var dogs = ["Fluffy", "April", "Archibald"]; // array of dogs
// prints out all the dogs
for (var i = 0; i < dogs.length; i++) {
alert(dogs[i]);
}
0 1 2

JavaScript statements (while)
var dogs = ["Fluffy", "April", "Archibald"]; // array of dogs
// does the same as for loop
var i = 0;
while (i < dogs.length) {
alert(dogs[i]);
i++;
}
0 1 2

JavaScript functions
● Closely connected with mathematics
● Built in functions (String has length, substring, text can be
converted into Number etc)
● Custom functions (write whatever you want)

JavaScript functions (examples)
Math
x2
(x - input)
x+y (x, y - inputs)
x + y / z (x, y, z - inputs)
JavaScript
function square(x) {
return x*x;
}
function addition(x, y) {
return x + y;
}
function randomFormula(x, y, z) {
return (x + y) / z;
}
JavaScript call
square(2); // 4
addition(4,4); // 8
randomFormula(5,5,2); // 5

JavaScript functions (examples)
Math
F = 9/5 * C + 32 (C - input)
C = 5/9 * (F - 32) (F - input)
D = b2
- 4*a*c
JavaScript
function celsiusToFahrenheit(celsius) {
return ((9 / 5) * celsius) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
function discriminant(a, b, c) {
return Math.pow(b,2) - (4 * a * c);
}
JavaScript call
celsiusToFahrenheit(30); // 86
fahrenheitToCelsius(77); // 25
discriminant(2,2,2); // -12

JavaScript vs. jQuery
● jQuery is basically just a wrapper for JavaScript, that
simplifies and beautifies the code
● document.getElementById(“test”) -> $(“#test”)
● document.getElementsByClassName(“test”) -> $(“.test”)
● Can be useful, but don’t rush :)

Tools
● For writing code: Sublime Text or Atom or Notepad++
● Write code online: JSFiddle
● Web browser by choice (recommendation: Chrome) and
browser console
● Versioning: Git and Github
● Simple Python server (for later use)

Where and how to continue?
● Codecademy (1, 2, 3, 4, overview)
● Coursera (1, 2, 3, 4, 5)
● Quick tutorials and exercises (1, 2, 3)
● 20 things I’ve learned about browsers and web
● Random JavaScript examples (1, 2, 3)
● Start your own project!
● Real life courses (1)
● Google, a lot! Beware: you’ll find a lot of bad examples online

Tasks - how to deal with it?
● Download .zip file
○ index.html
○ style.css
○ main.js
○ images/image.jpg
○ images/image_1.jpg

Tasks - how to deal with it?
● Download .zip file
● Export files to /home/dev/t11sessions or similar directory
● Get Sublime Text or similar text/code editor
● Open index.html in Sublime Text and in preferable browser
(Open with…, then select preferable app)
● Observe index.html (both code and browser), try to
change/update things and go through TODO tasks
● Open main.js and style.css, read comments and TODO tasks

Thanks for your attention
peric.drazhen@gmail.com
@dperitch

Introduction to web programming with JavaScript