All About Internal & External JavaScript

You can use JavaScript code in two ways.
  1. You can either include the JavaScript code internally within your HTML document itself
  2. You can keep the JavaScript code in a separate external file and then point to that file from your HTML document.
Internal JavaScript
We have been using internal JavaScript so far. Here is a sample -
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <title>My First JavaScript code!!!</title>
7
​
8
    <script type="text/javascript">
9
​
10
    // Create a Date Object
11
​
12
    var day = new Date();
13
​
14
    // Use getDay function to obtain todays Day.
15
​
16
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
17
​
18
    // This value is stored in today variable
19
​
20
    var today = day.getDay();
21
​
22
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
23
​
24
    var weekday = new Array(7);
25
​
26
    weekday[0]="Sunday";
27
​
28
    weekday[1]="Monday";
29
​
30
    weekday[2]="Tuesday";
31
​
32
    weekday[3]="Wednesday";
33
​
34
    weekday[4]="Thursday";
35
​
36
    weekday[5]="Friday";
37
​
38
    weekday[6]="Saturday";
39
​
40
    // weekday[today] will return the day of the week as we want
41
​
42
    document.write("Today is " + weekday[today] + ".");
43
​
44
    </script>
45
​
46
    </head>
47
​
48
    <body>
49
​
50
    </body>
51
​
52
    </html>
53
​
External JavaScript
You plan to display the current date and time in all your web pages. Suppose you wrote the code and copied into all your web pages (say 100). But later, you want to change the format in which the date or time is displayed. In this case, you will have to make changes in all the 100 web pages. This will be a very time consuming and difficult task.
So, save the JavaScript code in a new file with the extension .js. Then, add a line of code in all your web pages to point to your .js file like this:
?
1
<script type="text/javascript" src="currentdetails.js">
Note: It is assumed that the .js file and all your web pages are in the same folder. If the .js file is in a different folder, you need to specify the full path to your file in src attribute.
Try this yourself:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;
     
var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
    hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
    hours1 = "0" + hours;
    strToAppend = "AM";
}
else
{
    hours1 = hours;
    strToAppend = "PM";
}
     
if(mins<10)
mins = "0" + mins;
if (secs<10)
    secs = "0" + secs;
 
switch (month)
{
    case 1:
        monthName = "January";
        break;
    case 2:
        monthName = "February";
        break;
    case 3:
        monthName = "March";
        break;
    case 4:
        monthName = "April";
        break;
    case 5:
        monthName = "May";
        break;
    case 6:
        monthName = "June";
        break;
    case 7:
        monthName = "July";
        break;
    case 8:
        monthName = "August";
        break;
    case 9:
        monthName = "September";
        break;
    case 10:
        monthName = "October";
        break;
    case 11:
        monthName = "November";
        break;
    case 12:
        monthName = "December";
        break;
}
 
var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);
This is your currentdetails.js file. Don’t worry seeing long lines of code. You will learn to code soon. Make changes to your HTML document like this:
?
1
2
3
4
5
6
7
8
9
<html>
    <head>
       <title>My External JavaScript Code!!!</title>
       <script type="text/javascript" src="currentdetails.js">
       </script>
    </head>
    <body>
    </body>
</html>
When to Use Internal and External JavaScript Code?
If you have only a few lines of code that is specific to a particular webpage, then it is better to keep your JavaScript code internally within your HTML document.
On the other hand, if your JavaScript code is used in many webpages, then you should consider keeping your code in a separate file. In that case, if you wish to make some changes to your code, you just have to change only one file which make code maintenance easy. If your code is too long, then also it is better to keep it in a separate file. This helps in easy debugging.
at