Mind and Integrity College, Inc.

San Cristobal, Calamba City

In collaboration with
Department of Education
Region IV – CALABARZON

.NET 2
Quarter 4 – Module 1:
INTRODUCTION TO JAVASCRIPT

SELF LEARNING MODULE

GRADE 11

Development Team:
Writer: Randy T. Mercado
Reviewer: Marife P. De Castro
Layout: Paulo Stephen Cadawas
Management: Dr. Edwin T. Casila, MCL – Principal
Christian D. Manalansan – President

Mind and Integrity College, Inc.

Selina-Liz Bldg. National Hi-way, San Cristobal, Calamba City, Laguna
Contact #: 049-531-1604 / 0908-965-0010
Email Address: mai.school@yahoo.com

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 1 of 14
Dear Parents,

Mind and Integrity College, Inc. is one with every Filipino family in coping with the
demands of our modern times amidst the threat of COVID-19 pandemic.

The school initiated the distribution of a Self-Learning Module (SLM) in order to meet the
essential learning competencies required to be learned by your child whether your child opts for
online, modular, or blended learning modality. The learning activities in this SLM are arranged
chronologically from simple to complex that will lead your child to think critically, act skillfully,
and reflect deeply on each lesson and to practice them into real life settings. Most importantly,
this SLM promotes self-paced learning as your child can always review the least understood
lessons as often as he/she pleases.

Thank you in advance for being one with us! Together, let us envision that, by the end of
this school year, we will see your child as one responsible young person with a heart and mind
for humanity, for nature, for the country, and for God.

Dear Learner,

Welcome to a brand-new year of learning!

This is our gift to you. The school initiated the distribution of Self-Learning Modules
(SLM) that will help you keep up with the lesson whether you opted for online, modular, or
blended learning as a modality.

Please take time to read and do the activities in these SLM as if you are reporting in
school. Set a regular study schedule for you as much as possible, but keep in mind that these
SLM will enable you to learn at your own pace. If you do not understand a lesson, the SLM
would not mind you flipping back the pages repeatedly for review. Also, remember to keep in
touch with your teachers. Send them a message through your online sessions or write them a
note as you do your modular activities.

We wish you good luck in your studies, and we hope that you will remain happy and
enthusiastic in learning!

NOTE: Prepare yellow pad papers where you would write all your outputs for this
module. Do not forget to label your works properly corresponding to the title of each
activity. Also, please label your work with module number and module title. Do not forget
to write your name, section and the date of first entry.

Make sure to clip/staple your works so that they will not easily be separated. It is advised
to take down notes about the important information from each lesson because of the
modules will be returned at the end of every week. Please do not write anything on
module.

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 2 of 14
What This Module is About
Fast and efficient processing of two-dimensional arrays is essential in land-change modeling
because of the substantial computational effort expended by some computer land change models in
processing raster-graphic images and other two-dimensional arrays. Elapsed, wall-clock runtimes
for spatially explicit land-change models often span days or weeks, so improvements in the speed
and efficiency of a land-change model’s executable computer code can reduce its runtime by hours
or even days. The speed of execution can make the difference between a model that is fast enough
to be used and one that is not. Computational speed and efficiency in array processing are
fundamental, threshold concerns in land-change modeling and other areas of scientific
computation.

Icons of this Module

What I Need to This part contains learning objectives that are set for you
Know to learn as you go along the module.

What I know This is an assessment as to your level of knowledge

to the subject matter at hand, meant specifically to
gauge prior related to
Knowledge

What’s In This part connects previous lesson with that of the current
one.

What’s New An introduction of the new lesson through various

activities, before it will be presented to you

What is It These are discussions of the activities as a way to

deepen your discovery and under- standing of the
concept.

What’s More These are follow-up activities that are in- tended for you
to practice further in order to master the competencies.

What I Have Activities designed to process what you have

Learned learned from the lesson

