Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
6 views

JavaScript Course Notes With Examples

1. JavaScript is a dynamic programming language used widely in web development to add interactivity to web pages. It allows displaying alerts, writing to HTML, and changing HTML content. The document provides examples and challenges for basic JavaScript concepts. 2. JavaScript was created in 10 days in 1995 and has evolved significantly. Key events in its history include standardization in 1997 and the introduction of Node.js in 2009. Challenges are provided to research its changes over time and identify deprecated features. 3. The document covers JavaScript data types including primitive and reference types, along with examples like numbers, strings, Booleans. Challenges include creating variables of each type and identifying variable types.

Uploaded by

noman.ejaz
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views

JavaScript Course Notes With Examples

1. JavaScript is a dynamic programming language used widely in web development to add interactivity to web pages. It allows displaying alerts, writing to HTML, and changing HTML content. The document provides examples and challenges for basic JavaScript concepts. 2. JavaScript was created in 10 days in 1995 and has evolved significantly. Key events in its history include standardization in 1997 and the introduction of Node.js in 2009. Challenges are provided to research its changes over time and identify deprecated features. 3. The document covers JavaScript data types including primitive and reference types, along with examples like numbers, strings, Booleans. Challenges include creating variables of each type and identifying variable types.

Uploaded by

noman.ejaz
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

1.

Introduction of JavaScript
- Description: JavaScript is a high-level, dynamic, untyped, and interpreted
programming language. It is widely used in web development to add interactivity,
control multimedia, animate images, and much more.
- Examples:
1. Displaying an alert box: alert('Hello, World!');
2. Writing to HTML document: document.write('Hello, World!');
3. Changing HTML content: document.getElementById('demo').innerHTML = 'Welcome
to JavaScript!';
- Challenges:
1. Create a simple HTML page and use JavaScript to display your name on it.
2. Use JavaScript to calculate and display the result of 7 + 3 on a web page.

2. History of JavaScript
- Description: JavaScript was created by Brendan Eich in 1995 and initially
named 'Mocha', then 'LiveScript', and finally 'JavaScript'. It has evolved
significantly over the years, becoming the standard scripting language for the Web.
- Key Events:
1. 1995: JavaScript was developed in just 10 days by Brendan Eich at Netscape.
2. 1997: JavaScript was taken to ECMA International for standardization.
3. 2009: The introduction of Node.js marked a significant milestone in
JavaScript's history.
- Challenges:
1. Research and summarize how JavaScript has changed since its inception.
2. Find an old JavaScript feature that is no longer commonly used and explain
why it was replaced or deprecated.

3. Data Types
- Description: In JavaScript, data types are the classifications of data items.
It has two types of data types: Primitive (Number, String, Boolean, Undefined,
Null, Symbol) and Reference (Objects, Arrays, Functions).
- Examples:
1. Number: let age = 30;
2. String: let name = 'John';
3. Boolean: let isAdult = true;
- Challenges:
1. Create variables for each primitive data type and display them in the
console.
2. Write a function that identifies the data type of a given variable.

4. Values and Variables


- Description: Values are the simplest components in JavaScript, like numbers or
text. Variables are containers for storing data values. JavaScript uses 'let',
'const', and 'var' for variable declarations.
- Examples:
1. let city = 'New York';
2. const PI = 3.14;
3. var isAvailable = true;
- Challenges:
1. Declare three variables to store your favorite book's title, author, and
price.
2. Experiment with changing the values of variables declared with 'let' and
'const'.

5. let vs. const vs. var


- Description: 'let' allows you to declare variables that are limited in scope
to the block, statement, or expression where they are used. 'const' is similar but
creates a variable that cannot be reassigned. 'var' is function scoped and can be
redeclared and updated.
- Examples:
1. let age = 25; // Block-scoped variable
2. const MAX_SCORE = 100; // Constant variable
3. var name = 'Alice'; // Function-scoped variable
- Challenges:
1. Create a function demonstrating the difference in scope between 'let' and
'var'.
2. Try reassigning a 'const' variable and observe the error message.

6. Basic Operators
- Description: Operators are symbols that tell the JavaScript engine to perform
some sort of action. For example, arithmetic operators perform arithmetic on
numbers, and logical operators perform logical operations.
- Examples:
1. Arithmetic: let sum = 10 + 5;
2. Comparison: let isGreater = 10 > 5;
3. Logical: let result = (5 > 3) && (10 < 15);
- Challenges:
1. Use arithmetic operators to calculate the area of a rectangle.
2. Write a JavaScript expression using logical operators that checks if a
number is between 10 and 20.

