Introduction
JavaScript is a scripting language you can use to make web pages interactive. To write javascript code you need a code editor.
Code Editor For JavaScript
A code editor is a text editor also designed to help you write code. A code editor is one of the essential tools for programmers designed to edit the source code of computer programs. For javascript I recommend using Visual studio code.Download visual studio
JavaScript can be written in two ways in your HMTL code:
Internal Javascript
A JavaScript function is placed in the <body> section of an HTML page
<html>
<body>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External Javascript
Scripts can also be placed in external files. External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script file in the src(source) attribute of a <script> tag:
<script src="myScript.js"></script>
Modern Javascript concepts
Some of the javascript concepts that this article will cover include:
- Variables
- Objects
- Promises
- Classes
Variables
To declare a variable in JavaScript, there are three keywords available, each with its own set of peculiarities. var, let, and const are the three variables.
console.log(myNum); //undefined
var myNum = 5;
function myFunc() {
let myFunc = 'Mary';
const person = {
name: 'Mary'
};
Objects
In JavaScript, an object is a standalone entity, with properties and type. They include: string, number, boolean, null and undefined. For example a user object can have the following properties: username, email and gender.
You can define a property of an object by assigning it a value. To demonstrate this, here’s a sample object myDog
const myDog = {
“name”: “Joe”,
“legs”: 4,
“tails”: 1,
“friends”:[“everyone”]
};
Promises
In JavaScript, promises are the most prevalent approach to handle asynchronous tasks. A promise established in JavaScript is primarily built on the idea that when the time comes, it will either be resolved or rejected. A promise exists in the following three states:
- Fulfilled - the promised task was completed successfully.
- Rejected - the promised task was not completed or is unsuccessful.
- Pending - the promised task has neither been fulfilled nor rejected. Example:
function work() {
return true;
}
const myPromise = new Promise((resolve, reject) => {
let isopen = work();
if(isopen === true) {
resolve('Shop is open!')
}
else {
reject('Shop is closed now!')
}
});
myPromise.then((order) => {
console.log(order);
}).catch((order) => {
console.log(order);
});
Classes
ECMAScript 2015, also known as ES6, introduced JavaScript Classes. A JavaScript class is just a template for constructing objects.
Example
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
When you have a class, you can use the class to create objects. The example below uses the Car class to create two Car objects.
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Conclusion
That brings me to the end of my article; I hope it explains modern javascript in a way that you have understood. Happy Coding.
Top comments (0)