LAS Q2 Week 1
LAS Q2 Week 1
Region VIII
Division of Eastern Samar
GUIUAN NATIONAL HIGH SCHOOL
Guiuan, Eastern Samar
COMPUTER PROGRAMMING
INTRODUCTION
What is Javascript?
KEY CONCEPT
<!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>
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:
<!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>
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.
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.
❖ 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.
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.
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.
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.
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();