Introduction to JavaScript

JavaScript Classes San Francisco

If you’re considering enrolling in a JavaScript class or coding bootcamp, it helps to have some general knowledge about this programming language before getting started. This tutorial will provide you with an introduction to JavaScript to supplement your learning.

Defining JavaScript at a High Level

JavaScript is a programming language that lets developers implement complex actions on a webpage. Outside of static information, JavaScript is part of nearly everything on a website, such as scrolling video jukeboxes, animated graphics, interactive maps and content updates.

JavaScript builds on CSS and HTML, which are essentially the layers of a webpage, starting with HTML followed by CSS for styling and JavaScript for dynamic behavior. For a refresher, HTML is a markup language that defines paragraphs and provides structure while CSS incorporates style rules and applies them to the HTML.

Understanding Compiled vs. Interpreted Code

JavaScript is a lightweight, interpreted programming language. When you work with interpreted languages, there is no need to transform the code before the browser can run it. Instead, you will get an immediate result after the code runs from the top to the bottom of your document.

By contrast, compiled languages require compilation or transformation into another form before the computer runs them. One example would be C++, as it must be compiled into an assembly language that the computer runs.

Understanding Client-Side vs. Server-Side Code

JavaScript is also incredibly versatile and can be used for both server-side and client-side code.

Server-side code runs within a server, with the results downloaded and displayed within the browser.

Alternatively, client-side code is what runs on the computer; when you visit a website, your browser downloads the client-side code, then runs and displays it.

Understanding Dynamic vs. Static Code

Finally, JavaScript is used for dynamic code on both the client and server sides, which refers to a webpage’s ability to show various displays depending on circumstances, as well as generate new content when necessary.

While static code always shows the same content, dynamic code updates content in real-time.

For client-side code, JavaScript generates new content within the browser. For example, creating an HTML table, filling it with data from the server and displaying it on a webpage. With server-side code, new content is created within the server, such as fetching data from an existing database.

Exploring What JavaScript Can Do

JavaScript’s core elements can handle a range of tasks and features, one of the most common of which is to store values within variables. For example, asking the user to input their name, then storing it in a variable known as “name.”

JavaScript can also perform operations on strings or pieces of text as well as run code as a response to particular webpage events, such as a “click” event that determines if a button is clicked, and runs the code when it is.

APIs

For even more functionality, Application Programming Interfaces (APIs) are built on core JavaScript language and give you the ability to use JavaScript code in remarkable ways. Think of APIs as providing pre-made code building blocks that let you create and implement a program that would otherwise prove challenging. Simply put, there is no need to code from scratch.

APIs are usually provided through a browser or third-party. Browser APIs are part of the web browser and can perform complex actions that would be useful or expose data in the surrounding computer environment. Examples include the “WebGL” and “Canvas” APIs that make it possible to create 3D or 2D animated graphics; the “Geolocation API” which retrieves geographic information to supplement your JavaScript; and the Document Object Model (DOM) API that allows for the manipulation of CSS and HTML. There are also video and audio browser APIs.

Third-party APIs usually put their information and code online, but they are not automatically built into your browser. Examples include OpenStreetMap API, Google Maps API and Twitter API. The first two let you do things such as embedding a custom map on your website while the latter lets you show your recent social media activity or perform similar actions.

Of course, this is just a small sampling of the various browser and third-party APIs.

Browser Security With JavaScript

Whenever you open a new browser tab, it opens a unique execution environment to run code, so the content of one tab cannot impact the content of the others. From a security standpoint, this makes it harder to steal code from websites. A JavaScript bootcamp is likely to cover more advanced processes like safely sending data and code between tabs.

When JavaScript Runs on the Page

When you load a website, the code runs in an execution environment. The code will be the HTML, CSS and JavaScript while the execution environment is the browser tab. Before JavaScript can be executed, CSS and HTML must load onto the page.

In other words, the page’s style, structure and content are already established before the JavaScript starts running. This order of operations helps reduce errors when JavaScript dynamically modifies CSS and HTML to update user interfaces.

JavaScript Running Order

JavaScript’s running order is straightforward: it goes in order, starting at the top and working its way down. While this might be what you would expect, it also means that you will need to pay attention to the order that you place code, defining an object earlier in the code than it is actually needed.

To avoid any errors, be sure to define an object before referencing it.

Adding JavaScript

Similar to CSS, there is a range of methods available to add JavaScript to your page. While CSS relies on <style> elements and style sheets, JavaScript uses the <script> element.

Internal JavaScript

To apply internal JavaScript, ensure you have a local copy of the JavaScript you want to add. Open the file in both the text editor and browser. The HTML should develop a simple webpage featuring a clickable button. Enter this in the text editor:

It should go right before the </head> tag. Add your JavaScript in the relevant part of the above code (below “JavaScript goes here”). Save the file and refresh your browser to generate a new paragraph below.

External JavaScript

You can also place your JavaScript within an external file, which allows you to reuse the same code on multiple HTML files and makes it easier to read your HTML by removing script sections. Start by creating a file within the same directory that holds your HTML file and label it script.js or something similar — the crucial component being the .js filename extension, which refers to JavaScript.

Replace the <script> element in your current code with:

Add your JavaScript code inside your script.js file, save it then refresh the browser to produce the same results as you did with internal JavaScript.

Avoid Inline JavaScript Handlers

Sometimes, you may find JavaScript code within HTML code, which would look something like this:

It has the same functionality as the above examples, but there is an inline “onclick” handler that runs the function when you click the <button>.

While this produces similar results, do not do it with your JavaScript. Using this method requires you to include onclick=”createParagraph()” on every single button, making it highly inefficient.

Loading Scripts With JavaScript

All HTML loads in order of appearance, so if your JavaScript ends up loading and parsing prior to the relevant HTML, the code will not function.

To get around this issue, programmers will sometimes add in constructs. For example:

for internal and external JavaScript, respectively.

The old-fashioned solution for JavaScript is to simply put the script element immediately before your </body> tag to ensure that it loads after all HTML has been parsed.

The issue with either solution is that you cannot load and parse the script from your JavaScript until the HTML DOM loads. This can dramatically slow a website’s speed if they are big and have extensive JavaScript.

The alternative is to use async and defer. Async scripts download script, however rather than blocking the page from rendering, they execute once the script completes its download. Async scripts have no guarantee of running in any order or stopping other elements on the page from displaying, which are ideal if every JavaScript script on your page is independent.

Alternatively, defer runs JavaScript scripts in order of appearance and executes them when the content and script are both downloaded, making it ideal for cases when you need to wait for parsing for scripts to load.

What’s Next

If you’re interested in learning more about web development, consider enhancing your skills and knowledge with a JavaScript bootcamp.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.

Get Program Info

The following requires your attention:
Back
Back
Back
Back
Back
Back
Back
Back
Back
Back
0%

Ready to learn more about Berkeley Coding Boot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.