JavaScript & HTML

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:

Download for Windows
  • Se va descărca instalatorul. Când instalatorul e descărcat, porneÈ™te procesul de instalare.

Procesul de instalare
  • ÃŽn timpul instalării, bifează Create a desktop icon È™i urmează paÈ™ii instalatorului.

Create a desktop icon

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.

Interfața VS Code

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.

Open Folder
  • ÃŽn fereastră găseÈ™te È™i selectează folderul creat. Folderul va fi adăugat în partea stânga în Explorer.

Folderul creat adăugat în Explorer
  • ÃŽn Explorer alege pictograma pentru New Folder È™i crează un folder nou cu numele js.

New Folder
  • Selectează folderul creat È™i alege pictograma New File din Explorer.

New File
  • NumeÈ™te fiÈ™ierul script.js.

script.js
  • Click dreapta în spaÈ›iul liber în Explorer È™i selectează New File, numeÈ™te fiÈ™ierul index.html.

index.html
  • ÃŽn fiÈ™ierul creat, adaugă următoarele:

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

Exemplu de cod JavaScript
Afișarea în consolă

Last updated