Scribd
Upload
36 views12 pages

Java Script

This presentation introduces JavaScript, covering its uses, basic syntax, and how it can manipulate HTML elements and display information. JavaScript is one of the three main languages used for web development. The presentation demonstrates how JavaScript can change HTML content, styles, and attributes through examples. It also shows how JavaScript programs can perform calculations and string operations. Finally, it notes that JavaScript is case sensitive.

Uploaded by

Atiqur Rahman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views12 pages

Java Script

This presentation introduces JavaScript, covering its uses, basic syntax, and how it can manipulate HTML elements and display information. JavaScript is one of the three main languages used for web development. The presentation demonstrates how JavaScript can change HTML content, styles, and attributes through examples. It also shows how JavaScript programs can perform calculations and string operations. Finally, it notes that JavaScript is case sensitive.

Uploaded by

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

Presentation Of

JavaScript

Presented by
Md Atiqur Rahman (Polash)
Chief Technical Officer(CTO)
Doel e-Services
Web: doeleservices.com
Email: [email protected]
Mobile:01720981682
7/30/23 Web Design and Development 1
Today Objective
• Introduction
• Display Possibilities
• JavaScript Programs

7/30/23 Web Design and Development 2


Introduction
• JavaScript is the programming language of
HTML and the Web.
• JavaScript is easy to learn.
• This tutorial will teach you JavaScript from
basic to advanced.

7/30/23 Web Design and Development 3


• JavaScript is one of the 3 languages all web
developers must learn:
•    1. HTML to define the content of web pages
•    2. CSS to specify the layout of web pages
•    3. JavaScript to program the behavior of
web pages

7/30/23 Web Design and Development 4


Example
<button
onclick="document.getElementBy
Id('myImage').src='pic_bulbon.gif'
">Turn on the light</button>

<img id="myImage"
src="pic_bulboff.gif"
style="width:100px">

<button
onclick="document.getElementBy
Id('myImage').src='pic_bulboff.gif'
">Turn off the light</button>

7/30/23 Web Design and Development 5


Example
<p id="demo">JavaScript can change the style of
an HTML element.</p>

<button type="button"
onclick="document.getElementById('demo').st
yle.fontSize='35px'">Click Me!</button>

7/30/23 Web Design and Development 6


Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

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

</body>
</html>
7/30/23 Web Design and Development 7
Display Possibilities
• Writing into an HTML element, using
innerHTML.
• Writing into the HTML output using
document.write().
• Writing into an alert box, using window.alert().

7/30/23 Web Design and Development 8


Example
Using innerHTML
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
document.write()
<script>
document.write(5 + 6);
</script>
window.alert()
<script>
window.alert(5 + 6);
</script>
7/30/23 Web Design and Development 9
JavaScript Programs

• JavaScript is a programming language.


• JavaScript statements are separated by semicolons:
• <p id="demo"></p>

• <script>
• var x, y, z;
• x = 5;
• y = 6;
• z = x + y;
• document.getElementById("demo").innerHTML = z;
• </script>
• <p id="demo"></p>

• <script>
• document.getElementById("demo").innerHTML = (5 + 6) * 10;
• </script>
7/30/23 Web Design and Development 10
Case Sensitive

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

• <script>
• var lastname, lastName;
• lastName = "Doe";
• lastname = "Peterson";
• document.getElementById("demo").innerHTML =
lastName;
• </script>
7/30/23 Web Design and Development 11
• Any Question

7/30/23 Web Design and Development 12

You might also like