Scribd
Upload
33 views

Java Script Loops

The document discusses several JavaScript concepts including loops, switch statements, variables, functions, events, and GET/POST requests. It provides code examples to output text using a for loop, display the day of the week using a switch statement, add variables and output their sum, define and call functions to handle events like clicks and mouse movement, and make an AJAX GET request to a PHP file to return suggestions.

Uploaded by

she
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views

Java Script Loops

The document discusses several JavaScript concepts including loops, switch statements, variables, functions, events, and GET/POST requests. It provides code examples to output text using a for loop, display the day of the week using a switch statement, add variables and output their sum, define and call functions to handle events like clicks and mouse movement, and make an AJAX GET request to a PHP file to return suggestions.

Uploaded by

she
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

JAVA SCRIPT LOOPS

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Loops</h2>

<p id="demo"></p>

<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
Var I’;

RESULT :

JavaScript Loops
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

RESULT:
Today is Sunday

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
alert("I am an alert box!");
}
</script>

</body>
</html>

RESULT

JavaScript Alert
Try it  BUTTON
JAVASCRIPT VARIABLES

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>

RESULT:

In this example, x, y, and z are variables.

The value of z is: 11

5 EVENT HANDLER

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

2.
<!DOCTYPE html>
<html>
<body>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>
3.
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

MOUSE EVENTS

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

</body>
</html>

4. mouse event: alert which button when mouse is clicked

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e) {
x = e.clientX;
y = e.clientY;
coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor
}

function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
</script>
</head>
<body style="margin:0px;">

<div id="coordiv" style="width:199px;height:99px;border:1px solid" onmousemove="myFunction(event)"


onmouseout="clearCoor()"></div>

<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>

<p id="demo"></p>

</body>
</html>

5. ONCLICK EVENTS
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

</body>
</html>

PHP GET AND POST

<!DOCTYPE HTML>
<html>
<body>

<form action="welcome.php" method="post">


Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>

</body>
</html>

Php get and post

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "gethint.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>


<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

You might also like