Learn Javascript Concepts

JavaScript Events and Functions

  • Functions is one of the fundamental building blocks in JavaScript language.
  • Javascript function is basicly set of statements that calculates a value or performs a task.
  • A JavaScript function is a block of JavaScript code, it can be executed later when programmer decide.
  • For example, a function can be used when user clicks on menu.

tip: We will discuss about Javascript functions in depth later

Part 1

Javascript <script> tag

When typing Javascript in .html files, code must have <script> tags

Code Example:

document.getElementById("test").innerHTML = "Free code JavaScript";

Try yourself >>

Part 2

JavaScript <body> and <head>

In this lesson, we will place a Javascript function inside HTML body section.

When you press the button the function is invoked.

Code Example:

<!DOCTYPE html >

<h1>Header </h1>
<p id="test">Paragraph </p>
<button type="button" onclick="myFunction()"> Try it </button>
function myFunction() {
document.getElementById( "test" ).innerHTML = "Javascript changed me." ;
Try yourself >>

tip: To improve display speed, place scripts at the bottom of the body tag.

tip: You can write unlimited scripts in an HTML file, you can also position your scripts in the Head section (in this case you will place head tag above the body tag and place script there), in the last example we placed the script in the body section.

Part 3

External scripts

You can position scripts in external folders.

When you use the script in many pages of your website, external scripts are usaful.

we will explain how to use external script in the next example:

tip: JavaScript files use the file extension .js

Code Example:

<script src="/Java/FreeScript.js"></script >

Try yourself >>

tip: one of External JavaScript Advantages is that Cached Javascript files speed up page load speed.

Part 4

External References

You can also call javascript function from external URL.

Code Example:

<script src="https://www.freecodewiki.com/javascript/JS_Concepts3example.html"></script >

Try yourself >>

learn Javascript and many other Web development courses for free, our main goal is to allow students to learn Javascript concepts and other online programming classes in one place without paying or leaving home.