Scribd
Upload
10 views

ICT-008-HCI-Week-11

The document provides an overview of JavaScript, highlighting its popularity, ease of learning, and its role in web development. It explains how to manipulate HTML content and styles using JavaScript, as well as the placement of JavaScript code within HTML files, including internal and external scripts. Additionally, it covers JavaScript syntax, variable declaration, and the use of comments to enhance code readability.

Uploaded by

girondonrick
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

ICT-008-HCI-Week-11

The document provides an overview of JavaScript, highlighting its popularity, ease of learning, and its role in web development. It explains how to manipulate HTML content and styles using JavaScript, as well as the placement of JavaScript code within HTML files, including internal and external scripts. Additionally, it covers JavaScript syntax, variable declaration, and the use of comments to enhance code readability.

Uploaded by

girondonrick
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

NATIONAL COLLEGE OF

School of
SCIENCE & TECHNOLOGY
Nation Builders COMPUTER STUDIES DEPARTMENT

HUMAN COMPUTER
ICT 008 INTERACTION

WEEK 11
Prepared by: ISABELLA G. LINTAG
JAVASCRIPT
JAVASCRIPT
• JavaScript is the world's most popular programming language.
• JavaScript is the programming language of the Web.
• JavaScript is easy to learn.

JavaScript Can Change HTML Content


One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the
element content (innerHTML) to "Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello JavaScript";
JAVASCRIPT
JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

document.getElementById("demo").style.fontSize = "35px";
WHERE CAN I PLACE JAVASCRIPT IN HTML
FILE?
The <script> tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Note: Old JavaScript examples may use a type attribute: <script type="text/javascript">.

The type attribute is not required. JavaScript is the default scripting language in HTML.
INTERNAL JAVASCRIPT
You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.
JAVASCRIPT IN <head>
A JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>


<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
JAVASCRIPT IN <body>
A JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

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

</body>
</html>
EXTERNAL JAVASCRIPT
Scripts can also be placed in external files:
function myFunction() {
document.getElementById("demo").innerHTML =
myScript.js
"Paragraph changed.";
}

• 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:
<script src="myScript.js"></script>

• 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.
Note: External scripts cannot contain <script> tags.
ADVANTAGES OF 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

To add several script files to one page - use several script tags:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
EXTERNAL JAVASCRIPT REFERENCES
An external script can be referenced in 3 different ways:

• With a full URL (a full web address)


• With a file path (like /js/)
• Without any path

This example uses a full URL to link to myScript.js:


<script src="https://www.w3schools.com/js/myScript.js"></script>
<script src="/js/myScript.js"></script>
<script src="myScript.js"></script>
JAVASCRIPT SYNTAX
JAVASCRIPT SYNTAX
JavaScript syntax is the set of rules, how JavaScript programs are constructed:

// How to create variables:


var x;
let y;

// How to use variables:


x = 5;
y = 6;
let z = x + y;
JAVASCRIPT VALUES
The JavaScript syntax defines two types of values:

• Fixed values
• Variable values

Fixed values are called Literals.

Variable values are called Variables.


JAVASCRIPT LITERALS
The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:


10.50

1001
JAVASCRIPT LITERALS
2. Strings are text, written within double or single quotes:
"John Doe"

'John Doe'
JAVASCRIPT STATEMENTS
JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":
document.getElementById("demo").innerHTML = "Hello Dolly.";

Most JavaScript programs contain many JavaScript statements.

The statements are executed, one by one, in the same order as they are written.
JAVASCRIPT COMMENTS
JavaScript comments can be used to explain JavaScript code, and to make
it more readable.

JavaScript comments can also be used to prevent execution, when testing


alternative code.
SINGLE LINE COMMENTS
• Single line comments start with //.
• Any text between // and the end of the line will be ignored by JavaScript
(will not be executed).
• This example uses a single-line comment before each code line:
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
MULTI-LINE COMMENTS
• Multi-line comments start with /* and end with */.
• Any text between /* and */ will be ignored by JavaScript.
• This example uses a multi-line comment (a comment block) to explain the code:

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
var, let, and const KEYWORD
Example using var Example using let Example using const Example of Mixed
var x = 5; let x = 5; const x = 5; var price1 = 5;
var y = 6; let y = 6; const y = 6; const price2 = 6;
var z = x + y; let z = x + y; const z = x + y; let total = price1 + price2;

The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.
The const keyword is a declaration for a constant value.
VARIABLES
Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:


• Automatically
• Using var
• Using let
• Using const
NATIONAL COLLEGE OF
School of
SCIENCE & TECHNOLOGY
Nation Builders COMPUTER STUDIES DEPARTMENT

THANK YOU!

You might also like