Understanding the Basics

of Web Development
(JavaScript)
 JavaScript
Web development using JavaScript is a fundamental
aspect of modern web development. JavaScript is a
versatile programming language that enables developers
to create interactive and dynamic web pages. It allows
manipulation of web page elements, handling user
interactions, and making HTTP requests to servers.
 JavaScript
JavaScript is a versatile programming language used for building
interactive and dynamic web pages. JavaScript is considered versatile
because it can be used for a variety of purposes within web development:

 It is primarily a client-side scripting language, meaning it runs in the user's

web browser, enabling dynamic content and interactivity in web pages.
 JavaScript can also be used on the server side, allowing developers to use
the same language throughout the entire web development stack.
 This versatility makes JavaScript a powerful tool for building modern,
dynamic web applications.

It allows manipulation of web page elements, handling user interactions,

and making HTTP requests to servers.
 History of JavaScript
JavaScript was developed by Brendan Eich in 1995, which appeared in
Netscape, a popular browser of that time.
It was developed for Netscape 2 and became the ECMA-262 standard
in 1997.
After Netscape handed Javascript over to the ECMA International
(European Computer Manufacturers Association) for standardization,
the Mozilla foundation played a significant role in developing and
implementing JavaScript in the Firefox browser, contributing to its
evolution and continued improvement.
Brendan Eich is often referred to as the “Father of JavaScript” due to his
instrumental role in its creation.
 Are JavaScript and Java the same?
 Java and JavaScript almost have the same names, but they are distinct
programming languages with different purposes.
 Java is a versatile, object-oriented programming language often used
for building standalone applications, while JavaScript is a scripting
language primarily used for web development to enhance interactivity
on websites.
 Despite their names, they share little in terms of syntax or functionality.
 JavaScript has no direct connection to the Java programming
language.
 Application of JavaScript
JavaScript is used to create interactive websites.
It is mainly used for:
 Client side validation - This is really important to verify any user input before submitting it to
the server and JavaScript plays an important role in validating those inputs at front-end
itself.
 Manipulating HTML Pages - Javascript helps in manipulating HTML page. Lets you easily
add or remove elements on a webpage, adjusting how it looks depending on the device
or user needs.
 User Notifications - You can use Javascript to show messages or pop-ups on the webpage,
alerting users to important information.
 Back-end Data Loading - JavaScript has a feature (Ajax library) that helps load information
from the server without interrupting what the user is doing, providing a smoother
experience.
 Server Applications - For more advanced users, JavaScript (specifically Node JS) can be
used to build fast and scalable network applications, including web servers.
 Limitations of JavaScript
 File Operations: Client-side JavaScript is restricted from reading or writing files as a
security measure.
 Networking: JavaScript lacks built-in support for networking applications, limiting its
capabilities.
 Multi-Threading: JavaScript does not support multi-threading or multiprocessor
operations, which can impact its performance in handling concurrent tasks.
Here's an overview of the basics of web development using
JavaScript:

1.JavaScript Basics: Understand the syntax, variables, data types, operators, control
structures (like switch, if-else, loops), arrays, objects, and functions in JavaScript.
These are the building blocks of any JavaScript program.
2. DOM Manipulation: Learn about the Document Object Model (DOM) and how
JavaScript interacts with it to manipulate HTML elements dynamically. You can
access, create, modify, or remove elements on the webpage using JavaScript.
3. Event Handling: Understand how to handle events like clicks, key presses, form
submissions, etc. JavaScript allows you to attach event listeners to elements and
execute functions when events occur.
4. Web Storage: Understand the different types of web storage and how to create,
retrieve and to delete specific data
5. AJAX: Understand Asynchronous JavaScript and XML (AJAX), which enables
webpages to fetch data from servers and update parts of the page without
requiring a full page reload
Syntax

It refers to the set of rules, principles, and structure that define how code is written
and interpreted in a programming language.
 It includes statements, expressions, variables, functions, and other language
elements. It dictates how these elements, along with keywords, operators, and
symbols, are combined to create valid and meaningful instructions for the
computer to execute.
 In simpler terms, syntax is the "grammar" of a programming language. Writing
code that follows the syntax rules ensures that it can be understood and
executed by the interpreter or compiler.
Environment Setup
 Environment Setup
Steps on how to setup your JavaScript environment.
1. Open your VS Code.