7. Operator Precedence
- Description: Operator precedence determines the order in which operators are
evaluated in expressions. For example, multiplication has a higher precedence than
addition.
- Examples:
1. let result = 3 + 4 * 5; // Equals 23, not 35
2. let average = (90 + 95 + 85) / 3; // Parentheses change the order of
evaluation
- Challenges:
1. Write an expression with multiple operators and predict the outcome before
running it.
2. Experiment with parentheses to change the order of operations in a complex
expression.

8. Strings and Template Literals


- Description: Strings are used for storing text. Template literals are string
literals allowing embedded expressions, utilizing backticks and `${expression}`
syntax.
- Examples:
1. let greeting = 'Hello, ' + 'world!'; // String concatenation
2. let name = 'Alice'; let age = 25; let message = `My name is ${name} and I
am ${age} years old.`; // Template literal
- Challenges:
1. Create a template literal that includes variables and expressions.
2. Use string concatenation and template literals to create the same sentence
and compare the syntax.

9. String Methods
- Description: JavaScript provides many methods for string manipulation, such as
`length`, `toUpperCase()`, `toLowerCase()`, `indexOf()`, and `substring()`.
- Examples:
1. let text = 'Hello World'; let length = text.length; // Gets the length of
the string
2. let upperText = text.toUpperCase(); // Converts text to uppercase
3. let subText = text.substring(0, 5); // Extracts a part of the string
- Challenges:
1. Write a script to find the index of the first occurrence of a letter in a
string.
2. Create a function that takes a string and returns it with the first letter
of each word capitalized.

10. Decision Making and its Types


- Description: Decision-making in JavaScript is done using conditional
statements like if-else, switch, and ternary operators, allowing the code to make
decisions based on conditions.
- Examples:
1. if (age > 18) { console.log('Adult'); } else { console.log('Child'); }
2. switch (day) { case 1: console.log('Monday'); break; ... default:
console.log('Invalid day'); }
3. let canVote = age >= 18 ? 'Yes' : 'No';
- Challenges:
1. Write a script using if-else that gives a different greeting based on the
time of day.
2. Create a switch statement that assigns a school grade (A, B, C, D, F)
based on a test score.

11. Type Conversion and Coercion


- Description: Type conversion is the process of converting data from one type
to another. In JavaScript, this can be explicit (manual) or implicit (coercion).
- Examples:
1. Explicit: let numStr = String(50); // Converts number to string
2. Implicit: let result = '3' + 2; // Coerces number 2 to a string, result is
'32'
- Challenges:
1. Convert a boolean value to a string and then to a number.
2. Write a script where JavaScript performs type coercion and explain the
outcome.

12. Truthy and Falsy Values


- Description: In JavaScript, values are either "truthy" or "falsy". Falsy
values include `0`, `""`, `null`, `undefined`, `NaN`, and `false`. All other values
are truthy.
- Examples:
1. if (0) { ... } else { console.log('Falsy'); } // 0 is a falsy value
2. let truthyTest = 'Hello'; if (truthyTest) { console.log('Truthy'); }
- Challenges:
1. Create an array with truthy and falsy values and write a function to
filter out all falsy values.
2. Test different values to determine if they are truthy or falsy.

13. Equality Operators


- Description: JavaScript provides two types of equality operators: `==` (loose
equality, with type coercion) and `===` (strict equality, without type coercion).
- Examples:
1. 2 == '2'; // true, as loose equality performs type coercion
2. 2 === '2'; // false, as strict equality does not perform type coercion
- Challenges:
1. Compare different values using both equality operators and note the
differences.
2. Write a function that strictly compares two given values, regardless of
their type.

14. Boolean Logic


- Description: Boolean logic in JavaScript involves logical operators like `&&`
(AND), `||` (OR), and `!` (NOT) to form logical expressions.
- Examples:
1. let result = (age >= 18) && (age <= 60); // true if age is between 18 and
60
2. if (!(age < 18)) { console.log('Adult'); } // Uses NOT operator
- Challenges:
1. Write a condition using the AND operator that checks two different
conditions.
2. Use the OR operator to set a default value for a variable.

