Week 5 - Webapps

WEB APPLICATIONS DEVELOPMENT
JavaScript
Week 5
WEB APPLICATIONS DEVELOPMENT - CIT
Prayer for today

Ama sa Langit, bigyan kami ngayong araw upang matupad ang aming
mga tungkulin bilang responsable at mabait na mag-aaral.
Bigyan kami ng gabay at pangangalaga sa pagtupad ng aming mga
gawain.
Bigyan mo kami ng tulong sa mga desisyon na aming ginagawa.
Nanalangin kami sa iyo na pagpalain ang aming mga guro para sa
matiyagang paghahatid sa amin araw-araw na mga aralin.
Pagpalain ang aming mga magulang sa patuloy na pagsuporta sa amin.
Maraming salamat, Lord sa lahat ng mga biyayang ibinibigay mo sa
aming lahat. Ikaw ang aming suporta at lakas.
Amen.
2
SYSTEMS PLUS COMPUTER COLLEGE - CALOOCAN
Learning Outcomes
1. Know what Javascript is and its use.
2. Know where to place Javascript in the HTML documents.
3. Discuss the (Document Object Model) DOM Elements
4. Learn the JavaScript conditional statements.
3
What is JavaScript?
JavaScript
- JavaScript is the world’s most popular programming language.
- JavaScript is a scripting language that enables you calculate,
manipulate data on the web pages.
- JavaScript is the programming language of the Web.
- JavaScript developed by NetScape, Inc. is not part of Java. Java is
owned by Suns Microsystems, Inc.
- JavaScript is created by Brendan Eich of Netscape, Inc. in 1995.
5
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.
6
Where to place Javascript?
Using the <script> tag

In HTML, JavaScript code is inserted between <script> and </script>
tags. You can place it inside the <head> or <body> tag.
<script>
document.getElementById(“demo”).innerHTML = “My first JavaScript”
</script>
8
Using External JavaScript

Scripts can also be placed in external files:
// myScript.js
document.getElementById(“demo”).innerHTML = “My first JavaScript”
<script src=”myScript.js”></script>
9
Advantages of using 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.
- Add more several JavaScript files.
10
JavaScript Output
JavaScript Output
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().
12
Cont…
- Using document.write() after an HTML document is loaded, will delete
all existing HTML:
13
JavaScript (Document Object
Model) DOM Elements
The HTML DOM (Document Object Model)
- With the HTML DOM, JavaScript can access and change all the
elements of an HTML document.
15
Basic DOM Methods

- The getElementById method - The most common way to access an
HTML element is to use the id of the element.
- The innerHTML property = The easiest way to get the content of an

element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content
of HTML elements.
16
Changing style of HTML Elements

document.getElementById(‘demo’).style.color = “blue”;
document.getElementById(‘demo’).style.textAlign = “center”;
document.getElementById(‘demo’).style.fontSize = “32px”;
document.getElementById(‘demo’).style.textAlign = “center”;
document.getElementById(‘demo’).style.display = “none”;
17
Using addEventListener() method

- The addEventListener() method attaches an event handler to the
specified element.
document.getElementById(“demo”).addEventListener(“click”, function() {
window.alert(“Hello World”);
});
18
Click event
- The click event activates when the element is clicked.
<button id=”button”>Click Me!</button>
document.getElementById(“button”).addEventListener(“click”, function() {
window.alert(“Hello World”);
});
19
Click event (Alternative)

- The click event activates when the element is clicked.
<button onclick=”alert(“Hello World”)”>Click Me!</button>
20
Change event
- The change event activates when the element is change.
document.getElementById(“select”).addEventListener(“change”, function() {
var value = this.value;
window.alert(“I’ve selected “ + value);
});
21
Key event
- The key event activates when the element is change.
document.getElementById(“input”).addEventListener(“keydown”, function() {
var value = this.value;
window.alert(“I’ve entered ” + value);
});
22
JavaScript Conditional
Statements
Conditional Statements
- Conditional statements are used to perform different actions based on
different conditions.
- Very often when you write code, you want to perform different actions
for different decisions.
24
Cont…
- In JavaScript we have the following conditional statements:
- Use if to specify a block of code to be executed, if condition is true.
- Use else to specify a block of code to be executed, if condition is
false.
- Use else if to specify a block of code to be executed, if the first
condition is false.
25
The if statement
- Use the if statement to specify a block of JavaScript code to be
executed if a condition is true.
Example: Display Minor age’ if the age is less than 18 years old.
if (age < 18) {
message = “Minor age”;
}
26
The else statement

- Use the else statement to specify a block of JavaScript code to be executed if a condition is
false.
Example: If the age less than 18 years old prints a “Minor age” message, otherwise “Legal age”.
if (age < 18) {
message = “Minor age”;
} else {
message = “Legal age”;
}
27
The else if statement

- Use the else if statement to specify a new condition if the first condition is false.
Example: If the age less than 18 years old prints a “Minor age” message, but age greater than 18 years
old prints a “Legal age” message, otherwise “Invalid age”.
if (age < 18) {
message = “Minor Age”;
} else if (age > 18) {
message = “Legal age”;
} else {
message = “Invalid age”;
}
28

Week 5 - Webapps

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Week 5 - Webapps

Uploaded by

Copyright:

Available Formats

WEB APPLICATIONS DEVELOPMENT

Prayer for today

Why Study JavaScript

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.

Using the <script> tag

Using External JavaScript

Advantages of using External JavaScript

The HTML DOM (Document Object Model)

Basic DOM Methods

- The innerHTML property = The easiest way to get the content of an

Changing style of HTML Elements

Using addEventListener() method

<button id=”button”>Click Me!</button>

Click event (Alternative)

<button onclick=”alert(“Hello World”)”>Click Me!</button>

var value = this.value;

window.alert(“I’ve selected “ + value);

var value = this.value;

window.alert(“I’ve entered ” + value);

The else statement

The else if statement

You might also like