2. Incase there is a previous open folder in your vs code you can got to File Menu>> Close Folder
Environment Setup
Steps on how to setup your JavaScript environment.
3. Your screen should be look like this.
Environment Setup
Steps on how to setup your JavaScript environment.
4. Got to File Menu >> Open Folder.

5. And go to the location of your folder.

6. Click Select folder.

Environment Setup
Steps on how to setup your JavaScript environment.
7. Your screen should be look like this.

8. Hover your mouse beside your folder name to reveal the 4 icons.
(New File, New Folder, Refresh Explorer, and Collapse Folder).

9. In those icons, Click the New file icon.

Environment Setup
Steps on how to setup your JavaScript environment.
10. Your screen should be look like this.

11. The name of the file is user define as long as the extension name ends with .html
example: sample.html
Script in JavaScript
• To get a feel for JavaScript, first start with simple statement scripts.
First we will create a friendly little "Hello, World!" script.
Copy this source code to your sample.html.

Source Code:
<html>
<head>
<title>Hello World</title>
</head>

<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
Your screen should be look like this.
How to use JavaScript?

JavaScript can be added to your HTML file in three ways:

Inline JavaScript
Internal JavaScript
External JavaScript
How to use JavaScript?
JavaScript can be added to your HTML file in three ways:

Inline JavaScript: written directly within HTML tags’ event attributes. Commonly used
for small and one-time actions

Internal JavaScript: We can add JavaScript directly to our HTML file by writing the
code inside the <script> tag. The <script> tag can either be placed inside the
<head> or the <body> tag according to the requirement.

External JavaScript : We can write JavaScript code in other file having an sample.js
and then link this file inside the <head> tag of the HTML file in which we want to add
this code.
Inline JavaScript
Inline JavaScript: written directly within HTML tags’ event attributes. Commonly used
for small and one-time actions

<button onclick="javascript code here">Click me!</button>

Inline JavaScript
Inline JavaScript: written directly within HTML tags’ event attributes. Commonly
used for small and one-time actions.

<html>
<head>
<title>Hello World</title>
</head>
<body>
<button onclick="alert(You clicked the button!')">Click me!</button>
</body>
</html>
Internal JavaScript
Internal JavaScript: We can add JavaScript directly to our HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or the
<body> tag according to the requirement.

<script>
console.log(“Hello World”);
</script>
Internal JavaScript
Internal JavaScript: We can add JavaScript directly to our HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or the
<body> tag according to the requirement.

<html>
<head>
<script>
console.log("Script in head");
</script>
</head>
<body>
<script>
console.log("Script in body");
</script>
</body>
</html>
External JavaScript
External scripts are practical when the same code needs to be used across multiple
web pages.
JavaScript files have the file extension `.js`.
To use an external script, include the script file name in the `src` (source) attribute of
a `<script>` tag.

<script src="sample.js"></script>
External JavaScript
For example, we can write JavaScript code in a separate file, such as `sample.js`,
and then link this file inside the `<head>` tag of the HTML file where we want to
include this code.

sample.js
sample.html document.write("Hello World");
<html>
<head>
<script src="sample.js"></script>
</head>
<body>
</body>
</html>
 External JavaScript Advantages
Placing scripts in external files has some advantages:
❑ It separates HTML and code
❑ It makes HTML and JavaScript easier to read and maintain
❑ Cached JavaScript files can speed up page loads

To add several script files to one page - use several script tags:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
 External JavaScript References
❑With a file path (like /js/)
<script src="/js/myScript.js"></script>

❑Without any path

<script src="myScript.js"></script>
JavaScript Placement
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or
in both.

Note: Placing scripts at the bottom of the <body> element improves the display speed,
because script interpretation slows down the display.
Displaying Messages using JavaScript

Using Alert box

• The alert function is used to display a simple dialog box with a message
• and an "OK" button.
• t's often used to show a pop-up notification to the user, such as
• displaying an important message, a warning, or an error.
• It blocks the execution of the JavaScript code until the user clicks the
• "OK" button on the dialog box.

alert(message)
Displaying Messages using JavaScript

Displaying to Console
• The console.log function is used for debugging and logging purposes only.
• It outputs messages, values, or objects to the browser's developer console.
• t's commonly used to print information for developers to inspect during the
development process.
• It doesn't affect the user interface and doesn't interrupt the execution of the
script.

