JS1

JavaScript A Programming language for Web development
I. Introduction
JavaScript is the programming language of HTML and the Web. Programming makes computers
do what you want them to do. JavaScript is easy to learn.
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.
II. JavaScript Can change HTML content

This example uses the method(getElementById) to find an HTML element (with id="demo"), and
changes the element’s content (innerHTML) to "Hello JavaScript":
Example:
sample1.html
<html>
<head>
<script src=”functionality.js”></script>
</head>
<body>
<h2>Change text using JavaScript.</h2>
<div id="demo">JavaScript can change HTML content</div>
<button type="button" id=”textChanger”>Click Me!</button>
</body>
</html>
functionality.js
window.onload = function() {
var txt = document.getElementById(“demo”);
var btn = document.getElementById(“textChanger”);
btn.onclick = function() {
txt.innerHTML =”Hello JavaScript”;
}
}
III. JavaScript Can Change HTML Attribute Values

This example changes the value of the src(source) attribute of an <img> tag:
Example:
sample2.html
<html>
<head>
<script src="functionality.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div id="div1">
<h2>Change attribute value using JavaScript.</h2>
<img id="bulb" src="..\JavaScriptFiles\src\pic_bulboff.gif"> </img><br><br>
<button type="button" class="btn" id="lightOff">Off!</button>
<button type="button" class="btn" id="lightOn">On!</button>
</div>
</body>
</html>
functionality.js
var bulb = document.getElementById("bulb");
var btnOff = document.getElementById("lightOff");
var btnOn = document.getElementById("lightOn");
btnOff.onclick = function() {
bulb.src = "..\\JavaScriptFiles\\src\\pic_bulboff.gif";
}
btnOn.onclick = function() {
bulb.src = "..\\JavaScriptFiles\\src\\pic_bulbon.gif";
}
}
style.css
#div1 {
text-align:center;
border:solid 2px;
}
#lightOff:hover {
background-color:rgba(247, 33, 50, 0.849);
}
#lightOn:hover {
background-color:rgb(159, 226, 34);
}
.btn {
color:white;
height:30px;
width:90px;
border-radius:5px;
border:dotted;
}
IV. Conditions in JavaScript

Condition statements are used to perform different actions based on different conditions.
Example:
sample3.html
<html>
<head>
</head>
<body>
<div id="firstDiv"></div>
</body>
</html>
functionality.js
var x = 5;
if(x <= 5) {
document.getElementById("firstDiv").innerHTML = "x is greater than or equal to 5";
}
}
OR
functionality.js
var x = 5;
if(x <= 5) {
document.getElementById("firstDiv").innerHTML = "x is less than or equal to 5";
}
else {
document.getElementById("firstDiv").innerHTML = "x is greater than 5";
}
}
Try this!(30mins)
Using the sample2.html and its corresponding resources, make the bulb turn on/off using only 1
button.
V. SetInterval in JavaScript
The setInterval() method calls a function or evaluates an expression at specified intervals(milliseconds).
Example:
sample4.html
<html>
<head>
</head>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
</body>
</html>
functionality.js
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
VI. Windows innerWidth and innerHeight

The innerWidth property returns the width of a window's content area. The innerHeight property
returns the height of a window's content area
Example:
sample5.html
<html>
<head>
</head>
<body>
<p>Click the button to display this frame's height and width.</p>
<button type="button" id="btn">Try it</button>
<p><strong>Note:</strong> The innerWidth and innerHeight properties.</p>
<p id="demo"></p>
</body>
</html>
functionality.js
var btn = document.getElementById("btn");
var w = window.innerWidth;
var h = window.innerHeight;
btn.onclick = function() {
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: "+ h;
}
}

JS1

Uploaded by

JS1

Uploaded by

JavaScript A Programming language for Web development

JavaScript is one of the 3 languages all web developers must learn:

II. JavaScript Can change HTML content

III. JavaScript Can Change HTML Attribute Values

IV. Conditions in JavaScript

VI. Windows innerWidth and innerHeight

You might also like