Curso de Js da Udemy (2021)

carolcardoso080 · Jul 10, 2024 · 8391e3e · 8391e3e
1 parent 216fc22
commit 8391e3e
Show file tree

Hide file tree

Showing 5 changed files with 642 additions and 34 deletions.
diff --git a/Site pessoal - Carol Cardoso/assets/componentes/head/head.html b/Site pessoal - Carol Cardoso/assets/componentes/head/head.html
@@ -1,41 +1,30 @@
 <head>
-<meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Play | Free Startup and SaaS Landing Page Template by UIdeck</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <!-- Primary Meta Tags -->
-    <meta name="title" content="Play - Free Open Source HTML Bootstrap Template by UIdeck">
-    <meta name="description" content="Play - Free Open Source HTML Bootstrap Template by UIdeck Team">
+  <title>Carol Cardoso</title>
 
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://uideck.com/play/">
-    <meta property="og:title" content="Play - Free Open Source HTML Bootstrap Template by UIdeck">
-    <meta property="og:description" content="Play - Free Open Source HTML Bootstrap Template by UIdeck Team">
-    <meta property="og:image" content="https://uideck.com/wp-content/uploads/2021/09/play-meta-bs.jpg">
+  <script src="/assets/componentes/header/header.js" type="module"></script>
+  <script src="/assets/componentes/footer/footer.js" type="module"></script>
 
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://uideck.com/play/">
-    <meta property="twitter:title" content="Play - Free Open Source HTML Bootstrap Template by UIdeck">
-    <meta property="twitter:description" content="Play - Free Open Source HTML Bootstrap Template by UIdeck Team">
-    <meta property="twitter:image" content="https://uideck.com/wp-content/uploads/2021/09/play-meta-bs.jpg">
 
-    <!--====== Favicon Icon ======-->
-    <link
-      rel="shortcut icon"
-      href="assets/images/favicon.svg"
-      type="image/svg"
-    />
+  <!-- Font Rawline-->
+  <link
+  rel="stylesheet"
+  href="/bibliotecas/govbr-ds-assets/fonts/rawline/css/rawline.css"/>
+  <link rel="stylesheet" href="/bibliotecas/Fontes - Rawline/Rawline/"/>
 
-    <!-- ===== All CSS files ===== -->
-    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="assets/css/animate.css" />
-    <link rel="stylesheet" href="assets/css/lineicons.css" />
-    <link rel="stylesheet" href="assets/css/ud-styles.css" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-		<link rel="stylesheet" type="text/css" href="css/style.css">
-		<link href='https://fonts.googleapis.com/css?family=Merienda' rel='stylesheet'>
-		<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
+  <!-- Font Raleway-->
+  <link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
+
+  <!-- Design System GOV.BR CSS-->
+  <link rel="stylesheet" href="/bibliotecas/govbr-ds/core-lite.css" />
+
+  <!--- Ícones Font Awesome - Versão 6.5.1 -->
+  <link rel="stylesheet" href="/icones/css/fontawesome.css" />
+  <link rel="stylesheet" href="/icones/css/brands.css" />
+  <link rel="stylesheet" href="/icones/css/solid.css" />
 </head>
