Tempusfugit UK

Javascript

When learning Javascript I think that you need to ask yourself what you want to achieve. Do you want to he able to perform a few things on your website 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.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>

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/Element in this case the "not" operator is beig 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

.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; }


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 ??????? using the addEventListener Method

Links

External Sources

Javascript