Despite the similarity in their names, JavaScript and Java barely share any commonalities in their purpose and usage. JavaScript (or JS for short), unlike HTML and CSS, is indeed a programming language, typically used to process and manipulate data, which is then to be displayed by HTML and CSS. What makes it so universal among web projects is its ability to integrate and work with HTML/CSS as well as other web development tools so well.
In our current folder, let's examine the script.js file, which contains the following code:
class Person {
constructor(name) {
this.name = name;
}
sayHi() {
alert("Hello, I'm " + this.name)
}
}
let p = new Person("Quan");
p.sayHi();
//document.body.innerHTML = "<p>Hello, I'm " + p.name + "</p>"
Being a programming language, JS allows web developers to implement object-oriented development ideas, which, in this case, is the design of classes.
In this example, we have a class named Person, whose constructor takes in a string as the name of the person. The Person class also has a method called sayHi(), which will create an alert on the web page that implements it with a hello message. Outside of the class declaration, we initialize an instance of the Person class with the Quan name, and then call the aforementioned sayHi() method.
This file on its own cannot create and display a web page; instead, it would have to be called from an HTML file. Let's turn our attention to an example of such a file, person.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Person</title>
</head>
<body>
</body>
<script src="script.js"></script>
</html>
Different from the other HTML examples we have seen so far, this file has a <script></script> tag that, via the src attribute, points to a JavaScript script, which in this case is our script.js file. Now, open the HTML file in a browser, and you will see the effect of the JS code we entered in the action. Specifically, the alert() function in JS creates a pop-up window in a web page with a specified message:
Additionally, JS can modify the HTML content of a web page in its code. For example, in the script.js file, uncomment the last line of code by removing the // double forward slashes from the last line of code, and put the slashes in front of the second-to-last line (where we used the alert() function) so that the code becomes as follows:
let p = new Person("Quan");
//p.sayHi();
document.body.innerHTML = "<p>Hello, I'm " + p.name + "</p>"
As you can see, instead of creating an alert pop-up, this time, we are using JS to create an actual HTML element inside a <p></p> tag. Since JS is a programming language, we are free to perform string concatenation and access attributes of class objects (p.name). We see that we are able to include the <p></p> tag inside the string itself, which is a convenient method of manipulating the content of our HTML code within JavaScript.
This discussion concludes our brief introduction to the web development trio: JavaScript, HTML, and CSS. We see that with JS, web developers can dynamically perform complex calculations and data processing and then finally display the results using customizations in HTML and CSS.
In the next section, we will find out how PyCharm supports web development with these languages through various features and functionalities.