A Recap Tutorial From Mozilla

I have begun the Object-Oriented JavaScript course on Udemy.  One of the pre requisites of this course is to do the Mozilla Developer Networks tutorial in JavaScript.  So I decided to do it and give my review here as well as explain what I have learned.

It starts of very gently in explaining the history of JavaScript, what it can do and how cool it is.

JavaScript itself is fairly compact but very flexible,  some developers have written a lot of tools on top of the core JavaScript language, to unlock a huge amount of extra functionality with very little effort. These include:

  • Application Programming Interfaces (APIs) built into web browsers, providing various functionality like dynamically creating HTML and setting CSS styles, grabbing and manipulating a video stream from the user’s webcam, or generating 3D graphics and audio samples.
  • Third-party APIs to allow developers to incorporate functionality in their sites from other properties, such as Twitter or Facebook.
  • Third-party frameworks and libraries you can apply to your HTML to allow you to rapidly build up sites and applications.

Going on to a Hello World example with JavaScript and HTML and a reminder to put the JS file toward the end of the file so that the page loads first.

Then the basics of Variables, Comments and Operators are covered along with Functions.

The Events section is not a bad starting point.  To create real interactivity on a website, you need events — these are code structures that listen out for things happening to the browser, and then allow you to run code in response to those things. The most obvious example is the click event, which is fired by the browser when the mouse clicks on something.

I have included the code below and the link to an example site Essentially it is a simple script in which the user can input a string and the string is displayed on the page.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8“>
<title>My test page</title>
<link href=’http://fonts.googleapis.com/css?family=Open+Sansrel=’stylesheettype=’text/css‘>
<link href=”styles/style.cssrel=”stylesheettype=”text/css“>
</head>
<body>
<h1>Mozilla is cool</h1>
<img src=”images/firefox-icon.pngalt=”The Firefox logo: a flaming fox surrounding the Earth.“>
<p>At Mozilla, we’re a global community of</p>
<ul> <!– changed to list in the tutorial –>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <a href=”https://www.mozilla.org/en-US/about/manifesto/“>Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
<button>Change user</button>
<script src=”scripts/main.js“></script>
</body>
</html>

 

And the js file

// Image switcher code

var myImage = document.querySelector('img');

myImage.onclick = function() {
	var mySrc = myImage.getAttribute('src');
	if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
	} else {
	  myImage.setAttribute ('src','images/firefox-icon.png');
	}
}

// Personalized welcome message code

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');

function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozilla is cool, ' 
        + storedName;
}

myButton.onclick = function() {
  setUserName();
}

Leave a Reply

Your email address will not be published. Required fields are marked *