DEV Community: Odegi Christine

Ultimate Guide to JavaScript

Odegi Christine — Thu, 01 Dec 2022 15:58:42 +0000

Arrays

An array is a collection of elements. Arrays are a way to store groups of related data inside a single variable.
Arrays are objects and can store any type of data. Arrays are zero indexed, that is, the first element in an array has an index of 0.

Creating arrays

Using new keyword
var studentName = new Array("Mary", "Daniel")

Array literal notation
var studentName = Array.of("Mary", "Daniel")

Array literal
Use of square brackets
var studentName = ["Mary", "Daniel"]

Working with arrays

Adding a new item
Use push method: studentName.push("Stacy")

Removing an item from the list
To remove from the end: studentName.pop()
To remove from the beginning: studentName.shift()
To remove multiple items from the end of an array:

const fruits = ["apple", "orange", "guava"];
const start = -3;
const removedItems = fruits.splice(start)

Joining two or more arrays
Use concat() method

const a = [1,2]
const b = [3,4]
const c = a.concat(b)

Finding items in an array
Use find() method

a.find(element, index, array)

Populating arrays
You can create an empty array and add elements to it later. In order to add elements to an array, specify the index number of the element you want to create or modify

var studentName = [];
studentName[0] = "Lynn";
studentName[1] = "Bryan";
studentName[87] = "Omolo"; //addition does not have to be sequential

Multidimensional arrays
Multiple arrays can be stored in a single array.
An array containing an array is called a multidimensional array. To write a multidimensional array, you add more sets of square brackets to a variable name. e.g:
var ListOfLists [0][0];

Accessing array elements
Use the index number in square brackets.
myArray[2]; //returns third element in the array

To access elements in a multidimensional array, add more square brackets with the index of the element.
var ListOfLists [0][0];

String object

Also known as a string literal and is enclosed in quotes/double quotes.
A string is a sequence of characters.

Creating strings

As primitives, i.e from string literals
const name= "Christine";
As objects
const name= newString("Christine");

Character access

charAt() method
'cat'.charAt(1) //gives value 'a'
Treating the string as ana array-like object, where individual characters correspond to a numerical index.
'cat'[1] //gives value 'a'

Determining the length of a string using length property

'Fabian'.length //6
const name= 'Fabian'
name.length //6

JavaScript loops

While loop
We add a condition after the while keyword and a block of code that is run until condition evaluates to false.

while (n<3){
    //statements
}

do...while loop
Similar to while except that the condition is evaluated after code block is executed.
The block is always executed at least once.

do{
  //statements
}while (condition)

For loop
Uses the for keyword then passes three instructions: initialization, condition, increment part.

for (i=0; i>10; i++){
    //statements
}

For of loop
Developed in 2015. It is a simplified version of for loop.

const list= ['a', 'b', 'c']
for (const value of list){
console.log(value) //value
}

Objects

An object is any value not of primitive type(string, number, boolean, symbol, null, undefined).

Creating objects

Using object initializers or object literals.
const car= {}
Using constructor function

Define the object type using a constructor function. Use a capital letter.
Create an instance of the object using new.

function Student(name, regNumber, course){
        this.name = name,
        this.regNumber = regNumber,
        this.course = course
}
const student1 = new Student ("Christine", "SCT211", "B.Sc Computer Science")

The order of arguments and parameters should be the same. student1.name is assigned "Christine".
You can add a property to a previously defined object.
student1.age = 22;

An object can have a property that is another object.
const object = new Object("value1", "value2", object2)

To access a property in object 2:
object.object2.property

Using the Object.create method to create an object from a prototype.

//create an Animal object
var Animal={
   legs: 2,
   type: "mammal",
}
//create a cat object, based on animal.
var cat = Object.create(Animal)
cat.legs=4;
cat.type= "mammal';

Objects and properties
Objects have properties associated with them.

