Bevezetés a JavaScript-be¶

JavaScript Története és Használata¶

Mi az a JavaScript?

JavaScript egy magas szintű, dinamikus programozási nyelv, amelyet weboldalak interaktivitásának növelésére használnak. A HTML és a CSS mellett a weboldalak alapvető technológiáinak egyike.

Történeti áttekintés¶

1995: Brendan Eich, a Netscape Communications Corporation alkalmazottja kifejleszti a JavaScript első verzióját, amelyet eredetileg Mocha-nak neveztek el, majd LiveScript-nek, végül JavaScript-nek nevezték el.
1997: Az ECMA International kiadja az első szabványosított verziót, az ECMAScript-et.
2009: Megjelenik a Node.js, amely lehetővé teszi a JavaScript használatát szerveroldalon is.
2015: Kiadják az ECMAScript 6 (ES6) verziót, amely számos új funkciót és szintaktikai javítást tartalmaz.

JavaScript a böngészőkben és a Node.js-ben¶

Böngészőkben: JavaScript futtatása a kliensoldalon, interaktív elemek és dinamikus tartalom létrehozására.
Node.js-ben: Szerveroldali JavaScript futtatási környezet, amely lehetővé teszi szerverek és hálózati alkalmazások építését.

Fejlesztői Eszközök¶

Böngésző fejlesztői eszközök¶

Chrome DevTools: A Google Chrome beépített eszköze, amely lehetővé teszi a weboldalak elemzését és hibakeresését.
Firefox Developer Tools: A Mozilla Firefox beépített eszközei, amelyek hasonló funkciókat kínálnak.
Microsoft Edge Developer Tools: A Microsoft Edge böngésző fejlesztői eszközei.

Szövegszerkesztők és IDE-k¶

Visual Studio Code: Széles körben használt, ingyenes kódszerkesztő, amely számos bővítménnyel támogatja a JavaScript fejlesztést.
Sublime Text: Könnyű és gyors szövegszerkesztő, amely számos programozási nyelvet támogat.
WebStorm: JetBrains által fejlesztett, fizetős, de nagyon erőteljes JavaScript IDE.

Visual Studio Code¶

Ajánlott beállítások a JavaScript fejlesztéshez a Visual Studio Code-ban:

Helyezd el az alábbi tartalmat a .vscode/settings.json fájlba:

{
    "editor.tabSize": 4,
    "editor.mouseWheelZoom": true,

    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbrench.iconTheme": "material-icon-theme"
}

Kiegészítők¶

Prettier¶

A Prettier egy formázó eszköz, amely automatikusan formázza a kódot a beállításoknak megfelelően.

Letöltés

Lehetőség van a projekt gyökérkönyvtárában egy .prettierrc fájl létrehozására a formázási beállítások testreszabásához:

.prettierrc

{
    "tabWidth": 4,
    "useTabs": false,
    "printWidth": 100,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "consistent",
    "trailingComma": "all",
    "bracketSpacing": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

Material Icon Theme¶

A Material Icon Themeegy ikonkészlet, amely segít a fájlok és mappák könnyebb azonosításában.

Letöltés