diff --git a/src/javascript/index.html b/src/javascript/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>JavaScript</title>    
+    </head>
+
+    <body>
+        <h1>Curso de JavaScript</h1>
+        <h3>Precedência de execução</h3>
+        <p>Quando estamos trabalhando com linguagens de programação <b>interpretadas</b>,
+        ou seja, aquelas linguagens que são processadas em tempo de execução (nesse caso, 
+        o Js é interpretado pelo browser), é muito importante ter em mente essa ideia de 
+        precedência de execução do código.
+        </p>
+        <p>É comum tentar apontar para algum recurso ou elemento HTML que ainda não exista
+        ou seja, que ainda não foi renderizado no browser. Quando isso acontece, a lógica
+        acaba quebrando!
+        </p>
+        <br>
+        <h3>Conceito de Precedência de execução</h3>
+        <p>Em geral, nós utilizamos o Js para interagir com elementos HTML. Esses elementos
+        HTML são renderizados com base numa <b>árvore de elementos</b>conhecida como <b>Document
+        Object Model ou DOM</b>. Então, todos os elementos HTML ficam disponíveis no DOM e podem
+        ser selecionados a partir da linguagem Js para sofrerem algum tipo de ação.
+        <br><br>
+        No caso, temos esses textos e o input abaixo! Adicionamos um ID ao input, então podemos 
+        navegar por essa árvore de elementos (DOM) e localizar especificamente esse elemento na página
+        para tomar alguma ação.
+        <br><br>
+        O link do arquivo externo Js foi incluído no head e o input no body.
+        Isso significa que o Js vai ser processado antes mesmo do body.
+        Se por ventura eu quiser fazer algum tipo de interação entre o meu Js e o input (com o ID),
+        nós teremos um problema, porque o Js vai ser executado antes mesmo desse elemento estar 
+        montado no DOM e consequentemente renderizado na página.
+        <br><br>
+        document.getElementById() => Vai recuperar o elemento citado dentro do objeto do documento,
+        ou seja, o DOM.
+        <br><br>
+        document.getElementById().value => O value vai pegar o valor contido dentro desse elemento.
+        <br><br>
+        Os campos de input possuem um atributo value e vamos, portanto, forçar a inclusão de um valor
+        de forma programática, ou seja, a partir do script.
+        <br><br>
+        Quando incluímos um valor, como "oi" e salvamos o arquivo Js, nada acontece, porque o arquivo
+        está sendo executado antes do input. No momento que ele executa essa instrução, que o Js 
+        interpreta essa instrução, ele não encontra o elemento pelo ID, justamente porque ele ainda não 
+        foi "criado" naquele momento.
+        <br><br>
+        Esse é um problema de precedência, cujo código é executado antes mesmo do elemento ser criado.
+        Isso gera para nós um erro, inclusive, no console do navegador: Uncaught TypeError: Cannot set
+        property 'value' of _______ null at _______.
+        <br><br>
+        Para corrigir isso, basta corrigir a precedência de execução do nosso código.
+        Ao invés de executar o nosso script antes da criação do elemento na página, podemos executar
+        depois. Isso serve tanto para script dentro do HTML quanto importados de arquivos externos.;
+        </p>
+        <input type="text" placeholder="Teste de precedência" id="nome" disabled="disabled">
+    </body>
+    <script src="./meu_script.js"></script>
+</html>
diff --git a/src/javascript/meu_script.js b/src/javascript/meu_script.js
@@ -0,0 +1,2 @@
+alert('Olá, seja bem-vindo ao curso!')
+document.getElementById('nome').value = "Oi"
diff --git a/src/python/.ipynb_checkpoints/Estudando a sintaxe do Python-checkpoint.ipynb b/src/python/.ipynb_checkpoints/Estudando a sintaxe do Python-checkpoint.ipynb
@@ -0,0 +1,132 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 29,
+   "id": "1fe4a1c8-f771-4dea-b627-7587f554871b",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "19\n"
+     ]
+    }
+   ],
+   "source": [
+    "txt = \"O futuro é um mistério, o passado uma lição e o presente uma dádiva!\"\n",
+    "\n",
+    "resultado = txt.find(\"r\", 7, 25)\n",
+    "\n",
+    "print(resultado)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 32,
+   "id": "7c621e28-5fc7-4225-88a2-063958765a27",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Por apenas  25.00\n"
+     ]
+    }
+   ],
+   "source": [
+    "txt = \"Por apenas {preço: .2f}\"\n",
+    "\n",
+    "print(txt.format(preço = 25))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 39,
+   "id": "e72a077a-95eb-4047-9708-85f6634a9e1c",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "O binário de 13 é 1101\n"
+     ]
+    }
+   ],
+   "source": [
+    "txt = \"O binário de {0} é {0:b}\"\n",
+    "\n",
+    "print(txt.format(13))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 41,
+   "id": "ecd03dd3-3be0-4f0a-b517-3174a12699d5",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Filme:!Eu!Eu mesmo!e!Irene\n"
+     ]
+    }
+   ],
+   "source": [
+    "tuple = (\"Filme:\",\"Eu\", \"Eu mesmo\", \"e\", \"Irene\")\n",
+    "\n",
+    "resultado = \"!\".join(tuple)\n",
+    "\n",
+    "print(resultado)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 42,
+   "id": "3572fba9-80c0-46be-8afb-f5b37c4da31c",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "NomeTESTEPaís\n"
+     ]
+    }
+   ],
+   "source": [
+    "myDict = {\"Nome\": \"Carol\", \"País\": \"Brasil\"}\n",
+    "separador = \"TESTE\"\n",
+    "\n",
+    "resultado = separador.join(myDict)\n",
+    "\n",
+    "print(resultado)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.12"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		alert('Olá, seja bem-vindo ao curso!')
		document.getElementById('nome').value = "Oi"