JavaScript is a client-side language that is used more widely today, as well as being very dynamic and powerful. There are other client-side scripting languages like VBScript and Python, but none of them compare to JavaScript, and you’ll see why in the course of this guide.
Client-side languages are used to make your websites more lively, interactive and responsive. And be careful, never confuse Java with JavaScript. JavaScript, as the name implies, is a scripting language, whereas Java is a much more complex programming language.
The syntaxes used in JavaScript are closely related to the C programming language. Brend Eich in 1995 developed JavaScript. At that time, the language was officially known as ActionScript and appeared in the Netscape browser, which at the time was a very popular browser.
You can very well use JavaScript to help users interact with more dynamism and practicality on web pages. JavaScript can also be used to control the browser, communicate asynchronously with the server, dynamically change the content of a Web page and to develop games and applications, both mobile and desktop. But in addition, JavaScript is still a very misunderstood language. It is often ridiculed as a toy.
Underneath its simplicity that deceives many are some of the most powerful features, which are even now used by an absurd number of high-end applications, showing that a deep knowledge of this language is one of the most important skills for today’s Web developer .
JavaScript is a dynamic object-oriented language. It has types and operators, objects and methods. The difference between JavaScript and other languages (such as Java and C) is that it has no classes. In contrast, class functionality is accomplished by object prototypes.
And the other difference is that functions are objects, giving functions an incredible ability to store executable code and be passed on as a parameter to any other object.
But before you start writing your first JavaScript program, let’s take a look at how JavaScript actually runs. This will help us to identify the software applications and tools you will need to code in JavaScript.
Since JavaScript is a scripting language, it can never work on its own. It runs on users’ browsers, that is, the browser is responsible for executing JavaScript. The good thing about this is that all modern browsers have JavaScript installed and enabled by default.
In addition to a web browser, you will need a text editor to write your JavaScript code. You can use any text editor to program. Nowadays there are several text editors that you can test to see which one you will identify the most, I will post a link for you to download and see which is the best for you.
Once you have chosen your text editor and installed it, we will be ready to write our first program. We have already mentioned that JavaScript is mainly used to develop interactive, animated and responsive websites. Therefore, it is clear that JavaScript needs to be used with web development languages.
The HTML is one of the most popular web development languages and JavaScript is universally used with HTML. Now we need to learn where we are going to place your JavaScript code inside HTML.
You can place your JavaScript code internally or externally in an HTML document, meaning you can insert your JavaScript code inside your HTML document (internally) or keep your JavaScript code in an isolated file, and then add a link for that file in your HTML document (externally).
If you are going to use your JavaScript code internally, you will need to add <script> and </script> and and place the code between these tags; this way your browser will easily distinguish your JavaScript code from the rest of your HTML or CSS (style sheet) code on your Web page.
You can use your tag within the <head> tag or within the <body> tag.
A small sample of code for you to better understand what we’re talking about. Suppose you want to display the current date (in the format dd-mm-yyyy, that is, day-month-year) on your website. Then you will need to create an HTML document with the following code:
<script>
var today = new Date ( ) ;
var dd = today. getDate ( ) ;
var mm = today. getMonth ( ) + 1 ;
var yyyy = today. getFullYear ( ) ;
if ( dd < 10 )
dd = '0' + dd ;
if ( mm < 10 )
mm = '0' + mm ;
today = dd + '-' + mm + '-' + yyyy ;
document. write ( "<strong>" + today + "</strong>" ) ;
</script>
If you run this .html file using a web browser, you can view the current date in bold. As you already noticed in our HTML file, we added the JavaScript code internally in our
section of the HTML document. But, if you want to keep the same code that we used in the previous example externally, just copy and paste the code without the opening and closing script tags into a new file. sSave the file as current.js. Now, copy the following lines of code to a new file:
<! DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset = "utf-8" />
<script src="currentdate.js"></script>
</head>
<body>
</body>
</html>
Save this HTML document as index.html. Make sure that you have saved both index.html and current.js in the same folder. If they are in separate folders, it means that when you set the value of the src attribute of the <script> tag, you must specify the complete and correct path to the js file.
Now if you open the index.html file using your web browser, you will have a web page that will display the current date. Pretty good huh?
Now you must be wondering when to place an Internal JavaScript code, and when to place an external one. If the code you wrote is specific to one or two of your pages and you don’t have to write many lines of code, then it is much better and more practical to keep your code in-house.
However, if you have many lines of code that are very common for many of your Web pages, then you should consider keeping your code externally.
And generally you will have to apply JavaScript code to many of your pages, so the advantage of using it externally, because instead of writing page by page, you only apply the link with the js code on the page.
And another advantage of inserting JavaScript code externally is that the code will become easily controllable and editable. Suppose you later decide to show the date in DD / MM / YYYY format.
Well, you will have to make changes to just a single .js file, and that change will be reflected on all web pages that have the link to the file.
Not unlike other programming languages, JavaScript must also have an option to store data. And this is where the variables come in. Variables are nothing but data containers. You can use variables to store data or values.
You can also use variables in expressions to perform various types of calculations. We will assign unique names for each variable. Although you are free to place any names you want in each variable. But, although variable names can contain letters, numbers, dollar signs and underscores, variable names must never start with a digit.
In addition, you cannot use keywords reserved for JavaScript in the names of your variables. The variable names are case-sensitive (differentiating lowercase letters from uppercase letters), making “programmer” and “PROGRAMMER” two different variables.
List of valid and other invalid variables:
Valid variables:
your name $ developer employee_name _my store
Invalid variables:
programmers let hired-employee # games developer student danki
Now let’s see how you can create your own variables. Before you can use a variable, you must create it, that is, declare it. You must use the var keyword to declare a variable, as in the example below:
var developerWeb;
You specified the var keyword followed by the variable name and a semicolon. The semicolon tells JavaScript that the current statement is finished. When you declare a variable, a variable with no value is created / started. You can immediately assign a value to the variable just using the equal sign, as in the example below:
var developerWeb = 10;
You can very well assign a value to the variable as soon as you declare it. That is, the following code snippets are both correct:
var web developer; web developer = 10;
OR
web developer var = 10;
In a variable, not only numbers are stored, but strings can also be stored. Example: (“John”, “My name is John”);
Expressions: (8 + 10);
All of these different types of data that variables can contain are known as data types. When you assign numbers, expressions or Boolean values, you enclose the value in double quotes. String values, on the other hand, need to be enclosed in double quotes. Example:
var companyName = “Danki Code”; var isSubmitted = true; var sumVal = 8 + 10;
You can easily concatenate string values using the + operator. The only thing you need to do is add a plus sign between the strings, and that’s it, it’s concatenated. Example:
var firstName = “John”; var aboutName = “Smith”;
var fullName = firstName + ”“ + aboutName;
Now, what is the value of the variable fullName? You got it right if you said “John Smith”. Note that an empty space has been added between the two names.
Sometimes you will have to collect user input data and display it on your website after adding some messages. So, how can you get this user input data? Very simple. You will need to use the prompt () method to collect this data. The prompt () method displays a dialog box (with a text box for the user to enter the input data) and two more buttons: OK and CANCEL. After placing an entry, the user has to click OK or CANCEL to continue.
What we are going to do now is to directly assign the prompt () method to a variable so that the input will be immediately assigned to the variable as soon as the user enters any input. The prompt () syntax is:
prompt (message, text) where ‘message’ is the message that is displayed in the dialog box and text is the default text that is displayed in the text box. Message is a mandatory parameter whereas text is an optional parameter. Example:
var usernameName = prompt ("What is your name?", "Type here");
There is another method for displaying the data in the output of the web page. The method is document.write () to print something on your page.
Here, write () is, of course, a method, and for now, just understand that document is an object with a number of properties and methods that access all elements in the JavaScript HTML document.
The syntax for the document.write () method is: document.write (exp1, exp2,…). Where exp1, exp2, etc. are expressions to print a webpage. And you can have as many expressions as you like. Example:
document.write (“My name is Fábio”); var firstName = "Guilherme";
document.write (firstName);
You may have to add comments to your JavaScript code to make it more readable and understandable.
Sometimes your code will not be updated or maintained by you, but by someone else, and they may not understand the reason for certain lines of code. Thus, adding comments is an excellent programming practice.
You can add single-line comments by starting the line of code with // (two bars).If your comment is too long to span several lines, then start your comment with / * and end with * /. Comments will be ignored by JavaScript.