Accessing properties
Dot notation
student1.name = "Christine";
Bracket notation
student1["name"]="Christine";

You cannot use dot notation to access a property whose name is not a valid JavaScript identifier.
For example, a property name that has a space/hyphen, starts with a number or is held inside a variable can only be accessed using bracket notation.
Examples

const myObj = {};
const str = "myString";
const rand = Math.random();
const anotherObj = {};
//create additional properties on myObj
myObj.type = "value1";
myObj["date created"] = "value2"; //key has space
myObj[str] = "value3"; //the key is in a variable str
myObj[rand] = "value4"; //a random number is the key
myObj[anotherObj] = "value5"; //the key is object anotherObj
myobj[" "] = "value6"; //key is an empty string

Deleting properties
Properties can be deleted from objects using delete operator.

var myObject={
   var1:"value1",
   var2:"value2",
   var3:"value3"
};
//delete var2 from Object
delete myObject.var2

Inheritance
An object can extend another object.

var Person = new Object();
var Val= new Person();

Defining methods
A method is a function associated with an object.

var Car={
   make:"",
   year:"",
   myCar: function(make, year){
        car.make = make;
        car.year = year;
   }
}
//To call the function;
car.myCar("Ford", 1969);

Using this for object references
JavaScript has a special keyword, this, that you can use within a method to refer to the current object.

var Car = {
   make:"",
   year:"",
   myCar: function(make, year){
       this.make = make;
       this.year = year;
   }
}

Classes

Are a way to define a common pattern for multiple objects.
Name of the class starts with a capital letter.

class Person{
     name
}
const john = new Person();
//john is an instance of the Person class

john.name = "John"  //set value of a property

Constructor() is a special method used to initialise class properties when a new object instance is created. I can only be used once in a class.
A constructor can use the 'super' keyword to call the constructor of the super class.

class Person{
    constructor(name){
        this.name= name;
    }
    hello(){
       return 'Hello, I am '+this.name+'.';
    }
}

Method are defined on the object instance, not on the class.
To execute a method on the class, you define it as static.

class Person{
    static genericHello(){
        return 'Hello';
    }
}

Static properties and methods are called without instantiating their class and cannot be called through a class instance.

Inheritance
A class can extend another class and objects initialised using that class.
It can also inherit all the methods of both classes.
Suppose we have class Person, we can define a new class Programmer that extends Person.
If we instantiate a new object with class Programmer, it has access to the hello() method
You can reference the parent class in the child class by calling super()

class Programmer extends Person{
     hello(){
        return super.hello() + '. I am also a programmer.';
     }
}
const flavio = new Programmer();
flavio.hello()

Ultimate Guide to JavaScript

Odegi Christine — Tue, 08 Nov 2022 21:01:00 +0000

What is JavaScript?
JavaScript is a programming language that started out as a quick and dirty language created for one of the first web browsers.
It is now the world's most popular programming language. The demand for JavaScript programmers is also on the rise. JavaScript is fairly east to pick up and start using. Learning JavaScript isn't just about the syntax of the language. It's also about accessing the tools and community that has been built around the language.

History of JavaScript

JavaScript was developed in 1995 for Netscape 2 by Brandon Eich. He wrote it in 10 days by borrowing many of the best features from other programming languages. This rush resulted to a number of mistakes in the language. JavaScript's original name was Mocha which was changed to Livescript by Netscape Navigator in its first beta deployment. In 1995 the name was changed to JavaScript when it was built into Netscape 2 browser. ECMA-262 specification defined standard version of the core JavaScript language.

JavaScript is a lightweight, interpreted language.
It is designed for creating network centric apps.
It is complimentary to and integrated with Java.
Its is complimentary to and integrated with HTML.
Open and cross platform.

Over the years, JavaScript grew and became a very popular way to make web pages more dynamic. Dynamic HTML was an early result of JavaScript being built into web browsers. It enables cool effects such as the falling snowflake effect, pop-up windows, curling web page corners, drop-down menus and form validation.

