Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

15 Lecture JavaScript

Uploaded by

sahilrautmotog3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

15 Lecture JavaScript

Uploaded by

sahilrautmotog3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

Front-End

JavaScript

Felix - IT Systems
JS ( JavaScript ) is Case Sensitive

• All JS identifiers are case sensitive.

• Variables age and Age, are two different variables.


JS Character Set

• JS uses the Unicode character set.

• Unicode covers almost all the characters, punctuations, and symbols in


the world.

• Unicode defines the characters and their code points, while UTF-8 is one of
the encoding schemes used to represent those Unicode characters in
binary form.

• UTF-8 is a popular choice for encoding Unicode text due to its efficient use
of space and compatibility with ASCII.
Difference between UTF-8 and Unicode
UTF-8 and Unicode are related but different concepts in the world of character
encoding and text representation.

-> Unicode:

• Unicode is a character encoding standard that aims to cover virtually every


character, symbol, and emoji from all written languages worldwide.

• Unicode assigns a unique numeric code point to each character, which can be
represented as a hexadecimal value (e.g., U+0041 for the Latin letter "A").

• Unicode is a character set, not an encoding. It defines the characters and their
code points, but it doesn't specify how these characters should be represented in
binary form.
-> UTF-8
• UTF-8 (Unicode Transformation Format - 8-bit) is one of several encoding
schemes used to represent Unicode characters in binary form.

• UTF-8 is designed to be space-efficient. It uses variable-length encoding,


where common characters take up fewer bytes (1 byte for ASCII characters)
and less common characters take up more bytes (up to 4 bytes).

• UTF-8 is backward compatible with ASCII, meaning that ASCII characters


are represented using a single byte in UTF-8, ensuring compatibility with
existing ASCII text.

• UTF-8 is widely used on the internet and in many software systems


because of its efficiency and compatibility.
JS and Camel Case

• Developer have used different ways of joining multiple words into one
name…

first_name, last_name

FirstName, LastName

firstName, lastName
JavaScript Comments
• Comments can be used to explain JS code.

• Single Line Comments


Single line comments start with //

• Multi-line Comments
Multi-line comments start with /* and end with */.
Variable
JavaScript variables are containers for storing data values.

JavaScript Variables can be declared in 3 ways…

• Using var
• Using let
• Using const
Rules for Declaring variables

• Names can contain letters, digits, underscores, and dollar signs.

• Names must begin with a letter.

• Names can also begin with $ and _ .

• Names are case sensitive (i and I are different variables).

• Reserved words cannot be used as variable name.


Example

<p id="demo"></p>

<script>
var i = 15;
var j = 10;
var total = i + j;

document.getElementById("demo").innerHTML = "Total is " + total;


</script>
Example
<body>

<p id="p1"></p>

<script>
const x = 15;
const y = 10;
const total = x + y;
document.getElementById("p1").innerHTML = total;
</script>

</body>
Example
<body>

<p id="p1"></p>

<script>
let x = 15;
let y = 10;
let total = x + y;
document.getElementById("p1").innerHTML = total;
</script>

</body>
One Statement Code
• You can declare many variables in one single line.

var user = “Felix ", city= “Pune", number = 987654;

or

var user = “Felix ",


city= “Pune",
number = 987654;
Note
• Use const if the value should not be changed

• Use const if the type should not be changed (Arrays and Objects)

• Use let if you can't use const

• Use var if you MUST support old browsers


JS Identifiers

• All JavaScript variables must be identified with unique names.

• These unique names are called identifiers.

• Identifiers can be short names (like i and j) or more descriptive names


(age, name, result etc. ).
JavaScript Operators
• Operators is a symbol that used to perform some operation.

• Operators allow you to manipulate and work with data in


various ways, such as performing mathematical calculations,
comparing values, assigning values, and more.
Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
Assignment Operators

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Example
<p id="demo"></p>

<script>
var i = 5;
var j = 2;
var value = i * j;
document.getElementById("demo").innerHTML = "Value is " + value;
</script>
Output
Example

<p id="demo"></p>

<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
Output
Comparison Operators
Operator Description

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Logical Operators

Operator Description

&& logical and


|| logical or
! logical not
Example

<p id="demo"></p>