console.log(message)
Displaying Messages using JavaScript

Displaying directly to web page

• The document.write method is used to write content directly to the HTML
document.
• It was more commonly used in the past but is generally avoided now because it
can overwrite the entire document if used after the page has loaded.
• If you use document.write after the document has been fully loaded, it can
replace the existing content and even break the page structure.
• Due to these limitations and potential issues, it's generally recommended to use
other methods to manipulate the DOM (Document Object Model) and update
the content of a web page dynamically.

document.write(message)
Displaying Messages using JavaScript

// Example: A simple JavaScript statement

alert("Hello, World!");
console.log('Hello, World');
document.write('Hello, World!');
How to create a new line in JavaScript
1. For Text Output (Document.write)
 Use the <br> tag to create a new line in HTML content:

document.write("Hello<br>World");

2. In Strings for (Console.log , Alert and DOM Elements)

 Use the newline escape character \n within a string for a new line:

console.log("Hello\nWorld");
alert("Hello\nWorld");
Is JavaScript whitespace insensitive
No, JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
You can use spaces, tabs, and newlines freely in your program and you are free to
format and indent your programs in a neat and consistent way that makes the code
easy to read and understand.
Code Indentation
Indentation is important because it improves code readability, organization, and
maintainability by visually indicating the structure and hierarchy of the code.

 For single indentation: Press the Tab key to indent a single line of code.
 For block indentation: Highlight the desired block of code and then press the Tab
key to indent all selected lines.
 To unindent: Press Shift + Tab to reduce the indentation of a line or block of code.
JavaScript Comment
comments are meaningful way to deliver message. It is used to add information about the
code, warnings or suggestions so that end user can easily interpret the code.

Comments are ignored during execution, but they are important for documenting code and
improving readability.

There are two commenting formats in JavaScript−

 Single-line comments
 Multi-line comments
 Commenting JavaScript Code
Single-line comments − They are generally used for short explanations or notes relevant to the
local code. Here are the examples of single line comments using-
// Single line comment
<script> Output:
// This is also a single-line comment
document.write(“An example with single line An example with single line comments
comments“)
</script>

<script>
// This is a comment, and
// This is also a single-line comment
document.write(“ An example with single line comments)
</script>

Shortcut key(Ctrl + /)
Commenting JavaScript Code
Multi-line comments − They are generally used to provide pseudocode algorithms and more detailed
explanations when necessary.
Here are the example of multi lines comments using-
/* Multiple line comments */
Source Code: Output:

<script> An example with multi line comments

/* This is a comment with multiline
Purpose: Multiline Comments Demo
Subject: Javascript
*/

document.write("An example with multi

line comments“)
<script>

Shortcut key(Shift + Alt + A)

Source Code:

<script>
document.write (10 + /*60 + */ 5);
</script>
Commenting JavaScript Code
Source Code:
// You can also use comments to leave out parts of a code line
<script>
document.write (10 + /*60 */ + 5)
</script>

Output:
15
is JavaScript case sensitive?
JavaScript is case-sensitive. Knowing what are case sensitive and what is
not is very important to avoid syntax errors.

The identifiers Time and TIME will convey different meanings in

JavaScript.

This means that the language keywords, variables, function names, and
any other identifiers must always be typed with a consistent.
 Variables

- Variables are used to store data in memory. They can hold different data types,
and their values can change during the execution of a program. Variables are declared
using the var, let, or const keyword.
Variables

// Example: Declaring and initializing variables

var age = 25;
let name = "John Doe";
const PI = 3.14;

Use let when you need to change the value of a variable, and use const when you
want to keep a constant value that doesn't change. Avoid using var because it has
some quirks that can lead to unexpected behavior.
JavaScript Data Types
In JavaScript, there are several data types that determine the kind of value a variable can
hold. They can be classified into two categories: Primitive data types and Non-primitive
data types (also called reference types).

Primitive Data Types:

These data types represent single values and are immutable (cannot be changed).
Non-Primitive Data Types (Reference Types):
These types are more complex and can hold multiple values or properties.
Primitive Data Types
Number: Represents both integer and floating-point numbers.
let age = 25;
let price = 19.99;

String: Represents a sequence of characters (text) and is enclosed in single (' ')
or double (" ") quotes.
let name = "John Doe";
let greeting = 'Hello, World!';

