PAMANTASAN NG CABUYAO

COLLEGE OF COMPUTING AND ENGINEERING

COURSE CODE: ITEW2

COURSE DESCRIPTION: CLIENT SIDE SCRIPTING

COURSE INTENDED 1. Design and implement JavaScript codes appropriate to the requirements of the
LEARNING OUTCOMES: programming problem.
2. Write readable JavaScript programs compliant to widely-accepted coding
conventions implementing OOP approach.
3. Create JavaScript programs applying JQuery and Web Storage.

LEARNING MATERIAL
FOR WEEK NUMBER:
1
I. TITLE: INTRODUCTION TO JAVASCRIPT AND JAVASCRIPT FUNDAMENTALS PART 1

II. OBJECTIVES: After this lesson, you are expected to:

1. explain what is JavaScript;

2. implement the “script” tag towards client-side scripting;
3. understand the code structure of JavaScript;
4. write simple web page implementing simple JavaScript code.

III. INTRODUCTION: This lesson will cover topics on the introduction to JavaScript as a scripting language
for front-end web development. The use of the “script” tag, code structure, and the
modern mode to client side scripting will be clearly explained as well some simple
examples of JavaScript code.

JavaScript is a cross-platform, object-oriented scripting language used to make

webpages interactive (e.g., having complex animations, clickable buttons, popup
menus, etc.). There are also more advanced server side versions of JavaScript such
as Node.js, which allow you to add more functionality to a website than downloading
files (such as real-time collaboration between multiple computers). Inside a host
environment (for example, a web browser), JavaScript can be connected to the
objects of its environment to provide programmatic control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and
a core set of language elements such as operators, control structures, and statements.
Core JavaScript can be extended for a variety of purposes by supplementing it with
additional objects; for example:

• Client-side JavaScript extends the core language by supplying objects to

control a browser and its Document Object Model (DOM). For example,
client-side extensions allow an application to place elements on an HTML
form and respond to user events such as mouse clicks, form input, and page
navigation.

• Server-side JavaScript extends the core language by supplying objects

relevant to running JavaScript on a server. For example, server-side
extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another of the application,
or perform file manipulations on a server.

This means that in the browser, JavaScript can change the way the webpage (DOM)
looks. And, likewise, Node.js JavaScript on the server can respond to custom requests
from code written in the browser [1].

LECTURE NOTES COMPILATION Page 1 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

IV. CONTENTS:

Lesson Coverage:

1. What is JavaScript?
2. Hello, world!
3. Code Structure
4. The modern mode, "use strict"

LECTURE NOTES COMPILATION Page 2 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

What is JavaScript?

• JavaScript was developed by Brendan Eich.

• Originally the language was called Live Script.
• JavaScript was initially created to “make web pages alive”.
• The programs written in this language are called scripts.

o Scripts can be written right in a web page’s HTML and run automatically as the page loads.
o Scripts are provided and executed as plain text (no special preparation or compilation to run).

• Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a
special program called the JavaScript engine.

o The browser has an embedded engine sometimes called a “JavaScript virtual machine”. Different engines
have different “codenames”. For example:

▪ V8 – in Chrome and Opera.

▪ SpiderMonkey – in Firefox

o There are other codenames like “Chakra” for IE, “ChakraCore” for Microsoft Edge, “Nitro” and “SquirrelFish”
for Safari, etc.

Why is it called JavaScript?

When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that
time, so it was decided that positioning a new language as a “younger brother” of Java would help.
But as it evolved, JavaScript became a fully independent language with its own specification
called ECMAScript, and now it has no relation to Java at all.

How do engines work?

Engines are complicated. But the basics are easy.

1. The engine (embedded if it’s a browser) reads (“parses”) the script.

2. Then it converts (“compiles”) the script to the machine language.
3. And then the machine code runs, pretty fast.

Youtube Video

How a web browser builds and displays a web page

Link: https://www.youtube.com/watch?v=DuSURHrZG6I

What can in-browser JavaScript do?

Modern JavaScript is a “safe” programming language. It does not provide low-level access to memory or CPU,
because it was initially created for browsers which do not require it.

JavaScript’s capabilities greatly depend on the environment it’s running in. For instance, Node.js supports
functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.

In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the
webserver.

For instance, in-browser JavaScript is able to:

