SFHS Back End Programming WHERE TO/STATEMENTS/OUTPUTS
HOW TO
JAVASCRIPT
By: Ray Allen Serdeña
LEARNING OBJECTIVES
Discover how and where to apply JavaScript in a website
Demonstrate the ability to use statements in a website
Demonstrate the usage of simple JavaScript outputs
GUESS THE TERM
INSTRUCTIONS:
1. READ THE DESCRIPTION IF THERE IS
ONE
2. ANALYZE THE ILLUSTRATIONS
3. IDENTIFY THE TERM
4. CLAIM YOUR CHIP
5. THANK BEYONCE
THIS IS A PROGRAM OR SET OF INSTRUCTION
THAT IS CARRIED OUT OR INTERPRETED BY THE
ANOTHER PROGRAM RATHER THAN THE
COMPUTER PROCCESOR.
IT MAY ALSO REFER TO A WRITTEN TEXT OF A
PLAY, MOVIE, OR BROADCAST.
3 WAYS TO USE JAVASCRIPT
Inline Internal External
<P <SCRIPT
>
CODES are directly Functions are FUNCTIONS are
>
placed inside an
html element
placed inside the
<SCRIPT> tags
placed in a
separate file
<SCRIPT> <html>
<body>
TAG <h2>JavaScript in Body</h2>
IN HTML, JAVASCRIPT CODE IS
INSERTED BETWEEN <p id="demo"></p>
<SCRIPT> AND </SCRIPT>
TAGS. <script>
document.getElementById("demo").innerHTML = "My
First JavaScript";
</script>
</body>
</html>
FUNCTIONS
-
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.
FUNCTIONS
-
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
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
- <head>
<body>
<script>
BODY/HEAD function myFunction()
<h2>Demo JavaScript in{Body</h2>
document.getElementById("demo").innerHTML =
<p id="demo">A
"Paragraph Paragraph</p>
changed.";
}
<button
</script>type="button" onclick="myFunction()">Try
YOU CAN PLACE ANY NUMBER it</button>
</head>
OF SCRIPTS IN AN HTML <body>
DOCUMENT. <script>
<h2>Demo JavaScript in Head</h2>
function myFunction() {
document.getElementById("demo").innerHTML =
Scripts can be placed in the <p id="demo">A Paragraph</p>
"Paragraph changed.";
<body>, or in the <head> <button
} type="button" onclick="myFunction()">Try
section of an HTML page, or in it</button>
</script>
both. </body> </html>
</body>
</html>
JAVASCRIPT
<!DOCTYPE html>
<html>
- <head>
<script>
BODY/HEAD function myFunction() {
document.getElementById("demo").innerHTML =
"Paragraph changed.";
}
</script>
YOU CAN PLACE ANY NUMBER
</head>
OF SCRIPTS IN AN HTML <body>
DOCUMENT. <h2>Demo JavaScript in Head</h2>
Scripts can be placed in the <p id="demo">A Paragraph</p>
<body>, or in the <head> <button type="button" onclick="myFunction()">Try
section of an HTML page, or in it</button>
both.
</body>
</html>
EXTERNAL EXTERNAL SCRIPTS ARE PRACTICAL WHEN THE SAME
JAVASCRIPT 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>
NO FILE PATH WITH FILE URL
PATH
Personal Files Folders Wide Area
Source
EXTERNAL REFERENCE
1. innerHTM
2.document.writ TYPES OF
OUPUT
e
3.window.alert
SAMPLE <html>
CODES <body>
- <h1>My First Web Page</h1>
INNERHTML <p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= 5 + 6;
</script>
</body>
</html>
SAMPLE CODES <!DOCTYPE html>
- <html>
DOCUMENT.WRITE <body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
SAMPLE CODES <html>
- <body>
WINDOW.ALERT
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
SAMPLE CODES <html>
- <body>
WINDOW.ALERT
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
SAMPLE <!DOCTYPE html>
CODES <html>
<body>
-
CONSOLE.LOG <script>
console.log(5 + 6);
</script>
</body>
</html>
SAMPLE <!DOCTYPE html>
CODES <html>
<body>
-
CONSOLE.LOG <script>
console.log(5 + 6);
</script>
</body>
</html>
STATEMENTS
<html> <script>
<body> let x, y, z; // Statement 1
x = 5; // Statement 2
Internal
y = 6; // Statement 3 External
<h2>JavaScript Statements</h2>
z = x + y; // Statement 4
<p>A <b>JavaScript program</b> is a list
<SCRIPT
of <b>statements</b> to be executed by document.getElementById("demo").innerH
a computer.</p> TML =
<p id="demo"></p>
> "The value of z is " + z + ".";
</script> FUNCTIONS are
placed in a
</body>
separate file
</html>
STATEMENTS
JavaScript statements are This statement tells the browser to write
composed of: "Hello Dolly." inside an HTML element
Internal
with id="demo": External
Values, Operators, Expressions,
Keywords, and Comments. document.getElementById("demo")
<SCRIPT .innerHTML = "Hello Dolly.";
Most JavaScript programs contain
many JavaScript statements.
> FUNCTIONS are
placed in a
separate file
WHITE SPACE
let person="Ash";
Internal External
let x=y+z;
<SCRIPT
VS
>
let person = FUNCTIONS are
placed in a
"Ash"; separate file
let x = y + z;
LINE LENGTH AND LINE BREAKS
document.getElementById("demo").innerHTML
="Hello Ash!"; Internal External
VS
<SCRIPT
>
document.getElementById("demo").innerHTML
FUNCTIONS are =
placed in a
"Hello Ash!"; separate file
CODE BLOCKS
<!DOCTYPE html>
<script>
<html>
function MyFunction() {
<body>
document.getElementById("demo1").innerHTML =
<h2>JavaScript Statements</h2>
Internal
"Hello Ash!"; External
document.getElementById("demo2").innerHTML =
"How are you?";
<p>JavaScript code blocks are written between { and
}
}</p>
<SCRIPT
</script>
<button type="button" onclick="myFunction()">Click Me!
</body>
</button>
<p id="demo1"></p>
> </html>
FUNCTIONS are
<p id="demo2"></p> placed in a
separate file
KEYWORDS
A SET OF RESERVED WORDS THAT
CANNOT BE USED AS NAMES OF
FUNCTIONS, LABELS, OR VARIABLES AS External
THEY ARE ALREADY A PART OF THE
SYNTAX OF JAVASCRIPT.
EACH OF THE KEYWORDS HAS ITS OWN
MEANING. THEY ARE GENERALLY USED FUNCTIONS are
placed in a
IN EXECUTING INTERNAL OPERATIONS.
separate file