Boolean: Represents a logical value: either true or false.

let isActive = true;

let isCompleted = false;
Primitive Data Types
Undefined: A variable that has been declared but not yet assigned a value.
let x;
console.log(x); // undefined

Null: Represents the intentional absence of any value or object.

let y = null;
Non-Primitive Data Types (Reference Types)
Array: A special type of object used to store ordered collections of values.
let fruits = ["apple", "banana", "manggo"];

Object: Represents a collection of key-value pairs (properties and methods).

let person = {
name: "Alice",
age: 30,
isActive: true
};

Function: A type of object that can be invoked (called) to perform tasks.

function greet(name) {
return "Hello, " + name;
}
Variables: How to Declare Variables?
Rules for JavaScript variables:
 A variable starts with the var, let or const, followed by the name of the variable

 A variable name must start with a letter or the underscore character

 A variable name cannot start with a number

 No spaces allowed in variable names.

 A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )

 Variable names are case-sensitive (age and AGE are two different variables)

 Cannot use JavaScript reserved keywords (e.g., if, let, return)

 Variables declaration uses the assignment operator ‘=’ wherein the variable name is on the
operator’s left side and the expression on the right side of the operator.

let Name = “Juan Dela Cruz”;

is JavaScript case sensitive?
Variables are case-sensitive. e.g., message and MESSAGE are different variables.

Example #1:

Source Code:
<html>
<body>
<script>
let country = "Arizona"; Only the first statement will display the value of the
document.write("My Country is " + country) count variable.

document.write("My Name is " + COUNTry) This is because COUNTRY, country, and COUNTry are
document.write("My Age is " + COUNTRY) treated as three different variables.
</script></body>
We use the (+) sign to connect the our string.
</html>
Which means that variable/s should be used the same as it is declared.
Note: The concatenation operator (+) is used to combine two string values to create one string.

Example #2:
Source Code:

<html>
<body>
<script>
let COUNTRY = "Philippines";
let country = "Juan Dela Cruz";
let COUNtry = 30;

document.write("<br>");
document.write("My Country is " + COUNTRY + "<br>")
document.write("My Name is " + country + "<br>")
document.write("My Age is " + COUNtry + "<br>")
</script>
</body>
</html>
Which means that variable/s should be used the same as it is declared.
Note: The concatenation operator (+) is used to combine two string values to create one string.

Example #2:
Source Code: Output:

<html> My Country is Philippines

<body> My Name is Juan Dela Cruz
<script> My Age is 30
let COUNTRY = "Philippines";
let country = "Juan Dela Cruz";
let COUNtry = 30;

document.write("<br>");
document.write("My Country is " + COUNTRY + "<br>")
document.write("My Name is " + country + "<br>")
document.write("My Age is " + COUNtry + "<br>")
</script>
</body>
</html>
Creating (Declaring) JavaScript Variables
Variables are "containers" for storing information.
Example #3:
Source Code:

let txt = "Hello world!"

let x = 5
let y = 10.5

document.write(txt + "<br>")
document.write(x + "<br>")
document.write(y)
Creating (Declaring) JavaScript Variables
Variables are "containers" for storing information.
Example #3:
Source Code: Output:

let txt = "Hello world!" Hello world!

let x = 5 5
let y = 10.5 10.5

document.write(txt + "<br>")
document.write(x + "<br>")
document.write(y)
Creating (Declaring) JavaScript Variables
Variables are "containers" for storing information.
Example #3:
Source Code:

<script>
let txt = "Hello world!";
let x = 5;
let y = 10.5;
x = "five";

document.write(txt + "<br>");
document.write(x + "<br>");
document.write(y);
</script>
Creating (Declaring) JavaScript Variables
Variables are "containers" for storing information.
Example #3:
Source Code: Output:

<script> Hello world!

let txt = "Hello world!"; five
let x = 5; 10.5
let y = 10.5;
x = "five";
Duplicate variable names will have the output of the
document.write(txt + "<br>"); most recently stored data.
document.write(x + "<br>");
document.write(y);
</script>
Activity 1
Based on the previous example.
We will assign 4 variable namely (Name,YearLevel,Block,Course)
respectively.

The Output should be look like this

Juan Dela Cruz is my name.

I am 2nd Year-Block 4, BSIT Student.