LECTURE NOTES COMPILATION Page 3 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

• Add new HTML to the page, change the existing content, and modify styles.
• React to user actions, run on mouse clicks, pointer movements, and key presses.
• Send requests over the network to remote servers, download and upload files (so called AJAX and COMET
technologies).
• Validate form data entered by the user.
• Get and set cookies, ask questions to the visitor, show messages.
• Remember the data on the client-side (“local storage”).

What JavaScript can’t do?

JavaScript’s abilities in the browser are limited for the sake of the user’s safety. The aim is to prevent an evil
webpage from accessing private information or harming the user’s data.

Examples of such restrictions include:

• JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute
programs. It has no direct access to OS system functions.

• JavaScript from one page may not access the other if they come from different sites (from a different
domain, protocol or port).

• JavaScript ability to receive data from other sites/domains is crippled (Though possible, it requires
explicit agreement (expressed in HTTP headers) from the remote side.)

• Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern
browsers also allow plugin/extensions which may ask for extended permissions.

What makes JavaScript unique?

There are at least three great things about JavaScript:

• Full integration with HTML/CSS.

• Simple things are done simply.
• Support by all major browsers and enabled by default [2].

LECTURE NOTES COMPILATION Page 4 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Hello, world!

This part of the lesson is about core JavaScript, the language itself.

But we need a working environment to run our scripts and, since this book is online, the browser is a good
choice. We’ll keep the amount of browser-specific commands (like alert) to a minimum so that you don’t spend time
on them if you plan to concentrate on another environment (like Node.js). We’ll focus on JavaScript in the browser
in the next part of the lesson.

The “script” tag

JavaScript programs can be inserted into any part of an HTML document with the help of the <script> tag.

For instance:

The <script> tag contains JavaScript code which is automatically executed when the browser processes the
tag.

Modern markup

The <script> tag has a few attributes that are rarely used nowadays but can still be found in old code:

• The type attribute: <script type=…>

The old HTML standard, HTML4, required a script to have a type. Usually it was type="text/javascript". It’s
not required anymore. Also, the modern HTML standard, HTML5, totally changed the meaning of this
attribute. Now, it can be used for JavaScript modules. But that’s an advanced topic; we’ll talk about modules
in another part of the tutorial.

• The language attribute: <script language=…>

This attribute was meant to show the language of the script. This attribute no longer makes sense because
JavaScript is the default language. There is no need to use it.

LECTURE NOTES COMPILATION Page 5 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Comments before and after scripts.

In really ancient books and guides, you may find comments inside <script> tags, like this:

This trick isn’t used in modern JavaScript. These comments hide JavaScript code from old browsers that
didn’t know how to process the <script> tag. Since browsers released in the last 15 years don’t have this issue, this
kind of comment can help you identify really old code.

External scripts

If we have a lot of JavaScript code, we can put it into a separate file. Script files are attached to HTML with
the src attribute:

Here, /path/to/script.js is an absolute path to the script file (from the site root). You can also provide a
relative path from the current page. For instance, src="script.js" would mean a file "script.js" in the current folder.

We can give a full URL as well. For instance:

To attach several scripts, use multiple tags:

Please Note:

• As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files.
• The benefit of a separate file is that the browser will download it and store it in its cache.
• Other pages that reference the same script will take it from the cache instead of downloading it, so the file is
actually downloaded only once.
• That reduces traffic and makes pages faster [3].

LECTURE NOTES COMPILATION Page 6 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

LECTURE NOTES COMPILATION Page 7 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Code structure

Statements

Statements are syntax constructs and commands that perform actions. We’ve already seen a statement,
alert('Hello, world!'), which shows the message “Hello, world!”. We can have as many statements in our code as we
want. Statements can be separated with a semicolon.

For example, here we split “Hello World” into two alerts:

alert('Hello'); alert('World');

Usually, statements are written on separate lines to make the code more readable:

alert('Hello');
alert('World');

Semicolons

A semicolon may be omitted in most cases when a line break exists. This would also work:

alert('Hello')
alert('World')

Comments

As time goes on, programs become more and more complex. It becomes necessary to add comments which
describe what the code does and why.

Comments can be put into any place of a script. They don’t affect its execution because the engine simply
ignores them.

One-line comments start with two forward slash characters //.

