Scribd
Upload
15 views34 pages

How To Javascript Final

Uploaded by

Ray Allen Serdena
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
15 views34 pages

How To Javascript Final

Uploaded by

Ray Allen Serdena
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/ 34

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

You might also like