JavaScript Tutorial In Hindi

Aug 15, 2023

JavaScript Tutorial In Hindi

00:00 – Video Introduction
01:10 – JavaScript Introduction
02:43 – Basics of JavaScript
04:55 – Coding First Line of JavaScript
11:19 – Brief Overview of JS, Websites \u0026 Web Technologies
21:01 – Html, CSS \u0026 JavaScript Overview
24:20 – Deep Dive in JavaScript
29:38 – Downloading \u0026 Installing VS Code IDE
36:17 – Writing JS in VS Code
45:45 – Getting Started With JavaScript
46:25 – JavaScript Console API
51:45 – Different ways to write JavaScript
53:25 – Variables in JavaScript
56:45 – Comments in JavaScript
01:00:07 – Data Types in JavaScript
01:13:48 – Operators in JavaScript
01:22:40 – Functions in JavaScript
01:29:33 – Conditional Statements in JavaScript
01:37:34 – Loops in JavaScript
01:47:03 – Break and Continue Statements
01:49:14 – Array Methods
01:55:27 – String Methods
02:00:34 – Dates in JS
02:03:26 – JavaScript DOM Manipulation
02:25:06 – JavaScript Events
02:35:21 – JavaScript SetTimeout and SetInterval
02:43:28 – Local Storage in JavaScript
02:46:30 – About JSON
02:53:27 – JavaScript Versions
02:58:46 – Project – 1 (JavaScript Clock)
03:10:46 – Project – 2 (An Amazing JavaScript To-do List)
03:43:22 – How to Get Free Web Development Course
03:43:52 – The END (Thank You)

►Download Notes: https://www.codewithharry.com/notes/
►Source Code + Files: https://codewithharry.com/videos/java…
►Checkout my English channel here:    / programmingwithharry
►Click here to subscribe -    / @codewithharry

Best Hindi Videos For Learning Programming:
►Learn Python In One Video -    • Python Tutorial In Hindi 🔥

►Python Complete Course In Hindi -    • Python Tutorials For Absolute Beginne…

►C Language Complete Course In Hindi -
   • C Language Tutorials In Hindi

►JavaScript Complete Course In Hindi -
   • JavaScript Tutorials In Hindi

►Learn JavaScript in One Video -    • JavaScript Tutorial

►Learn PHP In One Video -    • Learn Php In One Video In Hindi - हिं…

►Django Complete Course In Hindi -
   • Python Django Tutorials In Hindi

►Machine Learning Using Python -    • Machine Learning Tutorials For Beginn…

►Creating \u0026 Hosting A Website (Tech Blog) Using Python -    • [Hindi] Web Development Using Flask a…

►Advanced Python Tutorials -    • Intermediate/Advanced python Tutorial…

►Object Oriented Programming In Python -    • Object Oriented Programming Tutorials…

►Python Data Science and Big Data Tutorials -    • Python Data Science and Big Data Tuto…

Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here

Content

0 -> Guys in today's video

1.567 -> We will learn JavaScript from start to end in one video.

5.611 -> This JavaScript video will be exceptional

8.544 -> Because I will show you JavaScript from start to end

11.98 -> And Its Beginner friendly.

13.012 -> And after that, I will teach you 2 awesome projects.

17.038 -> We will see how to develop these 2 projects

21.868 -> One will be our to-do list

23.513 -> In which we will see how DOM manipulation is done in JavaScript.

26.834 -> And in second project we will create a clock.

29.45 -> That clock will show you time

32.155 -> And how to update it in real time without refreshing the page.

35.476 -> This all things we will learn.

37.124 -> Guys I want to be honest with you all and want to tell you that

39.917 -> That it takes a lot of hard work to product this type of videos

42.676 -> Thats why I want you all to like this video

45.259 -> And I want to tell you that

47.542 -> Please leave a comment that says

50.04 -> This JavaScript tutorial is helpful.

52.812 -> If you do this then I will be very happy.

55.252 -> If you do this then I will get to know

57.868 -> that you all like this type of one-video tutorials.

60.59 -> I will make videos on more topics

63.471 -> Like frameworks in JavaScript.

65.823 -> On that topics too I will make videos.

67.999 -> So you all please let me know in the comments

70.1 -> And like this video too.

71.748 -> JavaScript is a very evergreen language

73.659 -> And it has gained popularity overtime.

76.019 -> Like for example since nodejs is released

78.14 -> JavaScript is used in front-end as well as back-end.

82.006 -> And missing out on JavaScript is mike missing out on a big opportunity.

88.005 -> Thats why please watch this video with concentration.

90.716 -> I have shown concepts in a very less amount of time.

95.56 -> We will cover important JavaScript concepts.

99.871 -> And then we will apply learning by doing

101.427 -> We will learn by developing 2 projects

104.582 -> We will use the learning by doing principle.

107.737 -> we will develop these projects with the help of Learning by doing principle.

112.759 -> And you can mention it in your CV

115.115 -> And let your interviewer know you have developed these 2 projects.

118.981 -> And definitely you will crack the interviews.

121.425 -> Or if you are still in college, then in future you can land a good job.

125.914 -> So I will not waste our time

127.914 -> I will hop onto our computer

129.47 -> And after that I will show you how to explore JavaScript.

135 -> Before starting JavaScript what you all should know

138.155 -> And I will show you some personal tips and tricks throughout the video

142.021 -> That I have learned with my own experience

144.643 -> that has not been mentioned in any book. Just my own experience.

148.776 -> That too I will show you in this video.

151.309 -> So lets go to our computer screen and lets start learning JavaScript.

155.886 -> Alright guys now I am on my computer screen.

158.242 -> And we will start exploring JavaScript.

161.319 -> Now you might be thinking something, Maybe something is going on in your mind that is

164.386 -> How to start JavaScript?

167.808 -> Where will be my first line of JavaScript?

170.263 -> So I want your first line of code In JavaScript in your browser only.

176.529 -> Yes. JavaScript does run in browsers.

181.906 -> So your browser contains everything that is required to run JavaScript.

186.839 -> That means your browser knows how to run JavaScript.

191.328 -> Mostly all the pages on the web contains JavaScript.

194.217 -> Mostly, most of the websites that you visit

198.617 -> let it be getbootstrap.com or google.com

203.372 -> let it be any website, it contains JavaScript.

206.794 -> Just see here. I visit the documentation if Bootstrap

210 -> Where is JavaScript in this page I will show it to you.

213.98 -> This is the layout of a page. Just listen to whatever I am saying carefully

217.936 -> Because this is the basic. If you understand this then you'll understand the whole JavaScript.

224.558 -> So here is a HTML tag; This is a basic HTML page.

229.135 -> This is HTML. Here It has the tag

231.757 -> Head contains some CSS just see here

234.824 -> Link rel is equal to this along

237.357 -> link href is equal to this and rel is equal to stylesheet.

240.691 -> This all things are CSS i.e Cascading Stylesheets

245.091 -> That is used to apply designs to the page;

249.491 -> Colours, backgrounds and borders this all things are applied with CSS.

255.49 -> But what does JavaScript do?

257.223 -> If I show you JavaScript example in this page only

260.201 -> So in the script tag, it has written JavaScript.

263.623 -> This is the JavaScript Code. Now you might not understand what does this do.

268.29 -> But I want you to know JavaScript gives Strength to the page.

272.778 -> That is the logic on the frontend

275.4 -> That the browser has to perform on itself Without going to the server.

279.444 -> That is JavaScript.

280.822 -> Here whatever is in the script tag is the JavaScript.

283.266 -> For now just understand that. Rest all things I will explain you.

286.777 -> So if you don't understand these things

289.044 -> I don't expect you all to understand this lines of code

291.311 -> Going forward I will explain you everything.

293.667 -> So the first line of JavaScript Where you will write it?

296.911 -> Open any tab in browser and do right-click

300 -> And then click on inspect.

302.623 -> And if you do this then what happens is

304.801 -> Chrome developer tools are opened. And if you click on console then console is opened.

310.178 -> Console will help you to run JavaScript.

315.733 -> Like this page google.com; I will open google.com

319.866 -> If you want to run JavaScript on google.com

323.199 -> So you can run it here.

324.755 -> So I want you all to write here alert and after that

328.177 -> And like any language we try Hello World for the first time

332.31 -> I want the same here. You should write the first line as Hello World.

337.332 -> So you write Hello world like this

339.154 -> Just see here in what way I have written

341.154 -> I have written alert and after that Hello World.

344.352 -> You use semicolon or not that's unto you

347.507 -> Now whatever error are coming just ignore it. Clear the console.

352.173 -> So whatever you have written, you will just get that output only.

355.506 -> I wrote here alert and Hello World And I clicked on enter

358.263 -> So here Hello world is written.

360.708 -> So alert function helps you to show these kinds of alert.

364.486 -> Along with that you can use console.log to print Hello World

370.13 -> And console.log(); Maybe you've guessed it

374.174 -> It will print the output here only.

376.481 -> So here Hello World is printed.

379.103 -> I will share a fun fact. Sometimes I want to do a quick calculation

383.681 -> So what do I do? I click on control + shift + I

385.77 -> then console opens and I use that as calculator.

389.548 -> So here I can do 34 + 897

392.803 -> If I want to multiply something then I can do that also.

395.87 -> Along with that you can do 900 X 100. You can do perform division. So sky is the limit.

403.469 -> You can do many things here.

405.469 -> Just don't go to a shop along with your computer

407.825 -> And do calculations there. That will be too much.

411.069 -> But here you can do calculations accurately with the help of JavaScript.

417.335 -> So how is this happening? Is there any server?

421.024 -> Who is doing the computation for us?

422.757 -> Even if you disconnect your internet wire

426.001 -> Then too you can perform calculations here.

428.268 -> This means that; It proves that JavaScript runs on client side browser.

433.927 -> In browser JavaScript runs in the client side.

436.371 -> Client means the person who is using the internet.

438.993 -> That means the computation is not done on the server.

444.281 -> It is being done in your house, your computer.

447.792 -> So this is called as client side JavaScript.

449.348 -> You can run client side JavaScript like this way.

453.57 -> 34 divided by 3 is 11.33 being shown

456.548 -> If I show you you more operations; I think you've understood it

460.184 -> If I show you you more operations then just see

463.251 -> 98 minus 3 95 is coming. You can do more operations like this.

468.895 -> Is JavaScript limited to these things only? Absolutely not.

472.317 -> In JavaScript...

474.495 -> I am just giving an overview. If you didn't get it I will cover it step by step.

479.339 -> I am just giving a quick overview. Like this is a button

482.939 -> If I right-click that and click on inspect

485.206 -> Then I will get the corresponding DOM code.

487.562 -> Just see I have got this.

489.029 -> Now you all notice here; Class is equal to this

492.984 -> so the value is equal to google search, type is equal to submit and name equal to this.

496.967 -> What I can do? I can target it by name

501.386 -> What I will do now? I will target it

505.696 -> This class here... I will copy it

510.75 -> I copied the class

511.503 -> I will write document.querySelector()

514.89 -> And I will write here this class

518.517 -> And we denote it by using dot(.).

521.05 -> And the moment I click enter then this element came here

524.561 -> Then what element is this? This is the Google element.

527.272 -> And if I want to click on this then I can use .click()

530.428 -> And it will be automatically clicked.

532.458 -> So what does JavaScript do? You can click any element

537.035 -> If I use click() here the it will be clicked.

540 -> If I take you to another page

542 -> For example this page and if I inspect this

546.222 -> And if there is ID in any element then it becomes convenient

551.155 -> to target it.

554.577 -> If I do control + f and write ID is equal to

559.776 -> But they haven't provided ID here

562.729 -> So just see ID is equal to this. They have provided the ID here.

566.315 -> If an element contains ID then it becomes easy to target it.

569.556 -> Like this version 4.5

572.278 -> Here they have given id as bd-versions.

574.9 -> So if something contains ID

577.611 -> So if something contains ID then I can

580.233 -> I can access it this way.

583.389 -> So I will write document.getElementById()

589.477 -> And After that I can write bd-versions to access it

593.248 -> There was a hyphen in this ID or else I would've accessed this directly.

597.648 -> If I want to click on it then I can write .click()

601.336 -> I can run a function... It has been clicked.

603.625 -> If I would've clicked it then the work done would've been the same

605.803 -> But I can also programatically click it.

608.232 -> So JavaScript helps you to code this kind of things

611.476 -> JavaScript helps you to write chrome extensions like

614.543 -> If you want to add more additional functionality on this page

618.243 -> So you can enable a extension that can change page content using these commands

624.775 -> So you can make a chrome extension using the JavaScript knowledge.

628.395 -> So JavaScript is very important.

631.393 -> I will show everything step by step

634.196 -> What are JavaScript variables, operators, assignment operators, functions

638.774 -> objects, events, arithmetic operators

641.485 -> And variables, strings, prototypes.

645.535 -> Before teaching you all of those things

647.06 -> I want to give you a brief overview on how websites work

654.126 -> What is the end to end flow when a client and server interact

658.703 -> We will see all of those things.

660.703 -> And after that we will use a method for coding in JavaScript

665.014 -> We will use a code editor.

667.636 -> We will not write code here Because we want to create programs.

671.325 -> How to run and execute those programs will be very important for us.

677.226 -> So what I will do here now. I will give you a brief overview

681.536 -> JavaScript, web technologies and websites Will also spend some time on those things.

687.896 -> So lets discuss thesis things.

690 -> All right guys! So the first thing we are going to understand is

693.511 -> How does websites work?

695.778 -> Then we will work on more JavaScript topics.

699.556 -> One thing is for sure that JavaScript is a beautiful language

702.978 -> That is used in both frontend and backend.

706.4 -> JavaScript is used in frontend and Javascript is used in backend

714.532 -> And it performs excellently in both the fields.

717.954 -> So lets start working of sites with request/response flow.

724.231 -> All right guys If someone asks me

726.192 -> Harry Bhai I want to create a website Which technologies I will need?

731.48 -> So I will tell them that they will need 3 things

735.327 -> HTML, CSS, and JavaScript will be needed

740.349 -> Now which on is need in what amount lets talk about that

743.416 -> If someone says if he/she doesn't use HTML Will that be okay?

746.393 -> I will say No. It won't be created without HTML.

750 -> If someone says if he/she doesn't use CSS Will that be okay?

754.4 -> I will say Yes. But your website will be ugly.

757.378 -> So without CSS your website will be ugly

761.866 -> The designs like borders, backgrounds, fonts This all things will be applied with CSS

769.388 -> And then someone says if he/she doesn't use CSS and JavaScript Will that be okay?

774.202 -> Or if I use CSS and do not use JavaScript Will that be okay?

777.526 -> I will say yes. It will work but

779.323 -> But user won't be able to interact with the elements.

783.965 -> It won't be interactive. What does that mean? I wil tell you

787.875 -> Suppose you have a button. And you want some reaction when that button is clicked.

792.452 -> But maybe that won't happen because you're not using JavaScript.

796.229 -> But HTML is thing that is very important

799.562 -> Because HTML contains CSS and JavaScript.

802.717 -> Go to any website, use right-click and go on view page source

806.329 -> You will find that CSS and JavaScript will be embedded in HTML.

811.351 -> HTML is a must for developing any website

816.106 -> So I will write "It is must".

818.906 -> And CSS is for designing.

821.95 -> So I will write it is for designing.

825 -> And If we talk about JavaScript

827.711 -> So why it is used?

829.455 -> Client side scripting. JavaScript is used for Client side scripting.

834.121 -> So I can safely write JavaScript is for Client side scripting.

839.143 -> Now You can even set CSS using scripting.

841.943 -> This is a different topic.

842.866 -> But I wanted to let you all know

844.877 -> What are their roles?

845.633 -> HTML is a must

848.077 -> Because HTML is the that contains everything

849.789 -> It is the skeleton of the website.

852.201 -> So if we compare it to human body HTML is the skeleton and CSS is the skin

858.112 -> Your nose, hair... everything that makes makes you look beautiful is CSS

864.289 -> And JavaScript is your memory, your brain

867.178 -> So compared to human body

870.689 -> HTML, CSS, and JavaScript It will be compared like that.

873.756 -> HTML will be the skeleton.

875.134 -> CSS contains the things that you need to look beautiful Like hairs, nose, muscles etc

881.311 -> And JavaScript will be the brain

883.311 -> That thinks and makes use both of these things and helps in working.

888.6 -> So these were the basic requirements to build a website.

891.844 -> Now more example because it is very important

894.244 -> I don't want anyone to miss it. I will quickly explain it.

898.644 -> Suppose you have a car

900 -> So the metallic body of this car

901.655 -> So if I want to label this metallic body

904.821 -> So I will label the metallic body as HTML

907.71 -> So I will say the metallic body as HTML

911.932 -> So what is the metallic body? It is the HTML.

916.865 -> And the thing that makes the tyres look good,

920.909 -> The colour of the car, and the designing that is used to make the car look beautiful

926.997 -> Like the mirrors

929.097 -> If they weren't included then too the car will work

931.08 -> But they have included it to make it look beautiful.

932.735 -> Colour, design and paint are the CSS of the car.

939.712 -> That helps the car to look beautiful.

943.738 -> Now lets talk about JavaScript

945.738 -> If I want to label something as JavaScript from this car

948.005 -> That is the engine. It is at the front of the car.

951.01 -> The engine of the car is at the front. I will write here JavaScript

955.499 -> Is the engine of this car.

958.121 -> I will compare the engine of the car to JavaScript.

961.632 -> Because it decides how the car works.

966.387 -> So this analogy was very important.

968.387 -> I explained it with the help of 2 analogises

969.854 -> One analogy was about human where the skeleton is the HTML

975.509 -> The things that make you beautiful like hairs, nose, muscles is the CSS.

984.619 -> Then the brain which handles the overall functions is the JavaScript.

990.885 -> Similarly in car, HTML is the metallic body, JavaScript is the engine, And CSS is the paint.

997.595 -> Now lets move ahead and see how websites actually work.

1001.106 -> It is very important. Because I can teach you all the basics of JavaScript.

1006.75 -> But this thing maybe a few people will explain you.

1011.03 -> And maybe very few will explain in a good way. Thats why I want to clear this topic.

1015.963 -> And I want to include things that very few people explain.

1019.563 -> Suppose you are the client

1023.341 -> and you want to visit a website.

1025.341 -> So what you will do? You will request it.

1028.141 -> How will you request it? You will type in the URL bar google.com

1035.385 -> And the moment you put google.com it will go onto google's server

1041.829 -> And the request will be processed on the web server.

1046.318 -> Web server will know that there's a client named Harry

1051.162 -> That has a particular IP address.

1054.85 -> And it will request for more things...

1059.339 -> Lets leave these things. It will collect some information.

1062.139 -> I have made a simple get request.

1065.739 -> I told its a get request.

1068.272 -> And this get request will be used to fetch google.com's page

1074.894 -> I just said give me the google.com's page.

1077.338 -> So on the server it will get the folder containing the google's page

1083.871 -> What is web server? Web server is like a computer.

1086.177 -> It is a virtual machine.

1087.821 -> It is a computer that computes and in response it returns HTML, CSS, and JavaScript.

1095 -> So here some processing will be involved

1097.622 -> It will check whether the IP is blocked or not

1099.178 -> It will check for more things like Whether it has to send response to client or not.

1103.489 -> Whether someone is logged in or not.

1105.045 -> If you're logged in then your profile picture is at the top right corner of screen.

1109 -> These all things it has to check.

1110.378 -> If you're logged in then it has to send your photo.

1113.622 -> So after the computation and processing is done

1118.644 -> After processing it spits out

1123.844 -> HTML, CSS, and JavaScript.

1126.111 -> The things I told you like processing

1130.955 -> This is done in a fraction of a millisecond.

1134.022 -> Because companies like google own very fast servers.

1137.621 -> In general, web servers are very fast. The moment you click enter it returns result.

1142.465 -> You human mind might now know when did these things happen

1146.331 -> But a request went to the server and it processes a result.

1150.731 -> And it happens so quickly that you might not even notice it

1155 -> So server will return response as HTML, CSS and JavaScript.

1159.044 -> The CSS and JavaScript will be embedded in HTML.

1163.266 -> So HTML will host these things

1166.866 -> And it will be bundled together and will be sent to your browser.

1169.934 -> Your browser will get these 3 things. This will be like a code.

1173.623 -> Same code that we get by choosing inspect element.

1178.29 -> Or the code that we get in view source code

1184.201 -> Same type of source code web server will send on your browser.

1190.301 -> So your browser will say Give me HTML, CSS and JavaScript.

1194.523 -> I will present it in a way that client won't even know what's happening.

1198.123 -> Maybe you know HTML, CSS. Maybe you know source code.

1201.901 -> But many of our brothers and sisters who work in IT field

1206.909 -> Who uses computer but not that much

1208.998 -> They don't know what is HTML and what is JavaScript

1211.442 -> They just want that in their chrome browser they should get a button and complete their work

1215.664 -> They just want this much

1217.764 -> This responsibility is on browser. Chrome browser is not particularly needed.

1221.097 -> It can be any browser. There are many browsers available in the market.

1224.519 -> Some of them are Chrome, Safari, Firefox

1228.208 -> Even Microsoft has improved their browser i.e Edge

1231.986 -> Edge has been trolled like Internet Explorer. There were many memes on that.

1235.408 -> Internet Explorer is super-fast, this and that.

1237.877 -> But nowadays Microsoft browsers are efficient too

1241.388 -> I know some people personally who use Edge.

1244.455 -> Anyways now lets end our discussion on browsers and lets move forward

1248.055 -> Your browser processes HTML, CSS and JavaScript.

1251.477 -> Browsers will process and show you what you want to see.

1255.255 -> Like on google we can see things like Search here, I am feeling lucky etc.

1261.966 -> Now l will quickly explain what is HTML, CSS and JavaScript. Like what is is it?

1265.921 -> I will give a brief overview about what is HTML, CSS, and JavaScript.

1269.699 -> Now I know that some of you might already know

1272.677 -> But bear with me. I want everyone on the same page.

1276.403 -> Thats why I am explaining what is HTML, CSS, and JavaScript.

1278.847 -> HTML stand for Hypertext Markup Language.

1281.469 -> I will start fast and then I will go slow. Because there will be some crucial concepts of JavaScript.

1286.935 -> I will go little fast. Take this as your revision on the topic.

1289.557 -> I will tell you what is CSS, JavaScript etc Or else there will be confusion in your mind.

1296.512 -> It is basically a standard markup language

1300.112 -> To give a state skeleton to a site or a web application.

1303.356 -> Everyone understood what I'm saying.

1305 -> It is a Skelton in which there are skeletal buttons

1308.6 -> skeleton of forms and input tags without design.

1316.197 -> This type of things it contains.

1317.408 -> And this is a well standardised system.

1319.23 -> Its not like that if you create a browser

1321.408 -> You create your own HTML and render it.

1323.576 -> You have to maintain a standard for HTML

1325.856 -> And according to that if there's a new browser in market

1328.745 -> then it will parse HTML, CSS, and JavaScript in a certain way

1331.9 -> Like the already existing browsers are parsing.

1336.211 -> Its Parse not pass

1337.678 -> I will write that word here Or else you all will be confused.

1340.478 -> Parse means reading a text or a code and interpret it.

1346.389 -> So that is parse.

1348.033 -> So now lets talk about HTML, CSS.

1350.033 -> I will not talk about HTML more.

1352.477 -> There are some tags in HTML that we'll see.

1355.81 -> We will make progress with a lot of explanation.

1359.321 -> The prerequisites for this video is just you time and nothing else.

1363.365 -> No prerequisites are required. Just play this video and pay attention.

1367.231 -> If I talk about Cascading Style Sheets i.e CSS

1370.742 -> It is used to present HTML in a better way.

1374.402 -> If you create a button in HTML then it will look like this.

1376.975 -> If you want the size to be bigger, rounder corners

1382.252 -> and it should include better colours and fonts

1386.397 -> So CSS is required for all of those things.

1389.853 -> So with CSS and without CSS... I am writing it like this

1395.349 -> It is not compulsory it would look like this only.

1398.338 -> So it is ugly without CSS and beautiful...

1404.16 -> Until and unless you know CSS very well.

1406.516 -> Or if you do anything randomly then it will be uglier.

1409.583 -> So CSS is used for this. It makes a website beautiful and modern looking.

1414.472 -> Is it clear now?

1415.564 -> and after that there's JavaScript. I will spend more time on that.

1420.141 -> and I want to explain it in the best way possible.

1422.856 -> So JavaScript is a high-level dynamic interpreted language.

1427.345 -> And it allows client-side scripting.

1431.123 -> And what does client-side scripting mean?

1433.479 -> Like I told you before eg. action is performed by clicking on a button.

1436.19 -> If you hover your mouse pointer over an element then it shows you alert.

1440 -> or if someone clicks anywhere

1443.166 -> so a request should be generated

1446.41 -> We are going to see more things in JavaScript.

1450.129 -> JavaScript allows us to do those things.

1452.129 -> JavaScript is a dynamic interpreted programming language.

1455.729 -> JavaScript helps us to make webpages alive.

1460.395 -> Lets do a deep dive on JavaScript and try to understand what is JavaScript?

1464.617 -> JavaScript was initially designed to make webpages alive.

1468.305 -> Alive means some action should happen when we click a button As well as when we hover our mouse on something.

1472.041 -> If someone does in/out so a network request should be generated.

1477.062 -> So JavaScript helps us to do those things.

1480.217 -> JavaScript helps us to make our webpages alive.

1486.067 -> Script can be executed in the browser itself.

1488.423 -> I told you that you don't have to install any external application.

1491.669 -> Like suppose you're shifting from python to JS; or you used PHP before

1497.147 -> So you had to install application to run those

1498.714 -> But in JS your browser is enough

1500.811 -> Like we wrote alerts before, you must've seen that.

1505.117 -> I made you code alerts in JavaScript

1507.473 -> Scripts are executed in browser itself.

1510.797 -> And JavaScript is different from Java.

1513.952 -> Maybe some of you knew that. But some are still confused

1518.618 -> that if Java and JavaScript is same or not?

1522.04 -> There's a story behind that. When JavaScript was developed

1525.107 -> JavaScript was developed to execute scripts in browser And to make web pages alive.

