JavaScript Overview
JavaScript Output:
We have the following ways to display output in JavaScript:
innerHTML – displays data inside an HTML element
document.write() – mostly used for testing
Button with document.write() – removes all HTML and shows only output
window.alert() – shows data in alert box
console.log() – used for debugging
Instructions:
Programming means giving instructions to the machine.
Instructions are written as statements.
JavaScript executes statements from top to bottom.
Statements may contain values, operators, expressions, comments, and keywords.
Semicolon (
;) ends a statement.
Example
We can break a line after an operator:
Keywords:
Some important JavaScript keywords:
break, continue, debugger, do…while, for,
function, if…else, return, switch, try…catch
Syntax:
var Keyword
The var keyword tells the browser to create a variable in JavaScript.
Values
There are two types of values in JavaScript:
1. Literals (Fixed Values)
These are hardcoded or constant values.
10
“Pavan”
true
2. Variables (Stored Values)
These values are stored in variables.
var name = “Pavan”;
Case Sensitivity:
JavaScript is case-sensitive, meaning variable names with different cases are treated as different variables.
var lastname = “A”;
var Lastname = “B”; // Both are different variables
Variable Declarations:
You can declare variables in different ways:
var y; // Declared but undefined
var f, g, h; // Multiple variable declaration
String Concatenation Example
Using the + operator to combine strings:
g = “P” + “a”; // Result: “Pa”
f = g + “van”; // Result: “Pavan”
Variables:
Variables store data values.
Variable names must be unique.
Variables declared without
varare global.
Variable Rules:
Can contain letters, digits, _, $
Must start with a letter
Case-sensitive
Cannot use reserved keywords
var x; // value is undefined
Types of Variables:
Types of Variables:
1. Local Variable – accessible within a block
function test() {
var x = 10;
}
2. Global Variable – accessible throughout the page
var y = 20;
Operators:
- = is the assignment operator and == is the equal operator
- ++ increment
- — decrement
- null === undefined // false
null == undefined //true - () operator invokes the function
- Notes:
myFunction; // returns function definition
myFunction(); // returns function result
Data Type:
Primitive Data Type (normal data types which are without properties and methods):
String
Number
Bolean
Undefined
Null
Non-Primitive Data Types:
Object
Array
RegExp
typeof undefined // undefined
typeof null // object
Function: for reusability of code
We invoke the function on
- any event occurs (on click of user)
- () from JavaScript code
- Automatically (self-invoked)
Events:
- onChange
- onClick
- onMouseover
- onMouseout
- onKeydown
- onLoad
Object:
var training = {
trainername: “Abel”,
skill: “ServiceNow”,
id: 111,
trainerwithskill: function() {
return this.trainername + ” ” + this.skill;
}
};
var t1 = training.trainerwithskill(); // function value
var t2 = training.trainerwithskill; // function definition
var t3 = training.skill;
var t4 = training[“skill”];
JavaScript Looping examples:
If-else:
if (a < 1) {
skill = “Java”;
} else if (a < 2) {
skill = “PHP”;
} else {
skill = “Servicenow”;
}
For loop:
Example 1
for (i = 1; i < 5; i++) {
text += “Servicenow chapter ” + i + “
“;
}
Example 2
j=1;
for (; j < 5; j++) {
text += “Servicenow chapter ” + i + “
“;
}
Example 3
var trainer = {name:”Pavan”, skill:”Java”, age:28};
var text = “”;
var x;
for (x in trainer) {
text += trainer[x];
}
Example 4
var txt = “”;
var trainer = [{name:”Pavan”, skill:”Java”, age:28},{name:”Paavan”, skill:”Java”, age:28}];
var x;
for (x in trainer) {
txt += trainer[x][“name”];
}
document.getElementById(“demo”).innerHTML = txt;
Switch:
switch (new Date().getDay()) {
case 0:
day = “Today is Sunday”;
break;
case 1:
day = “Today is Today is Monday”;
break;
case 2:
day = “Today is Tuesday”;
break;
case 3:
day = “Today is Wednesday”;
break;
case 4:
day = “Today is Thursday”;
break;
case 5:
day = “Today is Friday”;
break;
case 6:
day = “Today is Saturday”;
break;
default:
day = “No Default”;
}
while loop:
while (i < 10) {
text += “The number is ” + i;
i++;
}
do while loop:
do {
text += “The number is ” + i;
i++;
}
while (i < 10);
JavaScript Function:
- function is an Object in JavaScript
- JavaScript function has properties as well as methods.
Normal Function
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
Anonymous Function
var pp = function() {
alert(“Hi this is anonymous function”);
};
Constructor Function
function Member(a, b) {
this.name = a;
this.skill = b;
}
var t = new Member(“Pavan”, “ServiceNow”);
var g = new Member(“Pankaj”, “Java”);
Arrow Function
// ES5
var x = function(p, q) {
return p * q;
};
// ES6
const x = (p, q) => p * q;
Callback Function
A callback function is a function passed as an argument to another function.
function p1(x) {
return x;
}
function p2(b, callback) {
callback(b);
}
p2(2, p1);
p2(3, function() {
alert(“Hi”);
});