What I can do These are tasks that are designed to show- case your
skills and knowledge gained and applied into real-life
concerns and situations.

Assessment This is a task which aims to evaluate your level of mastery

in achieving the learning competency

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 3 of 14
 WHAT I KNOW

Instruction: Identify the following. Write your answer on a yellow pad paper.
1. This is the art of creating sites and web applications that render on the client-side.
2. This consists of a server, an application, and a database.
3. Through this, code runs in browser after page is sent back from server often this code manipulates the
page or responds to user actions.
4. This is a benefit of using client – side scripting where it can modify a page without having to post back to
the server.
5. It allows us to create dynamic web pages.
6. This is a benefit of using client – side scripting where it can respond to user actions like clicks and key
presses.
7. It is a client-side scripting language, which means the source code is processed by the client's web
browser rather than on the web server.
8. Is Java and JavaScript related to each other? (Write only Yes or No).
9. This should be placed in HTML page's head.
10. This is writing programs driven by user events.

Lesson 4: INTRODUCTION TO JAVASCRIPT

What I Need to Know

INTRODUCTION
It’s estimated that over 1.7 billion websites exist, but this number fluctuates daily, as websites are launched
or lost. Despite the ebb and flow, the Web is massive and 4.5 billion people across the world contribute with online
interactions.
Websites are now a critical component for any business to stay competitive. And as web development
trends and best practices change practically with the season, there’s no shortage of work for developers.
But how do you know exactly what kind of web development work to seek out and train for? If you’ve
poked around on job listing sites or browsed through online courses, you’ve probably gathered that web
development tends to break down into three main concentrations: front-end, back-end, and full stack.

FRONT – END DEVELOPMENT

The front end of a website is the part that users interact with. Everything that you see when you’re navigating
around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and
JavaScript being controlled by your computer’s browser. Front-end development is the art of creating sites and
web applications that render on the client-side.

SKILLS AND TOOLS

Front-end developers are responsible for a website’s user-facing code and the architecture of its immersive
user experiences. In order to execute those objectives, front-end developers must be adept at three main
languages: HTML, CSS, and JavaScript programming. In addition to fluency in these languages, front-end developers
need to be familiar with frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, which ensure

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 4 of 14
great-looking content no matter the device, and libraries like jQuery and LESS, which package code into a more
useful, time-saving form. A lot of front-end developer job listings also call for experience with Ajax, a widely used
technique for using JavaScript that lets pages dynamically load by downloading server data in the background.

BACK – END DEVELOPMENT

So what makes the front end of a website possible? Where is all that data stored? This is where the back
end comes in. The back end of a website consists of a server, an application, and a database. A back-end developer
builds and maintains the technology that powers those components which, together, enable the user-facing side of
the website to even exist in the first place.
While front-end development is about making sites and web applications render on the client-side, back-
end development is all about making these apps render server-side. But it's a bit more involved than that. While
the previous statement holds true, back-end developers also create services that process business logic and access
other resources such as databases, file servers, cloud services and more. These services are the backbone of any
application and can be accessed and used not only by server-side rendering apps but also from client-side
rendering apps.

SKILLS AND TOOLS

In order to make the server, application, and database communicate with each other, back-end developers
use server-side languages like PHP, Ruby, Python, Java, and .Net to build an application, and tools like MySQL,
Oracle, and SQL Server to find, save, or change data and serve it back to the user in front-end code. Job openings for
back-end developers often also call for experience with PHP frameworks like Zend, Symfony, and CakePHP;
experience with version control software like SVN, CVS, or Git; and experience with Linux as a development and
deployment system.

Back-end developers use these tools to create or contribute to web applications with clean, portable, well-
documented code. But before writing that code, they need to collaborate with business stakeholders to understand
their particular needs, then translate those into technical requirements and come up with the most effective and
efficient solution for architecting the technology.

FULL STACK DEVELOPMENT

