WEB APPLICATION

DEVELOPMENT

Ch.2 Introduction to JS

For: L2 B
 2

AGENDA
• What is JavaScript?
• Setting Up the Environment
• JavaScript Basics
• Interactive Examples
• Advanced Concepts
• Q&A and Recap
WHAT IS
JAVASCRIPT?
 4

WHAT IS JAVASCRIPT?
• An interpreted programming language for web
development.

• Makes websites interactive and dynamic.

• Runs in browsers (client-side) and servers ([Link]).

 5

WHERE DOES JAVASCRIPT

RUN?
• Browsers: Chrome, Firefox, Safari, etc.

• Servers: Using [Link].

• Mobile Apps: React Native, Ionic.

• Games: Phaser, [Link].

 6

WHY LEARN JAVASCRIPT?

• High demand in the job market.

• Versatile: front-end, back-end, mobile apps, games.

• Powers popular websites like Google, Netflix, and

Facebook.
 7

REAL-WORLD EXAMPLES.
• Google Maps: Interactive maps.

• Netflix: Dynamic content loading.

• Social Media: Real-time updates.

• Online Forms: Validation and interactivity.

 8

EXAMPLE
A button that changes text when clicked.

Result
Click
SETTING UP
THE
ENVIRONMENT
 10

TOOLS NEEDED.
• Browser: Chrome, Firefox, etc.

• Code Editor: VS Code, Sublime Text, etc.

• Browser Console: For testing and debugging.

 11

BROWSER CONSOLE.

• How to Open: Press Ctrl+Shift+I or F12.

• Example: Type [Link]('Hello, World!'); and

press Enter.
 12

ADDING JAVASCRIPT IN
HTML.
• Adding JS to HTML is done by using the the
<script> Tag
• There is two ways
 Internal
 External
 13

INTERNAL JAVASCRIPT
• It can be in the head or the body
• Internal adding JS to HTML Example:
 14

EXTERNAL JAVASCRIPT FILE.

• Code Example:
JAVASCRIPT
BASICS
 16

JAVASCRIPT PROGRAMS

• A computer program is a list of "instructions" to be

"executed" by a computer.

• In a programming language, these programming

instructions are called statements.

• A JavaScript program is a list of programming

statements.
 17

JAVASCRIPT STATEMENTS
• JavaScript statements are composed of:

• Values, Operators, Expressions, Keywords, and

Comments.

• JavaScript statements ending with a semicolon (;).

 18

STATMENTS EXAMPLES
 19

VARIABLES.
• Keywords: let, const, var.

• Example:
 20

COMMENTS IN JS

• Comments:
 21
DATA TYPES.
Types:
 Strings: 'Hello'

 Numbers: 25, 3.14

 Booleans: true, false

 Arrays: ['red', 'green', 'blue']

 Objects: { name: 'Alice', age: 25 }

 22

STRING EXAMPLE.
Code Example:
 23

NUMBER EXAMPLE.
• Code Example:
 24

BOOLEAN EXAMPLE.

• Code Example:
 25

ARRAY EXAMPLE.
• Code Example:
 26

OBJECT EXAMPLE.
• Code Example:
 27

OPERATORS.
• Arithmetic: +, -, *, /

• Comparison: ==, ===, >, <

• Logical: &&, ||, !

 28

ARITHMETIC EXAMPLE.

• Code Example:
 29

COMPARISON EXAMPLE.

• Code Example:
 30

LOGICAL EXAMPLE.
• Code Example:
 31

COMPARING DIFFERENT
TYPES
• Comparing data of different types may give
unexpected results.

• When comparing a string with a number, JavaScript

will convert the string to a number when doing the
comparison. An empty string converts to 0. A non-
numeric string converts to NaN which is always false.
 32

BASIC OUTPUT.
• Methods:

 [Link]()

 alert()

 DOM Manipulation
 33

[Link]() EXAMPLE.
• Code Example:
 34

ALERT() EXAMPLE.
• Code Example:
 35

DOM MANIPULATION
EXAMPLE.
• Code Example:
 36

RECAP OF BASICS.
• Variables store data.

• Data types include strings, numbers, booleans, arrays,

and objects.

• Operators perform actions on data.

• Output methods include [Link](), alert(), and DOM

manipulation.
INTERACTIVE
EXAMPLES
 38

CONDITIONALS.
• Keywords: if, else if, else.

• Example:
 39

CONDITIONAL EXAMPLE.
• Code Example:
 40

CONDITIONAL (TERNARY)
OPERATOR
• JavaScript also contains a conditional operator that
assigns a value to a variable based on some condition.
 41

EXAMPLE
• If the variable age is a value below 18, the value of the
variable voteable will be "Too young", otherwise the
value of voteable will be "Old enough".
 42

