Introduction to web programming with JavaScript
37
Introduction to web programming with JavaScript #t11sessions
-
Upload
t11-sessions -
Category
Technology
-
view
299 -
download
3
Transcript of 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 | [email protected]
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?
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/
Serverhttp://www.mothefuckingwebsite.com
Yourbrowser
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 variablesTypes: 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 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)
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';} else if (yourName === 'Barack Obama') { yourName = 'Anonymous';}
JavaScript statements (switch)
var yourName = prompt("Please enter your name", ""); // gets the entered name
switch (yourName) { case '': yourName = 'Anonymous'; break; case 'Barack Obama': yourName = 'Anonymous'; break; default: // all other cases // don’t do anything}
JavaScript statements (for)
var dogs = ["Fluffy", "April", "Archibald"]; // array of dogs
// prints out all the dogsfor (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 loopvar 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
