GirlsGoIT Wiki (ro)
RU
  • Introducere
  • Unelte
    • Slack
    • Visual Studio Code
    • CodeSandbox
      • Cum rezolvi un task la proiect
      • Cum rezolvi un exercițiu
    • GitHub
  • FRONTEND STATIC
    • Internet
    • HTML
    • CSS
    • Exerciții
      • Erontend Static Exercitii
  • FRONTEND DINAMIC
    • JavaScript
      • Introducere
      • Consola Browser'ului
      • Variabile
      • Tipuri de date
      • Operatori
      • JavaScript & HTML
      • Funcții
      • DOM & Window API
      • Math API
      • Condiționale (if)
      • Cicluri (for & while)
    • Vue.js
      • Componente Vue
      • Componente & Forme
      • Lifecycle hooks
      • Comunicare între componente
      • Vue Router
      • Axios
      • Instalare locală
    • Exercitii
    • Rest API
      • Rest api GET
      • Rest api GET one
      • Rest api POST
      • Rest api PUT
      • Rest api DELETE
  • PYTHON
    • Introducere
    • Variabile
    • Tipuri de Date
    • Operatori
    • Control Flow
    • Liste
    • Cicluri for
    • Funcții
    • Dictionare
    • Seturi
    • Fișiere
    • Try-except-finally. Lambda
    • Librării, module
    • Exercitii
      • Variabile
      • TIpuri de Date
      • Operatori
      • If...else
      • Liste
      • Cicluri for
      • Funcții
      • Dicționare
      • Seturi
      • Fișiere
      • Try-except, Lambda
      • Librării , module
      • ✨Mai multe exerciții ✨
    • Python Archiva
  • BACKEND
    • Instalare Python
    • Python OOP
    • Baze de date
    • Django
    • REST API's
    • Django REST Framework
    • Exerciții
      • Python OOP
      • Django
      • Django Rest Framework
  • Data Science
    • Introducere în Data Science
    • Vizualizarea datelor
      • Matplotlib
    • Numpy
    • Pandas
    • DecisionTrees
  • 3D Printing
    • Intro
    • Fusion 360 Intro
    • Sketch
    • Solid body
    • Arduino
    • Final Projects
  • ARHIVA
    • Milligram
    • Drone
      • Intro
    • Old Backend
      • Bootstrap
      • Hello Flask
      • DB Modeling
      • Ubuntu Quest
      • Baze de date
      • Heroku Deploy
    • Robotica NAO
      • Finalizarea proiectelor
      • Flow Control
      • Cum creez un Dialog box
      • Convenția GirlsGoIT Robotics Choregraphe
      • Tracker
      • Dialog - QiChat
    • Robotica
      • 1.1 mBlock
      • 1.2 Descărcarea, instalarea și conectarea
      • 1.3 Execută un program de pe mBlock IDE sau încarcă pe Board
      • 1.4 Conectarea prin USB, Bluetooth sau 2.4GHz
      • 2.1 Programe Simple
      • 2.2 Senzori
      • 2.3 Exerciții avansate - Scratch
      • 3.0.1 Instalare Arduino IDE
      • 3.0.2 Instalare Arduino IDE WEB
      • 3.1 Configurare Arduino IDE
      • 3.2 Introducere în limbajul C
      • 3.3 Exemple Arduino - mBot
      • 3.4 Line follow - Arduino
      • 3.5 Ultimate robot
      • 4.1 Planificarea și managementul proiectelor
      • Custom robot
      • Noțiuni și explicații
      • Delay fara sa opreasca programul
      • Alte resurse și exemple
Powered by GitBook
On this page
  • Instalare
  • Interfața
  • JavaScript
  1. FRONTEND DINAMIC
  2. JavaScript

JavaScript & HTML

PreviousOperatoriNextFuncții

Last updated 5 years ago

Atunci când aplicațiile dezvoltate cresc în complexitate, avem nevoie de instrumente care ne pot ajuta să structurăm și să organizăm codul JavaScript. Unul din aceste instrumente este Visual Studio Code.

Visual Studio Code este editor de cod care poate fi utilizat cu o varietate de limbaje de programare, inclusiv JavaScript.

În continuare, vom instala Visual Studio Code, vom face cunoștință cu mediul de lucru și vom crea primul proiect cu ajutorul editorului.

Instalare

Pentru a instala Visual Studio Code:

  • Accesează

  • Selecteaza butonul Download for Windows

  • Se va descărca instalatorul. Când instalatorul e descărcat, pornește procesul de instalare.

  • În timpul instalării, bifează Create a desktop icon și urmează pașii instalatorului.

Interfața

VS Code are un aspect simplu și intuitiv care maximizează spațiul oferit editorului, lăsând spațiu suficient și pentru celelalte elemente. Interfața este împărțită în 5 categorii:

  • Editor - Zona principală pentru a edita fișierele. You can open as many editors as you like side by side vertically and horizontally.

  • Side Bar - Conține diferite vizualizări pentru a vă ajuta în timp ce lucrați.

  • Status Bar - Conține informații despre proiectul curent și fișierele editate.

  • Activity Bar - Situat în partea stângă, permite să comutați între vizualizări și vă oferă indicatori suplimentari specifici contextului.

  • Panels - Sub regiunea editorului pot fi afișate diferite panouri cu informații sau un terminal integrat.

JavaScript

În continuare vom crea un proiect nou în VS code și vom adăuga un fișier JS în documentul HTML.

  • Crează pe desktop un folder cu numele proiectului.

  • În VS Code formează combinația Ctrl+K Ctrl+O sau selectează File->Open Folder.

  • În fereastră găsește și selectează folderul creat. Folderul va fi adăugat în partea stânga în Explorer.

  • În Explorer alege pictograma pentru New Folder și crează un folder nou cu numele js.

  • Selectează folderul creat și alege pictograma New File din Explorer.

  • Numește fișierul script.js.

  • Click dreapta în spațiul liber în Explorer și selectează New File, numește fișierul index.html.

  • În fișierul creat, adaugă următoarele:

  • Fișierul JavaScript a fost creat. Ceea ce vei adăuga în script.js, va fi rulat de către browser.

https://code.visualstudio.com/
Download for Windows
Procesul de instalare
Create a desktop icon
Interfața VS Code
Open Folder
Folderul creat adăugat în Explorer
New Folder
New File
script.js
index.html
HTML
Exemplu de cod JavaScript
Afișarea în consolă