15. Logical Operators


- Description: Logical operators in JavaScript are used to perform logical
operations and return a boolean value. The main logical operators are `&&` (AND),
`||` (OR), and `!` (NOT).
- Examples:
1. let isAdult = age > 18 && age < 60; // Both conditions need to be true
2. let isTeenager = age > 13 || age < 19; // Either condition can be true
- Challenges:
1. Create a condition that checks if a number is either less than 10 or
greater than 30 using logical operators.
2. Write a function that takes a boolean value and returns its negation.

16. Statements and Expressions


- Description: In JavaScript, an expression is any unit of code that resolves
to a value, while a statement performs an action and does not resolve to a value.
- Examples:
1. Expression: let sum = 10 + 5; // Resolves to 15
2. Statement: if (age > 18) { console.log('Adult'); } // Performs an action
- Challenges:
1. Identify the expressions and statements in a given code snippet.
2. Write a script with a mix of JavaScript statements and expressions, and
explain each one.

17. Switch Statement


- Description: The switch statement in JavaScript is used for decision making
where a variable is compared with multiple values.
- Examples:
1. switch (day) { case 'Monday': ...; break; case 'Tuesday': ...; break;
default: ...; }
2. switch (grade) { case 'A': console.log('Excellent'); break; ...; }
- Challenges:
1. Write a switch statement that assigns a category ('Child', 'Teen',
'Adult') based on age.
2. Create a switch statement to handle different key presses (e.g., 'A', 'B',
'C').

18. Ternary Operator


- Description: The ternary operator in JavaScript is a shortcut for the if-else
statement and is written using the `?` and `:` symbols.
- Examples:
1. let result = age >= 18 ? 'Adult' : 'Child';
2. let message = isMember ? 'Discount Applied' : 'Full Price';
- Challenges:
1. Use the ternary operator to assign a variable based on the result of a
comparison.
2. Rewrite an if-else statement as a ternary operator.

19. JavaScript Releases and Versions


- Description: JavaScript's standard, ECMAScript, has had several versions over
the years, each bringing new features and improvements.
- Key Versions:
1. ES5 (2009): Introduced 'strict mode', JSON support, and more.
2. ES6/ES2015: Brought let/const, arrow functions, classes, promises, and
template literals.
3. ES2020: Included features like BigInt, dynamic import, optional chaining,
and nullish coalescing.
- Challenges:
1. Research the differences between ES5 and ES6 and list three major changes.
2. Experiment with a feature introduced in ES2020 or later in your JavaScript
code.

20. Strict Mode


- Description: 'Strict mode' in JavaScript is a way to enforce stricter parsing
and error handling in your code. It helps catch common coding bloopers, prevents,
or throws errors for unsafe actions.
- Examples:
1. "use strict"; // Activates strict mode
2. Trying to use an undeclared variable will throw an error in strict mode.
- Challenges:
1. Write a script with strict mode enabled and intentionally create an error
to see how it's handled.
2. Convert a non-strict mode script to strict mode and note any changes in
behavior or errors.

21. Function and Function Declaration


- Description: Functions are reusable blocks of code. A function declaration
defines a function with the specified parameters.
- Examples:
1. function greet(name) { console.log('Hello ' + name); }
2. function add(a, b) { return a + b; }
- Challenges:
1. Create a function that takes two parameters and returns their sum.
2. Write a function that takes an array and returns the number of elements in
it.

22. Function Expression


- Description: A function expression in JavaScript is a way to define a
function inside an expression. It can be named or anonymous and can be assigned to
a variable.
- Examples:
1. let greet = function(name) { console.log('Hello ' + name); };
2. const square = function(number) { return number * number; };
- Challenges:
1. Write an anonymous function expression that calculates and returns the
area of a circle.
2. Create a function expression with a name and invoke it immediately after
its declaration.
23. Arrow Function
- Description: Arrow functions provide a concise syntax for writing function
expressions. They are anonymous and change the way `this` behaves.
- Examples:
1. const add = (a, b) => a + b;
2. const isEven = number => number % 2 === 0;
- Challenges:
1. Rewrite a traditional function expression as an arrow function.
2. Create an arrow function that takes an array of numbers and returns the
sum.

24. Functions Calling Other Functions


