HTML JavaScript

JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

Uploaded by

VASANTHAKUMAR. A CSE 2020

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

0% found this document useful (0 votes)

30 views5 pages

HTML JavaScript

Uploaded by

VASANTHAKUMAR. A CSE 2020

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

HTML JavaScript

 JavaScript makes HTML pages more dynamic and interactive.

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
The HTML <script> Tag

 The <script> tag is used to define a client-side script (JavaScript).

 The <script> element either contains scripting statements, or it
points to an external script file through the src attribute.
 Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
 To select an HTML element, JavaScript very often use the
document.getElementById(id) method.

This JavaScript example writes "Hello JavaScript!" into an HTML

element with id="demo":
Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
JavaScript can change HTML content
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
}
</script>
</body>
</html>
JavaScript can change HTML styles
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor =
"yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript can change HTML attributes
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "bulb_off.jpg"
} else {
pic = "bulb_on.jpg"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="bulb_off.jpg" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
The HTML <noscript> Tag

 The <noscript> tag is used to provide an alternate content for

users that have disabled scripts in their browser or have a browser
that doesn't support client-side scripts:

Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written
inside the noscript element.</p>
</body>
</html>

QBO ProAdvisor Certification Part 1 Slides
100% (1)
QBO ProAdvisor Certification Part 1 Slides
175 pages
JavaScript W3school
No ratings yet
JavaScript W3school
107 pages
JavaScript PDF
100% (1)
JavaScript PDF
635 pages
Js
No ratings yet
Js
29 pages
Javascript
No ratings yet
Javascript
32 pages
JavaScript v1
No ratings yet
JavaScript v1
24 pages
W 3 Js
No ratings yet
W 3 Js
2 pages
Why Study Javascript?
No ratings yet
Why Study Javascript?
22 pages
Javascript
No ratings yet
Javascript
37 pages
Java Script
No ratings yet
Java Script
29 pages
chap 4 Javascript
No ratings yet
chap 4 Javascript
112 pages
WT Unit-2 Javascript
No ratings yet
WT Unit-2 Javascript
129 pages
JavaScript Tute01
No ratings yet
JavaScript Tute01
33 pages
Chapter 5 - Introduction to Javascript
No ratings yet
Chapter 5 - Introduction to Javascript
15 pages
JAVASCRIPT PPT INTRODUCTION
No ratings yet
JAVASCRIPT PPT INTRODUCTION
27 pages
Javascript Introduction: Javascript Can Change HTML Content
No ratings yet
Javascript Introduction: Javascript Can Change HTML Content
41 pages
WE Lab 8
No ratings yet
WE Lab 8
13 pages
Lecture 5
No ratings yet
Lecture 5
58 pages
Learning Javascript Lab 5: 1-Window - Alert - 2 - Document - Write - 3 - Innerhtml - 4 - Console - Log - Example 1
No ratings yet
Learning Javascript Lab 5: 1-Window - Alert - 2 - Document - Write - 3 - Innerhtml - 4 - Console - Log - Example 1
5 pages
JAVASCRIPT
No ratings yet
JAVASCRIPT
19 pages
self desire
No ratings yet
self desire
2 pages
Unit - 4 (Client Side Scripting With JavaScript)
No ratings yet
Unit - 4 (Client Side Scripting With JavaScript)
124 pages
Java Script
No ratings yet
Java Script
7 pages
practical 4
No ratings yet
practical 4
6 pages
JS1
No ratings yet
JS1
5 pages
Java Script Introduction
No ratings yet
Java Script Introduction
6 pages
JS
No ratings yet
JS
156 pages
Module -V
No ratings yet
Module -V
38 pages
Javascript
No ratings yet
Javascript
145 pages
Javascript Display Examples
No ratings yet
Javascript Display Examples
23 pages
Javascript
No ratings yet
Javascript
109 pages
Java Script
No ratings yet
Java Script
5 pages
Javascript Tutorial: Examples in Each Chapter
No ratings yet
Javascript Tutorial: Examples in Each Chapter
285 pages
Programming .Net 1 and 2
No ratings yet
Programming .Net 1 and 2
6 pages
Java Script
No ratings yet
Java Script
101 pages
Quarter 3 Week 1 .Net2 Module Javascript PDF
No ratings yet
Quarter 3 Week 1 .Net2 Module Javascript PDF
17 pages
Lecture 14 Java Script Part 1
No ratings yet
Lecture 14 Java Script Part 1
23 pages
05_JavaScript_v5 Part-1 (1) (2)
No ratings yet
05_JavaScript_v5 Part-1 (1) (2)
30 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
366 pages
Internet Programming CH-4
No ratings yet
Internet Programming CH-4
24 pages
Javascript
No ratings yet
Javascript
93 pages
Chapter 4 Client-Side Programming - Javascript
No ratings yet
Chapter 4 Client-Side Programming - Javascript
37 pages
Java SCR Pit
No ratings yet
Java SCR Pit
65 pages
Javascript W 3 S
No ratings yet
Javascript W 3 S
459 pages
WD Chapter Four
No ratings yet
WD Chapter Four
11 pages
Lecture 5- Java Script
No ratings yet
Lecture 5- Java Script
92 pages
Javascript Note
No ratings yet
Javascript Note
81 pages
Javascript in HTML
No ratings yet
Javascript in HTML
6 pages
CSS JavaScript
No ratings yet
CSS JavaScript
8 pages
Javascript
No ratings yet
Javascript
131 pages
Unit 2 - DOM wt
No ratings yet
Unit 2 - DOM wt
62 pages
Notes 1061 UNIT-2 Copy
No ratings yet
Notes 1061 UNIT-2 Copy
146 pages
JavaScript Notes
No ratings yet
JavaScript Notes
32 pages
Basic Program Using Javascripit For Practice
No ratings yet
Basic Program Using Javascripit For Practice
10 pages
UNIT 3
No ratings yet
UNIT 3
118 pages
Java Script
No ratings yet
Java Script
32 pages
JavaScript 1
No ratings yet
JavaScript 1
11 pages
JavaScript - Basics
No ratings yet
JavaScript - Basics
85 pages
2-JavaScript How To
No ratings yet
2-JavaScript How To
2 pages
Chapter 4-JavaScript
No ratings yet
Chapter 4-JavaScript
50 pages
Client Side Web Development For Beginners (HTML/CSS/JS)
From Everand
Client Side Web Development For Beginners (HTML/CSS/JS)
Maks Uri
4/5 (1)
Et3491-Embedded Systems and Iot Design Full Notes
No ratings yet
Et3491-Embedded Systems and Iot Design Full Notes
203 pages
CA Clarity PPM Project Management User Guide - Digital Celerity LLC
100% (1)
CA Clarity PPM Project Management User Guide - Digital Celerity LLC
397 pages
C Programming Notes
No ratings yet
C Programming Notes
37 pages
09 E65+Audio+System PDF
No ratings yet
09 E65+Audio+System PDF
17 pages
Block-Diagram-Of-8086
No ratings yet
Block-Diagram-Of-8086
34 pages
C++ Encapsulation
No ratings yet
C++ Encapsulation
11 pages
CDA300 Programming Manual
No ratings yet
CDA300 Programming Manual
76 pages
AMP For Endpoints User Guide
No ratings yet
AMP For Endpoints User Guide
225 pages
Media Dozer II LIC Datasheet
No ratings yet
Media Dozer II LIC Datasheet
2 pages
Compressing Digital Video
No ratings yet
Compressing Digital Video
5 pages
PM 16 Customising Pmill
No ratings yet
PM 16 Customising Pmill
10 pages
Ace Troubleshooting
No ratings yet
Ace Troubleshooting
182 pages
File:Kommunistische Zeitschrift (1847) .PDF: Captions
No ratings yet
File:Kommunistische Zeitschrift (1847) .PDF: Captions
3 pages
10.1007@978 3 030 37436 5
No ratings yet
10.1007@978 3 030 37436 5
423 pages
Software Engineer
No ratings yet
Software Engineer
2 pages
2nd Quarter Exam Tle 6
No ratings yet
2nd Quarter Exam Tle 6
8 pages
Introduction To Object Oriented Programming Past Paper
No ratings yet
Introduction To Object Oriented Programming Past Paper
7 pages
Information Technology-Part B_Unit 1
No ratings yet
Information Technology-Part B_Unit 1
13 pages
A ActualTests 220-701
100% (2)
A ActualTests 220-701
253 pages
Python Cookbook
100% (3)
Python Cookbook
477 pages
CSL101: Introduction To Computers and Programming: Lecture 1
No ratings yet
CSL101: Introduction To Computers and Programming: Lecture 1
79 pages
JDBC Control Tutorial (Apache)
No ratings yet
JDBC Control Tutorial (Apache)
5 pages
Detecting Spyware On Mobile Devices
No ratings yet
Detecting Spyware On Mobile Devices
4 pages
Streaming Media Handbook
No ratings yet
Streaming Media Handbook
31 pages
DP 300 Demo
No ratings yet
DP 300 Demo
13 pages
10
No ratings yet
10
53 pages
Yogesh
No ratings yet
Yogesh
2 pages
Room Alert 32w PDF
No ratings yet
Room Alert 32w PDF
40 pages
Simatic Net: Step by Step: Ethernet Communication Between OPC Server and S7-200 Incl. CP243-1
No ratings yet
Simatic Net: Step by Step: Ethernet Communication Between OPC Server and S7-200 Incl. CP243-1
45 pages