Javascript (often called JS) is high-level, dynamic, untyped and interpreted programming language. HTML, CSS and JS are the three core technologies of world web production. This language supports object-oriented programming, imperative and functional programming. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.
Although there are similarities in syntax and standard libraries between Javascript and JS, these are two fairly different languages with fairly different purposes and different structural design. Javascript is used to program the behavior of web pages, make web pages dynamic, run a function when a button is clicked and also allows us to retrieve data from a database and what not!
The main use of Javascript is that it allows you to make things happen in the user’s browser without sending messages back and forth to the server. There are a variety of reasons why you might want to do this.
For example, sending a message to the server and getting a reply is a relatively long process: it is almost always a noticable time lag, and can take many seconds. Doing something directly in the browser can be much faster. So if, for example, you want to give the user an “invalid data” message of some sort, it can be much faster if it comes from Javascript.
Some merits of Javascript are as follows.
- Javascript is quite easy to implement. You just need to put your code in the HTML document and tell the browser that it is Javascript.
- Javascript allows you to create highly responsive interfaces that improve the user experience and provide dynamic functionality, without having to wait for the server to react and show another page.
- Javascript can load content into the document if and when the user needs it, without reloading the entire page — this is commonly referred to as Ajax.
- Javascript can test for what is possible in your browser and react accordingly — this is called Principles of unobtrusive Javascript or sometimes defensive Scripting.
- Javascript can help fix browser problems or patch holes in browser support — for example fixing CSS layout issues in certain browsers.
There’s a few ways to try out Javascript, and when learning it’s best to try them out to see what works for you. But first, how does Javascript relate to HTML and CSS?
Mostly, Javascript runs in your web browser alongside HTML and CSS, and can be added to any web page using a script tag. The script element can either contain Javascript directly (internal) or link to an external resource via a src attribute (external).
A browser then runs Javascript line-by-line, starting at the top of the file or script element and finishing at the bottom (unless you tell it to go elsewhere).
You can just put the Javascript inside a script element:
<script>
alert("Hello, world.");
</script>An external Javascript resource is a text file with a .js extension.
To add a Javascript file to your page, you just need to use a script tag with a src attribute pointing to the file. So, if your file was called script.js and sat in the same directory as your HTML file, your script element would look like this.
<script src="script.js"></script>We can even install node and use that as an REPL (Read-Evaluate-Print-Loop) and for running scripts in bash or zsh. We can also use the browser’s in-built console where we can run JS commands.
Storing data so we can use it later is one of the most important things when writing code. Fortunately, Javascript can do this! If it couldn’t, it’d be pretty useless.Variables can be used to store strings and numbers .
Some examples are as follows.
var name = "Tom";
var age = 20;It is very simple and is similar to most programming languages you would know: if some logic (the condition) is true, run a block of code. The most simple if statement looks something like this.
if (10 > 5) {
// Run the code in here
}The if-else form of an if statement is used to run an alternative piece of code if the conditional is not true. The code in the if block below will be ignored, for example - only the code in the else block will be run.
if (43 < 2) {
// Run the code in here
} else {
// Run a different bit of code
}The if-else if-else statement is similar to the if-else statement except for the fact that it can multiple conditions and run that block whose condition yeilds true after evaluation.
var marks = 75, grade;
if (marks > 90) {
grade = 'A';
}
else if (marks > 80 && marks <= 90) {
grade = 'B';
}
else {
grade = 'C';
}Note: && is the and operator, which is the same in most programming languages.
Loops are a way of repeating the same block of code over and over. Two of the most common loops are while loops and for loops.
A while loop repeats a block of code while a condition is true.
var i = 1;
while (i < 10) {
alert(i);
i = i + 1;
}
// i is now 10A for loop is similar to an if statement, but it combines three semicolon-separated pieces information between the parentheses: initialization, condition and a final expression.
for (var i = 1; i < 10; i++) {
alert(i);
}Functions are reusable blocks of code that carry out a specific task. To execute the code in a function you call it. A function can be passed arguments to use, and a function may return a value to whatever called it.
To create a function, use the function keyword. You then list the arguments in parentheses, and then supply a block that contains the function’s code. Here’s a function that adds two numbers.
var add = function (a, b) {
return a + b;
};Javascript objects are like a real life objects; they have properties and abilities. A Javascript object is, in that sense, a collection of named properties and methods - a function.
An object can be stored in a variable, and the properties and methods accessed using the dot syntax.
Variables can hold objects, and creating an object is done using a special syntax signified by braces.
var jedi = {
name: "Yoda",
age: 899,
talk: function () { alert("another... Sky... walk..."); }
};In this object jedi we created, we can access the elements using the . (dot) operator or like arrays as follows.
console.log (jedi.name); // prints "Yoda"
console.log (jedi['age']); // prints 899In JavaScript, you create an array using the array-literal syntax.
var emptyArray = [];
var shoppingList = ['Milk', 'Bread', 'Beans'];You have got a headstart, now go on try these links and get a clear idea about JS and how to work with it.
- Official Javascript Website
- Codecademy Course (For beginners)
- W3Schools JS Course (For beginners)
- EdX course on JS
- MDN for Developers, a complete resource for learning JS
You’re done with JS. You’re now one step closer to building amazing Web Applications.
Oh, and here is the list of all in-built Javascript functions that you can use to build your fucntions.