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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to web programming with JavaScript (20)

Recently uploaded (20)

Introduction to web programming with JavaScript

Editor's Notes