tags in the or
[go: up one dir, main page]
sections of an HTML page or an external .js file."> tags in the or sections of an HTML page or an external .js file.">
Scribd
Upload
53 views19 pages

1 Introduction

JavaScript is a lightweight programming language that can be inserted into HTML pages and executed by web browsers to manipulate HTML content and react to user events. It is commonly used to validate user input, change HTML content and styles, and run code when events like button clicks occur by calling JavaScript functions. JavaScript code can be placed in <script> tags in the <head> or <body> sections of an HTML page or an external .js file.

Uploaded by

Jonalyn Padama
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
53 views19 pages

1 Introduction

JavaScript is a lightweight programming language that can be inserted into HTML pages and executed by web browsers to manipulate HTML content and react to user events. It is commonly used to validate user input, change HTML content and styles, and run code when events like button clicks occur by calling JavaScript functions. JavaScript code can be placed in <script> tags in the <head> or <body> sections of an HTML page or an external .js file.

Uploaded by

Jonalyn Padama
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/ 19

Introduction to Javascript

Introduction
• JavaScript is the world’s most popular
programming language. It is the language for
HTML and the web, for servers, PCs, laptops,
tablets, smart phones, and more.
Scripting Language
• A scripting language is a lightweight
programming language.
• JavaScript is programming code that can be
inserted into HTML pages.
• JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
Writing Into HTML Output
• You can only use document.write in the HTML
output. If you use it after the document has
loaded, the whole document will be
overwritten. The following is an example:
document.write(“<h1>This is a heading</h1>”);
document.write(“<p>This is a paragraph</p1>”);
Reacting to Events
• The alert() function is not much used in
JavaScript, but it is often quite handy for trying
out code.
• The onclick event is only one of the many
HTML events available in JavaScript:
<button type=“button”
onclick=“alert(‘Welcome!’)”>Click Me!
</button>
Changing HTML Content
• Using JavaScript to manipulate the content of
HTML elements is a very powerful functionality.
• You will often see
document.getElementById(“some id). This is
defined in the HTML DOM.
• The DOM (Document Object Model) is the
official W3C standard for accessing HTML
elements:
Cont.
x = document.getElementById(“demo”)
x.innerHTML=“Hello JavaScript”;
Changing HTML Styles
• Changing the style of an HTML element, is a
variant of changing an HTML attribute:
x=document.getElementById(“demo”)
x.style.color=“#ff0000”;
Validate Input
• JavaScript is commonly used to validate input:
if isNaN(x) {alert(“Not Numeric”)};
JavaScript and Java
• JavaScript and Java are two completely different
languages, in both concept and design. Java
(invented by Sun) is a more complex programming
language in the same category as C.
• ECMA-262 is the official name of the JavaScript
standard.
• JavaScript was invented by Brendan Eich. It appeared
in Netscape (a no long existing browser) in 1995, and
has been adopted by ECMA (a standard association)
since 1997.
How To
• JavaScripts in HTML must be inserted between
<script> and </script> tags.
• JavaScripts can be put in the <body> and in the
<head> section of an HTML page.
• The old style of declaring the <script> tag is to
include type=“text/javascript”. This is no longer
required. JavaScript is the default scripting
language in all modern browsers and in HTML 5.
Cont.
• In the following example, the JavaScript writes
into the HTML <body> while the page loads:
<!DOCTYPE html>
<html>
<body>
<script>
document.write(“<h1>This is a heading</h1>”)
</script>
Cont.
• In the previous example, JavaScript statements
are executed while the page loads.
• More often, we want to execute code when an
event occurs, like when the user clicks a
button.
• If we put JavaScript code inside a function, we
can call that function when an event occurs.
JavaScript in <head> or <body>
• You can place an unlimited number of scripts
in an HTML document.
• Scripts can be in the <body> or in the <head>
section of HTML, and/or in both.
• It is a common practice to put functions in the
<head> section, or at the bottom of the page.
This way they are all in one place and do not
interfere with page content.
External JavaScripts
• Scripts can also be placed in external files.
External files often contain code to be used by
several different web pages.
• External JavaScript files have the file extension .js.
• To use an external script, point to the .js file in the
“src” attribute of the <script> tag (note that
external scripts cannot contain <script> tags):
<script src=“myScript.js”></script>
JavaScript Output
• JavaScript is typically used to manipulate
HTML elements.
• To access an HTML element from JavaScript,
you can use the document.getElementById(id)
method.
• Use the “id” attribute to identify the HTML
element:
My First JavaScript
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First
JavaScript";
</script>
</body>
</html>
EXAMPLE #2

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{ document.write("Oops! The document disappeared!"); }
</script>
</body>
</html>
EXAMPLE #3
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{ alert("Hello World!"); }
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

You might also like