Punjab Institute of Management &
Technology
JavaScript
Lecture-01
Amit Kapoor
Dean, Academics &
Head, Department of Computer Applications
Punjab Institute of Management & Technology
JavaScript
• JavaScript is a dynamic computer programming language used to
create interactive web pages.
06:22:10 AM
Why Study
JavaScript?
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
06:22:10 AM
JavaScript & HTML
Changes that JavaScript can do to HTML elements
06:22:10 AM
JavaScript Can Change HTML
Content
• One of many JavaScript HTML methods is getElementById().
• This example uses the method to "find" an HTML element (with
id="demo") and changes the element content (innerHTML) to "Hello
JavaScript":
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
</body>
</html>
06:22:10 AM
JavaScript Can Change HTML
Attributes
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
06:22:10 AM
JavaScript Can Change HTML
Styles (CSS)
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
06:22:10 AM
JavaScript Can Hide HTML
Elements
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button"
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
06:22:10 AM
JavaScript Can Show HTML
Elements
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button"
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
06:22:10 AM
Sum of two numbers
External js file
sum.js my.html
<html>
var a,b,c;
<head>
a=prompt("enter first value") </head>
b=prompt("enter second value") <body>
c=parseInt(a)+parseInt(b) <script type="text/javascript" src ="sum.js">
document.write("sum "+c); </script>
</body>
</html>
06:22:10 AM
numbers
<!DOCTYPE html>
<html lang="en">
<head>
Take input from
<meta charset="UTF-8">
FORM
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="MyNumberForm">
<label for="num1">Enter first number</label>
<input type="text" id="num1">
<label for="num2">Enter second number</label>
<input type="text" id="num2">
<label for="sum">Sum</label>
<input type="text" id="sum">
<button type="button" onclick="findSum()">Click to add</button>
</form>
<script src="myjs.js">
</script>
</body>
</html>
06:22:10 AM
