What Is JavaScript?
Below, a JavaScript arrow function named "doubleNum" is declared with "const", receives an argument for the placeholder parameter named "num", and if the argument has a type of number it will return the num (number) added to itself.
const doubleNum = num => num + num;
doubleNum(1) // returns 2
// doubleNum(1) is 1 + 1.
doubleNum(2) // returns 4
// doubleNum(2) is 2 + 2.
doubleNum(3) // returns 6
// doubleNum(3) is 3 + 3.
JavaScript was made for the user-facing part of a website. It was meant to work with HTML and CSS as their lightweight beginner-friendly programming language. It was meant to be like Java but easier and simpler. Unlike Java though, JS (meaning JavaScript) was meant to be read by the browser engine exclusively. JS can be written in a script element in an HTML file, or in a file of its own that is linked to in the HTML file.
<script>
/*
JS can be written in an HTML script element which consists of an opening and closing script tag.
*/
</script>
JavaScript is one of the main programming languages used for front end web development. JS is also one of the main programming languages used for back end web development.
- JS can be used on the front end to dynamically change a client-facing web page in response to user input.
- Node.js is a JavaScript framework and runtime environment that allows JS to run outside the web browser.
How To Learn JS
There are many ways to learn JS but here are some of my recommendations.
- Mozilla Developer Network, the official technical documentation reference for JavaScript, stylishly displays exhaustive (or near-exhaustive) web development information and many interactive examples.
- Search on a good search engine (google, for example) to find the JavaScript information you need.
- freeCodeCamp.org will guide you through a curriculum for free.
- W3 Schools has helpful documentation with interactive exercises for JS and many languages.
- Scrimba, a website with interactive coding tutorials, makes hands-on learning very convenient.
- Exercism offers completely free mentoring and challenges.
- Learning JavaScript online is likely to be successful if what is learned from trustworthy sources is put into practice.
Variables
var variable = 'A variable declared with the old "var"';
let variable2 = 'A variable declared with the mutable "let"';
const VARIABLE_3 = 'A variable declared with const(short for constant)';
In 2015 two important new JavaScript keywords were introduced: let and const. Variables: declared with the "const" and "let" keywords may have global scope, function scope, or block scope; declared with the "const" keyword cannot be modified unless they are arrays; declared with the "let" keyword can be modified; declared with the "var" keyword can be modified, can have global scope, can have function scope, but cannot have block scope. (A variable with block scope cannot be accessed outside of a loop, an if statement, nor the block scope that it is declared in.)
- Variables are initialized with a custom name and usually assigned data (data examples: functions, arrays, objects, calculations, values, or others.)
- Variables allow coders to reuse one or more lines of code without having to repeat themselves.
- If it weren't for variables, JS would take much longer to write and would slow down webpages considerably (as there would be much more code to read by the browser engine).
- Descriptive variable naming and efficient use of variables is one of the most key parts of making a JS codebase maintainable.
Conditionals
The following explains the checkTirePressure function code below. PSI means pounds per square inch and is used to measure air pressure. The following function code has two parameters (a tires current PSI and its recommended minimum PSI). The checkTirePressure function has room to improve, but it demonstrates use of conditionals (an "if else statement chain" and a "ternary operator"). The function body in the code below has an "if else statement chain" with a ternary operator in a template literal in the "else" body. A template literal is a dollar symbol followed by an expression nested in a pair of curly braces. A template literal is used to allow an expression in a back tick string. The back tick is usually located on the top left of a keyboard under the "esc" key. A back tick string is meant for template literal use. Conditionals and strings are two different topics of JS, but strings (and/or any other data type) are often used with conditionals.
function checkTirePressure(tirePSI, tireRecommendedMinimumPSI){
if (tirePSI < tireRecommendedMinimumPSI) {
return 'Tire pressure is less than recommended PSI.';
} else {
return `Tire pressure is ${tirePSI === tireRecommendedMinimumPSI?
'equal to': 'above'} the recommended minimum PSI.`;
}
}
The function call just below has 61 as tirePSI and 60 as tireRecommendedMinimumPSI, so it will return the following string, 'Tire pressure is above the recommended minimum PSI.'
checkTirePressure(61, 60);
This second function call just below has 59 as tirePSI and 60 as tireRecommendedMinimumPSI, so it will return the following string, 'Tire pressure is less than recommended PSI.'.
checkTirePressure(59, 60);
An example of a switch conditional statement is in a function named describeStr below. The function describeStr is meant to receive a string(a string is text in double-quotes, single-quotes, or back-ticks) as an argument and return a description of the string. The describeStr function body has a switch statement that takes an expression str, a string (switch statements can of course take expressions other than strings). The switch statement has a series of clauses that can execute their own statement if a case is matched. The default clause executes when none of the case clauses match the expression. The function describeStr returns a description of str when a case clause matches str, otherwise an apology for not having a description for str is returned.
function describeStr(str){
switch(str){
case 'html':
return 'HTML is Hyper Text Markup Language.';
break;
case 'css':
return 'CSS is Cascading Style Sheets.';
break;
case 'integer':
return 'An integer is a whole number(such as -1, 0, or 1).';
break;
default:
return 'Sorry, we don\'t have a description for that string';
}
}
Below, the function called returns a description of the string 'html'.
describeStr('html');
Below, the function called returns a description of the string "integer".
describeStr('integer');
Below, the function called returns an apology for not having a description for the string.
describeStr('bug');
A conditional is how JavaScript or any other programming language can use boolean logic to return a result.
Boolean logic refers to what determines a value to be true or false.
- Conditionals execute code when an expression is true
- All tech industry programming languages have conditionals
DOM Manipulation
In the code just below, a named constant of HEADER is assigned an 'h1' (level 1 HTML header) that is passed to a querySelector document method as an argument. Then a string "Hello World" is assigned to the HEADER named constant via a property called textContent. There must be an h1 HTML element in the HTML body for the code just below to work.
const HEADER = document.querySelector('h1');
HEADER.textContent = 'Hello World';
The DOM (Document Object Model), allows a JS file to interact with any HTML file that links to the JS file path.
The following code is related to the code above. The following code assigns 'red' to the backgroundColor(a dash is a reserved symbol in JS, in CSS its 'background-color', in JS its camel cased) property of HEADERs style object.
To adjust the style of an element, code like this:
HEADER.style.backgroundColor = 'red';
- All style properties in JS are the same as CSS but they are camel cased instead of using dashes.
- All style property values in JS are declared inside quotes.