\nSince ES6, JavaScript now supports classes. They are not based on an object-oriented inheritance model. Classes are still functions. They sit on top of JavaScript’s prototype inheritance.
\nA class contains a set of properties that define an object.
\nThe following is an example of a class in JavaScript:<\/p>\n
class Potholder {\n constructor(numColors) {\n this.numColors = numColors;\n }\n\n get numColors() {\n return this.numColors;\n }\n\n set numColors(numColors) {\n this.numColors = numColors;\n }\n\n printNumColors() {\n console.log(this.numColors);\n }\n}\n<\/pre>\n\nThe get and set functions will read and write a class property. Classes contain a constructor method that takes in initialization parameters.<\/p>\n
JavaScript classes support inheritance by using the extends keyword as shown below:<\/p>\n
CheckerPotholder extends Potholder {\n constructor(numColors, pattern) {\n super(numColors);\n this.pattern = pattern;\n }\n\n printType() {\n console.log('Checker');\n }\n}\n<\/pre>\n\nThe super keyword is used to pass initialization parameters to the parent class.<\/p>\n
Classes are instantiated with the new keyword:<\/p>\n
const myPotholder = new CheckerPotholder(2, [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]);\n<\/pre>\nStatic methods can also be created. When I create static methods, I usually put them in their own class.
\nA static method does something independent of a classes instance variables.
\nThe following is an example:<\/p>\n
\nclass SessionStore {\nstatic set(key, value) {\nif (typeof(Storage) !== \"undefined\") {\n\/\/ Store\nlet seen = [];\n\nsessionStorage.setItem(key, JSON.stringify(value, function(key, val) {\nif (val !== null && typeof val === \"object\") {\nif (seen.indexOf(val) >= 0) {\nreturn;\n}\nseen.push(val);\n}\nreturn val;\n}));\n\nreturn true;\n}\n\nreturn false;\n}\n\nstatic get(key) {\nif (typeof(Storage) !== \"undefined\") {\nreturn JSON.parse(sessionStorage.getItem(key));\n}\n\nreturn null;\n}\n\nstatic getAll() {\nif (typeof(Storage) !== \"undefined\") {\nreturn Object.keys(sessionStorage);\n}\n\nreturn null;\n}\n}\n<\/code><\/pre>\n\nThis class can be used without creating a new instance. A method is called by calling ClassName.staticMethodName(),<\/p>\n
SessionStore.set('potholder', 'the name');<\/code><\/pre>\nImplementation:<\/strong><\/br><\/br><\/p>\nLets move the static temperature conversion functions in Weather.js to their own class. Inside modules, create a file called TemperatureConverter.js and add the following:<\/p>\n
\nclass TemperatureConverter {\n\nstatic convertKelvinToCelsius(kelvin) {\nif (typeof kelvin !== 'number') {\nthrow 'Kelvin value is not a number';\n}\nreturn Math.round(kelvin - 273);\n}\n\nstatic convertCelsiusToFahrenheit(celsius) {\nif (typeof celsius !== 'number') {\nthrow 'Celsius value is not a number';\n}\nreturn Math.round((celsius * (9\/5)) + 32);\n};\n\nstatic convertFahrenheitToKelvin(fahrenheit) {\nif (typeof fahrenheit !== 'number') {\nthrow 'Fahrenheit value is not a number';\n}\nreturn Math.round(((5\/9) * (fahrenheit - 32)) + 273);\n};\n}\n\nexport default TemperatureConverter;\n<\/code><\/pre>\n\nAlso remove those functions from Weather.js. Weather.js should contain the following. Note, I also added a function called setWeather, which will be populated in a later post when we get to promises and rest api calls.<\/p>\n
\nclass Weather {\n\n\/\/ Constructor\nconstructor() {\n};\n\ngetLocation() {\nlet url = 'https:\/\/ipinfo.io\/json';\nlet options = {\nmode : 'cors'\n};\n};\n\ngetWeather(coordinates) {\n} \n}\n\nexport default Weather;\n<\/code><\/pre>\n\nFor completeness, also verify javascript_tutorial.js contains the following:<\/p>\n
\n\/\/ JavaScript Tutorial\n\n\/*\n* This file will add JavaScript\n* to a website.\n*\/\nimport TemperatureConverter from \".\/modules\/TemperatureConverter.js\";\nimport Weather from \".\/modules\/Weather.js\";\n\n(function() {\nlet doc = document;\nlet defaultLocation = [-86.7816, 36.1627]; \/\/ longitude, latitude\n\nfunction setWeather(data) {\nif (data) {\nlet temp = Math.round(data.main.temp);\ntry {\nlet fahrenheit = TemperatureConverter.convertCelsiusToFahrenheit(temp - 273);\nconsole.log(\"Fahrenheit temperature: \" + fahrenheit);\n} catch (error) {\nconsole.log(\"Error setting weather: \" + error.message);\n}\n}\n}\n\nfunction init() {\nlet locationStr = \"\";\nfor (let i = 0, num = defaultLocation.length; i < num; i++) {\n locationStr += defaultLocation[i];\n if (i === 0) {\n locationStr += \", \";\n }\n }\n\n console.log(\"Setting weather for location: \" + locationStr);\n\n setWeather({ main: { temp: 30 } });\n }\n\n init();\n})();\n<\/code><\/pre>\n\nAlso verify index.html contains the following:<\/p>\n
\n<html>\n<head>\n<link rel=\"stylesheet\" href=\"css\/style.css\"\/>\n<\/head>\n\n<body>\n<header>\n<nav>\n\n<\/nav>\n\n<article id=\"toolbar\">\n<article id=\"currentWeather\" class=\"text-center\">\n<section id=\"location\">\n<\/section>\n<section id=\"weatherTemperature\">\n<span id=\"temperatureValue\"><\/span>\n<span id=\"degreeSymbol\">°<\/span>\n<span id=\"temperatureUnits\"><\/span>\n<\/section>\n<section id=\"weatherDescription\">\n<\/section>\n<img id=\"weatherIcon\"> \n<\/img>\n<\/article> \n<\/article>\n\n<\/header>\n\n<main><\/main>\n\n<footer><\/footer>\n\n<script src=\"js\/javascript_tutorial.js\" type=\"module\"><\/script>\n<\/body>\n<\/html>\n<\/code>\n<\/pre>\n\nYou should see the following in the browser console when loading the index.html file:<\/p>\n
Setting weather for location: -86.7816, 36.1627
\njavascript_tutorial.js:19 Fahrenheit temperature: -405<\/p>\n
Note, the files will need to be loaded onto a web server. If running them locally in Chrome, you may get a CORS error.<\/p>\n
\nThe JavaScript tutorial series starts with this post<\/a>.<\/p>\n\n(paid links)<\/br>
\nMore JavaScript<\/a><\/br><\/br><\/p>\n