JavaScript is the programming language of HTML and the Web.

Why Study JavaScript? JavaScript is one of the 3 languages all web developers must learn:

  1. HTML to define the content of web pages

  2. CSS to specify the layout of web pages

  3. JavaScript to program the behavior of web pages

Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.

On button click change value of html element

<p id="demo"></p>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time. </button>

getElementById() find an HTML element with id (=“demo”), then we can change - element content by innerHTML - changes the value of the attribute e.g. src (source) attribute of an <img> tag

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
  • Can Change HTML Styles (CSS)
document.getElementById("demo").style.fontSize = "35px";
  • Can Show/Hide HTML Elements
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

document.getElementById("demo").style.display = "none"; # hide
document.getElementById("demo").style.display = "block"; #show

Varabile declaration

var varName = value
var i = 10
var name = 'myName', age=30

var carName = "Volvo";
var carName; // re-declaring a variable will not lose its value. 
// The variable carName will still have the value "Volvo" after the execution of these statements:

Functions

We can define a function to call on event like button click.

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

The <script> Tag

In HTML, JavaScript code must be inserted between tags.

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

# example of inline script
<!DOCTYPE html>
<html>
   <head>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = "Paragraph changed.";
         }
      </script>
   </head>
   
   <body>
      <h2>JavaScript in Body</h2>
      <p id="demo"></p>
      
      <script>
         document.getElementById("demo").innerHTML = "My First JavaScript";
      </script>
      
      // Can refer to external javascript file
      <script src="myScript.js"></script>
      <script src="myScript2.js"></script>
   </body>
</html>

Or we can point to the script file

<script src='../static/myScript.js'></script>

“display” data

  • Writing into an HTML element, using innerHTML

  • Writing into the HTML output using document.write()

<script>
document.write(5 + 6);
</script>

Using document.write() after an HTML document is loaded, will delete all existing HTML

<button type="button" onclick="document.write(5 + 6)">Try it</button>

  • Writing into an alert box, using window.alert()

  • Writing into the browser console, using console.log()

    Useful for debugging

The XMLHttpRequest Object

All modern browsers have a built-in XMLHttpRequest object to request data from a server. The XMLHttpRequest object can be used to request data from a web server.

The XMLHttpRequest object is a developers dream, because you can:

  • Update a web page without reloading the page
  • Request data from a server - after the page has loaded
  • Receive data from a server - after the page has loaded
  • Send data to a server - in the background
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

References