JavaScript Basics: Learn Variables, Loops, and Functions for Beginners
Introduction to JS
JavaScript is a versatile, dynamically typed programming language for interactive web applications. It supports both client-side and server-side development.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro to JS</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
console.log("Hello World");
Variables, Data Types, and Objects
Variables in JavaScript are basic tools used to store and manage data. They are like containers containing different information types, such as numbers and text. Data types in JavaScript categorize the kind of data a variable can hold. Common data types include:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables DataTypes and Objects</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables DataTypes and Objects</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
Conditional Statements
Conditional statements in programming let a program decide what to do based on conditions being true or false. They help programs respond to different inputs or situations by controlling the execution flow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Statememts</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
console.log("Hello World");
// let age=45;
// if(age>=18){
// console.log("You can Vote");
// }
// else{
// console.log("You can vote");
// }
let marks=45;
if(marks>=90){
console.log("Your Grade is A")
}
else if(marks>=90){
console.log("Your Grade is B")
}
else if(marks>=90){
console.log("Your Grade is C")
}
else{
console.log("Your Grade is D");
}
Introduction to Loops
Loops are iterative statements in programming that allow code to be executed multiple times, making it easier to handle repetitive tasks efficiently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loops</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
// console.log("INtroduction to Loops");
// For Loop
// for(let i=0;i<=10;i++){
// console.log(i);
// }
// for(let i=10;i>=1;i--){
// console.log(i);
// }
// let obj={
// "name":["Sam","Atlman"],
// "age":[20,21]
// }
// for(let i in obj){
// console.log(i);
// }
let i=0;
while(i<=10){
console.log(i);
i++;
}
Functions
Functions are the code blocks that perform specific and often repetitive tasks. They promote cleaner code by allowing reuse and reducing complexity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Functions</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
// function greet(name){
// console.log("Hey "+name+ " Good Morning");
// }
// greet("Sam");
// function add(a,b){
// console.log(a+b);
// }
// add(10,20);
// function add(a,b,c=80){
// return a+b+c;
// }
// let res=add(10,20);
// console.log(res);
let fun1=(para)=>{
return " i am arrow "+para;
}
fres=fun1(15);
console.log(fres);
Challenges and Soltuions
Challenge: I had difficulty understanding the arrow function syntax and how it works.
Solution: I found a helpful resource in the W3Schools documentation that explained how arrow functions operateChallenge: Understanding how a string concatenates with a number and another string.
Solution: When I explored the MDN documentation, I gained full clarity on this concept.
Resources Used:
Code with Harry tutorial: Watched tutorials from his channel, and the link is given below.
W3Schools documentation: When I got stuck on some syntax, I referred to this documentation as well as for challenges too.
MDN documentation: When I got stuck in string concatenation, I have used this resource.
