Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Chapter 5 - Introduction to Javascript

The document provides an introduction to JavaScript, detailing its capabilities such as manipulating HTML content, changing styles, and validating form data. It explains how to include JavaScript in HTML using <script> tags, both inline and as external files, and outlines various methods for displaying output. Additionally, it covers debugging techniques using console.log and other display methods like alert and document.write.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Chapter 5 - Introduction to Javascript

The document provides an introduction to JavaScript, detailing its capabilities such as manipulating HTML content, changing styles, and validating form data. It explains how to include JavaScript in HTML using <script> tags, both inline and as external files, and outlines various methods for displaying output. Additionally, it covers debugging techniques using console.log and other display methods like alert and document.write.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

WD 101: Web

Development &
Application

Introduction to JavaScript
JavaScript is the scripting language of the Web.
What JavaScript do?
JavaScript Can Change HTML Content:
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById('demo').innerHTML = 'Hello JavaScript’;

JavaScript Can Change HTML Attribute Values

<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
turn on the light turn off the light onclick="document.getElementById('myImage').src='pic_bulboff.gif’”>
Turn off the light
</button>
What JavaScript can do?
JavaScript Can Change HTML Styles (CSS)
document.getElementById("demo").style.fontSize = "35px";

JavaScript Can Hide or Show HTML Elements


document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";

JavaScript can be used to validate form data before it is submitted to a server.

JavaScript can be used to detect the visitor’s browser. A JavaScript script


can be used to detect the visitor’s browser, and depending on the browser, load
another page specifically designed for that browser.

JavaScript can be used to create cookies. A JavaScript script can be used to


store and retrieve information on the visitor’s computer.
JavaScript Where to?
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.

JavaScript Functions and Events


A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.
For example: <button onclick="myFunction()">Try me!<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 Where to?
JavaScript in <head>

<!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> Try it
</body>
</html>

RESET
JavaScript Where to?
JavaScript in <body>

<!DOCTYPE html>
<html>
<body> Try it
<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>

RESET
JavaScript Where to?
JavaScript in <body>

<!DOCTYPE html>
<html>
<body> Try it
<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>

RESET
JavaScript Where to?
External JavaScript

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:

<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.
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().
JavaScript Output
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:

<!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>
JavaScript Output
Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<body> <body>
<h1>My First Web Page</h1> <h1>My First Web Page</h1>
<p>My first paragraph.</p> <p>My first paragraph.</p>
<script> <button type="button" onclick="document.write(5 + 6)">Try
document.write(5 + 6); it</button>
</script> </body>
</body> </html>
</html>

Try it
RESET
JavaScript Output
Using window.alert()

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:

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1> OK
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
//can use alert(5 + 6) without window.
</script>
</body>
</html>

RESET
JavaScript Output
Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display
data.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
JavaScript Output
JavaScript Print

For debugging purposes, you can call the console.log() method in the browser to display
data.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

You might also like