What Does JavaScript Do? 10 things to learn on the way to becoming a JavaScript Master

What Does JavaScript Do? 10 things to learn on the way to becoming a JavaScript Master

JavaScript is one of the world’s most popular programming languages, primarily used to add automation, animations and interactivity to Web pages. Web developers use JavaScript for anything from automating simple tasks to creating complex Web pages that behave like desktop software applications. JavaScript is also used beyond the Web in software, servers and embedded hardware controls.

Run JavaScript in Web Pages Used in Web pages, JavaScript is a “client-side” programming language. This means JavaScript scripts are read, interpreted and executed in the client, which is your Web browser. By comparison, “server-side” programming languages run on a remote computer, such as a server hosting a website. The client-side nature of JavaScript allows developers to add interactive features that change and update a Web page without reloading a new copy of the page from the website.

Implement Basic Automation In addition to standard programming language features, such as text manipulation and math calculations, JavaScript can access a wealth of information about the browser and the Web page it runs in. JavaScript can use this information to write a custom greeting based on the time of day, add the Web page address in the page footer and optimize the Web page based on the browser you are using.

Update Web Page Content on the Fly Two important features give JavaScript the power to change a Web page on the fly as you are interacting with it. First, JavaScript is “event-driven,� meaning it can respond to events such as mouse clicks, keyboard input, a Web page loading or a timeout being reached. Second, JavaScript has access to the Document Object Model (DOM), an interface to the structure of a Web page. This gives JavaScript access to read and change images, text, form fields, styles, and other elements and attributes of a Web page.

Events and the DOM interface allow JavaScript developers to perform practical tasks, such as validating form input, as well as add interactive features, such as image sliders and games. These are central to the implementation of Dynamic HTML (DHTML).

Communicate with the Cloud Using Asynchronous JavaScript + XML (Ajax), JavaScript can exchange data with a server. This provides the potential to leverage server-side resources to build powerful Web applications. With Ajax, JavaScript can access computing power, data and specialized server resources that are impractical or impossible to provide in a purely client-side application. For example, Ajax can be used to create form fields that provide suggestions as you type, display search results without reloading the Web page, and provide interactive maps you can explore with a swipe of your mouse cursor.

Know the Benefits and Drawbacks JavaScript is one of the tools Web developers use to save time with automation, attract website visitors with compelling features and improve the user experience. Developers use JavaScript to add functionality without the need to maintain and support browser-specific add-ons. JavaScript can be used to implement rich Web applications without requiring special software.

However, there is the potential for security issues. JavaScript engine vulnerabilities, Cross-site Scripting (XSS), Cross-site Request Forgery and other exploits can expose website visitors and Web servers to attacks that may compromise sensitive data or damage computing systems.

Potentially, a JavaScript vulnerability could be used to steal your files and private browser data, or install malicious software on your computer. Keep your operating system and browser up-todate. Protect your computer with antivirus software. Secure your browser by adjusting settings to

use high security levels, turn on warnings and prompts, and disable ActiveX and Java. Use care when following links, entering personal information, downloading files and allowing scripts to run.

10 things to learn on the way to becoming a JavaScript Master I guess you are a web developer. Hopefully you are doing fine and you have a great job, maybe you are even self-employed or working as a freelancer. The future of the field looks great.

Maybe you are just starting out as a web developer, maybe you have been working as a programmer for a longer period already. However comfortable you are with JavaScript, it is always good to get a refresher on some topics to read up about or get them on the radar in the first place. Here are 10 things you definitely have to learn before you can call yourself a master in JavaScript.

1. Control Flow Probably the most basic topic on the list. One of the most important, maybe the most important one. If you do not know how to proceed with your code, you will have a hard time. Knowing the ins and outs of basic control flow is definitely a must.

• • •

•

if else — If you don’t know these, how did you write code before? switch — is basically if else in a more eloquent way, use it as soon

as you have

multiple of different cases. for — Do not repeat yourself, this is what loops are for. Besides the normalfor -loop `for of` and for in come in very handy. The big advantage of for -loops is that they are blocking, so you can use async await in them.

Advanced conditionals — Using the ternary and logical operators can make your life a lot easier, especially when you try to do things inline, meaning that you don’t want to save values to use them later. Example:

// ternaryconsole.log(new Date().getHours() < 12 ? 'Good Morning!' : 'Time for a siesta') // logical operatorsconst isJsMaster = prompt('Are you a JavaScript master?') === 'true' console.log(isJsMaster && 'proficient coder')

