Code has been added to clipboard!

What Is JavaScript: How to Use JavaScript in a Nutshell

Reading time 4 min
Published Jan 2, 2016
Updated Jan 21, 2020


JavaScript is a highly popular programming language with a focus on front-end web development.

While its potential uses have expanded with the introduction of various frameworks, the initial goal of JavaScript was to make a website more interactive. If you want to understand what is JavaScript, it is essential to know what it can do.

By using JavaScript, you can add event listeners, which can execute functions at the click of a button, or when some other event occurs. It is very useful for manipulating the layout of a website by interactively adjusting HTML, and modifying various design features by adjusting CSS using JavaScript code.

What is JavaScript: Main Tips

  • You can manipulate HTML elements by targeting them using getElementById().
  • There are distinct differences between JavaScript vs Python, and JavaScript vs Java.
  • Manipulating an element's CSS properties involves targeting the style object.
  • You will learn how to manipulate HTML and CSS with JavaScript as you go along with the tutorials.

JavaScript vs Java: How Are They Different?

At first glance, it might seem that Java and JavaScript are related to one another as siblings. However, you should not assume that these two concepts mean the same. Java is a general purpose programming language, while JavaScript is more frequently referred to as a scripting language.

If you have read our other tutorials, you should already know that JavaScript is one of the main components to an interactive and beautifully-designed website (alongside HTML and CSS). To put it shortly, the most glaring difference to be mentioned in the discussion of JavaScript vs Java is that Java is meant for handling back-end, while JavaScript is designed more for front-end development. The fact that JavaScript was equipped to deal with back-end is a relatively recent development.

If you are a beginner in the tech world, you are bound to encounter two programming languages: JavaScript and Python. Sometimes, they might be discussed as competitors, but such rivalry is not fair as these languages have quite a few differences. For instance, JavaScript is a scripting language, and Python is an object-oriented programming language.

Another argument in the JavaScript vs Python is that JavaScript can be considered as the father of website interactivity. Python is a very versatile programming language which can be used across different platforms such as web development. While Python is meant for writing the server-side of applications, JavaScript is the preferred language for front-end development.

Manipulating HTML and CSS

getElementById() is one of the most popular methods out of many, used to find a specific HTML element by its id attribute. By finding a specific element, you can use JavaScript to manipulate HTML. In the editor example, you see a basic HTML document with implemented JavaScript. This is one of the most important features of what is JavaScript used for.

In the code example below, you can see a method is used to locate an HTML element with an id="example" and then to replace its content with "Hello world!", using the innerHTML property.

Example
document.getElementById("example").innerHTML = "Hello world!";

You can learn more about in the JavaScript HTML DOM Changing HTML tutorial.

Now, in our next example, we are modifying the CSS properties of an HTML element. It works similarly to manipulating HTML elements. As you may have understood by now, manipulating is one of the most used features of what can you do with JavaScript.

The example below shows you how you can change text size of an HTML element. You replace the CSS property's font-size value to a different one, by using style object and its fontSize property.

Example
document.getElementById("example").style.fontSize = "24px";
//or
document.getElementById('example').style.fontSize = '24px';

What is JavaScript: Summary

  • JavaScript allows you to manipulate HTML elements.
  • JavaScript should not be mistaken for Java, or compared to Python.
  • You can modify CSS properties using JavaScript.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen