Scribd
Upload
12 views

Javascript

Uploaded by

Cherry Charan Tej
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Javascript

Uploaded by

Cherry Charan Tej
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Javascript

What is java-script?
➢ Javascript is a high-level programming language primarily used for creating interactive
and dynamic web pages.
➢ Javascript runs on the client side and executes by the user's web browser.
Javascript libraries in frontend
➢ Html
➢ Css
➢ Javascript
➢ Reactjs
➢ Angularjs
➢ Vue
➢ Next
➢ Typescript
➢ Gatsby
➢ React Native
Javascript libraries in the backend
➢ Expressjs
➢ Nextjs
➢ Gatsbyjs
➢ Nuxtjs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<!-- <script>
alert("hello world"); --internally
</script> -->
<script src="project.js"> //externally

</script>
</body>
</html>

MARUTHI CHARAN TEJ 1


Variables in javascript
➢ In js, variables are used to store and manipulate data.
➢ They serve as named containers that hold value
Types of variables
✓ Var →reinitialization and redeclaration both are possible
✓ Let →reinitialization is possible but not redeclaration
✓ Const→both reinitialization and redeclaration is not possible
//----------------------------variables--------------------------------
a="apple";
console.log(a);
// -----
var n1="hi";
console.log(n1);
var n1="hello world"
console.log(n1);
// -----
let n2="tej";
console.log(n2);
// let n2="jos";// it throws an error that is variable is already declared
n2="jos";
console.log(n2);//redeclaration is not possible but reinitialization is possible
//--------
const n3="cherry";
console.log(n3);
// const n3="priya" redeclaration is not possible in const
// n3="priya";//reintialization is not possible in const throws assignment to
constant variable
// console.log();

Datatypes in javascript
➢ String
➢ Number
➢ Boolean Primitive datatypes
➢ Null
➢ Undefined
➢ Array
➢ Object Complex datatypes

MARUTHI CHARAN TEJ 2


//-------------------------------------Datatypes--------------------------------
//---primitive datatypes-----------
var a="this is a text mssge";
console.log(a);
console.log(102030);//Number datatype
console.log(10>20);//Boolean
let sampleView=null;
console.log(sampleView);
let app;
console.log(app);
//-----complex datatypes-------
// [] //denotes array
// {key:value}//key pair value
let fruits =["apple", "orange",42,{name: "mango" }];
console.log(fruits);
const game={
cricket:"virat",
football:"messi"
}
console.log(game);
console.log(typeof game)//it tells the type of datatype
console.log(typeof fruits);
console.log(Array.isArray(fruits)); // it tells whether it is array or not

//-----------------------to show text on a webpages --------------------


document.write("hello hi bye to show on a webpages <br/> <br/> ");
document.write(123456);
document.write("<h1>this is a heading text</h1>");

Operators &Expressions
➢ Arithmetic operators
➢ Assignment operators
➢ Comparison operators
➢ Logical operators
Arithmetic operators
✓ Addition
✓ Subtraction
✓ Multiplication
✓ Division
✓ Remainder(Modulus)
✓ Increment

MARUTHI CHARAN TEJ 3


✓ Decrement

var a=120;
var b=20;
document.write("result", a+b);
document.write("result", a-b);
document.write("result", a*b);
document.write("result", a/b);
document.write("result", a%b);
a++;
document.write("result", a);
a--;
document.write("result", a);
++a;
document.write("result", a);
--a;
document.write("result", a);
console.log(a+b);
//-----------------
console.log(a++ + ++a); //22
let e=true;//1
let f=false;//0
console.log(e+f); //1
//------------------
console.log(true+true+3*true)//5
console.log("java"+10+20); //java1020
console.log(10+20+"java")//30java
console.log("--------------")
let a=10;
let b=20;
let c=30;
console.log(a<b<c)//true
console.log(a>b>c)//false
console.log(c<b<a)//true
console.log(c>b>a)//false
console.log("--------------")
let i="10";
let j=10;
console.log(i==j);//true //check only values
console.log(i===j);//false //check both values and datatype
console.log(i!=j);//false
console.log(i!==j);//true
console.log("--------------")
let x=2;
console.log(x*x*x);//8
console.log(x**3)//8 //exponent

console.log("--------------")
console.log(typeof(x));

MARUTHI CHARAN TEJ 4


let res=x**5;
console.log("the power of a number"+res);//32
console.log("----------------------------")

