Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more Show If you were to ask a developer back in the early 2000s what the most important programming language for web development was going to be, the last thing they would have said is JavaScript. Flash, PHP, and Java were all strong contenders for dominance. JavaScript, they might say, is a lightweight language, a toy language for doing silly little browser effects and (at best) some basic form data validation. But today, JavaScript is perhaps the most important web development language. Even though most server-side development is done with one of the more “conventional” programming languages, just about every website uses some amount of JavaScript for “front-end” functionality. Moreover, the evolution of the language itself and the standardization of browser technology has given rise to in-browser web apps powered almost entirely on JavaScript. JavaScript frameworks have thrown that trend to hyperdive. Additionally, JavaScript is no longer just a front-end language. Thanks to the Node.js project, it is now possible to easily use JavaScript to build applications server-side as well. And with the rise of technologies such as MongoDB that use JSON as a data serialization language, it is now possible to use JavaScript for an entire web application, from data storage to server-side processing to front-end UI. Whatever other programming languages you use or are interested in learning, it is increasingly clear that JavaScript is the sine qua non of modern web development. It is time for all of us to “learn JavaScript deeply.” Contents
About the languageHistoryJavaScript was originally developed at Netscape, for use in their browser Netscape Navigator. This was in the mid-1990s, during the height of the browser wars, when each browser developer was attempting to win market share by creating unique features unavailable in other browsers. There was also a line of thinking during that period that browsers would be, in many ways, an extension of the operating system and general user experience. There seems to have been some thought that Netscape’s browser would be part of a distributed operating system running a portable version of the Java environment. This would be complemented by a lightweight scripting language, which was officially called LiveScript and developed under the project code name Mocha. It isn’t clear whether it was that plan, or a simple marketing ploy, but this “lightweight interpreted language” eventually got name “JavaScript,” even though the language had no real connection to Java. JavaScript was added to the Netscape Navigator browser in 1996, and Microsoft quickly reverse-engineered a JavaScript implementation for their Internet Explorer browser, which they called JScript. Unfortunately, the implementations were quite different. Different approaches to HTML and what became CSS complicated matters even more, as JavaScript exists primarily to manipulate objects within the document — different document models produced different results. It was common during this period to see websites instruct their users that the site “Works Best on Netscape” or “Works Best on Internet Explorer.” (AOL, which eventually bought Netscape, also had an in-app browser. But nothing worked the best on it.) Netscape submitted JavaScript to Ecma, as a potential international, industry-wide standard. In 1997, the standard version, called “ECMAScript” was released. There have been a number of subsequent version releases since then. Ecma, and not Netscape, now determines the course of the language. Thanks to a general trend toward browser standardization that began in the early 2000s, and was largely complete by the middle of the 2010s, most browsers implement ECMAScript (and the HTML Document Object Model) in largely similar ways. Today, you can be fairly confident that a JavaScript-based application written according to widely-recognized best practices will work on all major browsers. Language featuresObject OrientationJavaScript is object-oriented. It’s a little weird in this way, though; there are objects, but no classes. So many “classical” object-oriented programmers often find it somewhat deficient, or would say it isn’t actually object-oriented at all. But it is. Nearly everything (excluding some primitive values) in JavaScript is an object, and can therefore have methods and accessible data. Objects are not instantiated from classes, however. They are cloned from other objects. Rather than writing a class, you would simply create a prototype object. New objects are then cloned from there, but new methods and properties can be added to the new objects as needed. There are some advantages and disadvantages to this approach. One (possible) advantage is that if you just need a single instance of an object, you don’t have the overhead of writing an entire class and then writing the code that instantiates it. Given JavaScripts primary domain (web documents) this makes a lot of sense. The main disadvantage is basically philosophical in nature. In a complex application, it will certainly be the case that you would write a number of prototype objects that are note used, but only cloned into new objects — essentially re-creating a class-based paradigm. Except the original objects are still there, as objects. There is no essential difference between them, even though they are being used in fundamentally different ways. The class-object dichotomy represents a particular (“classical,” even) view of reality — abstract ideas about categories and types of things which are instantiated into real objects. JavaScript presents a messier (but, probably, more realistic) view of reality in which there are no abstract, Platonic notions; there is only this object, and this one, and this one, and so on.
StructureJavaScript, like most modern programming languages, follows the structured programming model. The syntax is somewhat similar to C, with Unlike C, JavaScript mostly only supports function-level variable scope. Block level scoping was added somewhat recently but (as of this writing), it is still much safer to code as if this were not present. Speaking of variables, variables in JavaScript are dynamically typed. This means you don’t have to declare a variable and its data type (string, number, etc.) ahead of actually assigning the value to the variable. This is quite different from C, but is pretty common among other interpreted scripting languages. Functions in JavaScript are first-class, which means that they can be passed as arguments to other functions or stored as variables. This allows (among other things) functions to be defined inside of other functions. This is used frequently in in-browser applications to cause functions to get defined at particular points. For example, in the following
jQuery code, the inner function adjusts the
The Event LoopJavaScript
relies on an event loop which listens for messages (such as mouse clicks, key strokes, or messages created by other object), and queues those messages for processing. Functions can be created that listen for certain messages, and are then triggered when those events happen (such as the example above, which triggers the inner function when the This event driven architecture makes perfect sense for JavaScript’s original (and still primary) purpose — website user interaction. It allows the application to listen for user-created, unprompted inputs. More recently, this feature has been exploited in server-side environments like Node.js. Having a built-in event-listening system makes it (relatively) easy to build real-time applications in domains such as chat, gaming, collaboration, and dispatch. JavaScript EventsJavaScript provides a
way of interacting with, and manipulating, the content of a web page. This can be done through code stored in a linked An event is like a signal or message that something has happened. For example, every time your mouse clicks on an element of a page, the You can imagine the possibilities here:
JavaScript, being a language designed for user-interation, is “event-driven”. There are a lot of events in JavaScript, and bunch of them are tied to HTML elements. Events as HTML AttributesAll HTML elements on a webpage have a set of built-in events which fire under certain circumstances. You can access these events as if they were attributes of the element:
#flamingo-picture-1 { If you are doing much more than one single line, it can get a bit too much to try to keep all of it inside the
#flamingo-picture-2 { function changeBorderColor() { List of JavaScript Events on HTML ElementsMost of the names describe exactly when they fire. A few of them are only applicable to a few kinds of elements. See JavaScript Elements for code samples and demonstrations. onclickWhen the user clicks on the element. (Mouse button is pressed and released immediately.)oncontextmenuWhen the context menu (“right-click”) is opened (or when the user tries to open it — this can be used to disable the context menu).ondblclickWhen the element is double-clicked.onmousedownWhen the user presses the mouse button down while inside (or over) the element. (Mouse button is pressed and held.)onmouseenterWhen the mouse enters the element. (Sometimes called “hover,” but that is not the name of the event.)onmouseleaveWhen the mouse leaves an element.onmousemoveWhen the mouse moves while inside an element.onmouseover When the mouse enters an element, or one of its children.onmouseoutWhen the mouse exits an element, or one of its children.onmouseupWhen the user releases the mouse button, while the mouse is inside the element.onerrorWhen an error occurs while loading an external file (most often used on media files).onloadWhen the elements completes loading (mostly used on media files, but can be used also for<body> ).onscroll
When the content is scrolled.Programming NotesThe Document Object ModelHTML is used for your page’s content. CSS controls how everything looks. How do you use JavaScript to manipulate what is on the screen and what it looks like? To you use JavaScript to manipulate the HTML directly? The answer is the DOM, or the Document Object Model. And no, you do not manipulate the HTML directly. You manipulate the DOM. The DOM is the browser’s own representation of a web page, based on the HTML and CSS. But the DOM is not a document, is the current, live state of page as it is displayed in the browser currently. This means that the DOM knows things like element size, playback position and volume, which element is being clicked on or hovered over. Also, the DOM updates as it is being manipulated. So if you change the content of an element, that change is made in the DOM and reflected in the view (the browser’s window). AjaxJavaScript is the J in Ajax, which originally stood for Asynchronous JavaScript and XML. (XML, or Extended Markup Language, is a data serialization format. It has now largely been replaced by JSON — JavaScript Object Notation — but the name sticks because “Ajax” sounds catchy.) Ajax is something you probably use everyday. It is an application pattern wherein data is sent to or fetched from the server without the web page being refreshed. (Requests and response are not out of sync with browser refreshes or changed in URL.) This is how many web apps, like Gmail for example, work. The client-side (browser) JS application sends requests to the server and receives all the needed data or content as a JSON object (or XML document) and then uses that data to update the view. jQuery, the unofficial standard libraryMost programming languages have a standard library, a set of classes and/or functions that help programmers do common, low-level programming tasks. Typically, these standard libraries come packaged with the language and are documented along with them. For a number of historical reasons, JavaScript does not have a standard library. This means that in a “pure” JavaScript implementation, many very common tasks are needlessly verbose and complicated. JQuery is one of several JavaScript libraries which provide a wide range of basic functionality, making it easy to do common programming tasks like traversing the DOM, manipulating HTML objects and their properties, communicating with a server, and interfacing with the browser. The jQuery library is extremely common, so much so that many consider it to be the de facto standard library for JavaScript. Understanding jQuery is an important skill for any front-end web developer. Not everyone is happy with jQuery being considered the standard library, and a number of developers and teams have tried to create an alternative. Some are promising, some have gotten traction in particular communities, but none come anywhere close to jQuery’s market share.
ResourcesLearning JavaScriptTutorials and Online Courses
The Stanford online course is probably your best bet if you’re really serious about becoming a developer. It covers serious Computer Science and programming techniques, using JavaScript. There are more and more JavaScript tutorials coming online everyday. Almost all of them cover fairly similar ground work, and none of them really prepare you to be an actual JavaScript developer. Don’t fall into the trap of going from tutorial to tutorial, thinking the next one will be the one that helps you finally “learn JavaScript.” Once you understand basic principles and syntax, you should go deeper by delving into material written for developers, such as JavaScript documentation, developer guides for the more popular frameworks, and tutorials on advanced techniques and methodologies. JavaScript Documentation and Online References
BooksIf you are just starting, you probably don’t want to learn JavaScript from a book. One of the online tutorials above will get you going in the right direction. But once you get the basics down, and want to move into intermediate and advanced programming techniques, you’ll want to consult some of these books.
Websites, Blogs, and PeopleOnce you’ve started to get comfortable with JavaScript development, it’s important to get uncomfortable again by exposing yourself to unstructured conversation about the language and its broader ecosystem. Keeping up with new developments, recent releases, and vutting-edge practices will transform you from a JavaScript coder to a JavaScript expert.
Also see this list of 33 JS developers to follow. JavaScript ToolsThere are a huge number of JS libraries and toolsets, and more are coming available everyday. We couldn’t hope to cover all of them even if we wanted to. And you will never know or use most of them. But, it’s important to realize that being a good JavaScript developer doesn’t just mean knowing the language — it means knowing the most popular (or most useful) tools. With that in mind, the lists below only cover the most important JS tools, libraries, frameworks, and extensions. If you are looking for completeness over relevance, check out this community driven catalog of JavaScript libraries. Libraries
Frameworks
Advanced ToolsThis is a list of relatively advanced tools which drastically extend what JavaScript is capable of, or which dramatically alter how JavaScript is used by a developer.
See also this very long list of JavaScript compilation tools. (Did you know you can compile almost every commonly used language to JavaScript? Incredible…) ConclusionHTML is the language of web content, but JavaScript is the language of web functionality. It is the most important language for web development, and one of the fastest evolving languages, in terms of practices, tooling, and ecosystem. It’s an incredibly exciting language to be using right now. And it’s also a relatively easy language to get into. Everything you need to get started is already on your computer — your browser is your run-time environment, and you can see you initial results right away. There is no shortage of tutorials and online courses to help you learn, and a severe shortage of skilled developers who know the language well. If you are looking for a career in web development, you need to start learning JavaScript. Adam is a technical writer who specializes in developer documentation and tutorials. What do you need to know for JavaScript?Prerequisites. To learn JavaScript, you must know the basics of HTML and CSS, both of which are extremely easy to learn. For a working knowledge of JavaScript and most web-based projects, this knowledge will be sufficient.
What are 5 things JavaScript can do?What is JavaScript used for?. Adding interactive behavior to web pages. JavaScript allows users to interact with web pages. ... . Creating web and mobile apps. Developers can use various JavaScript frameworks for developing and building web and mobile apps. ... . Building web servers and developing server applications. ... . Game development.. Which part of JavaScript is important?10 JavaScript Concepts in 2021 That Help Get Jobs. 10) Asynchronous Communication. ... . 9) Dom creation and modification. ... . 8) Loops, Loops, Loops, Loops. ... . 7) Dev Tool Debugging. ... . 6) Scope. ... . 5) Functions and Function Calls. ... . 4) Conditional statements. ... . 3) Events and Event Handling.. What is the hardest topic in JavaScript?Asynchronous JavaScript (promises, callbacks, async/await) Closures. The event loop. Recursion.
|