Scribd
Upload
31 views

Intro To Javascript 1

The document provides an introduction to JavaScript, explaining that it is one of three core languages for web development alongside HTML and CSS. It describes JavaScript as a full-featured programming language that runs in the browser and allows dynamic modification of HTML pages, reaction to user input, and validation of user input without communicating with the server. The document also discusses where scripts can be placed in an HTML document, using external JavaScript files, and how the Document Object Model (DOM) represents an HTML document as an object that can be manipulated with JavaScript.

Uploaded by

Kevin Chikwama
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
31 views

Intro To Javascript 1

The document provides an introduction to JavaScript, explaining that it is one of three core languages for web development alongside HTML and CSS. It describes JavaScript as a full-featured programming language that runs in the browser and allows dynamic modification of HTML pages, reaction to user input, and validation of user input without communicating with the server. The document also discusses where scripts can be placed in an HTML document, using external JavaScript files, and how the Document Object Model (DOM) represents an HTML document as an object that can be manipulated with JavaScript.

Uploaded by

Kevin Chikwama
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/ 22

Introduction to JavaScript

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 and design of web pages
3. JavaScript to program the behavior of web pages
What is JavaScript?
• JavaScript is a full featured programming
language for use in HTML pages
• JavaScript has nothing to do with Java
• JavaScript programs are run by an interpreter
built into the user's web browser (not on the
server)
• JavaScript user interaction does not require
any communication with the server
• JavaScript is a programming language that
supports event-driven programming
– Mouse click
– Mouse hover etc.

• JavaScript is case-sensitive?
What can JavaScript Do?
– JavaScript can dynamically modify an HTML page
– JavaScript can react to user input
– JavaScript can validate user input
Pros and Cons of JavaScript
• Pros:
– Allows more dynamic HTML pages, even
complete web applications

• Cons:
– Requires a JavaScript-enabled browser
– Requires a client who trusts the server enough
to run the code the server provides
Using JavaScript in your HTML
• Javascript like css can be incorporated to
HTML in 3 different ways
1. Inline
2. Internally
3. Externally
Using JavaScript in your HTML
• In HTML, JavaScript code must be inserted
between the <script> and </script> tag
Where to Put your Scripts
• You can have any number of scripts
•
• Scripts can be placed in the HEAD or in the BODY
– In the HEAD, scripts are run before the page is displayed
– In the BODY, scripts are run as the page is displayed

• In the HEAD is the right place to define functions


and variables that are used by scripts within the
BODY
Where to Put your Scripts (2)
JavaScript in <head> Example

<!DOCTYPE html>
<html><head>
<script>
function myFunction( ) {
document.getElementById(“para1").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id=“para1">A Paragraph</p>
<button type="button" onclick="myFunction( )">Try it</button>
</body>
</html>
JavaScript in <body> Example

<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="para1">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction( ) {
document.getElementById("para1").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
• NB: Placing scripts at the bottom of the
<body> element improves the display speed,
because script compilation slows down the
display.
External Scripts
• Scripts can also be loaded from an external file.
• This is useful if you have a complicated script or
set of subroutines that are used in several different
documents
• 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:
External Scripts Example
• 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.
• <script src="myScript.js"></script>
• <script src="myScript1.js"></script>
<script src="myScript2.js"></script>
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:
What can JavaScript Do?
– JavaScript can dynamically modify an HTML page
– JavaScript can react to user input
– JavaScript can validate user input
– JavaScript can be used to create cookies (yum!)
– JavaScript is a full-featured programming lang.
– JavaScript user interaction does not require any
communication with the server
DOM
• Every web page resides inside a browser window which can be
considered as an object.
• A Document object represents the HTML document that is
displayed in that window.
• The Document object has various properties that refer to other
objects which allow access to and modification of document
content.
• The way a document content is accessed and modified is called
the Document Object Model, or DOM.
• This breaks down the parts of an HTML document into discrete
objects, each with its own properties and methods and each
subject to JavaScript’s control.
The Document Object Model
• JavaScript separates objects, properties, and methods by
using a period (one good reason why + is the string
concatenation operator in JavaScript, rather than the period).
• For example, let’s consider a business card as an object we’ll
call card. This object contains properties such as a name,
address, phone number, and so on.
• In the syntax of JavaScript, these properties would look like
this:
• card.name
• card.phone
• card.address
The Document Object Model
• Its methods are functions that retrieve, change,
and otherwise act on the properties.
• For instance, to invoke a method that displays
the properties of object card, you might use
syntax such as this:
• card.display()
• Within JavaScript, there is a hierarchy of parent
and child objects, which is what is known as the
Document Object Model
Document Methods in W3C DOM
• getElementById( id) returns the Element of this
document that has the specified value for its id
attribute, or null if no such Element exists in the
document. Ex: document.getElementById( id)
• getElementsByName( name) returns an array of
nodes of all elements in the document that have a
specified value for their name attribute. If no such
elements arefound, returns a zero-length array.
• Ex: document.getElementsByName( name)
document.write
• The document.write function writes a value or
expression at the current browser location, and
is therefore the perfect choice for quickly
displaying results, because it keeps all the
examples short and sweet, by placing the
output right there in the browser next to the
web content and code.

You might also like