JavaScript was created over 26 years ago and is currently one of the most popular programming languages.
But what is JavaScript?
JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development. JavaScript is used as client-side programming language by 97.6% of all the websites.
History of JavaScript
In 1995, Netscape developer Brendan Eich created version one of JavaScript in just 10 days. When it first came out it was called Mocha, then later changed to LiveScript and finally settled on JavaScript.
Brendan Eich’s bosses wanted JavaScript to have similar syntax to Java. They also felt that JavaScript was going to help speed up web development and be easier to learn compared to Java. Over the years JavaScript has grown and developed into a versatile language that can be used on the web and mobile applications.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
document.getElementById(“demo”).innerHTML = “Hello JavaScript”;
JavaScript Can Change HTML Attribute Values
JavaScript changes the value of the src (source) attribute of an tag
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute.
document.getElementById(“demo”).style.fontSize = “35px”;
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style
document.getElementById(“demo”).style.display = “none”;
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
document.getElementById(“demo”).style.display = “block”;
What is ECMAScript?
ECMAScript stands for European Computer Manufacturers Association Script. According to MDN docs, ECMAScript is the scripting language that forms the basis of JavaScript.
The association created the ECMA standard to make sure that web pages were consistent across different browsers. As of August 2021, there are a total of 12 published versions of ECMAScript.
Is Java the same as JavaScript?
Even though these two languages have similar syntax and share the first four letters of “Java”, they are not the same language.
Here are some key differences between the two languages.
Java is a compiled programming language. That means before the program is run, the code needs to be translated into machine code so the computer can understand it.
JavaScript is an interpreted language. In the browser, an interpreter will read the code and run it without needing to compile it first.
Java is used as a server side (backend) language whereas JavaScript is primarily used as a client side (frontend) language. But JavaScript can also be used to create backend web
applications with Node.js.
How do HTML, CSS and JavaScript work together on the web page?
Now that we have learned the history of JavaScript, we need to understand how it works on a website. HTML renders the content, CSS styles the page to make it look good, and JavaScript makes the site interactive. We use HTML to create and display the button on the page.
Click me
We also have this p element in our HTML which does not have any text in between the opening and closing tags. In JavaScript, the text is added once the user clicks the button. We use CSS to style the button and position it on the page.
button {
display: block;
margin: 20px auto 10px;
padding: 25px 20px;
font-size: 1.4rem;
cursor: pointer;
border: none;
border-radius: 50%;
background-color: #3b5998;
color: white;
}
In order to access the HTML elements, we use getElementById. This is where our JavaScript comes in.
const btn = document.getElementById(“btn”);
const para = document.getElementById(“para”);
The variable called count keeps track of how many times the user clicks the button. The count is continually updated every time the button is clicked.
let count = 0;
This is the array of responses that will display to the user.
const responsesArr = [
“You have clicked the button this many times: “,
“Wow, you like to click that button. Button clicks: “,
“Why do you keep clicking it? Button clicks:”,
“Now you are just being annoying. Button clicks:”
];
We use the addEventListener which tells the computer to listen for a click event. Once the
click is detected, then the message will appear on screen with the count.
btn.addEventListener(“click”, () => {
count++;
if (count < 10) {
para.innerHTML = ${responsesArr[0]} ${count};
} else if (count >= 10 && count < 15) { para.innerHTML = ${responsesArr[1]} ${count}; } else if (count >= 15 && count < 20) {
para.innerHTML = ${responsesArr[2]} ${count};
} else {
para.innerHTML = ${responsesArr[3]} ${count};
}
});
We use an if else statement to check how many times the button was clicked and display a different message based on how high the count number is.
JavaScript libraries and frameworks
JavaScript libraries and frameworks were created to help speed up development. Once you have learned “Vanilla” (or basic/plain) JavaScript then you can start to learn a library or framework.
There are many options to choose from but you don’t need to learn them all. Research job postings in your area to see what libraries and frameworks are being used.
Here are some popular options.
React
Angular
Vue
Conclusion
JavaScript was first created in 1995, and has since become a powerful and versatile language used for websites, online games and mobile apps. Even though Java and JavaScript have similar syntax and share the first four letters of “Java”, they are not the same language. Java is primarily used as a server side language whereas JavaScript is used in the browser.
HTML, CSS and JavaScript are the three core languages of the web. HTML is for content, CSS is for styling, and JavaScript is for interactivity on the site.
Hope you found this article helpful and best of luck on your web developer journey.