Scribd
Upload
29 views5 pages

Learning Javascript Lab 5: 1-Window - Alert - 2 - Document - Write - 3 - Innerhtml - 4 - Console - Log - Example 1

Uploaded by

Mostafa Nasher
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
29 views5 pages

Learning Javascript Lab 5: 1-Window - Alert - 2 - Document - Write - 3 - Innerhtml - 4 - Console - Log - Example 1

Uploaded by

Mostafa Nasher
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/ 5

Learning JavaScript

Lab 5

What is JavaScript?
JavaScript is the programming language of HTML and the Web used to program the
behavior of web pages

What can JavaScript do?

1- JavaScript can change HTML content.


2- JavaScript can change HTML attributes .
3- JavaScript can change HTML styles (CSS) .
4- JavaScript can validate data.

JavaScript can display data in different ways:


1- window.alert() .
2- document.write() .
3- innerHTML .
4- console.log().

Example 1:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.alert("hello world!");
</script>
</body>
</html>

Eng: Samah Al-atifi E-Commerce “B4IT”


Example 2:
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('HelloWorld!')">click me!</button>
</body>
</html>
Example 3:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function ok(){
window.alert("welcom"+" "+form1.t1.value);
}
</script>
<form id="form1">
<input type="text" name="t1">
<input type="button" onclick="ok()" value="click me!">
</form>
</body>
</html>
Example 4:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

Eng: Samah Al-atifi E-Commerce “B4IT”


document.write("My first script")
</script>
<button>click me!</button>
</body></html>
Example 5:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function increase(){
img1.height+=100;
img1.width+=100;
}
function decrease(){
img1.height-=100;
img1.width-=100;
}

</script>
<img src="a.jpg" id="img1" onmouseover="increase()" onmouseout="decrease()">
</body>
</html>

Example 6:
<!DOCTYPE html>
<html>
<head>
<body>

Eng: Samah Al-atifi E-Commerce “B4IT”


<script type="text/javascript">
function change(){
var x= document.getElementById("p1");
x.innerHTML="welcom!";
}
</script>
<p id="p1" onclick="change()">hello world!</p>
</body>
</html>
Example 7:
<!DOCTYPE html>
<html>
<head>
<body>
<h1 onmouseover="this.style.color='red'">hello world!</p>
</body>
</html>

Eng: Samah Al-atifi E-Commerce “B4IT”


Eng: Samah Al-atifi E-Commerce “B4IT”

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy