Scribd
Upload
6 views8 pages

LAS Q2 Week 1

This document is a learning activity sheet for a Computer Programming class focusing on JavaScript. It covers the basics of JavaScript, including its purpose, how to embed it in HTML, variable declaration, and the differences between var, let, and const. Additionally, it includes examples, applications, and quizzes to reinforce understanding of the concepts presented.

Uploaded by

kersheyana
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
6 views8 pages

LAS Q2 Week 1

This document is a learning activity sheet for a Computer Programming class focusing on JavaScript. It covers the basics of JavaScript, including its purpose, how to embed it in HTML, variable declaration, and the differences between var, let, and const. Additionally, it includes examples, applications, and quizzes to reinforce understanding of the concepts presented.

Uploaded by

kersheyana
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

Department of Education

Region VIII
Division of Eastern Samar
GUIUAN NATIONAL HIGH SCHOOL
Guiuan, Eastern Samar

COMPUTER PROGRAMMING

Name of Learner: __________


Grade Level: ______________
Section: __________________
Date: ____________________

LEARNING ACTIVITY SHEET


(Quarter 2 - Week 2)
JAVASCRIPT Programming

INTRODUCTION

What is Javascript?

❖ Basically, Javascript is the programming language of the web


❖ It adds functionality allowing your webpage to have additional
functions aside from just being a static HTML that does nothing
❖ Used for web development, web applications, game development and
lots more
❖ Javascript can change both HTML and CSS
❖ Can calculate, manipulate and validate data

BRIEF DISCUSSION OF THE LESSON

KEY CONCEPT

Javascript allows you to implement dynamic features on webpages that cannot be


done with HTML and CSS only.

This is what a simple javascript looks like:

<!DOCTYPE html>
<html>
<body>
<h2>My first Javascript Code</h2>
<button onclick=”document.getElementById(“demo”).innerHTML =
Date()”>Click me to display the Date and Time</button>
1
<p id=”demo”></p>

</body>
</html>

The highlighted text is a simple example of a javascipt code embedded inside a


HTML element. What this does is just to dynamically insert the current date and
time specified in your device to your HTML page Try to code this to see the result.

How can we use javascript in our HTML file? Where can we place/insert our
javascript code?

As shown above, one way to use javascript is to embed the javascript directly on
the HTML element. But that will only work on the specific element that you
embedded the javascript in. Another way to use javascript is to place the javascript
in the <head> tag, embed it for your entire HTML page. We insert our javascript
between the <script> and </script> tags.

Example:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById(“demo”).innerHTML = Date();
}
</script>
</head>
<body>
<h2>My first Javascript Code</h2>
<button onclick=”myFunction()”>Click me to display the Date and
Time</button>

<p id=”demo”></p>

</body>
</html>
Another way is to have an external file that contains your javascript.

2
Example:

This is your index.html

<!DOCTYPE html>
<html>
<head>
<script src=”myScript.js”>
</script>
</head>
<body>
<h2>My first Javascript Code</h2>
<button onclick=”myFunction()”>Click me to display the Date and
Time</button>

<p id=”demo”></p>

</body>
</html>

This is your myScript.js

function myFunction(){
document.getElementById(“demo”).innerHTML = Date();
}

In the example above, when you click the button, it will call “myFunction()” which
is found in an external file named “myScript.js”. Make sure that if you ever use an
external javascript file, you must always write the appropriate file name in your
HTML.

Now we know how and where to place your javascript in your HTML. Now, we
go to the essentials in Javascript Programming.

What programs can we use to create a Javascript program?

We can make use of scripting softwares like your built-in notepad in your laptop
or we can download some other scripting program from the internet like
notepad++, Microsoft visual studio code or other software capable of creating a

3
Javascript program. You cannot use Microsoft word since it doesn’t allow you to
create a separate file aside from the default .doc or .docs format.

What are variables in Javascript and why is it important?

❖ Basically, a variable is a container that holds values assigned to it that the


computer can use for processing.
❖ Javascript can’t automatically make use of user inputs in the HTML
elements. It first stores those inputs in different variables. When inputs are
stored, that’s the time that our Javascript can access those values/inputs to be
analyzed/processed into information in the form of outputs that the user can
understand.

How do we declare a variable in Javascript?

❖ In the older versions of Javascript, there was only one way to declare a
variable and that is using the var keyword.
❖ In the current version of Javascript that we are using, they added the “let”
and “const” keywords.

Example:
var person; let person; const person;
var pet; let pet; const pet;
var object; let object; const object;

In here, we declare three variables each using the var keyword, let keyword and
const keyword. The two parts of the variable declaration is the declaration
keyword, which in this case we use the var, let and const, and the second part is
the variable name, which in this case we use person, pet and object.

Note: You don’t need to end each line with a semi-colon. Just make sure that if it’s
the end of that particular line of code, you won’t place anything after that in the
same line. If you do decide to use semi-colon, it doesn’t matter if you place
anything after the semi-colon symbol.

What is the difference between the var, let and const?

1. Var is function-scoped, let and const are block-scoped.


Example: Demonstrate a function-scoped variable.
Let’s create a function and name it as mySpace.
4
function mySpace(){
if(true){
var person = “Max Kevin”;
}
console.log(person);
}

In this example, we created a function and we named it mySpace. Everything that


is found inside the curly brace of the function is the content of that function. Now,
we also declared an IF statement inside and declared a variable named person and
assigned a value “Max Kevin” as its value and placed that inside a block-statement
which is the IF statement. Since we declared “person” using the var keyword, that
makes “person” a function-scoped variable, meaning that we can access that
variable anywhere inside the function mySpace().

Example: Demonstrate a block-scoped variable.


Let’s create a function and name it as mySpace.

function mySpace(){
if(true){
let person = “Max Kevin”;
} Tried to access the value stored inside the
console.log(person); “person” variable outside the block
statement that results in the Javascript
}
code to display an error message.

In this example, we declared the “person” using the let keyword. This makes the
variable “person” a block-scoped variable. Meaning that the variable “person” can
only be accessed inside the block statement which is inside the IF statement. Notice
also that we try to access the block-scoped variable “person” outside the block
statement. This example will result in an error message. We can correct this
Javascript code if we move the “console.log(person)” inside the IF statement. The
“console.log()” is used to display the output/value stored inside a variable.

What is a function in Javascript?

A JavaScript function is a block of code designed to perform a particular task


and that block of codes are set on standby. A JavaScript function is executed when
"something" invokes it (calls it).

5
What are the parts of a function and how can we execute a function in
Javascript?

In the example above, it was already shown how to create a function. The three
parts of the function is the function declaration and the function name and the
content of the function.

function mySpace(){
function name

function declaration

Content (anything in
} between the opening
and closing curly braces

Now, we need to execute that function. We can do that by invoking or calling the
function.

function mySpace(){
if(true){
let person = “Max Kevin”;
}
console.log(person);
}
Content (anything in
mySpace(); between the opening
and closing curly braces

2. Var can be redeclared, let and const can only be declared once.

Example: Redeclaration of the variable “person”

var person = “Missy”;


console.log(person);
var person = “Molly”;
console.log(person);

6
In this example, we can see that the variable person has been declared twice, only
with different values stored inside. We can only do this since we are using the
“var” keyword. This will just update/change the value stored inside the variable
person from “Missy” to “Molly”. Still, this javascript will display two output,
“Missy” and “Molly” since we placed console.log(person) after each variable
declaration. If you use let instead of var, it will display an error message.

3. var and let can have its values changed/update, const cannot.

In the example above, it is already shown how to update/change values if the


variable was declared using “var” or “let”. Now, let’s try to use const.

Example:
const person = “Missy”;
person = “Molly”;
console.log(person);

In this example, the first line declares a variable and assigning “Missy” as its
constant value. In the second line, we try to change the value stored inside the
variable person with the value of “Molly”. This line will cause an error because
variables declared using const can’t have its values changed, as the name implies.

Note: You can assign values to a variable using the equal (“=”) operator as shown
in the previous examples.

Application:

Quiz 1

1. Declare a variable “school” and assign “Guiuan National High School” as its
value.
2. Declare a variable “age” and assign your age as the value.
3. Declare a variable “name” and assign “Leah” as its value.
4. Declare a variable “event” using const and assign “Christmas” as its value.
5. Declare a variable “pet” using let and assign “dog” as its value.

7
Output Tracing

Trace the code and determine its output. Determine if the code is correct or will it
cause an error. If there is an error, determine what part is wrong and why.(5 pts.
each)

1. function myNum(){
let primeNum = 7;
let evenNum = 6;
let primeNum = 5;

console.log(primeNum);
console.log(evenNum);
}
myNumber;

2.function mySpace(){
if(true){
let hobby = “Playing Sports”;
}
console.log(hobby);
}
mySpace();

3. function calculateNum(){
let firstNum = 7;
let secondNum = 6;
const thirdNum = 5;

console.log(firstNum+secondNum-thirdNum);
}
calculateNum();

You might also like