Scribd
Upload
26 views23 pages

Lecture 14 Java Script Part 1

Uploaded by

kananiparth04
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
26 views23 pages

Lecture 14 Java Script Part 1

Uploaded by

kananiparth04
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 23

Java Script

Module 2
Content
• Introduction
• What can we do?
• Where to write?
• Generate output
Introduction
• JavaScript is the world's most popular programming language.
• JavaScript is the programming language of the Web.
• 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
What JavaScript can do?Change HTML Style (CSS)
<!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>
What JavaScript can do? Change HTML Attribute Values
<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>


<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of 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>
What JavaScript Change HTML Style (CSS)
can do?
<!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>
What JavaScript Hide HTML Elements
can do?
<!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>
What JavaScript Show HTML Elements
can do?
<!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>
Where to write JavaScript code?

<!DOCTYPE html>
<html> The <script> Tag
<body>

<h2>JavaScript in Body</h2>
• In HTML, JavaScript code is inserted between

<p id="demo"></p> <script> and </script> tags.


<script>
document.getElementById("demo").innerHTML = "My First • We can place any number of scripts in an HTML
JavaScript";
</script> document.
</body>
</html> • Scripts can be placed in the <body>, or in the

<head> section of an HTML page, or in both.


Where to write JavaScript code?
<!DOCTYPE html>
<html>
<head>

<script>
A JavaScript function
function myFunction() {
• It is a block of JavaScript code, that can be
document.getElementById("demo").innerHTML = "Paragraph
changed."; executed when "called" for.
}
</script> • Example: a function can be called when
</head> an event occurs, like when the user
<body>
clicks a button.
<h2>JavaScript in Head</h2>

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


Script is written in the head
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
Where to write JavaScript code?
A JavaScript function
<!DOCTYPE html>
<html> • It is a block of JavaScript code, that can be
<body>
executed when "called" for.
<h2>JavaScript in Body</h2>
• Example: a function can be called when
<p id="demo">A Paragraph.</p>
an event occurs, like when the user clicks
<button type="button" onclick="myFunction()">Try it</button>
a button.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed."; Script is written in the body
}
</script>

</body>
</html>
Where to write JavaScript code? External JavaScript

<!DOCTYPE html> • Scripts can also be placed in external files


<html>
<body> • External scripts are practical when the same code

<h2>External JavaScript</h2> is used in many different web pages.


<p id="demo">A Paragraph.</p>
• JavaScript files have the file extension .js.
<button type="button" onclick="myFunction()">Try
it</button> • To use an external script, put the name of the

<p>This example links to "myScript.js".</p> script file in the src (source) attribute of a <script>
<p>(myFunction is stored in "myScript.js")</p>
tag
<script src="myScript.js"></script>

</body> • You can place an external script reference in


</html>
<head> or <body> as you like.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph • The script will behave as if it was located exactly
changed.";
} where the <script> tag is located.
myScript.js
• External scripts cannot contain <script> tags.
Where to write JavaScript code?
<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

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


it</button>

<p>This example links to "myScript.js".</p>


<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}

myScript.js
Where to write JavaScript code?

External JavaScript
Placing scripts in external files has some advantages:

• It separates HTML and code

• It makes HTML and JavaScript easier to read and maintain

• Cached JavaScript files can speed up page loads

To add several script files to one page - use several script tags:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Where to write JavaScript code?

External References

An external script can be referenced in 3 different ways:

• With a full URL (a full web address)

• Example:
<script src="https://www.w3schools.com/js/myScript.js"></scrip
t>

• With a file path (like /js/)

• Example: <script src="/js/myScript.js"></script>

• Without any path

• Example: <script src="myScript.js"></script>


JavaScript Output

JavaScript can "display" data in different ways:

1. Writing into an HTML element, using innerHTML

2. Writing into the HTML output using document.write()

3. Writing into an alert box, using window.alert()

4. Writing into the browser console, using console.log()


JavaScript Output
<!DOCTYPE html>
<html>
<body>
innerHTML
<h1>My First Web Page</h1>
<p>My First Paragraph</p> • To access an HTML element, JavaScript can
<p id="demo"></p>
use the document.getElementById(id)
<script>
document.getElementById("demo").innerHTML = 5 + 6; method.
</script>

</body> • The id attribute defines the HTML element.


</html>
The innerHTML property defines the HTML

content
JavaScript Output
<!DOCTYPE html>
<html>
Document.write()
<body>

<h1>My First Web Page</h1> • For testing purposes, it is convenient to use


<p>My first paragraph.</p>
document.write()
<script>
document.write(5 + 6);
</script> • Using document.write() after an HTML document

</body>
is loaded, will delete all existing HTML
</html>
JavaScript Output Document.write()
<!DOCTYPE html>
<html> • For testing purposes, it is convenient to
<body>
use document.write()
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
• Using document.write() after an HTML
<button type="button" onclick="document.write(5 + 6)">Try
it</button>
document is loaded, will delete all
</body>
</html> existing HTML
windows.alert()
JavaScript Output • We can use an alert box to display data
<!DOCTYPE html> • We can skip the window keyword.
<html>
<body> • In JavaScript, the window object is the global
scope object,
<h1>My First Web Page</h1>
<p>My first paragraph.</p> • It means that variables, properties, and methods

<script> by default belong to the window object.


window.alert(5 + 6);
• This also means that specifying the window
</script>
keyword is optional
</body>
</html>
JavaScript Output
<!DOCTYPE html>
<html>
Console.log()
<body>
• For debugging purposes, we can call the
<h2>Activate Debugging</h2>
console.log() method in the browser to display
<p>F12 on your keyboard will activate
data
debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>
JavaScript Output
<!DOCTYPE html> windows.print()
<html>
<body> • JavaScript does not have any print object or
print methods.
<h2>The window.print() Method</h2>
• You cannot access output devices from
<p>Click the button to print the current page.</p>
JavaScript.
<button onclick="window.print()">Print this
• The only exception is that you can call the
page</button>
window.print() method in the browser to print
</body>
</html> the content of the current window.
JavaScript Output
<!DOCTYPE html>
<html> windows.print()
<body> • JavaScript does not have any print object or
<h2>The window.print() Method</h2> print methods.

<p>Click the button to print the current page.</p> • You cannot access output devices from
JavaScript.
<button onclick="window.print()">Print this
page</button> • The only exception is that you can call the

</body> window.print() method in the browser to print


</html>
the content of the current window.

You might also like