<script>
var x = 10;
x++;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
Output
JS Data Types
JS variables can hold many data types like
numbers, strings, objects and more…

In programming, data types is an important concept.

To be able to operate on variables, it is important to know something about


the type.

Without data types, a computer cannot safely solve this:

var x = 16 + “John";
Data Types in JS

<script>
var i = 16; // Number

var name = "Felix"; // String

var obj = {firstName: "John", lastName: "Doe"}; // Object


</script>
Example

<p id="demo"></p>

<script>
var first = "Felix";
var second = 'ITs';

document.getElementById("demo").innerHTML =
first + "<br>" +
second;
</script>
Output
JavaScript Arrays

• An array is a special variable, which can hold more than one


value.

• JavaScript arrays are written with square brackets.

• Array items are separated by commas.


Example

<p id="demo"></p>

<script>
var names = ["John", "Doe", "Andy"];

document.getElementById("demo").innerHTML = names[1];
</script>
Output
JavaScript Objects

• In JavaScript, almost "everything" is an object.

• All JavaScript values, except primitives, are objects

• JavaScript objects are written with curly braces {}.

• Object properties are written as name:value pairs, separated by


commas.
Example
<p id="demo"></p>

<script>
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
Output
Primitives
• A primitive value is a value that has no properties or methods.

• 5.5 or 3.5 is a primitive value

• A primitive data type is data that has a primitive value.

JavaScript defines some types of primitive data types:

• string
• number
• boolean
• null
• undefined
• Symbol etc..
typeof Operator

You can use the JS typeof operator to find the type of a JS variable.
Example
<p id="demo"></p>

<script>

var i = 10;
var name = "Felix";
var j = false;

document.getElementById("demo").innerHTML =
typeof i + "<br>" +
typeof name + "<br>" +
typeof j;
</script>
Output
Function

• Function is a block of code designed to perform a particular task.

• Function is executed when calls it.


Function Syntax

• Function is defined with the function keyword.

function name(parameter1, parameter2, parameter3) {


// code to be executed
}
Example

<p id="p1">Hello World</p>

<button type="button" onclick="changeText()">Click here</button>

<script>
function changeText() {
document.getElementById("p1").innerHTML = "Hello from JS";
}
</script>
Output
Why we use functions ?

- Reuse code.

You can define the code once, and use it many times.
Exmaple

<p id="p1">Hello World</p>

<button type="button" onclick="sum(10,10)">Click to sum</button>


<button type="button" onclick="sum(20,20)">Click sum</button>

<script>
function sum(a,b) {
return document.getElementById("p1").innerHTML = a+b;
}
</script>
Output
Strings
JavaScript strings are for storing and manipulating text.

A JavaScript string is zero or more characters written inside


quotes.

var txt = “Hello World";

You can use single or double quotes


Find length of string

<p id="demo"></p>

<script>
var string = "Welcome to Felix ITs ";
document.getElementById("demo").innerHTML = string.length;
</script>
Output
String Concate

<p id="demo"></p>

<script>
var s1 = "Hello ";
var s2 = "World"
document.getElementById("demo").innerHTML = s1 + " " + s2;
</script>
Output
Search String

<p id="demo"></p>

<script>
var s1 = "Hello from JavaScript";
var s2 = s1.search('Java');
document.getElementById("demo").innerHTML = s2;
</script>
Output
slice() Method

<p id="demo"></p>

<script>
var s1 = "Hello from JavaScript";
var s2 = s1.slice(6,10);
document.getElementById("demo").innerHTML = s2;
</script>
Replace String

<p id="demo"></p>

<script>
var s1 = "Hello from JavaScript";
var s2 = s1.replace("Hello", "HELLO");
document.getElementById("demo").innerHTML = s2;
</script>
Output
Lowercase, Uppercase

<p id="demo"></p>

<script>
var s1 = "Hello from JavaScript";
var s2 = s1.toLowerCase();
var s3 = s1.toUpperCase();
document.getElementById("demo").innerHTML =
s2 + "<br>" + s3;
</script>
Output
trim() method

<p id="demo"></p>

<script>
var s1 = " Hello from JavaScript ";
var s2 = s1.trim();
document.getElementById("demo").innerHTML = s2;
</script>
Output
Thank You

You might also like