2. Error handling This took a while for me. It does not matter if you are working on frontend or backend, the first year or so, you will probably default to console.log or maybe console.error for ‘handling’ errors. To write good applications, you definitely have to change that and replace your lazy logs with nicely handled errors. You may want to check out how to build your own Error constructor and how to catch them correctly, as well as showing the user what the actual problem is.

3. Data Models Similar to moving through your application continuously, you have to decide where to group specific information chunks and where to keep them separate. This does not only apply to building database models, but also function parameters and objects or variables. Example: const calcShape = (width, height, depth, color, angle) => {...}const calcShape = ({width, height, depth, color, angle}) => {...}

4. Asynchronity This is a very important aspect of JavaScript, Either you are fetching data from the backend or you are processing requests asynchronously in the backend itself. In pretty much all usecases, you will encounter asynchronity and its caveats. If you have no idea what that is, you will probably get a weird error, which you will try to fix for a couple of hours. If you know what it is, but you donâ&#x20AC;&#x2122;t really know what to do about it, you will end up in callback-hell. The better approach is to use promises and/or async await in your apps.

5. DOM Manipulation This is an interesting topic. Normally it is somewhat left out in the day today life as a developer.

Maybe you learned jQuery and never felt the need to pick up some native DOM manipulation skills, maybe you are just using a frontend framework, where there is rarely a need for custom DOM manipulation. However, I think this is a crucial part of understanding JavaScript, at least in the frontend. Knowing how the DOM works and how to access elements gives you a deep understanding of how websites work. In addition, there will be the point where you have to do some custom DOM manipulation, even when you use modern frontend frameworks, and you definitely do not want to put jQuery in your package.json just to access an element.

6. Node.js / Express Even as a frontend developer, you should know the basics of node.js. Ideally, you would also know how to spin up a simple express server and add some routes or change existing ones.

JavaScript is great for writing scripts to help you automate a lot of tasks. Therefore, knowing how to read files, work with filepaths or buffers gives you a good toolset to build anything.

7. Functional Approach There is an everlasting debate about functional vs. object-oriented programming. You probably can achieve the same thing with both of the approaches. In JavaScript, it is even easier, you have both of the approaches available. Libraries like lodash give you a really nice collection of tools for building applications with a functional approach. Nowadays, it is not even necessary to use external libraries any more. A lot of the most important functions have been implemented in the official JavaScript specification. You definitely should know how to use map `reduce` filter `forEach` and `find`.

8. Object Oriented Approach Similar to the functional approach, you also have to get familiar with object oriented JavaScript, if you want to master it. I neglected that part for a long time in my career and just worked my way through with a workaround, but sometimes it is definitely better to use objects/classes and instances to implement specific functionality. Classes are widely used in React, MobX or custom constructors.

9. Frontend Framework The big three are React.js, Angular and Vue.js. If you are looking for a job nowadays, you will almost always have one of those listed as a prerequisite. Even if they change quite quickly, it is important to grasp the general concept of those to understand how applications work. Also, it is just easier to write apps that way. If you haven’t decided which train you want to jump on, my suggestions is React.js. I have been working with it for the last couple of years and did not regret my decision.

10. Bundling / Transpilation Unfortunately, this is a big part of web development. On the one hand I should not say unfortunate, because it is great to be able to write code with all the newest features. On the other hand, the reason why I’m saying that is that we always have to keep in mind that there’s older browsers around that may not support these features, therefore we have to transpile our code into something else that the old browsers understand. If you work with node.js, you will probably have less exposure to transpiling your code. The de-facto standard for transpilation is babel.js, so get familiar with it. As for bundling your code and tying everything together, you have a couple of options. Webpack was the dominant player for a long time. Some time ago, parcelpopped up out of nowhere and is now my preferred solution, since it is so performant and easy to configure, although not perfect.

Resources for the Two Study: Javascript Testing Selenium Automation Nightwatch js Nodejs

The Foundations of HTML, CSS & Javascript Computer Programming for Beginners Javascript: Crash Course Javascript Specialist Aprende a programar usando JavaScript – Curso en español The Complete JavaScript series with jQuery and Angular JS Beginner’s Introduction to Meteor JS JavaScript course – Learn core concepts of JavaScript Learn Modern JavaScript: Getting Started Angular 6 and 7, Apollo, GraphQL and Graphcool – Complete Guide Ethereum : Master Web3js Library Aprende a programar desde cero – Lógica de Programación