There’s often not a black-and-white distinction between front-end and back-end development. “Front-end
developers often need to learn those additional back-end skills, and vice versa, especially in the current economy
where marketing is thinly resourced,” said Matranga. “Developers need some of that cross-discipline. Oftentimes,
you have to be a generalist.”

The role was popularized seven years ago by Facebook’s engineering department. The idea is that a full
stack developer can work cross-functionally on the full “stack” of technology, i.e. both the front end and back end.
Full stack developers offer the full package.

“Working on both the server side and client side professionally opens more opportunities,” said Federico Ulfo,
Full Stack Developer at Grovo. But, of course, full stack development isn’t without its challenges. “To make an
analogy with food, you can be good at cooking or good at baking, but mastering both takes time and experience.
And I’m not talking about following a recipe, anyone can do that. I’m talking about having the ingredients to
prepare something truly good.”

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 5 of 14
CLIENT – SIDE SCRIPTING

Client – side script: code runs in browser after page is sent back from server often this code manipulates the page
or responds to user actions.

WHY USE CLIENT – SIDE PROGRAMMING?

PHP already allows us to create dynamic web pages. Why also use client-side scripting?

 Client-side scripting (JavaScript) benefits:

 Usability: can modify a page without having to post back to the server (faster UI)

 Efficiency: can make small, quick changes to page without waiting for server

 Event-driven: can respond to user actions like clicks and key presses

 Server-side programming (PHP) benefits:

 Security: has access to server's private data; client can't see source code

 Compatibility: not subject to browser compatibility issues

 Power: can write files, open connections to servers, connect to databases, etc.

JAVASCRIPT

 Client-side scripting language, which means the source code is processed by the client's web browser
rather than on the web server.
 This means JavaScript functions can run after a webpage has loaded without communicating with the
server. For example, a JavaScript function may check a web form before it is submitted to make sure all the
required fields have been filled out.
 The JavaScript code can produce an error message before any information is actually transmitted to the
server.
 A lightweight programming language ("scripting language")

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 6 of 14
  Used to make web pages interactive
 Insert dynamic text into html (ex: user name)
 React to events (ex: page load user click)
 Get information about a user's computer (ex: browser type)
 Perform calculations on user's computer (ex: form validation)
 A web standard (but not supported identically by all browsers)
 NOT related to java other than by name and some syntactic similarities

JAVASCRIPT VS. JAVA

 Interpreted, not compiled

 More relaxed syntax and rules
 Fewer and "looser" data types
 Variables don't need to be declared
 Errors often silent (few exceptions)
 Key construct is the function rather than the class
 "first-class" functions are used in many situations
 Contained within a web page and integrates with its HTML/CSS content

LINKING TO A JAVASCRIPT FILE:

<script src="filename" type="text/javascript"></script>

