0 ratings0% found this document useful (0 votes) 11 views10 pagesJs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here.
Available Formats
Download as PDF or read online on Scribd
‘wraai24, 229 AM Projects | 100x005
Javascript 101 1of5
ritpssprojects.100xcovs.com/plfjavascript-1Wavaseript 101-1 10 ‘912824, 9:39 AM Projects | 100xDevs
5 https://x.com/__Raiders/status/1820089916287828123
= j, Jovascriptol tofS + 5044/status/1820090993045020979
Bounty = $25 to each of you!
Javascript - The basics
Web development
Web development involves writing a lot of HTML, CSS and JS code.
Historically (and even today to some extend), browsers could only
understand HTML, CSS and JS
Any website that you see, is a bunch of HTML, CSS and JS files along with
some assets (images, videos etc)
Facts/Callouts
1. React, NextJS are frameworks . They compile down to HTML, CSS, JS in the
end. That is what your browser understands.
2. When you run your C++ code on leeteode , it does not run on your
browser/machine. It runs somewhere else. Your browser can't (almost)
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 2110 ‘912824, 9:39 AM Projects | 100xDevs
3.l€ someone asks — What all languages can your browser interpret, the
=}! Javascript 101 1ofs JS and WebAssembly. It can, technically, run
v++*/RUST Code that is compiled down to Wasm
Before we proceed, do one of the following -
1. Create an account on replit
2, Install Node,js locally
3. Keep your browser console open for testing locally
Properties of JS
Every language comes with it's unique set of features.
Javascript has the following -
1. Interpreted
JavaScript is an interpreted language, meaning it's executed line-by-line at
runtime by the JavaScript engine in the browser or server environment,
rather than being compiled into machine code beforehand.
Upsides =
unning your code
Downsides =
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 30 ‘912824, 9:39 AM Projects | 100xDevs
1 Performance Overhead:
=, Javascript 101 1of5 he errors
2. Dynamically Typed
Variables in JavaScript are not bound to a specific data type. Types are
determined at runtime and can change as the program executes
C++ Code (won't compile)
#include ©
int main() {
int a =1;
a = "hello";
a = true;
}
JS Code (will compile)
a= true;
console log(a)
3. Single threaded
JavaScript executes code in a single-threaded environment, meaning it
processes one task at a time. We will dive deeper into this next week.
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 ano ‘912824, 9:39 AM Projects | 100xDevs
4 Garhane collected
= __ Javascript 101 1of . -
— «eully Manages memory allocation and deallocation
through garbage collection, which helps prevent memory leaks by
automatically reclaiming memory used by objects no longer in use.
Conclusion
Is JS a good language?
Yes and no. It is beginner friendly, but has a lot of performance overhead.
Bun is trying to solve for a lot of this, but there’s a long way to go before JS
can compete with languages like C++/Rust
Syntax of Javascript
1. Variables
Variables are used to store data. In JavaScript, you declare variables using
var, let, OF const.
let name = "John", // Variable that can be reassigned ©
const age = 30; —_// Constant variable that cannot be reassigned
:clare variables, function-scoped
Y Assignment
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 510 sw224, 999 AM Projects | 100:00re
Create a variable for each of the following: your favorite color, your
i€ Javascript 101 1ofs i, ANd whether you like pizza. Use appropriate
valiuvre aeciuruuans (let, const, or var ). Try logging it using consolelog
2. Data types
let number = 42; || Number ©
let string = "Hello World’; // String
let isActive = false; —_// Boolean
let numbers = [12,3]; // Array
3. Operators
let sum = 10 + 5; // Arithmetic operator ®
let isEqual = (10 === 10); // Comparison operator
let isTrue = (true && false); // Logical operator
4. Functions
|| Function declaration ©
function greet(name) {
return "Hello, " + name;
}
|| Function call
let message = greet("John’); // “Hello, John”
V Assignment #1
Write a function sum that finds the sum of two numbers.
Side quest - Try passing in a string instead of a number and see what
happens?
v Assignment #2
Write a function called canvote that returns true or false if the age of a
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 610 ‘912824, 9:39 AM Projects | 100xDevs
5. 1t/Else
= Javascript 101 1of 5
console.log("You are an adult);
yelse {
console.log("You are a minor.’);
}
v Assignment
Write an if/else statement that checks if a number is even or odd. If it's
even, print "The number is even,’ Otherwise, print "The number is odd."
6. Loops
|] For loop ©
for (let i = 0;i < 5; i++) {
console.log(i); // Outputs 0 to 4
}
1] While loop
let j = 0;
while (j <5) {
console.log(j); // Outputs 0 to 4
itt;
}
¥ Assignment
Write a function called sum that finds the sum from 1to a number
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 70 ‘912824, 9:39 AM Projects | 100xDevs
7mnlev types
= Javascript 101 1of5
Objects
An object in JavaScript is a collection of key-value pairs , where each key is
a string and each value can be any valid JavaScript data type, including
another object.
console.log("Harkirats age is " + user.age);
Vv Assignment #1
Write a function that takes a user as an input and greets them with their
name and age
Vv Assignment #2
Write a function that takes a new object as input which has name , age
and gender and greets the user with their gender (Hi Mr/Mrs/others
harkirat, your age is 21)
v Assignment #3
Also tell the user if they are legal to vote or not
Arrays
Arrays let you group data together
const tatalUsers = users.length;
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 ano sw224, 999 AM Projects | 100:00re
const firstUser = users[0];
=, Javascript 101 ofS
Write a function that takes an array of numbers as input, and returns a
new array with only even values. Read about filter in JS
Array of Objects
We can have more complex objects, for example an array of objects
const users = [{ ©
name: ‘Harkirat,
const userl = users[0]
const userlAge = users[0].age
Vv Assignment
Write a function that takes an array of users as inputs and returns only
the users who are more than 18 years old
Object of Objects
We can have an even more complex object (object of objects)
const userl = { ©
name: ‘harkirat’,
age:19,
address: {
city: "Delhi",
country: "India".
htps:ifprojects.100xdevs.comipatjavascript1/Javascript-101-4 eno ‘112824, 9:39 AM Projects | 100x005
}
E ¢ davascript 0 1018 3.5 city:
Y Assignment
Create a function that takes an array of objects as input,
and returns the users whose age > 18 and are male
ntps:ifprojects.100xdevs.comipatjavasctipt-1/Javascrip-101-1
s0110
