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

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

Mini-curso de introdução à JavaScript ministrado na Escola de Férias da Ciência da Computação PUC Minas

7a736764e6d6c830c049bdc2be34ec19?s=128

Lucas Mendes

December 11, 2015
Tweet

Transcript

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

  2. LUCAS MENDES CTO & Founder at Caravane BLE & Integrations

    Manager at ISET +7 anos experiência Open Source Architecture and Software Design Innovation
  3. INTRODUÇÃO À PROGRAMAÇÃO WEB

  4. O QUE É A WEB ?

  5. CLIENTE VS SERVIDOR

  6. PROTOCOLOS

  7. 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)
  8. REQUISIÇÕES E RESPOSTAS

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

  10. INTRODUÇÃO À HTML

  11. 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>
  12. PRINCIPAIS TAGS HTML HTML HEAD META TITLE BODY

  13. PRINCIPAIS TAGS HTML Cabeçalhos (H1, H2, H3, H4, H5…) Parágrafos

    DIV’s Formulários (form, input, select, textarea, button)
  14. 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>
  15. EXEMPLO DE CABEÇALHOS HTML

  16. 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>
  17. EXEMPLO DE PARÁGRAFO HTML

  18. 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>
  19. EXEMPLO DE FORMULÁRIO HTML

  20. 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>
  21. INTRODUÇÃO À CSS

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

    value; } .high { attr: value; }
  23. SELETORES

  24. SELETORES * { color: #000; } p { font-family: sans-serif;

    font-size: 100%; } p a { color: blue; }
  25. SELETORES p.high { font-weight: bold; } p#item { background-color: #c0392b;

    } h1, h2 { font-family: serif; }
  26. ATRIBUTOS E PROPRIEDADES

  27. ATRIBUTOS E PROPRIEDADES width / height background / background-color /

    background-image padding margin border
  28. ATRIBUTOS E PROPRIEDADES color background font-family, font-style, font-weight, font-size text-align

  29. EXEMPLO DE HTML COM CSS * { color: #000; }

    p { font-family: sans-serif; font-size: 100%; } p a { color: blue; }
  30. EXEMPLO DE HTML COM CSS p.high { font-weight: bold; }

    p#item { background-color: #c0392b; } h1, h2 { font-family: serif; }
  31. 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>
  32. EXEMPLO DE HTML COM CSS

  33. INTRODUÇÃO À JAVASCRIPT

  34. O QUE É JAVASCRIPT ? Interpretado Imperativa e Estruturada Dinâmico

    Baseado em Objetos Funcional Baseado em Protótipos Assíncrono
  35. HISTÓRIA DO JAVASCRIPT Brendan Eich Desenvolvido em apenas 10 dias

    NetScape Communications Corp Especificado pelo ECMAScript NodeJS Mercado em Crescimento
  36. JAVASCRIPT VS JAVA

  37. DEVELOPMENT TOOLS

  38. BROWSER CONSOLE

  39. TERMINAL (NODEJS)

  40. LET’S TALK ABOUT CODE

  41. LEXICAL STRUCTURE

  42. CHARACTER SET Unicode Case Sensitivity Whitespace Normalization

  43. COMMENTS // This is a single-line comment /* This is

    also a comment */ /* * This is yet another comment * It has multiple lines. */
  44. 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
  45. 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
  46. IDENTIFIERS // valid identifier names i my_variable_name v13 _dummy $str

    // not recommended var sí = true; var π = 3.14;
  47. 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
  48. SEMICOLONS ;) Não obrigatórios, mas altamente recomendados.

  49. TYPES, VALUES AND VARIABLES

  50. TYPES Numbers (integer and float) Strings Boolean (true and false)

    Objects Arrays Date (object)
  51. VALUES null undefined

  52. 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);
  53. 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();
  54. VARIABLE SCOPE var scope = 'global'; function checkscope() { scope

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

    scope = 'local'; } console.log(scope); checkscope(); console.log(scope);
  56. EXPRESSIONS AND OPERATORS

  57. EXPRESSIONS Primary Expressions Object and Array Initializers Function definition Property

    Access Invocation Object creation or construction
  58. 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
  59. 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
  60. 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
  61. 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
  62. OPERATORS && Logical AND any,any to any || Logical OR

    any,any to any ? : Choose 2nd or 3rd op any,any to bool
  63. STATEMENTS

  64. DECLARATION STATEMENTS // variable declaration statement a = 1; var

    b = 2; // function declaration statement function foo() { } var foo = function() {};
  65. CONDITIONALS if (expression) { statement } else if (expression) {

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

    }
  67. LOOPS var count = 0; while (count < 10) {

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

    (++count < 10);
  69. LOOPS for (var i = 0; i < 10; i++)

    { console.log(i); }
  70. LABELS mainloop: while (token != null) { // some code

    here continue mainloop; // more code here }
  71. RETURN function square(x) { return x * x; } var

    result = square(2);
  72. OBJECTS

  73. 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();
  74. 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();
  75. ARRAYS

  76. 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');
  77. 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);
  78. 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]); }
  79. 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); });
  80. ARRAY METHODS join() reverse() sort() concat() slice() push() pop()

  81. FUNCTIONS

  82. FUNCTIONS function name(arg1, arg2, arg3, argN...) { // do something

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

    // do something return value; } Func();
  84. EVENTS

  85. HTML EVENTS onchange onclick onmouseover onmouseout onkeydown onload

  86. DOM

  87. 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');
  88. LET’S PRACTICE!

  89. THAT’S ALL FOLKS! Thank you!

  90. THANK YOU! Lucas Mendes CTO & Founder at Caravane 


    BLE & Integrations Manager at ISET devsdmf@gmail.com
 devsdmf.io
 about.me/devsdmf
 github.com/devsdmf
 
 
 Slides at: bit.ly/devsdmf-pucminjs