Scribd
Upload
23K views

Q2 MODULE2 G11 .NET PROG MangaldanNHS

This document provides an introduction to JavaScript programming and HTML document embedding. It discusses how to insert JavaScript code into an HTML page using <script> tags, and covers JavaScript syntax including variables, data types, comments, and output methods. Exercises are provided to practice declaring variables, writing JavaScript code, and validating JavaScript syntax.

Uploaded by

Jensen Tagudin
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
23K views

Q2 MODULE2 G11 .NET PROG MangaldanNHS

This document provides an introduction to JavaScript programming and HTML document embedding. It discusses how to insert JavaScript code into an HTML page using <script> tags, and covers JavaScript syntax including variables, data types, comments, and output methods. Exercises are provided to practice declaring variables, writing JavaScript code, and validating JavaScript syntax.

Uploaded by

Jensen Tagudin
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/ 8

Grade

11

TVL-ICT
PROGRAMMING .NET TECHNOLOGY
NC III
QUARTER 2 – MODULE 2

Create HTML5 document using


advanced techniques with
JavaScript and CSS3
I. INTRODUCTION
In this lesson you will learn
 how to insert JavaScript into an HTML page.
 how to write JavaScript syntax.
 how to add comment safely on JavaScript area.
 how to declare variables.

II. CONTENT
JavaScript is a lightweight, interpreted programming language. It is designed for
creating network-centric (a depending on the internet) applications. In a nutshell, JavaScript
is a prototype-based scripting language with dynamic typing and first-class function support.
JavaScript borrows most of its syntax from Java, but is also influenced by Awk, Perl, and
Python. JavaScript is case-sensitive and white space-agnostic.

<script> element
The primary method of inserting JavaScript into an HTML page is via the <script> element.
This element was created by Netscape and first implemented in Netscape Navigator 2. It was
later added to the formal HTML specification.
<script>
//JAVASCRIPT CODE
</script>
Hello World using JavaScript

<html>
<body>
<script language = "javascript" type = "text/javascript">

document.write("Hello World!")

</script>
</body>
</html>

Comments
JavaScript allows single line or multiple line comments. The syntax is similar to Java:

// a one line comment


/* this is a longer,
multi-line comment
*/
/* You can't /* nest comments */ SyntaxError */

1
LO 2.2 Declare variables in JavaScript

Variables
A variable is essentially a named value, and as the name implies, the value can change at
any time.
A JavaScript variable name must start with a letter, underscore (_), or dollar sign ($);
subsequent characters can also be digits (0-9). As JavaScript is case sensitive, letters
include the characters A through Z (uppercase) and the characters a through z (lowercase).

var x, y, z; // Declare Variables


x = 5; y = 6; // Assign Values
z = x + y; // Compute Values

All JavaScript variables must be identified with unique names.

Assignment Operator

The equal sign (=) is an "assignment" operator, not an "equal to" operator.

var x;
x = x + 10

Value = undefined or null


JavaScript has two special types, null and undefined. null has only one possible
value (null), and undefined has only one possible value (undefined). Both null and
undefined represent something that doesn’t exist, and the fact that there are two
separate data types has caused no end of confusion, especially among beginners.

var currentTemp; // implicit value of undefined


var targetTemp = null; // target temp null -- "not yet known"
currentTemp = 19.5; // currentTemp now has value
currentTemp = undefined; // currentTemp appears as if it had never
// been initialized; not recommended
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().
 Writing into the browser console, using console.log().
Follow the sample code to display the data in JavaScript.
Using innerHTML
<!DOCTYPE html>
<html>
<body>

2
<h1> Web Page</h1>
<p> Paragraph One</p>
<p id="text"></p>
<script>
document.getElementById("text").innerHTML = 5 + 6;
</script>

</body>
</html>

To access an HTML element, JavaScript can use the document.getElementById(id)


method. The id attribute defines the HTML element. The innerHTML property defines the
HTML content.

Using document.write()
<!DOCTYPE html>
<html>
<body>
<h1>Test Web Page</h1>
<p>Paragraph One.</p>

<script>
document.write(4 + 6);
</script>
</body>
</html>

Using Alert()

<!DOCTYPE html>
<html>
<body>
<h1>Test Web Page</h1>
<p>Paragraph One.</p>
<script>
alert(“Hello World”); //display hello world message
alert(4 + 6); // display the sum.

</script>
</body>
</html>

III. EXERCISES
A.
Direction: Complete the source code to display “My First JavaScript
Program” into a pop-window using alert() method.

<html>
<head>
<title> Basic JavaScript </title>
<script type=”__________”>

3
______________

</______________>
</head>
<___________>

</____________>
</html>

B. JavaScript ProgSample

Write the syntax of the following pseudo code.

a) Declare variable x.
b) Initialize x to five.
c) Declare variable y.
d) Initialize y to ten.
e) Display the sum of x and y.

IV. SUMMATIVE

Write all your answers in the ANSWER SHEET attached with this module

A. Direction: Write “VALID” if the syntax is correct, otherwise write “INVALID” if it is


incorrect.

1. alert (“hello _______________________


2. <script> <script> _______________________
3. alert “Hello SHS” _______________________
4. alert “Hello shs _______________________
5. var 1_ _______________________
6. var 0.525 _______________________
7. var x; _______________________
8. var y’ _______________________
9. alert(“hello shs”); _______________________
10. alert (x); _______________________
B.Write TRUE if the statement is correct, otherwise write FALSE if it is incorrect.
1. A JavaScript variable name must start with a number.
2. The variable value can be change at any time.
3. Null and undefined represent something that doesn’t exist in programming.
4. JavaScript is case sensitive.
5. JavaScript syntax can be similar to HTML code.
PERFORMANCE TASK
A. Direction: Write the JavaScript code of the following:

2. What tag pair is used to embed JavaScript statements directly to HTML?


______________________________________

4
3. Write the syntax of JavaScript single line comment “My first JavaScript”.
____________________________________________
4. Write the syntax to:
a. Declare a variable “name”. _____________________
b. Declare a variable “section”. ______________________
c. Declare a variable “gender”_______________________
d. Assign the value “Melo” to variable “name”. __________________
e. Assign the value “ICT1” to variable “section”. ____________________
f. Display text “Hello Senior High” using document.write().
_______________________
g. Display text “Web programming” in the element <div id= “msg”> using
innerhtml. _________________________
h. Display alert box with message “Hello SHS!”. ________________________
B. Displaying a data in JavaScript can be done in different ways using pre-defined
method. If you are going to build a website, what method should you use to warn
the user to input data? Select two methods below and explain your answer.
a. alert()
b. document.write
c. console.log
d. document.getElementBy(Id)

5
NAME: ___________________________________ SCORE: ________
SUBJECT TEACHER: _______________________ GRADE/SECTION: ________

SUMMATIVE TEST ANSWER SHEET

A.

1. ______________________
2. ______________________
3. ______________________
a. ___________
b. ___________
c. ___________
d. ___________
e. ___________
f. ___________
g. ___________
h. ___________

B.

6
ANSWER KEY
EXERCISES
A.

<html>
<head>
<title> Basic JavaScript </title>
<script type=”text/javascript”>

alert(“My First JavaScript Program”)


</script>
</head>
<body>
</body>
</html>

B.

a. var x;
b. x=5;
c. var y;
d. y=10;

Either of the ff:


e. alert(x+y);
document.write(x+y);
console.log(x+y);

References:

Vid Antani: Mastering JavaScript


Ethan Brown: Learning JavaScript Third Edition
W3Schools Online Web Tutorials. Retrieved from
https://www.w3schools.com/js/js_variables.asp

You might also like