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)