Content

  • Data Types, Variables in JavaScript
  • JavaScript Operators
  • JavaScript Functions
  • JavaScript Strings and Methods
  • Array and Properties and Methods
  • JavaScript Objects
  • JavaScript Events

Data Types, Variables in JavaScript

JavaScript has dynamic types. This means that the same variable can be used to hold different data types
  • let - We can change its values, but it cannot be redeclared in the same scope.
  • const - It is a variable type assigned to data whose value cannot and will not be changed throughout the program
  • A variable name cannot start with a number.

JavaScript Operators

JavaScript Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement

JavaScript Assignment Operators

Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

JavaScript String Operators

  • The + operator can also be used to add (concatenate) strings
  • The += assignment operator can also be used to add (concatenate) strings
  • When used on strings, the + operator is called the concatenation operator.

JavaScript Comparison Operators

Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? conditional (ternary) operator

JavaScript Logical Operators

Operator Description
&& logical and
|| logical or
! logical not

JavaScript Functions

  • A JavaScript function is a block of code designed to perform a particular task.
  • By using function,you can reuse code: Define the code once, and use it many times.
  • A JavaScript function is executed when "something" invokes it (calls it).
  • A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
  • The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
  • The code to be executed, by the function, is placed inside curly brackets: {}
  • The () Operator Invokes the Function
Example : Javascript function
function multiply(a, b) 
{
return a * b;
}
console.log(multiply(5,5));

JavaScript Strings and Methods

  • JavaScript strings are used to store and manipulate text
  • A JavaScript string is zero or more characters written inside quotes.
Example : Javascript String declartion
let company = "Revolution";
let service = 'Web Development';

String Methods and Properties

  • String methods help you to work with strings.
  • The length property returns the length of a string
  • Note : JavaScript counts positions from zero.
  • There are 3 methods for extracting a part of a string : slice(start, end),substring(start, end),substr(start, length)
  • slice() extracts a part of a string and returns the extracted part in a new string,If a parameter is negative, the position is counted from the end of the string.
  • substring() is similar to slice(),The difference is that substring() cannot accept negative indexes.
  • substr() is similar to slice(),The difference is that the second parameter specifies the length of the extracted part.
  • The replace() method replaces a specified value with another value in a string
  • A string is converted to upper case with toUpperCase()
  • A string is converted to lower case with toLowerCase()
  • The trim() method removes whitespace from both sides of a string
Example : JavaScript String Properties and Methods
//length property
let txt = "Revolution IT Solutions";
let length = txt.length;

//string slice()
let str = "Kolhapur, Mumbai, Pune";
let part = str.slice(10, 15);

//string substring()
let str = "Kolhapur, Mumbai, Pune";
let part = str.substring(10, 15);

//String substr()
let str = "Kolhapur, Mumbai, Pune";
let part = str.substr(10, 5);

//Replacing String Content
let text = "Please visit company!";
let newText = text.replace("company", "Revolution IT Solutions");

//Lowecase and Uppercase
let text1 = "revolution";
let text2 = text1.toUpperCase();

let text1 = "REVOLUTION";
let text2 = text1.toLowerCase();

//JavaScript String trim()
let text1 = "      Revolution      ";
let text2 = text1.trim();

JavaScript Arrays and Methods

An array can hold many values under a single variable, and you can access the values by referring to an index number

Example : JavaScript Array declartion and accessing array elements 
//There are two ways to declare Array
let cities = new Array();
let cities = [];
cities =['Kolhapur', 'Pune', 'Mumbai']
//How to access array elements
console.log(cities[0])
console.log(cities[1])

The real strength of JavaScript arrays are the built-in array properties and methods

Array Properties and Methods

  • The length property of an array returns the length of an array (the number of array elements).
  • Adding Array Elements : The easiest way to add a new element to an array is using the push() method
  • The pop() method removes the last element from an array
  • The concat() method creates a new array by merging (concatenating) existing arrays
  • We can use splice() to remove elements without leaving "holes" in the array
  • The sort() method sorts an array alphabeticaly
Example : Array Properties and Methods 
//Length property
const cities = ["Kolhapur", "Pune", "Mumbai", "Nashik"];
let length = cities.length;

//Adding element to array
const cities = ["Kolhapur", "Pune", "Mumbai", "Nashik"];
cities.push("Nagpur");

//Remove last element of an array
const cities = ["Kolhapur", "Pune", "Mumbai", "Nashik"];
cities.pop();

//concatenating array
const cities1 = ["Kolhapur", "Satara"];
const cities2 = ["Pune", "Mumbai""];
const cities = cities1.concat(cities2);

//Removing elements using splice() method
const cities = ["Kolhapur", "Pune", "Mumbai", "Nashik"];
cities.splice(0, 1);

//sorting an array
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

JavaScript Objects

  • Objects are variables,but objects can contain many values.
  • The values in Object are stored in name:value pairs
  • We can access Object values by property name
Example : Object declaration,Storing and accessing values
//There are two ways to declare Object
let car = new Object();
let car = {};
car = { 
    name: "A7",
    brand: "Audi",
    capacity: 5
    };
//How to access properties of an Object
console.log(car['name'])
console.log(car['brand'])

JavaScript Events

  • An HTML event can be something the browser does, or something a user does.
  • Example : web page has finished loading,input field was changed,button is clicked by user
  • Often, when events happen, we may want to do something,JavaScript lets you execute code when events are detected.
  • An onclick attribute, is added to a button element to perform onclick event (to execute specific code when user clicks on button)
  • The addEventListener() method allows you to add event listeners (to perform required action) on any HTML element
Example :
//onclick attribute
<button onclick="showDate()">Show Date</button>

//Adding onclick event listener to button
<button id="showDate">Show Date</button>
<p id="dateinfo"></p>
document.getElementById("showDate").addEventListener("click", displayDate);
function displayDate() 
{
document.getElementById("dateinfo").innerHTML = Date();
}

List of common HTML events

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
input The event occurs when an element gets user input