JavaScript (JS) is a dynamic, interpreted programming language used to make websites interactive. It is an essential part of web development technologies alongside HTML and CSS.
In JavaScript, we deal with various kinds of data like numbers and text. We store this data in variables.
var myNumber = 5; //Here, we declare a variable called myNumber and assign it the numeric value 5
var myString = "Hello, World!"; //Here's another variable storing text (or a "string").JS has various 'types' of data. The most basic types are Number, String, and Boolean.
var myNumber = 5; //Number
var myString = "Hello, World!"; //String
var myBool = true; //Boolean, which can only be True or FalseWe use operators to perform operations on variables and data.
var x = 10;
var y = 5;
console.log(x + y); //Outputs: 15
console.log(x * y); //Outputs: 50Control Structures guide the flow of your program. We use 'if', 'else if' and 'else' to control which set of script lines JavaScript will execute.
var x = 10;
var y = 5;
if (x > y) {
console.log('x is greater than y');
} else if (x < y) {
console.log('x is less than y');
} else {
console.log('x is equal to y');
}Another control structure is switch:
var fruit = 'Apple';
switch(fruit) {
case 'Banana':
console.log('I like Banana!');
break;
case 'Apple':
console.log('I like Apple!');
break;
default:
console.log('I like all other fruits!');
break;
}Arrays in JavaScript are like lists, which can hold multiple items.
var myArray = ["Apple", "Banana", "Cherry"]; //This array is holding 3 strings
console.log(myArray[0]); //Access the first item of array: Outputs "Apple"You can perform operations on arrays too, like adding a new item or removing one:
myArray.push("Dragon Fruit"); //Adds "Dragon Fruit" to the end of myArray
myArray.pop(); //Removes the last item of myArrayYou also have lots of other useful array methods like splice, slice, join, map, filter, reduce and many more
Sure! Let's continue with the timetable for the next few days.
Loops allow you to run the same block of code multiple times. Here are the main types of loops:
for (var i=0; i<5; i++) {
console.log(i); //This will log numbers 0 through 4
}var i = 0;
while(i < 5) {
console.log(i); //This will also log numbers 0 through 4
i++;
}var i = 0;
do {
console.log(i); // This will also log numbers 0 through 4
i++;
} while (i<5);The difference between while and do-while is that in while the test expression is checked before running the loop body, so it might never run if condition isn't met on the first check. With do-while it will be executed at least once as it checks the condition after running the loop body.
Note that the i++ operation is equivalent to i = i + 1 - it increments the variable i by 1.
Functions are reusable pieces of code that you can call and even pass arguments to.
Here's how to declare and call a function:
//declare a function
function greet(name) {
console.log("Hello, " + name + "!");
}
// calling the function
greet("Alice");Scope represents the visibility or accessibility of a variable or function in your code during runtime.
var a = 1; // global scope
function one() {
var b = 2; // "one" function scope
}
if (true) {
var c = 3; // global scope
}In JavaScript, scope is determined by function boundaries. So, var b is only visible inside the one function. Variable a and c live in the global scope so they can be accessed from anywhere in your code.
By now you should be able to write a simple script in JavaScript. So, let's try some simple coding problems.
- Write a function that accepts an array of strings and prints all of them using a for loop.
- A function named
greaterThanTenthat takes an array of numbers and returns a new array that's filtered for numbers greater than ten.
function greaterThanTen(arr) {
var newArray = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
newArray.push(arr[i]);
}
}
return newArray;
}
let nums = [4, 10, 32, 9, 21];
let newNums = greaterThanTen(nums);
console.log(newNums);Next, we'll cover advanced topics like objects, DOM manipulation, event handling, and more.
In JavaScript, objects can contain various properties and methods. Here's how to declare an object:
var car = {
color: "red",
make: "Toyota",
display: function () {
console.log("This car is a " + this.color + " " + this.make);
}
}
car.display(); //Outputs: "This car is a red Toyota"JSON (JavaScript Object Notation) is a popular format for transferring data. It's merely a text format that's written in JavaScript Object syntax:
var carJSON = '{ "color":"red", "make":"Toyota"}';
var car = JSON.parse(carJSON); //Converts JSON text into a JavaScript object
console.log(car.color); //Outputs: "red"JavaScript can manipulate HTML by using the Document Object Model (DOM). For instance, you can change the content of HTML elements:
document.getElementById("demo").innerHTML = "Hello World!"; //Changes the content of the HTML element with id="demo"You can also change the style (CSS) of HTML:
document.getElementById("demo").style.fontSize = "25px"; //Changes the font size of the HTML element with id="demo"Events are "things" that can happen to HTML elements and JavaScript can react to these events. For example, you can write a function that's executed when a button is clicked:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Button clicked!");
}
</script>You can handle errors in JavaScript using try, catch, finally:
try {
nonExistentFunction(); //This function does not exist
} catch(err) {
console.log('The error is: ' + err); //Prints the error message
} finally {
console.log('This always runs regardless of errors'); //Always executed
}A regular expression (regex) is a sequence of characters that forms a search pattern. It's used to match, locate, and manage text. For example:
var str = "Hello World!";
var pattern = /world/i; // i means case insensitive
console.log(pattern.test(str)); // Outputs: trueWe will continue with more topics in the next few days like Promises, async/await, closures, and high order functions.
Certainly, let's continue with the remaining topics.
Promises are objects representing the eventual completion or failure of an asynchronous operation.
let promise = new Promise(function(resolve, reject) {
const x = "foo";
const y = "foo";
if(x === y) {
resolve("Success!"); //when the promise is resolved successfully
} else {
reject('Failed!'); //when an error occurred
}
});
promise.
then(function(successMessage) {
console.log(successMessage);
}, function(errorMessage) {
console.log(errorMessage);
});Async/Await makes it easier to work with Promises in a more synchronous form:
async function myFunction() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json(); //parse it to json
console.log(data);
} catch (error) {
console.log('Fetch error: ' + error);
}
}
myFunction();At this point, you should try to solve coding exercises that involve Promises, async/await and error handling. You can also review all the previous topics covered.
Closures are functions that have access to the parent scope, even after the parent function has returned.
function outerFunction(x) {
return function innerFunction(y) {
return x + y;
};
}
const closure = outerFunction(10);
console.log(closure(5)); //Outputs 15Higher order functions are functions that operate on/with other functions. They can accept other functions as arguments and/or return them as results.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2); // returns a new array [2, 4, 6, 8, 10]In JavaScript, each object has a prototype from which it inherits properties and methods:
function Car(make, color) {
this.make = make;
this.color = color;
}
Car.prototype.display = function() {
return this.make + ' ' + this.color;
};
const myCar = new Car('Toyota', 'red');
console.log(myCar.display()); // Outputs "Toyota red"Introduction to the new syntax and features of ES6, like let/const, arrow functions, template literals, etc.
ES6 introduced a module system, which allows you to break your code up into reusable pieces:
// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
// main.js
import { sqrt, square } from 'lib';
console.log(square(11)); // 121
console.log(sqrt(121)); // 11Fetch API is a modern interface for making HTTP requests. It replaces the older XMLHttpRequest.
fetch('https://api.github.com')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));Review the topics of week 3 and solve some coding problems related to closures, high order functions, prototypes, ES6 syntax and modules, AJAX, etc.
I hope this helps. Let's continue further below.
Node.js is a runtime environment that allows you to run JavaScript on your server, without a browser. Here's a simple Node.js script:
var http = require('http');
var server = http.createServer(function(req, res) {
res.write('Hello World!');
res.end();
});
server.listen(8000);To run it, save it to a file named app.js, open your terminal, navigate to the file's directory, and type node app.js.
NPM is the default package manager for Node.js. It allows you to install and manage packages (modules). For instance, to install Express.js:
npm install expressYou can then require and use this package in your project:
var express = require('express');
var app = express();Express.js is a fast, unopinionated, and minimalist web framework for Node.js:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send('Hello World!');
});
app.listen(8000);React.js is a JavaScript library for building user interfaces, typically for single-page applications. It's used for handling the view layer:
import React from 'react';
import ReactDOM from 'react-dom';
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));Vue.js is a progressive JavaScript framework used to build user interfaces. Here's a simple Vue.js app:
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>Building a simple project using JavaScript/Node.js/Express/React or Vue.js. This will solidify your understanding of all the topics covered in the last 26 days.
Start by brainstorming a project idea, then break it down into smaller parts. Write the functions you'll need, then test them. Combine those functions to form larger operations, and test them again.
Review Day - Reflect on Learning Journey, read more about topics not clear, practising more coding problems.
This plan covers many aspects of JavaScript, but remember, practice is key to getting better at it. Happy learning!