LOOPS.
• Types: for, while.

• Example:
 43

FOR LOOP EXAMPLE.

• Code Example:
 44

WHILE LOOP EXAMPLE.

• Code Example:
 45

FUNCTIONS.
• Reusable blocks of code.

• Example:
 46

FUNCTION EXAMPLE.
• Code Example:
 47

DOM MANIPULATION.
• Interacting with webpage elements.

• Example:
 48

DOM EXAMPLE.
• Code Example:
 49

WHAT IS THE DOM?

 50

WHY DOM?.
With the object model, JavaScript gets all the power it needs to
create dynamic HTML:

• JavaScript can change all the HTML elements in the page

• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
 51

DOM EXAMPLE.
• Code Example:
 52

RECAP OF INTERACTIVE
EXAMPLES.
• Conditionals make decisions.

• Loops repeat code.

• Functions are reusable blocks.

• DOM manipulation changes webpage content.

ADVANCED
CONCEPTS
 54

EVENTS.
• Actions like clicks, mouse movements, or key
presses.

• Example:
 55

EVENT EXAMPLE.
• Code Example:
 56

API AND FETCHING DATA.

• APIs allow fetching data from servers.

• Example:
 57

API EXAMPLE.
• Code Example:
 58

ES6 FEATURES.
Arrow Functions:

Template Literals:
TYPESCRIPT
 60

WHAT IS TYPESCRIPT?
• TypeScript is a typed superset of JavaScript that compiles
to plain JavaScript.

• Adds static typing, making JavaScript more predictable and

easier to debug.

• Key Features:
 Static typing.
 Better tooling and IDE support.
 Compatibility with JavaScript.
 61

WHY USE TYPESCRIPT?

• Catches errors during development (compile-time errors).

• Improves code readability and maintainability.

• Enhances collaboration in large teams.

• Use Cases:
 Large-scale applications.
 Projects requiring high reliability.
 62

TYPESCRIPT VS JAVASCRIPT
• JavaScript:
 Dynamically typed.
 Errors often caught at runtime.
 Flexible but less predictable.

• TypeScript:
 Statically typed.
 Errors caught during development.
 Adds structure and scalability.
 63

BASIC TYPESCRIPT SYNTAX

• Static Typing:
 let name: string = "Alice";
 let age: number = 25;
 let isStudent: boolean = true;

• Arrays and Objects:

 let colors: string[] = ["red", "green", "blue"];
 let person: { name: string, age: number } = { name: "Alice", age: 25 };
 64

FUNCTIONS IN TYPESCRIPT
• Typed Parameters and Return Values:

function add(a: number, b: number): number {

return a + b;
}

• Optional and Default Parameters:

function greet(name: string, age?: number): void {

[Link](`Hello, ${name}`);
}
 65

INTERFACES IN TYPESCRIPT
• Definition: Interfaces define the structure of
objects.

• Example:

interface Person {
name: string;
age: number;
}

• let person: Person = { name: "Alice", age: 25 };

 66

CLASSES IN TYPESCRIPT
• Example:
class Animal {
name: string;
constructor(name: string) {
[Link] = name;
}
speak(): void {
[Link](`${[Link]} makes a noise.`);
}
}
 ADVANCED TYPESCRIPT 67

FEATURES
• Generics:
function identity<T>(arg: T): T {
return arg;
}
Enums:
enum Color {
Red, Green, Blue
}
Union Types:
let value: string | number;
TYPESCRIPT IN REAL-WORLD 68

PROJECTS

• Popular Frameworks:

 Angular (built with TypeScript).

 React and Vue (optional TypeScript support).

• Enterprise Adoption:

 Used by Microsoft, Google, and other large companies.

 69

RECAP OF TYPESCRIPT

• TypeScript adds static typing to JavaScript.

• Improves code quality and maintainability.

• Essential for large-scale projects.

 70

RESOURCES FOR LEARNING

TYPESCRIPT
Official Docs: TypeScript Documentation

Tutorials:

• FreeCodeCamp.

• TypeScript Deep Dive by Basarat.

• Practice: Build small projects with TypeScript.

Q&A AND
RECAP
 72

RECAP OF KEY POINTS

• JavaScript is used for web interactivity.

• Basics include variables, data types, and

operators.

• Advanced topics include events, APIs, and ES6

features.
 73

RESOURCES
• FreeCodeCamp: Free interactive tutorials.

• MDN Docs: Official JavaScript documentation.

• [Link]: Detailed guides and examples.

 74

PRACTICE IDEAS
• Build a calculator.

• Create a to-do list.

• Develop a quiz app.

THANK YOU!
Keep practicing and building amazing
things with JavaScript!