[go: up one dir, main page]
Scribd
Upload
86 views27 pages

Javascript PPT Introduction

JavaScript is the most popular programming language for web development, essential for defining content (HTML), layout (CSS), and behavior (JavaScript) of web pages. It is easy to learn, free to use, and already available in web browsers without the need for downloads. The document provides examples of how JavaScript can manipulate HTML content, styles, and attributes, as well as how to use functions, events, and external scripts.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views27 pages

Javascript PPT Introduction

JavaScript is the most popular programming language for web development, essential for defining content (HTML), layout (CSS), and behavior (JavaScript) of web pages. It is easy to learn, free to use, and already available in web browsers without the need for downloads. The document provides examples of how JavaScript can manipulate HTML content, styles, and attributes, as well as how to use functions, events, and external scripts.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

JavaScript

 JavaScript is the world's most popular programming language.


 JavaScript is the programming language of the Web.
 JavaScript is easy to learn.
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
Commonly Asked Questions
 How do I get JavaScript?
You don't have to get or download JavaScript
 Where can I download JavaScript?
JavaScript is already running in your browser on your computer, on your
tablet, and on your smart-phone.

 Is JavaScript Free?
JavaScript is free to use for everyone.
1. 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>
JavaScript Can 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='https://www.pngitem.com/pimgs/m/190-1908805_transparent-
flowers-clipart-black-and-white-flower-black.png'">Black and white Image</button>

 <img src="https://flyclipart.com/thumb2/pink-rose-clipart-black-white-770903.png" style="width:100px" id="myImage">

 <button onclick="document.getElementById('myImage').src='https://flyclipart.com/thumb2/pink-rose-clipart-black-white-
770903.png'">COlor IMage</button>

 </body>
 </html>
JavaScript Can Change HTML Styles (CSS)
 Changing the style of an HTML element, is a variant of changing an HTML
attribute:

<!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>
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:

<!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>
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:

<!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>
JavaScript Where To
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>
 In this example, a JavaScript function is placed in the <head> section of
an HTML page.
 The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>

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


<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

NOTE:Placing scripts at the bottom of the <body> element improves the display speed,
because script interpretation slows down the display.
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScript
 Scripts can also be placed in external files:
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
 External scripts are practical when the same code is used in many
different web pages.
 JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag:
Example
<script src="myScript.js"></script>

 You can place an external script reference in <head> or <body> as you like.
 The script will behave as if it was located exactly where the <script> tag is located.

External scripts cannot contain <script> tags.

External JavaScript Advantages:


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:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
JavaScript Output
 JavaScript Display Possibilities
JavaScript can "display" data in different ways:

•Writing into an HTML element, using innerHTML.


•Writing into the HTML output using document.write().
•Writing into an alert box, using window.alert().
•Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Changing the innerHTML property of an HTML element is a common way to display data
in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write()

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
Using document.write() after an HTML document is loaded, will delete all existing HTML:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>


<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

The document.write() method should only be used for testing.


Using window.alert()
You can use an alert box to display data:
Example:
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
JavaScript Print
 JavaScript does not have any print object or print methods.
 You cannot access output devices from JavaScript.
 The only exception is that you can call the window.print()
method in the browser to print the content of the current window.
Example

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>
JavaScript Statements
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>
<p id="demo"></p>
<script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
</html>
JavaScript Values

 The JavaScript syntax defines two types of values:


Fixed values
Variable values
 Fixed values are called Literals.
 Variable values are called Variables.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

<p id="demo"></p>
<p>Strings can be written with double or single quotes.</p>

<p id="demo1"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
document.getElementById("demo1").innerHTML = 'John Doe';
</script>

</body>
</html>
JavaScript Variables

You might also like