logical operators
✓ logical NOT(!)
✓ logical AND(&&)
✓ logical OR(||)
// -------------------logical operators-------------
var x=100;
var y=50;
var z=200;
if(x==y&&y<z){
document.write("Yes correct answer")
}
else{
document.write("Wrong answer")
}
if(x==y||y<z){
document.write("Yes correct answer")
}
else{
document.write("Wrong answer")
}
if(x!==y&&y<z){
document.write("Yes correct answer")
}
else{
document.write("Wrong answer")}
Conditional statements
✓ If
✓ If -else
✓ If-else-if
✓ switch
//-------------------conditional statements--------------------
//if,if-else,if-elseif-else
var game="Cricket";
let captain ="Dhoni";
const tennsi="sania"
if(game=="Cricket"){
document.write("match captain is ",captain);
}
else{
document.write("Wrong answer")
}
//------------

MARUTHI CHARAN TEJ 5


if(game=="Cricket"){
document.write("match captain is ",captain);
}
else if(game=="sania"){
document.write("Correct");
}
else{
document.write("Wrong answer")
}
---------------------------------------------------
var x=100;
var y=50;
var z=500;
if(x==y){
document.write("x is equal to y");
}

else if(y>z){
document.write("blue color");
}
else if(z>x){
document.write("yellow color");
}
else{
document.write("All are Wrong Statements");
}

Ternary operator: condition=true? “true statement”: “default statement”


//-------------------------------ternary operator ---------
var a=10;
var b=20;
document.write(a==b?"crrct Statements":"wrong statements");//ternary operator instead of
if-else we can use ternary operator

Dialog boxes in javascript


✓ Alert
✓ Prompt
✓ Confirm

//------------------------------------Dailog Boxes----------------------------------------
alert("This is a alert message")
prompt("this is a prompt message");
confirm("This is a confirmation message");
//----------------------------------------------------------------------------------------
var woman=confirm("Are you a woman");
if(woman){

MARUTHI CHARAN TEJ 6


let name=prompt("Please enter the name");
document.write("Hello madam ."+name+"Welcome to my page");
}
else{
let name=prompt("Please enter the name");
document.write("Hello Mr."+name+" Welcome to my page");
}

Type conversion
//---------------Type Conversion--------------------------------------------
var a="55";
var b=44;
document.write(typeof a +"\n");//string
document.write(typeof b);//number
----
var z=parseInt(a);
document.write(typeof z);//number converted from String
var x=String(b);
document.write(typeof x);//String converted from number
Switchcase statements

//------------------------------Switch Expressions-----------------------
switch(true){
case 10>20: myAnswer="red color"; break;
case 20<30: myAnswer="green color"; break;
case 50>20: myAnswer="black color"; break;
case 100==200: myAnswer="blue color"; break;
default: myAnswer="none of these above are correct"; break;
}
document.write(myAnswer);
----------------------------------------------
let Name=prompt("please Enter your name");
let marks=prompt("Enter your marks");
switch(true) {
case marks>90&&marks<=100 : result="Great you are the topper"; break;
case marks>65 && marks<=90 : result="Congratulations you got First class"; break;
case marks>40&&marks<65:result="You got Second class"; break;
case marks>=30 &&marks<=40:result="You got Third class"; break;
case marks<30:result="Sorry you are fail better luck next time"; break;

MARUTHI CHARAN TEJ 7


default:result="please enter your marks"; break;
}
document.write("hello " + Name+" "+result)

Functions
Syntax: keyword

Function functionName(){
//statement Function block/function body
}
function goodStart(){
document.write("hello world");//Display on webpage
console.log("Test the code");// Display on console
}
goodStart();
goodStart();
goodStart();
goodStart();
---------------------------------------------
function sum(a,b){
console.log(a+b);
}
sum(10,20);

function product(a,b){
// console.log(a+b);
return a*b; //return
}
console.log(product(30,20));

Scopes
//--------------------------------Scopes----------------------------------------------
//global scope
var apple="red";
let orange="yellow";
const banana="green";
function fruits() {
document.write(apple);
document.write(orange);
document.write(banana);
}
--------------------------------
//function scope
var apple="red";
let orange="yellow";

MARUTHI CHARAN TEJ 8


const banana="green";
function fruits(){
var x=100;
document.write(x);
}
fruits();
// document.write(x); // we cannot use variable outside the function
//--------------block scope
function sports(){
if(10<20){
let cricket="virat";
document.write(cricket);
}
document.write(cricket);//outside block the variable is not accessed
}
sports();
//----------
function sports(){
if(10<20){
var tennis="sania"
let cricket="virat";
document.write(cricket);
}
document.write(tennis);//let and const wont work outside the block scope
}
sports();