- Description: In JavaScript, functions can call other functions. This is a
useful technique for dividing tasks into smaller, reusable pieces.
- Examples:
1. function square(x) { return x * x; }
function sumOfSquares(a, b) { return square(a) + square(b); }
2. function greet(name) { return 'Hello ' + name; }
function greetLoudly(name) { return greet(name).toUpperCase(); }
- Challenges:
1. Write a function that calls two other functions to perform a calculation.
2. Create a nested function scenario where one function processes the output
of another function.

25. Reviewing Functions


- Description: Reviewing functions involves understanding function declaration,
expression, arrow functions, and the use of functions in different contexts.
- Examples:
1. function declaration: function add(a, b) { return a + b; }
2. function expression: const subtract = function(a, b) { return a - b; };
3. arrow function: const multiply = (a, b) => a * b;
- Challenges:
1. Write three functions, one for each type (declaration, expression, arrow),
that perform the same operation and compare their syntax.
2. Modify an existing function to accept callback functions and perform an
operation using the callback.

26. Arrays
- Description: Arrays in JavaScript are used to store multiple values in a
single variable. They are objects that represent a list of items.
- Examples:
1. let fruits = ['Apple', 'Banana', 'Cherry'];
2. console.log(fruits.length); // Outputs the number of items in the array
- Challenges:
1. Create an array and add a new item to the end of the array using an array
method.
2. Write a function that takes an array as an argument and returns the last
element.

27. Array Methods and Operations


- Description: JavaScript arrays come with a variety of methods for
manipulating and traversing the array, such as `push`, `pop`, `shift`, `unshift`,
`slice`, and `splice`.
- Examples:
1. let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.push('Orange'); // Adds 'Orange' to the end
2. let firstFruit = fruits.shift(); // Removes and returns the first element
- Challenges:
1. Use array methods to reverse an array and then find the index of a
specific element.
2. Create an array and use `splice` to add and remove elements from it.

28. Objects
- Description: Objects in JavaScript are collections of properties. Properties
are a key-value pair where the key is a string and the value can be any type.
- Examples:
1. let person = { name: 'John', age: 30, isEmployed: true };
2. console.log(person.name); // Accesses the name property
- Challenges:
1. Create an object representing a car with properties like brand, model, and
year.
2. Write a function that takes an object as an argument and prints all its
properties and values.

29. Dot vs. Bracket Notation


- Description: In JavaScript, you can access object properties using dot
notation or bracket notation. Dot notation is more straightforward, while bracket
notation is more dynamic.
- Examples:
1. let person = { name: 'Alice', age: 25 };
console.log(person.name); // Dot notation
2. let property = 'age';
console.log(person[property]); // Bracket notation
- Challenges:
1. Create an object and access its properties using both dot and bracket
notations.
2. Use bracket notation to access a property with a dynamic key (e.g., stored
in a variable).

30. Object Methods


- Description: Objects can contain functions as their properties, known as
methods. Methods are used to define behavior for an object.
- Examples:
1. let person = { name: 'John', greet: function() { console.log('Hello, ' +
this.name); } };
person.greet(); // Calls the greet method
2. let calculator = { add: function(a, b) { return a + b; } };
console.log(calculator.add(5, 10)); // Calls the add method
- Challenges:
1. Define an object with a method that calculates and returns the perimeter
of a rectangle.
2. Create an object with a method that takes another object as an argument
and compares their properties.

31. Loops and Its all Types


- Description: Loops in JavaScript are used to execute a block of code multiple
times. The main types of loops are `for`, `while`, and `do-while`.
- Examples:
1. for (let i = 0; i < 5; i++) { console.log(i); }
2. let i = 0; while (i < 5) { console.log(i); i++; }
3. let j = 0; do { console.log(j); j++; } while (j < 5);
- Challenges:
1. Write a for loop that iterates in reverse from 10 to 1.
2. Create a while loop that continues as long as a randomly generated number
is not 5.

32. Break and Continue


- Description: The `break` statement is used to exit from a loop before it has
finished its natural cycle. `continue` is used to skip the current iteration of a
loop and continue with the next one.
- Examples:
1. for (let i = 0; i < 10; i++) { if (i === 5) { break; } console.log(i); }
2. for (let i = 0; i < 10; i++) { if (i === 5) { continue; }
console.log(i); }
- Challenges:
1. Write a loop that uses `continue` to skip odd numbers.
2. Create a nested loop that breaks out of the inner loop when a certain
condition is met.

You might also like