General uses of JavaScript

Used to create websites
Used to create web applications
Used to create serverside apps using Node.js,
Used to create mobile apps
Used to create programs for microcontrollers and Internet of Things
Used to create smartwatch applications

Uses of JavaScript on the web

Nifty effects
Input validation
Rollover effects
Drop-down/Flyout menus
Drag and drop features
Infinitely scrolling web pages
Autocomplete
Progress bars
Tabs within web pages
Sortable lists
Magic zoom

JavaScript is the standard for creating dynamic user interfaces for the web. Because of its power and ability to run in any web browser, JavaScript coding is the most popular and necessary skill for a modern web developer to have.

Client-sided JavaScript

Is the most common form of the language. It adds interactivity to the web pages by:

controlling the browser itself or making use of the functionality of the browser.
manipulating the structure and content of the web pages
manipulating the styles (fonts and layout) of web pages
accessing data from other sources

Syntax

JavaScript is case sensitive. For example, Jscript and jScript are two different things
JavaScript doesn't care much about whitespace, which includes spaces, tabs, line breaks but can be used to increase readability of the code.
Semicolons- these are used at the end of statements.
Reserved words- these are words with special meaning to the JavaScript interpreter and cannot be used as variables, functions, methods, loop labels or any object names.

Comments

Comments enable you to explain what a certain line of code does. Comments are of two types, i.e, single line comments and multiline comments.

//This is an example of a single line comment
/*this is the structure of a multiline comment
 *any piece of code within this will not be executed
*/

Running JavaScript in a web browser

There are various ways in which this can be achieved:

Using JavaScript in a HTML event attribute

<button id="bigButton" onclick="alert('Hello World!');">Click Here</button>

Using JavaScript in a script element

<script>
       insert your JavaScript code here
</script>

Including external JavaScript files
This is the most popular method with the following benefits:
Keeps HTML files neater and less cluttered
Makes life easier because you only need to modify JavaScript in only one place when something changes or when fixing a bug.

<script src="lesson1.js"></script>

Variables

A variable is a container that holds data.
There are two types of variables: global variable and local variable.
Declaring a variable is the process of first creating a variable in a program.
A variable can either be created without a keyword or with a keyword.
How to create variables

//An example of how to create variables
var myName; //with a var keyword
myName="Ken"; //without a var keyword
const num1=6; //const keyword is used to declare a constant,i.e, values that cannot be changed

Data types in JavaScript

JavaScript recognizes five basic types of data
Number data type
Numbers in JavaScript are stored as 64-bit, floating point values.
Number functions- converts values to numbers.

Number("42"); //returns the number 42
Number(true); //returns 1

parseInt() function- in JavaScript all numbers are floating point. When parseInt is used, only the non-fractional part is considered.
parseInt(300.045); //returns 300
parsefloat() function- tells JavaScript to treat a number as a float.

String data type
A string can be made up of any characters i.e letters, numbers and punctuations.
JavaScript strings are immutable, that is, they cannot be modified.
The length of a string is the number of UTF-16 code units in it.
String functions

charAt()- produces the character at a specified position.
concat()- combines one or more strings and returns an incorporated string
indexOf()- searches and returns the position of the first occurrence of the searched character or substring within the string.
split()- splits strings into an array of substrings.
substr()- extracts a portion of a string beginning at "start" through a specified length.
substring()- extracts the characters within a string between two specified positions.
toLowerCase()- produces the string with all of its characters converted to lowercase.
toUpperCase()- produces the string with all characters converted to uppercase.

Boolean data type
Store either true or false.
They are used for conditional operations.

NaN data type
Stands for not a number. This is the result you get when you try to perform a calculation with a string, or when a calculation cannot be done like getting the square root of a negative number.

Undefined data type
This is the default data type when you don't give a variable a value.