1530.444 -> And Java was popular at that time.

1532.875 -> Java was so popular that in JavaScript

1537.186 -> they used the name Java

1538.813 -> Just because Java had a good reputation

1540.902 -> And they wanted JavaScript to react Java's level

1542.902 -> So they made it JavaScript for web pages

1545.969 -> And to be honest there's no similarity in both of these.

1549.392 -> If you have learned Java then you might know. If not then move ahead.

1553.347 -> We don't want to be tensed.

1554.636 -> This can be executed on browser as well as server. Now this point is very important.

1559.48 -> If someone asks you that does JavaScript executes on the server?

1563.702 -> So like our model that I showed you

1568.013 -> that the web server does some processing and then sends you the pages.

1573.124 -> So for this processing it needs some dynamic language like PHP,

1578.068 -> python, python flask, python Django

1584.623 -> along with that...

1588.845 -> There are more languages.

1592.8 -> But for this purpose JavaScript is also used.

1597.955 -> It can be used. But it is not the only one. You can use Django, PHP

1602.177 -> But JavaScript can also be used.

1605 -> This is a very important point

1607.063 -> With the help of node.js, JavaScript is used in back-end.

1610.482 -> Now many people ask what is node.js?

1613.282 -> People ask when JS can run in browser then why node.js is needed?

1615.533 -> Node.js is web server... That means to run JS outside browser then node.js is needed.

1621.977 -> and in browser it can be executed normally.

1625.943 -> Now lets go back to our discussion, We were talking about

1629.365 -> It can be executed on the browser as well as the server.

1633.502 -> Sever and browser both can execute this.

1637.776 -> Now JavaScript is a safe language

1638.798 -> When you run it in the browser...

1640.47 -> What does safe language mean?

1642.914 -> Safe language means it contains a lot of things

1646.805 -> That is inbuilt like

1650.633 -> when you run it in browser, JS cannot see your files.

1654.637 -> So if you're scared that when you visit a website

1657.259 -> And you fear that there's a risk of your important documents getting stolen

1660.503 -> Obviously no one wants this.

1663.747 -> So this security features are already inbuilt in JavaScript

1667.08 -> The effective use of this is ensured by JavaScript community.

1672.598 -> So JavaScript is a totally safe language. There's no compromising of safety.

1677.975 -> Now there are language that are transpired to JavaScript.

1681.042 -> Now the JavaScript popularity rose in the last ten years

1684.41 -> The people wanted to create better languages than JavaScript.

1687.921 -> Or we will add some more features.

1690.465 -> So with that features in mind, languages like CoffeeScript has been developed.

1696.6 -> And TypeScript.

1702.066 -> TypeScript. These languages has been transpiled into JavaScript.

1708.955 -> That means they have been transpiled and then converted.

1713.443 -> Some people prefer TypeScript

1716.51 -> Because it become easy to code it. And some convenience is there syntax-wise

1721.491 -> And after that it is converted into JavaScript

1724.469 -> So directly you can write JavaScript.

1726.469 -> These Languages may contain some different features.

1729.154 -> You can learn them after this.

1730.976 -> But for now you have to learn JavaScript.

1732.976 -> These languages come and go

1735.154 -> But JavaScript is surviving for more than 20 years

1739.109 -> Nowadays it is more popular than ever.

1741.553 -> So these things you should keep in mind.

1744.797 -> So these transpiled languages will come and go

1748.219 -> But JavaScript will exist forever. You should learn JavaScript first.

1751.997 -> These are converted into JavaScript. So that's why JS is important.

1758.575 -> So these are the languages that are transpiled.

1761.463 -> Now where will we write JavaScript? In browser's console?

1765.685 -> You must've been thinking that coding in JavaScript is boring

1770 -> Python and all we code in VS code.

1773.908 -> And JavaScript we only have to write in console.

1776.792 -> Its nothing like that. We will download VS code now.

1782.258 -> Now I want to tell you one thing.

1783.814 -> Whenever I complete any course

1785 -> On my channel I've uploaded Java, C, C++ etc

1790.733 -> So people suggest me to use atom, sublime

1795.285 -> Some people suggest me to use scratchpad etc.

1803.611 -> So I want to say something. Use whatever editor you're comfortable in.

1808.647 -> I choose VS code because I can write Python, CSS, JavaScript etc

1812.59 -> I can write everything in this.

1814.175 -> I like this because it is from Microsoft and its open source.

1817.384 -> Along with that I have memorised the features

1820.184 -> You can memorise the features of any editor

1822.184 -> like where is settings, how to open terminal, etc

1826.317 -> I have memorised this in VS code and

1828.951 -> I do not say this sis better than atom, sublime or any other editor.

1835.217 -> Everything has their own advantages. But I in most of the cases

1838.64 -> And in general if I say then I use VS code.

1842.595 -> I mostly record tutorials in VS code

1846.461 -> But you, as long as you know the features of a particular editor

1849.817 -> You can use that editor if you like it

1852.554 -> That why I've written a note over here.

1855.105 -> Now lets download VS code editor,

1860 -> All right guys! I am on google chrome where we ran our JavaScript code.

1864.861 -> I will close this.

1867.128 -> Now we will search on google Install VS code.

1870.994 -> So I will write install VS code here

1873.794 -> And code.visualstudio.com will be opened here.

1877.127 -> If you're a beginner then use it alongside me

1881.704 -> I will guarantee you that you won't regret it.

1885.006 -> If you're a beginner then use Visual Studio code.

1889.329 -> So this page will be opened here.

1891.009 -> If you're in windows then you can download its file 64 bit or 32 bit whichever you have.

1897.517 -> You can also download for link or Mac.

1900.584 -> I have windows 64 bit OS that's why I downloaded it.

1905 -> And it will be download here and without wasting time we will run it.

1909.577 -> And if it runs successfully then it will be installed.

1914.51 -> So if you all see here it showing about installing VS code.

1923.442 -> Click next by accepting the agreement.

1926.039 -> Ensure you have checked all these 4 boxes.

1931.416 -> I will tell you what happens but for now check this.

1933.86 -> Or you have already installed this and didn't checked these boxes

1939.593 -> Then you can run the installer again.

1943.341 -> Do next, click on install and it will be installed.

1949.492 -> It will take some time to be installed. But it will be installed.

1954.336 -> Once it has installed then it asks you to launch it

1958.114 -> I will say don't launch it now

1960.08 -> Finish it and I will show you how to launch it.

1963.693 -> So I have created a folder named JS tutorial with projects

1967.915 -> You can create any folder anywhere in your computer.

1971.876 -> And if you remember we checked 4 things

1975.5 -> If you do right-click here then it will show open with code.

1978.389 -> I will say do right-click and open with code and here it has opened.

1983.588 -> As you can see here VS code has opened.

1987.534 -> Here I can create my files

1989.827 -> If you don't know then

1992.516 -> If I click here a file is created. And If I click here a folder is create

1995 -> If I create index.html here

2001.094 -> So index.html will be created in the folder I created.

2005.131 -> So you have to ensure that you're opening the folder which is your working directory.

2011.275 -> Wherever you create files it will be opened there.

2014.746 -> What we will do here? We will use emmet abbreviation.

2018.801 -> So I want to teach you JS with the help of browser first.

2024.627 -> I want you to use emmet abbreviation and click enter.

2030.184 -> And a boilerplate of html

2032.984 -> The code which is available on every HTML page

2037.739 -> That minimal code you'll be able to see here.

2040.533 -> You can change its title. I will change this to JavaScript tutorial.

2044.666 -> You can change it to something else if you want.

2047.409 -> I have changed the title to JavaScript Tutorial. And in body I will write simple HTML

2052.786 -> Whose name I will write...

2055.459 -> Welcome to my JavaScript...

2061.7 -> Tutorial.

2063.939 -> Welcome to my JavaScript Tutorial.

2065.794 -> Now I will show you an extension whose name is live server and

2070.23 -> Live Server...

2073.474 -> And what does the extension do? I will show you.

2076.274 -> This extension creates a live server

2079.407 -> What does that does is it creates a live server

2082.676 -> In which you can host your page.

2085.657 -> So I have installed live server

2087.641 -> If you do right-click and and choose open with live server

2091.477 -> And the moment you click on open with live server

2094.722 -> Then your file on live server

2098.135 -> The file you created will be opened.

2101.496 -> Like this as you can see here

2103.35 -> Welcome to my JavaScript Tutorial has been printed here.

2106.4 -> Now if I change this to welcome to this JavaScript.

2111.625 -> And if I save it then it gets automatically updated.

2114.004 -> So live server means that the changed during the development

2120.434 -> The changes are automatically updated.

2124.179 -> So this is the use of live server.

2127.512 -> Thats why I chose VS code. If you want you can use something different.

2131.112 -> Some people face problems with live server

2133.645 -> Like I got a mail

2135.815 -> One person was using Windows XP. I don't know how.

2138.745 -> He was using Windows XP and said his live server was not working.

2142.897 -> I said XP does not support it. Even windows 7 does not support it.

2146.934 -> So that is the thing

2150.488 -> You development thing should be updated.

2155.068 -> You have to ensure those things first.

2157.427 -> And after that you have your environment set up, then you start coding.

2162.688 -> Its very important you don't use old outdated versions.

2165.279 -> You should know what you are doing.

2167.101 -> If you're a beginner and using XP or 7, I don't recommend that. Please Update

2171.412 -> Update your windows.

2173.808 -> Your development environment should be in a good position.

2177.408 -> Now the question is where to write JavaScript?

2181.427 -> Where to write JavaScript?

2183.14 -> I will answer this question

2184.969 -> If you write any JavaScript here

2189.047 -> I will show you here. You can write JavaScript just above the body.

2193.211 -> If I apply script src here

2198.093 -> Just after the body

2200.724 -> You can do script src is equal to... I can apply any script here.

2205.401 -> Or I can write directly. Now lets leave src here.

2208.08 -> I will just apply script here

2210.587 -> I will write here console.log("This is me")

2215.14 -> No we will use Hello world it is lucky.

2221.467 -> I have written console.log("Hello World") here.

2224.106 -> Now see I cannot see hello world. Even if I reload this.

2229.335 -> But if I go into chrome's console, then hello world id printed.

2233.94 -> Just clear the warnings in the console.

2238.366 -> And if you reload this then hello world is printed.

2242.321 -> So I will keep completing and showing you things

2246.942 -> Whatever I will be doing

2248.419 -> Like I will here alert("me")

2251.956 -> and If i do this

2253.47 -> And if I save this so here me is written

2257.5 -> So now it has gone, okay?

2259.104 -> So her if you reload this the alert is coming

2263.204 -> and Il will close this.

2264.327 -> So alerts are not used nowadays in JavaScript. But it was a part of JS that's why I showed you.

2269.704 -> So If you want to print anything on console then use console.log()

2273.926 -> And if you want to do alert then use alert("me")

2278.859 -> So JavaScript is a programming language.

2280.773 -> HTML is not programming language. It is a markup language.

2285.28 -> JavaScript is a programming language. You can implement logic and function in JS.

2290.78 -> You can de object orientation inn JavaScript.

2293.669 -> JavaScript mostly you will use in front-end.

2299.158 -> And after that you can use it in backend if you want.

2302.437 -> JavaScript is a language that....

2307.921 -> can make you a full stack Developer.

2310.966 -> You can do both frontend and backend with JavaScript.

2314.366 -> You can handle back-end with node.js.

2317.339 -> With node.js, mongo and with front-end you can become a full stack developer.

2326.538 -> And you can create good websites,

2330.018 -> So here, like I already told you

2333.799 -> You can embed script in HTML

2336.817 -> But if you're using node.js then you can use only JavaScript.

2340.356 -> So first we will see JavaScript first

2342.889 -> That what is JS, why is JS?

2345.094 -> JavaScript will be very simple if you follow this video

2348.582 -> And throughout the video, just pay attention somethings are there that i

2352.702 -> have learned the hard way.

2354.401 -> But I want you to learn it comfortably with me.

2357.691 -> Now I will write here div.container, okay?

2361.27 -> I wrote div.container so it automatically gave me div tag

2365.071 -> So this is emmet abbreviation.

2368.141 -> div.container means div class is equal to container.

2371.329 -> If I had typed this manually

2374.934 -> so it would've taken a lot more time.

2376.427 -> But with div.container saved my time.

2378.599 -> Like that if I do button#btn

2384.025 -> and if I write click

2385.941 -> then button id is equal to click is auto typed.

2387.954 -> Dot is used for class and hash is used for ID.

2391.481 -> Pound symbol is used for ID.

2393.799 -> I will write here "click me".

2396.845 -> So I will type it like this and you all see...

2400 -> If I show you our DOM

2401.798 -> That means our screen then click me button is here.

2407.917 -> A button is here which has the text "Click Me".

2411.849 -> So I can target it with JavaScript.

2415.942 -> So ID means an identifier. How are you identifying an element?

2421.421 -> You can identify it with the help of ID.

2423.332 -> But then what is a class?

2426.298 -> Class can be present in one or more elements.

2430.622 -> Like I can create one more container.

2436.284 -> I can create one more container and can write one more paragraph with text "This is a paragraph".

2445 -> "This is a paragraph".

2446.386 -> Like this way you can create multiple containers.

2449.502 -> Because container is a class

2451.502 -> Container is a class means it can be in one or more elements.

2454.372 -> Class can be in one or more elements.

2457.137 -> ID will be only in one element.

2459.455 -> Id will be only in one element.

2462.367 -> Like here button id = click,

2465.043 -> So you can't see id = click anywhere else.

2469.766 -> And if someone uses an ID somewhere else

2472.388 -> Then that's not correct.

2473.942 -> It is definitely not correct.

2476.372 -> Since this is not a good practice

2477.989 -> I will remove the element with duplicate element.

2482.389 -> Because to identify ID there should be only one of that in a page.

2485.812 -> Only one click ID, click2 ID, harry ID.

2490 -> A unique name should be an identifier

2492.522 -> I can't use the same ID in some other element.

2495.774 -> But I can use class.

2497.183 -> Suppose I create class is equal to red.

2500.801 -> For an element that contains a red colour

2503.059 -> That red colour can be in multiple things.

2505.059 -> So I hope I emphasised it enough and you all understood it.

2509.014 -> We saw a very simple example in JavaScript

2512.975 -> in which we clicked a button.

2515.467 -> These examples I am showing to so that you would know what JavaScript is.

2519.4 -> We will surely learn the basics like variables, DOM manipulation etc

2525.844 -> But as you can see here

2529.018 -> I have created an element with class container

2532.138 -> And I will assign it ID firstContainer.

2537.676 -> So I have given the ID as firstContainer

2539.738 -> So if I write here firstContainer

2541.944 -> And I reload this.

2545.021 -> If I write here firstContainer

2548.327 -> Because it has the ID first container

2550.128 -> And I write here firstContainer, then I will get this container.

2554.733 -> As a JavaScript variable.

2556.714 -> The inner HTML of this; what I can do

2560.67 -> Tab key autocompletes it.

2565 -> I can change its inner HTML to "Hello Harry"

2569.293 -> And by this, the content of the element will be changed to Hello Harry.

2572.868 -> As you can see here

2575.947 -> I can give it HTML in this way

2578.392 -> Like I can use HTML tags

2580.517 -> Here I am trying to make "Hello Harry" bold.

2583.856 -> And I will write "Hello harry you are bold now".

2589.693 -> And her the text is now in bold.

2592.075 -> So I can manipulate my DOM like this.

2595 -> This is known as DOM manipulation.

2596.486 -> That means with the help of JavaScript

2598.879 -> You can manipulate the environment, content,

2603.036 -> CSS of that Dom,

2605.635 -> event handler of that DOM, you can manipulate all of that.

2610.796 -> But this was just a introduction

2612.823 -> I will teach you JavaScript from the start

2615.542 -> Its not like that I will only teach this much.

2618.976 -> I will take one more example. So that you can appreciate it.

2624.442 -> This here

2626.215 -> I will write here document.getElementByTagName()

2631.511 -> So I will perform document.getElementByTagName()

2633.595 -> And I will pass h1 in that.

2636.926 -> Because there can be more than one h1 in the DOM

2640 -> It will return HTML collection which will consist all of the elements.

2643.476 -> And this is in the form of array

2645.168 -> What is an array? We will learn that later.

2647.601 -> But for now just understand that

2649.026 -> If you write 0 like this

2651.357 -> Then It will return first element.

2653.087 -> Maybe some of you are thinking that you aren't getting it

2655.062 -> I am just giving an overview about what JavaScript can do.

2659.274 -> It can be referred to as teaser.

2661.031 -> No I will here use style.fontSize()

2665.206 -> And set it to

2666.872 -> 99px that is very huge

2668.699 -> But still I am just doing this.

2670.614 -> Now its in 99px.

2672.045 -> Now if I change it to 29px again

2673.937 -> So the h1 font size is changed to 29px.

2676.879 -> Or if I change it to 39px

2679.294 -> So the font size has been changed to 29px.

2681.489 -> So I can even control CSS.

2684.122 -> If I change .style.background to red

2688.828 -> So the background has been changed to red.

2690.485 -> So I can even handle css and styling with JavaScript.

2695.647 -> I can hide the element by using this.

2698.047 -> I can change the visibility here

2700.69 -> Visibility is a CSS property.

2703.974 -> I can change it to hidden and it will hide.

2706.407 -> And if I change its display

2711.425 -> What should I do to its display? If I change it to none

2715.987 -> If I change it to none, then the space will be empty.

2719.409 -> None and then the space is empty now.

2723.08 -> So what does display:none do?

2725.231 -> It removes the element.

2728.625 -> Its existence won't be known

2732.121 -> What does invisibility:hidden do?

2733.963 -> It stays there and occupies the space.

2738.456 -> So this is the difference.

2739.578 -> So we won't study much CSS here.

2742.3 -> We will start JavaScript officially here.

2746.877 -> Now where do we write JavaScript?

2748.228 -> I have already told you.

2749.303 -> We write it in script tag.

2750.947 -> Which is a part of your HTML.

2752.68 -> I have applied script tag after my body.

2755.658 -> If I go to page source of getBootstrap.com

2759.957 -> So you will be able to see JavaScript at different places.

2762.6 -> They have written script just above their body. This is recommended.

2767.707 -> I will shift JavaScript under my body.

2773.825 -> This is recommended because

2775.97 -> because your documents becomes ready till it comes to script.

2779.836 -> So that's why script is written just above body.

2783.218 -> So I am writing script here.

2785.46 -> So I have written "Hello world" and alert("me") this all will work here.

2790 -> I want to show it to you. I will shift it here.

2792.108 -> I reloaded and hello world is written.

2794.73 -> console.log we saw and it was very simple and

2797.815 -> console.log prints statements for us in the console.

2805.467 -> And all the output we want to log can be seen here.

2811.555 -> So lets clear this and try to print things here.

2816.757 -> That we will do with the help of document.write()

2819.462 -> I will write document.write() and pass "This is document write".

2828.154 -> So you all see I said "This is document write" and it has written it on the document.

2833.429 -> And if I inspect this then, it has written "This is document write".

2842.034 -> So document.write helps you to write on document.

2845.298 -> These are some of the methods that you can use to print on document, consoles etc.

2851.701 -> Mostly your debugging messages are written by console.log()

2858.144 -> With the help of console.log().

2860.599 -> You can log messages with the help of console.log(). There is also console.error() and console.warning().

2867.002 -> But here the browser is telling us to avoid document.write(). And on this page it tells us why to avoid it.

2875.578 -> Lets leave that for now. I just wanted to let you know this exists in JavaScript.

2883.223 -> And after saving I want to show you console.warning(). If you write console.warning()

2890.668 -> I will pass "This is warning". And if you write console.warning() here

2895 -> Then it is saying console.warning() is not a function.

2898.331 -> The reason is it is actually console.warn(). As a developer you can make this mistake.

2902.847 -> So I want to tell you it is console.warn()

2905.806 -> That prints warning.

2907.409 -> Like here "This is a warning" is printed

2910.83 -> in yellow colour. And a warning sign is appearing here.

2913.604 -> If ant any point i wanted to log an error

2918.158 -> I will use console.error() and pass "This is an error".

2925 -> So by using this my error will be logged.

2928.321 -> So just see here, my error is logged. And the colour is red.

2933.37 -> This is looking like an error.

2935.912 -> Console.log() is for normal messages like this "Hello World".

2940.93 -> Along with this we have console.clear()

2947.01 -> I will run this function for you.

2948.701 -> I did console.clear() and the console is cleared.

2952.11 -> And along with that you can use console.assert().

2957.985 -> So if I type here console.assert(4==6)

2964.741 -> That is not true.

2966.05 -> So here it is saying assertion failed.

2968.247 -> If I do here 4==4 or something else

2972.889 -> Like 6 minus 2

2976.146 -> So syntax error is appearing

2979.141 -> If I do it like this then the assertion will pass.

2981.349 -> If I do 6 minus 8

2983.838 -> Then assertion will fail.

2985.007 -> So if you want to assert anything that something should should be equal to something

2989.069 -> And if it is not and you want to see an error

2992.235 -> Then you can use console.assert().

2995.725 -> So this was our console API.

2997.197 -> More or less you will use this much only.

2998.907 -> And maybe you will not use it much.

3004.32 -> You will use console.log() mostly and will not be using error and warning.

3007.297 -> So this was our console API.

3009.485 -> This is called console API. I will write it here.

3015 -> JavaScript console API.

3019.202 -> I will write it like this JavaScript Console API.

3021.688 -> And API stands for application programming interface.

3025.618 -> An this document.write()

3028.251 -> I will copy it with control + c.

3031.114 -> And ways to print in JavaScript.

3034.45 -> If this video ends then it should be with you in the form of notes.

3039.641 -> So this is my motive.

3044.404 -> So ways to print in JavaScript.

3046.167 -> JavaScript console API. It consists of things related to console.

3049.876 -> So this was our console API.

3052.169 -> This was ways to print in JavaScript and console API.

3054.827 -> So i will label it with numbers. So this was number 1.

3058.502 -> So you should get to know the sections in the notes.

3063.791 -> So we have seen some things till now in JavaScript.

3067.01 -> We saw the power of JavaScript.

3068.834 -> And like we do console.log("Hello World")

3072.86 -> Like that I can pass 4+1 and multiple arguments.

3078.956 -> "Another log"

3081.308 -> "Hello World", 10, "Another Warning", "this is warning" "This is error"

3086.487 -> So like this you can use it.

3092.464 -> We printed one error, warning, three logs

3097.506 -> One of which was a number and rest of them were strings

3100.509 -> We will see more on that later.

3102.817 -> So this was our console API and ways to print in JavaScript.

3107.606 -> Some of you might have seen that JavaScript is written in different ways.

3112.776 -> If you want to write JavaScript in another file

3115.745 -> So you can create a new file here. I will name it index.js

3120.086 -> Now whatever things I was writing here Those things...

3125.432 -> I will cut from there and paste it in index.js

3129.106 -> I have brought those to index.js

3132.25 -> And I will remove the script tags.

3134.074 -> Just see what I am doing.

3135.81 -> I can write JavaScript within HTML.

3138.737 -> I can even refer it from a JavaScript file.

3142.68 -> So I will write here script src.

3144.543 -> So emmet abbreviation has automatically suggested me

3148.644 -> And I will write index.js

3151.69 -> I repeat index.js

3153.426 -> Ideally when you create a project then you'll do js/index.js

3157.275 -> You'll place index.js in js folder and CSS in separate folder.

3161.125 -> But this is only a practice.

3162.628 -> This is only a tutorial that is why I have put it in a file

3166.389 -> Whose name is index.js

3169.005 -> And if you perform right-click and choose format document, Then you document will be automatically formatted.

3172.767 -> And save it. Will something change? No nothing will change.

3176.969 -> Nothing will be changed because we only changed the way we include JavaScript.

3181.463 -> Here we included JavaScript directly in HTML.

3185.367 -> And here on the getbootstrap.com

3187.894 -> They have referred it in a file. The bring the JavaScript from the file here.

3191.5 -> So simply, the JavaScript engine

3193.917 -> the chrome's JavaScript engine that is responsible for running JavaScript

3197.96 -> It will bring index.js file in HTML file automatically.

3202.954 -> That's it. Now we will see JavaScript variables.

3208.65 -> Our main JavaScript will start from variables.

3212.453 -> I will show you here JavaScript variables.

3217.8 -> Now in any programming language

3220.033 -> I am talking about all the programming language

3222.416 -> What is a computer program?

3223.888 -> A computer program is a set of instructions

3226.328 -> That is used to communicate with any computer

3229.19 -> in any programming language is a helping hand of a user.

3232.82 -> A user with the help of a programming language

3237.286 -> interacts with the computer and tells it what to do.

3240.783 -> Because computer is a very dumb machine

3242.808 -> Computer doesn't know what to do

3244.808 -> And we cannot tell computer to do this do that.

3247.659 -> Show this to this visitor. Show that to that visitor.

3250.838 -> No. You cannot do that.

3252.879 -> You have to communicate with the help of a programming language.

3256.897 -> Like I am interacting with you in Hindi.

3260.074 -> Hindi is the medium of language between us.

3263.395 -> I am communicating with you in this language. Like this only

3266.804 -> if you want to communicate with a computer you need a language.

3272.239 -> You have to communicate with the help of programming language.

3275.736 -> So JavaScript variable like I have written here

3278.969 -> What are variables in JavaScript?

3280.547 -> Variables are container that stores pieces of information.

3285.187 -> Containers to store values.

3292.028 -> To store data values.

3295.738 -> If I talk about what are variables?

3300.644 -> What are variables?

3302.279 -> They are containers to store data values.

3304.737 -> Like there's a rice rice box in your home. Your mom stores rice in it

3308.696 -> Similarly there's chilli box in which chilli is stored.

3313.002 -> It is a container for chilli powder.

3315.81 -> There are even drum in most of the houses.

3317.81 -> If you have seen then let me know in comments.

3319.194 -> They use drum to store flour. A big steel drum.

3323.571 -> So if you have those drums in your house then let me know in comments.

3326.099 -> It will be fun if we interact like this.

3329.332 -> So here chilli powder is not stored in drums.

