29. JavaScript basics

29.01 Introduction

We can add any required Javascript in script tags in the header.html file.

Some examples:

We need to declare variables we are going to use, but we don’t need to declare the type.

  var x, y, z;
  x = 5;
  y = 6.6;
  z = "hello";
  x = x + y * 2;
  z = z + " world";

+ can add numbers, or act as a string concatenator.

We can also send messages or results to the screen by an alert, or a console log.

  alert(x);
  console.log(z);

Other variable constructs:

  var test_array = [1,2,3];
  var test_hash = {"one": 2, "two": 'this'};

We also have control flow statements:

  while(true){
   console.log("while loop");
   break;
  };

  for (i = 0; i < test_array.length; i++) {
    console.log("array out: "+test_array[i]);
  }

  if(test_array.length === 3)
  {
    console.log("array is the right length");
  }

This also replicates a for loop, iterating over a whole array without declaring a variable i:

  test_array.forEach(function(element){
     console.log("For Each Output: "+element)
  });

29.02 String methods and properties

Strings have various methods and properties too:

"caterpillar".length;   // OUTPUT 11
"THE KIDS".toLowerCase();   // OUTPUT "the kids"
"I wish I were big.".toUpperCase();   // OUTPUT "I WISH I WERE BIG."
"   but keep the middle spaces   ".trim();   // OUTPUT "but keep the middle spaces"

29.03 Functions

For example:

function exampleFunction() {
  ... // code from above
  alert("Function called");
};

exampleFunction();

We can run JS in our html by adding a button:

Test

The event handler onclick has a very short JS command, alert.

We could run a function in the onclick, such as changepage()

Change Page

Then in the script tags in our header we could add this function:

function changePage() {
  alert('you clicked the button');
};

or

function changePage() {
  console.log('Changing Page');
  var h1_elements = document.querySelectorAll("h1");
  for(h in h1_elements) {
    h1_elements[h].innerHTML = 'Organism Name: D. Bucheria';
  };

which will change all items in h1 to the new name when the button is clicked.

29.03 The DOM and interacting with it

Probably the most important feature of JavaScript and its in-browser implementation is the DOM (the document object model).

When a web browser receives a page of HTML, it parses that HTML hierarchy and builds a complex hierarchical object, which represents the entire HTML page.

All of the elements that are nested relationships to one another, and all of the properties and attributes those elements have. This object is the DOM.

And it's made available to your JavaScript code, such that the code can interact with it in a web page.

We can get variables by accessing the ID given to it on the HTML page.

var list_panel = document.getElementById("gene_list");

We can then send this to the console by executing this:

console.log(list_panel.innerHTML);

Which shows us the HTML in that ID. We can assign new HTML to that ID too:

list_panel.innerHTML = "
Oooops, they're gone
";

We can do more useful stuff, like getting all our navigation links by getting the elements by class name, eg:

var nav_links = document.getElementsByClassName("nav_link");
for (var i = 0; i < nav_links.length; i++) {
  nav_links[i].style.color = "black";
}

When executed this, all the links in the navigation bar have turned black.

So you can see that our document objects is important - that's how we access the page, make it interactive and change the details or content.

Later on we'll see how you can get content from remote servers and update the page appropriately.

Wednesday 10 November 2021, 424 views

Next post: 30. Django forms (1)
Previous post: 28. Adding CSS to the template