LUCAS MENDES
CTO & Founder at Caravane
BLE & Integrations Manager at
ISET
+7 anos experiência
Open Source
Architecture and Software Design
Innovation
Slide 3
Slide 3 text
INTRODUÇÃO À
PROGRAMAÇÃO WEB
Slide 4
Slide 4 text
O QUE É A WEB ?
Slide 5
Slide 5 text
CLIENTE VS SERVIDOR
Slide 6
Slide 6 text
PROTOCOLOS
Slide 7
Slide 7 text
O PROTOCOLO HTTP / HTTPS
Camada de Aplicação OSI
Base da comunicação na Web
Coordenado pela W3C e IETF
Baseado em Métodos de Requisições
Seguro quando implementado utilizando SSL/TLS (HTTPS)
Slide 8
Slide 8 text
REQUISIÇÕES E RESPOSTAS
Slide 9
Slide 9 text
REQUISIÇÕES E RESPOSTAS
URI
Métodos
Cabeçalhos
Corpo
Status
Slide 10
Slide 10 text
INTRODUÇÃO À HTML
Slide 11
Slide 11 text
SINTAXE BÁSICA
Título da Página
Isso é um título
Isso é um parágrafo
Slide 12
Slide 12 text
PRINCIPAIS TAGS HTML
HTML
HEAD
META
TITLE
BODY
Slide 13
Slide 13 text
PRINCIPAIS TAGS HTML
Cabeçalhos (H1, H2, H3, H4, H5…)
Parágrafos
DIV’s
Formulários (form, input, select, textarea, button)
ATRIBUTOS E PROPRIEDADES
color
background
font-family, font-style, font-weight, font-size
text-align
Slide 29
Slide 29 text
EXEMPLO DE HTML COM CSS
* {
color: #000;
}
p {
font-family: sans-serif;
font-size: 100%;
}
p a {
color: blue;
}
Slide 30
Slide 30 text
EXEMPLO DE HTML COM CSS
p.high {
font-weight: bold;
}
p#item {
background-color: #c0392b;
}
h1, h2 {
font-family: serif;
}
Slide 31
Slide 31 text
EXEMPLO DE HTML COM CSS
Título da Página
Isso é um título
Isso é um parágrafo comum
Parágrafo com class high
Parágrafo com id item
Slide 32
Slide 32 text
EXEMPLO DE HTML COM CSS
Slide 33
Slide 33 text
INTRODUÇÃO À JAVASCRIPT
Slide 34
Slide 34 text
O QUE É JAVASCRIPT ?
Interpretado
Imperativa e Estruturada
Dinâmico
Baseado em Objetos
Funcional
Baseado em Protótipos
Assíncrono
Slide 35
Slide 35 text
HISTÓRIA DO JAVASCRIPT
Brendan Eich
Desenvolvido em apenas 10 dias
NetScape Communications Corp
Especificado pelo ECMAScript
NodeJS
Mercado em Crescimento
Slide 36
Slide 36 text
JAVASCRIPT VS JAVA
Slide 37
Slide 37 text
DEVELOPMENT TOOLS
Slide 38
Slide 38 text
BROWSER CONSOLE
Slide 39
Slide 39 text
TERMINAL (NODEJS)
Slide 40
Slide 40 text
LET’S TALK ABOUT CODE
Slide 41
Slide 41 text
LEXICAL STRUCTURE
Slide 42
Slide 42 text
CHARACTER SET
Unicode
Case Sensitivity
Whitespace
Normalization
Slide 43
Slide 43 text
COMMENTS
// This is a single-line comment
/* This is also a comment */
/*
* This is yet another comment
* It has multiple lines.
*/
Slide 44
Slide 44 text
LITERALS
12 // The number twelve
1.2 // The number one point two
"hello world" // A string of text
'Hi' // Another string
true // A boolean value
false // The other boolean value
/javascript/gi // A "regex" literal (for pattern
matching)
null // Absence of an object
{ x: 1, y: 2 } // An object initializer
[1, 2, 3, 4, 5] // An array initializer
Slide 45
Slide 45 text
IDENTIFIERS
Usados para identificar variáveis e funções dentro de um
programa
Sempre deve começar com uma letra, um underscore ( _ ) ou
um sinal de dólar ( $ )
Caracteres subsequentes podem ser letras, dígitos, underscores
ou sinais de dólar
Suporta caracteres especiais do Unicode
Slide 46
Slide 46 text
IDENTIFIERS
// valid identifier names
i
my_variable_name
v13
_dummy
$str
// not recommended
var sí = true;
var π = 3.14;
Slide 47
Slide 47 text
RESERVED WORDS
break delete function return typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try
Slide 48
Slide 48 text
SEMICOLONS ;)
Não obrigatórios, mas altamente recomendados.
Slide 49
Slide 49 text
TYPES, VALUES AND VARIABLES
Slide 50
Slide 50 text
TYPES
Numbers (integer and float)
Strings
Boolean (true and false)
Objects
Arrays
Date (object)
Slide 51
Slide 51 text
VALUES
null
undefined
Slide 52
Slide 52 text
VARIABLES
// A Number
var num = 42;
// Another Number
var num = new Number(42);
// A String
var str = "Hello World";
// Another String
var str = new String("Hello World");
// A Boolean value
var bool = true;
// Another bool
var bool = new Boolean(true);
Slide 53
Slide 53 text
VARIABLES
// Simple object initializer
var obj = { foo: 'bar' };
// Simple array initializer
var arr = [1, 2, 3, 4, 5]
// Another array initializer
var arr = new Array(1, 2, 3, 4, 5);
// A date object
var date = new Date();
Slide 54
Slide 54 text
VARIABLE SCOPE
var scope = 'global';
function checkscope() {
scope = 'local';
}
console.log(scope);
checkscope();
console.log(scope);
Slide 55
Slide 55 text
VARIABLE SCOPE
var scope = 'global';
function checkscope() {
var scope = 'local';
}
console.log(scope);
checkscope();
console.log(scope);
Slide 56
Slide 56 text
EXPRESSIONS AND OPERATORS
Slide 57
Slide 57 text
EXPRESSIONS
Primary Expressions
Object and Array Initializers
Function definition
Property Access
Invocation
Object creation or construction
Slide 58
Slide 58 text
OPERATORS
++ Pre- or Post-increment lval to num
- - Pre- or Post-decrement lval to num
- Negate number num to num
+ Convert to number num to num
~ Invert bits int to int
! Invert boolean value bool to bool
Slide 59
Slide 59 text
OPERATORS
delete Remove a property lval to bool
typeof Type of operand any to str
void Return undefined value any to undef
+, - Add, subtract num,num to num
*, /, % Multiply, divide, remainder num,num to num
+ Concatenate strings str to str
Slide 60
Slide 60 text
OPERATORS
< , <= , > , >=
Compare in numeric
order
num,num to bool
< , <= , > , >=
Compare in alphabetic
order
str,str to bool
instanceof Test object "class" obj,func to bool
in
Test whether property
exists
str,obj to bool
Slide 61
Slide 61 text
OPERATORS
== Test for equality any,any to bool
!= Test for inequality any,any to bool
=== Test for strict equality any,any to bool
!== Test for strict inequality any,any to bool
=
Assign to a variable or
property
lval,any to any
+= , -= , *= , /= Operate and assign lval,any to any
Slide 62
Slide 62 text
OPERATORS
&& Logical AND any,any to any
|| Logical OR any,any to any
? : Choose 2nd or 3rd op any,any to bool
Slide 63
Slide 63 text
STATEMENTS
Slide 64
Slide 64 text
DECLARATION STATEMENTS
// variable declaration statement
a = 1;
var b = 2;
// function declaration statement
function foo() { }
var foo = function() {};
Slide 65
Slide 65 text
CONDITIONALS
if (expression) {
statement
} else if (expression) {
statement
} else {
statement
}
LOOPS
var count = 0;
while (count < 10) {
console.log(count);
count++;
}
Slide 68
Slide 68 text
LOOPS
var count = 0;
do {
console.log(count);
} while (++count < 10);
Slide 69
Slide 69 text
LOOPS
for (var i = 0; i < 10; i++) {
console.log(i);
}
Slide 70
Slide 70 text
LABELS
mainloop: while (token != null) {
// some code here
continue mainloop;
// more code here
}
Slide 71
Slide 71 text
RETURN
function square(x) {
return x * x;
}
var result = square(2);
Slide 72
Slide 72 text
OBJECTS
Slide 73
Slide 73 text
SIMPLE OBJECT INITIALIZER
var myObject = {
// setting some property
myProperty: 'value',
// setting some method
myMethod: function() {
console.log("Hello!");
}
}
// accessing the object property
console.log(myObject.myProperty);
// accessing the object method
myObject.myMethod();
Slide 74
Slide 74 text
OBJECT CONSTRUCTORS
function IMath(num) {
// setting the num to an internal property
this.num = num;
// creating square method
square: function() {
return num * num;
}
}
// initializing object
var math = new IMath(2);
// using the square method
math.square();
Slide 75
Slide 75 text
ARRAYS
Slide 76
Slide 76 text
ARRAY INITIALIZER
// empty array
var arr = [];
// simple array initializer
var arr = [1, 2, 3, 'foo'];
// object way array initializer
var arr = new Array(1, 2, 3, 'foo');
Slide 77
Slide 77 text
HANDLING ARRAYS
// empty array
var arr = [];
// setting a new value to array
arr[0] = 1;
arr.push(2);
// acessing an array value
console.log(arr[0]);
console.log(arr.length);
// removing an array value
arr.pop(0);
arr.pop(1);
Slide 78
Slide 78 text
ITERATING ARRAYS
// initializing the array
var arr = [1, 2, 3, 4, 5, 'foo'];
for (var i=0; i < arr.length; i++) {
console.log(arr[i]);
}
Slide 79
Slide 79 text
ITERATING ARRAYS
// initializing the array
var arr = [1, 2, 3, 4, 5, 'foo'];
for (var i=0; i < arr.length; i++) {
console.log(arr[i]);
}
for (var i in arr) {
console.log(arr[i]);
}
arr.forEach(function (item) {
console.log(item);
});
FUNCTIONS
function name(arg1, arg2, arg3, argN...) {
// do something
return value;
}
Slide 83
Slide 83 text
ANONYMOUS FUNCTIONS
var Func = function(arg1, arg2, arg3, argN...) {
// do something
return value;
}
Func();
Slide 84
Slide 84 text
EVENTS
Slide 85
Slide 85 text
HTML EVENTS
onchange
onclick
onmouseover
onmouseout
onkeydown
onload
Slide 86
Slide 86 text
DOM
Slide 87
Slide 87 text
ACCESSING HTML ELEMENTS
// getting element by id
var send = document.getElementById('send');
// getting element by tag name
var paragraph = document.getElementsByTagName('p');
// getting element by class name
var intro =
document.getElementsByClassName('introduction');
// getting elements by CSS selector
var intro =
document.querySelectorAll('p.introduction');
Slide 88
Slide 88 text
LET’S PRACTICE!
Slide 89
Slide 89 text
THAT’S ALL FOLKS!
Thank you!
Slide 90
Slide 90 text
THANK YOU!
Lucas Mendes
CTO & Founder at Caravane
BLE & Integrations Manager at ISET
[email protected]
devsdmf.io
about.me/devsdmf
github.com/devsdmf
Slides at: bit.ly/devsdmf-pucminjs