├── .gitignore ├── 03-Javascript-Fundamentos ├── aritimetico.js ├── arrays.js ├── atribuicao.js ├── booleanos.js ├── comentario.js ├── destructuring.js ├── destructuring2.js ├── destructuring3.js ├── destructuring4.js ├── erro.js ├── funcao1.js ├── funcao2.js ├── funcaoEmQuaseTudo.js ├── hoisting.js ├── logicos.js ├── math.js ├── notacaoPonto.js ├── nullUnderfined.js ├── numeros.js ├── objeto.js ├── objeto2.js ├── organizacao.js ├── parNomeValor.js ├── relacionais.js ├── string.js ├── templateString.js ├── ternario.js ├── tipagemFraca.js ├── unarios.js ├── usandoLet1.js ├── usandoVar.js ├── usandoVar2.js ├── usandoVarEmLoop.js ├── usandoVarEmLoop2.js └── variaveisEConstantes.js ├── 04-Javascript-Estruturas-de-Controle ├── breackContinue.js ├── dowhile.js ├── for.js ├── for_in.js ├── ifElse_if.js ├── if_1.js ├── if_2.js ├── ifelse.js ├── switch.js └── while.js ├── 05-Javascript-Funcao ├── IIFE.js ├── arrowFunction.js ├── arrowFunction2.js ├── arrowFunction3y.js ├── callApply.js ├── callback1.js ├── callback2.js ├── callback3.js ├── cidacaoPrimeiraClasse.js ├── classVsFactory.js ├── closure.js ├── contextoLexico.js ├── desafioFuncaoConstrutora.js ├── factory.js ├── factory2.js ├── funcaoAnonima.js ├── funcaoConstrutora.js ├── paramPadrao.js ├── paramRetornoSaoOpcionais.js ├── paramvariaveis.js ├── thisEBind.js ├── thisEBind2.js └── tiposDeclaracao.js ├── 06-Javascript-Objeto ├── 086-Introducao-ao-OO.js ├── ObjetoRevisao.js └── criandoObjetos.js ├── 2019_README.md ├── README.md └── img └── 01-01-introducao.PNG /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/git,vim,node,linux,intellij+all,visualstudiocode 3 | # Edit at https://www.gitignore.io/?templates=git,vim,node,linux,intellij+all,visualstudiocode 4 | 5 | ### Git ### 6 | # Created by git for backups. To disable backups in Git: 7 | # $ git config --global mergetool.keepBackup false 8 | *.orig 9 | 10 | # Created by git when using merge tools for conflicts 11 | *.BACKUP.* 12 | *.BASE.* 13 | *.LOCAL.* 14 | *.REMOTE.* 15 | *_BACKUP_*.txt 16 | *_BASE_*.txt 17 | *_LOCAL_*.txt 18 | *_REMOTE_*.txt 19 | 20 | ### Intellij+all ### 21 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 22 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 23 | 24 | # User-specific stuff 25 | .idea/**/workspace.xml 26 | .idea/**/tasks.xml 27 | .idea/**/usage.statistics.xml 28 | .idea/**/dictionaries 29 | .idea/**/shelf 30 | 31 | # Generated files 32 | .idea/**/contentModel.xml 33 | 34 | # Sensitive or high-churn files 35 | .idea/**/dataSources/ 36 | .idea/**/dataSources.ids 37 | .idea/**/dataSources.local.xml 38 | .idea/**/sqlDataSources.xml 39 | .idea/**/dynamic.xml 40 | .idea/**/uiDesigner.xml 41 | .idea/**/dbnavigator.xml 42 | 43 | # Gradle 44 | .idea/**/gradle.xml 45 | .idea/**/libraries 46 | 47 | # Gradle and Maven with auto-import 48 | # When using Gradle or Maven with auto-import, you should exclude module files, 49 | # since they will be recreated, and may cause churn. Uncomment if using 50 | # auto-import. 51 | # .idea/modules.xml 52 | # .idea/*.iml 53 | # .idea/modules 54 | 55 | # CMake 56 | cmake-build-*/ 57 | 58 | # Mongo Explorer plugin 59 | .idea/**/mongoSettings.xml 60 | 61 | # File-based project format 62 | *.iws 63 | 64 | # IntelliJ 65 | out/ 66 | 67 | # mpeltonen/sbt-idea plugin 68 | .idea_modules/ 69 | 70 | # JIRA plugin 71 | atlassian-ide-plugin.xml 72 | 73 | # Cursive Clojure plugin 74 | .idea/replstate.xml 75 | 76 | # Crashlytics plugin (for Android Studio and IntelliJ) 77 | com_crashlytics_export_strings.xml 78 | crashlytics.properties 79 | crashlytics-build.properties 80 | fabric.properties 81 | 82 | # Editor-based Rest Client 83 | .idea/httpRequests 84 | 85 | # Android studio 3.1+ serialized cache file 86 | .idea/caches/build_file_checksums.ser 87 | 88 | # JetBrains templates 89 | **___jb_tmp___ 90 | 91 | ### Intellij+all Patch ### 92 | # Ignores the whole .idea folder and all .iml files 93 | # See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360 94 | 95 | .idea/ 96 | 97 | # Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023 98 | 99 | *.iml 100 | modules.xml 101 | .idea/misc.xml 102 | *.ipr 103 | 104 | # Sonarlint plugin 105 | .idea/sonarlint 106 | 107 | ### Linux ### 108 | *~ 109 | 110 | # temporary files which can be created if a process still has a handle open of a deleted file 111 | .fuse_hidden* 112 | 113 | # KDE directory preferences 114 | .directory 115 | 116 | # Linux trash folder which might appear on any partition or disk 117 | .Trash-* 118 | 119 | # .nfs files are created when an open file is removed but is still being accessed 120 | .nfs* 121 | 122 | ### Node ### 123 | # Logs 124 | logs 125 | *.log 126 | npm-debug.log* 127 | yarn-debug.log* 128 | yarn-error.log* 129 | lerna-debug.log* 130 | 131 | # Diagnostic reports (https://nodejs.org/api/report.html) 132 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 133 | 134 | # Runtime data 135 | pids 136 | *.pid 137 | *.seed 138 | *.pid.lock 139 | 140 | # Directory for instrumented libs generated by jscoverage/JSCover 141 | lib-cov 142 | 143 | # Coverage directory used by tools like istanbul 144 | coverage 145 | 146 | # nyc test coverage 147 | .nyc_output 148 | 149 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 150 | .grunt 151 | 152 | # Bower dependency directory (https://bower.io/) 153 | bower_components 154 | 155 | # node-waf configuration 156 | .lock-wscript 157 | 158 | # Compiled binary addons (https://nodejs.org/api/addons.html) 159 | build/Release 160 | 161 | # Dependency directories 162 | node_modules/ 163 | jspm_packages/ 164 | 165 | # TypeScript v1 declaration files 166 | typings/ 167 | 168 | # Optional npm cache directory 169 | .npm 170 | 171 | # Optional eslint cache 172 | .eslintcache 173 | 174 | # Optional REPL history 175 | .node_repl_history 176 | 177 | # Output of 'npm pack' 178 | *.tgz 179 | 180 | # Yarn Integrity file 181 | .yarn-integrity 182 | 183 | # dotenv environment variables file 184 | .env 185 | .env.test 186 | 187 | # parcel-bundler cache (https://parceljs.org/) 188 | .cache 189 | 190 | # next.js build output 191 | .next 192 | 193 | # nuxt.js build output 194 | .nuxt 195 | 196 | # vuepress build output 197 | .vuepress/dist 198 | 199 | # Serverless directories 200 | .serverless/ 201 | 202 | # FuseBox cache 203 | .fusebox/ 204 | 205 | # DynamoDB Local files 206 | .dynamodb/ 207 | 208 | ### Vim ### 209 | # Swap 210 | [._]*.s[a-v][a-z] 211 | [._]*.sw[a-p] 212 | [._]s[a-rt-v][a-z] 213 | [._]ss[a-gi-z] 214 | [._]sw[a-p] 215 | 216 | # Session 217 | Session.vim 218 | 219 | # Temporary 220 | .netrwhist 221 | # Auto-generated tag files 222 | tags 223 | # Persistent undo 224 | [._]*.un~ 225 | 226 | ### VisualStudioCode ### 227 | .vscode/* 228 | !.vscode/settings.json 229 | !.vscode/tasks.json 230 | !.vscode/launch.json 231 | !.vscode/extensions.json 232 | 233 | ### VisualStudioCode Patch ### 234 | # Ignore all local history of files 235 | .history 236 | 237 | # End of https://www.gitignore.io/api/git,vim,node,linux,intellij+all,visualstudiocode -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/aritimetico.js: -------------------------------------------------------------------------------- 1 | const [a,b,c,d] = [3,5,1,15] 2 | 3 | const soma = a + b + c + d 4 | const sub = d - c 5 | const mult = a * b 6 | const div = d / a 7 | const modulo = a % 2 8 | 9 | console.log(soma, sub, mult, div, modulo) // 24 14 15 5 1 -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/arrays.js: -------------------------------------------------------------------------------- 1 | const valores = [7.7, 8.8, 6.3, 2.3] 2 | console.log(valores[0], valores[3]) 3 | console.log(valores[4]) 4 | 5 | valores[4] = 10 6 | console.log(valores) 7 | console.log(valores.length) 8 | 9 | valores.push({id:3}, false, null, 'teste') 10 | console.log(valores) 11 | 12 | valores.pop(valores.pop()) 13 | delete valores[0] 14 | console.log(valores) 15 | 16 | console.log(typeof valores) 17 | 18 | /* 19 | 7.7 2.3 20 | undefined 21 | [ 7.7, 8.8, 6.3, 2.3, 10 ] 22 | 5 23 | [ 24 | 7.7, 8.8, 25 | 6.3, 2.3, 26 | 10, { id: 3 }, 27 | false, null, 28 | 'teste' 29 | ] 30 | [ <1 empty item>, 8.8, 6.3, 2.3, 10, { id: 3 }, false ] 31 | object 32 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/atribuicao.js: -------------------------------------------------------------------------------- 1 | const a = 7 2 | let b = 3 3 | 4 | b += a // b = b + a 5 | console.log(b) 6 | 7 | b -= 4 // b = b - 4 8 | console.log(b) 9 | 10 | b *= 2 // b = b * 2 11 | console.log(b) 12 | 13 | b /= 2 // b = b / 2 14 | console.log(b) 15 | 16 | b %= 2 // b = b % a 17 | console.log(b) 18 | /* 19 | 10 20 | 6 21 | 12 22 | 6 23 | 0 24 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/booleanos.js: -------------------------------------------------------------------------------- 1 | let isAtivo = false 2 | console.log(isAtivo) 3 | 4 | isAtivo = true 5 | console.log(isAtivo) 6 | 7 | isAtivo = 1 8 | console.log(!!isAtivo) 9 | 10 | console.log('os verdadeiros... ') 11 | console.log(!!3) 12 | console.log(!!-1) 13 | console.log(!!' ') 14 | console.log(!!'TEXTO') 15 | console.log(!![]) 16 | console.log(!!{}) 17 | console.log(!!Infinity) 18 | console.log(!!(isAtivo = true)) 19 | 20 | console.log('os falsos...') 21 | console.log(!!0) 22 | console.log(!!'') 23 | console.log(!!null) 24 | console.log(!!NaN) 25 | console.log(!!undefined) 26 | console.log(!!(isAtivo = false)) 27 | 28 | console.log('finalizando...') 29 | console.log(!!('' || null || 0 || ' ')) 30 | 31 | let nome = '' 32 | console.log(nome || 'Desconhecido') 33 | 34 | /* 35 | 36 | false 37 | true 38 | true 39 | os verdadeiros... 40 | true 41 | true 42 | true 43 | true 44 | true 45 | true 46 | true 47 | true 48 | os falsos... 49 | false 50 | false 51 | false 52 | false 53 | false 54 | false 55 | finalizando... 56 | true 57 | Desconhecido 58 | 59 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/comentario.js: -------------------------------------------------------------------------------- 1 | // uma linha 2 | 3 | /* 4 | comentário 5 | de duas 6 | Linhas 7 | */ 8 | 9 | -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/destructuring.js: -------------------------------------------------------------------------------- 1 | // novo recurso do ES2015 2 | 3 | const pessoa = { 4 | nome: 'José', 5 | idade: 35, 6 | endereco: { 7 | rua: 'Rua tal tal tal', 8 | numero: 33 9 | } 10 | } 11 | 12 | const {nome, idade} = pessoa 13 | console.log(nome, idade) 14 | 15 | const {nome: n, idade: i} = pessoa 16 | console.log(n, i) 17 | 18 | const {sobrenome, humor = true} = pessoa 19 | console.log(sobrenome, humor) 20 | 21 | const {endereco: {rua, numero, cep}} = pessoa 22 | console.log(rua, numero, cep) 23 | 24 | const {conta:{ag, cc}} = pessoa 25 | console.log(ad, cc) 26 | 27 | /* 28 | José 35 29 | José 35 30 | undefined true 31 | Rua tal tal tal 33 undefined 32 | 33 | const {conta:{ag, cc}} = pessoa 34 | ^ 35 | TypeError: Cannot destructure property `ag` of 'undefined' or 'null'. 36 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/destructuring2.js: -------------------------------------------------------------------------------- 1 | const [a] = [10] 2 | console.log(a) 3 | 4 | //const [n1,n2, n3, n4 = 22] = [10,30,9,9] 5 | //console.log(n1,n2,n3,n4) 6 | 7 | const [n1, , n3, , n5, n6 = 22] = [10,30,9,9] 8 | console.log(n1,n3,n5,n6) 9 | // 10 9 undefined 22 10 | 11 | const [,[,nota]] = [[,8,8],[9,6,8]] 12 | console.log(nota) 13 | /* 14 | 10 15 | 10 30 9 9 16 | 6 17 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/destructuring3.js: -------------------------------------------------------------------------------- 1 | function rand({min = 0, max = 1000}){ 2 | const valor = Math.random() * (max - min) + min 3 | return Math.floor(valor) 4 | } 5 | const obj = {max: 50, min: 40} 6 | console.log(rand(obj)) 7 | 8 | console.log(rand({min: 955})) 9 | console.log(rand({})) 10 | console.log(rand()) 11 | 12 | /* 13 | 44 14 | 966 15 | 819 16 | 17 | function rand({min = 0, max = 1000}){ 18 | ^ 19 | TypeError: Cannot destructure property `min` of 'undefined' or 'null'. 20 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/destructuring4.js: -------------------------------------------------------------------------------- 1 | function rand([min = 0, max =1000]){ 2 | if(min > max) [min, max] = [max, min] 3 | const valor = Math.random() * (max - min) + min 4 | return Math.floor(valor) 5 | } 6 | console.log(rand([50,40])) 7 | console.log(rand([992])) 8 | console.log(rand([,10])) 9 | console.log(rand([])) 10 | //console.log(rand()) // erro -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/erro.js: -------------------------------------------------------------------------------- 1 | function tratarErrorElancar(erro){ 2 | //throw new Error('...') 3 | //throw true 4 | //throw 10 5 | //throw 'Mensagem' 6 | throw { 7 | nome: erro.name, 8 | msg: erro.message, 9 | date: new Date 10 | } 11 | } 12 | 13 | function imprimirNomeGritando(obj){ 14 | try{ 15 | console.log(obj.name.toUpperCase() + '!!!') 16 | }catch (e){ 17 | tratarErrorElancar(e) 18 | }finally{ 19 | console.log('Final...') 20 | } 21 | } 22 | const obj = {nome: 'José'} //erro 23 | imprimirNomeGritando(obj) -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/funcao1.js: -------------------------------------------------------------------------------- 1 | //função sem retorno 2 | function imprimirSoma(a,b){ 3 | console.log(a + b) 4 | } 5 | imprimirSoma(2,3) 6 | imprimirSoma(2) 7 | imprimirSoma(12, 3, 4,5 ,6, 7,8 ,4 ) 8 | imprimirSoma() 9 | 10 | /* 11 | 5 12 | NaN 13 | 15 14 | NaN 15 | */ 16 | 17 | // função com retorno 18 | function soma(a,b = 0){ 19 | return a + b 20 | } 21 | console.log(soma(2)) 22 | console.log(soma(2, 5)) 23 | /* 24 | 2 25 | 7 26 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/funcao2.js: -------------------------------------------------------------------------------- 1 | // Armazenando uma função em uma variável 2 | const imprimirSoma = function (a, b){ 3 | console.log(a + b) 4 | } 5 | imprimirSoma(2,4) 6 | 7 | // Armazenando uma função arrow em uma variável 8 | const soma = (a,b) => { 9 | return a + b 10 | } 11 | console.log(soma(2,2)) 12 | 13 | // Retorno inplícito 14 | const subtracao = (a,b) => a - b 15 | console.log(subtracao(4,2)) 16 | 17 | const imprimir2 = a => console.log(a) 18 | imprimir2("Teste!") 19 | 20 | /* 21 | 6 22 | 4 23 | 2 24 | Teste! 25 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/funcaoEmQuaseTudo.js: -------------------------------------------------------------------------------- 1 | console.log(typeof Object) 2 | 3 | class Produto{} 4 | console.log(typeof Produto) 5 | 6 | /* 7 | function 8 | function 9 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/hoisting.js: -------------------------------------------------------------------------------- 1 | console.log(' a = ' , a) 2 | var a = 22 3 | console.log(' a = ' , a) 4 | 5 | console.log(' b = ' , b) 6 | let b = 88 7 | console.log(' b = ' , b) 8 | /* 9 | a = undefined 10 | a = 22 11 | 12 | console.log(' b = ' , b) // error 13 | ReferenceError: Cannot access 'b' before initialization 14 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/logicos.js: -------------------------------------------------------------------------------- 1 | function compras(trabalho1, trabalho2){ 2 | const compraSorvete = trabalho1 || trabalho2 3 | const compraTV50 = trabalho1 && trabalho2 4 | //const compraTV32 = !!(trabalho1 ^ trabalho2) // bitwise XOR 5 | const compraTV32 = trabalho1 != trabalho2 6 | const manterSaudavel = !compraSorvete // operador unário 7 | 8 | return { compraSorvete, compraTV50, compraTV32, manterSaudavel} 9 | } 10 | 11 | console.log(compras(true, true)) 12 | console.log(compras(true, false)) 13 | console.log(compras(false, true)) 14 | console.log(compras(false, false)) 15 | 16 | /* 17 | { 18 | compraSorvete: true, 19 | compraTV50: true, 20 | compraTV32: false, 21 | manterSaudavel: false 22 | } 23 | { 24 | compraSorvete: true, 25 | compraTV50: false, 26 | compraTV32: true, 27 | manterSaudavel: false 28 | } 29 | { 30 | compraSorvete: true, 31 | compraTV50: false, 32 | compraTV32: true, 33 | manterSaudavel: false 34 | } 35 | { 36 | compraSorvete: false, 37 | compraTV50: false, 38 | compraTV32: false, 39 | manterSaudavel: true 40 | } 41 | */ 42 | 43 | -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/math.js: -------------------------------------------------------------------------------- 1 | const raio = 5.6 2 | const area = Math.PI * Math.pow(raio, 2) 3 | 4 | console.log(area) 5 | console.log(typeof Math) 6 | 7 | /* 8 | 98.5203456165759 9 | object 10 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/notacaoPonto.js: -------------------------------------------------------------------------------- 1 | console.log(Math.ceil(6.1)) 2 | 3 | const obj1 = {} 4 | 5 | obj1.nome = 'Bola' 6 | // obj1['nome'] = 'Bola 2' 7 | console.log(obj1.nome) 8 | 9 | function Obj(nome){ 10 | this.nome = nome 11 | this.exec = function(){ 12 | console.log('Exec... Obj') 13 | } 14 | } 15 | const obj2 = new Obj('Cadeira') 16 | const obj3 = new Obj('Mesa') 17 | 18 | console.log(obj2.nome) 19 | console.log(obj3.nome) 20 | obj3.exec() 21 | 22 | /* 23 | 7 24 | Bola 25 | Cadeira 26 | Mesa 27 | Exec... Obj 28 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/nullUnderfined.js: -------------------------------------------------------------------------------- 1 | let valor // não inicializada 2 | console.log(valor) 3 | 4 | valor = null 5 | console.log(valor) 6 | // console.log(valor.toString) // Erro! 7 | /* 8 | undefined 9 | null 10 | */ 11 | 12 | const produto = {} 13 | console.log(produto.preco) 14 | console.log(produto) 15 | 16 | produto.preco = 3.99 17 | console.log(produto) 18 | 19 | produto.preco = undefined // Evitar atribuir Uniderfined 20 | console.log(!!produto.preco) 21 | //delete produto.preco 22 | console.log(produto) 23 | /* 24 | undefined 25 | {} 26 | { preco: 3.99 } 27 | false 28 | {} 29 | */ 30 | 31 | produto.preco = null // sem preço 32 | console.log(!!produto.preco) 33 | console.log(!!produto) 34 | /* 35 | false 36 | true 37 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/numeros.js: -------------------------------------------------------------------------------- 1 | const peso1 = 1.0 2 | const peso2 = Number('2.0') 3 | 4 | console.log(peso1, peso2) 5 | console.log(Number.isInteger(peso1)) 6 | console.log(Number.isInteger(peso2)) 7 | 8 | const avalia1 = 9.234 9 | const avalia2 = 5.212 10 | 11 | const total = avalia1 * peso1 + avalia2 * peso2 12 | const media = total / (peso1 + peso2) 13 | 14 | console.log(media.toFixed(2)) 15 | console.log(media.toString(2)) // em binário 16 | console.log(typeof media) 17 | console.log(typeof total) 18 | 19 | /* 20 | 1 2 21 | true 22 | true 23 | 6.55 24 | 110.1000110101111011100100000000101011101100001101 25 | number 26 | number 27 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/objeto.js: -------------------------------------------------------------------------------- 1 | const prod1 = {} 2 | prod1.nome = 'celular Ultra mega' 3 | prod1.preco = 3344.88 4 | prod1['Desconto Legal'] = 0.40 // evitar atributos com espaços 5 | 6 | console.log(prod1) 7 | 8 | const prod2 = { 9 | nome: 'Camisa Polo', 10 | preco: 90.99 11 | } 12 | console.log(prod2) 13 | 14 | /* 15 | { nome: 'celular Ultra mega', preco: 3344.88, 'Desconto Legal': 0.4 } 16 | { nome: 'Camisa Polo', preco: 90.99 } 17 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/objeto2.js: -------------------------------------------------------------------------------- 1 | console.log(typeof Object) 2 | console.log(typeof new Object) 3 | 4 | const Cliente = function(){} 5 | console.log(typeof Cliente) 6 | console.log(typeof new Cliente) 7 | 8 | class Produto{} 9 | console.log(typeof Produto) 10 | console.log(typeof new Produto) 11 | /* 12 | function 13 | object 14 | function 15 | object 16 | function 17 | object 18 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/organizacao.js: -------------------------------------------------------------------------------- 1 | console.log("teste") // não usar ";" 2 | { 3 | { 4 | console.log("Olá mundo"); 5 | console.log("Olá mundo") 6 | 7 | } 8 | } -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/parNomeValor.js: -------------------------------------------------------------------------------- 1 | // par nome/valor 2 | const saudacao = 'opa!' // contexto léxico 1 3 | 4 | function exec(){ 5 | const saudacao = 'Função Exec' // contexto léxico 2 6 | return saudacao 7 | } 8 | 9 | // objetos são grupos aninhados de pares nome valor 10 | const cliente = { 11 | nome : 'José', 12 | idade : 35, 13 | pesio : 90, 14 | endereco : { 15 | rua: 'Rua tal tal ', 16 | numero: 376 17 | } 18 | } 19 | 20 | console.log(saudacao) 21 | console.log(exec()) 22 | console.log(cliente) 23 | /* 24 | opa! 25 | Função Exec 26 | { 27 | nome: 'José', 28 | idade: 35, 29 | pesio: 90, 30 | endereco: { rua: 'Rua tal tal ', numero: 376 } 31 | } 32 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/relacionais.js: -------------------------------------------------------------------------------- 1 | console.log('01) ', '1' == 1) // 01) true 2 | console.log('02) ', '1' === 1) // 02) false 3 | console.log('03) ', '3' != 3) // 03) false 4 | console.log('04) ', '3' !== 3) // 04) true 5 | 6 | console.log('05) ', 3 < 2) //false 7 | console.log('06) ', 3 > 2) // true 8 | console.log('07) ', 3 <= 2) // false 9 | console.log('08) ', 3 >= 2) // true 10 | 11 | const d1 = new Date(0) 12 | const d2 = new Date(0) 13 | 14 | console.log('9) ', d1 === d2) // false 15 | console.log('10) ', d1 == d2) // false 16 | console.log('11) ', d1.getTime() === d2.getTime()) // true 17 | 18 | console.log('12) ', undefined == null) // true 19 | console.log('13) ', undefined === null) // false 20 | -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/string.js: -------------------------------------------------------------------------------- 1 | const escola = "Cod3r" 2 | 3 | console.log(escola.charAt(4)) 4 | console.log(escola.charAt(5)) 5 | console.log(escola.charCodeAt(3)) 6 | console.log(escola.indexOf('3')) 7 | 8 | console.log(escola.substring(1)) 9 | console.log(escola.substring(0,3)) 10 | 11 | console.log('Escola '.concat(escola).concat("!")) 12 | console.log('Escola ' + escola + "!") 13 | console.log(escola.replace(3, 'r')) 14 | 15 | console.log('Ana, Maria,Jose'.split(',')) 16 | 17 | /* 18 | r 19 | 20 | 51 21 | 3 22 | od3r 23 | Cod 24 | Escola Cod3r! 25 | Escola Cod3r! 26 | Codrr 27 | [ 'Ana', ' Maria', 'Jose' ] 28 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/templateString.js: -------------------------------------------------------------------------------- 1 | const nome = 'Jose' 2 | const contatenacao = 'Olá ' + nome + '!' 3 | const template = ` 4 | Olá 5 | ${nome}!` 6 | 7 | console.log(contatenacao , template) 8 | 9 | // expressões 10 | console.log(` 1 + 1 = ${1+1}`) 11 | 12 | const up = texto => texto.toUpperCase() 13 | console.log(`Fale ${up('cuidado')}`) 14 | 15 | /* 16 | Olá Jose! 17 | Olá 18 | Jose! 19 | 1 + 1 = 2 20 | Fale CUIDADO 21 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/ternario.js: -------------------------------------------------------------------------------- 1 | const resultado = nota => nota >= 7 ? 'Aprovado' : 'Reprovado' 2 | 3 | console.log(resultado(7.1)) 4 | console.log(resultado(6.1)) 5 | 6 | /* 7 | Aprovado 8 | Reprovado 9 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/tipagemFraca.js: -------------------------------------------------------------------------------- 1 | let qualquer = 'texto' 2 | console.log(qualquer) 3 | console.log(typeof qualquer) 4 | 5 | qualquer = 200 6 | console.log(qualquer) 7 | console.log(typeof qualquer) 8 | 9 | /* 10 | texto 11 | string 12 | 200 13 | number 14 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/unarios.js: -------------------------------------------------------------------------------- 1 | let num1 = 1 2 | let num2 = 2 3 | 4 | num1++ 5 | console.log(num1) 6 | --num1 7 | console.log(num1) 8 | 9 | console.log(++num1 === num2--) 10 | console.log(num1 === num2) 11 | 12 | /* 13 | 2 14 | 1 15 | true 16 | false 17 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/usandoLet1.js: -------------------------------------------------------------------------------- 1 | //var num = 1 2 | let num = 1 3 | { 4 | let num = 22 5 | console.log('Dentro = ', num) 6 | } 7 | console.log('Fora = ', num) 8 | /* 9 | Dentro = 22 10 | Fora = 1 11 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/usandoVar.js: -------------------------------------------------------------------------------- 1 | { 2 | { 3 | { 4 | { 5 | var sera = 'Será??' 6 | console.log(sera) 7 | } 8 | } 9 | } 10 | } 11 | //console.log(sera) 12 | 13 | function teste(){ 14 | var local = 123 15 | console.log(local) 16 | } 17 | 18 | teste() 19 | //console.log(local) //ReferenceError: local is not defined -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/usandoVar2.js: -------------------------------------------------------------------------------- 1 | var num = 11 2 | { 3 | var num = 22 4 | console.log('dentro', num) 5 | } 6 | console.log('fora', num) 7 | 8 | -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/usandoVarEmLoop.js: -------------------------------------------------------------------------------- 1 | for (var i = 0 ; i < 5 ; i++){ 2 | console.log(i) 3 | } 4 | console.log('--') 5 | console.log(i) 6 | /* 7 | 0 8 | 1 9 | 2 10 | 3 11 | 4 12 | -- 13 | 5 14 | */ 15 | 16 | for(let j = 0 ; j < 5; j++){ 17 | console.log(j); 18 | } 19 | console.log(j); 20 | /* 21 | 0 22 | 1 23 | 2 24 | 3 25 | 4 26 | 27 | console.log(j); 28 | ^ 29 | 30 | ReferenceError: j is not defined 31 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/usandoVarEmLoop2.js: -------------------------------------------------------------------------------- 1 | const funcs = [] 2 | 3 | for (var i = 0 ; i < 5 ; i++){ 4 | funcs.push(function(){ 5 | console.log(i) 6 | }) 7 | } 8 | 9 | funcs[1]() 10 | funcs[4]() 11 | 12 | console.log('---------') 13 | 14 | const funcsLet = [] 15 | 16 | for (let j = 0 ; j < 5 ; j++){ 17 | funcsLet.push(function(){ 18 | console.log(j) 19 | }) 20 | } 21 | 22 | funcsLet[1]() 23 | funcsLet[3]() 24 | /* 25 | 5 26 | 5 27 | --------- 28 | 1 29 | 3 30 | */ -------------------------------------------------------------------------------- /03-Javascript-Fundamentos/variaveisEConstantes.js: -------------------------------------------------------------------------------- 1 | var a = 3 2 | let b = 4 3 | 4 | var a = 20; 5 | b = 40; 6 | 7 | console.log(a, b) 8 | 9 | a = 300 10 | b = 500 11 | console.log(a, b) 12 | 13 | const c = 5 14 | //c = 50 15 | console.log(c) -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/breackContinue.js: -------------------------------------------------------------------------------- 1 | const nums = [1,2,3,4,5,6,7] 2 | 3 | for(x in nums){ 4 | if(x == 3){ 5 | break 6 | } 7 | console.log(`${x} = ${nums[x]}`) 8 | } 9 | 10 | for (y in nums){ 11 | if(y == 3){ 12 | continue 13 | } 14 | console.log(`${y} = ${nums[y]}`) 15 | } 16 | exteno: 17 | for(a in nums){ 18 | for(b in nums){ 19 | if(a == 2 && b == 3){ 20 | break exteno 21 | } 22 | console.log(`Par = ${a}, ${b}`) 23 | } 24 | } 25 | /* 26 | 0 = 1 27 | 1 = 2 28 | 2 = 3 29 | 0 = 1 30 | 1 = 2 31 | 2 = 3 32 | 4 = 5 33 | Par = 0, 0 34 | Par = 0, 1 35 | Par = 0, 2 36 | Par = 0, 3 37 | Par = 0, 4 38 | Par = 1, 0 39 | Par = 1, 1 40 | Par = 1, 2 41 | Par = 1, 3 42 | Par = 1, 4 43 | Par = 2, 0 44 | Par = 2, 1 45 | Par = 2, 2 46 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/dowhile.js: -------------------------------------------------------------------------------- 1 | function getInteiroAleatorio(min, max){ 2 | const valor = Math.random() * (max - min) + min 3 | return Math.floor(valor) 4 | } 5 | 6 | let opcao = -1 7 | 8 | do{ 9 | opcao = getInteiroAleatorio(-1, 10) 10 | console.log(`Opção escolhida foi ${opcao}.`) 11 | }while(opcao != -1) 12 | 13 | console.log('Até A próxima!') 14 | 15 | /* 16 | Opção escolhida foi 7. 17 | Opção escolhida foi 3. 18 | Opção escolhida foi -1. 19 | Até A próxima! 20 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/for.js: -------------------------------------------------------------------------------- 1 | let contador = 1 2 | while(contador <= 5){ 3 | console.log(`contador = ${contador}`) 4 | contador++ 5 | } 6 | 7 | for(let i = 0 ; i <= 5 ; i++){ 8 | console.log(`i = ${i}`) 9 | } 10 | const notas = [5.5, 4.3 , 9.9, 10, 5.6] 11 | for(let i = 0 ; i < notas.length ; i++){ 12 | console.log(`notas = ${notas[i]}`) 13 | } 14 | /* 15 | contador = 1 16 | contador = 2 17 | contador = 3 18 | contador = 4 19 | contador = 5 20 | i = 0 21 | i = 1 22 | i = 2 23 | i = 3 24 | i = 4 25 | i = 5 26 | notas = 5.5 27 | notas = 4.3 28 | notas = 9.9 29 | notas = 10 30 | notas = 5.6 31 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/for_in.js: -------------------------------------------------------------------------------- 1 | const notas = [5.5, 4.3 , 9.9, 10, 5.6] 2 | 3 | for(let i in notas){ 4 | console.log(i, notas[i]) 5 | } 6 | 7 | const pessoa = { 8 | nome: 'Jose', 9 | sobrenome: 'malcher jr', 10 | idade: 35, 11 | peso: 95 12 | } 13 | for (let i in pessoa){ 14 | console.log(`${i} = ${pessoa[i]} `) 15 | } -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/ifElse_if.js: -------------------------------------------------------------------------------- 1 | Number.prototype.entre = function (inicio, fim){ 2 | return this >= inicio && this <= fim 3 | } 4 | 5 | const imprimeResultado = function(nota){ 6 | if(nota.entre(9,10)){ 7 | console.log('Quadro de Honra') 8 | }else if(nota.entre(7 , 8.99)){ 9 | console.log('Aprovado') 10 | }else if(nota.entre(4, 6.99)){ 11 | console.log('Recuperação') 12 | }else if(nota.entre(0,3.99)){ 13 | console.log('Reprovado') 14 | }else{ 15 | console.log('Nota inválida') 16 | } 17 | } 18 | 19 | imprimeResultado(10) 20 | imprimeResultado(8.9) 21 | imprimeResultado(6.55) 22 | imprimeResultado(3) 23 | imprimeResultado(0) 24 | /* 25 | Quadro de Honra 26 | Aprovado 27 | Recuperação 28 | Reprovado 29 | Reprovado 30 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/if_1.js: -------------------------------------------------------------------------------- 1 | function soBoaNoticia(nota){ 2 | if(nota >= 7){ 3 | console.log('Aprovado com ' + nota) 4 | } 5 | } 6 | 7 | soBoaNoticia(8.1) 8 | soBoaNoticia(6.1) 9 | 10 | function seForVerdadeEuFalo(valor){ 11 | if(valor){ 12 | console.log('É verdade... ' + valor) 13 | } 14 | } 15 | 16 | seForVerdadeEuFalo() 17 | seForVerdadeEuFalo(null) 18 | seForVerdadeEuFalo(undefined) 19 | seForVerdadeEuFalo(NaN) 20 | seForVerdadeEuFalo('') 21 | seForVerdadeEuFalo(0) 22 | seForVerdadeEuFalo(-1) 23 | seForVerdadeEuFalo(' ') 24 | seForVerdadeEuFalo('?') 25 | seForVerdadeEuFalo([]) 26 | seForVerdadeEuFalo([1,2]) 27 | seForVerdadeEuFalo({}) 28 | /* 29 | provado com 8.1 30 | É verdade... -1 31 | É verdade... 32 | É verdade... ? 33 | É verdade... 34 | É verdade... 1,2 35 | É verdade... [object Object] 36 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/if_2.js: -------------------------------------------------------------------------------- 1 | function teste1(num){ 2 | if(num > 7) 3 | console.log('teste1 - ' + num) 4 | 5 | console.log('FINAL... de teste 1') 6 | } 7 | 8 | teste1(8) 9 | teste1(4) 10 | 11 | function teste2(num){ 12 | if(num > 7) ; { // atenção ao ';' não usar com as estrutudas de controle 13 | console.log('Teste 2 - ' + num) 14 | } 15 | } 16 | teste2(6) 17 | teste2(9) 18 | 19 | /* 20 | teste1 - 8 21 | FINAL... de teste 1 22 | FINAL... de teste 1 23 | Teste 2 - 6 24 | Teste 2 - 9 25 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/ifelse.js: -------------------------------------------------------------------------------- 1 | const imprimirResultado = function (nota){ 2 | if(nota >= 7){ 3 | console.log('Aprovado') 4 | }else{ 5 | console.log('Reprovado') 6 | } 7 | } 8 | imprimirResultado(5) 9 | imprimirResultado(7) 10 | imprimirResultado(3) 11 | imprimirResultado('FAIL!') // atenção! 12 | /* 13 | Reprovado 14 | Aprovado 15 | Reprovado 16 | Reprovado 17 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/switch.js: -------------------------------------------------------------------------------- 1 | const impriResultado = function(nota){ 2 | switch(Math.floor(nota)){ 3 | case 10: 4 | case 9: 5 | console.log('Quadro de Honra') 6 | break 7 | case 8: case 7: 8 | console.log('Aprovrado') 9 | break 10 | case 6: case 5: case 4: 11 | console.log('Recuperação') 12 | break 13 | case 3: case 2: case 1: 14 | console.log('Reprovado') 15 | break 16 | default: 17 | console.log('Nota Inválida!!!') 18 | break 19 | } 20 | } 21 | 22 | impriResultado(10) 23 | impriResultado(7) 24 | impriResultado(5) 25 | impriResultado(2) 26 | impriResultado(0) 27 | /* 28 | Quadro de Honra 29 | Aprovrado 30 | Recuperação 31 | Reprovado 32 | Nota Inválida!!! 33 | */ -------------------------------------------------------------------------------- /04-Javascript-Estruturas-de-Controle/while.js: -------------------------------------------------------------------------------- 1 | function getInteiroAleatorio(min, max){ 2 | const valor = Math.random() * (max - min) + min 3 | return Math.floor(valor) 4 | } 5 | 6 | let opcao = 0 7 | 8 | while(opcao != -1){ 9 | opcao = getInteiroAleatorio(-1, 10) 10 | console.log(`Opção escolhida foi ${opcao}.`) 11 | } 12 | 13 | console.log('Até A próxima!') 14 | 15 | /* 16 | Opção escolhida foi 9. 17 | Opção escolhida foi 5. 18 | Opção escolhida foi -1. 19 | Até A próxima! 20 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/IIFE.js: -------------------------------------------------------------------------------- 1 | // IIFE -> Imediatamente invocada Function expression (fugir do escopo global) 2 | 3 | (function(){ 4 | console.log('Será executado na hora!') 5 | console.log('Foge do escopo mais abrangente') 6 | })() -------------------------------------------------------------------------------- /05-Javascript-Funcao/arrowFunction.js: -------------------------------------------------------------------------------- 1 | let dobro = function(a){ 2 | return 2 * a 3 | } 4 | 5 | dobro = (a) =>{ 6 | return 2 * a 7 | } 8 | 9 | dobro = a => 2 * a // return está inplícito 10 | console.log(dobro(Math.PI)) 11 | 12 | let ola = function(){ 13 | return 'Olá' 14 | } 15 | 16 | ola = () => 'Olá' 17 | ola = _ => 'Olá' // possui um param 18 | console.log(ola()) 19 | 20 | /* 21 | 6.283185307179586 22 | Olá 23 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/arrowFunction2.js: -------------------------------------------------------------------------------- 1 | function Pessoa(){ 2 | this.idade = 0 3 | 4 | setInterval(()=> { 5 | this.idade++ 6 | console.log(this.idade) 7 | }, 1000) 8 | } 9 | new Pessoa -------------------------------------------------------------------------------- /05-Javascript-Funcao/arrowFunction3y.js: -------------------------------------------------------------------------------- 1 | let comparaComThis = function(param){ 2 | console.log(this === param) 3 | } 4 | comparaComThis(global) // true 5 | 6 | const obj = {} 7 | comparaComThis = comparaComThis.bind(obj) 8 | comparaComThis(global) // false 9 | comparaComThis(obj) // true 10 | 11 | let comparaComThisArrow = param => console.log(this === param) 12 | comparaComThisArrow(global) // false 13 | comparaComThisArrow(module.exports) // true 14 | 15 | comparaComThisArrow = comparaComThisArrow.bind(obj) // forçando o contexto 16 | comparaComThisArrow(obj) // false 17 | comparaComThisArrow(module.exports) // true 18 | 19 | 20 | -------------------------------------------------------------------------------- /05-Javascript-Funcao/callApply.js: -------------------------------------------------------------------------------- 1 | function getPreco(imposto = 0, moeda = 'R$'){ 2 | return `${moeda} ${this.preco * (1 - this.desc) * (1 + imposto)}` 3 | } 4 | const produto = { 5 | nome: 'Notebook', 6 | preco: 5000, 7 | desc: 0.15, 8 | getPreco 9 | } 10 | global.preco = 20 11 | global.desc = 0.1 12 | console.log(getPreco()) 13 | console.log(produto.getPreco()) 14 | 15 | const carro = {preco: 5000, desc:0.15} 16 | console.log(getPreco.call(carro)) 17 | console.log(getPreco.apply(carro)) 18 | 19 | console.log(getPreco.call(carro, 0.17, '$')) 20 | console.log(getPreco.apply(global, [0.17, '$'])) 21 | 22 | /* 23 | R$ 18 24 | R$ 4250 25 | R$ 4250 26 | R$ 4250 27 | $ 4972.5 28 | $ 21.06 29 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/callback1.js: -------------------------------------------------------------------------------- 1 | const fabricantes = ['Mercedes' , 'Audi', 'bmw'] 2 | 3 | function imprimir(nome , indice){ 4 | console.log(`${indice + 1} . $[nome]`) 5 | } 6 | fabricantes.forEach(imprimir) 7 | fabricantes.forEach(fabricantes => console.log(fabricantes)) 8 | 9 | /* 10 | 1 . $[nome] 11 | 2 . $[nome] 12 | 3 . $[nome] 13 | Mercedes 14 | Audi 15 | bmw 16 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/callback2.js: -------------------------------------------------------------------------------- 1 | const notas = [7.7, 8.8, 6.6, 4.4, 3.4, 9.0] 2 | 3 | //sem callback 4 | let notasBaixas1 = [] 5 | for (let i in notas){ 6 | if(notas[i]< 7){ 7 | notasBaixas1.push(notas[i]) 8 | } 9 | } 10 | console.log(notasBaixas1) 11 | 12 | const notasBaixas2 = notas.filter(function(nota){ 13 | return nota < 7 14 | }) 15 | console.log(notasBaixas2) 16 | 17 | const notasBaixas3 = notas.filter(nota => nota < 7) 18 | console.log(notasBaixas3) 19 | 20 | /* 21 | [6.6, 4.4, 3.4 ] 22 | [ 6.6, 4.4, 3.4 ] 23 | [ 6.6, 4.4, 3.4 ] 24 | 25 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/callback3.js: -------------------------------------------------------------------------------- 1 | // exemplo no browser 2 | 3 | document.getElementsByTagName('body')[0].onclick = function(e){ 4 | console.log('O evento Ocorreu') 5 | } -------------------------------------------------------------------------------- /05-Javascript-Funcao/cidacaoPrimeiraClasse.js: -------------------------------------------------------------------------------- 1 | // FUnção em JS é FIrst-Class Object (citizens) 2 | // Higher-order function 3 | 4 | //cria de forma literal 5 | function fun1(){ 6 | 7 | } 8 | 9 | //armazer em uma forma variável 10 | const fun2 = function(){ 11 | 12 | } 13 | 14 | //armazenar em um Array 15 | const array = [function(a,b){return a+ b}, fun1, fun2] 16 | console.log(array[0](2,3)) // 5 17 | 18 | // Armazenar em um atributo de objeto 19 | const obj = {} 20 | obj.falar = function(){return 'Opa'} 21 | console.log(obj.falar()) // Opa 22 | 23 | // Passar função como param 24 | function run(fun){ 25 | fun() 26 | } 27 | run(function(){console.log('Executando...')}) //Executando... 28 | 29 | // Uma função pode retornar//conter uma função 30 | 31 | function soma(a,b){ 32 | return function(c){ 33 | console.log(a + b + c) 34 | } 35 | } 36 | soma(2,3)(4) // 9 37 | const cincomais = soma(2,3) 38 | cincomais(4) // 9 -------------------------------------------------------------------------------- /05-Javascript-Funcao/classVsFactory.js: -------------------------------------------------------------------------------- 1 | class Pessoa{ 2 | constructor(nome){ 3 | this.nome = nome 4 | } 5 | falar(){ 6 | console.log(`Meu nome é ${this.nome}`) 7 | } 8 | } 9 | 10 | const p1 = new Pessoa("José") 11 | p1.falar() 12 | 13 | const criarPessoa = nome => { 14 | return { 15 | falar: () => console.log(`Meu nome é... ${nome}`) 16 | } 17 | } 18 | const p2 = criarPessoa("José Malcher jr") 19 | p2.falar() -------------------------------------------------------------------------------- /05-Javascript-Funcao/closure.js: -------------------------------------------------------------------------------- 1 | // Closure é o escopo criado quando uma função é declarada 2 | // Esse escopo permite a função acessar e manipular variáveis externas à função 3 | 4 | // Contexto léxico em ação! 5 | 6 | const x = 'GLOBAL' 7 | 8 | function fora(){ 9 | const x = 'LOCAL' 10 | function dentro(){ 11 | return x 12 | } 13 | return dentro 14 | } 15 | 16 | const minhaFuncao = fora() 17 | console.log(minhaFuncao()) -------------------------------------------------------------------------------- /05-Javascript-Funcao/contextoLexico.js: -------------------------------------------------------------------------------- 1 | const valor = 'Global' 2 | function minhaFuncao(){ 3 | console.log(valor) 4 | } 5 | function exer(){ 6 | const valor = 'Local' 7 | minhaFuncao() 8 | } 9 | exer() // Global -------------------------------------------------------------------------------- /05-Javascript-Funcao/desafioFuncaoConstrutora.js: -------------------------------------------------------------------------------- 1 | function Pessoa(nome){ 2 | this.nome = nome 3 | this.falar = function(){ 4 | console.log(`Meu nome é ${this.nome}`) 5 | } 6 | } 7 | 8 | const p1 = new Pessoa("José Malcher") 9 | p1.falar() 10 | console.log(p1.nome) 11 | 12 | /* 13 | Meu nome é José Malcher 14 | José Malcher 15 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/factory.js: -------------------------------------------------------------------------------- 1 | // factory simples 2 | 3 | function criarPessoas(){ 4 | return{ 5 | nome:'Ana', 6 | sobrenome: 'silva' 7 | } 8 | } 9 | console.log(criarPessoas()) 10 | -------------------------------------------------------------------------------- /05-Javascript-Funcao/factory2.js: -------------------------------------------------------------------------------- 1 | function criarProduto(nome, preco){ 2 | return{ 3 | nome, 4 | preco, 5 | desconto: 0.1 6 | } 7 | } 8 | 9 | console.log(criarProduto('Notebook', 10000)) 10 | console.log(criarProduto('Celular', 3000)) -------------------------------------------------------------------------------- /05-Javascript-Funcao/funcaoAnonima.js: -------------------------------------------------------------------------------- 1 | const soma = function(x,y){ 2 | return x + y 3 | } 4 | 5 | const imprimeResultado = function(a, b , operacao = soma){ 6 | console.log(operacao(a, b)) 7 | } 8 | imprimeResultado(3,4) 9 | imprimeResultado(3,4, soma) 10 | imprimeResultado(3,4, function(x,y){ 11 | return x - y 12 | }) 13 | imprimeResultado(3,4, (x,y) => x * y) 14 | 15 | const pessoa = { 16 | falar: function(){ 17 | console.log('Olaa') 18 | } 19 | } 20 | pessoa.falar() 21 | 22 | /* 23 | 7 24 | 7 25 | -1 26 | 12 27 | Olaa 28 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/funcaoConstrutora.js: -------------------------------------------------------------------------------- 1 | function Carro(velocidadeMaxima = 200, delta = 5){ 2 | //atributo privado 3 | let velocidadeAtual = 0 4 | 5 | //método publico 6 | this.acelerar = function(){ 7 | if(velocidadeAtual + delta <= velocidadeMaxima){ 8 | velocidadeAtual += delta 9 | }else{ 10 | velocidadeAtual = velocidadeMaxima 11 | } 12 | } 13 | 14 | //metodo publico 15 | this.getvelocidadeAtual = function(){ 16 | return velocidadeAtual 17 | } 18 | 19 | } 20 | 21 | const uno = new Carro 22 | uno.acelerar() 23 | console.log(uno.getvelocidadeAtual()) 24 | 25 | const ferrari = new Carro(350, 20) 26 | ferrari.acelerar() 27 | ferrari.acelerar() 28 | ferrari.acelerar() 29 | console.log(ferrari.getvelocidadeAtual()) 30 | 31 | console.log(typeof Carro) 32 | console.log(typeof ferrari) -------------------------------------------------------------------------------- /05-Javascript-Funcao/paramPadrao.js: -------------------------------------------------------------------------------- 1 | // estrategia 1 para gerar valor padrão 2 | function soma1(a,b,c){ 3 | a = a || 1 4 | b = b || 1 5 | c = c || 1 6 | return a + b + c 7 | } 8 | 9 | console.log(soma1(), soma1(3), soma1(1,2,3),soma1(0,0,0)) 10 | 11 | // estratégia 2, 3 e 4 para gerar valor padrão 12 | function soma2(a,b,c,){ 13 | a = a !== undefined ? a : 1 14 | b = 1 in arguments ? b : 1 15 | c = isNaN(c) ? 1 : c 16 | return a + b + c 17 | } 18 | console.log(soma2(), soma2(3), soma2(1,2,3), soma2(0,0,0)) 19 | 20 | // valor padrão do es2015 21 | function soma3(a =1, b = 1, c = 1 ){ 22 | return a + b + c 23 | } 24 | console.log(soma3(), soma3(3), soma3(1,2,3), soma3(0,0,0)) 25 | 26 | 27 | /* 28 | 3 5 6 3 29 | 3 5 6 0 30 | 3 5 6 0 31 | 32 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/paramRetornoSaoOpcionais.js: -------------------------------------------------------------------------------- 1 | function area (largura, altura){ 2 | const area = largura * altura 3 | if(area > 10){ 4 | console.log(`valor acima do permitido ${area}m2`) 5 | }else{ 6 | return area 7 | } 8 | } 9 | 10 | console.log(area(2,1)) 11 | console.log(area(2)) 12 | console.log(area()) 13 | console.log(area(2,1,3,17,22,44)) 14 | console.log(area(5,5)) 15 | /* 16 | 2 17 | NaN 18 | NaN 19 | 2 20 | valor acima do permitido 25m2 21 | undefined 22 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/paramvariaveis.js: -------------------------------------------------------------------------------- 1 | function soma(){ 2 | let soma = 0 3 | for(i in arguments){ 4 | soma += arguments[i] 5 | } 6 | return soma 7 | } 8 | 9 | console.log(soma()) 10 | console.log(soma(1)) 11 | console.log(soma(1.1, 2.2, 3.3)) 12 | 13 | console.log(soma(1.1, 2.2, "Teste")) 14 | console.log(soma('a','b','c')) 15 | 16 | /* 17 | 0 18 | 1 19 | 6.6 20 | 3.3000000000000003Teste 21 | 0abc 22 | */ -------------------------------------------------------------------------------- /05-Javascript-Funcao/thisEBind.js: -------------------------------------------------------------------------------- 1 | const pessoa = { 2 | saudacao : 'Bom dia', 3 | falar(){ 4 | console.log(this.saudacao); 5 | } 6 | } 7 | 8 | pessoa.falar() 9 | const falar = pessoa.falar 10 | falar() 11 | /* 12 | Bom dia 13 | undefined 14 | */ 15 | 16 | const falarDePessoa = pessoa.falar.bind(pessoa) 17 | falarDePessoa() 18 | 19 | // Bom dia 20 | -------------------------------------------------------------------------------- /05-Javascript-Funcao/thisEBind2.js: -------------------------------------------------------------------------------- 1 | function Pessoa(){ 2 | this.idade = 0 3 | 4 | const self = this 5 | setInterval(function(){ 6 | /* this.idade++ */ 7 | self.idade++ 8 | console.log(self.idade) 9 | }/* .bind(this) */, 1000) 10 | } 11 | 12 | new Pessoa -------------------------------------------------------------------------------- /05-Javascript-Funcao/tiposDeclaracao.js: -------------------------------------------------------------------------------- 1 | console.log(soma(10,4)) 2 | // function declaration 3 | function soma(x, y){ 4 | return x + y 5 | } 6 | 7 | // function expression 8 | const sub = function(x,y){ 9 | return x - y 10 | } 11 | console.log(sub(10,5)) 12 | 13 | // named function expression 14 | const mult = function mult(x,y){ 15 | return x * y 16 | } 17 | console.log(mult(3,5)) 18 | -------------------------------------------------------------------------------- /06-Javascript-Objeto/086-Introducao-ao-OO.js: -------------------------------------------------------------------------------- 1 | // Código não Executável! 2 | 3 | // Procedural 4 | processamento(valor1, valor2, valor3) 5 | 6 | // OO 7 | objeto = { 8 | valor, 9 | valor2, 10 | valor, 11 | processamento(){ 12 | // .. 13 | } 14 | } 15 | objeto.processamento(); // Foco passou a ser o Objeto 16 | 17 | /* 18 | 19 | Principios: 20 | 1. Abstração 21 | 2. Encapsulamento 22 | 3. Herança (prototype) 23 | 4. Polimorfismo 24 | 25 | */ 26 | -------------------------------------------------------------------------------- /06-Javascript-Objeto/ObjetoRevisao.js: -------------------------------------------------------------------------------- 1 | // Coleção dinâmica de pares chave/valor 2 | 3 | const produto = new Object 4 | produto.nome = 'Cadeira' 5 | produto['marca do produto'] = 'Generica' 6 | produto.preco = 200 7 | 8 | console.log(produto) 9 | delete produto.preco 10 | delete produto['marca do produto'] 11 | console.log(produto) 12 | /* 13 | { nome: 'Cadeira', 'marca do produto': 'Generica', preco: 200 } 14 | { nome: 'Cadeira' } 15 | */ 16 | 17 | const carro = { 18 | modelo: 'A4', 19 | valor: 10000, 20 | proprietario: { 21 | nome:'Jose', 22 | idade: 35, 23 | endereco:{ 24 | rua: 'Rua tal tal', 25 | numero: 123 26 | } 27 | }, 28 | condutores: [{ 29 | nome: 'Jose Malcher Jr', 30 | idade: 35 31 | },{ 32 | nome: 'Luciana Barbosa', 33 | idade: 34 34 | }], 35 | calculaValorSeguro: function(){ 36 | // ... 37 | } 38 | 39 | } 40 | carro.proprietario.endereco.numero = 4455 41 | carro['proprietario']['endereco']['rua'] = 'Av. GOv. jose malcher' 42 | console.log(carro) 43 | 44 | delete carro.condutores 45 | delete carro.proprietario 46 | delete carro.calculaValorSeguro 47 | console.log(carro) 48 | console.log(carro.condutores) // undefined 49 | //console.log(carro.condutores.length) // erro 50 | 51 | /* 52 | { 53 | modelo: 'A4', 54 | valor: 10000, 55 | proprietario: { 56 | nome: 'Jose', 57 | idade: 35, 58 | endereco: { rua: 'Av. GOv. jose malcher', numero: 4455 } 59 | }, 60 | condutores: [ 61 | { nome: 'Jose Malcher Jr', idade: 35 }, 62 | { nome: 'Luciana Barbosa', idade: 34 } 63 | ], 64 | calculaValorSeguro: [Function: calculaValorSeguro] 65 | } 66 | { modelo: 'A4', valor: 10000 } 67 | undefined 68 | */ -------------------------------------------------------------------------------- /06-Javascript-Objeto/criandoObjetos.js: -------------------------------------------------------------------------------- 1 | // usando a notação literal 2 | 3 | const obj1 = {} 4 | console.log(obj1) 5 | 6 | // objeto em JS 7 | console.log(typeof Object, typeof new Object) 8 | const obj2 = new Object 9 | console.log(obj2) 10 | 11 | // funções construtoras 12 | function Produto(nome, preco, desc){ 13 | this.nome = nome 14 | this.getPrecoComDesconto = () =>{ 15 | return preco * (1 - desc) 16 | } 17 | } 18 | const p1 = new Produto('Caneta', 7.99, 0.15) 19 | const p2 = new Produto('Notebook', 2998.99, 0.25) 20 | console.log(p1.getPrecoComDesconto() , p2.getPrecoComDesconto()) 21 | 22 | // Função Factory 23 | function criarFuncionario(nome, salarioBase, faltas){ 24 | return { 25 | nome, salarioBase, faltas, 26 | getSalario(){ 27 | return (salarioBase/30) * (30 - faltas) 28 | } 29 | } 30 | } 31 | const f1 = criarFuncionario('Jose', 7980, 4) 32 | const f2 = criarFuncionario('Maria', 11400, 1) 33 | console.log(f1.getSalario(), f2.getSalario()) 34 | 35 | // Object.create 36 | const filha = Object.create(null) 37 | filha.nome= 'Ana' 38 | console.log(filha) 39 | 40 | // Uma função famosa que retorna um Objeto... 41 | const fromJSON = JSON.parse('{"info":"Sou um JSON"}') 42 | console.log(fromJSON.info) -------------------------------------------------------------------------------- /2019_README.md: -------------------------------------------------------------------------------- 1 | # Curso Web Moderno com JavaScript 2019! COMPLETO + Projetos 2 | 3 | 4 | 5 | Curso Web 13 cursos - Javascript React Vue JS Node HTML CSS jQuery Bootstrap 4 Webpack Gulp Banco de Dados e muito mais 6 | 7 | ## Índice 8 | 9 | 1. [Introdução - 5 aulas](#parte1) 10 | 2. [Configuração do Ambiente - 4 aulas](#parte2) 11 | 3. [Javascript: Fundamentos - 42 aulas](#parte3) 12 | 4. [Javascript: Estruturas de Controle - 11 aulas](#parte4) 13 | 5. [Javascript: Função - 24 aulas](#parte5) 14 | 6. [Javascript: Objeto - 17 aulas](#parte6) 15 | 7. [Javascript: Array - 16 aulas](#parte7) 16 | 8. [Node - 23 aulas](#parte8) 17 | 9. [ESNext - 14 aulas](#parte9) 18 | 10. [Conceitos sobre Web - 10 aulas](#parte10) 19 | 11. [HTML - 22 aulas](#parte11) 20 | 12. [CSS - 39 aulas](#parte12) 21 | 13. [Integrando HTML, CSS e JS - 23 aulas](#parte13) 22 | 14. [Ajax - 12 aulas](#parte14) 23 | 15. [Gulp - 14 aulas](#parte15) 24 | 16. [Webpack - 10 aulas](#parte16) 25 | 17. [jQuery - 18 aulas](#parte17) 26 | 18. [Bootstrap - 24 aulas](#parte18) 27 | 19. [Projeto Galeria (Bootstrap/jQuery/Webpack) - 8 aulas](#parte19) 28 | 20. [React - 8 aulas](#parte20) 29 | 21. [Projeto Calculadora - 7 aulas](#parte21) 30 | 22. [Projeto Cadastro de Usuário - 15 aulas](#parte22) 31 | 23. [VueJS - 10 aulas](#parte23) 32 | 24. [Projetos VueJS - 3 aulas](#parte24) 33 | 25. [Projeto Calculadora (Vue) - 6 aulas](#parte25) 34 | 26. [Projeto Monty Hall (Vue) - 5 aulas](#parte26) 35 | 27. [Banco Relacional - 24 aulas](#parte27) 36 | 28. [Banco Não Relacional - 16 aulas](#parte28) 37 | 29. [Express - 12 aulas](#parte29) 38 | 30. [Projeto Base de Conhecimento • Backend - 25 aulas](#parte30) 39 | 31. [Projeto Base de Conhecimento • Frontend - 31 aulas](#parte31) 40 | 32. [Conclusão - 1 aula](#parte32) 41 | 42 | --- 43 | 44 | ## Introdução - 5 aulas 45 | 46 | ![mapa](https://github.com/josemalcher/Curso-Web-Moderno-com-JavaScript-2019-COMPLETO-Projetos/blob/master/img/01-01-introducao.PNG?raw=true) 47 | 48 | [Voltar ao Índice](#indice) 49 | 50 | --- 51 | 52 | ## Configuração do Ambiente - 4 aulas 53 | 54 | - install node 55 | - install VS Code 56 | - Extesão "Run" 57 | 58 | [Voltar ao Índice](#indice) 59 | 60 | --- 61 | 62 | ## Javascript: Fundamentos - 42 aulas 63 | 64 | - 014 O Basico de Var Let e Const 65 | - 03-Javascript-Fundamentos\variaveisEConstantes.js 66 | 67 | ```js 68 | var a = 3 69 | let b = 4 70 | 71 | var a = 20; 72 | b = 40; 73 | 74 | console.log(a, b) 75 | 76 | a = 300 77 | b = 500 78 | console.log(a, b) 79 | 80 | const c = 5 81 | //c = 50 82 | console.log(c) 83 | ``` 84 | 85 | - 015 Tipagem Fraca 86 | - 03-Javascript-Fundamentos\tipagemFraca.js 87 | 88 | ```js 89 | let qualquer = 'texto' 90 | console.log(qualquer) 91 | console.log(typeof qualquer) 92 | 93 | qualquer = 200 94 | console.log(qualquer) 95 | console.log(typeof qualquer) 96 | 97 | /* 98 | texto 99 | string 100 | 200 101 | number 102 | */ 103 | ``` 104 | 105 | - 016 Tipos em JavaScript Number 106 | - 03-Javascript-Fundamentos\numeros.js 107 | 108 | ```javascript 109 | const peso1 = 1.0 110 | const peso2 = Number('2.0') 111 | 112 | console.log(peso1, peso2) 113 | console.log(Number.isInteger(peso1)) 114 | console.log(Number.isInteger(peso2)) 115 | 116 | const avalia1 = 9.234 117 | const avalia2 = 5.212 118 | 119 | const total = avalia1 * peso1 + avalia2 * peso2 120 | const media = total / (peso1 + peso2) 121 | 122 | console.log(media.toFixed(2)) 123 | console.log(media.toString(2)) // em binário 124 | console.log(typeof media) 125 | console.log(typeof total) 126 | 127 | /* 128 | 1 2 129 | true 130 | true 131 | 6.55 132 | 110.1000110101111011100100000000101011101100001101 133 | number 134 | number 135 | */ 136 | ``` 137 | 138 | - 018 Usando Math 139 | - 03-Javascript-Fundamentos\math.js 140 | 141 | ```js 142 | const raio = 5.6 143 | const area = Math.PI * Math.pow(raio, 2) 144 | 145 | console.log(area) 146 | console.log(typeof Math) 147 | 148 | /* 149 | 98.5203456165759 150 | object 151 | */ 152 | ``` 153 | 154 | - 019 Tipos em JavaScript String 155 | - 03-Javascript-Fundamentos\string.js 156 | 157 | ```js 158 | const escola = "Cod3r" 159 | 160 | console.log(escola.charAt(4)) 161 | console.log(escola.charAt(5)) 162 | console.log(escola.charCodeAt(3)) 163 | console.log(escola.indexOf('3')) 164 | 165 | console.log(escola.substring(1)) 166 | console.log(escola.substring(0,3)) 167 | 168 | console.log('Escola '.concat(escola).concat("!")) 169 | console.log('Escola ' + escola + "!") 170 | console.log(escola.replace(3, 'r')) 171 | 172 | console.log('Ana, Maria,Jose'.split(',')) 173 | 174 | /* 175 | r 176 | 177 | 51 178 | 3 179 | od3r 180 | Cod 181 | Escola Cod3r! 182 | Escola Cod3r! 183 | Codrr 184 | [ 'Ana', ' Maria', 'Jose' ] 185 | */ 186 | ``` 187 | 188 | - 020 Usando Template Strings 189 | - 03-Javascript-Fundamentos\templateString.js 190 | 191 | ```js 192 | const nome = 'Jose' 193 | const contatenacao = 'Olá ' + nome + '!' 194 | const template = ` 195 | Olá 196 | ${nome}!` 197 | 198 | console.log(contatenacao , template) 199 | 200 | // expressões 201 | console.log(` 1 + 1 = ${1+1}`) 202 | 203 | const up = texto => texto.toUpperCase() 204 | console.log(`Fale ${up('cuidado')}`) 205 | 206 | /* 207 | Olá Jose! 208 | Olá 209 | Jose! 210 | 1 + 1 = 2 211 | Fale CUIDADO 212 | */ 213 | ``` 214 | 215 | - 021 Tipos em JavaScript Boolean 216 | - 03-Javascript-Fundamentos\booleanos.js 217 | 218 | ```js 219 | let isAtivo = false 220 | console.log(isAtivo) 221 | 222 | isAtivo = true 223 | console.log(isAtivo) 224 | 225 | isAtivo = 1 226 | console.log(!!isAtivo) 227 | 228 | console.log('os verdadeiros... ') 229 | console.log(!!3) 230 | console.log(!!-1) 231 | console.log(!!' ') 232 | console.log(!!'TEXTO') 233 | console.log(!![]) 234 | console.log(!!{}) 235 | console.log(!!Infinity) 236 | console.log(!!(isAtivo = true)) 237 | 238 | console.log('os falsos...') 239 | console.log(!!0) 240 | console.log(!!'') 241 | console.log(!!null) 242 | console.log(!!NaN) 243 | console.log(!!undefined) 244 | console.log(!!(isAtivo = false)) 245 | 246 | console.log('finalizando...') 247 | console.log(!!('' || null || 0 || ' ')) 248 | 249 | let nome = '' 250 | console.log(nome || 'Desconhecido') 251 | 252 | /* 253 | 254 | false 255 | true 256 | true 257 | os verdadeiros... 258 | true 259 | true 260 | true 261 | true 262 | true 263 | true 264 | true 265 | true 266 | os falsos... 267 | false 268 | false 269 | false 270 | false 271 | false 272 | false 273 | finalizando... 274 | true 275 | Desconhecido 276 | 277 | */ 278 | ``` 279 | 280 | - 022 Tipos em JavaScript Array 281 | - 03-Javascript-Fundamentos\arrays.js 282 | 283 | ```js 284 | const valores = [7.7, 8.8, 6.3, 2.3] 285 | console.log(valores[0], valores[3]) 286 | console.log(valores[4]) 287 | 288 | valores[4] = 10 289 | console.log(valores) 290 | console.log(valores.length) 291 | 292 | valores.push({id:3}, false, null, 'teste') 293 | console.log(valores) 294 | 295 | valores.pop(valores.pop()) 296 | delete valores[0] 297 | console.log(valores) 298 | 299 | console.log(typeof valores) 300 | 301 | /* 302 | 7.7 2.3 303 | undefined 304 | [ 7.7, 8.8, 6.3, 2.3, 10 ] 305 | 5 306 | [ 307 | 7.7, 8.8, 308 | 6.3, 2.3, 309 | 10, { id: 3 }, 310 | false, null, 311 | 'teste' 312 | ] 313 | [ <1 empty item>, 8.8, 6.3, 2.3, 10, { id: 3 }, false ] 314 | object 315 | */ 316 | ``` 317 | 318 | - 023 Tipos em JavaScript Object 319 | - 03-Javascript-Fundamentos\objeto.js 320 | 321 | ```js 322 | const prod1 = {} 323 | prod1.nome = 'celular Ultra mega' 324 | prod1.preco = 3344.88 325 | prod1['Desconto Legal'] = 0.40 // evitar atributos com espaços 326 | 327 | console.log(prod1) 328 | 329 | const prod2 = { 330 | nome: 'Camisa Polo', 331 | preco: 90.99 332 | } 333 | console.log(prod2) 334 | 335 | /* 336 | { nome: 'celular Ultra mega', preco: 3344.88, 'Desconto Legal': 0.4 } 337 | { nome: 'Camisa Polo', preco: 90.99 } 338 | */ 339 | ``` 340 | 341 | - 024 Entendendo o Null Undefined 342 | - 03-Javascript-Fundamentos\nullUnderfined.js 343 | 344 | ```js 345 | let valor // não inicializada 346 | console.log(valor) 347 | 348 | valor = null 349 | console.log(valor) 350 | // console.log(valor.toString) // Erro! 351 | /* 352 | undefined 353 | null 354 | */ 355 | 356 | const produto = {} 357 | console.log(produto.preco) 358 | console.log(produto) 359 | 360 | produto.preco = 3.99 361 | console.log(produto) 362 | 363 | produto.preco = undefined // Evitar atribuir Uniderfined 364 | console.log(!!produto.preco) 365 | //delete produto.preco 366 | console.log(produto) 367 | /* 368 | undefined 369 | {} 370 | { preco: 3.99 } 371 | false 372 | {} 373 | */ 374 | 375 | produto.preco = null // sem preço 376 | console.log(!!produto.preco) 377 | console.log(!!produto) 378 | /* 379 | false 380 | true 381 | */ 382 | ``` 383 | 384 | - 025 Quase Tudo e Função 385 | - 03-Javascript-Fundamentos\funcaoEmQuaseTudo.js 386 | 387 | ```js 388 | console.log(typeof Object) 389 | 390 | class Produto{} 391 | console.log(typeof Produto) 392 | 393 | /* 394 | function 395 | function 396 | */ 397 | ``` 398 | 399 | - 026 Exemplos Basicos de Funções 01 400 | - 03-Javascript-Fundamentos\funcao1.js 401 | 402 | ```js 403 | //função sem retorno 404 | function imprimirSoma(a,b){ 405 | console.log(a + b) 406 | } 407 | imprimirSoma(2,3) 408 | imprimirSoma(2) 409 | imprimirSoma(12, 3, 4,5 ,6, 7,8 ,4 ) 410 | imprimirSoma() 411 | 412 | /* 413 | 5 414 | NaN 415 | 15 416 | NaN 417 | */ 418 | 419 | // função com retorno 420 | function soma(a,b = 0){ 421 | return a + b 422 | } 423 | console.log(soma(2)) 424 | console.log(soma(2, 5)) 425 | /* 426 | 2 427 | 7 428 | */ 429 | ``` 430 | 431 | - 027 Exemplos Basicos de Funções 02 432 | - 03-Javascript-Fundamentos\funcao2.js 433 | 434 | ```js 435 | // Armazenando uma função em uma variável 436 | const imprimirSoma = function (a, b){ 437 | console.log(a + b) 438 | } 439 | imprimirSoma(2,4) 440 | 441 | // Armazenando uma função arrow em uma variável 442 | const soma = (a,b) => { 443 | return a + b 444 | } 445 | console.log(soma(2,2)) 446 | 447 | // Retorno inplícito 448 | const subtracao = (a,b) => a - b 449 | console.log(subtracao(4,2)) 450 | 451 | const imprimir2 = a => console.log(a) 452 | imprimir2("Teste!") 453 | 454 | /* 455 | 6 456 | 4 457 | 2 458 | Teste! 459 | */ 460 | ``` 461 | 462 | - 028 Declarac227o de Variaveis Com Var 01 463 | - 03-Javascript-Fundamentos\usandoVar.js 464 | 465 | ```js 466 | { 467 | { 468 | { 469 | { 470 | var sera = 'Será??' 471 | console.log(sera) 472 | } 473 | } 474 | } 475 | } 476 | //console.log(sera) 477 | 478 | function teste(){ 479 | var local = 123 480 | console.log(local) 481 | } 482 | 483 | teste() 484 | //console.log(local) //ReferenceError: local is not defined 485 | 486 | /* 487 | Será?? 488 | 123 489 | 490 | */ 491 | ``` 492 | 493 | - 029 Declarac227o de Variaveis Com Var 02 494 | - 03-Javascript-Fundamentos\usandoVar2.js 495 | 496 | ```js 497 | var num = 11 498 | { 499 | var num = 22 500 | console.log('dentro', num) 501 | } 502 | console.log('fora', num) 503 | 504 | /* 505 | dentro 22 506 | fora 22 507 | */ 508 | ``` 509 | 510 | - 030 Declarac227o de Variaveis Com Let 511 | - 03-Javascript-Fundamentos\usandoLet1.js 512 | 513 | ```js 514 | //var num = 1 515 | let num = 1 516 | { 517 | let num = 22 518 | console.log('Dentro = ', num) 519 | } 520 | console.log('Fora = ', num) 521 | /* 522 | Dentro = 22 523 | Fora = 1 524 | */ 525 | ``` 526 | 527 | - 031 Usando Var em Loop 01 528 | - 032 Usando Let em Loop 01 529 | - 03-Javascript-Fundamentos\usandoVarEmLoop.js 530 | 531 | ```js 532 | for (var i = 0 ; i < 5 ; i++){ 533 | console.log(i) 534 | } 535 | console.log('--') 536 | console.log(i) 537 | /* 538 | 0 539 | 1 540 | 2 541 | 3 542 | 4 543 | -- 544 | 5 545 | */ 546 | 547 | for(let j = 0 ; j < 5; j++){ 548 | console.log(j); 549 | } 550 | console.log(j); 551 | /* 552 | 0 553 | 1 554 | 2 555 | 3 556 | 4 557 | 558 | console.log(j); 559 | ^ 560 | 561 | ReferenceError: j is not defined 562 | */ 563 | ``` 564 | 565 | - 033 Usando Var em Loop 02 566 | - 034 Usando Let em Loop 02 567 | - 03-Javascript-Fundamentos\usandoVarEmLoop2.js 568 | 569 | ```js 570 | const funcs = [] 571 | 572 | for (var i = 0 ; i < 5 ; i++){ 573 | funcs.push(function(){ 574 | console.log(i) 575 | }) 576 | } 577 | 578 | funcs[1]() 579 | funcs[4]() 580 | 581 | console.log('---------') 582 | 583 | const funcsLet = [] 584 | 585 | for (let j = 0 ; j < 5 ; j++){ 586 | funcsLet.push(function(){ 587 | console.log(j) 588 | }) 589 | } 590 | 591 | funcsLet[1]() 592 | funcsLet[3]() 593 | /* 594 | 5 595 | 5 596 | --------- 597 | 1 598 | 3 599 | */ 600 | ``` 601 | 602 | - 603 | - 03-Javascript-Fundamentos\hoisting.js 604 | 605 | ```js 606 | console.log(' a = ' , a) 607 | var a = 22 608 | console.log(' a = ' , a) 609 | 610 | console.log(' b = ' , b) 611 | let b = 88 612 | console.log(' b = ' , b) 613 | /* 614 | a = undefined 615 | a = 22 616 | 617 | console.log(' b = ' , b) // error 618 | ReferenceError: Cannot access 'b' before initialization 619 | */ 620 | ``` 621 | 622 | - 036 Funções Vs Objeto 623 | - 03-Javascript-Fundamentos\objeto2.js 624 | 625 | ```js 626 | console.log(typeof Object) 627 | console.log(typeof new Object) 628 | 629 | const Cliente = function(){} 630 | console.log(typeof Cliente) 631 | console.log(typeof new Cliente) 632 | 633 | class Produto{} // ES 2015 (ES6) 634 | console.log(typeof Produto) 635 | console.log(typeof new Produto) 636 | /* 637 | function 638 | object 639 | function 640 | object 641 | function 642 | object 643 | */ 644 | ``` 645 | 646 | - 037 Par NomeValor 647 | - 03-Javascript-Fundamentos\parNomeValor.js 648 | 649 | ```js 650 | // par nome/valor 651 | const saudacao = 'opa!' // contexto léxico 1 652 | 653 | function exec(){ 654 | const saudacao = 'Função Exec' // contexto léxico 2 655 | return saudacao 656 | } 657 | 658 | // objetos são grupos aninhados de pares nome valor 659 | const cliente = { 660 | nome : 'José', 661 | idade : 35, 662 | pesio : 90, 663 | endereco : { 664 | rua: 'Rua tal tal ', 665 | numero: 376 666 | } 667 | } 668 | 669 | console.log(saudacao) 670 | console.log(exec()) 671 | console.log(cliente) 672 | /* 673 | opa! 674 | Função Exec 675 | { 676 | nome: 'José', 677 | idade: 35, 678 | pesio: 90, 679 | endereco: { rua: 'Rua tal tal ', numero: 376 } 680 | } 681 | */ 682 | ``` 683 | 684 | - 038 Notação Ponto 685 | - 03-Javascript-Fundamentos\notacaoPonto.js 686 | 687 | ```js 688 | console.log(Math.ceil(6.1)) 689 | 690 | const obj1 = {} 691 | 692 | obj1.nome = 'Bola' 693 | // obj1['nome'] = 'Bola 2' 694 | console.log(obj1.nome) 695 | 696 | function Obj(nome){ 697 | this.nome = nome 698 | this.exec = function(){ 699 | console.log('Exec... Obj') 700 | } 701 | } 702 | const obj2 = new Obj('Cadeira') 703 | const obj3 = new Obj('Mesa') 704 | 705 | console.log(obj2.nome) 706 | console.log(obj3.nome) 707 | obj3.exec() 708 | 709 | /* 710 | 7 711 | Bola 712 | Cadeira 713 | Mesa 714 | Exec... Obj 715 | */ 716 | ``` 717 | 718 | - 039 Operadores Atribuição 719 | - 03-Javascript-Fundamentos\atribuicao.js 720 | ```js 721 | const a = 7 722 | let b = 3 723 | 724 | b += a // b = b + a 725 | console.log(b) 726 | 727 | b -= 4 // b = b - 4 728 | console.log(b) 729 | 730 | b *= 2 // b = b * 2 731 | console.log(b) 732 | 733 | b /= 2 // b = b / 2 734 | console.log(b) 735 | 736 | b %= 2 // b = b % a 737 | console.log(b) 738 | /* 739 | 10 740 | 6 741 | 12 742 | 6 743 | 0 744 | */ 745 | ``` 746 | 747 | - 040 Operadores Destructuring 01/4 748 | - 03-Javascript-Fundamentos\destructuring.js 749 | 750 | ```js 751 | // novo recurso do ES2015 752 | 753 | const pessoa = { 754 | nome: 'José', 755 | idade: 35, 756 | endereco: { 757 | rua: 'Rua tal tal tal', 758 | numero: 33 759 | } 760 | } 761 | 762 | const {nome, idade} = pessoa 763 | console.log(nome, idade) 764 | 765 | const {nome: n, idade: i} = pessoa 766 | console.log(n, i) 767 | 768 | const {sobrenome, humor = true} = pessoa 769 | console.log(sobrenome, humor) 770 | 771 | const {endereco: {rua, numero, cep}} = pessoa 772 | console.log(rua, numero, cep) 773 | 774 | const {conta:{ag, cc}} = pessoa 775 | console.log(ad, cc) 776 | 777 | /* 778 | José 35 779 | José 35 780 | undefined true 781 | Rua tal tal tal 33 undefined 782 | 783 | const {conta:{ag, cc}} = pessoa 784 | ^ 785 | TypeError: Cannot destructure property `ag` of 'undefined' or 'null'. 786 | */ 787 | ``` 788 | 789 | - 041 Operadores Destructuring 02/4 790 | - 03-Javascript-Fundamentos\destructuring2.js 791 | 792 | ```js 793 | const [a] = [10] 794 | console.log(a) 795 | 796 | const [n1,n2, n3, n4 = 22] = [10,30,9,9] 797 | console.log(n1,n2,n3,n4) 798 | 799 | const [,[,nota]] = [[,8,8],[9,6,8]] 800 | console.log(nota) 801 | /* 802 | 10 803 | 10 30 9 9 804 | 6 805 | */ 806 | ``` 807 | 808 | - 042 Operadores Destructuring 03/4 809 | - 03-Javascript-Fundamentos\destructuring3.js 810 | 811 | ```js 812 | function rand({min = 0, max = 1000}){ 813 | const valor = Math.random() * (max - min) + min 814 | return Math.floor(valor) 815 | } 816 | const obj = {max: 50, min: 40} 817 | console.log(rand(obj)) 818 | 819 | console.log(rand({min: 955})) 820 | console.log(rand({})) 821 | console.log(rand()) 822 | 823 | /* 824 | 44 825 | 966 826 | 819 827 | 828 | function rand({min = 0, max = 1000}){ 829 | ^ 830 | TypeError: Cannot destructure property `min` of 'undefined' or 'null'. 831 | */ 832 | ``` 833 | 834 | - 043 Operadores Destructuring 04/4 835 | - 03-Javascript-Fundamentos\destructuring4.js 836 | 837 | ```js 838 | function rand([min = 0, max =1000]){ 839 | if(min > max) [min, max] = [max, min] 840 | const valor = Math.random() * (max - min) + min 841 | return Math.floor(valor) 842 | } 843 | console.log(rand([50,40])) 844 | console.log(rand([992])) 845 | console.log(rand([,10])) 846 | console.log(rand([])) 847 | //console.log(rand()) // erro 848 | ``` 849 | 850 | - 044 Operadores Aritmeticos 851 | - 03-Javascript-Fundamentos\aritimetico.js 852 | 853 | ```js 854 | const [a,b,c,d] = [3,5,1,15] 855 | 856 | const soma = a + b + c + d 857 | const sub = d - c 858 | const mult = a * b 859 | const div = d / a 860 | const modulo = a % 2 861 | 862 | console.log(soma, sub, mult, div, modulo) // 24 14 15 5 1 863 | ``` 864 | 865 | - 045 Operadores Relacionais 866 | - 03-Javascript-Fundamentos\relacionais.js 867 | 868 | ```js 869 | console.log('01) ', '1' == 1) // 01) true 870 | console.log('02) ', '1' === 1) // 02) false 871 | console.log('03) ', '3' != 3) // 03) false 872 | console.log('04) ', '3' !== 3) // 04) true 873 | console.log('05) ', 3 < 2) //false 874 | console.log('06) ', 3 > 2) // true 875 | console.log('07) ', 3 <= 2) // false 876 | console.log('08) ', 3 >= 2) // true 877 | 878 | const d1 = new Date(0) 879 | const d2 = new Date(0) 880 | 881 | console.log('9) ', d1 === d2) // false 882 | console.log('10) ', d1 == d2) // false 883 | console.log('11) ', d1.getTime() === d2.getTime()) // true 884 | 885 | console.log('12) ', undefined == null) // true 886 | console.log('13) ', undefined === null) // false 887 | 888 | ``` 889 | 890 | - 046 Operadores Logicos 891 | - 03-Javascript-Fundamentos\logicos.js 892 | 893 | ```js 894 | function compras(trabalho1, trabalho2){ 895 | const compraSorvete = trabalho1 || trabalho2 896 | const compraTV50 = trabalho1 && trabalho2 897 | //const compraTV32 = !!(trabalho1 ^ trabalho2) // bitwise XOR 898 | const compraTV32 = trabalho1 != trabalho2 899 | const manterSaudavel = !compraSorvete // operador unário 900 | 901 | return { compraSorvete, compraTV50, compraTV32, manterSaudavel} 902 | } 903 | 904 | console.log(compras(true, true)) 905 | console.log(compras(true, false)) 906 | console.log(compras(false, true)) 907 | console.log(compras(false, false)) 908 | 909 | /* 910 | { 911 | compraSorvete: true, 912 | compraTV50: true, 913 | compraTV32: false, 914 | manterSaudavel: false 915 | } 916 | { 917 | compraSorvete: true, 918 | compraTV50: false, 919 | compraTV32: true, 920 | manterSaudavel: false 921 | } 922 | { 923 | compraSorvete: true, 924 | compraTV50: false, 925 | compraTV32: true, 926 | manterSaudavel: false 927 | } 928 | { 929 | compraSorvete: false, 930 | compraTV50: false, 931 | compraTV32: false, 932 | manterSaudavel: true 933 | } 934 | */ 935 | 936 | 937 | ``` 938 | 939 | - 047 Operadores Unarios 940 | - 03-Javascript-Fundamentos\unarios.js 941 | 942 | ```js 943 | let num1 = 1 944 | let num2 = 2 945 | 946 | num1++ 947 | console.log(num1) 948 | --num1 949 | console.log(num1) 950 | 951 | console.log(++num1 === num2--) 952 | console.log(num1 === num2) 953 | 954 | /* 955 | 2 956 | 1 957 | true 958 | false 959 | */ 960 | ``` 961 | 962 | - 048 Operadores Ternario 963 | - 03-Javascript-Fundamentos\ternario.js 964 | 965 | ```js 966 | const resultado = nota => nota >= 7 ? 'Aprovado' : 'Reprovado' 967 | 968 | console.log(resultado(7.1)) 969 | console.log(resultado(6.1)) 970 | 971 | /* 972 | Aprovado 973 | Reprovado 974 | */ 975 | ``` 976 | 977 | - 049 Contexto de Execução Browser vs Node 978 | 979 | - 050 Tratamento de Erro (TryCatchThrow) 980 | - 03-Javascript-Fundamentos\erro.js 981 | ```js 982 | function tratarErrorElancar(erro){ 983 | //throw new Error('...') 984 | //throw true 985 | //throw 10 986 | //throw 'Mensagem' 987 | throw { 988 | nome: erro.name, 989 | msg: erro.message, 990 | date: new Date 991 | } 992 | } 993 | 994 | function imprimirNomeGritando(obj){ 995 | try{ 996 | console.log(obj.name.toUpperCase() + '!!!') 997 | }catch (e){ 998 | tratarErrorElancar(e) 999 | }finally{ 1000 | console.log('Final...') 1001 | } 1002 | } 1003 | const obj = {nome: 'José'} //erro 1004 | imprimirNomeGritando(obj) 1005 | 1006 | /* 1007 | throw { 1008 | ^ 1009 | { 1010 | nome: 'TypeError', 1011 | msg: "Cannot read property 'toUpperCase' of undefined", 1012 | date: 2020-01-05T20:47:14.557Z 1013 | } 1014 | */ 1015 | 1016 | ``` 1017 | 1018 | [Voltar ao Índice](#indice) 1019 | 1020 | --- 1021 | 1022 | 1023 | ## Javascript: Estruturas de Controle - 11 aulas 1024 | 1025 | - 052 Usando a Estrutura IF 01/2 1026 | - 04-Javascript-Estruturas-de-Controle\if_1.js 1027 | 1028 | ```js 1029 | function soBoaNoticia(nota){ 1030 | if(nota >= 7){ 1031 | console.log('Aprovado com ' + nota) 1032 | } 1033 | } 1034 | 1035 | soBoaNoticia(8.1) 1036 | soBoaNoticia(6.1) 1037 | 1038 | function seForVerdadeEuFalo(valor){ 1039 | if(valor){ 1040 | console.log('É verdade... ' + valor) 1041 | } 1042 | } 1043 | 1044 | seForVerdadeEuFalo() 1045 | seForVerdadeEuFalo(null) 1046 | seForVerdadeEuFalo(undefined) 1047 | seForVerdadeEuFalo(NaN) 1048 | seForVerdadeEuFalo('') 1049 | seForVerdadeEuFalo(0) 1050 | seForVerdadeEuFalo(-1) 1051 | seForVerdadeEuFalo(' ') 1052 | seForVerdadeEuFalo('?') 1053 | seForVerdadeEuFalo([]) 1054 | seForVerdadeEuFalo([1,2]) 1055 | seForVerdadeEuFalo({}) 1056 | 1057 | /* 1058 | provado com 8.1 1059 | É verdade... -1 1060 | É verdade... 1061 | É verdade... ? 1062 | É verdade... 1063 | É verdade... 1,2 1064 | É verdade... [object Object] 1065 | */ 1066 | ``` 1067 | 1068 | - 053 Usando a Estrutura IF 02/2 1069 | - 04-Javascript-Estruturas-de-Controle\if_2.js 1070 | ```js 1071 | function teste1(num){ 1072 | if(num > 7) 1073 | console.log('teste1 - ' + num) 1074 | 1075 | console.log('FINAL... de teste 1') 1076 | } 1077 | 1078 | teste1(8) 1079 | teste1(4) 1080 | 1081 | function teste2(num){ 1082 | if(num > 7) ; { // atenção ao ';' não usar com as estrutudas de controle 1083 | console.log('Teste 2 - ' + num) 1084 | } 1085 | } 1086 | teste2(6) 1087 | teste2(9) 1088 | 1089 | /* 1090 | teste1 - 8 1091 | FINAL... de teste 1 1092 | FINAL... de teste 1 1093 | Teste 2 - 6 1094 | Teste 2 - 9 1095 | */ 1096 | ``` 1097 | 1098 | - 054 Usando a Estrutura IFELSE 1099 | - 04-Javascript-Estruturas-de-Controle\ifelse.js 1100 | 1101 | ```js 1102 | const imprimirResultado = function (nota){ 1103 | if(nota >= 7){ 1104 | console.log('Aprovado') 1105 | }else{ 1106 | console.log('Reprovado') 1107 | } 1108 | } 1109 | imprimirResultado(5) 1110 | imprimirResultado(7) 1111 | imprimirResultado(3) 1112 | imprimirResultado('FAIL!') // atenção! 1113 | /* 1114 | Reprovado 1115 | Aprovado 1116 | Reprovado 1117 | Reprovado 1118 | */ 1119 | ``` 1120 | 1121 | - 055 Usando a Estrutura IFELSE IF... 1122 | - 04-Javascript-Estruturas-de-Controle\ifElse_if.js 1123 | 1124 | ```js 1125 | Number.prototype.entre = function (inicio, fim){ 1126 | return this >= inicio && this <= fim 1127 | } 1128 | 1129 | const imprimeResultado = function(nota){ 1130 | if(nota.entre(9,10)){ 1131 | console.log('Quadro de Honra') 1132 | }else if(nota.entre(7 , 8.99)){ 1133 | console.log('Aprovado') 1134 | }else if(nota.entre(4, 6.99)){ 1135 | console.log('Recuperação') 1136 | }else if(nota.entre(0,3.99)){ 1137 | console.log('Reprovado') 1138 | }else{ 1139 | console.log('Nota inválida') 1140 | } 1141 | } 1142 | 1143 | imprimeResultado(10) 1144 | imprimeResultado(8.9) 1145 | imprimeResultado(6.55) 1146 | imprimeResultado(3) 1147 | imprimeResultado(0) 1148 | /* 1149 | Quadro de Honra 1150 | Aprovado 1151 | Recuperação 1152 | Reprovado 1153 | Reprovado 1154 | */ 1155 | ``` 1156 | 1157 | - 056 Usando a Estrutura SWITCH 1158 | - 04-Javascript-Estruturas-de-Controle\switch.js 1159 | 1160 | ```js 1161 | const impriResultado = function(nota){ 1162 | switch(Math.floor(nota)){ 1163 | case 10: 1164 | case 9: 1165 | console.log('Quadro de Honra') 1166 | break 1167 | case 8: case 7: 1168 | console.log('Aprovrado') 1169 | break 1170 | case 6: case 5: case 4: 1171 | console.log('Recuperação') 1172 | break 1173 | case 3: case 2: case 1: 1174 | console.log('Reprovado') 1175 | break 1176 | default: 1177 | console.log('Nota Inválida!!!') 1178 | break 1179 | } 1180 | } 1181 | 1182 | impriResultado(10) 1183 | impriResultado(7) 1184 | impriResultado(5) 1185 | impriResultado(2) 1186 | impriResultado(0) 1187 | /* 1188 | Quadro de Honra 1189 | Aprovrado 1190 | Recuperação 1191 | Reprovado 1192 | Nota Inválida!!! 1193 | */ 1194 | ``` 1195 | 1196 | - 057 Usando a Estrutura WHILE 1197 | - 04-Javascript-Estruturas-de-Controle\while.js 1198 | 1199 | ```js 1200 | function getInteiroAleatorio(min, max){ 1201 | const valor = Math.random() * (max - min) + min 1202 | return Math.floor(valor) 1203 | } 1204 | 1205 | let opcao = 0 1206 | 1207 | while(opcao != -1){ 1208 | opcao = getInteiroAleatorio(-1, 10) 1209 | console.log(`Opção escolhida foi ${opcao}.`) 1210 | } 1211 | 1212 | console.log('Até A próxima!') 1213 | 1214 | /* 1215 | Opção escolhida foi 9. 1216 | Opção escolhida foi 5. 1217 | Opção escolhida foi -1. 1218 | Até A próxima! 1219 | */ 1220 | ``` 1221 | 1222 | - 058 Usando a Estrutura DOWHILE 1223 | - 04-Javascript-Estruturas-de-Controle\dowhile.js 1224 | 1225 | ```js 1226 | function getInteiroAleatorio(min, max){ 1227 | const valor = Math.random() * (max - min) + min 1228 | return Math.floor(valor) 1229 | } 1230 | 1231 | let opcao = -1 1232 | 1233 | do{ 1234 | opcao = getInteiroAleatorio(-1, 10) 1235 | console.log(`Opção escolhida foi ${opcao}.`) 1236 | }while(opcao != -1) 1237 | 1238 | console.log('Até A próxima!') 1239 | 1240 | /* 1241 | Opção escolhida foi 7. 1242 | Opção escolhida foi 3. 1243 | Opção escolhida foi -1. 1244 | Até A próxima! 1245 | */ 1246 | ``` 1247 | 1248 | - 059 Usando a Estrutura FOR 1249 | - 04-Javascript-Estruturas-de-Controle\for.js 1250 | 1251 | ```js 1252 | let contador = 1 1253 | while(contador <= 5){ 1254 | console.log(`contador = ${contador}`) 1255 | contador++ 1256 | } 1257 | 1258 | for(let i = 0 ; i <= 5 ; i++){ 1259 | console.log(`i = ${i}`) 1260 | } 1261 | const notas = [5.5, 4.3 , 9.9, 10, 5.6] 1262 | for(let i = 0 ; i < notas.length ; i++){ 1263 | console.log(`notas = ${notas[i]}`) 1264 | } 1265 | /* 1266 | contador = 1 1267 | contador = 2 1268 | contador = 3 1269 | contador = 4 1270 | contador = 5 1271 | i = 0 1272 | i = 1 1273 | i = 2 1274 | i = 3 1275 | i = 4 1276 | i = 5 1277 | notas = 5.5 1278 | notas = 4.3 1279 | notas = 9.9 1280 | notas = 10 1281 | notas = 5.6 1282 | */ 1283 | ``` 1284 | 1285 | - 060 Usando a Estrutura FORIN 1286 | - 04-Javascript-Estruturas-de-Controle\for_in.js 1287 | 1288 | ```js 1289 | const notas = [5.5, 4.3 , 9.9, 10, 5.6] 1290 | 1291 | for(let i in notas){ 1292 | console.log(i, notas[i]) 1293 | } 1294 | 1295 | const pessoa = { 1296 | nome: 'Jose', 1297 | sobrenome: 'malcher jr', 1298 | idade: 35, 1299 | peso: 95 1300 | } 1301 | for (let i in pessoa){ 1302 | console.log(`${i} = ${pessoa[i]} `) 1303 | } 1304 | /* 1305 | 0 5.5 1306 | 1 4.3 1307 | 2 9.9 1308 | 3 10 1309 | 4 5.6 1310 | nome = Jose 1311 | sobrenome = malcher jr 1312 | idade = 35 1313 | peso = 95 1314 | */ 1315 | ``` 1316 | 1317 | - 061 Usando Break Continue 1318 | - 04-Javascript-Estruturas-de-Controle\breackContinue.js 1319 | 1320 | ```js 1321 | const nums = [1,2,3,4,5,6,7] 1322 | 1323 | for(x in nums){ 1324 | if(x == 3){ 1325 | break 1326 | } 1327 | console.log(`${x} = ${nums[x]}`) 1328 | } 1329 | 1330 | for (y in nums){ 1331 | if(y == 3){ 1332 | continue 1333 | } 1334 | console.log(`${y} = ${nums[y]}`) 1335 | } 1336 | exteno: 1337 | for(a in nums){ 1338 | for(b in nums){ 1339 | if(a == 2 && b == 3){ 1340 | break exteno 1341 | } 1342 | console.log(`Par = ${a}, ${b}`) 1343 | } 1344 | } 1345 | /* 1346 | 0 = 1 1347 | 1 = 2 1348 | 2 = 3 1349 | 0 = 1 1350 | 1 = 2 1351 | 2 = 3 1352 | 4 = 5 1353 | Par = 0, 0 1354 | Par = 0, 1 1355 | Par = 0, 2 1356 | Par = 0, 3 1357 | Par = 0, 4 1358 | Par = 1, 0 1359 | Par = 1, 1 1360 | Par = 1, 2 1361 | Par = 1, 3 1362 | Par = 1, 4 1363 | Par = 2, 0 1364 | Par = 2, 1 1365 | Par = 2, 2 1366 | */ 1367 | ``` 1368 | 1369 | [Voltar ao Índice](#indice) 1370 | 1371 | --- 1372 | 1373 | ## Javascript: Função - 24 aulas 1374 | 1375 | - 062 Cidadão de Primeira Linha 1376 | - 05-Javascript-Funcao\cidacaoPrimeiraClasse.js 1377 | 1378 | ```js 1379 | // FUnção em JS é FIrst-Class Object (citizens) 1380 | // Higher-order function 1381 | 1382 | //cria de forma literal 1383 | function fun1(){ 1384 | 1385 | } 1386 | 1387 | //armazer em uma forma variável 1388 | const fun2 = function(){ 1389 | 1390 | } 1391 | 1392 | //armazenar em um Array 1393 | const array = [function(a,b){return a+ b}, fun1, fun2] 1394 | console.log(array[0](2,3)) // 5 1395 | 1396 | // Armazenar em um atributo de objeto 1397 | const obj = {} 1398 | obj.falar = function(){return 'Opa'} 1399 | console.log(obj.falar()) // Opa 1400 | 1401 | // Passar função como param 1402 | function run(fun){ 1403 | fun() 1404 | } 1405 | run(function(){console.log('Executando...')}) //Executando... 1406 | 1407 | // Uma função pode retornar//conter uma função 1408 | 1409 | function soma(a,b){ 1410 | return function(c){ 1411 | console.log(a + b + c) 1412 | } 1413 | } 1414 | soma(2,3)(4) // 9 1415 | const cincomais = soma(2,3) 1416 | cincomais(4) // 9 1417 | ``` 1418 | 1419 | - 063 Parametros e Retorno São Opcionais 1420 | - 05-Javascript-Funcao\paramRetornoSaoOpcionais.js 1421 | 1422 | ```js 1423 | function area (largura, altura){ 1424 | const area = largura * altura 1425 | if(area > 10){ 1426 | console.log(`valor acima do permitido ${area}m2`) 1427 | }else{ 1428 | return area 1429 | } 1430 | } 1431 | 1432 | console.log(area(2,1)) 1433 | console.log(area(2)) 1434 | console.log(area()) 1435 | console.log(area(2,1,3,17,22,44)) 1436 | console.log(area(5,5)) 1437 | /* 1438 | 2 1439 | NaN 1440 | NaN 1441 | 2 1442 | valor acima do permitido 25m2 1443 | undefined 1444 | */ 1445 | ``` 1446 | 1447 | - 064 Parametros Variaveis 1448 | - 05-Javascript-Funcao\paramvariaveis.js 1449 | 1450 | ```js 1451 | function soma(){ 1452 | let soma = 0 1453 | for(i in arguments){ 1454 | soma += arguments[i] 1455 | } 1456 | return soma 1457 | } 1458 | 1459 | console.log(soma()) 1460 | console.log(soma(1)) 1461 | console.log(soma(1.1, 2.2, 3.3)) 1462 | 1463 | console.log(soma(1.1, 2.2, "Teste")) 1464 | console.log(soma('a','b','c')) 1465 | 1466 | /* 1467 | 0 1468 | 1 1469 | 6.6 1470 | 3.3000000000000003Teste 1471 | 0abc 1472 | */ 1473 | ``` 1474 | 1475 | - 065 Parametro Padrão 1476 | - 05-Javascript-Funcao\paramPadrao.js 1477 | 1478 | ```js 1479 | // estrategia 1 para gerar valor padrão 1480 | function soma1(a,b,c){ 1481 | a = a || 1 1482 | b = b || 1 1483 | c = c || 1 1484 | return a + b + c 1485 | } 1486 | 1487 | console.log(soma1(), soma1(3), soma1(1,2,3),soma1(0,0,0)) 1488 | 1489 | // estratégia 2, 3 e 4 para gerar valor padrão 1490 | function soma2(a,b,c,){ 1491 | a = a !== undefined ? a : 1 1492 | b = 1 in arguments ? b : 1 1493 | c = isNaN(c) ? 1 : c 1494 | return a + b + c 1495 | } 1496 | console.log(soma2(), soma2(3), soma2(1,2,3), soma2(0,0,0)) 1497 | 1498 | // valor padrão do es2015 1499 | function soma3(a =1, b = 1, c = 1 ){ 1500 | return a + b + c 1501 | } 1502 | console.log(soma3(), soma3(3), soma3(1,2,3), soma3(0,0,0)) 1503 | 1504 | 1505 | /* 1506 | 3 5 6 3 1507 | 3 5 6 0 1508 | 3 5 6 0 1509 | 1510 | */ 1511 | ``` 1512 | 1513 | - 066 this pode Variar 1514 | 1515 | Artigo com mais contextos: 1516 | 1517 | - 067 this e a Funcão bind 01 1518 | - 05-Javascript-Funcao\thisEBind.js 1519 | 1520 | ```js 1521 | const pessoa = { 1522 | saudacao : 'Bom dia', 1523 | falar(){ 1524 | console.log(this.saudacao); 1525 | } 1526 | } 1527 | 1528 | pessoa.falar() 1529 | const falar = pessoa.falar 1530 | falar() 1531 | /* 1532 | Bom dia 1533 | undefined 1534 | */ 1535 | 1536 | const falarDePessoa = pessoa.falar.bind(pessoa) 1537 | falarDePessoa() 1538 | 1539 | // Bom dia 1540 | 1541 | ``` 1542 | 1543 | - 068 this e a Funcão bind 02 1544 | - 05-Javascript-Funcao\thisEBind2.js 1545 | 1546 | ```js 1547 | function Pessoa(){ 1548 | this.idade = 0 1549 | 1550 | const self = this 1551 | setInterval(function(){ 1552 | /* this.idade++ */ 1553 | self.idade++ 1554 | console.log(self.idade) 1555 | }/* .bind(this) */, 1000) 1556 | } 1557 | 1558 | new Pessoa 1559 | ``` 1560 | 1561 | - 069 Funcões Arrow 01 1562 | - 05-Javascript-Funcao\arrowFunction.js 1563 | 1564 | ```js 1565 | let dobro = function(a){ 1566 | return 2 * a 1567 | } 1568 | 1569 | dobro = (a) =>{ 1570 | return 2 * a 1571 | } 1572 | 1573 | dobro = a => 2 * a // return está inplícito 1574 | console.log(dobro(Math.PI)) 1575 | 1576 | let ola = function(){ 1577 | return 'Olá' 1578 | } 1579 | 1580 | ola = () => 'Olá' 1581 | ola = _ => 'Olá' // possui um param 1582 | console.log(ola()) 1583 | 1584 | /* 1585 | 6.283185307179586 1586 | Olá 1587 | */ 1588 | ``` 1589 | 1590 | - 070 Funcões Arrow 02 1591 | - 05-Javascript-Funcao\arrowFunction2.js 1592 | 1593 | ```js 1594 | function Pessoa(){ 1595 | this.idade = 0 1596 | 1597 | setInterval(()=> { 1598 | this.idade++ 1599 | console.log(this.idade) 1600 | }, 1000) 1601 | } 1602 | new Pessoa 1603 | ``` 1604 | 1605 | - 071 Funcões Arrow 03 1606 | - 05-Javascript-Funcao\arrowFunction3y.js 1607 | 1608 | ```js 1609 | let comparaComThis = function(param){ 1610 | console.log(this === param) 1611 | } 1612 | comparaComThis(global) // true 1613 | 1614 | const obj = {} 1615 | comparaComThis = comparaComThis.bind(obj) 1616 | comparaComThis(global) // false 1617 | comparaComThis(obj) // true 1618 | 1619 | let comparaComThisArrow = param => console.log(this === param) 1620 | comparaComThisArrow(global) // false 1621 | comparaComThisArrow(module.exports) // true 1622 | 1623 | comparaComThisArrow = comparaComThisArrow.bind(obj) // forçando o contexto 1624 | comparaComThisArrow(obj) // false 1625 | comparaComThisArrow(module.exports) // true 1626 | 1627 | 1628 | 1629 | ``` 1630 | 1631 | - 072 Funcões Anônimas 1632 | - 05-Javascript-Funcao\funcaoAnonima.js 1633 | 1634 | ```js 1635 | const soma = function(x,y){ 1636 | return x + y 1637 | } 1638 | 1639 | const imprimeResultado = function(a, b , operacao = soma){ 1640 | console.log(operacao(a, b)) 1641 | } 1642 | imprimeResultado(3,4) 1643 | imprimeResultado(3,4, soma) 1644 | imprimeResultado(3,4, function(x,y){ 1645 | return x - y 1646 | }) 1647 | imprimeResultado(3,4, (x,y) => x * y) 1648 | 1649 | const pessoa = { 1650 | falar: function(){ 1651 | console.log('Olaa') 1652 | } 1653 | } 1654 | pessoa.falar() 1655 | 1656 | /* 1657 | 7 1658 | 7 1659 | -1 1660 | 12 1661 | Olaa 1662 | */ 1663 | ``` 1664 | 1665 | - 073 Funcões Callback 01 1666 | - 05-Javascript-Funcao\callback1.js 1667 | 1668 | ```js 1669 | const fabricantes = ['Mercedes' , 'Audi', 'bmw'] 1670 | 1671 | function imprimir(nome , indice){ 1672 | console.log(`${indice + 1} . $[nome]`) 1673 | } 1674 | fabricantes.forEach(imprimir) 1675 | fabricantes.forEach(fabricantes => console.log(fabricantes)) 1676 | 1677 | /* 1678 | 1 . $[nome] 1679 | 2 . $[nome] 1680 | 3 . $[nome] 1681 | Mercedes 1682 | Audi 1683 | bmw 1684 | */ 1685 | ``` 1686 | 1687 | - 074 Funcões Callback 02 1688 | - 05-Javascript-Funcao\callback2.js 1689 | 1690 | ```js 1691 | const notas = [7.7, 8.8, 6.6, 4.4, 3.4, 9.0] 1692 | 1693 | //sem callback 1694 | let notasBaixas1 = [] 1695 | for (let i in notas){ 1696 | if(notas[i]< 7){ 1697 | notasBaixas1.push(notas[i]) 1698 | } 1699 | } 1700 | console.log(notasBaixas1) 1701 | 1702 | const notasBaixas2 = notas.filter(function(nota){ 1703 | return nota < 7 1704 | }) 1705 | console.log(notasBaixas2) 1706 | 1707 | const notasBaixas3 = notas.filter(nota => nota < 7) 1708 | console.log(notasBaixas3) 1709 | 1710 | /* 1711 | [6.6, 4.4, 3.4 ] 1712 | [ 6.6, 4.4, 3.4 ] 1713 | [ 6.6, 4.4, 3.4 ] 1714 | 1715 | */ 1716 | ``` 1717 | 1718 | - 075 Funcões Callback 03 1719 | - 05-Javascript-Funcao\callback3.js 1720 | 1721 | ```js 1722 | // exemplo no browser 1723 | 1724 | document.getElementsByTagName('body')[0].onclick = function(e){ 1725 | console.log('O evento Ocorreu') 1726 | } 1727 | ``` 1728 | 1729 | - 076 Funcões Construtoras 1730 | 1731 | ```js 1732 | function Carro(velocidadeMaxima = 200, delta = 5){ 1733 | //atributo privado 1734 | let velocidadeAtual = 0 1735 | 1736 | //método publico 1737 | this.acelerar = function(){ 1738 | if(velocidadeAtual + delta <= velocidadeMaxima){ 1739 | velocidadeAtual += delta 1740 | }else{ 1741 | velocidadeAtual = velocidadeMaxima 1742 | } 1743 | } 1744 | 1745 | //metodo publico 1746 | this.getvelocidadeAtual = function(){ 1747 | return velocidadeAtual 1748 | } 1749 | 1750 | } 1751 | 1752 | const uno = new Carro 1753 | uno.acelerar() 1754 | console.log(uno.getvelocidadeAtual()) 1755 | 1756 | const ferrari = new Carro(350, 20) 1757 | ferrari.acelerar() 1758 | ferrari.acelerar() 1759 | ferrari.acelerar() 1760 | console.log(ferrari.getvelocidadeAtual()) 1761 | 1762 | console.log(typeof Carro) 1763 | console.log(typeof ferrari) 1764 | ``` 1765 | 1766 | - 077 Tipos de Declaracão 1767 | - 05-Javascript-Funcao\tiposDeclaracao.js 1768 | 1769 | ```js 1770 | console.log(soma(10,4)) 1771 | // function declaration 1772 | function soma(x, y){ 1773 | return x + y 1774 | } 1775 | 1776 | // function expression 1777 | const sub = function(x,y){ 1778 | return x - y 1779 | } 1780 | console.log(sub(10,5)) 1781 | 1782 | // named function expression 1783 | const mult = function mult(x,y){ 1784 | return x * y 1785 | } 1786 | console.log(mult(3,5)) 1787 | 1788 | ``` 1789 | 1790 | - 078 Contexto Lexico 1791 | - 05-Javascript-Funcao\contextoLexico.js 1792 | 1793 | ```js 1794 | const valor = 'Global' 1795 | function minhaFuncao(){ 1796 | console.log(valor) 1797 | } 1798 | function exer(){ 1799 | const valor = 'Local' 1800 | minhaFuncao() 1801 | } 1802 | exer() // Global 1803 | 1804 | ``` 1805 | 1806 | - 079 Closures 1807 | - 05-Javascript-Funcao\closure.js 1808 | 1809 | ```js 1810 | // Closure é o escopo criado quando uma função é declarada 1811 | // Esse escopo permite a função acessar e manipular variáveis externas à função 1812 | 1813 | // Contexto léxico em ação! 1814 | 1815 | const x = 'GLOBAL' 1816 | 1817 | function fora(){ 1818 | const x = 'LOCAL' 1819 | function dentro(){ 1820 | return x 1821 | } 1822 | return dentro 1823 | } 1824 | 1825 | const minhaFuncao = fora() 1826 | console.log(minhaFuncao()) 1827 | ``` 1828 | 1829 | - 080 Funcão Factory 01 1830 | - 05-Javascript-Funcao\factory.js 1831 | 1832 | ```js 1833 | // factory simples 1834 | 1835 | function criarPessoas(){ 1836 | return{ 1837 | nome:'Ana', 1838 | sobrenome: 'silva' 1839 | } 1840 | } 1841 | console.log(criarPessoas()) 1842 | 1843 | ``` 1844 | 1845 | - 081 Funcão Factory 02 1846 | - 05-Javascript-Funcao\factory2.js 1847 | 1848 | ```js 1849 | function criarProduto(nome, preco){ 1850 | return{ 1851 | nome, 1852 | preco, 1853 | desconto: 0.1 1854 | } 1855 | } 1856 | 1857 | console.log(criarProduto('Notebook', 10000)) 1858 | console.log(criarProduto('Celular', 3000)) 1859 | ``` 1860 | 1861 | - 082 Classe vs Funcão Factory 1862 | - 05-Javascript-Funcao\classVsFactory.js 1863 | 1864 | ```js 1865 | class Pessoa{ 1866 | constructor(nome){ 1867 | this.nome = nome 1868 | } 1869 | falar(){ 1870 | console.log(`Meu nome é ${this.nome}`) 1871 | } 1872 | } 1873 | 1874 | const p1 = new Pessoa("José") 1875 | p1.falar() 1876 | 1877 | const criarPessoa = nome => { 1878 | return { 1879 | falar: () => console.log(`Meu nome é... ${nome}`) 1880 | } 1881 | } 1882 | const p2 = criarPessoa("José Malcher jr") 1883 | p2.falar() 1884 | ``` 1885 | 1886 | - 083 Desafio Funcão Construtora 1887 | - 05-Javascript-Funcao\desafioFuncaoConstrutora.js 1888 | 1889 | ```js 1890 | function Pessoa(nome){ 1891 | this.nome = nome 1892 | this.falar = function(){ 1893 | console.log(`Meu nome é ${this.nome}`) 1894 | } 1895 | } 1896 | 1897 | const p1 = new Pessoa("José Malcher") 1898 | p1.falar() 1899 | console.log(p1.nome) 1900 | 1901 | /* 1902 | Meu nome é José Malcher 1903 | José Malcher 1904 | */ 1905 | ``` 1906 | 1907 | - 084 IIFE 1908 | - 05-Javascript-Funcao\IIFE.js 1909 | 1910 | ```js 1911 | // IIFE -> Imediatamente invocada Function expression (fugir do escopo global) 1912 | 1913 | (function(){ 1914 | console.log('Será executado na hora!') 1915 | console.log('Foge do escopo mais abrangente') 1916 | })() 1917 | ``` 1918 | 1919 | - 085 Call Apply 1920 | - 05-Javascript-Funcao\callApply.js 1921 | 1922 | ```js 1923 | function getPreco(imposto = 0, moeda = 'R$'){ 1924 | return `${moeda} ${this.preco * (1 - this.desc) * (1 + imposto)}` 1925 | } 1926 | const produto = { 1927 | nome: 'Notebook', 1928 | preco: 5000, 1929 | desc: 0.15, 1930 | getPreco 1931 | } 1932 | global.preco = 20 1933 | global.desc = 0.1 1934 | console.log(getPreco()) 1935 | console.log(produto.getPreco()) 1936 | 1937 | const carro = {preco: 5000, desc:0.15} 1938 | console.log(getPreco.call(carro)) 1939 | console.log(getPreco.apply(carro)) 1940 | 1941 | console.log(getPreco.call(carro, 0.17, '$')) 1942 | console.log(getPreco.apply(global, [0.17, '$'])) 1943 | 1944 | /* 1945 | R$ 18 1946 | R$ 4250 1947 | R$ 4250 1948 | R$ 4250 1949 | $ 4972.5 1950 | $ 21.06 1951 | */ 1952 | ``` 1953 | 1954 | [Voltar ao Índice](#indice) 1955 | 1956 | --- 1957 | " 1958 | 1959 | ## Javascript: Objeto - 17 aulas 1960 | 1961 | - 086 - Introdução a OO 1962 | - 06-Javascript-Objeto\086-Introducao-ao-OO.js 1963 | 1964 | ```js 1965 | // Código não Executável! 1966 | 1967 | // Procedural 1968 | processamento(valor1, valor2, valor3) 1969 | 1970 | // OO 1971 | objeto = { 1972 | valor, 1973 | valor2, 1974 | valor, 1975 | processamento(){ 1976 | // .. 1977 | } 1978 | } 1979 | objeto.processamento(); // Foco passou a ser o Objeto 1980 | 1981 | /* 1982 | 1983 | Principios: 1984 | 1. Abstração 1985 | 2. Encapsulamento 1986 | 3. Herança (prototype) 1987 | 4. Polimorfismo 1988 | 1989 | */ 1990 | 1991 | ``` 1992 | 1993 | - 087 - Revisão sobre Objeto 1994 | - 06-Javascript-Objeto\ObjetoRevisao.js 1995 | 1996 | ```js 1997 | // Coleção dinâmica de pares chave/valor 1998 | 1999 | const produto = new Object 2000 | produto.nome = 'Cadeira' 2001 | produto['marca do produto'] = 'Generica' 2002 | produto.preco = 200 2003 | 2004 | console.log(produto) 2005 | delete produto.preco 2006 | delete produto['marca do produto'] 2007 | console.log(produto) 2008 | /* 2009 | { nome: 'Cadeira', 'marca do produto': 'Generica', preco: 200 } 2010 | { nome: 'Cadeira' } 2011 | */ 2012 | 2013 | const carro = { 2014 | modelo: 'A4', 2015 | valor: 10000, 2016 | proprietario: { 2017 | nome:'Jose', 2018 | idade: 35, 2019 | endereco:{ 2020 | rua: 'Rua tal tal', 2021 | numero: 123 2022 | } 2023 | }, 2024 | condutores: [{ 2025 | nome: 'Jose Malcher Jr', 2026 | idade: 35 2027 | },{ 2028 | nome: 'Luciana Barbosa', 2029 | idade: 34 2030 | }], 2031 | calculaValorSeguro: function(){ 2032 | // ... 2033 | } 2034 | 2035 | } 2036 | carro.proprietario.endereco.numero = 4455 2037 | carro['proprietario']['endereco']['rua'] = 'Av. GOv. jose malcher' 2038 | console.log(carro) 2039 | 2040 | delete carro.condutores 2041 | delete carro.proprietario 2042 | delete carro.calculaValorSeguro 2043 | console.log(carro) 2044 | console.log(carro.condutores) // undefined 2045 | //console.log(carro.condutores.length) // erro 2046 | 2047 | /* 2048 | { 2049 | modelo: 'A4', 2050 | valor: 10000, 2051 | proprietario: { 2052 | nome: 'Jose', 2053 | idade: 35, 2054 | endereco: { rua: 'Av. GOv. jose malcher', numero: 4455 } 2055 | }, 2056 | condutores: [ 2057 | { nome: 'Jose Malcher Jr', idade: 35 }, 2058 | { nome: 'Luciana Barbosa', idade: 34 } 2059 | ], 2060 | calculaValorSeguro: [Function: calculaValorSeguro] 2061 | } 2062 | { modelo: 'A4', valor: 10000 } 2063 | undefined 2064 | */ 2065 | ``` 2066 | 2067 | - 088 - Estrategias de criação de Objetos 2068 | - 06-Javascript-Objeto\criandoObjetos.js 2069 | 2070 | ```js 2071 | // usando a notação literal 2072 | 2073 | const obj1 = {} 2074 | console.log(obj1) 2075 | 2076 | // objeto em JS 2077 | console.log(typeof Object, typeof new Object) 2078 | const obj2 = new Object 2079 | console.log(obj2) 2080 | 2081 | // funções construtoras 2082 | function Produto(nome, preco, desc){ 2083 | this.nome = nome 2084 | this.getPrecoComDesconto = () =>{ 2085 | return preco * (1 - desc) 2086 | } 2087 | } 2088 | const p1 = new Produto('Caneta', 7.99, 0.15) 2089 | const p2 = new Produto('Notebook', 2998.99, 0.25) 2090 | console.log(p1.getPrecoComDesconto() , p2.getPrecoComDesconto()) 2091 | 2092 | // Função Factory 2093 | function criarFuncionario(nome, salarioBase, faltas){ 2094 | return { 2095 | nome, salarioBase, faltas, 2096 | getSalario(){ 2097 | return (salarioBase/30) * (30 - faltas) 2098 | } 2099 | } 2100 | } 2101 | const f1 = criarFuncionario('Jose', 7980, 4) 2102 | const f2 = criarFuncionario('Maria', 11400, 1) 2103 | console.log(f1.getSalario(), f2.getSalario()) 2104 | 2105 | // Object.create 2106 | const filha = Object.create(null) 2107 | filha.nome= 'Ana' 2108 | console.log(filha) 2109 | 2110 | // Uma função famosa que retorna um Objeto... 2111 | const fromJSON = JSON.parse('{"info":"Sou um JSON"}') 2112 | console.log(fromJSON.info) 2113 | ``` 2114 | 2115 | - 089 - Objetos Constantes 2116 | - 090 - Notações Literais 2117 | - 091 - Getters Setters 2118 | - 092 - Funções importantes de Objetos 2119 | - 093 - Herança 01 2120 | - 094 - Herança 02 2121 | - 095 - Herança 03 2122 | - 096 - Herança 04 2123 | - 097 - Herança 05 2124 | - 098 - Herança 06 2125 | - 099 - Evitando modificações 2126 | - 100 - JSON vc Objeto 2127 | - 101 - Classes 01 2128 | - 102 - Classes 02 2129 | 2130 | [Voltar ao Índice](#indice) 2131 | 2132 | --- 2133 | 2134 | 2135 | ## Javascript: Array - 16 aulas 2136 | 2137 | 2138 | 2139 | [Voltar ao Índice](#indice) 2140 | 2141 | --- 2142 | 2143 | 2144 | ## Node - 23 aulas 2145 | 2146 | 2147 | 2148 | [Voltar ao Índice](#indice) 2149 | 2150 | --- 2151 | 2152 | 2153 | ## ESNext - 14 aulas 2154 | 2155 | 2156 | 2157 | [Voltar ao Índice](#indice) 2158 | 2159 | --- 2160 | 2161 | 2162 | ## Conceitos sobre Web - 10 aulas 2163 | 2164 | 2165 | 2166 | [Voltar ao Índice](#indice) 2167 | 2168 | --- 2169 | 2170 | 2171 | ## HTML - 22 aulas 2172 | 2173 | 2174 | 2175 | [Voltar ao Índice](#indice) 2176 | 2177 | --- 2178 | 2179 | 2180 | ## CSS - 39 aulas 2181 | 2182 | 2183 | 2184 | [Voltar ao Índice](#indice) 2185 | 2186 | --- 2187 | 2188 | 2189 | ## Integrando HTML, CSS e JS - 23 aulas 2190 | 2191 | 2192 | 2193 | [Voltar ao Índice](#indice) 2194 | 2195 | --- 2196 | 2197 | 2198 | ## Ajax - 12 aulas 2199 | 2200 | 2201 | 2202 | [Voltar ao Índice](#indice) 2203 | 2204 | --- 2205 | 2206 | 2207 | ## Gulp - 14 aulas 2208 | 2209 | 2210 | 2211 | [Voltar ao Índice](#indice) 2212 | 2213 | --- 2214 | 2215 | 2216 | ## Webpack - 10 aulas 2217 | 2218 | 2219 | 2220 | [Voltar ao Índice](#indice) 2221 | 2222 | --- 2223 | 2224 | 2225 | ## jQuery - 18 aulas 2226 | 2227 | 2228 | 2229 | [Voltar ao Índice](#indice) 2230 | 2231 | --- 2232 | 2233 | 2234 | ## Bootstrap - 24 aulas 2235 | 2236 | 2237 | 2238 | [Voltar ao Índice](#indice) 2239 | 2240 | --- 2241 | 2242 | 2243 | ## Projeto Galeria (Bootstrap/jQuery/Webpack) - 8 aulas 2244 | 2245 | 2246 | 2247 | [Voltar ao Índice](#indice) 2248 | 2249 | --- 2250 | 2251 | 2252 | ## React - 8 aulas 2253 | 2254 | 2255 | 2256 | [Voltar ao Índice](#indice) 2257 | 2258 | --- 2259 | 2260 | 2261 | ## Projeto Calculadora - 7 aulas 2262 | 2263 | 2264 | 2265 | [Voltar ao Índice](#indice) 2266 | 2267 | --- 2268 | 2269 | 2270 | ## Projeto Cadastro de Usuário - 15 aulas 2271 | 2272 | 2273 | 2274 | [Voltar ao Índice](#indice) 2275 | 2276 | --- 2277 | 2278 | 2279 | ## VueJS - 10 aulas 2280 | 2281 | 2282 | 2283 | [Voltar ao Índice](#indice) 2284 | 2285 | --- 2286 | 2287 | 2288 | ## Projetos VueJS - 3 aulas 2289 | 2290 | 2291 | 2292 | [Voltar ao Índice](#indice) 2293 | 2294 | --- 2295 | 2296 | 2297 | ## Projeto Calculadora (Vue) - 6 aulas 2298 | 2299 | 2300 | 2301 | [Voltar ao Índice](#indice) 2302 | 2303 | --- 2304 | 2305 | 2306 | ## Projeto Monty Hall (Vue) - 5 aulas 2307 | 2308 | 2309 | 2310 | [Voltar ao Índice](#indice) 2311 | 2312 | --- 2313 | 2314 | 2315 | ## Banco Relacional - 24 aulas 2316 | 2317 | 2318 | 2319 | [Voltar ao Índice](#indice) 2320 | 2321 | --- 2322 | 2323 | 2324 | ## Banco Não Relacional - 16 aulas 2325 | 2326 | 2327 | 2328 | [Voltar ao Índice](#indice) 2329 | 2330 | --- 2331 | 2332 | 2333 | ## Express - 12 aulas 2334 | 2335 | 2336 | 2337 | [Voltar ao Índice](#indice) 2338 | 2339 | --- 2340 | 2341 | 2342 | ## Projeto Base de Conhecimento • Backend - 25 aulas 2343 | 2344 | 2345 | 2346 | [Voltar ao Índice](#indice) 2347 | 2348 | --- 2349 | 2350 | 2351 | ## Projeto Base de Conhecimento • Frontend - 31 aulas 2352 | 2353 | 2354 | 2355 | [Voltar ao Índice](#indice) 2356 | 2357 | --- 2358 | 2359 | 2360 | ## Conclusão - 1 aula 2361 | 2362 | 2363 | 2364 | [Voltar ao Índice](#indice) 2365 | 2366 | --- 2367 | 2368 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Curso Web Moderno Completo com JavaScript 2021 + Projetos 3 | 4 | https://www.udemy.com/course/curso-web/ 5 | 6 | Domine Web com 15 Cursos + Projetos: Javascript Angular React Next Vue Node HTML CSS jQuery Bootstrap Webpack Gulp MySQL 7 | 8 | ## Índice 9 | 10 | 1. [Seção 1: Introdução Curso Desenvolvimento Web](#parte1) 11 | 2. [Seção 2: Configuração do Ambiente](#parte2) 12 | 3. [Seção 3: Iniciando com Programação](#parte3) 13 | 4. [Seção 4: Javascript: Fundamentos](#parte4) 14 | 5. [Seção 5: Javascript: Estruturas de Controle](#parte5) 15 | 6. [Seção 6: Javascript: Função](#parte6) 16 | 7. [Seção 7: Javascript: Objeto](#parte7) 17 | 8. [Seção 8: Javascript: Array](#parte8) 18 | 9. [Seção 9: Lista de Exercícios de JavaScript](#parte9) 19 | 10. [Seção 10: Node](#parte10) 20 | 11. [Seção 11: ESNext](#parte11) 21 | 12. [Seção 12: Conceitos sobre Web](#parte12) 22 | 13. [Seção 13: HTML](#parte13) 23 | 14. [Seção 14: CSS](#parte14) 24 | 15. [Seção 15: Integrando HTML, CSS e JS](#parte15) 25 | 16. [Seção 16: Ajax](#parte16) 26 | 17. [Seção 17: Gulp](#parte17) 27 | 18. [Seção 18: Webpack](#parte18) 28 | 19. [Seção 19: jQuery](#parte19) 29 | 20. [Seção 20: Bootstrap](#parte20) 30 | 21. [Seção 21: Projeto Galeria (Bootstrap/jQuery/Webpack)](#parte21) 31 | 22. [Seção 22: React](#parte22) 32 | 23. [Seção 23: Projeto Calculadora](#parte23) 33 | 24. [Seção 24: Projeto Cadastro de Usuário](#parte24) 34 | 25. [Seção 25: Projeto Cadastro - Integração com Banco de dados (Firestore)](#parte25) 35 | 26. [Seção 26: VueJS](#parte26) 36 | 27. [Seção 27: Projetos VueJS](#parte27) 37 | 28. [Seção 28: Projeto Calculadora (Vue)](#parte28) 38 | 29. [Seção 29: Projeto Monty Hall (Vue)](#parte29) 39 | 30. [Seção 30: Aplicação Desktop com JavaScript, Electron JS e Vue JS](#parte30) 40 | 31. [Seção 31: Angular 9](#parte31) 41 | 32. [Seção 32: Banco Relacional](#parte32) 42 | 33. [Seção 33: Banco Não Relacional](#parte33) 43 | 34. [Seção 34: Express](#parte34) 44 | 35. [Seção 35: Projeto Base de Conhecimento • Backend](#parte35) 45 | 36. [Seção 36: Projeto Base de Conhecimento • Frontend](#parte36) 46 | 37. [Seção 37: Publicando uma Aplicação VueJS na Amazon](#parte37) 47 | 38. [Seção 38: Conclusão Curso Desenvolvimento Web](#parte38) 48 | 39. [Seção 39: Gulp - Versão 3 [LEGADO]](#parte39) 49 | --- 50 | 51 | 52 | ## 1 - Seção 1: Introdução Curso Desenvolvimento Web 53 | 54 | 1. Visão Geral do Curso Desenvolvimento Web 55 | 56 | 2. Repositório do Curso 57 | 58 | 3. Boas Práticas do Suporte 59 | 60 | 4. Importância dos Fundamentos 61 | 62 | 5. Por que aprender Javascript? 63 | 64 | 6. Usando o terminal 65 | 66 | 7. Terminais 67 | 68 | [Voltar ao Índice](#indice) 69 | 70 | --- 71 | 72 | 73 | ## 2 - Seção 2: Configuração do Ambiente 74 | 75 | 8. Aviso importante aos usuários de Windows 76 | 77 | 9. Instalação Node (Windows/Mac) - Curso Desenvolvimento Web 78 | 79 | 10. Instalar Node e Visual Studio Code em Linux 80 | 81 | 11. Configuração do Editor (VSCode) - Curso Web 82 | 83 | 12. Como abrir os Terminais nos Sistemas Operacionais 84 | 85 | 13. Configuração do Comando 'code' - Curso Web 86 | 87 | 14. Instalação do VSCode (Windows) - Curso Web 88 | 89 | [Voltar ao Índice](#indice) 90 | 91 | --- 92 | 93 | 94 | ## 3 - Seção 3: Iniciando com Programação 95 | 96 | - **[Códigos 2019: 03-Javascript-Fundamentos](03-Javascript-Fundamentos)** 97 | 98 | 15. Introdução do Módulo 99 | 100 | 16. Conhecendo o Visual Studio Code 101 | 102 | 17. Sentença de Código #01 103 | 104 | 18. Sentença de Código #02 105 | 106 | 19. Comentários de Código 107 | 108 | 20. Bloco de Código 109 | 110 | 21. Desafio Sentença e Bloco 111 | 112 | 22. Desafio Sentença e Bloco - Resposta 113 | 114 | 23. Trabalhando com Dados #01 115 | 116 | 24. Trabalhando com Dados #02 117 | 118 | 25. Trabalhando com Dados #03 119 | 120 | 26. Trabalhando com Dados #04 121 | 122 | 27. Desafio Área da Circunferência 123 | 124 | 28. Desafio Área da Circunferência - Resposta 125 | 126 | 29. Desafio Troca de Valores 127 | 128 | 30. Desafio Troca de Valores - Resposta 129 | 130 | [Voltar ao Índice](#indice) 131 | 132 | --- 133 | 134 | 135 | ## 4 - Seção 4: Javascript: Fundamentos 136 | 137 | 31. Visão Geral de Algoritmo 138 | 139 | 32. Visão Geral de Estruturas de Dados 140 | 141 | 33. Lembrem-se sempre de salvar o código! 142 | 143 | 34. Configuração do Projeto 144 | 145 | 35. Organização Básica de um Código JS 146 | 147 | 36. Executando JavaScript 148 | 149 | 37. Comentários de Código 150 | 151 | 38. O Básico de Var, Let e Const 152 | 153 | 39. Tipagem Fraca 154 | 155 | 40. Tipos em JavaScript: Number 156 | 157 | 41. Number: Alguns Cuidados 158 | 159 | 42. Usando Math 160 | 161 | 43. Tipos em JavaScript: String 162 | 163 | 44. Usando Template Strings 164 | 165 | 45. Tipos em JavaScript: Boolean 166 | 167 | 46. Tipos em JavaScript: Array 168 | 169 | 47. Tipos em JavaScript: Object 170 | 171 | 48. Entendendo o Null & Undefined 172 | 173 | 49. Quase Tudo é Função!!! 174 | 175 | 50. Exemplos Básicos de Funções #01 176 | 177 | 51. Exemplos Básicos de Funções #02 178 | 179 | 52. Declaração de Variáveis Com Var #01 180 | 181 | 53. Declaração de Variáveis Com Var #02 182 | 183 | 54. Declaração de Variáveis Com Let 184 | 185 | 55. Usando Var em Loop #01 186 | 187 | 56. Usando Let em Loop #01 188 | 189 | 57. Usando Var em Loop #02 190 | 191 | 58. Usando Let em Loop #02 192 | 193 | 59. Entendendo o Hoisting 194 | 195 | 60. Função Vs Objeto 196 | 197 | 61. Par Nome/Valor 198 | 199 | 62. Notação Ponto 200 | 201 | 63. Operadores: Atribuição 202 | 203 | 64. Operadores: Destructuring #01 204 | 205 | 65. Operadores: Destructuring #02 206 | 207 | 66. Operadores: Destructuring #03 208 | 209 | 67. Operadores: Destructuring #04 210 | 211 | 68. Operadores: Aritméticos 212 | 213 | 69. Operadores: Relacionais 214 | 215 | 70. Operadores: Lógicos 216 | 217 | 71. Operadores: Unários 218 | 219 | 72. Operadores: Ternário 220 | 221 | 73. Contexto de Execução: Browser vs Node 222 | 223 | 74. Tratamento de Erro (Try/Catch/Throw) 224 | 225 | 75. Recursos 226 | 227 | [Voltar ao Índice](#indice) 228 | 229 | --- 230 | 231 | 232 | ## 5 - Seção 5: Javascript: Estruturas de Controle 233 | 234 | 235 | 236 | [Voltar ao Índice](#indice) 237 | 238 | --- 239 | 240 | 241 | ## 6 - Seção 6: Javascript: Função 242 | 243 | 244 | 245 | [Voltar ao Índice](#indice) 246 | 247 | --- 248 | 249 | 250 | ## 7 - Seção 7: Javascript: Objeto 251 | 252 | 253 | 254 | [Voltar ao Índice](#indice) 255 | 256 | --- 257 | 258 | 259 | ## 8 - Seção 8: Javascript: Array 260 | 261 | 262 | 263 | [Voltar ao Índice](#indice) 264 | 265 | --- 266 | 267 | 268 | ## 9 - Seção 9: Lista de Exercícios de JavaScript 269 | 270 | 271 | 272 | [Voltar ao Índice](#indice) 273 | 274 | --- 275 | 276 | 277 | ## 10 - Seção 10: Node 278 | 279 | 280 | 281 | [Voltar ao Índice](#indice) 282 | 283 | --- 284 | 285 | 286 | ## 11 - Seção 11: ESNext 287 | 288 | 289 | 290 | [Voltar ao Índice](#indice) 291 | 292 | --- 293 | 294 | 295 | ## 12 - Seção 12: Conceitos sobre Web 296 | 297 | 298 | 299 | [Voltar ao Índice](#indice) 300 | 301 | --- 302 | 303 | 304 | ## 13 - Seção 13: HTML 305 | 306 | 307 | 308 | [Voltar ao Índice](#indice) 309 | 310 | --- 311 | 312 | 313 | ## 14 - Seção 14: CSS 314 | 315 | 316 | 317 | [Voltar ao Índice](#indice) 318 | 319 | --- 320 | 321 | 322 | ## 15 - Seção 15: Integrando HTML, CSS e JS 323 | 324 | 325 | 326 | [Voltar ao Índice](#indice) 327 | 328 | --- 329 | 330 | 331 | ## 16 - Seção 16: Ajax 332 | 333 | 334 | 335 | [Voltar ao Índice](#indice) 336 | 337 | --- 338 | 339 | 340 | ## 17 - Seção 17: Gulp 341 | 342 | 343 | 344 | [Voltar ao Índice](#indice) 345 | 346 | --- 347 | 348 | 349 | ## 18 - Seção 18: Webpack 350 | 351 | 352 | 353 | [Voltar ao Índice](#indice) 354 | 355 | --- 356 | 357 | 358 | ## 19 - Seção 19: jQuery 359 | 360 | 361 | 362 | [Voltar ao Índice](#indice) 363 | 364 | --- 365 | 366 | 367 | ## 20 - Seção 20: Bootstrap 368 | 369 | 370 | 371 | [Voltar ao Índice](#indice) 372 | 373 | --- 374 | 375 | 376 | ## 21 - Seção 21: Projeto Galeria (Bootstrap/jQuery/Webpack) 377 | 378 | 379 | 380 | [Voltar ao Índice](#indice) 381 | 382 | --- 383 | 384 | 385 | ## 22 - Seção 22: React 386 | 387 | 388 | 389 | [Voltar ao Índice](#indice) 390 | 391 | --- 392 | 393 | 394 | ## 23 - Seção 23: Projeto Calculadora 395 | 396 | 397 | 398 | [Voltar ao Índice](#indice) 399 | 400 | --- 401 | 402 | 403 | ## 24 - Seção 24: Projeto Cadastro de Usuário 404 | 405 | 406 | 407 | [Voltar ao Índice](#indice) 408 | 409 | --- 410 | 411 | 412 | ## 25 - Seção 25: Projeto Cadastro - Integração com Banco de dados (Firestore) 413 | 414 | 415 | 416 | [Voltar ao Índice](#indice) 417 | 418 | --- 419 | 420 | 421 | ## 26 - Seção 26: VueJS 422 | 423 | 424 | 425 | [Voltar ao Índice](#indice) 426 | 427 | --- 428 | 429 | 430 | ## 27 - Seção 27: Projetos VueJS 431 | 432 | 433 | 434 | [Voltar ao Índice](#indice) 435 | 436 | --- 437 | 438 | 439 | ## 28 - Seção 28: Projeto Calculadora (Vue) 440 | 441 | 442 | 443 | [Voltar ao Índice](#indice) 444 | 445 | --- 446 | 447 | 448 | ## 29 - Seção 29: Projeto Monty Hall (Vue) 449 | 450 | 451 | 452 | [Voltar ao Índice](#indice) 453 | 454 | --- 455 | 456 | 457 | ## 30 - Seção 30: Aplicação Desktop com JavaScript, Electron JS e Vue JS 458 | 459 | 460 | 461 | [Voltar ao Índice](#indice) 462 | 463 | --- 464 | 465 | 466 | ## 31 - Seção 31: Angular 9 467 | 468 | 469 | 470 | [Voltar ao Índice](#indice) 471 | 472 | --- 473 | 474 | 475 | ## 32 - Seção 32: Banco Relacional 476 | 477 | 478 | 479 | [Voltar ao Índice](#indice) 480 | 481 | --- 482 | 483 | 484 | ## 33 - Seção 33: Banco Não Relacional 485 | 486 | 487 | 488 | [Voltar ao Índice](#indice) 489 | 490 | --- 491 | 492 | 493 | ## 34 - Seção 34: Express 494 | 495 | 496 | 497 | [Voltar ao Índice](#indice) 498 | 499 | --- 500 | 501 | 502 | ## 35 - Seção 35: Projeto Base de Conhecimento • Backend 503 | 504 | 505 | 506 | [Voltar ao Índice](#indice) 507 | 508 | --- 509 | 510 | 511 | ## 36 - Seção 36: Projeto Base de Conhecimento • Frontend 512 | 513 | 514 | 515 | [Voltar ao Índice](#indice) 516 | 517 | --- 518 | 519 | 520 | ## 37 - Seção 37: Publicando uma Aplicação VueJS na Amazon 521 | 522 | 523 | 524 | [Voltar ao Índice](#indice) 525 | 526 | --- 527 | 528 | 529 | ## 38 - Seção 38: Conclusão Curso Desenvolvimento Web 530 | 531 | 532 | 533 | [Voltar ao Índice](#indice) 534 | 535 | --- 536 | 537 | 538 | ## 39 - Seção 39: Gulp - Versão 3 [LEGADO] 539 | 540 | 541 | 542 | [Voltar ao Índice](#indice) 543 | 544 | --- 545 | 546 | -------------------------------------------------------------------------------- /img/01-01-introducao.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josemalcher/Curso-Web-Moderno-com-JavaScript-2019-COMPLETO-Projetos/e8f9f8f09fbf5494f95ded113598ad1a61ad1c04/img/01-01-introducao.PNG --------------------------------------------------------------------------------