JavaScript

When learning Javascript I think that you need to ask yourself what you want to achieve. Do you just want to be able to perform a few things on your website and understand how it works or do you really want to be an expert Javascript programmer? If it is the former than there is no shame in copying examples from W3C Schools or other sources on the Internet. If it is the later then yoo will have to learn control strutures, data types, error handling and possibly Object Oriented and Functional approaches to name just a few topics.

For the developer of a simple website you need to know a bit about DOM manipulation, i.e. changing html and css programatically. If you really get into things then you may want to look at JSON and AJAX.

DOM Manipulation

This is the changing of the Document Object Model of documents used on the web. This all sounds pretty "high-level" but I have found that you only need to know a little.

I have a few Javascript functions that "service" the responsive bottom menu and the expandable text facility that I have incorporated into my designs. This is a good place for me to start.

Looking at my script.js file I seem to have the Google tracking code in two places (in the page itself and the js file). At the moment I am not sure if the tracking code works in an external css file. (IT DOESN'T!) To this end I will delete the tracking code from all new pages and see if tracking still reports in GA.

The Javascript that controls the tracking of website visitors by interogating the Document Object and then sends that information to Google. The Javascript function added to each page in turn generates another script that incorporates your account ID and the captured data from the page and the visitor. Further analysis of this Javascript is pointless as the underlying code is propretry to Google. However it is interesting to see the parameter passing that only means something to the Google engineers.

FBM - Fixed Bottom Menu - fbm.css

The Responsive bottom menu is determined by fbm.css and the function myFunction(). The function triggers the responsive behaviour when the "hamburger" (#9776) icon is clicked.

The menu item "☰ or #9776 in hex" is:

 <a href="javascript:void(0);"  style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>

// the function controlling the Responsive Bottom Menu
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

and the css

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

The ----- a:not(:first-child) - is interesting here. This is another example of a CSS pseudo Class in this case the "not" operator is being used


@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom:0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

Expandable Sections

This is described on my page Accordian and the behaviour is determined in accordian.css - this is a good example of where it can be used. Since starting this page I have improved my documentation and revisited the accordian code

.accordion {
background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } button.active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; }

The following JavaScript function expand() was created when I didn't really understand the code. It resulted in a double click on the button panel. I have left the code as it was to illustrate how NOT to copy code!

function expand() {
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) { 
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
}

We have a control loop here. A for (.. the length of the accordian ..), build an array for the number of buttons adding event listeners that toggle the hidden panels when clicked. This example only has two button-panels

Links

External Sources

Javascript - November 2019