puc.min.js - Introdução à JavaScript

PUC.MIN.JS Mini-curso de Introdução à JavaScript

LUCAS MENDES CTO & Founder at Caravane BLE & Integrations
Manager at ISET +7 anos experiência Open Source Architecture and Software Design Innovation

INTRODUÇÃO À PROGRAMAÇÃO WEB

O QUE É A WEB ?

CLIENTE VS SERVIDOR

PROTOCOLOS

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)

REQUISIÇÕES E RESPOSTAS

REQUISIÇÕES E RESPOSTAS URI Métodos Cabeçalhos Corpo Status

INTRODUÇÃO À HTML

SINTAXE BÁSICA <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Título
da Página</title> </head> <body> <h1>Isso é um título</h1> <p>Isso é um parágrafo</p> </body> </html>

PRINCIPAIS TAGS HTML HTML HEAD META TITLE BODY

PRINCIPAIS TAGS HTML Cabeçalhos (H1, H2, H3, H4, H5…) Parágrafos
DIV’s Formulários (form, input, select, textarea, button)

EXEMPLO DE CABEÇALHOS HTML <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Titulo da Pagina</title> </head> <body> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> </body> </html>

EXEMPLO DE CABEÇALHOS HTML

EXEMPLO DE PARÁGRAFO HTML <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Título da Página</title> </head> <body> <h1>Este é um cabeçalho</h1> <p>Este é um parágrafo</p> <h2>Este é outro cabeçalho</h2> <p>Este é outro parágrafo</p> </body> </html>

EXEMPLO DE PARÁGRAFO HTML

EXEMPLO DE FORMULÁRIO HTML <!DOCTYPE html> <html lang="en"> <head>...</head> <body>
<h1>Formulário HTML</h1> <form method="POST" action="#"> <label>Input:</label> <input type="text"> <br /> <label>Select:</label> <select> <option>Option</option> </select> <br /> <label>Textarea:</label> <textarea></textarea> <br /> <label>Button</label> <button type="submit">Enviar</button> </form> </body> </html>

EXEMPLO DE FORMULÁRIO HTML

SEMANTICA NO HTML <!DOCTYPE html> <html lang="en"> <head>...</head> <body> <div></div>
<main></main> <section> <header></header> <article></article> <footer></footer> </section> <aside></aside> <nav></nav> </body> </html>

INTRODUÇÃO À CSS

SINTAXE BÁSICA h1 { attr: value; } #item { attr:
value; } .high { attr: value; }

SELETORES

SELETORES * { color: #000; } p { font-family: sans-serif;
font-size: 100%; } p a { color: blue; }

SELETORES p.high { font-weight: bold; } p#item { background-color: #c0392b;
} h1, h2 { font-family: serif; }

ATRIBUTOS E PROPRIEDADES

ATRIBUTOS E PROPRIEDADES width / height background / background-color /
background-image padding margin border

ATRIBUTOS E PROPRIEDADES color background font-family, font-style, font-weight, font-size text-align

EXEMPLO DE HTML COM CSS * { color: #000; }
p { font-family: sans-serif; font-size: 100%; } p a { color: blue; }

EXEMPLO DE HTML COM CSS p.high { font-weight: bold; }
p#item { background-color: #c0392b; } h1, h2 { font-family: serif; }

EXEMPLO DE HTML COM CSS <!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>Título da Página</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Isso é um título</h1> <p>Isso é um parágrafo comum</p> <p class="high">Parágrafo com class high</p> <p id="item">Parágrafo com id item</p> </body> </html>

EXEMPLO DE HTML COM CSS

INTRODUÇÃO À JAVASCRIPT

O QUE É JAVASCRIPT ? Interpretado Imperativa e Estruturada Dinâmico
Baseado em Objetos Funcional Baseado em Protótipos Assíncrono

HISTÓRIA DO JAVASCRIPT Brendan Eich Desenvolvido em apenas 10 dias
NetScape Communications Corp Especiﬁcado pelo ECMAScript NodeJS Mercado em Crescimento

JAVASCRIPT VS JAVA

DEVELOPMENT TOOLS

BROWSER CONSOLE

TERMINAL (NODEJS)

LET’S TALK ABOUT CODE

LEXICAL STRUCTURE

CHARACTER SET Unicode Case Sensitivity Whitespace Normalization

COMMENTS // This is a single-line comment /* This is
also a comment */ /* * This is yet another comment * It has multiple lines. */

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

IDENTIFIERS Usados para identiﬁcar 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

IDENTIFIERS // valid identifier names i my_variable_name v13 _dummy $str
// not recommended var sí = true; var π = 3.14;

RESERVED WORDS break delete function return typeof case do if
switch var catch else in this void continue false instanceof throw while debugger ﬁnally new true with default for null try

SEMICOLONS ;) Não obrigatórios, mas altamente recomendados.

TYPES, VALUES AND VARIABLES

TYPES Numbers (integer and ﬂoat) Strings Boolean (true and false)
Objects Arrays Date (object)

VALUES null undeﬁned

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);

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();

VARIABLE SCOPE var scope = 'global'; function checkscope() { scope
= 'local'; } console.log(scope); checkscope(); console.log(scope);

VARIABLE SCOPE var scope = 'global'; function checkscope() { var
scope = 'local'; } console.log(scope); checkscope(); console.log(scope);

EXPRESSIONS AND OPERATORS

EXPRESSIONS Primary Expressions Object and Array Initializers Function deﬁnition Property
Access Invocation Object creation or construction

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

OPERATORS delete Remove a property lval to bool typeof Type
of operand any to str void Return undeﬁned value any to undef +, - Add, subtract num,num to num *, /, % Multiply, divide, remainder num,num to num + Concatenate strings str to str

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

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

OPERATORS && Logical AND any,any to any || Logical OR
any,any to any ? : Choose 2nd or 3rd op any,any to bool

STATEMENTS

DECLARATION STATEMENTS // variable declaration statement a = 1; var
b = 2; // function declaration statement function foo() { } var foo = function() {};

CONDITIONALS if (expression) { statement } else if (expression) {
statement } else { statement }

CONDITIONALS switch (expression) { case value: statement break; default: statement
}

LOOPS var count = 0; while (count < 10) {
console.log(count); count++; }

LOOPS var count = 0; do { console.log(count); } while
(++count < 10);

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

LABELS mainloop: while (token != null) { // some code
here continue mainloop; // more code here }

RETURN function square(x) { return x * x; } var
result = square(2);

OBJECTS

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();

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();

ARRAYS

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');

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);

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]); }

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); });

ARRAY METHODS join() reverse() sort() concat() slice() push() pop()

FUNCTIONS

FUNCTIONS function name(arg1, arg2, arg3, argN...) { // do something
return value; }

ANONYMOUS FUNCTIONS var Func = function(arg1, arg2, arg3, argN...) {
// do something return value; } Func();

EVENTS

HTML EVENTS onchange onclick onmouseover onmouseout onkeydown onload

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');

LET’S PRACTICE!

THAT’S ALL FOLKS! Thank you!

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

puc.min.js - Introdução à JavaScript

puc.min.js - Introdução à JavaScript

More Decks by Lucas Mendes

Other Decks in Technology

Featured

Transcript