{"id":4660,"date":"2018-11-12T12:00:00","date_gmt":"2018-11-12T11:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/introduction-to-javascript\/"},"modified":"2023-08-30T14:08:32","modified_gmt":"2023-08-30T12:08:32","slug":"introduction-to-javascript","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/introduction-to-javascript\/","title":{"rendered":"Introduction to JavaScript: The Ideal Beginner's Guide"},"content":{"rendered":"

Anyone with half an interest in coding knows how important it is, but what is JavaScript used for? How did it get to be that way? <\/strong><\/p>\n

L<\/strong>earn all about one of the three pillars of the internet.<\/strong><\/p>\n

If you\u2019re currently learning web development (or thinking about it), there\u2019s no doubt you\u2019ve heard of JavaScript.<\/p>\n

It\u2019s a very popular programming language that started out for web browsers but evolved into much more\u2014which means that, if you\u2019re considering a career in web development, getting to know the language\u00a0is absolutely essential.<\/p>\n

In this guide, I\u2019m going to introduce you to JavaScript on the frontend, as well as explaining briefly how it works on the backend as well.<\/p>\n

I\u2019ll also provide some mini JavaScript tutorials to show you this versatile programming language in action. If you’re wondering if you should learn JavaScript<\/a>, then this article should help show all you can do with it.<\/p>\n

If you’d like to skip ahead to a particular section, simply use the table of contents:<\/p>\n

    \n
  1. The evolution of JavaScript: A brief history<\/a><\/li>\n
  2. What is JavaScript used for on the frontend?<\/a><\/li>\n
  3. What is JavaScript used for on the backend?<\/a><\/li>\n
  4. Popular JavaScript frontend frameworks<\/a><\/li>\n
  5. JavaScript for beginners: Key takeaways<\/a><\/li>\n<\/ol>\n

    1. The evolution of JavaScript: A brief history<\/h2>\n

    The JavaScript we know today has been around for well over two decades.<\/p>\n

    Created by Brendan Eich in 1995, it started out as a language that developers could utilize to make applications in the browser more interactive (think real-time updates to your to-do list application).<\/p>\n

    So briefly, what is JavaScript used for? The answer is constantly changing.<\/p>\n

    Since its beginning, it has evolved from a purely frontend language (a language that runs in the browser) to one that can be used for the \u201cfull stack\u201d (browser + server). This means that, these days, it’s possible to create an entire web application without having to learn the syntax of other backend programming languages like Java or Ruby<\/a>.<\/p>\n

    For this reason and others, developers fluent in this language can command a hefty wage, as our JavaScript developer salary guide shows<\/a>.<\/p>\n

    However, JavaScript has further evolved into a language that can be used for much more than web applications. It can also be used in testing software applications, it can be used in databases, and it is even being used for IOT (Internet of Things) solutions.<\/p>\n

    Due to this evolution, it has become a very versatile programming language and, arguably, one of the most useful to know these days.<\/p>\n

    You can read more about the differences between frontend and backend development in this guide<\/a>.<\/p>\n

    2. What is JavaScript used for on the frontend?<\/h2>\n

    JavaScript was originally intended to run in the browser.<\/p>\n

    Most major browsers have a built-in \u201cJavaScript reader\u201d called a JavaScript engine that reads JavaScript code and interprets it. The browser then acts according to the \u201cinstructions\u201d, whether it be to change the text of an element on the screen or to take a number from a user, calculate the square of it, and display the result in the browser (among many other things).<\/p>\n

    Here\u2019s how it works: When the browser reads your HTML<\/a> file, the file is read line-by-line. Each line is interpreted in order from top to bottom.<\/p>\n

    It renders the HTML code to the screen exactly as it interprets it from your HTML file. When it hits some JavaScript, it runs the JavaScript code in its entirety before continuing on down the page.<\/p>\n

    Using JavaScript to replace text on a page:<\/h3>\n

    \"A<\/p>\n

      \n
    • Line 17 renders the header.<\/li>\n
    • Line 19 renders the paragraph that won\u2019t be changed.<\/li>\n
    • Line 21 renders the paragraph that will be changed.<\/li>\n
    • Line 23 is the JavaScript that grabs the second paragraph and changes its text.<\/li>\n<\/ul>\n

      The image above shows the page after the JavaScript has been run to change the second paragraph. That is why you see that \u201cHello from JavaScript!\u201d has replaced \u201cThis paragraph will be changed by JavaScript below\u201d.<\/p>\n

      Here\u2019s an example of some more complicated JavaScript code that takes a number from a user, calculates the square of that number, and displays the answer on the screen.<\/p>\n

      Using JavaScript to calculate and display some simple math:<\/h3>\n

      \"A<\/p>\n

        \n
      • Line 17 renders the input box so the user can input the number.<\/li>\n
      • Line 19 renders the sentence into which the answer will be rendered.<\/li>\n
      • Line 21 renders the button the user will click after entering a number to get the answer.<\/li>\n
      • Line 25 basically says: \u201cRun the stuff in the code block below me when a user clicks on the GO button.\u201d<\/li>\n
      • Line 26 grabs the number input by the user and assigns it to a variable (to be reused later).<\/li>\n
      • Line 27 calls the pre-written function below (\u201ccalculateSquare\u201d) and assigns the answer to another variable.<\/li>\n
      • Lines 28 and 29 populate the paragraphs with the correct values.<\/li>\n
      • Lines 32 -34 define the function that will calculate the square and return the answer.<\/li>\n<\/ul>\n

        The image above shows the results of clicking \u201cGO\u201d after entering 12 in the input box.<\/p>\n

        If you want to see a further introduction to frontend coding with JavaScript, this video tutorial from our in-house frontend developer Abhishek gets you started out with some simple concepts:<\/p>\n