HTML

 script tag should be placed in HTML page's head

 script code is stored in a separate .js file
 JS code can be placed directly in the HTML file's body or head (like CSS)
 but this is bad style (should separate content, presentation, and behavior

EVENT – DRIVEN PROGRAMMING

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 7 of 14
  You are used to programs start with a main method (or implicit main like in PHP)
 JavaScript programs instead wait for user actions called events and respond to them
 Event-driven programming: writing programs driven by user events
 Let's write a page with a clickable button that pops up a "Hello, World" window.

BUTTONS

<button>Click me!</button> HTML

 Button's text appears inside tag; can also contain images

 To make a responsive button or other UI control:
1. Choose the control (e.g. Button) and event (e.g. Mouse 1. Click) of interest
2. Write a JavaScript function to run when the event occurs
3. Attach the function to the event on the control

JavaScript functions

function name() {
statement ;
statement ;
...
statement ;
} JS

function myFunction() {
alert("Hello!");
alert("How are you?");
} JS

 statements placed into functions can be evaluated in response to user events

EVENT HANDLERS

<element attributes onclick="function();">... HTML

<button onclick="myFunction();">Click me!</button> HTML

 JavaScript functions can be set as event handlers

 when you interact with the element, the function will execute
 onclick is just one of many event HTML attributes we'll use
 but popping up an alert window is disruptive and annoying
 A better user experience would be to have the message appear on the page...

DOCUMENT OBJECT MODEL (DOM)

 most JS code manipulates elements on an HTML page

 we can examine elements' state

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 8 of 14
  e.g. see whether a box is checked
 we can change state
 e.g. insert some new text into a div
 we can change styles
 e.g. make a paragraph red

DOM element objects

 every element on the page has a corresponding DOM object access/modify the attributes of the DOM object
with objectName.attributeName

ACCESSING ELEMENTS: document.getElementById

 document.GetElementById returns the DOM object for an element with a given id

 Can change the text inside most elements by setting the innerHTML property
 Can change the text in form controls by setting the value property

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 9 of 14
CHANGING ELEMENT STYLE: element.style

Attribute Property or style object

color color

padding padding

background-color backgroundColor

border-top-width borderTopWidth

Font size fontSize

Font famiy fontFamily

MORE JAVASCRIPT SYNTAX

VARIABLES

 Variables are declared with the var keyword (case sensitive)

 Types are not specified, but js does have types ("loosely typed")
 Number, boolean, string, array, object, function, null, undefined
 Can find out a variable's type by calling typeof

 Integers and real numbers are the same type (no int vs. Double)
 Same operators: + - * / % ++ -- = += -= *= /= %=
 Similar precedence to java
 Many operators auto-convert types: "2" * 3 is 6

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 10 of 14
COMMENT (Same as JAVA/C++)

 Identical to Java's comment syntax

 Recall: 4 comment syntaxes
 HTML: <!-- comment -->
 CSS/JS/PHP: /* comment */
 Java/JS/PHP: // comment
 PHP: # comment

MATH OBJECT

 methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan
 properties: E, PI

SPECIAL VALUES: NULL AND UNDEFINED

 Undefined : has not been declared, does not exist

 Null : exists, but was specifically assigned an empty or null value
 Why does JavaScript have both of these?

LOGICAL OPERATORS

 > < >= <= && || ! == != === !==

 most logical operators automatically convert types:
 5 < "7" is true
 42 == 42.0 is true
 "5.0" == 5 is true
 === and !== are strict equality tests; checks both type and value
 "5.0" === 5 is false

IF/ELSE STATEMENT (SAME AS JAVA)

 identical structure to Java's if/else statement
 JavaScript allows almost anything as a condition

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 11 of 14
BOOLEAN TYPE

 Any value can be used as a Boolean

 "falsey" values: 0, 0.0, NaN, "", null, and undefined
 "truthy" values: anything else
 Converting a value into a Boolean explicitly:
 var boolValue = Boolean(otherValue);
 var boolValue = !!(otherValue);

FOR LOOP

WHILE LOOPS

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 12 of 14
POP – UP BOXES

ARRAYS

 Array serves as many data structures: list, queue, stack, ...

 Methods: concat, join, pop, push, reverse, shift, slice, sort, splice, tostring, unshift
 Push and pop add / remove from back
 Un-shift and shift add / remove from front
 Shift and pop return the element that is removed

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 13 of 14
  Methods: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase,
toUpperCase

 charAt returns a one-letter String (there is no char type)

 Length property (not a method as in Java)

 Strings can be specified with "" or ''

 Concatenation with + :

 1 + 1 is 2, but "1" + 1 is "11"

SPLITTING STRINGS: SPLIT AND JOIN

 Split breaks apart a string into an array using a delimiter

 Can also be used with regular expressions (seen later)
 Join merges an array into a single string, placing a delimiter between them

What’s New
Activity 1: PERFORMANCE ACTIVITY
Instruction: Write an HTML and CSS file of your own design for login system. Write your code on a yellow pad
paper.

©2020 Mind and Integrity College, Inc. All Rights Reserved Page 14 of 14