The rest of the line is a comment. It may occupy a full line of its own or follow a statement. Like here:

Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward
slash */

The content of comments is ignored, so if we put code inside /* … */, it won’t execute. Sometimes it can be
handy to temporarily disable a part of code:

LECTURE NOTES COMPILATION Page 8 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

Please, don’t hesitate to comment your code. Comments increase the overall code footprint, but that’s not a
problem at all. There are many tools which minify code before publishing to a production server. They remove
comments, so they don’t appear in the working scripts. Therefore, comments do not have negative effects on
production at all [4].

LECTURE NOTES COMPILATION Page 9 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

The modern mode, "use strict"

For a long time, JavaScript evolved without compatibility issues. New features were added to the language
while old functionality didn’t change. That had the benefit of never breaking existing code. But the downside was
that any mistake or an imperfect decision made by JavaScript’s creators got stuck in the language forever.

This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and
modified some of the existing ones. To keep the old code working, most modifications are off by default. You need to
explicitly enable them with a special directive: "use strict".

“use strict”

The directive looks like a string: "use strict" or 'use strict'. When it is located at the top of a script, the whole
script works the “modern” way. For example:

Quite soon we’re going to learn functions (a way to group commands), so let’s note in advance that "use
strict" can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually
people use it for the whole script.

Always “use strict”

1. The "use strict" directive switches the engine to the “modern” mode, changing the behavior of some built-in
features.

LECTURE NOTES COMPILATION Page 10 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

2. Strict mode is enabled by placing "use strict" at the top of a script or function. Several language features, like
“classes” and “modules”, enable strict mode automatically.
3. Strict mode is supported by all modern browsers.
4. We recommended always starting scripts with "use strict" [5].

LECTURE NOTES COMPILATION Page 11 of 12

2nd Semester A.Y. 2021-2022
 PAMANTASAN NG CABUYAO
COLLEGE OF COMPUTING AND ENGINEERING

V. REFERENCES: [1] MDN Web Docs, “JavaScript Introduction”, [Online]. Available:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction.
[Accessed: 8-Feb-2021].

[2] JavaScript.Info, “An Introduction to JavaScript”, [Online]. Available:

https://javascript.info/intro. [Accessed: 8-Feb-2021].

[3] JavaScript.Info, “Hello, world”, [Online]. Available: https://javascript.info/hello-

world. [Accessed: 8-Feb-2021].

[4] JavaScript.Info, “Code Structure”, [Online]. Available:

https://javascript.info/structure. [Accessed: 8-Feb-2021].

[5] JavaScript.Info, “The modern mode, ‘use strict’”, [Online]. Available:

https://javascript.info/strict-mode. [Accessed: 8-Feb-2021].

VI. ASSESSMENT TASK:

Assessment task is posted as scheduled in our MS Team.

DISCLAIMER

Every reasonable effort is made to ensure the accuracy of the information used in the creation of this
reference material, without prejudice to the existing copyrights of the authors. As an off-shoot of the innumerable
difficulties encountered during these trying times, the authors endeavored to ensure proper attribution of the
esteemed original works, by way of footnotes or bibliography, to their best abilities and based on available resources,
despite the limited access and mobility due to quarantine restrictions imposed by the duly constituted authorities.

We make no warranties, guarantees or representations concerning the accuracy or suitability of the

information contained in this material or any references and links provided here. Links to other materials in our
CPOD and CAM was made in good faith, for non-commercial teaching purposes only to the extent justified for the
purpose, and consistent with fair use under Sec. 185 of Republic Act No. 8293, otherwise known as the Intellectual
Property Code of the Philippines.

COPYRIGHT NOTICE

Materials contained in the learning packets have been copied and conveyed to you by or on behalf of
Pamantasan ng Cabuyao pursuant to Section IV - The Copyright Act (RA) 8293 of the Intellectual Property Code of
the Philippines.

You are not allowed by the Pamantasan ng Cabuyao to reproduce or convey these materials. The content may
contain works which are protected by copyright under RA 8293. You may be liable to copyright infringement for any
copying and/ or distribution of the content and the copyright owners have the right to take legal action against such
infringement.

Do not remove this notice.

LECTURE NOTES COMPILATION Page 12 of 12

2nd Semester A.Y. 2021-2022