JavaScript

Reporters:
SHEKINAH GLORY LIBERATO
JOVELYN LAZARO
ANALYN LAZARO

Origin of JavaScript

 Netscape Communications had the vision that the web needed a way to become more
dynamic.
 They wanted Animations, Interaction and other forms of small Automation as part of
the web of the future.
 The goal was to seek ways to expand the web and that is exactly what gave birth to
JavaScript.
 Brendan Eich, the father of JavaScript, was contracted by Netscape Communications to
develop a scheme for the browser.
 Java was considered unsuitable for the type of audie that would consume Mocha (pre-
version of JavaScript) such as scripters, amateurs, designers as it took a lot of effort and
time for such simple tasks.
 So, the idea was to make Java available for big, professional, component writers, while
Mocha would be used for small scripting tasks.
 In December 1995, Netscape Communications and Sun closed the deal and Mocha/Live
Script was renamed as JavaScript.
 Java was promoted as a bigger, professional tool to develop rich web components.
Introduction to JavaScript
 JavaScript is a high level, interpreted, programming language used to web pages
more interactive.
 It is a very powerful client-side scripting language which makes your webpage
livelier and more interactive.
 It is a programming language that helps you to implement a complex and beautiful
design on web pages.
 If you want your web page to look alive JavaScript is a must.
Features of JavaScript
 It is a Scripting Language and has nothing to do with Java. Initially, It was named
Mocha, then changed to Live Script and finally it was named as JavaScript.
  JavaScript is an object-based programming language that supports
polymorphism, encapsulation, and inheritance as well.
 You can run JavaScript not only in the browser but also on the server and any
device which has a JavaScript Engine.

What can JavaScript do?

 JavaScript is used to create beautiful web pages and applications. It is mostly used to
make your web look alive adds variety to the page. It is also used in smart watches.
 An example or this is the popular smart watch maker called Pebble that has created a
small JavaScript Framework called Pebble.js. JavaScript is also used to make Games. A
lot of developers are building small-scale games and apps using JavaScript. Most popular
websites like Google, Facebook, Netflix, Amazon, etc make use of JavaScript to build
their websites.
 If you are familiar with JavaScript, you would know the relationship between HTML, CSS
and JavaScript.
 HTML(Hypertext Markup Language) is more like the skeleton of the web. It is used for
displaying the web. On the other hand, CSS is like our clothes. It makes the web look
better. It uses CSS which stands for Cascading Style Sheets for styling purpose. Finally,
JavaScript is used to add life to a web page. Just like how kids move around using the
skateboard, the web also motions with the help of JavaScript.
Benefits of JavaScript
 JavaScript is preferred by many developers because of the following benefits:
 It is Easy to learn and implement JavaScript is a fast client-side programming
language.
 It has a rich set of Frameworks such as AngularJS and ReactJS. This is used to build
beautifully designed, interactive websites.
 It is a platform-independent programming language.
Fundamentals of JavaScript
 A lecture would then delve into the fundamental concepts of JavaScript, covering
essential syntax, data types, variables, operators, and control flow.
 Syntax: refers to the rules and structure of writing code in JavaScript. This includes
things like using proper punctuation, spacing, and keywords to create functioning
programs. For example, if you want to display a message on a webpage, you would
write something like:
console.log ("Hello, world!");
 Data Types: which are the different kinds of information that can be stored and
manipulated in JavaScript. Some common data types include:
 - Numbers: Used for storing numerical values, like 5 or 10.5
Strings: Used for storing text, like "Hello" or "JavaScript “
Booleans: Used for storing true or false values
Arrays: Used for storing lists of data, like [1, 2, 3]
Operators: are symbols that tell the computer to do something. For example,
arithmetic operators like + (addition) and - (subtraction) help us perform math
calculations.
Comparison operators: on the other hand, are used to compare values. For instance,
the == operator is used to check if two values are equal, while the > operator is used to
check if one value is greater than another.
 Logical operators: like && (and) and || (or) help us combine multiple conditions in our
code.
 Control Flow: Control flow is a way to control how a computer program runs by using
specific instructions. There are two main types of control flow statements: conditional
statements and looping structures.
 Conditional statements: like if-else statements, allow the program to make decisions
based on certain conditions.
 Looping structures, such as for and while loops, allow the program to repeat a certain
block of code multiple times.
Working with Data Structures
A lecture would then explore how to work with data structures in JavaScript, including
arrays, objects, and functions.
Arrays: Arrays are like containers that hold a collection of data, all of the same type.
Imagine a row of boxes, each holding a number. You can access each box by its position
(index).
EXAMPLE
numbers = [10, 20, 30, 40]
Here, numbers are an array containing four numbers. –
Accessing: To get the value at a specific position, use the index:
EXAMPLE
print (numbers [0]) # Output: 10
(first element)
print (numbers [2]) # Output: 30
(third element)
Manipulating: You can modify elements:
numbers [1] = 50
print(numbers) # Output: [10, 50, 30, 40]
Objects- are flexible and powerful. They allow us to organize data about things in a way
that reflects their real-world counterparts.

EXAMPLE
Let's say we want to represent a car. An object for this could be:
car = {
"brand": "Toyota",
"model": "Camry",
"color": "Silver",
"year": 2023
}
Here, we have an object called car. It stores information about the car using key-value
pairs:

- brand: "Toyota"

- model: "Camry"

- color: "Silver"

- year: 2023
Functions are like little machines that do a specific job. You give them some ingredients
(input), and they produce a result (output).

Example:

Imagine a function called greet that takes a name as input and prints a greeting.
def. greet(name):
print ("Hello,", name + “! “)
greet("Alice”) # Output: Hello, Alice!
greet("Bob”) # Output: Hello, Bob!

Here's what's happening:

1. def greet(name): This line defines a function named greet that takes a parameter
called name.

2. print ("Hello,", name + "!") This line is the code inside the function. It prints a
greeting using the provided name .
3. greet("Alice") and greet("Bob") These lines call the greet function, passing
different names as input.
Functions are useful because:

- Reusability: You can use the same function multiple times with different inputs.

- Organization: They break down code into smaller, manageable pieces.

- Readability: Code becomes easier to understand and maintain.

Interacting with the Document Object Model
A crucial aspect of JavaScript is its ability to interact with the Document Object Model
(DOM), which represents the structure of a web page.
DOM Manipulation: It explain how to use JavaScript to access, modify, and manipulate
elements of a web page, allowing for dynamic content updates and interactive
elements.
Events and Event Handling: How to handle user interactions with a web page using
events like clicks, hovers, and form submissions.
Advanced JavaScript Concepts

Depending on the level of the lecture, it might also cover more advanced concepts like:
Asynchronous Programming: It will discuss how to handle asynchronous operations,
such as network requests, using techniques like callbacks, promises, and async/await.
Object-Oriented Programming (OOP): It might introduce OOP concepts like classes,
inheritance, and polymorphism, which allow for more structured and reusable code.
Modern JavaScript Features: This cover new features introduced in recent JavaScript
versions (ES6+), such as arrow functions, modules, and destructuring.
Practical Examples and Projects
A JavaScript lecture would typically include practical examples and projects to reinforce
the concepts taught.
Try It Yourself" Examples: Interactive examples allow students to experiment with
code and see the results immediately.
Mini Projects: Small projects, like creating a simple game or a basic web application,
provide hands-on experience and help students apply their knowledge.
A JavaScript lecture would aim to provide a solid foundation in the language, covering
fundamental concepts, data structures, DOM manipulation, and potentially advanced
topics. Practical examples and projects would help students solidify their understanding
and develop their coding skills.