Scribd
Upload
67 views11 pages

WD Chapter Four

JavaScript is one of three core web technologies, along with HTML and CSS. It allows developers to program the dynamic behavior of web pages, such as client-side validation, dynamic drop-down menus, and displaying clocks. JavaScript can modify HTML content, attributes, and styles, as well as hide or show HTML elements. Code can be placed internally between <head> and <body> tags or externally in .js files.

Uploaded by

Yididya Kedir
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
67 views11 pages

WD Chapter Four

JavaScript is one of three core web technologies, along with HTML and CSS. It allows developers to program the dynamic behavior of web pages, such as client-side validation, dynamic drop-down menus, and displaying clocks. JavaScript can modify HTML content, attributes, and styles, as well as hide or show HTML elements. Code can be placed internally between <head> and <body> tags or externally in .js files.

Uploaded by

Yididya Kedir
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
You are on page 1/ 11

Chapter Four

JAVASCRIPT
Introduction

 JavaScript is one of the 3 languages all web developers


must learn:
 HTML to define the content of web pages.
 CSS to specify the layout of web pages.
 JavaScript to program the behavior of web pages.
Why?

 Programming Language
 Client side dynamic page
 Not a compiled language
 Object based
Advantages

 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog
box, confirm dialog box and prompt dialog box),
 Displaying clocks etc.
What can JS do?

 JavaScript Can Change HTML Content


<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!
</button>
</body>
</html>
Contd…

 JavaScript Can Change HTML Attributes


<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<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.jpg'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.jpg'">Turn off the light</button>
</body>
</html>
Contd…

 JavaScript Can Change HTML Styles (CSS)

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<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>
Contd…

 JavaScript Can Hide HTML Elements

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Contd…

 JavaScript Can Show HTML Elements

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<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>
Places to put JavaScript code

 JavaScript provides 3 places to put the JavaScript code:


 Between the body tag of html
 Between the head tag of html
 In .js file (external javaScript)

You might also like