JavaScript introduction
JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is
well-known for the development of web pages, many non-browser environments also
use it. JavaScript can be used for Client-side developments as well as Server-side
developments.
Three print command in javascript
• [Link]()
• alert()
• [Link]()
PRINT HELLO PROGRAM
<!DOCTYPE html>
<html>
<body>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello World !>>>>>> <br>This is my first
program";
</script>
</body>
</html>
CHANGE COLOR OF WHOLE BODY OF WEBPAGE ON CLICK
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to the window object.</p>
<p>Click anywhere in this window to change the background color of body.</p>
<script>
[Link] = myFunction;
function myFunction() {
[Link]("BODY")[0].[Link] = "yellow";
}
</script>
</body>
</html>
COMMENT TEXT IN JAVASCRIPT
<html>
<body>
<h2>JavaScript Comments</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*[Link]("myH").innerHTML = "Welcome to my Homepage";
[Link]("myP").innerHTML = "This is my first paragraph.";
*/
[Link]("myP").innerHTML = "The comment-block is not executed.";
</script>
</body>
</html>
ON CLICK EVENT FUNCTION
<html>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
<script>
[Link]("demo").onclick = function() {myFunction()};
function myFunction() {
[Link]("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
ONCLICK CHANGE TEXT COLOR
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
[Link]("demo").[Link] = "yellow";
}
</script>
</body>
</html>
COPY TEXT FROM ONE CELL TO ANOTHER
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">Copy Text</button>
<p>A function is triggered when the button is clicked. The function copies the text from Field1 into
Field2.</p>
<script>
function myFunction() {
[Link]("field2").value = [Link]("field1").value;
}
</script>
</body>
</html>
ADD TWO NUMBERS
(Subtraction wala program they will make)
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>If you add two numbers, the result will be a number:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = 20;
let z = x + y;
[Link]("demo").innerHTML = z;
</script>
</body>
</html>
SUM OF MULTIPLE NUMBERS
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Sum of all arguments:</p>
<p id="demo"></p>
<script>
function sumAll() {
let sum = 0;
for(let i = 0; i < [Link]; i++) {
sum += arguments[i];
}
return sum;
}
[Link]("demo").innerHTML = sumAll(1, 123, 500, 115, 44, 88);
</script>
</body>
</html>
MULTIPLY TWO NUMBERS
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when multiplying:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x * y;
[Link]("demo").innerHTML = z;
</script>
</body>
</html>
DIVIDE TWO NUMBER
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>JavaScript will try to convert strings to numbers when dividing:</p>
<p id="demo"></p>
<script>
let x = "100";
let y = "10";
let z = x / y;
[Link]("demo").innerHTML = z;
</script>
</body>
</html>
EXECUTION OF UNDER BRACES VALUE IN SCRIPT
<html>
<body>
<h2>Redeclaring a Variable Using var</h2>
<p id="demo"></p>
<script>
var x = 10;
// Here x is 10
{
var x = 12;
// Here x is 2
}
// Here x is 2
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
WITH LET FIIRST ONE EXECUTED
<html>
<body>
<h2>JavaScript let</h2>
<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>
<p id="demo"></p>
<script>
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
DISPLAY DATE IN JAVASCRIPT
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="[Link]('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
STATEMENT CALL WITH HELP OF MY FUNCTION
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
[Link]("demo1").innerHTML = "Hello Arun!";
[Link]("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
CONVERSION OF FARENHEIT TO DEGREE CELCIUS
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
SELECTIVE DISPLAY
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Using an object constructor:</p>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
[Link] = first;
[Link] = last;
[Link] = age;
[Link] = eye;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
[Link]("demo").innerHTML =
"My father is " + [Link] + ". My mother is " + [Link];
</script>
</body>
</html>
EXECUTION OF NUMBER POWER
<html>
<body>
<p>Setting a default value to a function parameter (y=2).</p>
<p id="demo"></p>
<script>
function myFunction(x, y = 3) {
return x * y;
}
[Link]("demo").innerHTML = myFunction(5);
</script>
</body>
</html>
FIND THE GREATER NUMBER
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Finding the largest number.</p>
<p id="demo"></p>
<script>
function findMax() {
let max = -Infinity;
for(let i = 0; i < [Link]; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
[Link]("demo").innerHTML = findMax(7, 8, 9);
</script>
</body>
</html>
SWITCH ON & OFF BULB
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="[Link]('myImage').src='pic_bulbon.gif'">Turn on the
light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="[Link]('myImage').src='pic_bulboff.gif'">Turn off the
light</button>
</body>
</html>