Functions with Return values


➢ Function expression
➢ Anonymous function
➢ Function with parameters and Return value

//-------------funtions with return values----------------------------


//function expression
var a=function apple(){
document.write("Red in color");
}
a();
//anonymmous function
var b=function(){
document.write("These is Anonymous function");
}
b();
//function with parameters and return values
function score(a,b,c){
document.write("these is function with parameters and return values");
return a+b+c+"<br/>";

MARUTHI CHARAN TEJ 9


}
document.write(score(1,2,3));
document.write(score(10,2,3));
-----------
function game(x,y){
return document.write("I like "+ x+" and "+ y);
}
game("cricket","shuttle")
-------------------------------------
var username=prompt("please enter your username");
function guest(myFriend){
return document.write("Hello Welcome "+ myFriend)
}
guest(username)

Methods
➢ Array methods
➢ String methods
➢ Object methods
Array methods
• Push()
➢ Add one or more elements to the end of an array and returns the new length of
the array.
• Pop()
➢ Removes the last element from an array and returns that element.
• Shift()
➢ Removes the first element from the array and returns that element
• Unshift()
➢ Adds one or more elements to the beginning of an array and returns the new
length.
• concat()
➢ It combines two or more arrays and returns a new array.
• Join()
➢ Creates a new string by concatenating all the elements of an array and return a
string by a specified separator.
• Slice()
➢ Returns a shallow copy of a portion of an array into a new array.
• Splice()
➢ Changes the contents of an array by removing ,replacing or adding elements

MARUTHI CHARAN TEJ 10


• indexOf()
➢ returns the first index at which a given element can be found in an array or -1 if
it is not present
• forEach()
➢ executes a provided function once for each array element.

//----------------Methods-----------------------------------
//Array methods
// let collections=["users", 18,true,10.5,{tej:"charan"}]; //Array
// ---------------Push()--------------------------
let sports=["cricket", "football"];
sports.push("shuttle",42);
document.write(sports+"<br>")
document.write(sports.length+"<br>")
//------------pop()------------------------
let books=["maths", "physics","chemistry"];
let result=books.pop();
document.write(books+"<br>")
document.write("deleted by pop method is ",result)
//---------shift()------------------------
let states=["banaglore", "andhra","chennai"]
let result2=states.shift();
document.write(states+"<br>");
document.write(states.length+"<br>");
document.write(result2);
//------------unshift()----------------------
let scores=[24,18,8,10,"tej"]
scores.unshift("jos",60)
document.write(scores)
//---------concat()-------------------
let scoress=[23,56,78,96]
let names=["tej","jos","cheery","sweety"]
let collect=scores.concat(names)
document.write(collect)
//----------join()--------------------
var team=[20,"tej","cheery","sweety",30,40];
var myteam=team.join("")
document.write(myteam)
var myteam1=team.join("/")
document.write(myteam1)
//---------------slice()---------------------
let students=["jose","tej","cheery",10,20,200,30]
console.log(students);
let res=students.slice(0,4)
document.write(res)
//-------------------splice()--------------------

MARUTHI CHARAN TEJ 11


let mynumbers=[0,1,2,3,4,5,6,7,8,9,]
// let myNewNumbers=mynumbers.splice(0,4)//removing
// let myNewNumbers1=mynumbers.splice(0,4,"to replace")//replace
let myNewNumbers2=mynumbers.splice(4,3,"stars in sky")//replace from specific number to
next fee location

document.write(mynumbers+"<br>")
// document.write(myNewNumbers)
document.write(myNewNumbers1)
//-----------------Index of------------------
let students=["tej","virat","jos","kohli","cherry"]
document.write(students.indexOf("jos"))
document.write(students.indexOf("priya"))
let res=students.indexOf("priya")
---
if(res==-1){
students.push("priya")
}
document.write(students)
//-----------forEach()-------------
let scores=[23,56,78,36,67,96]
let students=["priya","jose","tej","charan"]
students.forEach(function(item,index){
document.write(index+1+"."+item+"<br>")
})

scores.forEach(function(apple){
document.write(apple*2+"<br>")
document.write(apple+10+"<br>")
})
//if we call function as a parameter is called callback function
//--------------------reverse and search----------
let arr1 = [1, 5, 3, 4, 2, 6, 8, 7]
//reverse
document.write(arr1.reverse())

//search elements
document.write(arr1.includes(4))

Multi dimensional Array

MARUTHI CHARAN TEJ 12

You might also like