3332.301 -> Because this type of container is used for flour.

3335.27 -> Or for rice.

3337.622 -> Or else you home contains a tank. A sintex tank that is kept on the roof.

3341.464 -> Do you keep rice in that tank? No you do not.

3344.257 -> If you do it then I do not know. There's something wrong.

3346.609 -> Generally it is not used for that.

3348.697 -> Why? Because those containers serve some specific purpose.

3353.011 -> That container is a type of container that stores water.

3356.42 -> Like that here we also have those type of containers.

3359.477 -> A container that stores string.

3362.127 -> A container that stores numbers.

3363.869 -> A container tha stores boolean values.

3367.542 -> These all containers are of different types

3370.863 -> We will see those later. But you get the idea of containers.

3374.876 -> To create containers we use var in JavaScript.

3380.399 -> So here if I write var number1 = 34

3384.072 -> And var number2 = 56 then

3389.704 -> So here number1 = 34 number2 = 56

3392.817 -> And I will write here console.log(number1+number2).

3397.811 -> So I have written number1 + number2.

3400.868 -> As you can see for yourself.

3403.266 -> What will be the output for this program?

3405.009 -> I will comment this out.

3406.833 -> Now you will ask why are you saying comment out? What are you doing? What does this mean?

3411.445 -> I will tell you what does comment out mean.

3413.973 -> First we will see comments and then the output.

3416.854 -> Comments are those lines of code

3420 -> Computer will not understand.

3421.472 -> Computer will assume you have written notes in source code

3425.255 -> And it wont execute it and computer will ignore it.

3427.635 -> So initially the script that will be passed

3429.987 -> It will check the lines which contains double slash at the beginning

3433.396 -> It has to ignore those. User has written those to take notes.

3438.346 -> User did not write those

3441.579 -> To pass that to JavaScript engine

3443.924 -> And it should give a output in that response.

3446.805 -> It has been written to be ignored.

3448.512 -> You can even comment out your source code in main code base

3452.722 -> Or you can give some information like heading

3456.168 -> Like I have written here "Ways to print in JavaScript" "JavaScript API"

3461.162 -> Whatever code I do not want to be executed I will comment it out.

3465.804 -> So this is single line comment.

3469.037 -> Single line comment means ignore one line.

3471.389 -> Add double slash to that line and it will be ignored.

3475.326 -> And that line will be ignored.

3477.326 -> But if you have multi line

3484.346 -> I do not know what it wants to autocomplete But I want to write multi line comments.

3488.811 -> And if you want multi line comment

3493.894 -> In VS code I can select it and click on control + /

3498.712 -> control + forward slash.

3500.735 -> People watch half video and ask me how did I do it?

3503.79 -> I just say complete my course. It will be beneficial for you.

3507.722 -> You wont get any problem in JavaScript.

3510.691 -> You just have to invest some of your time.

3513.836 -> Invest your time and you will gain something beneficial.

3516.15 -> So this thing I did Commented out multi line comment

3518.875 -> I did it with the help of single line comment.

3521.469 -> But I can enclose it between /* and */

3529.149 -> I can comment it. So this is multiline comment.

3532.631 -> What is it? It is multiline comment.

3534.392 -> That means if you want to comment out more than one line You can use this.

3538.77 -> Why is this important?

3540 -> Because when you contribute to open source

3542.793 -> When you create a software, website or a contribution in a product

3547.963 -> So you need to know these things that is in JavaScript

3552.605 -> But if you do not use it and others use it

3555.486 -> Other people can use it

3556.87 -> So you should know what thing is used when and why.

3561.864 -> Lets save this file and expect

3565.325 -> 56 + 34 i.e 90 to be printed on screen.

3569.839 -> So lets see if 90 is printed or we got betrayed.

3574.57 -> So this is not a betrayal.

3576.57 -> 90 is printed.

3578.28 -> It is printed even if I reload this.

3580.949 -> So 90 is printed here.

3583.688 -> In the console

3584.384 -> So this was our first program in which we did computation

3588.443 -> We coded it in a particular way

3590.37 -> So everyone write congrats in the comments.

3592.579 -> Interaction in the comments makes me feel happy.

3595.514 -> That's why I am asking to to comment. I will feel good if you all comment.

3600 -> I want to be very transparent with you.

3602.491 -> It is not a bad thing.

3605.177 -> So what we will do now? We have seen variables now we'll see datatypes.

3610.23 -> Till now we... This datatype

3613.023 -> We saw that. This is a number.

3615.728 -> But can there be different datatypes?

3618.08 -> So lets see datatypes in JavaScript.

3620.08 -> So I will write number 4 here

3622.08 -> And I will write datatypes...

3626.105 -> in JavaScript.

3627.841 -> In JavaScript, there are different

3630.004 -> datatypes are stored.

3632.241 -> Primarily there are numbers and strings.

3635.161 -> These 2 you will use mostly in JavaScript.

3638.227 -> You will use objects too. But numbers and string

3640.573 -> These you are mostly going to use.

3643.189 -> Like 34 is a number and

3645.088 -> and a string is written by enclosing in double quotes.

3649.111 -> Like...

3651.111 -> If I create var str1

3654.206 -> "This is a string" Like this I can write.

3659.82 -> I will copy this and paste in below line.

3663.053 -> So I can write str2 in single quotes.

3666.912 -> So you can write strings in both single and double quotes.

3673.648 -> I saved. "This is also a string".

3675.648 -> So this was an example for string.

3677.648 -> We have seen the example for number.

3679.64 -> Lets see one more example. var num1 =

3683.676 -> 455. I took one more example.

3686.028 -> And num2 is equal to

3688.929 -> Lets take a decimal number

3691.576 -> So this is my number

3693.139 -> This is my string.

3694.583 -> So you have seen the datatype.

3696.143 -> Number...

3699.228 -> After that we saw another datatype string.

3703.588 -> One more datatype I will tell you that is object.

3705.701 -> And maybe you will find it weird.

3707.701 -> But that datatype is very important.

3710.67 -> For now just keep in mind that it is key-value pair.

3714.696 -> Objects. What are objects?

3717.841 -> Like suppose we have to store marks

3720 -> of people

3721.207 -> So what we will do? We will write it like this.

3724.186 -> What is Ravi's marks?

3725.834 -> We will say Ravi has 45 marks. We will put a comma here.

3728.857 -> How many marks does Shubham has?

3730.593 -> Shubham has 78 marks.

3734.442 -> Along with that Harry's marks is 99.977.

3739.348 -> There was some error in checking.

3743.109 -> I will save it with control + s. And I have created the object here.

3746.606 -> And you can see nothing has been printed here.

3748.606 -> Because I haven't printed anything.

3750.52 -> For printing I have to do console.log().

3753.048 -> First what I will do is

3755.4 -> I will console.log() num1 and str1.

3758.976 -> And I can even do console.log() here.

3761.592 -> I can say to it that console.log(num1)

3766.498 -> What was num1? It will say its 56.76.

3769.581 -> Like we have done here

3771.432 -> Now I have created num1 2 times. I should change to num2.

3775.067 -> I wanted to create num2. I made a mistake here.

3778.036 -> And if I do num1 now then 455 will be printed.

3781.533 -> If i print num2 then 56.76 will come.

3784.37 -> If I do str2 then "This is also a string" will be printed.

3789.188 -> If I do str1 then "This is a string" will be printed.

3791.804 -> I can console.log() them one by one.

3794.654 -> If i want i can do here or there.

3798.856 -> So if I do console.log(marks )

3803.203 -> So you all just save it.

3805.027 -> You might be wondering I am using semicolon anywhere I want

3809.405 -> If I do not use it then also I can see marks.

3812.374 -> Here i can see all the marks.

3814.55 -> My object is printed.

3816.665 -> What is this?

3818.225 -> So JavaScript is a very forgiving language.

3821.458 -> If you do not use semicolon then also it works.

3825.484 -> So its not like you shouldn't use semicolon. As per good practice you should use it.

3831.447 -> Due to this your program will be structured.

3835.296 -> I will recommend you all to use semicolon.

3839.56 -> So we have seen numbers, string, and objects.

3843.938 -> So these were our datatypes in JavaScript.

3847.725 -> So we have seen 3 types of datatypes in JavaScript.

3851.398 -> Numbers, strings and objects.

3854.631 -> There are booleans too. Now what are booleans?

3859.273 -> Booleans are true or false.

3863.475 -> Lets see it.

3866.884 -> So I will write here var a = true

3870.939 -> And var b = false.

3875.088 -> And I will shift console.marks() above.

3879.807 -> I will put semicolon. If I do console.log(a)

3883.304 -> I will save it.

3884.423 -> If i don't use semicolon then too its okay. Here true is printed.

3887.744 -> If i write b here

3892.298 -> So here I have got true and false both.

3895.355 -> So I can create booleans like this.

3900 -> So we got here... We saw that

3902.526 -> We also have booleans.

3905.142 -> So here I will show you all

3907.961 -> the different types of datatypes in JavaScript.

3912.867 -> We have seen number, booleans, strings and a lot of other things.

3918.126 -> Now we will see undefined and null.

3922.063 -> If I write here var und = undefined

3929.435 -> So that means a thing that has not been defined yet.

3931.876 -> If I do console.log(undefined)

3936.87 -> Then you all can see undefined is printed.

3940.455 -> And if I do console.log(und)

3943.071 -> Then also undefined is printed.

3945 -> Now listen to me carefully

3947.352 -> I assigned this value undefinned

3950.233 -> Thats why und will print undefined

3952.761 -> But if I

3956.61 -> do not write anything here

3960 -> And just declare the variable

3961.967 -> Then also by default the value will be undefined.

3965.665 -> This is very important. Then also by default the value will be undefined.

3971.011 -> That means a thing which doesn't have any value.

3973.628 -> So undefined means this hasn't been defined.

3977.125 -> You haven't kept anything in it.

3979.301 -> You just declared it and left it as it is.

3981.301 -> You just declared it and left it as it is.

3983.301 -> You haven't kept anything in it.

3985.351 -> This is what undefined means.

3986.823 -> This is what undefined means.

3989.175 -> Now we also have arrays in JavaScript.

3991.968 -> And we also have null in JavaScript.

3995.201 -> And null has been created to separate it from undefined.

3999.403 -> So if I do here var n = null

4004.221 -> and if I do console.log(n)

4008.951 -> So you all can see here Null will be printed.

4011.568 -> So null and undefined are different from each other.

4013.284 -> And they have been created because

4016.077 -> So that undefined can be separated from null.

4018.429 -> Undefined means you just have declared the variable.

4021.174 -> Null means you are implying that nothing can be kept here.

4025.552 -> Null. Null means nothing.

4027.816 -> I am saying nothing should be kept here.

4030.578 -> So this is the difference between undefined and null.

4032.578 -> And please don't deep dive in this.

4035 -> Just understand that...

4037.176 -> Just keep in mind that undefined and null are two different things in JavaScript.

4040.85 -> As a beginner I don't recommend deep diving into topics.

4045.58 -> If you know the basics of

4047.228 -> strings, numbers, and booleans

4051.254 -> then its more than enough.

4053.782 -> Now we have arrays too.

4055.87 -> We also have arrays in JavaScript.

4057.87 -> What are arrays? Arrays are collection of elements.

4061.717 -> It can be collection of strings, numbers booleans.

4067.416 -> Different types of collections can be in arrays.

4070.209 -> So we will learn that now.

4071.681 -> But it is important to point out this thing

4075.707 -> that JavaScript has 2 type of datatype.

4079.116 -> The first datatype is primitive datatype.

4083.23 -> Now what is this primitive datatype?

4085.406 -> Primitive datatype means

4087.23 -> That it hasn't been created with the mixture of anything.

4089.494 -> It is an original datatype.

4090.966 -> So I will write here

4092.966 -> At a very high level

4096.463 -> level, there are... oopsie what is this?

4099.872 -> level, there are 2 types of datatypes

4105.835 -> in JavaScript.

4107.747 -> First is primitive datatype

4110 -> These are also called primitives.

4111.791 -> And second is reference datatype

4113.651 -> This... Reference datatypes...

4119.79 -> I will write this here too...

4122.318 -> And here I will put a multiline comment

