Javascript
Create a External Javascript
You need to create two document,
1.First write below and save this in as .js.
document.write("External");
2.Second Write below code and save as .html
<html>
<head>
<title> External script </title
<Script src="external.js">
</Script>
</head>
<body>
<Script src="external.js">
</Script>
</body>
</html>
So you are giving the command to see external.js
Purpose of Semicolon
Every statement in java need not to be end with semicolon.
1.Remove semicolon and save this
document.write("External")
But you need semicolon if you are using mulitple line.
2.Write below code and save as .html
document.write("External") document.write("External")
It will not print anything.To see error in chrome go to View-Developer- Javascript Console.
3.Write below code and with semi colon and you will get below output
document.write("External"); document.write("External")
Variable
We use Variable to store and retrive a data.It act as a container.
Javascript support three types of data type
-
Number
-
Strings
-
Boolean
In javascript, the variables are declare using var keyword.
It also support other data type as null and undefined.
Naming Convention
A varible start with undescore or form alphabet , not start from number and case sensitive.
_account : Applicable
account : Applicable
123account : Not applicable
Note: var should be in small letter.
Example:
<html>
<head>
<title> Variable </title>
<Script>
var x=10;
var _a=100;
var $a=1000;
var A=20;
var s="Kunal";
document.write(x);
document.write("<br/>");
document.write(_a);
document.write("<br/>");
document.write($a);
document.write("<br/>");
document.write(A);
document.write("<br/>");
document.write(s);
document.write("<br/>");
</Script>
</head>
</html>
Arithmetic operator
There are four arithmetic operators
Addition +
Substraction -
Division /
Modulus % (give remainder)
Example:
<html>
<head>
<title> Variable </title>
<Script>
var x=10;
var y=2;
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/>");
</Script>
</head>
</html>
Plus Operator and string
A plus operator can also be used with string data types.It acts as a concantenation operator when one of the operator is string.
The concatenation operator in programming is used to combine (or "concatenate") two or more strings into a single string.
Note: String is define in "".
Example:
<html>
<head>
<title> Plus and String </title>
<Script>
var x=10;
var y=2;
var z= x+y;
document.write(z);
document.write("<br/>");
</Script>
</head>
</html>
<html>
<head>
<title> Plus and String </title>
<Script>
var x=10;
var y=2;
var z= x+y;
document.write(z);
document.write("<br/>");
var a="30"; String can be added in double inverted comma
var b= '20'; String can be added in single inverted comma
var c= a+b;
document.write(c);
document.write("<br/>");
var p= x+b;
document.write(p);
document.write("<br/>");
</Script>
</head>
</html>
<html>
<head>
<title> Plus and String </title>
<Script>
var x=10;
var y=2;
var z= x+y;
var k=x=y;
document.write(z+"<br/>"); Use directly + Operator to avoid cration of second line for break line.
document.write(k+"<br/>");
</Script>
</head>
</html>
NaN (Not a number)
String can be used with operator if their value is number.
Example:
<html>
<head>
<title> Nan </title>
<Script>
var x="10"
var y="2"
var z= x-y;
document.write(z+"<br/>");
</Script>
</head>
</html>
Output: 8.
It works because javascipt internally convert them into numberic value when we use an arithmatic operator.
Example:
<html>
<head>
<title> Nan </title>
<Script>
var x="10";
var y="ABC";
var z= x-y;
document.write("Result is :"+z);
</Script>
</head>
</html>
Output: Result is NaN.
Assignment Operator
Assignment operator is used to assing some value to variable.
Example:
<html>
<head>
<title> Nan </title>
<Script>
var x="10"
var y="2"
var z= x*=y
document.write(z+"<br/>");
</Script>
</head>
</html>
Increment and Decrement Operator
It increment and decrement the value by 1, they are represented by ++ or -- symbols.
Post increment : Used after the varible name
Post increment *++
Post decrement *--
Pre increment : Used after the varible name
Pre increment ++*
Pre decrement --*
Example:
<html>
<head>
<title> Increment </title>
<Script>
var x=10;
var y=x++;
document.write(x);
document.write("<br/>");
document.write(y);
document.write("<br/>");
</Script>
</head>
</html>
Output:
11
10
Explanation:
var y = x++;
-
This uses the post-increment operator (x++).
-
In post-increment, the current value of x is assigned to y, and only then is x incremented.
-
So:
-
y = 10 (the original value of x).
-
Then, x is incremented to 11.
-
<html>
<head>
<title> Increment </title>
<Script>
var x=10;
var y=++x
document.write(x);
document.write("<br/>");
document.write(y);
document.write("<br/>");
</Script>
</head>
</html>
Ouput:
11
11
Explanation:
var y = ++x;
-
This line uses the pre-increment operator (++x), which increments the value of x before assigning it to y.
-
Here's how it works:
-
x is incremented first, so x becomes 11.
-
Then, y is assigned the incremented value of x, which is 11.
-
-
After this line:
-
x = 11
-
y = 11
-
Comparision operators
Comparison operator take two operands compare their values and retrun a boolean true or false as result.
Let x=10
Operator Condition Result
== x==10 True
== x=="10" True Because it does not care about data type
=== x===10 True
=== x==="10" False
!=(Not equal) x!=10 False
!=(Not equal) x!="10" False Because it does not care about data type
!== x!==10 False
!== x!=="10" True
<
<=
>
>=
Alert Popup
Javascript Support three type of popup
-
Alert (Initially it is used for debugging, but now we have advance method so we dont use this.)
-
Confirm (It has two option either cancel or confirm , it was used to ask stay in page or leave)
-
Prompt
Example:
<html>
<head>
<title> Alert and Confirm Popup </title>
<Script>
alert("Click to proceed");
confirm("Click here to proceed");
</Script>
</head>
</html>
l
Example:
<html>
<head>
<title> Prompt </title>
<Script>
var s= prompt ("Enter your user id");
document.write(s);
</Script>
</head>
</html>
Prompt operator take respond from the popup and execute it.
Example:
<html>
<head>
<title> Prompt </title>
<Script>
var s= prompt ("Enter your user id");
document.write("Welcome:"+s);
</Script>
</head>
</html>
Sum of two number using prompt
Prompt by default consider the value that enter as string.So use parseInt to convert to numeric value while parsefloat convert to integer.
Example:
<html>
<head>
<title> Sum of two numbers </title>
<Script>
var num1=parseInt(prompt("Enter the first number"));
var num2=parseInt(prompt("Enter the second number"));
var sum =num1+num2;
document.write(sum);
</Script>
</head>
</html>
Conditional statement : If
Conditional statement : If Else
If(Condition) Condition always express as boolean
{ Code ............} If true the body will be executed that is under lower bracket.If false then it will not executed.
else{ Code ............} This code will run only if the condition is false.
Example:
<html>
<head>
<title> If </title>
<Script>
var x= prompt("Please enter a number","10"); By default the number will be 10, not need to write.
if(x==10){document.write("x:"+x);}
else{
document.write("Else block x:"+x);}
</Script>
</head>
</html>
Ouptut Prompt : Please Enter a number : Enter 10 so it consider true and then it will print x:10.
If you enter other number then it will print else block x:10.
Conditional statement : If Else Ladder
Grade a marks in three subject : Javascript, Java, Python
Enter a marks and pass mark is 35.
Calculate grade
C 35 to 59
B 60 to 69
A >69
In Java, the && symbol is the logical AND operator. It is used to combine two or more conditions in an if, while, or similar control structure, and it evaluates to true only if both conditions are true.
<html>
<head>
<title>If</title>
<Script>
var javascript = parseInt(prompt("Enter Javascript Marks")); Declaring variable and converting to integer
var java = parseInt(prompt("Enter Java Marks")); Declaring variable and converting to integer
var python = parseInt(prompt("Enter Python Marks")); Declaring variable and converting to integer
var total = javascript + java + python; Declaring total variable
document.write("Total marks: " + total + "<br/>"); Printing total marks
var average = total / 3; Declaring average
document.write("Average: " + average + "<br/>"); Printing average
if (javascript >= 35 && java >= 35 && python >= 35) { Setting Passmarks in all subject minimum 35
document.write("Result is Passed<br/>"); Directly print pass if all condition support, only used if condition
if (average >= 35 && average < 60) { More if condition for grading
document.write("Grade: C<br/>");
}
else if (average >= 60 && average < 70) { More if condition for grading
document.write("Grade: B<br/>");
}
else {
document.write("Grade: A<br/>"); More if condition for grading
}
}
else {
document.write("Result: Failed<br/>"); If first condition of passing doesnot work then it will failed.
}
</Script>
</head>
</html>
Direct Code :
<html>
<head>
<title>If</title>
<Script>
var javascript = parseInt(prompt("Enter Javascript Marks"));
var java = parseInt(prompt("Enter Java Marks"));
var python = parseInt(prompt("Enter Python Marks"));
var total = javascript + java + python;
document.write("Total marks: " + total + "<br/>");
var average = total / 3;
document.write("Average: " + average + "<br/>");
if (javascript >= 35 && java >= 35 && python >= 35) {
document.write("Result is Passed<br/>");
if (average >= 35 && average < 60) {
document.write("Grade: C<br/>");
}
else if (average >= 60 && average < 70) {
document.write("Grade: B<br/>");
}
else {
document.write("Grade: A<br/>");
}
}
else {
document.write("Result: Failed<br/>");
}
</Script>
</head>
</html>
Logical Operator
And && If Multiple condition is true then next line execute.
Or || If any of the condition is true then next line execute.
Switch Statement
The switch statement in JavaScript is used to perform different actions based on different conditions. It is a control flow statement that evaluates an expression and matches its value against multiple case clauses. Once a match is found, the corresponding block of code is executed.
Break is use to break particular switch.
Switch(n) {
case label 1:
code.......
case label 2:
code.......
default:
code.......
}
Direct Code :
<html>
<head>
<title>Switch</title>
<Script>
var n=parseInt(prompt("Enter any number","1-3"));
switch(n){
case 1:
document.write("One");
break;
case 2:
document.write("Two")
break;
default:
document.write("Three")
}
</Script>
</head>
</html>
Switch Statement with string value
Switch statement can be also used with string.
Example:
<html>
<head>
<title>Switch with string</title>
<Script>
var n=prompt("Enter any number","john,kunal,mark");
switch(n){
case "john":
document.write("john");
break;
case "kunal":
document.write("kunal")
break;
case "mark":
document.write("mark")
break;
default:
document.write("No match")
}
</Script>
</head>
</html>
Loops
Looping statements give us the syntax to execute the same logic or code multiple times.
There are four type of loop
-
for
-
while
-
do-while
-
for-in
for(Intialization;condition;increment or decrement) {body............}
Intialization: we define variable
Condition: It will boolean
Increment or decrement : If condition will be true.
Example:
<html>
<head>
<title>For</title>
</head>
<body>
<Script>
var n = prompt("Enter a number");
for (var i = 1; i <= n; i++) {
document.write("Number is " + i + "<br/>");
}
</Script>
</body>
</html>
While(condition) {code....}
code will be execute as long as the conditon under while will be true.
Example:
<html>
<head>
<title>while</title>
</head>
<body>
<Script>
var n =prompt("Enter a number");
var i= 1;
while(i<n){
document.write("Number is " + i + "<br/>");
i++;
}
</Script>
</body>
</html>
do{ Code..... } while (condition);
Example:
<html>
<head>
<title>while</title>
</head>
<body>
<Script>
var i= 4;
var n=2;
do {
document.write("Value of i:"+i+ "<br/>");
}while(i<=n);
</Script>
</body>
</html>
Break statement is used to break the loop.
<html>