Javascript Basics

Client side vs Server side

Hopefully, we assume that you have a basic understanding of the internet and its underlying technologies. In web programming, there are two different types of programming models: Client side programming and Server side programming. Client side programming considers to scripts that run within your web browser and these scripts has no interaction with a web server in order for the scripts to run. Javascript is the most popular client side scripting language. On the other hand, Server-side programming refers to programs that run on the web server, which then sends results to your web browser. PHP , Asp.net etc. are the popular Server side programming languages.

Javascript is Case-Sensitive

Javascript programs runs only in the web browsers and these scripts are read and executed by an interpreter (or engine) inside the web browser. The most common uses of JavaScript are interacting with clients, getting available information from them, and validating their actions. The first and most important thing regarding Javascript is that it is case sensitive. Everything defined in the Javascript is case sensitive, that means a variable 'var' is different from a variable named 'Var'.

Where Do My JavaScript Go?

Embedded in your HTML files

You can add your Javascript between the < script > ... < /script > tags. When the browser encounters a < script > tag, it assumes that the script block is written in JavaScript. you can place these script blocks in the < head > or in the < body > section of HTML page or you can use both sections at the same time.

Placing Javascript at Head section

<html>
<head>
  <script>
  alert("Javascript run at HEAD section");
  </script>
</head>
<body>
</body>
</html>

Placing Javascript at Body section

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script>
  alert("Javascript run at BODY section");
  </script>
</body>
</html>

External script File

JavaScript code can either be embedded in your HTML files (above examples) or placed in an external script file with a .js extension. When you place your JavaScript in an external file, put the name of the script file (.js) in the source (src) attribute of the < script > element.

<script src="scriptSource.js">....</script>

In the above code, scriptSource.js is the external Javascript file pointed as source file in < script > tag.

Advantages

The biggest advantage of external Javascript files are code reuse. If your Javascript is used by more than one page you do not need to repeat the script in each page that uses it. Moreover, if you want to update your script you need only change it in one place.

Tools Needed to Create JavaScript Web Applications

All that you need to get started writing JavaScript programs for web page is a simple text editor, such as Windows Notepad, and a web browser for run your Javascript embedded in web page.

First JavaScript Program

Open a text editor (e.g. notepad) and copy and paste the following code in the text editor and save file as "firstJS.html".

<!DOCTYPE html>
<html>
<body bgcolor="white">
  <p>First Javascript Program</p>
  <script type=text/javascript>
    alert("Click OK to change the background color !!!");
    document.bgColor = "red";
  </script>
</body>
</html>

In order to run the Javascript, start a web browser and open the file "firstJS.html".

Thats All!

When you open the file in web browser, first you get a message box in a white background and then you press OK button you can see the background color is changed to RED color. Now you run your first Javascript program successfully, from the following lessons you can study Javascript programming in detail.