Scribd
Upload
10 views

Javascript

Uploaded by

Cherry Charan Tej
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Javascript

Uploaded by

Cherry Charan Tej
Copyright
© © All Rights Reserved
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