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

JavaScript

The document provides an overview of JavaScript variables, data types, and methods for manipulating arrays and objects. It covers variable declaration using var, let, and const, as well as the differences in scope and redeclaration. Additionally, it discusses DOM manipulation techniques and how to create and manage elements within a web page using JavaScript.

Uploaded by

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

JavaScript

The document provides an overview of JavaScript variables, data types, and methods for manipulating arrays and objects. It covers variable declaration using var, let, and const, as well as the differences in scope and redeclaration. Additionally, it discusses DOM manipulation techniques and how to create and manage elements within a web page using JavaScript.

Uploaded by

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

Variables:

==========
^ To store the information and use it again.
^ Three ways to create the variables.
i. var
ii. let
iii. const

^ To print the value in Js


console.log(<variable name>)
^ This print statement is used when we want to use the Developer console page in
html inspect.
EX:
---
<html>
<body>
<script>
var num1 = 10
console.log(num1)
let num2 = 20
console.log(num2)
const num3 = 30
console.log(num3)
</script>
</body>
</html>

^ If we use const we should assign the value their itself and also we cannot change
the value again.
^ Using let and const we only use once with the same name but in var we can use any
number of times.
* Redeclare is possible in var but not in let and const. var is global scope and
let, const are block level scope.
Ex:
---
var num1 = 20
var num1 = 30 --> These two will give output.

let num2 = 200


let num2 = 300
const num3 = 40
const num3 = 50 --> The above let and const will give error.

Data types:
===========
^ There are three types of datatypes.
1. Primitive: We can store only one value
i. Number
ii. String
iii. Boolean
2. Special:
i. Undefined
ii. Null
3. Composite: We can store multiple values.
i. Array [1,true,'Rama']
ii. Object {'name':"Rama",'age':27}
* Here, name is key and Rama is value
* This object is like list and dictionary.
^ If we want know it is of which datatype
console.log(typeof(<variable name>))
Ex:
---
var num1 = 10
console.log(typeof(num1))

Undefined:
----------
^ If we create a variable and does not assign any value to it is called undefined
value.
Ex:
---
var d;
console.log(d);

Template Literal(``):
=====================
^ To print multiple var in a console.
Ex:
---
console.log(`hello ${var name} Worrld`)

var a = 10;
var b = 20;
console.log(`sum of ${a} and ${b} is ${a+b}`)

* prompt is used to take input from the user.


* var num1 = +prompt("Enter a number:")
Here + will convert input from string to int.

array:
======
^ To add group values we use array and those values can be any datatype

Ex":
----
var arr = [32,32,"wfwef"]
(or)
var arr = new array(23,54,65,"hdgaj")

Methods in array:
=================
1. push:
--------
^ To add element in the array that to in last.

Ex:
---
var num = [34,54,4565,54]
num.push(245)
Output:
-------
num = [34,54,4565,54,245]

2. pop:
-------
^ To remove last element of the array.
num.pop(245)

3. unshift:
-----------
^ To add the element in first.

4. shift:
---------
^ To remove the first element.

5. indexof:
-----------
^ To know the index value of a element in a array.
^ If we have duplicate of elements in a array in that case if will give the first
value position of that duplicate values.

6. Slice:
---------
^ If we want the range of values in a array.

Ex:
---
console.log(num.slice(1,4))
^ It will give the values of 1 to 4.
^ It will give values from frist yo end-1.

Default parameters:
===================
^ If we don't give any value while calling the function then also the execution
will be done.

Ex:
---

^ First, Normal case

function sum(num1,num2)
{
var res = num1 + num2
return res;
console.log(res)
}
sum(9)

^ Here, the output will be error because the function is expecting two parameters
and user is giving only one parameter.

** Now we use Default parameters

function sum(num1,num2=1)
{
var res = num1 + num2
return res;
console.log(res)
}
sum(9)

^ Here the Output will be 9 .


^ If we give any value to second parameter it will consider user given input and
default value will be changed with user input.

Rest parameters:
================

^ Here, If we don't know how many parameters are required then we will use this.

Ex:
---

function product(num1=1,num2,...arr)
{
var res = num1 * num2
for(num of arr)
{
res = res * num
}
return res;
}
product(2,4,3,2)

Ouput:
48

Set:
====

^ Set is also same like array but in set we cannot have duplicate values. Also we
can say group of unique values.

Ex:
---

let s1 = new Set() --> To create set.


s1.add(12)
s1.add(11) --> To add single value.
s1.add(91)
.add(39)
.add(48) --> To add multiple values

Output:
---------
{12,11,91,39,48}

^ To convert the array into set.

Ex:
---

a1 = [12,23,34,12,45,23]

b1 = new Set(a1)
console.log(a1)

Output:
-------
{12,23,34,45}
^ To delete the set.
s2.clear()

^ To know the size of set.


s2.size()

^ To know if a value is present or not in a set.


s2.has('<The value which we want to know>')

Objects:
=======

^ In object the data can be stored as key-value pairs.

Ex:
---
var a = {name: Rama, DOB: 9th }
console.log(name)
(OR)
console.log(a.name)
Output:
-------
Rama

To add new properties to object:


--------------------------------
^ obj["key"] = value
(OR)
obj.key = movie

Using new Operator Object Constructor:


--------------------------------------
Syntax:
-------
let movie = new object()
Ex:
---
movie.buget = "200crores"

Create Constructor Function:


----------------------------

function user(name,age)
{
this.name = name;
this.age = age;
}

Create object with constructor function call:


---------------------------------------------

let user1 = new user("Rama",25)

^ If we want to add some more fields in the created object

user1.place = "Hyderabad"

DOM(Document Object Model):


===========================

^ By using HTML DOM JS can access, change or remove any elements of HTML document
and also can create new elements at any position.

^ When a webpage loaded, browser will create DOM of webpage.

Methods to select HTML elements:


================================

1. document.getElementById("idname")

Ex:
---
<body>
<div id = "first">
<h1>This is heading</h1>
<p>This is paragraph</p>
</div>
<script>
let x = document.getElementById("first")
console.log(x)
</script>
</body>

2. document.getElementByClassName("classname")

** If we use Id it will return only one value because Id will be unique and if we
use class name we can call multiple values.

Ex:
---
<body>
<div class = "first">
<h1>This is heading</h1>
<p>This is paragraph</p>
</div>
<div class = "first">
<h1>This is heading</h1>
<p>This is paragraph</p>
</div>

<script>
let x = document.getElementByClassName("first")
console.log(x)
</script>
</body>

3. document.getElementByTagName("tagname")

4. document.querySelector("class/#id/tagname") --> It will first matched element


only.

5. document.querySelectorAll("class/#id/tagname") --> It will all matched element.

6. document.head
7. document.title
8. document.links --> To get all anchor tags
9. document.forms
10. document.images
11. document.scripts

Create a element using DOM:


---------------------------

^ It will add element last of that body which we selected.

<body>
<div id = "first">
<p>This is paragraph</p>
</div>
<script>
var x = document.createElement('p') --> add only paragraph tag
n.innerText = "This is newly added paragraph" --> add text to that paragraph
var parent = document.getElementById("first") --> select that body
parent.appendChild(x) --> add that paragraph to that
body i.e.., div tag
</script>
</body>

To add element before another element:


--------------------------------------

You might also like