1 JavaScript
1 JavaScript
JS Comment
JS Variables
JS Output
JS Data Types
JS Operators
JS Events
JS String
Comments
Multi-line Comments
/* */
Variables
Variables are used to store data, like string of text, numbers,
etc. The data or value stored in the variables can be set,
updated, and retrieved whenever needed. In general, variables are
symbolic names for values.
<script>
// Creating variables
var name = "Ram";
var age = 5;
document.write(name + "<br>");
document.write(age + "<br>");
const PI = 3.14;
document.write(PI); // 3.14
</script>
A variable name must start with a letter, underscore (_), or dollar sign ($).
A variable name cannot start with a number.
A variable name can only contain alpha-numeric characters (A-z, 0-9) and underscores.
A variable name cannot contain spaces
Alert :
<script>
alert("Hello World!");
var x = 10;
var y = 20;
var sum = x + y;
alert(sum);
</script>
<script>
var a = 2, b = 5, c = 10;
document.write(b > a)
document.write("<br>");
document.write(b > c)
</script>
<script>
var colors = ["Red", "Yellow", "Green", "Orange"];
var cities = ["4", "2", "5"];
document.write(colors[0] + "<br>");
document.write(cities[2]);
</script>
Length of a String
<script>
var str1 = "This is a paragraph of text.";
document.write(str1.length + "<br>");
<script>
var greeting = function(){
return "Hello World!";
}
document.write(typeof greeting)
document.write("<br>");
document.write(greeting());
</script>
Function
<script>
function createGreeting(name){
return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
document.write(result);
</script>
typeof Operator
<script>
document.write(typeof 15 + "<br>");
document.write(typeof 42.7 + "<br>");
document.write(typeof '' + "<br>");
document.write(typeof 'hello' + "<br>");
document.write(typeof '12' + "<br>");
document.write(typeof true + "<br>");
document.write(typeof false + "<br>");
document.write(typeof {name: "John", age: 18} + "<br>");
document.write(typeof [1, 2, 4] + "<br>");
document.write(typeof function(){});
</script>
Operators
Arithmetic Operators
<script>
var x = 10;
var y = 4;
document.write(x + y);
document.write("<br>");
document.write(x - y);
document.write("<br>");
document.write(x * y);
document.write("<br>");
document.write(x / y);
document.write("<br>");
document.write(x % y);
</script>
Assignment Operators
<script>
var x;
x = 10;
document.write(x + "<br>");
x = 20;
x += 30;
document.write(x + "<br>");
x = 50;
x -= 20;
document.write(x + "<br>");
x = 5;
x *= 25;
document.write(x + "<br>");
x = 50;
x /= 10;
document.write(x + "<br>");
x = 100;
x %= 15;
document.write(x);
</script>
String Operators
<script>
var str1 = "Hello";
var str2 = " World!";
str1 += str2;
document.write(str1);
</script>
Incrementing and Decrementing Operators
<script>
var x;
x = 10;
document.write(++x);
x = 10;
document.write(x++);
x = 10;
document.write(--x);
x = 10;
document.write(x--);
</script>
Logical Operators
The logical operators are typically used to combine conditional statements.
<script>
var year = 2018;
// Leap years are divisible by 400 or by 4 but not 100
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 ==
0))){
document.write(year + " is a leap year.");
} else{
document.write(year + " is not a leap year.");
}
</script>
Comparison Operators
<script>
var x = 25;
var y = 35;
var z = "25";
document.write(x == z);
document.write("<br>");
document.write(x != y);
document.write("<br>");
Events
event is something that happens when user interact with the web
page, such as when he clicked a link or button, entered text into
an input box or textarea, made selection in a select box, pressed
key on the keyboard, moved the mouse pointer, submits a form, etc.
In some cases, the Browser itself can trigger the events, such as
the page load and unload events.the names for event handlers
always begin with the word "on", so an event handler for the click
event is called onclick, similarly an event handler for the load
event is called onload, event handler for the blur event is called
onblur.
(2)
<button type="button" id="myBtn">Click Me</button>
<script>
function sayHello(){
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
Mouse Events
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Document/Window Events
You can use the indexOf() method to find a substring or string within another string. This
method returns the index or position of the first occurrence of a specified string within a string.
<script>
var str = "If the facts don't fit the theory, change the
facts.";
var pos = str.indexOf("facts");
document.write(pos);
</script>
you can use the lastIndexOf() method to get the index or position
of the last occurrence of the specified string within a string,
<script>
var str = "If the facts don't fit the theory, change the
facts.";
var pos = str.lastIndexOf("facts");
document.write(pos); // 0utputs: 46
</script>
You can use the slice() method to extract a part or substring from a string.
This method takes 2 parameters: start index (index at which to begin extraction), and an optional
end index (index before which to end extraction), like str.slice(startIndex,
endIndex).
<script>
var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr);
</script>
(2)
<script>
var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.slice(-28, -19) + "<br>"); // Prints: fox
jumps
document.write(str.slice(31)); // Prints: the lazy dog.
</script>
<script>
var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
document.write(result);
</script>
You can concatenate or combine two or more strings using the + and
+= assignment operators.
<script>
var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!
</script>
<script>
var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Prints: hello world!
</script>
Concatenating Two or More Strings
You can concatenate or combine two or more strings using the + and
+= assignment operators.
<script>
var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet + "<br>"); // Prints: Hello World
You can use the charAt() method to access individual character from a string, like
str.charAt(index). The index specified should be an integer between 0 and str.length
- 1. If no index is provided the first character in the string is returned, since the default is 0.
<script>
var str = "Hello World!";
document.write(str.charAt() + "<br>");
document.write(str.charAt(6) + "<br>");
document.write(str.charAt(30) + "<br>");
document.write(str.charAt(str.length - 1));
</script>
<script>
var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0] + "<br>");
document.write(fruitsArr[2] + "<br>");
document.write(fruitsArr[fruitsArr.length - 1]);
document.write("<hr>");