4125 -> I taught you to use it by using /*

4129.114 -> We can write multi line comments like this.

4132.611 -> So the primitive datatype in JavaScript

4136.196 -> are undefined, null, number, string.

4140.574 -> They are of 6 types.

4142.574 -> 2 are remaining.

4145.014 -> One is boolean. And the another one i didn't tell you about.

4148.951 -> And that is symbol.

4150.511 -> Symbol is a primitive datatype in JavaScript.

4153.216 -> Symbol is a advances JavaScript topic

4156.273 -> But still I will tell you about symbol in JavaScript.

4157.921 -> I don't want you all to be confused

4160.449 -> Symbol means...

4162.097 -> That whenever you use symbol

4164.361 -> then everytime it generates a unique key for you.

4170 -> In symbol you all can

4172 -> Like this....

4173.472 -> If I just show you

4175.736 -> If I write symbol like this

4177.736 -> You all can write a string in this

4179.265 -> So whenever you apply JavaScript 2 string method

4181.881 -> So it will return you the string.

4184.497 -> But at this point symbol will be confusing.

4187.29 -> You all can safely ignore symbol for now.

4189.906 -> But primitive includes symbol. You should know this.

4192.611 -> That's it. We will focus on this 5 datatypes.

4195.492 -> We have seen number, string, undefined, boolean, null.

4200 -> Reference datatype includes objects and arrays.

4204.878 -> We have already seen objects

4206.337 -> We have not seen arrays yet.

4207.577 -> Now lets move on to arrays and see what are arrays in JavaScript?

4211.338 -> If I want to create an array in JavaScript

4214.571 -> So I will simply write var arr =

4218.773 -> And if i write here 1,2,3,4,5

4221.485 -> So an array has been created.

4224.066 -> Now if I open this in live server

4227.563 -> And if I reload this then

4228.66 -> Just see here I am doing console.log(arr)

4233.919 -> If I write this then I will get 5 values.

4237.045 -> Now if I do console.log(arr[0])

4240.327 -> Then I will get 1

4241.617 -> If I do console.log(arr[1])

4243.896 -> Then I will get 2.

4245.227 -> Similarly if I do console.log(arr[4]), then I will get 5

4248.949 -> Now one thing is clear

4251.052 -> That the counting in JavaScript

4253.495 -> or in most of the programming language starts from 0.

4257.371 -> I repeat it starts from 0.

4259.304 -> That means if I want 5 then I will start from 0.

4263.141 -> 1,2,3,4,5 sorry.... 0,1,2,3,4

4268.917 -> It will come on 4.

4269.667 -> I will not start from 1.

4271.667 -> I will start from 0.

4272.87 -> Because if I start from 1 then I will get 5 only.

4275.575 -> If I start from 0 then I will get 4.

4277.52 -> 0,1,2,3,4...

4279.358 -> So arr[4] will give me 5

4281.358 -> That I have written here

4283.167 -> It is not important that value should be 5.

4284.685 -> I can even write a string in between.

4290 -> Its not important you should only write string

4294.114 -> You can write babloo, baba, shona

4297.296 -> You can write whatever you want

4298.704 -> 0,1,2... After counting it is coming on 2

4302.506 -> If I do console.log(arr[2])

4305.619 -> Babloo will appear.

4307.278 -> If I do arr[3] then whatever is on 3rd place will be printed.

4312.466 -> So it depends what you have written on which location.

4319.357 -> And if you do console.log(arr) the whole array.

4322.776 -> Like if you do this

4327.795 -> So what will happen The whole array will be printed.

4330.76 -> If you expand this here

4332.992 -> So 0,1... 2 is on index 1, babloo is on index 2

4336.775 -> 4 is on index 3, and 5 is on index 5

4339.049 -> 5 is on index 4, sorry.

4340.697 -> So in this way you can see what elements on which index.

4345.395 -> Now at the start i showed you DOM manipulation

4349.102 -> But now we will se DOM manipulation further.

4351.366 -> Now the HTML collection we saw

4353.439 -> Don't focus on that. Whatever i have taught you just focus on that.

4357.188 -> And I am showing you everything step by step.

4360.617 -> We have understood the datatypes in JavaScript flawlessly.

4365.784 -> Mainly you will use number, string, and objects.

4369.443 -> Sometimes you will use arrays.

4370.925 -> Numbers, strings, objects and arrays. Even booleans are not used that much.

4374.598 -> I am saying this with experience. Maybe some of you will argue that booleans are used.

4379.138 -> But when you write simple programs then they are not used.

4382.103 -> Sometimes we don't even know when we use booleans in if else.

4386.091 -> So the datatypes in JavaScript

4389.644 -> in this umm...

4392.392 -> We have seen primitive and reference datatypes.

4396.361 -> We saw what is in primitive and what is in reference.

4401.263 -> And I hope you all understood this.

4403.661 -> If you all understood this then at this point just comment below

4408.82 -> that things are clear till this point. You have understood datatypes

4412.603 -> You should comment because then people will find out that this video is helpful.

4416.694 -> So if you comment then people will get to know that this video is helpful.

4421.558 -> So kindly for me... I request you

4423.748 -> That if you find this helpful then please comment below.

4428.514 -> Now we will see what are operators in JavaScript.

4431.495 -> I will remove all the console.logs.

4434.335 -> Because the reason is I don't want many console logs.

4439.22 -> And I want to see this clean.

4441.06 -> I will reload this. In fact, my live server is working so I don't need to reload this.

4445.294 -> Ans wherever I have written console.logs

4449.371 -> I will comment it out. And by the way i use control + /

4452.301 -> If someone didn't knew it already.

4455 -> Now I can only see here 90.

4456.842 -> and this number that I have added they are visible.

4459.791 -> I will show you what are operators in JavaScript.

4463.876 -> The the basics for operators is very important.

4466.068 -> So please pay attention. Maybe you already know this.

4469.495 -> So I will show you. If var a = 34

4473.539 -> and var b = 56.

4476.093 -> And I hope I haven't used a and b as variables before

4479.502 -> These variables are new that I have created.

4481.338 -> So I want to write here console.log("The value of a +b is")

4490.59 -> and after a comma I will write

4493.295 -> a+b. And this is arithmetic operator.

4495.396 -> +, -, *, / are the arithmetic operator.

4500.453 -> Arithmetic operators. Maybe some of you already knew it.

4505.101 -> But are these arithmetic operators or not. This is very important for us to know.

4508.91 -> The way we added numbers similarly we can subtract it.

4511.879 -> I am going a little fast because some of you might already know it.

4515.632 -> So you should not be bored.

4519.22 -> I have printed all the values here.

4523.324 -> You can change the values for a and b

4525.889 -> Like if I change this to 100 here, all of the operations will be very straight forward here.

4531.768 -> So after doing +, -, and / we get these values.

4536.506 -> These were arithmetic operators in JavaScript.

4540.709 -> Along with these we have assignment operators

4544.75 -> Assignment operators are nothing but they assign one value to another.

4549.728 -> So I am writing here assignment operators

4553.282 -> In assignment operators if you write var c = b

4559.417 -> And if I do console.log(c)

4563.466 -> So I will the the value to because the value for b was 10.

4569.81 -> And I did c = b.

4572.114 -> Along with that I can update c

4576.233 -> For declaring I will apply var but for updating I will not use var.

4580.867 -> I will write here c += b

4583.499 -> Or if I do c += 2 here

4586.75 -> Then 2 will be added to the value of c

4589.016 -> That means I will get 12.

4590.878 -> Along with that I can do *=, /= and many more things.

4597.141 -> So for you reference I will show you

4599.636 -> That -= means

4602.456 -> c = c - 2

4605.883 -> And all of this is syntax. It is not a very complex concept.

4609.502 -> That's why I am going over this very fast.

4612.231 -> But I hope you wont mind this

4614.633 -> Because addition, subtraction you all already know.

4618.182 -> If I do -=2 then it will be c = c-2

4621.91 -> That means 10-2 = 8 and I will get 8 here.

4625.217 -> So if i do c -= 2 then c will be decremented by 2.

4629.093 -> If I do c *=2 then c will be multiplied by 2.

4632.741 -> That means whatever the value of c is just multiply it by 2.

4636.086 -> What will /= do? It will divide the value of c.

4642.019 -> I hope you all understood this thing.

4644.371 -> Now I will move forward from assignment operator.

4650 -> Like assignment operators we also have

4652.679 -> comparison operators in JavaScript.

4656.395 -> If I write here var x = 34

4660.075 -> And I write var y = 56

4663.243 -> So I will save it here

4665.336 -> And if I do console.log(x==y)

4670.459 -> So what will I get?

4672.304 -> I will get false. x is not equal to y.

4674.921 -> == is a comparison operator.

4677.472 -> That compares 2 values

4679.297 -> If x and y were equal then it would've given me true.

4681.081 -> Now I will do console.log(x>=y)

4686.412 -> False. It is neither greater than nor equal to.

4688.999 -> So neither of those case is true.

4693.313 -> Is x

4696.634 -> So let me do one thing here

4698.691 -> I will write the heading as Comparison Operator.

4703.868 -> Comparison Operator I have written here.

4705.747 -> x == y, x >= y, x

4710.921 -> Because the value of x is less than y.

4714.247 -> And quickly I will show you we have greater than and less than

4719.339 -> Whose meaning is very straight forward.

4722.732 -> If its greater then true or else false

4725 -> And we will use it in if else statements in JavaScript.

4729.17 -> We will use it then.

4730.986 -> So this was our comparison operator.

4733.399 -> And I hope you all understood this.

4737.32 -> Along with this we have logical operator

4740 -> That operate on true or false.

4743.472 -> Now I will show you about logical operator After commenting this out.

4747.734 -> I will write here logical operators.

4752.597 -> If i do console.log

4755.262 -> And these logical operators operate in boolean values.

4759.473 -> So If i wrote logical operators like this

4762.913 -> true and true

4764.506 -> true and true is true only. So I should get true here.

4769.334 -> I will just comment this out so there should be no confusion.

4772.384 -> So that console should should print the thing you want to see.

4774.441 -> Now if I write here true and false

4778.524 -> So you all see here, true and false, false and false.

4782.183 -> I wrote true ad false so I got false.

4784.603 -> And false and false also printed false.

4787.261 -> Till both are not true

4789.261 -> till then our logical end

4792.393 -> wont return true.

4794.074 -> And this is boolean algebra

4796.37 -> I don't want to get into this too much.

4798.751 -> So you all see these values.

4800.414 -> And means until both are not true, it won't print true

4803.846 -> True and true will be true.

4805.561 -> Rest all will be false.

4807.241 -> All of the rest will be false.

4810.449 -> Along with that if I show you logical OR

4816.559 -> Using this only

4817.923 -> I will use alt and make multiple cursor in VS code

4822.075 -> I repeat wherever I use alt then I can get multiple cursor.

4825.443 -> After that if you click anywhere they will be gone.

4829.427 -> OR needs one of the two things true.

4832.834 -> If it gets one true then the whole statement becomes true.

4835.706 -> That means all will be true except the last one.

4839.122 -> Last one will be false, all of the rest will be true.

4841.931 -> This was our logical OR operator.

4844.33 -> Just remember two sticks are used not one.

4846.665 -> If you use one stick then it becomes bitwise operator.

4849.548 -> And it is out of the scope of this video.

4852.7 -> If you want to learn about bitwise operator then you can search it anywhere.

4857.252 -> But I don't think bitwise operator is important now

4859.208 -> Because it is important for those people who in boolean algebra.

4863.072 -> This much is enough. Along with this we will learn logical AND.

4865.072 -> We will learn logical AND.

4867.072 -> I will write here logical AND and after that

4871.511 -> Logical OR

4875.794 -> And along with that we will learn logical NOT.

4880.534 -> Now what is logical NOT? Logical NOT gives you

4885.508 -> If I do NOT of false then it will give true

4888.107 -> And if I do NOT of true then it will print false.

4890.233 -> That means it turns false into true and true into false

4892.836 -> It is called logical not.

4894.748 -> The thing which turns true to false and false to true is called logical not.

4898.621 -> Repeat this

4900.638 -> The thing which turns true to false and false to true is called logical not.

4904.508 -> And the one who wins after losing is called Baazigar.

4907.341 -> Just remember this 2 things. First one is important. Second one is not.

4911.131 -> So you understood Logical NOT.

4914.135 -> I will use this exclamation mark. Then don't tell me you did't knew that.

4917.984 -> This is logical NOT.

4920.594 -> Logical NOT comes under logical operators.

4924.201 -> So we have seen arithmetic operators.

4926.823 -> We have seen assignment operators.

4928.654 -> Now there's a concept called operators and operands.

4932.789 -> Now what is an operator? Operators are functions that are applied to 2 operands.

4937.594 -> Like I am adding 34 with 56.

4941.182 -> When I add them then operator is +(plus).

4943.802 -> Operands are 34 and 56.

4945.854 -> So you all remember this thing. I will now emphasize on this that much.

4950.298 -> Because it becomes theoretical.

4951.591 -> But if someone asks you what is operand or operator then you should know.

4955.755 -> Thats is why I am focusing on this thing.

4958.851 -> So I hope you all understood this.

4962.042 -> Now we will move towards JavaScript functions.

4965.077 -> But before that I want to ensure you

4968.378 -> The console is clear and the output should be clear.

4971.891 -> I want to ensure you that.

4974.107 -> So that's good. So till here we learnt so many things.

4977.58 -> Now lets see the main thing that is function.

4980.708 -> When we write JavaScript code then what happens is

4983.854 -> Due to a lot of code we have to repeat things.

4987.718 -> Like a simple example i can give you

4990.901 -> A weighted average of any 3 numbers

4995.613 -> Or else just calculate average just by adding it and dividing it

4999.042 -> by the number of numbers.

5000.953 -> So what I can do? I can create a function named avg.

5004.089 -> That will take two numbers named a and b.

5006.79 -> And what I will do here?

5010 -> I will return a + b.

5011.763 -> This was a very simple example of a function.

5013.948 -> And I can use it like this.

5016.15 -> that c = avg() and after that

5019.744 -> I will pass 4 and 6.

5021.391 -> And I will do one more thing here

5022.951 -> I will divide it by 2 because the definition of average

5025.488 -> it will be obsolete then.

5027.66 -> So I created a simple function

5030.42 -> What I did in this function

5031.997 -> I wrote the logic and after writing the logic

5035.548 -> I used that function.

5036.951 -> Whether it be the average of 4 and 6

5039.84 -> or 14 and 16.

5041.364 -> I will get it. I will name the variables c1 and c2.

5044.432 -> And along with that I will do console.log() here

5048.469 -> c1 and c2, okay?

5050.382 -> And after saving it I will show it to you with live server.

5055.003 -> I turned off my live server.

5056.806 -> If I inspect it then 5 and 15 is printed in the console.

5060.798 -> If I haven't made a function about it

5065.878 -> So maybe I would've wrote this logic again.

5068.276 -> This is a very simple example of a function.

5070.479 -> I repeat this is a very simple function.

5073.056 -> If I wanted to make this function complicated

5076.601 -> So it would've consisted of lengthy logic.

5078.844 -> Lets suppose we are deciding with the help of age

5085.42 -> that a person can drive or not

5086.865 -> So it can have a function that

5088.154 -> consists of lengthy logic.

5089.983 -> Now it is not necessary that it can contain only one line

5091.889 -> I could've written it like this

5093.43 -> c is equal to

5096.175 -> a + b / 2 and return c.

5100.916 -> Like this.

5101.999 -> And this average function that I created

5105.488 -> I have taken 2 arguments that is a and b.

5107.078 -> Now lets see how it works.

5109.153 -> Average 4,6 got 2 numbers that is 4 and 6.

5113.001 -> 4 is copied in a and 6 is copied in b.

5117.043 -> And after adding them, the sum id divided by 2.

5120.751 -> And a value is returned.

5122.414 -> The value that is returned

5125.477 -> It will come into c1.

5128.579 -> It works like this.

5130.411 -> That means 2 values are being send to average.

5133.401 -> And those 2 values returns 1 value.

5136.165 -> And the value that is returned is assigned to c1.

5140.317 -> So 4 and 6 will be copied in a and b

5143.073 -> The value to c will be 5.

5146.286 -> Return 5 means

5147.302 -> That 5 will be returned on this place

5150.78 -> 5 will return. 5 will make a comeback.

5153.858 -> and after 5's comeback it will be assigned to c1.

5157.052 -> Similarly with 14 and 16, 15 will be returned.

5160.305 -> And this line will be replaced by 15.

5162.386 -> When we put c1 and c2 in console.log()

5166.725 -> We will get to see 5 and 15.

5170.983 -> This is called invoking a function.

5173.492 -> Here we invoked this function.

5175.812 -> and here we called a function by giving it 2 values.

5178.667 -> If we create many functions and just leave it

5181.44 -> Then what will happen?

5182.958 -> If we create many functions and just leave it

5184.878 -> And we don't call those functions

5187.108 -> Then those function will just be there in the codebase.

5190.08 -> Until we call them

5193.534 -> They won't be executed.

5195.975 -> So we can call a function like this.

5199.492 -> Functions can contain 2 arguments,

5202.037 -> or it can contain no arguments

5203.992 -> We will return to function after we see if else statements.

5207.594 -> Function helps to implement the DRY principle.

5212.123 -> What is dry principle? I will write here.

5214.944 -> First I will write Functions in JavaScript.

5219.615 -> And the DRY principle

5221.839 -> It stands for do not repeat yourself.

5226.424 -> That means if you want to do any work in programming

5229.202 -> Do it only once. Make a function

5231.145 -> and after that keep using it.

5233.309 -> I can use it 10 time if I want. A convenient function has been created.

5237.357 -> These are examples of very simple function.

5239.357 -> We have many functions

5241.588 -> That can detect location of the user.

5243.867 -> Or else we can have functions that

5247.059 -> can calculate your CGPA.

5249.66 -> If all of your marks are entered here so it can calculate your CGPA.

5253.469 -> You might know what is CGPA in college.

5256.23 -> If you don't know then you might calculate percentage in your school.

5260.285 -> This percent marks that percent marks.

5262.361 -> Or else it can be CGPA. It is even in 10th standard.

5266.005 -> So everyone know s what is CGPA

5268.223 -> After passing all the marks you can calculate CGPA.

5270.596 -> You can create a function which you can name CGPA.

5273.714 -> And after invoking that function

5277.993 -> You can calculate CGPA of different students with the same function.

5281.074 -> So you don't have to repeat the logic again and again.

5283.444 -> Multiply this by that. Divide this by that. The weight of something is this..

5287.42 -> That has this much of weight.

5289.08 -> You don't have to repeat all of these things.

5293.697 -> So this was functions.

5296.578 -> So that was good.

5297.784 -> So this c1 and c2 that we printed

5299.796 -> That we saw in the form of 5 and 15

5302.116 -> A note on that

5304.592 -> That is what colour can you see for them? Its blue.

5307.291 -> Does this blue colour mean something? Why is chrome showing is this in Blue?

5310.397 -> This blue colour means something.

5312.532 -> If I perform here console.log(3)

5315.686 -> So it is printed in blue colour.

5317.478 -> But if 3 as in string that is console.log("3")

5320.833 -> That means 3 is a string here not a number.

5324.456 -> So If a number is a string

5327.609 -> then it is in black.

5329.993 -> And number is printed in blue.

5331.353 -> So if in chrome console

5335.388 -> if you see anything in blue that means its a number.

5338.864 -> And if you see anything in black then it is a string.

5344.359 -> So string can contain numbers.

5347.127 -> It can be in the form of a string

5349.617 -> and it can be a number too.

5353.37 -> If it is a number then it will be in blue

5355.608 -> Then it will look like this

5358.147 -> the way you saw here.

5360.113 -> That was good it was a very simple thing.

5362.902 -> Lets see one more simple thing whose name is

5366.828 -> I will shift this dry down here

5368.597 -> I will comment out these console.log()s

5371.316 -> with control + /

5373.034 -> Now here I will show you

5375.236 -> Conditionals in JavaScript.

5379.039 -> What does conditionals means?

5380.706 -> Conditionals means

5382.034 -> To see a condition.

5385 -> If you can remember

5387.068 -> We studied logical operators.

5388.921 -> We saw logical operators.

5391.112 -> And what way we can use it.

5394.039 -> In conditionals

5396.654 -> There's a very efficient use of conditionals.

5398.298 -> Suppose I have a age variable

5400.962 -> Whose value is 34

5402.733 -> And what I will do here

5404.672 -> I will write if age is greater than 8

5407.546 -> So what does if means

5409.506 -> If this is true Meaning if the value for a is true

5412.384 -> Then what will happen

5413.737 -> If this is evaluating in true

5417.357 -> console.log("You are not a kid"), okay?

5421.662 -> "You are not a kid"

5423.486 -> So here "You are not a kid is printed"

5425.82 -> Because the age is greater than 8.

5428.824 -> But if I change the age to 4

5431.57 -> And then I save it

5432.727 -> So here nothing is printed.

5434.645 -> So if this condition evaluates to true

5437.204 -> So it will come here

5438.67 -> Or when it doesn't evaluate then it should show something

5441.69 -> Now you know what is if and else

5444.276 -> If and else.

5445.552 -> Do this when age is greater than 8

5448.658 -> Or else do this.

5451.736 -> So what I will do in this case

5453.094 -> I will write console.log("You are a kid")

5457.618 -> Else "You are a kid".

5460 -> If your age is less than 8 then you are a kid.

5462.546 -> Yes I am talking to you. If you are younger than 8 years Then you are a kid.

5465.668 -> So here "You are a kid" is printed.

5468.776 -> If I change the value for age to 2

5471.827 -> If anyone who is 2 years old and watching this video Then please comment.

5474.644 -> He/she will get a special shoutout.

5476.721 -> Because he has started programming early.

5479.15 -> If age is greater than 2

5481.057 -> So you are not a kid or else you are a kid.

5483.337 -> So you are not a kid is printed because I changed the condition.

5486.816 -> Ideally I code better than this.

5490 -> Age is greater than 18

5491.437 -> Then you can drink.

5494.127 -> And after that "You cannot drink water".

5500.435 -> "Water".

5502.068 -> If age is greater than 18 then you can drink water

5505 -> Otherwise you cannot drink water.

5506.342 -> You cannot drink water is printed.

5508.156 -> Or... "You cannot drink Rasna water".

5511.822 -> Lets write Rasna water

5512.93 -> Because drinking water is a good thing.

5514.523 -> Kids should not drink Rasna water.

5517.991 -> Understand the logic like this.

5519.891 -> If someone is of age 114

5522.404 -> Then he/she can drink Rasna water.

5523.764 -> But if someone is of age 11

5526.401 -> So he/she should not even touch Rasna water.

5528.772 -> Cannot drink.

5529.385 -> So what happens is that your condition

5531.958 -> is evaluating in true

5533.861 -> Then it will go inside here.

5535.384 -> Or else it will go here.

5537.258 -> Now if you want to check multiple condition in one ladder.

5541.891 -> So you can use if else ladder.

5544.714 -> So I will write one more thing here.

5546.981 -> I will copy it. I want to show you that

5550.327 -> We can even write even one if statement.

5554.806 -> Single if statement.

5558.295 -> It will work when age is greater than 18.

5561.294 -> I will make the age 441 which is ideally not possible.

5564.835 -> So I will make it 41.

5565.965 -> You can drink Rasna water.

5568.533 -> And after that

5570.833 -> If else statement...

5577.183 -> This was if else statement.

5580.907 -> I have written here if age is greater than 18 then print this or else this.

5584.396 -> Then there is if else ladder.

5587.285 -> If else ladder.

5588.858 -> And I will make If small

5591.97 -> Just to be syntax compliant.

5595.474 -> Now I will write here if age is greater than 2

5600.45 -> Then I will say console.log("You are not a kid").

5606.036 -> If your age is greater than 2

5609.341 -> Then you are not a kid.

5612.581 -> Else if...

5615.096 -> I will show you here

5617.016 -> Age is greater than 56

5619.475 -> Now what i have done here is

5621.882 -> I said that

5623.296 -> If your age is greater than 2 then you are not a kid.

5625.991 -> Or if its not greater than 2

5628.867 -> I will change it to 32.

5631.66 -> If age is greater than 32

5634.099 -> Then it will print this.

5635.772 -> If age is not greater than 32 then check

5638.66 -> Whether age is greater than 26

5641.73 -> If age is greater than 26 then

5644.753 -> console.log("Bacche nahi rahe")

5649.448 -> And I am writing anything here

5652.814 -> Just for the sake of explanation.

5654.276 -> And I will apply else if to 22 too.

5657.672 -> And I will apply else if to 18 too.

5661.377 -> So first it will check 32 and print "You are not a kid".

5664.913 -> And here "Bacche nahi rahe".

5668.064 -> Then "Yes bacche nahi rahe".

5670.769 -> Then...

5672.105 -> 18, "Bacche nahi rahe". Okay?

5673.701 -> I have written this all randomly.

5675.77 -> Now lets see how it will work.

5678.564 -> When this if else ladder is written like this.

5681.603 -> I will write here

5683.202 -> else{ console.log("Bacche rahe")}

5690.914 -> I have saved it here.

5692.535 -> I am saying If age is greater than 32

5694.6 -> Then "You are not a kid".

5696.384 -> Is age greater than 32?

5697.856 -> What was the value for age? It was 41.

5699.526 -> it greater than 32? Yes it is.

5701.663 -> So "You are not a kid" will be printed here.

5703.506 -> It its greater than 32

5705.121 -> then out if else ladder will end here.

5707.809 -> And all of these statements wont be executed.

5710.365 -> I repeat they wont be executed.

5711.843 -> Because in all of these we write else if only

5715.965 -> Then only one statement is executed from all of these.

5718.921 -> If we write of and else together

5721.364 -> only one statement will be executed from both of these.

5723.376 -> And only one if statement is written

5725.123 -> If its true then it will be executed.

5727.276 -> Now here it is written if, else if, else if .....

5729.8 -> then only one will be executed. from all of these.

5732.232 -> Wherever the condition is satisfied

5734.99 -> there it will exit the ladder.

5736.99 -> So I will do console.log()

5742.516 -> console.log("End of ladder")

5744.255 -> I have written here "end of ladder".

5746.138 -> I have saved this.

5747.126 -> And here "You are not a kid" and "End of ladder" is printed.

5750.343 -> So "You are not a kid", this is printed.

5752.979 -> Because the age was greater than 32.

5755.633 -> But if I change the age to 31

5757.09 -> Where they.. Now I can even override variables here.

5759.852 -> I can write here a = 31.

5763.479 -> The value of age was 41. Now I have changed it to 31.

5766.545 -> Now the old condition will become false

5768.926 -> Thus it will check this condition.

5770.529 -> It will check whether the age is greater than 32.

5773.242 -> Yes it is.

5774.065 -> Sorry. Is it greater than 26?

5775.935 -> Yes it is greater than 26.

5777.47 -> So it will print "Bacche nahi rahe"

5779.716 -> And after that it will exit if else ladder and will come to end of ladder.

5783.568 -> Like you can see here. "Bacche nahi rahe", "End of ladder".

5786.758 -> And now after this

5788.333 -> if I change the age to 25

5791.533 -> Like this..

5793.084 -> So I have changed it to 25.

5794.994 -> So greater than 22 will be true

5797.244 -> This is false. This is false. And this will be true.

5799.321 -> "Yes Bacche nahi rahe" and "End of ladder" will be printed.

5801.664 -> So here "Yes Bacche nahi rahe" and "End of ladder" is printed.

5804.135 -> So in this way we can use the if else statements.

5809.322 -> Now I will write a function that

5812.529 -> will take age from the user and will determine whether the user can drink Rasna or not.

5816.495 -> So I want you all to write a function

5819.542 -> And what it will do?

5821.151 -> It will take age as the input

5825.064 -> And according to age it will determine whether you can drink Rasna or not.

5828.226 -> So post the code in the comments.

5832.522 -> So this was our if else ladder.

5835.156 -> So what I will do with age?

5836.745 -> I will do any thing will age.

5839.347 -> I will comment this out.

5840.825 -> I will comment out the whole if else ladder.

5843.872 -> So I have commented out the conditional JavaScript.

5846.841 -> I would have erased the source code. But since I want to give it to you.

5849.743 -> That's why I have commented it out because I want to give it to you.

5852.212 -> My console is very clean now.

5853.662 -> There is no problem in console.

5855.119 -> Now we will see loops in JavaScript

5858.682 -> And we'll see what is a loop, okay?

5860.479 -> So in JavaScript

5862.356 -> I want to first tell you about for loops.

5865.655 -> Now we have seen arrays.

5866.905 -> We have seen that arrays

5868.592 -> Like if I write var arr

5871.34 -> And after that i write 1,2,3,4,5,6

5875.1 -> And after that I do console.log(arr)

5879.478 -> So no surprises, array will be printed. Okay?

5882.687 -> 1,2,3,4,5,6,7 will be printed.

5884.304 -> Now if I want to iterate this array

5886.655 -> Now what does iterate means.

5888.059 -> I want to access all the values one by one.

5892.49 -> Then what will I do?

5893.843 -> I will write here for

5895.949 -> after that I will write var i = 0

5900.17 -> after that I will write var i < 4.

5903.788 -> Or else I will write arr.length

5906.359 -> arr.length will give me length of this array.

5908.704 -> That is 7.

5910.79 -> After that i++.

5913.054 -> I will show you how does this work.

5914.549 -> console.log(arr[i])

5919.121 -> arr[i].

5920.193 -> So 1,2,3,4,5,6,7 is printed one by one.

5924.431 -> How does this work?

5925.972 -> First i will be initiated as 0.

5928.149 -> After that i < arr.length

5930.977 -> That means this condition will be checked.

5933.536 -> And after that i will be incremented.

5935.757 -> And after executing this

5939.324 -> It will be checked again and incremented again.

5942.751 -> It will be checked again and incremented again.

5945.432 -> One by one we will

5948.257 -> keep on working.

5949.055 -> Like i < arr.length

5951.278 -> First the value for i is 0.

5953.799 -> Good.

5955.667 -> The value of i is 0.

5957.393 -> After that we will check if i is less than arr.length?

5959.745 -> That means is i is less than 7?

5961.314 -> Obviously 0 is less than 7.

5962.714 -> So what it will do? It will get into this and

5967.037 -> And it will execute this.

5968.01 -> And after executing it will increment the i.

5970.229 -> What does i++ means?

5972.747 -> That means the value of i has now changed to 1.

5973.976 -> Then it will check this condition.

5975.261 -> Whether 1 is less than 7? Obviously 1 is less than 7.

5978.023 -> It will go inside loop and print this.

5979.551 -> It will update again and i's value will be 2.

5982.089 -> Is 2 is less than 7? Obviously 2 is less than 7.

5984.587 -> Then it will print 2.

5986.157 -> There will be a time when the value for i will be 7.

5988.14 -> Is 7 is less than 7?

5989.944 -> No. 7 is not less than 7.

5992.045 -> So it will print 7 and end it.

5995.163 -> So i's value will change from 1 to 7.

5998.811 -> Until i's value is 6 till then it will print it.

6001.239 -> Now index is starting from 0 here.

6003.295 -> So from 0 to 6 it will be printed.

6007.041 -> Just keep in mind that.

6009.204 -> So this was our method to iterate over array.

6013.459 -> Now there's one more method to iterate over array called as for each loop.

6017.03 -> and by doing arr.forEach()

6020.725 -> you can run a function.

6023.664 -> And what you can do

6025.725 -> You can write element like this

6030.825 -> You can write console.log(element)

6035.025 -> When you write this then from 1 to 7... I will just comment this out.

6040.41 -> I will comment out this for loop.

6042.612 -> So the forEach loop will give same result as for loop.

6047.764 -> So if you want to iterate over an array then forEach is a good method.

6052.764 -> So you can iterate over an array using forEach().

6057.583 -> I will do console.log(element) and I will put a semicolon here.

6060.755 -> I will click here and put a taba

6062.427 -> and console.log(element).

6064.541 -> I have dome forEach and passed an element That will run for every element.

6069.226 -> So the elements here 1,2,3,4,5,6,7

6073.541 -> It will take the values one by one.

6076.098 -> So this was our for loop and along with this we have while loop

6080.315 -> So the syntax is like this

6081.887 -> I will show you while loop syntax here

6084.67 -> I can create a variable here named var j = 0

6088.442 -> I will change it to let j = 0.

6091.537 -> You all will ask "Why var?".

6094.768 -> I will show you.

6095.774 -> Let has a block-level scope.

6100.79 -> The scope is under the curly braces.

6104.497 -> And we should always use let in JavaScript.

6107.293 -> Var is old JavaScript standard.

6109.537 -> So from now we will use let.

6111.375 -> And in a function if we have created a variable with let

6113.874 -> Then after that function the scope for that ends.

6116.341 -> That means outside the function it wont we available.

6118.769 -> So by using let, you can create temporary variables in block.

6123.404 -> Because of that the memory is managed efficiently.

6126.604 -> And it will be beneficial for you.

6130.333 -> I have written let j = 0

6132.675 -> Along with that there's const

6134.748 -> If I have used const to create a variable.

6136.746 -> Like if I do const a = 0

6138.925 -> And then I try to increment a, then it wont work.

6142.401 -> So I will do here a = a + 1.

6147.028 -> And if I do that then it will say "What are you doing?".

6149.731 -> "Identifier 'a' has already been declared."

6152.595 -> So I have already created a.

6155.099 -> That's why this error is coming. How many times you will create a? Already created.

6158.517 -> I will change its name to ac

6162.287 -> So if I do ac = ac + 1 then it will throw an error.

6165.614 -> "Assignment to constant variable" that you can't do.

6167.692 -> And if I do ac++ then too it will throw an error.

6172.08 -> You can see here. It is throwing an error.

6174.788 -> Its saying "Assignment to constant variable".

6177.232 -> So use const when you don't want to override the variable.

6183.877 -> Constant is used for things that you don't want to change.

6187.24 -> This is a very good practice.

6188.326 -> If by mistake you change it then it will throw an error.

6192.502 -> So you will get to know if you do that kind of mistake.

6195.76 -> So whenever we don't want to change a variable.

6199.152 -> So we will use const.

6200.434 -> If you do right-click and format document

6202.348 -> Then your document will be formatted properly.

6206.327 -> So keep on formatting document. Due to that what happens is

6209.305 -> You document will look good. Like this.

6213.448 -> And along with that what I will do

6215.938 -> Now I will show you while loop.

6218.176 -> This was just an example for understanding const and let.

6221.913 -> Lets shift it above. And lets shift let below.

6225.177 -> Now here I will say while(j

6232.567 -> Is my arr here? Yes.

6234.256 -> It ranges from 1 to 7.

6235.261 -> Should I shift it below? No lets keep it here only.

6239.034 -> I will write here console.log(arr[j])

6244.743 -> Now what this will do?

6247.043 -> I will do j++ too. Now I will tell you what will happen here.

6250.208 -> So just see... The value for j was 0 before.

6253.279 -> When this will come i while then the condition will be checked.

6256.006 -> Whether this condition is true? Whether 0 is less than 7?

6258.837 -> Yes its true. Then it will go inside the while loop.

6261.612 -> And after going inside the while loop It will print arr[j].

6266.25 -> After it is printed

6267.91 -> then it will increment the value of j.

6271.2 -> After j is incremented then it will run again.

6274.649 -> Is 1 less than 7? Yes 1 is less than 7.

6276.904 -> And it will keep on executing till the value of j is not 6.

6280.05 -> When the value of j is 6, then what it will print?

6283.477 -> 0,1,2,3,4,5,6... It will print 7. Okay?

6287.337 -> So when it will print 7 here then the value for j

6290.286 -> will change form 6 to 7.

6292.5 -> Because the value for j was 6 when it printed 7.

6295.479 -> After that, is 7 less than 7? No.

6298.369 -> Its not true.

6299.45 -> If you want you can perform it.

6301.486 -> It is false, okay?

6304.069 -> If I come here in 9 messages.

6306.057 -> If I come here in 7 user messages.

6308.206 -> So here it has printed in the range of 1 to 7.

6310.652 -> Why?

6312.64 -> Because the condition was true for those numbers only.

6317.114 -> So we've seen now while loop

6319.639 -> We also have seen for loop. We also have do while loop.

6323.503 -> And the difference between do while and while loop is

6326.184 -> the do while syntax. It looks like this

6329.061 -> do and after that here is while

6332.578 -> and here condition is given.

6333.807 -> Like I will give here j < arr.length

6338.942 -> And I will give same statements as before.

6342.691 -> And I will remove this.

6345 -> I will save it and format the document. Then it will automatically look good.

6348.151 -> I will make it like this.

6351.296 -> When I am formatting it then this space is coming. I don't know why.

6353.178 -> I am not liking the space. I will do backspace like this.

6357.05 -> So the do while loop also has printed from 1 to 7.

6360.489 -> So what was the difference between while and do while?

6362.666 -> When do while gets the control from above then it gets into do

6366.393 -> It will run atleast once.

6368.026 -> After that condition will be checked.

6369.691 -> So if I the change the j's value to 10

6373.684 -> So this condition is false.

6375.383 -> But it will go into this condition without checking

6379.316 -> And here undefined will be printed. That means

6381.089 -> arr[10] is undefined. Because there is no index of 10 here.

6385.299 -> Index is only till 6.

6388.18 -> So there's no 10.

6390.41 -> Because there is no index of 10 that's why it is printing undefined.

6393.524 -> And after that condition will become false.

6395.351 -> It will come out of while loop.

6396.853 -> So the difference between while and do while is

6400.242 -> While loop checks the condition first then runs

6402.706 -> So while loop runs atleast once.

6404.648 -> It will run whether the condition is true or false.

6407.476 -> And we can see here it goes into loop once.

6410.532 -> Do and check condition.

6413.614 -> If its false then come out. If its true then keep running.

6415.966 -> So if you want to run something atleast once

6418.864 -> So use do while loop.

6421.505 -> These were our loop.

6423.629 -> Now we will se break statement and

6425.75 -> continuous statement.

6427.665 -> Break and continue are very important concepts.

6430.787 -> You can use break and continue in any loop.

6434.234 -> What does continue means?

6435.961 -> Continue means leave this iteration and proceed to next iteration.

6441.495 -> And break means stop looping.

6444.778 -> I will explain this with an example.

6448.67 -> And I will take example of very simple for loop. That is here.

6453.163 -> And what I will do I will comment out these lines.

6457.967 -> And I will show you this for loop example in which elements are printed from 1 to 7.

6463.699 -> If I put a condition in our for loop.

6467.341 -> If i is equal to 2

6471.066 -> then break it.

6473.9 -> So the moment the value of i becomes 2 it will leave the for loop.

6480.448 -> So just see here. Only 1 and 2 is printed.

6482.924 -> So it says when i is 0 then print 1

6486.894 -> when i is 1 then print 2

6489.631 -> when i becomes 2 then you said leave it

6491.51 -> Break this loop and come out.

6494.287 -> break this and come out.

6496.538 -> Break your promise about iterating this loop and come out

6501.26 -> So you will come out of the for loop.

6504.743 -> But if I change this to continue

6508.412 -> Pay attention to the difference

6511.984 -> If i = 2 and i continue it

6514.375 -> So it will stop here

6516.277 -> The further code wont be executed for 2.

6519.298 -> After that it will be normal

6521.438 -> 4,5,6 it will run for that.

6523.936 -> Only 3 wont be printed rest all will be printed.

6527.041 -> Only 3 hasn't been printed. Rest all printed.

6529.957 -> Why 3 wasn't printed? Because i = 2

6533.026 -> 0,1,2 , okay?

6535.017 -> So i = 2 wont be printed because you cancelled it.

6539.761 -> Continue means cancel this iteration.

6542.609 -> Continue other iteration.

6544.169 -> Continue means cancel this iteration and continue.

6549.057 -> I hope you all understood break and continue.

6553.986 -> All right guys! We have seen arrays. Now we will see some array methods.

6558.363 -> This this arr array, I will apply some methods here.

6561.683 -> In fact if I create a new array named myArr

6566.138 -> and I will put some items in it like fan

6570.577 -> and camera

6573.364 -> and I will put a number and a null.

6578.401 -> To emphasise that

6580.623 -> that an array should not contain all strings, numbers and undefined.

6586.247 -> Or everything should be null.

6587.521 -> You can put mixed things here like strings,

6591.633 -> numbers, booleans. Lets put a boolean here.

6595.394 -> So I have also included a true here.

6598.06 -> Now here I will show some methods that i will apply in array.

6603.354 -> If I show you all my console

6605.757 -> So it contains some numbers

6607.002 -> I will just clear this. I was running a loop. I will close this.

6610.751 -> Close means I will comment it out.

6613.257 -> And it has gone. My console is clear now.

6616.726 -> My console is empty.

6618.957 -> Now I will show you array methods.

6622.173 -> So I can apply some methods on myArray.

6625.621 -> What they will do?

6627.939 -> It will perform some task.

6629.205 -> Like if I do myArray.length

6631.951 -> and if I console.log(myArray.length)

6633.741 -> Then what will happen is

6636.399 -> This will print the length of the array.

6639.317 -> Here the length is 5.

6640.696 -> It has 5 elements... 1,2,3,4,5.

6642.784 -> Thats why it has printed the length of the array.

6647.266 -> After that, lets suppose

6649.203 -> I want to remove an element from the end.

6651.92 -> I will show you here.

6653.686 -> If I write here myArr.pop

6658.083 -> Then what will happen? And element will be removed from the end.

6661.101 -> And after that, If I print myArray

6663.438 -> So the last one won't be true

6665.674 -> It is only till null.True is not available. Only 4 elements are printed.

6669.24 -> By this way what I can do?

6670.47 -> I can remove the last element of array.

6674.598 -> If I write here myArr.push("harry")

6679.424 -> So harry will be pushed into this

6681.067 -> That means I will add harry in this

6682.422 -> And it is important when you want to push in a loop.

6686.011 -> In an array that contains many elements.

6687.614 -> So you can use this method.

6689.845 -> Method means function that you're using on an array

6692.432 -> So that you can change it

6694.268 -> Or you can return some value

6696.022 -> Like in arr.length, we return the length of the array.

6701.587 -> Along with that we have a shift method

6704.112 -> That I will show you here.

6705.674 -> If I write myArr.shift

6710.577 -> .shift then what will happen? First element will be removed

6712.965 -> So it starts from camera and fan is removed.

6716.183 -> So what does this shift method do?

6718.12 -> It removes the first element and keeps the rest of the elements.

6722.554 -> Now, what is unshift?

6725.555 -> I will tell you what is unshift.

6728.448 -> Unshift lets you...

6729.572 -> I will perform it for you

6731.287 -> In fact I will comment this out and write unshift here.

6733.89 -> Like I showed you push, if I unshift harry

6737.212 -> So you can see it was fan, camera, 34, null and true before.

6740.486 -> Now it is harry, fan, camera, 34, null and true.

6742.203 -> That means it has added harry at the start.

6745.81 -> But if i console.log(myArr.unshift("harry"))

6748.694 -> So what it will do? It will return new array's length.

6752.001 -> That means it will print 6.It

6754.702 -> returns new array's length

6756.839 -> So I will write it like this.

6760.064 -> Or if I write it like this. I will show you how I want to write.

6764.222 -> I will write here newlen = myArr.unshift("Harry")

6768.611 -> I will aslo use let here.

6771.699 -> In fact I will use const. I don't want to change this.

6773.795 -> newLen = this

6775.118 -> And I will write newLen here. And After saving it just see here

6780.284 -> What it will return?

6781.786 -> I have done console.log(newLen)

6784.202 -> myArr.unshift("harry")

6786.828 -> And newLen is returning 6.

6789.411 -> And after that, I have printed myArr.

6791.623 -> So what does it print? It prints new length.

6794.949 -> New Array's length. Which is incremented if you have unshifted something.

6799.404 -> So by this way what you can do?

6801.783 -> By this way you can implement some methods on array's elements.

6804.822 -> There are more methods available for array.

6807.804 -> That you can use.

6809.728 -> And I want you to go onto the internet

6813.195 -> Search for array methods

6814.555 -> And explore different methods.

6819.917 -> I will give you an example named toString.

6823.045 -> myArr.toString

6825.668 -> If I run this then

6828.063 -> It converts an array into string

6830.203 -> You can find this type of string.

6832.468 -> Then there's a method called myArr.sort.

6835.313 -> myArr.sort...

6838.786 -> And it sorts the array if it consists of numbers.

6841.796 -> Lets us take some random numbers.

6847.588 -> And....

6849.125 -> After that, if I do d.sort() Then what does it do?

6853.306 -> It has sorted and returned those numbers.

6856.664 -> Now you might be thinking that they're not sorted

6859.435 -> Then I will tell you why. The sort method

6861.204 -> It converts everything into string

6863.952 -> And after converting into string, it checks that

6866.625 -> What should come first in dictionary.

6868.516 -> So if I wanted to write these all in dictionary

6871.031 -> So first I will write whatever is starting with 1.

6873.859 -> After that whatever is starting with 2, I will write that

6876.965 -> If there are more than one element that starts with 2

6879.414 -> So after that which number is there I will check that.

6881.647 -> So it is sorting these numbers alphabetically.

6883.779 -> So you can explore this more.

6886.661 -> But I was just giving an example that.

6889.638 -> Which methods are there in JavaScript.

6891.322 -> Can you go onto internet.

6893.679 -> Search for JavaScript array reference methods.

6897.615 -> And you will find some relevant content on it.

6901.34 -> This MDN website is very reliable.

6906.045 -> You can find many things here

6908.978 -> You can find examples.

6910.343 -> And you will find reference for different methods.

6912.87 -> And you can explore this.

6915.743 -> Coming back to the tutorial.

6917.436 -> We have more array methods

6919.259 -> like splice, valueof

6923.067 -> and many more methods. You all can explore this.

6927.367 -> Good.

6929.427 -> Now I will show you here string methods

6934.653 -> In JavaScript. Which string methods are available in JavaScript?

6939.64 -> So how does string looks like?

6941.994 -> my....

6944.647 -> myLovelyString is equal to

6948.421 -> "Harry is a good boy".

6950.114 -> I have saved it here.

6952.36 -> The first string method I want to show you is

6955.776 -> That is How do you find string's length?

6960.389 -> The way we find array's length

6962.697 -> In that we we can find string's length.

6965.322 -> So if I show you all here 19 is printed here.

6967.892 -> I will comment this out.

6971.454 -> Because I don't want to see that. I want to focus on string.

6975.931 -> So 19 is printed because my string's length is 19.

6980.473 -> It had 19 characters.

6982.829 -> Now lets suppose I want to find something.

6985.123 -> Suppose I want to find "Harry" in string.

6988.205 -> So I will write

6989.132 -> console.log(myLovelyString.indexOf("Harry"))

6998.568 -> The index of Harry is 0. Because Harry is on 0.

7001.122 -> It is starting from 0.

7002.733 -> Or if i would've write "good" here.

7005.121 -> So I will show you all

7006.232 -> *Counts from 0 to 11*

7012.283 -> Output should be 11.

7013.601 -> Output should be 11. Yes 11 as output is printed.

7015.711 -> So indexOf() shows you what index it is starting from.

7020.264 -> So this indexOf()

7022.51 -> If I write here more "good good"

7026.828 -> Then also it will return 11.

7028.507 -> So by default it returns first index.

7031.409 -> So it returns the first index

7035.586 -> It returns you index of first occurrence.

7039.018 -> But if you want the last occurrence

7040.668 -> that means if you want this g

7043.841 -> So you all can use lastIndexOf() method.

7047.84 -> When you will use lastIndexOf() method

7051.621 -> You will write like this and it will give you the last index.

7053.742 -> Like in this case it is 25.

7055.64 -> You all count...

7057.13 -> Remove 4 from 29

7060.609 -> 25 is printed.

7061.361 -> So you all can use it like this.

7063.365 -> Count it and you will get the last index.

7066.722 -> So these were some of our string methods.

7069.899 -> Now suppose if I want to slice string.

7072.314 -> I will comment this out.

7074.028 -> What I will do here? I will shift it below and

7077.366 -> And I will uncomment this

7079.225 -> I will write here slice()

7081.37 -> And I will write here 0,5

7084.578 -> So if I write here console.log(myLovelyString.slice(0,3)).

7088.294 -> So it has started from 0 and taken 3 characters.

7091.747 -> So it has taken 3 characters starting from 0.

7094.586 -> If I do change this to 1,3

7096.399 -> So what it will do

7098.09 -> It will take characters from 1 to 3 i.e 2 characters.

7101.309 -> Basically what it does is

7102.699 -> It starts from this index and goes up to this and excludes this.

7105.19 -> From 1 till n-1.

7107.493 -> Whew n is this.

7108.316 -> If I change this to 4

7109.814 -> So what it will do?

7111.899 -> It will take up to 3 indexes.

7114.378 -> It will only show me 3 characters

7116.319 -> It has printed characters form index 1 to 3.

7118.583 -> So in this way you can do slicing in JavaScript.

7121.792 -> By this method which will help you to do slicing.

7125.355 -> We have more methods for slicing.

7128.946 -> I want you all to search that by yourself.

7130.95 -> I want you to see more methods in string.

7135.821 -> I will show you one more method of string i.e replace

7139.25 -> And what will replace do?

7141.12 -> The replace() method replaces a value in string.

7147.35 -> I will sow you how you can replace.

7151.017 -> You have to write myLovelyString.replace

7154.134 -> Suppose I want to replace Harry with Rohan. ("Harry", "Rohan").

7161.395 -> Here I have replaces Harry with Rohan.

7164.536 -> What will happen when I replace Harry with Rohan?

7167.336 -> You all see here when I replace Harry with Rohan.

7170.802 -> And I will write here d =

7174.12 -> Now I will print here d and myLovelyStr.

7178.389 -> And you all can see, this is my new string and this is my old string.

7181.925 -> That means I have replaced

7184.394 -> Harry with Rohan.

7186.879 -> Like I replaced Harry with Rohan, similarly I can replace

7192.393 -> replace "good" with "bad" in d.

7199.291 -> So in d, "good" will be replaced with "bad".

7201.265 -> So see here "Rohan is a bad boy"

7204.64 -> "good".

7205.361 -> Now you might have noticed one thing that

7207.161 -> That it only replaced on occurrence

7209.295 -> It didn't replaced all the occurrences.

7210.606 -> It just replaced the first occurrence in string.

7213.358 -> That means this replace() method just replaces the first occurrence

7217.68 -> That means if I remove this from here.. "Harry is a good boy"

7221.162 -> And write Harry

7222.279 -> Then in Rohan's string Harry will be there.

7224.599 -> So this was a notable thing.

7228.635 -> These were some of our string methods. I hope you all understood these methods.

7235.297 -> All right guys! Now we will talk about JavaScript dates.

7239.513 -> After talking about JavaScript dates, We will move towards DOM manipulation.

7245.312 -> So if I show you my console then it looks something like this.

7249.135 -> I and printed d and lovelyString

7252.584 -> Now I have removed them.

7253.861 -> And I will write here my date is equal to

7258.387 -> myDate = new Date()

7260.944 -> And then if I do console.log(myDate)

7265.68 -> I will put a let here.

7267.15 -> Even if I don't use let then too there wont be any problem.

7269.665 -> But I try to follow discipline when I write my code.

7274.887 -> So here... I will reload this.

7277.713 -> In fact my live server is not active.

7280.19 -> So I have to turn on my live server.

7282.872 -> I closed that before. I came in console by inspecting.

7286.214 -> And here you all see

7287.88 -> I got the date here

7290.416 -> Now dates have got some methods.

7293.273 -> You can find references for that on the internet.

7297.812 -> I won't tell you to memorise it.

7300.14 -> So what you all can do here?

7302.75 -> You can apply the methods on dates by searching on internet.

7309.176 -> Now date have got several methods

7312.018 -> Like I will show you here

7313.792 -> One method I will show you

7316.358 -> Here I will write console.log(myDate.getTime())

7320.84 -> getTime() is a method that gives you time in seconds.

7324.704 -> After that I have one more method

7327.84 -> getFullYear()

7328.935 -> getFullYear() method gives the current year.

7333.165 -> After that, if I do getDay()

7337.426 -> So it has given me the day i.e 6.

7342.141 -> Now What is this 6?

7343.676 -> Today is Saturday.

7345.433 -> So if I write getDay() here...

7347.987 -> If I start writing from Sunday

7350.643 -> Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

7357.604 -> If I start counting from 0 to 6 *Starts counting from 0 to 6*

7361.967 -> So Saturday is on 6. That's why getDay() returned me 6.

7365.577 -> Along with that there's getMinutes()

7368.652 -> If I print getMinutes(), It will print the minutes.

7373.235 -> So here you can see minutes are printed.

7377.282 -> If I do getHour()

7378.951 -> getHour()

7379.648 -> Then it will be printed too.

7381.041 -> So like this you all can understand that

7383.169 -> You can print all the things regarding to dates.

7386.261 -> You can use dates like this in JavaScript.

7389.266 -> As you can see I have printed hours here

7392.847 -> And I will comment this out.

7396.892 -> And you all explore date on internet.

7399.589 -> See more methods on that.

7401.447 -> And here the new keyword

7403.556 -> This is used to create new date

7405.764 -> By this way we create new date

7407.687 -> Now we will come to DOM manipulation.

7411.235 -> What is DOM manipulation?

7412.298 -> You might be thinking what is DOM manipulation.

7414.271 -> It is a very important thing.

7415.41 -> DOM means document object model.

7417.429 -> If I come to console and write document and click enter

7421.696 -> So I got a document object. This is nothing but

7425.528 -> This is the same document that you see here.

7428.268 -> If I write document.location

7430.843 -> So it has printed a object that contains many things

7434.513 -> Like it contains ancestors origin, signs, host

7439.1 -> port, hostname, toString and many more things

7443.665 -> It contains many methods.

7445.809 -> So this document

7447.855 -> We can use it to access out HTML elements

7453.995 -> Our DOM is the document visible to us.

7459.755 -> This is DOM.

7461.718 -> Along with that, this is DOM.

7464.268 -> If I open youtube then this is also DOM.

7467.797 -> If I open my Django tutorial then that is DOM too.

7471.346 -> If I open my C++ tutorial then that is DOM too.

7474.716 -> This is hyperlink.

7476.553 -> This is an image.

7477.777 -> These are images.

7478.878 -> These are links.

7480.445 -> So whatever you can see is DOM.

7482.752 -> That is Document Object Model.

7487.991 -> Now we have some methods in DOM

7489.505 -> And with the help of those we can manipulate HTML.

7492.575 -> We can present our HTML dynamically.

7495.664 -> Like If I want to click on this click me

7498.705 -> And here its ID is click.

7500.74 -> So I can say document.getElementbyId()

7503.993 -> and click on click. document.getElementbyId('click').click

7508.936 -> Them moment I ran this it clicked.

7510.839 -> You might did not get to know it clicked but it got clicked.

7514.137 -> And on this if I do .style.border

7521.396 -> blue

7523.407 -> Then you all can see the border has turned blue.

7525.614 -> And if I write

7527.581 -> 2px solid

7531.059 -> blue. I am writing the CSS dynamically.

7535.205 -> So now border has been set as 2 pixel solid blue.

7538.651 -> That you can see. So I can dynamically

7541.562 -> I can change my page's content

7543.889 -> With the help of JavaScript.

7545.25 -> And I can apply this on user's interaction.

7549.124 -> This work can be done after a thing has been fetched from a network

7552.365 -> I can do it after that.

7554.202 -> Now you understand this DOM

7556.667 -> This HTML that I have written

7558.903 -> That is my DOM only.

7560.412 -> JavaScript is also there. But this HTML that I have written

7562.818 -> I can manipulate this.

7564.593 -> Now I want to show you some DOM methods.

7568.641 -> I told you in the starting that ID is an identifier.

7572.643 -> Suppose there's one ID named click. Then that name cannot be used in another element.

7577.92 -> But class can be used. Like I have used container here

7582.365 -> and here too.

7583.446 -> So this is our class. I can use class in multiple elements.

7586.669 -> So I can write CSS in style tag

7590.049 -> And I can write like this container

7593.679 -> Change its border to 2 pixels solid red.

7599.538 -> I know it wont look good. But I am telling it to change.

7603.622 -> Then I will change the margin to 3 pixels

7608.456 -> 0 pixels and 3 pixels.

7614.841 -> Now after putting semicolon, Left-right border is changed to 3px and top-bottom to 0px.

7619.062 -> But I should have kept top-bottom as 3 pixels And left-right as 0 pixels will also work.

7625.116 -> So here it has given top-bottom margin.

7627.521 -> Like you can see spacing has been created here.

7630.341 -> And I change its background colour I will say the background

7634.238 -> change background to cyan

7637.148 -> Cyan is a colour that looks like this.

7639.944 -> Now I can change the padding. I will say the padding

7643.452 -> Change it to 9 pixels.

7645.119 -> And what is padding? The spacing that is available inside.

7647.706 -> See it has given spacing inside.

7649.218 -> So I can do things like this.

7651.222 -> If I want to remove the default spacing of the body

7654.868 -> I will say here *

7658.033 -> margin : 0;

7660.923 -> padding:0;

7662.969 -> So it will reset my CSS.

7665.437 -> So here, there is no margin and padding.

7668.194 -> So in this way I can do things.

7670.314 -> I can create navbars.

7671.63 -> I can create a responsive website.

7673.417 -> I can do many things.

7674.647 -> But I want to show you some methods of DOM manipulation.

7680.336 -> First we have seen getElementById()

7682.877 -> If I write here

7685.515 -> "DOM Manipulation". And after that I will write

7692.046 -> The first method of DOM manipulation.

7693.718 -> That is...

7696.031 -> document.getElementById()

7700.113 -> And this method is used

7704.166 -> When you want to target an element by its ID.

7708.961 -> If I write here let elem =

7713.096 -> document.getElementById('click')

7713.596 -> And if I console.log(elem)

7717.134 -> So just see here

7718.764 -> Element is printed here.

7720.278 -> button id ='click'>Click Me is printed here.

7726.356 -> Along with that.

7728.142 -> If any other element

7730.086 -> If I would've done document.getElementByClassName()

7733.512 -> And I would've passed container, then I would've got these 2 elements.

7735.648 -> I would've gotten a HTML collection.

7737.962 -> I will also show you that.

7740.803 -> If I write here.

7743.199 -> elemClass, elemClass. Okay?

7747.944 -> And I will write here container.

7750.23 -> I also have to change the method.

7752.065 -> Now I will show you all a trick.

7753.536 -> You might be asking why they've used such long names?

7755.139 -> getElementById(), getElementByClassName() Who uses such long names?

7759.698 -> So here understand a trick. You write g

7763.391 -> You write e. g for get, e for element.

7766.906 -> by, c for class,

7769.959 -> n for name. Click on enter and it will be autocompleted.

7772.199 -> This feature you will get in most of the source code editors.

7777.059 -> And this feature will help you to edit code quickly.

7782.359 -> So here how comfortably I have written

7785.82 -> And write container.

7789.16 -> The moment you will write container. Just see here.

7791.536 -> There is an HTML collection.

7794.479 -> Which contains 2 containers.

7795.913 -> Now suppose I want to change first container's background to yellow

7799.433 -> So I will say that the matter is

7801.866 -> In the elemClass

7805.485 -> the first element in it

7808.194 -> the counting starts from 0

7810.074 -> .style.... Oops what have I done.

7813.059 -> .style. and I will write here

7816.368 -> background = and what I will write here? yellow.

7821.584 -> And by this I have changed the background.

7826.12 -> So by this way I can target elements

7829.032 -> I can change their backgrounds

7830.998 -> I can apply a border.

7832.443 -> Along with that I can change font size.

7834.577 -> I can change their CSS.

7836.825 -> Or I can remove them with the help of CSS.

7839.633 -> Or I can add more classes.

7842.072 -> Like suppose I am creating a class. Not here

7846.364 -> I have to create the class here. In the CSS.

7849.297 -> And suppose the name of the class is

7851.549 -> What should I name it?

7852.938 -> I will hold any CSS property

7855.044 -> I am naming it bg-primary

7857.691 -> And it doesn't do anything

7859.361 -> It just changes the background colour to blue-violet.

7863.044 -> aliceblue... Lets change it to blue-violet.

7867.67 -> I am liking this colour.

7869.388 -> I have saved it.

7870.666 -> What I can do here?

7872.188 -> What I can do is

7874.335 -> This elem[0].

7875.997 -> The class of elem[0]

7879.078 -> Add a class in it named bg-primary.

7881.766 -> How will I do this?

7882.949 -> I will write .classList.add

7887.023 -> And after that I will write

7888.762 -> bg-primary I have defined Just add it.

7892.86 -> I have added it. I have to remove this.

7896.945 -> And I have added bg-primary. So just see here

7899.695 -> This has changed to violet.

7900.907 -> So basically what happened is The function that I ran.

7903.725 -> So the bg-primary class in here

7907.178 -> It has been added.

7908.692 -> Now I can add even more classes. Like suppose

7913.505 -> The text

7915.149 -> I want to add text-success

7916.501 -> That I haven't created yet

7918.696 -> But I have added it Just see it has been added

7920.908 -> Irrespective of whether I have created it or not

7923.624 -> So I will create text-success here

7926.263 -> If I create text-success here

7929.459 -> And I am telling it to change the colour to green

7933.448 -> Make it green.

7935.581 -> And along with it, I will write a paragraph in click me oops...

7939.536 -> And I will write "This is a paragraph".

7943.164 -> Paragraph...

7946.645 -> "Which is the best para of the universe"

7951.927 -> I have saved it.

7953.607 -> And it is not visible here because its in green.

7956.274 -> So lets suppose...

7959.762 -> I want to change the colour to white. So it is visible.

7963.876 -> So I have changed the text-success colour to white.

7966.081 -> The moment I changed it to white

7968.014 -> it changed to white.

7968.988 -> So basically I have added this class.

7971.851 -> So you can do classList.add() and classList.remove()

7975.86 -> So now I will remove text-success from here.

7979.018 -> So if I write remove. REMOVE

7983.093 -> So text-success has been removed

7984.837 -> It is no longer white.

7986.61 -> If I reload this then it will return

7988.307 -> But my code, what it will do?

7991.808 -> It will remove the classList.

7993.499 -> It is written text-success here

7995.657 -> after entering it will be gone.

7997.271 -> text-success has been removed from here. From the first container.

7999.855 -> So by this way, what I can do?

8001.577 -> I can remove its class.

8005.141 -> Similarly, inside the HTML there are elements

8009.227 -> I can access those.

8011.48 -> As a string I have got its HTML.

8014.12 -> The HTML written inside is

8015.768 -> first is button, click me

8016.877 -> and a paragraph.

8018.795 -> So this is all the HTML that I can borrow.

8022.287 -> If I run innerText

8024.168 -> then I will get the text inside this. Only text.

8027.319 -> not HTML, only text.

8029.388 -> And I want to show you all of those things.

8032.759 -> So I want to write here console.log(). This thing I will perform and show it to you.

8037.988 -> in elem.

8039.567 -> elem.innerHtml

8042.035 -> and elem.innerText, both.

8045.559 -> If I type ite, then it will suggest me innerText

8048.205 -> Because it contains i and te

8051.089 -> So if you write anything in this direction

8053.676 -> Like I write ierxt, then it will automatically be suggested. I will show you.

8058.866 -> I typed ierxt and suggestion is coming.

8062.642 -> It has been highlighted if you see carefully.

8066.284 -> i, then er, then xt.

8070.44 -> In the end, the xt is in bold.

8072.34 -> e is not as bold as xt.

8074.476 -> So in this way it has found in which element.

8078.697 -> I want to write.

8080.255 -> Now I have written here elem.innerHtml, elem.innertext.

8084.22 -> Here, I have written elemClass[0]

8085.516 -> That means elemClass, my HTML collection

8088.318 -> It is like an array, but different.

8091.889 -> That i have changed to bg-primary by using .classList.add.

8095.599 -> I have added text-success too.

8098.639 -> If I grab this innerText or innerHtml

8103.715 -> I haven't saved it

8105.818 -> I will save it and reload it

8108.257 -> And it is click me, click me. Why is it doing that?

8110.658 -> I want to see innerText of elem.

8113.454 -> So If we talk about elem

8115.788 -> What is elem? document.getElementById('elem'). This is elem.

8120.046 -> The HTML and text is written inside here

8122.869 -> It contains code, okay?

8123.907 -> But if I do this same task in elemClass[0].

8128.227 -> That means if I do this same thing in elemClass[0].

8130 -> I will copy it

8131.637 -> I will replicate it here. Control + d is the shortcut

8135.839 -> You can also create your shortcut here.

8138.916 -> And default shortcut list is available online.

8141.97 -> So you can go in shortcuts

8143.874 -> Here keyboard shortcut is written.

8145.706 -> You can use it

8147.406 -> Here you can set your keyboard shortcut.

8149.446 -> If you're using lime, atom... Many editors are available in market

8154.086 -> You can use it.

8155.881 -> But far a beginner, VS code is the best. Even I am using it.

8161.522 -> I have saved it.

8162.722 -> And after saving "click me", "this is a paragraph" is coming

8165.563 -> Its HTML is coming.

8167.519 -> This innerText is coming.

8168.546 -> So innerText and innerProperties are the 2 properties.

8172.173 -> And with its help, I can print the inner content.

8179.102 -> If I talk about more methods that helps us to find HTML elements

8186.069 -> So I have one

8188.084 -> I will write here elem.

8190.127 -> or document.getElementByTagName()

8194.797 -> I also have getElementByTagName()

8196.58 -> So I will do one thing

8197.65 -> I will comment out these console logs

8200.779 -> And I will also comment this out.

8201.98 -> Then we can see a clean console.

8204.867 -> My console is clean even if I reload this

8207.233 -> So here its showing no user message. That means user haven't left any message.

8213.522 -> So here I have started with a clean console.

8217.912 -> I will show you more methods here

8220.3 -> One Method that I want to show you is

8222.827 -> That is getElementByClassName().

8225.825 -> Sorry. getElementByTagName().

8228.898 -> So I will write here

8230.876 -> tn = document.getElementsByTagName()

8235.601 -> Okay?

8236.148 -> I wrote tn and it suggested me.

8239.277 -> And I want to print all the buttons.

8242.625 -> And I will write here console.log(tn).

8248.07 -> And here you all see

8249.808 -> It has printed the buttons.

8253.673 -> If I want to print all the divs, then I will change it to divs.

8257.519 -> And I will get all the divs.

8259.512 -> I had 2 divs and they're printed. This and This.

8261.437 -> And if I hover my mouse above it

8263.714 -> it is highlighted in the document.

8265.585 -> They are being highlighted when I hover my mouse above it.

8268.441 -> That means, I can find all the elements with tag name.

8274.742 -> So you've seen getElementById()

8277.117 -> getElementsByClassName()

8279.087 -> Elements because there can be multiple elements.

8281.588 -> If it was getElementById()... This is very important to understand.

8285.203 -> JavaScript method signifies that Id can only be 1.

8288.723 -> And this is elements.

8292.498 -> Elements means multiple elements. It is plural.

8296.83 -> Now If you want to add a child in element

8300.974 -> Suppose I want to add child in this div, tn[0].

8307.046 -> So I will write tn[0].addChild().

8311.042 -> Sorry, tn[0].appendChild()

8315.253 -> appendChild()...

8317.26 -> And I can put a HTML element in there.

8320.52 -> And I will write here created element.

8324.357 -> So what will appendChild() do? It will put an element in this div.

8327.78 -> But what is this createdElement?

8331.207 -> We have to create this element because it has not been created yet.

8334.423 -> So I can create a paragraph with the help of document.createElement()

8340.88 -> Okay?

8341.82 -> And I will say here the innerHtml of createdElement

8347.405 -> or innerText, then change it to

8350.939 -> "This is a created para"

8353.412 -> And just see what happened here

8355.331 -> "This is a created para" appeared here.

8357.104 -> Why?

8357.945 -> Because I created a child first

8359.459 -> And I created an element with the help of JavaScript.

8363.159 -> And I fixed that element in tn[0]

8366.297 -> What is tn[0]?

8367.74 -> First div. Because the counting starts from 0. That's why first div.

8372.649 -> Now what we can do here? We can replace.

8375.603 -> We can replace a child.

8377.443 -> Like if I create createElement2 here

8381.746 -> If I create 2. I have to change it to 2 here.

8385 -> And I won't create p this time. What I will create this time?

8388.292 -> Lets create some other element this time.

8389.971 -> Lets create an element b, for bold.

8392.915 -> So I will pass "This is a created bold".

8396.236 -> Here I had appended child.

8397.794 -> Now what I will do? In tn[0]

8401.68 -> I will do .replaceChild

8404.146 -> And what will replaceChild() do?

8406.545 -> replaceChild() takes

8408.272 -> new child. That is createdElement2

8414.394 -> and createdElement.

8418.576 -> okay. createdElement. It takes this 2 things.

8422.959 -> And It will replace it here

8424.455 -> "This is a created" was here... And it didn't replaced it here

8429.288 -> Let me check what's the problem

8435.339 -> Okay. So I did not write created here.

8437.935 -> Sometimes its is difficult to find these things.

8441.236 -> Sometimes it takes minutes. Sometimes seconds.

8444.006 -> So see here. What I did this time

8446.343 -> I replaced the child.

8448.439 -> I have shown append, replace.

8452.058 -> Now I will show you some more methods and their usage.

8455.73 -> We have already talk about append child.

8457.979 -> There's also a removeChild()

8460.362 -> What does removeChild() do? removeChild()

8463.144 -> and element i.e which element you want to remove.

8466.89 -> What it will do? It will remove. Removes an element.

8470.324 -> And we have more methods for adding and deleting elements.

8475.228 -> I want you all to explore it.

8478.516 -> And find some reference on the internet That has more information on it.

8482.609 -> Okay. Or else you can create your own reference sheet. It is not that difficult.

8486.843 -> But try to find source on the internet. Like I use MDN docs.

8491.108 -> That is a source where I get all the methods.

8493.891 -> And if you know some method exists,

8497.062 -> Then you can do a google search about it.

8499.684 -> Like which method replaces a child.

8502.08 -> Maybe even I will forget this method

8505.669 -> I will be transparent with you. I don't want to be a superhuman.

8511.327 -> I am being very transparent

8513.936 -> I can forget any method. But the concept

8517.123 -> Concept I won't forget. Like I will always remember there is a method which replaces element.

8522.089 -> Yes elements in JavaScript can be created and added

8527.235 -> In another element

8528.425 -> All of this logic you will get to know by practice.

8533.204 -> I wanted to let you know all of these.

8535.674 -> With that set, I want to show you all

8538.943 -> You can search on the internet The document which we have

8542.594 -> The Document Object Model has many things like document.location will show us

8548.258 -> If I write document.title, then the page title will be shown.

8551.718 -> Then if I write document.url, that also works

8555.923 -> You can see here

8558.472 -> document.scripts

8561.72 -> It returns all of the available scripts.

8566.035 -> This script is injected by live server.

8569.409 -> And one I have created. So I have got these 2 scripts.

8573.7 -> Then

8575.388 -> document.links returns all the links.

8578.418 -> I don't have any link here.

8580 -> And there are many things that you can get like

8582.707 -> document.form returns all the forms

8585.223 -> Its useful when you want to find form on a page.

8589.655 -> If you want to extract images, then use document.images.

8594.846 -> document.domain returns domain without port and slashes.

8599.907 -> So Like this you can use the properties of document.

8607.929 -> So this was our document.

8610.485 -> I have shown you elements like how you can

8613.005 -> find the elements.

8615.204 -> We can use tagname.

8617.028 -> I want to show you one more thing that I haven't shown yet that is document.querySelector.

8622.67 -> Selecting using query, okay?

8625.422 -> If I write here

8627.96 -> I will write sel that stands for selector.

8630.749 -> document.querySelector() and after that

8635.264 -> I will pass .container, then it will return the container's class.

8639.762 -> So here I will do consolee.... Not confirm.

8645.186 -> If I perform console.log(sel)

8650.717 -> So You all see here what it does.

8652.037 -> The first class of container element it has returned.

8656.295 -> If I do query selector all... I will perform it here.

8660.786 -> querySelectorAll()

8664.785 -> So it will give me all the containers.

8666.712 -> Here it has given me NodeList of 2 containers.

8668.616 -> So querySelectorAll will return NodeList

8671.446 -> And querySelector will return only one element.

8676.039 -> So in this way you can use querySelector and querySelectorAll

8681.595 -> So this basically uses CSS selectors.

8683.582 -> So If you know CSS then it will be beneficial for you because

8687.819 -> Because this selects the elements in the same way as CSS.

8692.677 -> For styling.

8695.389 -> So in this way

8698.353 -> We can use this thing.

8699.518 -> I hope that In the document, how do you have to access things

8704.532 -> You have understood all of that.

8706.602 -> All right guys! Now we will talk about events in JavaScript

8710.757 -> What are events?

8712.303 -> For example in your house

8714.567 -> You have someone's birthday or your parents' marriage anniversary

8718.932 -> There are many events

8720.226 -> These are called events.

8721.448 -> In JavaScript also, if something is happening then that is called an event

8724.292 -> Like here if I show you

8729.031 -> Events in JavaScript.

8730.723 -> So what are these events in JavaScript?

8732.561 -> We will talk about that now.

8734.679 -> Look event is a thing that is happening.

8737.985 -> Like your user is clicking or hovering his/her mouse.

8742.224 -> This action I am doing with the mouse is an event.

8745.165 -> I clicked on "Click Me" which is an event.

8747.057 -> I am hovering over "This is a Paragraph" as an event.

8750.203 -> So we can listen to these events

8753.416 -> We can say "The moment 'Click me' is clicked"

8758.353 -> "On 'Click Me' "

8759.607 -> Something should happen

8760.773 -> So if I want to attach some event like this with "Click Me".

8764.37 -> Firstly I can do that with HTML.

8766.432 -> And what will be the process?

8768.024 -> The process will be here

8770.587 -> Wherever "Click Me" is written then there I will say

8772.609 -> onClick =

8773.919 -> and then I will write here console...

8776.863 -> Or else I will do one thing I will write

8778.491 -> "Clicked', okay?

8780.611 -> I will say "The moment 'Click Me' is clicked, call the clicked function"

8784.787 -> "Just call the clicked function".

8786.849 -> And I will write here the function clicked() and after that

8793.896 -> "The button was clicked".

8798.483 -> I created a function and I said the button was clicked in the console.

8802.17 -> Here if I click and show you the console

8805.518 -> So "The button was clicked " is printed.

8806.985 -> No matter how many times I click, It will show me "The button was clicked".

8811.655 -> What does this mean?

8812.998 -> This means that your button was clicked.

8817.089 -> And I have listened to the clicked() event.

8822.53 -> So what does your onClick event do?

8825.389 -> It enables us to decide what should happen when we click on that button.

8829.105 -> Now we have more events along with onClick like

8832.673 -> onMouseHover, onMouseOut, onLoad.

8837.216 -> These types of events are there.

8838.582 -> So there's an event on the document

8841.482 -> document.onLoad.

8842.866 -> So onLoad event shows that

8845.213 -> When the page is loaded... I will show you here.

8850 -> document.onLoad

8852.872 -> And you all can write like this. document.onLoad = function().

8856.469 -> And you can write

8857.658 -> I am copying it here and I am writing here

8859.839 -> "The document was loaded"

8864.041 -> I will save it.

8865.215 -> I will reload it.

8868.342 -> So it didn't work. In fact, I have to attach it to window object.

8872.681 -> So I will write window.onLoad not document.onLoad.

8876.022 -> And here "The document was loaded" is printed.

8878.961 -> So once my document is loaded

8880.564 -> So I want to do some things

8881.884 -> I will say "If the document is loaded then do this".

8884.24 -> "Or do that".

8885.699 -> So if I want to do those things

8887.903 -> So I can use window.onLoad function.

8892.618 -> Suppose I want to attach an event listener to this paragraph

8896.422 -> Or else attach it to this div

8898.101 -> The first container that I created.

8900.639 -> So I can write it like this.

8902.325 -> So I have shown that you can

8905.666 -> firstConatiner. You can directly access this

8908.831 -> By its name, if the ID is created

8910.418 -> So I will write here addEventListener.

8914.021 -> Now this is a function

8915.583 -> First I will write

8917.165 -> event, and after that, I will write a function

8920.511 -> And I will write here

8922.696 -> console.log('Click Hua').

8928.537 -> I have attached a very simple event listener.

8930.582 -> Come in console, I have clicked and it is printing "Click Hua".

8933.798 -> "Click Hua" is printed again and again.

8935.93 -> "Click Hua", "Click Hua", "Click Hua", "Click Hua", the occurrence is increasing.

8939.46 -> So what did I do here?

8940.681 -> I have attached the event listener to it.

8942.841 -> I said "If someone clicks on this container"

8945.429 -> "So 'Click Hua' should be printed."

8949.258 -> Now If anyone clicks on this container then "Click Hua" will be printed.

8952.922 -> "Click Hua", "Click Hua", "Click Hua", "Click Hua"

8955.253 -> When I am clicking on the button

8956.689 -> Then button and container both are clicked.

8959.135 -> Both are printed. "Button was clicked", "Click Hua".

8963.141 -> I will write it formally.

8965.615 -> "Clicked on the container".

8967.118 -> Okay. So I have listened to an event on a container

8973.006 -> So if anyone clicks, then "Clicked on container" is printed.

8976.787 -> Now I can even attach more events

8979.052 -> Like I will show you

8980.247 -> We have one event

8982.598 -> That, if you bring your mouse

8985.404 -> If I show you

8987.382 -> If I write here

8989.054 -> onmouseover, okay?

8991.907 -> Now, what is this onmouseover?

8993.89 -> onmouseover means you bought your mouse under this, okay?

8997.834 -> I clicked her then"Clicked on container" is printed.

9000.684 -> But if I put my mouse over here then onmouseover event will be fired.

9006.642 -> So the event's name is mouseover

9008.862 -> I have to remove "on" here

9010.205 -> The name of the event is mouseover.

9011.998 -> So if I brought my mouse pointer here then notice

9014.012 -> "Clicked on container" is printed.

9015.628 -> Not "Clicked on", I will change it to "Mouse on container".

9019.559 -> Notice I brought my mouse here, "Mouse on container" is printed.

9021.882 -> The moment I place my pointer inside, "Mouse on container" is printed.

9024.908 -> onmouseover, Came out of container, Went into container.

9027.825 -> I came outside, "Mouse on container"

9030.519 -> Just notice here, the event is fired.

9032.431 -> No matter how many times I bring it in, mouseover event is fired.

9036.905 -> What does mouseover mean?

9038.817 -> Mouseover means the mouse came inside it.

9041.876 -> That's about it.

9043.649 -> Then there's a event called mouse out.

9045.807 -> That you took your mouse outside.

9048.355 -> Along with mouseover, there's also mouseout event.

9053.096 -> Mouseout event is for what? You took the mouse pointer outside.

9056.694 -> From where? Wherever you are listening for the event.

9061.49 -> So I wrote here mouse on container

9064.109 -> I will change it to mouse out of container.

9066.847 -> So here mouse went inside of container

9068.864 -> When I took it inside

9070.337 -> Then "Mouse on container"

9071.491 -> And when I took it outside then "Mouse out of container".

9073.48 -> In-out, in-out...

9075.394 -> On container, out of container.

9077.373 -> In-out, in-out, okay?

9078.725 -> You would have understood this

9082.224 -> I can guarantee it.

9085.097 -> Now we will see more events.

9088.512 -> Like I showed you mouseenter.

9091.589 -> mouseover and mouseout

9094.508 -> Along with that we have more events like

9097.812 -> Mouseclick event, in which if you click

9103.193 -> Now theres also mouseup event.

9105.5 -> That means you have left the click.

9109.721 -> So I will show you here

9112.069 -> Mouseup...

9115.504 -> "Clicked on container"

9119.073 -> So I will change it to mouseup, okay?

9122.288 -> And here I clicked

9124.457 -> and here "Mouse up when clicked on container" is printed.

9127.365 -> Here I clicked

9129.021 -> "Mouse up when clicked on container"

9131.72 -> Now like mouseup there's also mousedown

9134 -> That means you have clicked on the button

9135.806 -> And after holding then it will be mousedown.

9137.828 -> I will change from up to down.

9142.718 -> Now If I remove all the other events from firstContainer

9146.057 -> I am removing all the events.

9148.311 -> I will only keep these events for demonstration.

9150.9 -> Mouseup and mousedown, okay?

9153.577 -> So here I did mouseup

9155.554 -> Mousedown when clicked on container

9157.723 -> Mouseup when clicked on container.

9159.306 -> pressed-released, pressed-released, pressed-released,

9162.07 -> I hope you understood these things

9164.959 -> Like we have these mouse events

9167.841 -> similarly we have more events like

9169.856 -> we have an event for dragging

9172.119 -> You can explore that in JavaScript events and can learn how to handle it.

9177.081 -> But like here in Click Me

9180 -> I only did console.log()

9181.99 -> The moment I click on Click Me

9184.585 -> Similarly what I can do

9185.838 -> I will remove these events and will only keep Click Events.

9188.335 -> I can listen to this event

9192.497 -> I can change some text.

9194.076 -> Like I have container2

9196.048 -> I will write here document.querySelectorAll

9200.425 -> After that, I will write.

9202.055 -> The .container of that

9204.502 -> Give me the second element. The counting starts from 0.

9207.31 -> And change the innerHtml to bold

9213.148 -> "We have clicked"

9216.58 -> Okay?

9218.018 -> I have saved this.

9220.063 -> Reloaded it.

9221.626 -> I clicked on it. "We have clicked is printed".

9225.879 -> The moment I. clicked on the container, we have clicked is printed.

9228.673 -> So in this way

9230.601 -> I can change my HTML

9233.717 -> And the same thing that I have written here

9236.707 -> That the moment someone clicks then do this.

9240 -> If I remove this event and bring back these 2 events.

9244.232 -> Okay?

9245.525 -> And what I will do here? The moment mouseup happens

9248.482 -> Sorry, the moment mousedown happens then

9252.321 -> I should change the innerHtml to this

9254.41 -> And let me create a variable. let previousHtml =

9260.123 -> The old HTML will be in the previous HTML variable.

9265.262 -> So I have stored this in string.

9268.298 -> Now the moment mouseup happens The moment someone leaves the mouse

9270.588 -> I will say that the innerHtml should change to its previous HTML.

9275.863 -> Now what will happen due to this?

9277.327 -> I clicked, and "We have clicked" is printed.

9278.964 -> I released and "This is a paragraph" is printed.

9280.345 -> I clicked, and "We have clicked" is printed

9281.077 -> I released and "This is a paragraph" is printed.

9282.128 -> clicked-released, clicked-released, clicked-released....

9284.675 -> click-release, click-release, click-release, click-release.....

9287.486 -> So see here, "this is a paragraph" printed when I released

9290.896 -> So basically how it works

9292.337 -> The existing previous HTML I have stored it before only

9296.946 -> in prevHtml variable.

9297.988 -> So the moment you do mousedown

9299.548 -> The moment you click

9300.982 -> Then your innerHtml will be changed to this.

9304.022 -> And when you leave, the variable that you stored

9307.519 -> You can set an equivalent to that.

9309.047 -> That's why it is being restored automatically.

9310.764 -> After clicking this happens, after releasing this happens

9312.729 -> After clicking this happens, and after releasing this happens.

9314.584 -> So in this way you can listen for events in JavaScript.

9318.759 -> So this was about events in JavaScript.

9321.415 -> Now we will go to our next topic which is

9323.886 -> SetTimeout and SetInterval.

9327.243 -> So what I will do here

9330 -> SetTimeout and SetInterval

9333.682 -> SetInterval...

9337.041 -> I will write SetInterval like this.

9340.389 -> And I will show you what these functions do.

9343.96 -> So I will comment out these events so that

9349.027 -> Our console is clean

9350.4 -> The console is not yet clear yet

9351.917 -> I will remove all the console logs.

9354.79 -> I will remove these functions.

9356.089 -> I am keeping the code for your reference So that you can use it when you need it.

9360 -> But will you all use this code?

9363.585 -> I have written it in parts for you to understand.

9365.964 -> But still, if there are spelling mistakes....

9369.17 -> If you want to reference code then you can.

9371.969 -> And I have written more than 250 lines of code.

9377.5 -> Which is a great achievement.

9378.916 -> Now, what does the SetTimeout function do?

9381.049 -> Before showing SetTimeout, I will show you the arrow functions

9385.622 -> So I will show you the arrow functions.

9389.138 -> Understand arrow functions like... Something that we used to write like this

9392.971 -> function sum(), okay?

9397.368 -> We used to write return... Suppose it is returning 5.

9401.953 -> I can write the same thing as this

9404.423 -> sum =(a) =>

9409.435 -> Suppose it is returning a

9411.854 -> Or else we should write it in a better way... a,b.

9415.771 -> And it is returning a + b

9420 -> So It is returning a + b

9423.23 -> I have saved it.

9427.075 -> And firstly I will show you

9429.863 -> If I write here

9431.226 -> I will change its name to summ... I think I have used sum variable above

9434.846 -> If I am not wrong.

9436.619 -> I will write here sum(34, 35)... 39 is coming.

9441.446 -> But if I change it to this

9445.968 -> Then...

9447.872 -> Then I am getting the same result.

9450.552 -> So I can create function like this also

9452.628 -> sum as a variable is equal to this arrow function

9456.742 -> This syntax is known as arrow function.

9458.273 -> And this comes in handy when we want to add function somewhere in between.

9462.132 -> So we can apply a function in between like this.

9465.973 -> We don't have to write this lengthy function We don't have to write its name

9469.527 -> I can fit it directly like this.

9473.333 -> Now lets talk about setTimeout.

9475.458 -> What is setTimeout?

9476.971 -> The first argument of setTimeout is a function.

9480.838 -> Okay?

9481.761 -> What can be function?

9483.418 -> logKaro, okay?

9484.946 -> Suppose I have created a function named logKaro

9486.925 -> And the second argument is that after how many seconds or milliseconds

9491.793 -> You want to run it.

9493.143 -> Suppose...

9495.47 -> I want to run logKaro after 2000 milliseconds.

9498.065 -> And what is logKaro? I will create a function.

9500.995 -> I will use arrow function's syntax

9502.939 -> I will say logKaro =

9506.346 -> Console.log("I am your log")

9513.603 -> So here I will get the log after 2 seconds

9515.668 -> I will reload this and count to 2 seconds Then I will get my log.

9519.008 -> So what happens is it schedules things.

9522 -> Whatever you have written in logKaro function It will be executed when

9526.692 -> After 2 seconds i.e after 2000 milliseconds

9529.78 -> Like I have put it in event listener

9532.596 -> I did query selector is equal to this.

9536.294 -> I can even do this

9538.238 -> I have saved it.

9540.089 -> After 2 seconds we have clicked will be written.

9543.708 -> Here...

9545.17 -> I will change it to set the interval fired

9549.296 -> I will write it here

9554.123 -> Okay.

9554.76 -> Set interval fired.

9556.113 -> Just see here, Set interval fired is printed.

9558.215 -> After 2 seconds you want to do something, you can use set interval fired.

9562.417 -> Now here set interval, set timeout sorry.

9566.46 -> I am sorry.

9567.427 -> Set timeout can be used for scheduling.

9569.368 -> Set interval is used when you want to do something repeatedly

9572.961 -> If you want to do this repeatedly

9574.956 -> the logKaro function

9577.052 -> If you want to execute logKaro repeatedly

9578.945 -> So you can use set interval.

9581.766 -> Okay?

9583.091 -> What does set interval do?

9584.427 -> This "I am your log" is printed repeatedly.

9588.857 -> After every 2 seconds, it will be printed.

9591.39 -> And this is already set.

9594.362 -> After every 2 seconds, "Set interval Fired" is printed

9599.203 -> This will happen. If I change it here

9602.134 -> It is running after every 2 seconds.

9603.442 -> Suppose I write gibberish here

9605.471 -> and if I click enter here.

9607.362 -> But again

9608.022 -> It is running

9609.233 -> "Set interval fired", "I am your log".

9612.717 -> So what does it do? It is sticking to it.

9614.9 -> So after every 2 seconds, a function will run

9617.578 -> And it will run after every 2 seconds

9621.097 -> And what is it? It is my SetInterval, okay?

9625.174 -> Here if I write a = setInterval

9628.629 -> So what will happen... If I change it to clr = setInterval

9632.785 -> So clr will return an ID.

9636.253 -> That I can give it in the clear intervals.

9641.241 -> And after that, it will be silent.

9643.619 -> That means an ID that I can use to stop.

9647.146 -> And this will keep going on.

9649.82 -> When I started this... Listen to me carefully

9653.091 -> When I started setInterval.

9656.436 -> Then It returned an ID

9658.41 -> The set interval was running forever after every 2 seconds.

9663.95 -> But listen to me carefully.

9666.355 -> If I ever want to stop this.

9670.13 -> So use the clr

9674.477 -> That means whatever I am returning, then use it And give it to clear interval.

9677.741 -> Clear Interval will stop me

9679.589 -> Clear Interval will stop me

9681.273 -> Similarly

9683.101 -> If this logKaro

9686.204 -> I want to see logKaro after 5 seconds.

9690.893 -> So after 5 seconds, logKaro will be executed and this will change.

9694.681 -> So set interval fired is changed.

9698.07 -> But if I write here clr = this.

9701.15 -> And if I give timeout to clr.

9706.773 -> So this won't happen

9708.321 -> I will perform and show it to again

9709.699 -> I have reloaded this

9710.775 -> I have decided I don't want to run it after 4 seconds

9714.025 -> So I will give timeout to clr

9715.758 -> And the schedule won't be followed.

9720 -> This won't. happen as you've canceled it

9722 -> So to cancel the set timeout we use a clear timeout.

9725.48 -> "Use clear interval'

9728.982 -> "Clear timeout"

9733.444 -> "To cancel set interval and set timeout".

9740.612 -> To cancel it you have to use clear timeout

9745.214 -> You can use clear timeout.

9746.744 -> I will write one more things here What you will give in clear interval.

9750.191 -> Give that thing that it will return.

9751.948 -> Set timeout and set interval.

9754.124 -> It proves to be beneficial if you want to perform an event repeatedly.

9759.989 -> For Example.

9761.242 -> If you want to like new feed on Instagram and Facebook.

9767.06 -> So after doing right-click, do console here, put in in set interval.

9770.493 -> So It will keep on liking.

9775.082 -> Like if you want to accept all the requests

9778.861 -> Put it in clear interval

9780.012 -> That element... Put something such as

9782.755 -> document.querySelector or its button, or getElementByTagName.

9787.581 -> Button, clicked.

9789.653 -> Whatever querySelector is there, and it will work even on a button.

9793.433 -> [SILENCE]

9808.309 -> All right guys! We will see 2 more important things.

9812.289 -> And that is our localStorage.

9814.889 -> LocalStorage is one more important thing.

9817.471 -> What does localStorage do in JavaScript?

9819.843 -> Lets talk about that.

9821.109 -> So I will write here JavaScript

9825.479 -> localStorage, okay?

9827.867 -> Local storage helps you to save data in user's computer.

9834.962 -> As a string, okay?

9836.46 -> Now, what does this mean?

9838.084 -> I will write here; I will perform it here only

9841.419 -> I will start my live server. I had closed it.

9844.257 -> And here right-click inspect and after coming in console I will write

9849.149 -> localStorage.setItem

9852.384 -> and after doing localStorage.setItem

9855.807 -> I will pass name and harry, okay?

9860.32 -> I have set my item in localStorage.

9863.841 -> If I write localStorage here then it is showing

9867.108 -> In my localhost's domain

9870.456 -> I keep on creating many things So many things are already stored here

9875.066 -> They have stored many things from my old tutorial.

9878.708 -> But if you want to clear that then you can do it.

9882.274 -> Every domain has its own local storage.

9884.921 -> Like if I bring you to google.com

9888.35 -> And if I show you its localStorage

9891.545 -> Then you all see here

9893.815 -> They have created their own local storage for storing your data.

9898.594 -> And if I show you the JavaScript tutorial that I have created

9902.978 -> 127.0.0.1

9905.015 -> on 5500 port, it has its own localStorage.

9907.733 -> So If I setItem("name", "harry")

9911.622 -> So it has one key-value pair i.e name-harry.

9914.75 -> Now by using setItem I have set my item.

9917.05 -> As a string.

9918 -> I can even get this item.

9920.308 -> Like localStorage.setItem, there's also localStorage.getItem.

9926.436 -> So you can do localStorage.getItem('name')

9929.147 -> localStorage.getItem('name')

9935.161 -> And localStorage.getItem('name') is printing harry.

9938.84 -> I can add any number of key-value pairs.

9941.528 -> In local storage.

9943.353 -> But you ensure one thing that

9945.167 -> Do not store large amounts of data

9947.581 -> Store primitive data in local storage like

9950.424 -> name, favorite category of the user you should store.

9955.633 -> And kindly don't store sensitive data in localStorage.

9959.499 -> Because you can see localStorage here, I will show you

9963.975 -> If you want to see any website's local storage.

9966.931 -> So you should go to application or local storage

9970.131 -> I can see ('name', 'harry') here

9974.086 -> Actually, I have zoomed in too much

9976.246 -> So I can see ('name', 'harry') here

9978.54 -> But I will keep it zoomed so that you can see whatever I am writing

9982.311 -> So this was our localStorage. This was a very quick tutorial on localStorage.

9986.873 -> We will need it afterward.

9989.4 -> Now I want to talk about JSON.

9993.502 -> What is JSON?

9995.258 -> If I ask what is JSON?

9997.41 -> If I ask this simple question to the internet

9998.902 -> So JSON is JavaScript object notation.

10001.279 -> This is a open-standard file format.

10003.159 -> That is used to exchange data

10006.148 -> It is used to exchange data.

10009.067 -> Now what happens is you can convert JSON into string and transport it.

10013.875 -> And you can create it as a JavaScript Object.

10017.386 -> You might be asking "What is this?"

10021.458 -> Suppose I have a object.

10025 -> In fact. I will show you here

10026.643 -> And this localStorage I have shown you, This getItem and setItem.

10030 -> It is important to copy and paste it here.

10032.493 -> Because if I don't do it then you wont know it

10036.487 -> I will do it with control + x

10039.24 -> And I will comment it out.

10042.235 -> I will save it and will write here

10044.146 -> JSON, okay?

10046.413 -> Suppose I created an obejct

10048.288 -> And my object's name is obj

10050.884 -> If I write here

10052.665 -> JSON.stringify(obj)

10056.336 -> Then what will happen...

10059.025 -> My object will be converted into JSON string.

10061.848 -> If I do this then you might get to know better.

10066.101 -> So I will change it to JSO

10068.266 -> Now If I show you console then this is a string.

10071.196 -> And if you want to know the type of any variable

10074.165 -> Then you can use typeof

10076.165 -> So it is telling me its a string.

10078.268 -> If I do typeOf obj

10081.339 -> So that will print object.

10084.972 -> This was a very important point

10086.542 -> If I print typeof along with jso.

10091.313 -> So here string is printed

10092.879 -> Because it is a string not an object.

10096.462 -> Once you get this string

10098.87 -> Then how do you convert JSON into obejct?

10102.035 -> I will show this to you

10102.875 -> So If one thing is converted to string then you can transport it.

10108.19 -> Here we had a JavaScript obejct.

10111.007 -> It was not a string.

10112.182 -> But I converted it into a string

10114.976 -> Now, this object contained another object.

10117.237 -> Like it must've been like this

10120.336 -> And this was that

10122.939 -> This could've been one more object.

10124.933 -> And I will put a colon here.

10127.058 -> So my a is an object

10129.056 -> Which has the value of this as that.

10132.606 -> So here it has converted into a string.

10136.287 -> Now let's suppose

10137.439 -> That here it was something like this

10140.403 -> I have used single quotes and in between double quotes

10143.658 -> So this is a valid JavaScript object.

10145.724 -> But Just see here, because JSON only supports double quotes

10150.372 -> If I write here JSON single quotes

10155 -> So just remember "JSON standard requires double quotes"

10158.581 -> And it doesn't accept single quotes.

10160.388 -> So that's why what it did

10162.851 -> But JavaScript object supports single quotes.

10165.783 -> JavaScript object does not have any relation with JSON This is an object in JavaScript.

10169.545 -> And You are converting it to JSON string

10172.171 -> So you have to ensure whether it is a valid JSON.

10174.484 -> Valid means it will only have double quotes It won't contain single quotes.

10178.08 -> And if I put a double quotes in between

10181.368 -> Then what it has to do?

10183.752 -> It has to escape it.

10186.49 -> It should now seem like it is starting here and ending here

10189.65 -> If I do backslash like this

10192.82 -> And if I give a space

10195.042 -> So here it has done it like this

10197.916 -> But if I apply a backslash

10201.275 -> So just see here

10202.625 -> It has just applied like that.

10206.629 -> Now if I change this backslash to a double backslash

10212.944 -> So here it has given me a triple backslash

10215.722 -> Because it has backslashed backslash.

10220.242 -> So This was a tricky thing

10223.275 -> But you all understand that any JSON string

10226.376 -> If you want to convert any object into JSON or vice versa

10230.654 -> So you can use JSON.stringify, and one more function I will show you

10233.963 -> JSON.parse, okay?

10235.544 -> So I will write parse = JSON.parse()

10239.91 -> And what do we give in input?

10243.172 -> We give string in input in JSON.parse

10245.678 -> That is a valid JSON string.

10247.509 -> So I will copy this and give it to JSON.parse()

10251.478 -> And you can even write a string in backticks

10254.033 -> If I didn't show you before then this is the backtick

10256.278 -> And in most of the keyboards, they're below escape and above tab.

10259.982 -> Save this and after that, if you console log it

10264.157 -> So I will write console.log

10269.674 -> (parsed), then you all see here.

10272.728 -> I will even put a semicolon here.

10274.822 -> So I have written parsed = JSON.parsed()

10278.045 -> And all of these I have printed before

10279.44 -> And just see here, If I reload this

10282.007 -> So what happens? Is there some problem?

10284.285 -> It is saying "unexpected token t"

10288.256 -> So when JavaScript shows us a string then

10292.118 -> It shows a single backslash

10293.622 -> But if I want to handle double quotes then

10296.251 -> So I have to put a double backslash

10297.142 -> I will do one thing, I will remove this

10298.696 -> But I just want to show you

10299.951 -> What if I put here double backslash and colon

10303.586 -> So it should work like this.

10305.218 -> Here my object is printed

10307.757 -> But we are not handling complex cases

10310.171 -> So I will remove double quotes from here

10313.203 -> I will keep this as that

10314.355 -> And here there is no error

10315.939 -> And my object that contains one more object

10318.475 -> It is printed, okay?

10321.971 -> I want to show you one more thing.

10324.721 -> You can print JSON like this

10326.163 -> Local storage has one more function

10328.274 -> localStorage.removeItem()

10331.073 -> And if you do this then one item will be removed.

10334.2 -> And if you want to clear the whole local storage

10336.389 -> Then the function for that is localStorage.clear(), okay?

10341.577 -> So let us see that in action

10345.807 -> If I clear this and write it here

10348.93 -> localStorage, then it contains nothing.

10351.766 -> I have shown you setItem in localStorage

10354.685 -> Now I will print localStorage

10356.595 -> So Ir contains 'name' 'harry'.

10359.078 -> Here if I do removeItem('name')

10361.391 -> So there won't be anything in localStorage

10362.649 -> Because I have removed this

10363.859 -> And if I again set localStorage().

10366.653 -> And clear it

10368.712 -> So I can even run localStorage.clear(), okay?

10371.911 -> Like you all can see

10372.856 -> I can even run localStorage.clear(),

10376.321 -> So I can clear localStorage with that.

10379.125 -> So I hope this thing is clear.

10381.618 -> localStorage.clear()

10383.913 -> It clears all the localStorage.

10385.891 -> What is JSON?

10387.128 -> If you don't know what is JSON

10388.829 -> Then learn about it. It is useful for data transfer.

10391.96 -> Not only in JavaScript, but It is also useful in many other languages.

10396.423 -> Knowing about JSON is very important.

10399.098 -> Once you know all these things

10401.483 -> Then you will become a pro at JavaScript.

10404.749 -> So I will comment out everything here.

10406.766 -> And now lets talk about JavaScript versions.

10411.694 -> Now if I write on the Internet, ECMAScript

10414.601 -> Now you might be asking what am writing

10415.853 -> We are learning JavaScript

10417.802 -> If we search for ECMAScript versions and open Wikipedia

10421.628 -> So many people have written different articles.

10425.07 -> And here there's an article about developer.Mozilla

10428.371 -> And see here

10430.106 -> What is ECMAScript? Let's talk about it first.

10432.425 -> ECMAScript is JavaScript.

10433.83 -> Whenever you hear about ECMAScript

10435.773 -> Then that is only a scripting standard. But many people

10439.232 -> Use it to standardize JavaScript.

10442.049 -> If I say ECMAScript 2, 5, 9,6

10447.246 -> That means it is an addition

10449.929 -> So when JavaScript was developed in

10451.728 -> If I am not wrong then the year was 1996

10456.161 -> Maybe it was developed before I am not sure about the date.

10460.279 -> It was developed in 1997.

10463.951 -> The First edition was released

10465.68 -> Initially when it was created then people thought

10468.946 -> Let's create a standard version of this

10470.976 -> Because people keep adding features

10473.69 -> Some browsers support it and some don't.

10478.307 -> So there were some issues. People were stressed by it.

10483.588 -> So people said let's sit together

10487.884 -> And after sitting together what should we do

10490.689 -> Lets standardized things

10493.581 -> Because if we don't do this then people will keep working in parallel And that won't be good.

10498.298 -> They talked about a standard script.

10502.985 -> And according to that, they will create their browsers.

10506.626 -> People said it was a good idea.

10508.298 -> Now we move forward in time

10511.212 -> And people improved JavaScript more.

10513.476 -> People said this process can be better

10516.061 -> This work can be done like this...

10518.846 -> So what is ECMAScript?

10521.849 -> JavaScript updates are pushed

10524.981 -> And a standard is maintained.

10527.436 -> This 2 things you should know while learning JavaScript.

10533.546 -> Don't take too much tension

10535.126 -> It's not like that you understood some version and you won't understand other version

10541.083 -> People see it like movie versions

10545.331 -> That is wrong

10546.578 -> If you have learned python 3.6

10549.22 -> and after that 3.8 is released Then your knowledge won't be wasted

10552.146 -> But there might be changes that you won't even use.

10555.956 -> Now the 10th edition has been released. Ecmascript 2019

10559.054 -> And if you have learned ES6 properly

10560.605 -> And you know the basics of JavaScript properly

10562.602 -> That doesn't mean everything is not valid after learning ES6.

10567.934 -> If you have learned ES6 properly then ES2019 will be easy for you

10573.523 -> You can do it with ease.

10576.172 -> Because only a few things are added from time to time Not many.

10578.32 -> So there are many questions that are asked in Ecmascript

10582.67 -> Ecmascript...

10584.869 -> What is ECMAScript? Is it a version of JavaScript?

10587.758 -> So I will say that ECMAScript is a standard That is used to maintain JavaScript

10593.119 -> And you don't even have to remember that which feature was added in what update.

10598.155 -> If you only know Javascript then you can be a good web developer

10602.25 -> And you know that certain feature was introduced in 6 certain was introduced in 7

10607.456 -> ES5 started the modern JavaScript that brought new features like arrow functions.

10612.856 -> And we have seen backticks.

10615.362 -> I will tell you a specialty of backtick, okay?

10618.904 -> I will write here backtick and

10623.191 -> They are also called template literals

10629.952 -> And there are template literals in JavaScript And if I write here

10634.204 -> a is equal to 34.

10635.773 -> And if I write console.log()

10639.023 -> and in backtick, if I write `This is my dollar $`

10645.305 -> So this will be replaced by a variable in the string.

10647.615 -> So I don't have to write plus again and again in string

10649.727 -> So here this is my 34 is printed

10652.935 -> If I write here Template literals JS which version

10658.42 -> If I write that here

10659.603 -> So template literals came from which version that I am trying to show you

10664.941 -> So here somewhere is written from which version it is

10667.388 -> But it doesn't matter from which version it came.

10669.997 -> So ES2016 has different behavior

10672.37 -> ES2018 has something like this

10674.827 -> So here was the definition of template literals

10677.899 -> But don't focus on the versions

10681.575 -> Just understand that ECMAScript continuously develops new versions

10685.843 -> No one can stop them.

10687.387 -> So you have to master the JavaScript basics.

10692.433 -> And if the new features that are being added And if you think you need it

10695.356 -> And If you're on that level then you can refer to these pdfs.

10699.432 -> And what is added in this specification

10701.693 -> On this website, you can see it

10705.59 -> You can see what feature was added and when.

10708.397 -> I will tell you one thing honestly

10710.384 -> If you see this and you feel troubled Then don't be

10714.942 -> If you're on a high level then refer to these things They are very useful.

10718.709 -> So with that set what we will do

10721.763 -> We will talk about projects

10723.301 -> We will make some projects that

10725.258 -> Are very important.

10726.744 -> So the first project is

10729.894 -> A Clock, okay?

10732.039 -> A clock that you can see on the screen

10735.664 -> And it will move

10736.996 -> And we will have fun with this project. So let's start this project.

10740.022 -> All right guys! I will create a new file for our project And I will name it

10744.991 -> Project 1.

10746.406 -> project1.htm, because

10749.131 -> I can include CSS, and JS in HTML.

10752.337 -> Now without using a boilerplate template, I will go to bootstrap's website.

10756.897 -> A dif you don't know then I will go to getbootstrap.com

10759.623 -> This is an Html css framework

10761.366 -> That you can copy-paste and create pages.

10765.592 -> Now they have shown many things on homepage and

10769.354 -> It has many things like official themes. But what I will do here

10775.116 -> I will pick a starter template.

10779.306 -> And this...

10780.734 -> I will open it in a live server like this, okay?

10783.635 -> So I have opened it on the live server

10785.662 -> And here hello world is printed.

10789.253 -> Very fast without wasting time

10791.929 -> What I will do? I will copy a navbar here

10794.904 -> Because with Navbar the website will look good.

10797.095 -> So I will copy a navbar

10800 -> I have clicked on a navbar.

10802.126 -> So I will create a div with a class of container.

10805.267 -> And what will happen with div.container? A div will be created and I can put content inside it.

10811.145 -> So I have create the website here

10813.977 -> Now I will create a clock

10815.913 -> It means a clock, that shows time

10819.984 -> What I will do here? I will find a template for my clock

10825.352 -> I will go in alerts. No, not in alerts

10828.401 -> I want to find a thing that will help me to display properly.

10832.612 -> I think I can display it in jumbotron

10835.176 -> I will copy jumbotron

10838.153 -> And I will paste it.

10840.504 -> So my website looks like this. To give some spacing above

10845.237 -> I will give a margin. I will write my-4 here And I will save it.

10849.913 -> Y-axis will have a margin of 4.

10851.804 -> And I will write here.

10855.143 -> I will write here current time is

10861.397 -> After the current time, I will write span with the ID of time.

10865.993 -> Span with the ID of time, okay?

10868.376 -> And here if I write current time is like this

10871.748 -> And here I will do one thing Browse...

10878.154 -> Browse times, okay?

10881.535 -> And here "We are here to show you the times of different countries", okay?

10892.875 -> "We have got you covered".

10896.742 -> This is all you can write. Why am I wasting my time on this?

10899.975 -> I want to have time after the current time is

10904.262 -> And how do we take time in JavaScript?

10907.514 -> I have shown you.

10908.783 -> If I do a = new date()

10912.488 -> And if I do a.getHours()

10916.177 -> So I will get hours here, okay?

10920.031 -> So I will write here JavaScript because this is a JavaScript tutorial.

10925.485 -> I will apply a script tag here.

10927.587 -> and I will write here a = new Tab().

10931.98 -> a = new date().

10935 -> a = new Date()

10938.841 -> And by this, I will get a new date

10940.95 -> And I will say the time

10943.506 -> is a.hours() + a.getMinutes()

10951.825 -> Okay?

10952.499 -> And I want to convert them to strings. I don't want to add them ad numbers.

10957.608 -> So I will do one thing. I will apply a string here and concatenate it. I will show you here

10963.202 -> So see 15 and I want to apply a colon.

10967.756 -> With that, I will get the time.

10970.463 -> And after that, I will add it and apply a colon again

10974.897 -> And after that, I will write getSeconds().

10980 -> getSeconds()...

10982.578 -> Sorry a.getSeconds()

10984.794 -> Okay?

10986.113 -> And here it is showing my time.

10989.698 -> So here are hours, minutes, and seconds.

10994.49 -> So I will do one more thing here

10997.512 -> That... This was my time, okay?

11000.53 -> And I will also do a.getDate() here.

11004.628 -> So I will do a.getDate and then a.getTime

11007.476 -> I will copy this hour here.

11010.123 -> And...

11011.81 -> I will write here

11014.103 -> Let time = which is a string

11017.126 -> It will become this, okay?

11018.455 -> So I have created a time string here.

11020.591 -> So what will do now? I have created a time string here

11023.98 -> I want to get the date also.

11027.054 -> So if I do a.getDate() here

11030.353 -> Or...

11032.769 -> If I search on the internet JavaScript getDate and Day.

11038.243 -> Like this so I should get something

11040.664 -> getDay is here, I can see all the methods here

11044.99 -> I want to find the method to display date properly

11051.813 -> So here...

11054.035 -> I am looking all the date methods like getTime,

11057.881 -> getDate, getFullYear, getMilliseconds

11061.207 -> Most of the methods are plugged

11063.529 -> But what I want is

11066.287 -> I will see what is a ISO string.

11067.819 -> date.toISOstring()

11069.463 -> So the toIsoString() displays it like this.

11073.572 -> So toIsoString() I can't see here, So what will I do?

11077.639 -> getToTimeString(), getToUtcString() is available.

11080.633 -> So I will see these methods.

11081.867 -> I will see what is toLocalDateString()

11085.922 -> toLocalDateString() gives you a date like this.

11088.43 -> So I will use toLocalDateString(), okay?

11091.747 -> So I will ask them to give me toLocalDateString()

11095.923 -> I will say here that... Where is my....

11100.847 -> I have opened too many tabs. I will close them.

11103.763 -> I will write here a.toLocalDateString()

11110.165 -> And here toLocaleDateString() has given me a date.

11113.222 -> So here is what I will do? I will use toLocaleDateString()

11116.15 -> I will write let date = a.toLocaleDateString() And I will copy it.

11126.582 -> And I will paste it here.

11130.403 -> I will say here what should it do

11134.756 -> That...

11136.153 -> This span that I have

11138.392 -> document.getElementById()

11141.274 -> And here I have created a span with the ID of time

11144.559 -> The innerHtml of that change to date + time

11150.606 -> Okay? date + time

11151.92 -> So if I show you "Current time is"

11155.262 -> Here I am facing some difficulty

11158.348 -> Now if I run this then it will run. My DOM wasn't ready when I wrote this script.

11163.529 -> So if I do this then see here "Current time is"

11166.66 -> The current time should be this

11169.391 -> And I will write it like this time + " on " + date

11173.244 -> time + " on " + date

11179.119 -> And If I do it like this now

11180.616 -> If I do this then see here

11184.194 -> So It is showing the Current time is this on this.

11187.226 -> If I want this date to be updated then

11190.554 -> If I do it like this then

11191.803 -> And I have to update the date again and again

11194.289 -> If I pack this whole thing and do it like this

11197.057 -> I put it in a setInterval

11198.57 -> In setInterval

11200.751 -> apply an arrow function

11202.058 -> If you chose this setInterval then in this

11205 -> A whole snippet will come

11207.497 -> I will shift this line below

11210.259 -> And I will change the interval to

11213.632 -> 1000 milliseconds

11214.993 -> That means I am updating it every second.

11217.247 -> Okay?

11218.308 -> And I will do let a like this

11221.454 -> let a, let date, and let time.

11226.783 -> And I will just keep on updating these values.

11230.757 -> And I won't use let

11232.176 -> Because it will run again and again.

11233.716 -> in every millisecond.

11237.6 -> So I do this now.

11239.511 -> So my time is updating now

11241.929 -> So my click is created and working.

11245.294 -> I have got a date too.

11246.488 -> So if I search toLocaleDateString() and show it to you.

11252.681 -> So they have given some options

11255.707 -> You all can use these options

11257.637 -> And if you do this then you will get the output.

11261.352 -> So...

11262.298 -> What I will do here? I want to copy this

11265.776 -> I will reload this. I think their JavaScript is encountering some problem.

11269.952 -> Or they are not giving JavaScript documentation

11273.807 -> How will it work? It is showing an error.

11275.315 -> No worries.

11276.57 -> I will say here I am not able to copy.

11281.27 -> I want to copy this actually.

11282.814 -> How should I copy it?

11286 -> It is weird.

11288.533 -> I have to type it weekdaylong, yearNumeric, monthLong

11292.259 -> dayNumeric, I have to type it.

11294.48 -> And after that, I can get toLocaleDateString()

11297.64 -> I will pick it up from another website.

11299.059 -> I don't think this website is working.

11302.214 -> I am looking for options and examples.

11307.562 -> If I can find it then that's good.

11309.254 -> So if I can find some good examples of options.

11313.654 -> That I cannot find here

11315.298 -> So what I will do here I will try to reload it

11318.843 -> Now it's reloaded.

11320.081 -> This page is loaded now I can copy it.

11322.074 -> I have copied it

11323.949 -> And what I will do here

11325.375 -> I will do undefined and options.

11327.836 -> So what does toLocaleDateString do? It gives language-sensitive representation.

11332.121 -> So what I will do here The options that I have written

11335.905 -> And created

11337.534 -> In fact, I will do it like this. I will do one thing

11339.987 -> These constant options I will shift outside.

11342.667 -> And when you are taking the localeDateString Then what you should do?

11348.779 -> (undefined, options)

11350.988 -> I will write it like this and see what happens with my site

11353.393 -> See Current time is this

11355.48 -> And after that on this.

11356.647 -> So before this on if I apply br

11359.461 -> If I apply a br

11361.969 -> like this.

11363.359 -> Br tag will throw this into new line.

11365.776 -> So see here On Saturday, May 16, 2020

11370.225 -> So here I have created a website that shows the time

11373.948 -> Now you can make this website more beautiful.

11376.738 -> And you can show it like.

11379.387 -> That our navbar

11382.758 -> First, make that beautiful.

11384.828 -> Make it beautiful.

11387.391 -> You can write "Get all the country's time on this site"

11391.036 -> and if you click on browse time then I'll | show you what you can do

11395.768 -> You can use dropdowns.

11397.698 -> What will happen if you click on it

11400.254 -> Sorry not dropdowns

11402.398 -> It is called collapse.

11404.175 -> The moment you click then you should get all the country's time

11408.794 -> So you can do this thing. I hope you liked this project.

11412.182 -> We completed our first project and this was our clock.

11416.791 -> Now here are the seconds I am taking

11418.863 -> They are in single digit

11420.511 -> It doesn't look that fun

11422.131 -> You can convert it into double-digit

11424.718 -> This much work you can do on your own But now

11427.002 -> I think this is enough.

11428.828 -> We have done many things in this

11430.788 -> I want you all to make this project better

11432.798 -> And comment below what enhancements you did in this.

11435.821 -> The use of setInterval

11438.994 -> That is helping us to create an hour

11441.962 -> With the help of JavaScript.

11443.749 -> So I hope you all liked this project.

11446.82 -> So our next project is a to-do list.

11450.647 -> So what I will do in my to-do list?

11452.663 -> I will create a new file for you all.

11454.883 -> I will name it project2.HTML.

11459.3 -> I have written htm instead of HTML.

11464.434 -> And here I will do the same thing I will use bootstrap.

11467.516 -> In fact, I will close these useless tabs.

11472.806 -> And I will bring bootstrap here through documentation.

11477.186 -> The starter template is in the documentation not in examples.

11483.589 -> Its there.

11485.862 -> There's no problem with that.

11487.134 -> I will change its title.

11490.005 -> And I will name the title TODO list.

11494.691 -> So what is a to-do list let's talk about it first?

11497.686 -> So What i will do? The navigation bar, I will

11502.179 -> I will copy that from here I will collapse from here.

11505.032 -> I will copy it from project 1 and paste it here.

11508.027 -> in the body, okay?

11509.084 -> I have saved it and will right-click here

11512.648 -> And open it with a live server.

11515.572 -> And I have opened it with a live server.

11517.885 -> This Navbar, I will

11520.763 -> change it to todos list

11523.057 -> And here I will also put an s TODOS List.

11525.897 -> To do. The things you want to do that list.

11529.567 -> So here

11531.054 -> YOu can write Home, about, contact. These are all the things you can write.

11535.122 -> If you want to learn bootstrap then that tutorial I have also uploaded.

11539.317 -> So here I will write contact.

11542.482 -> The website is looking good now.

11544.197 -> And here I will write items.

11548.941 -> So what it signifies? This website

11551.69 -> Is not a template

11553.562 -> So the website should not look like a template. This was my point.

11556.417 -> I will show you how you can create TODOS list.

11560.6 -> My Navbar, I will right-click and go to the format document.

11565.504 -> And here I will collapse the Navbar. So collapse is very important.

11568.737 -> Because then you're focused on those elements on which you want to work.

11572.688 -> Like I want to create div.container here and

11575.867 -> h2.text-center.

11578.375 -> text-center is a class of bootstrap.

11580.605 -> That shifts things in the center

11583.348 -> I will write here todos list.

11587.015 -> Here todos list is written and I will write my-4 here.

11592.191 -> And after doing my-4

11594.974 -> I will create a form here.

11596.383 -> And I will write whatever todod list are there

11600.43 -> What we will do with those

11602.158 -> We will list them here.

11606.153 -> So after coming in components

11608.758 -> What we will do? We will go into the forms section.

11612.598 -> And after going in forms I will copy this.

11617.416 -> I have copied this.

11620.175 -> And this form I have copied

11623.881 -> And what I will do in this form? I won't submit it on any server.

11628.917 -> I will say here what is the title

11631.412 -> I will ask for the title of the item

11633.928 -> I will do type = text

11636.83 -> And once I have asked for the title

11640.07 -> Then what I will do?

11641.958 -> I will add these titles to the TODOS list.

11646.213 -> I will change the title to the description.

11652.679 -> And I will use text-aria

11655 -> What will happen with text-aria? I can write a lengthy description.

11659.966 -> So I will save this.

11661.753 -> And I will show you here. That my to-dos list looks like this now.

11666.03 -> I don't want this check me out here so I will remove this.

11670.71 -> I will remove this div and save this.

11674.083 -> And I will write here add to list.

11678.938 -> Okay?

11679.79 -> So I have written here to add to the list.

11682.817 -> So with the help of this form, I can add todos to the list

11687.3 -> And here I will write Add an item

11693.606 -> To the list.

11695.593 -> So here Add an item is coming here

11699.059 -> Title and description.

11700.886 -> I like it when my description is a text area

11706.144 -> So I will search for the text area here.

11707.969 -> And I will copy this example

11710.421 -> From div to div.

11714.131 -> And I will paste it here.

11717.782 -> And wherever its ID is written I will change it to the description.

11722.819 -> Because I want to keep and ID as a description.

11727.518 -> Format documents will give me good formatting.

11729.451 -> Now just notice here

11732.768 -> My description box as a text area is created here.

11737.067 -> I want to remove example text area and keep description.

11740.924 -> You don't want your website to look like a template.

11745.78 -> So I have written a description here

11747.677 -> And this website is now looking good.

11749.97 -> But it still doesn't work.

11751.984 -> So What I will do here

11754.42 -> I will create a list of items here.

11757.058 -> So I will write here your

11758.666 -> I will write here h2

11760.706 -> I have used h2 above here also.

11762.717 -> So I will not write h2.text-center, just h2.

11767.901 -> And will write your items.

11770.935 -> And now your items are coming here.

11772.383 -> But after the button, I have to apply... In fact, after the form, I have to apply a div tag.

11777.085 -> And I will give it the ID of the items.

11780.955 -> Under that, I have put "Your items".

11783.58 -> And I will do my-4 here

11786.697 -> So in class, I will do my-4, This is in my main container only.

11791.491 -> So here your items are written.

11795.09 -> So I have written here your items here so I want in tabular form

11798.56 -> I want to see my items

11802.14 -> So here tables were written in the content.

11804.679 -> If I click on tables.

11806.651 -> and after clicking on it I will copy it.

11811.512 -> And I will paste the table here.

11814.017 -> In this table, the headers

11817.222 -> This is an HTML table by the way. If you all didn't know already.

11820.318 -> I will keep only one item in the body.

11823.091 -> And I will write here the serial number, and item title.

11829.916 -> After that Item description.

11833.032 -> So I have written the item title, and item description and I will remove this.

11838.642 -> After that what I will do is

11840.72 -> My serial number is 1. Here

11844.218 -> "Get some coffee"

11850 -> "You need coffee as you are a coder."

11855.33 -> And I will remove this

11857.259 -> If I show you all my items are looking like this.

11861.35 -> "Get Some Coffee", "You need coffee as you're a coder".

11864.367 -> I want to keep on adding my items here.

11870.411 -> I will create one more th whose name I will keep actions,

11876.401 -> And here I just want to write 1 action which will be delete.

11880.342 -> And what it will do?

11882.429 -> It will be a button. btn btn-primary

11887.122 -> And under that, I will keep delete.

11890.008 -> So here I have written delete.

11892.613 -> So if someone wants to delete then he/she can delete.

11896.316 -> If you apply btn-sm class then it will become small.

11900.771 -> And all of those things are coming from bootstrap.

11903.712 -> So you can safely skip this if you don't know bootstrap.

11907.426 -> Or else you want to write your own JavaScript.

11910.95 -> I get many questions in my tutorials

11913.808 -> that I should turn this navbar black.

11916.944 -> So I will show you how to turn this navbar black.

11920.026 -> This navbar-black change this into dark

11922.596 -> And change bg-light into bg-dark.

11925.548 -> By doing this your navbar will become dark.

11928.36 -> Now I want if someone clicks on this "Add to list"

11932.109 -> Then what should happen?

11933.635 -> I will put an event listener on that.

11936.217 -> So my add to list button

11938.515 -> So I will give ID = add

11942.451 -> And I will say "Apply an event listener to add".

11947.117 -> And here I will apply a script tag.

11949.823 -> And here I will write document.getElementById("add").

11956.053 -> And here I will write add.addEventListener

11960.967 -> And I will apply click. And I will write an arrow function.

11966.728 -> If you all just see here

11968.407 -> If someone click on it then I want it in my local storage.

11972.663 -> My Items should be added.

11976.03 -> So I will inspect here

11978.179 -> And for now, here I will write console.log("updating").

11983.562 -> Sorry, my spelling was wrong.

11986.97 -> I will write updating list like this.

11989.245 -> So if I click here

11991.012 -> So here I will get the user message

11993.696 -> If I am clicking the then it is being refreshed.

11996.515 -> I will remove the form from here.

11997.801 -> I will remove the form tag because I don't want the form to be submitted anywhere.

12003.184 -> If I click here now then updating the list is being printed.

12007.755 -> That is a very good thing.

12010.048 -> Now I want that my title and description

12013.505 -> I have given the id as the title and description.

12015.728 -> I want to add them to local storage.

12018.154 -> If I write here localStorage

12021.392 -> So it doesn't have anything

12022.967 -> and localStorage.getItem()

12026.175 -> And pass 'ItemsJson'

12028.805 -> So I am not getting anything.

12031.196 -> So I will write here.

12033.057 -> So I will write here If localStorage.itemJson

12040.054 -> That is my....

12041.671 -> And in fact I will write it with getItem()

12044.422 -> I will write like this I will copy it.

12046.98 -> So I will say If I haven't saved anything named itemJson

12052.931 -> Then what should happen

12054.696 -> Then I..

12056.122 -> Should create a new ietmJson.

12058.664 -> I will write here

12060.022 -> itemJsonArray =

12064.141 -> And what I will write here

12065.386 -> Whatever the ID of my item

12069.079 -> And I will add an item along with that

12072.336 -> In fact, I should create an array That would be good.

12076.028 -> I will create a new array here

12078.293 -> And I will write itemJsonArray.push()

12082.991 -> And what we will push

12084.843 -> We will push the item title.

12088.669 -> So I will write her tit and desc.

12092.135 -> No. you might be thinking what is tit and desc?

12095.618 -> So I will write here tit is document.getElementById()

12102.532 -> And I will pass title.

12105.517 -> And its value.

12109.532 -> And my desc

12113.554 -> That is my description value.

12116.487 -> You all can see I have written a description here

12120.308 -> The ID was a description that's why I have written a description.

12126.754 -> And I will save it.

12128.263 -> And whenever I will click on this button then what will happen

12130.946 -> The value of the title and description will be pushed in itemJsonArray.

12136.972 -> And I will write here localStorage.getItem

12140.464 -> And after that, I will write itemsJson.

12144.302 -> I will set it and will write it here

12147.747 -> JSON.stringify(ItemJsonArray)

12153.806 -> So In my local storage, it will be saved as an array.

12156.67 -> I will show you this thing.

12158.805 -> If I refresh this

12160.236 -> getItem is null now.

12161.988 -> If I write here "a" and "this is a" and add that to list.

12166.778 -> So if now I do localStorage.getItem('itemsJson')

12170.502 -> So it is showing null again now.

12172.147 -> Which is a problem. I have to see what is the problem here.

12176.771 -> So if I only write here local storage

12179.123 -> Its length is 0.

12180.918 -> That means I have not saved ItemsJson in localStorage.

12185.625 -> So my ItemsJson is not saved now

12188.748 -> I will copy the login in my if statement.

12195.961 -> And I will paste it here for better debugging.

12198.901 -> If I cut the updating list here

12201.675 -> And if I take it in if

12203.854 -> So I will get to know whether my if is working or not.

12208.43 -> So my if is not being called.

12210.32 -> This is the problem.

12211.187 -> So I will write here if this is == null

12213.988 -> because by default it is null,

12215.884 -> So I will write here if this is == null

12220.323 -> And I think it should work now.

12223.233 -> So I will write here a and here b.

12227.771 -> And after clicking here if I go to localStorage.getItem()

12232.061 -> So I have got my item.

12234.418 -> So my mistake was I had written it directly. I should have written == null.

12239.019 -> So the first time I was updating my array

12243.682 -> So I did not get my array.

12245.049 -> I had written an if condition.

12246.277 -> That if there is no item named itemJson in local storage

12249.689 -> Then create it.

12251.925 -> Create it means setItem.

12253.81 -> But if isn't null then what should be done? We have to decide it.

12258.528 -> If it is not null then itemsJson should be

12262.534 -> equal to localStorage.getItem

12266.394 -> localStorage.getItem('ItemsJson')

12270.495 -> And definitely when I do getItem.

12272.208 -> Then it will be my string

12273.177 -> So I have to do JSON.parse().

12275.739 -> So I will create this an str first

12277.863 -> And after that parsing this is very important.

12281.83 -> So JSON.parse('ItemArrayStr')

12288.117 -> So after being parsed it will be returned.

12291.848 -> So in this itemArray I will do the same thing That I did before.

12294.771 -> I will push in this itemArray

12297.286 -> Title and description.

12300 -> And here I will do setItem again

12304.295 -> Like this... I will save this again.

12308.219 -> So whenever I try to fetch ItemJsonArray

12312.889 -> So I want to be fetched perfectly when it has many items.

12317.52 -> I have refreshed this.

12319.151 -> I will do getItem. a and b is there.

12321.697 -> I will also add c and d.

12325.411 -> Here c and d is also added.

12328.194 -> I will also add c1 and d1.

12330.326 -> And c1 and d1 have also been pushed.

12333.954 -> If I clear my localStorage.

12337.916 -> Then what will happen?

12339.912 -> Nothing will happen. It is null.

12341.891 -> If I add something then my item is added.

12344.343 -> If I again add things then items are added.

12349.181 -> That means I have successfully added the title and description.

12354.643 -> So Item and description, these 2 things

12357.915 -> That means items' title and descriptions I have added to my array.

12361.556 -> We also have to display it here.

12363.538 -> How will we do it?

12365.84 -> Then what I will do here

12367.276 -> I will say... Once you get ItemJsonArray

12374.055 -> Then what you should do ItemJsonArray

12375.707 -> I will write here "Populate the table".

12379.086 -> I have to populate the table

12382.874 -> Okay?

12383.758 -> So how will we populate the table?

12386.181 -> Here is my HTML table... Where is it?

12389.083 -> I will give it an ID of the table.

12391.523 -> In fact, I will give id to the table body, id =

12398.727 -> tableBody

12399.647 -> Because only one table is present in this.

12402.409 -> I will perform document.getElementById().

12405.373 -> tableBody = document.getElementById('tableBody')

12409.763 -> And I will pass tableBody

12412.787 -> Now what will I do here

12414.145 -> I will apply a foreach loop to my itemJsonArray

12419.638 -> And after applying foreach loop, what you should do

12424.079 -> Create one str.

12427.116 -> The str would be initially blank.

12430.197 -> So I will create a str. I will say let str = ""

12436.291 -> So I have created a blank string here

12439.307 -> And what I will add in this blank string

12442.07 -> First of all, I will write backticks

12444.093 -> And after backticks, I will keep on adding this HTML

12447.205 -> Because I want to add it for evert item.

12450.25 -> So it is tr.

12453.543 -> I will copy this. And the moment I copy this

12456.668 -> I have... Copies it like this.

12462.86 -> And you all see here

12464.393 -> I will give my serial number here.

12467.434 -> So If you write element, index.

12474.384 -> So your element and index both will be given.

12481.521 -> So element and index both will be passed.

12484.387 -> I will say here to show the index.

12486.943 -> And after dollar, I have to open it like this Then only I can show it.

12492.86 -> And I want a title here So I will write here

12498.82 -> $(dollar)

12502.622 -> And I will write element[0]

12507.673 -> And After that, I will write here $

12512.748 -> That means description.

12515.264 -> And here I have written delete

12519.085 -> I have saved it.

12520.67 -> And what I will do here

12522.65 -> The moment my string is developed. That means I for each will be completed

12527.795 -> What I will do here? I will say that

12530.36 -> document... sorry I have to do it outside foreach.

12535.527 -> I will say change the innerHtml of tableBody to

12541.412 -> str, okay?

12544.198 -> So I write here this is a test title and wrote df

12547.973 -> I did add to the list then some error is coming

12551.203 -> It is saying docu is not defined. Maybe I have made a mistake.

12556.72 -> I have to write here document.

12560.44 -> And I will write a and b then add to list then just see here

12564.75 -> All of the items are added in localStorage.

12567.892 -> I don't want it to start counting from 0

12570.941 -> Because if I start counting from 0

12573.742 -> Then what will happen?

12575.014 -> My user will be confused.

12576.171 -> He/she will say "Do Harry does not know Hindi?"

12580.391 -> "That he is starting from 0"

12581.365 -> "We are programmers we start from 0", no worries.

12586.372 -> I will do index + 1

12589.75 -> That means if I write here a and b

12592.242 -> So the moment I update I will get all of my items.

12596.965 -> So you all can see here that

12600 -> In this way, we

12602.606 -> All the items here are layed out.

12605.927 -> Now here is a problem.

12606.998 -> Whenever a new user joins my website So my function that is updating

12612.246 -> It should be called once

12613.374 -> And that will list all the items

12616.629 -> And It isn't working now

12618.542 -> It is working only when my event listener is running.

12622.618 -> So What I will do This thing that is working

12624.76 -> I will put this in a function

12626.867 -> And I will name this function update

12629.82 -> I will control + x this and will create an update function here

12633.368 -> And I will write

12636.822 -> function update

12639.466 -> I am not using es here

12643.023 -> And I will change this arrow function to update.

12647.354 -> So I will say the moment someone clicks on the update

12649.525 -> Then please call to update

12653.175 -> I want to call to update once again

12655.7 -> The moment my script is initialized

12659.011 -> So I will say call update once again

12661.464 -> So update will be called by default and I will get all the items

12666.206 -> Now if I add to the list by doing ad ad then ad is appearing here

12669.8 -> If I do add then add is coming.

12672.991 -> So I am adding all of these items in this way.

12675.473 -> And the counting is also starting from once.

12678.146 -> Now if you all want to delete

12679.629 -> So you can apply an onClick method on delete.

12684.167 -> And the onClick method

12685.935 -> You can apply it like this.

12687.497 -> You can say

12688.286 -> That onClick is equal to

12690.377 -> so I will write here onClick =

12695.022 -> You can write like this onClick =

12699.073 -> delete(4). And lets create a function

12705 -> delete and here item

12707.929 -> console.log("Delete", item), okay?

12714.367 -> If I reload it here then its saying unexpected token delete

12719.03 -> I will see here what's the problem

12721.294 -> delete. delete function(), delete.

12725.742 -> Okay delete is a keyword so I will change it to deleted.

12730.206 -> Okay. So I will save it

12732.12 -> We cannot use delete because it is a reserved keyword.

12735.744 -> If I click on delete here then the user message delete is written here.

12740.984 -> So here if I delete then delete 4 is written. delete4, delete4, delete 4...

12746.282 -> So here I had written delete 4 then delete 4 is printed, okay?

12750.115 -> I will change this delete 4 to delete serial number Or delete index.

12757.822 -> Okay?

12759.445 -> And I have to put it in dollar

12765 -> So what will my delete do is

12766.868 -> It will fetch the element first.

12769.518 -> Who? It will fetch the itemJsonArray.

12772.31 -> So it will be fetched like this.

12774.914 -> It will be converted

12778.02 -> into an array.

12779.118 -> I have fetched my itemJsonArray.

12781.695 -> I have fetched string and array both.

12784.349 -> Now I will delete it from this array

12789.487 -> Whatever is my item's index. I will change its name to item index.

12795 -> Whatever is the item index I will delete it.

12798.547 -> And after deleting the item index

12801.34 -> What I will do here? I will save it again.

12803.406 -> And I will call update

12805.067 -> So the space that I am leaving here What I will do with it

12808.18 -> Here delete item index element

12817.975 -> from the array. And after that, I am again saving the array.

12821.717 -> And I will call an update too.

12824.04 -> That means if I delete this then my item should be deleted.

12828.497 -> That was good. This is done now.

12830.473 -> Now how should I delete a given index from an array?

12834.446 -> So I have an array method called splice.

12837.738 -> So I will write itemJsonArray.splice.

12842.483 -> So it will remove an element on a given index.

12848.214 -> So what is my index?

12849.382 -> My delete index is the item index and

12852.275 -> Along with that what I will do?

12854.554 -> I will delete one element.

12856.251 -> So I am deleting only one element from here

12858.918 -> Lets hope that it works.

12862.387 -> If I delete it from her then it is deleted.

12867.249 -> If I delete everything

12870.44 -> So all of these will be... How they are 17 here?

12875.706 -> Uhh okay... So the problem here is

12879.114 -> If I do localStorage.getItem

12882.281 -> localStorage.getItem

12887.496 -> and itemsJson

12896.494 -> So what is happening is that splice isn't deleting it It is just emptying it

12900.866 -> So this is not a good thing.

12903.155 -> Why is it emptying it?

12904.848 -> When I want to delete it

12907.487 -> Okay so the problem is

12910.983 -> When I am clicking on this button Then what is it doing?

12914.104 -> Along with removing it

12916.957 -> It is also adding an element.

12918.634 -> Adding with title and description.

12920.85 -> That is a wrong thing. So what do I have to do

12923.491 -> This function that I have written, update

12925.194 -> From that, I have to remove this.

12926.5 -> With title and description, my itemJsonArray

12932.636 -> I am updating it, okay?

12934.291 -> So I am thinking about how to do it, to be honest.

12936.866 -> Now I will do one thing

12939.249 -> I will create a function named gettingAndUpdate

12941.662 -> And I will create one update

12945 -> The update function will only update and populate data

12949.581 -> And what will gettingAndUpdate do?

12952.818 -> My getAndUpdate will

12955.249 -> This...

12957.129 -> My...

12960 -> It will take the content of the title and description box

12963.838 -> And then finally it will call the update function

12966.71 -> I think this should work.

12968.16 -> I have to name this getAndUpdate.

12970.196 -> getAndUpdate.

12971.753 -> I will see what the scene is now.

12974.105 -> If I reload this then get some coffee...

12977.199 -> So there's one error saying itemJsonArray not defined.

12981.219 -> So...

12982.395 -> When I am updating and itemJsonArray is not defined.

12987.314 -> So it is saying itemJsonArray is not defined.

12989.501 -> I have to put an if here

12991.063 -> If itemJsonArray is null then what should be done

12995.89 -> So here I will copy it

12998.094 -> If itemJsonArray is null.

13000.281 -> Then what you should do that

13002.83 -> You should not push

13004.375 -> You should just do

13006.884 -> Make it null and then setItem.

13008.663 -> And if this isn't the case

13010.828 -> Then it should do nothing.

13012.38 -> So a simple if statement should work.

13015.557 -> This error is occurring again itemJsonArray is not defined.

13019.007 -> Which line it is coming from?

13020.02 -> This is coming here when I am trying to populate it.

13022.983 -> So when I am updating it

13025.385 -> when I am running the update function then it is saying that

13028.585 -> itemJsonArray is not defined, okay?

13032.392 -> So I am just seeing that

13033.848 -> After clicking getAndUpdate will run.

13036.09 -> The update will run like this.

13037.888 -> So update is giving the same problem.

13039.807 -> Then what I will do here is

13041.913 -> I will also write an else statement.

13043.488 -> I will say if this happens then I will apply an else statement.

13048.417 -> I will say if itemJson is not null

13053.668 -> Then what you should do?

13055.421 -> Then you should create JSON.parse(itemJsonArray)

13058.068 -> Now I want my app to run.

13060.129 -> I hope my app will work now.

13061.987 -> I will write here "This is the test title", "This is my description".

13070.547 -> And if I add to list and write some gibberish

13074.51 -> And then I am deleting this df here

13076.917 -> And wow what an amazing todo list app.

13079.749 -> We have created it.

13081.105 -> Out todo list app has been developed.

13084.357 -> I enjoyed it, okay?

13085.94 -> I will add one more button named clear list.

13089.453 -> I will create a clear list button.

13091.09 -> And this button will have a simple agenda.

13094.089 -> What will happen? It will just clear list.

13096.063 -> So my todo list button here What I will do with it?

13099.676 -> I will give ID as clearList and make a button named clear list.

13103.603 -> Okay?

13104.638 -> And clear list.

13107.376 -> I will write here onlClick =

13113.073 -> clear, okay?

13114.851 -> I will say onClick = localStorage.clear()

13122.965 -> And If I reload and clear here then it's not happening

13126.484 -> I can't create it like this.

13130.493 -> I have to make a clear function

13133.044 -> Then what I will do here

13134.291 -> I will write onClick = clear.

13136.367 -> Because I have given a clear function.

13138.451 -> If someone clicks on this then a clear function will run.

13141.678 -> Okay good. Let's make a clear function first.

13144.762 -> function clear() and what it will do

13148.284 -> it will simple do localStorage.clear()

13152.223 -> localStorage.clear()

13153.605 -> And along with that console.log()

13160.185 -> Clearing the storage

13162.904 -> And after that it will update too.

13166.32 -> It will update too.

13167.434 -> Okay?

13168.556 -> So if I show you here I will close this.

13172.54 -> If I do a clear list then it is cleared.

13174.158 -> And here add to list, clear list.

13177.671 -> And why it is not clearing?

13181.264 -> Updating list. The clear list is not working for some reason.

13185.623 -> Clear function is not working. I have even give onClick here

13188.709 -> So I have to see why my buttons onClick isn't working.

13193.653 -> So I think the way I have written the id = this

13198.854 -> onClick = clear

13201.268 -> So function, clear, void.

13203.407 -> So If I write like this then also nothing is happening.

13207.196 -> That means there's some matter.

13210.065 -> I will remove type = submit. I don't want it.

13214.483 -> So clear is a reserved keyword in JavaScript.

13217.246 -> I will change it to clearStr.

13220.368 -> No for clear storage. clearStor.

13222.879 -> Or I will write it whole

13225.415 -> So sometimes these types of problems occur.

13229.425 -> I will copy clear storage and here you all see.

13234.003 -> I have written here a clear storage function.

13235.737 -> If I click on this now.

13237.399 -> So it isn't working because I have to write it like this.

13240.584 -> The moment I click on clear

13242.94 -> So here clearing the storage is written.

13245.133 -> And the storage is being cleared.

13246.504 -> If I add here something and then clear the storage

13249.856 -> So it is gone.

13250.877 -> So this clear storage button is very dangerous.

13253.511 -> Because it will clear the whole list.

13257.909 -> You can apply a warning like this.

13261.054 -> You can use confirm in JavaScript. It will take confirmation from user

13265.34 -> It will ask "Do you really want to clear?"

13268.39 -> You can take confirmation from the user.

13270.46 -> Do you really want to clear? Like I will show you.

13273.4 -> I will write here if confirm and after that

13277.677 -> Do you really want to clear?

13282.49 -> Okay. So after taking this confirmation

13286.245 -> I will clear it, okay?

13289.247 -> And I have written it and saved it

13292.577 -> Do you really want to clear? Okay.

13294.621 -> I have written yes here. If I click on okay then it will be cleared.

13298.823 -> If I do add to list

13300.737 -> And after that I cancel then it won't be cleared.

13302.912 -> So a warning is very important.

13306.036 -> All right guys phew! we have completed this JavaScript app.

13311.058 -> Okay?

13311.942 -> And you can also delete individual elements.

13315.843 -> So what do you feel? Let me know in the comments.

13319.057 -> I want everyone to comment below their views about the project.

13322.401 -> Whether you have created a variant or not let me know.

13325.226 -> And whatever the new feature you are adding I want you to

13329.364 -> Add a search bar here

13332.593 -> If written anything then it should be searched.

13334.924 -> It should be searched on the fly. As the user is typing.

13338.982 -> You can listen for an event on the input

13341.698 -> Whenever its content changes then what it should do

13344.721 -> So here it should update the list. That means it should call the update function.

13347.919 -> So in this way, a particular array that is matching

13352.146 -> You can update from that.

13353.383 -> So there are many things you can do like designing

13356.443 -> You can write HTML, CSS, JavaScript by yourself.

13358.885 -> I hope that you all liked this video.

13363.501 -> And you all will definitely like this video.

13365.868 -> So please like this and let me know your thoughts on this video.

13370.253 -> So as a part of the next step, you can create your own JavaScript projects.

13374.72 -> You can make your website interactive.

13378.41 -> I will give you the source code.

13381.884 -> I will give the link in the description and zip file to download.

13385.249 -> Or I will upload the whole source code on my site.

13387.694 -> Then you can easily access this code. And most importantly

13391.889 -> These 302 lines of code you will be able to access it

13396.267 -> I have enjoyed this video and I hope you enjoyed it too.

13399.934 -> And don't forget to like this video

13402.508 -> And if you want to learn complete web development Then I have a course for it.

13405.926 -> I have taught complete JavaScript.

13408.082 -> It has more than 1.1 million views.

13410.614 -> And you all see here, people are taking advantage of it

13414.706 -> I like it when people love

13418.145 -> my courses and people have given me personal feedback

13421.727 -> It has helped in people's jobs. Many things had happened.

13424.696 -> I want you all should take advantage of this

13426.342 -> Each person who is learning through this makes me happy. You should take advantage of this course.

13432.416 -> So guys! That's it for this video

13434.478 -> Thank you so much guys for watching this video.

13436.817 -> And I will see you next time.

13439.4 -> [OUTRO MUSIC]

Source: https://www.youtube.com/watch?v=hKB-YGF14SY