JavaScript Tutorial: Interaction - Alert, Prompt, Confirm | Web Development Tutorials #54
JavaScript Tutorial: Interaction - Alert, Prompt, Confirm | Web Development Tutorials #54
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
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.134 -> Guys in today's video we'll see that how to make a page interactive
4.372 -> that means how user can interact with our page and we'll do this using alert, prompt and confirm
11.946 -> and this will be a very important topic in your javascript
15.483 -> if you haven't accessed wed development playlist, so quickly access it because here i'm uploading all the videos
22.323 -> now i'll come here, i'll create a file named"tut54.js'
30.264 -> so "tut54.html" will be file, so i'll embed my JS in it, so i'll write here
39.206 -> "Interaction using alert confirm and prompt"
46.147 -> here we'll cover this topic very quickly, and here i'll put script tag so i can write my javascript in it
52.019 -> and here put a simple "div.container" and write "This is a page" in it
58.359 -> saved it, i'll click on Golive and my page will open
63.33 -> now i have to inspect the element and now see here whatever i'll write come here okay
69.27 -> so in javascript what i'll do first, i'll tell you about alert
74.408 -> and here i'll zoom it, and by doing this i'll tell you about alert
81.782 -> "Alert in in-browser Javascript" okay
87.688 -> and here i'll simply use alert and i'll tell you what is alert
93.194 -> alert is a function, in which you put a message string which pop-up on your page okay
99.567 -> so if i write here "alert" and then write "("This is a message")
107.174 -> and if i save it here, so see this "This is a message" came
111.145 -> i did okay, again i'll reload so see "This is a message" came, so if you want that your website should say something to the user
119.72 -> you can do this thing, by writing "This is a message" like this you can do this and you can see the alert
127.561 -> this was our alert, which takes string as an argument and as you give it a string, what it does is
134.235 -> it opens a window, which we also call modal window
138.672 -> modal means until this closes you can do nothing with this page, bootstrap is a framework in which modal is there
146.313 -> if you heard of this so i'll tell you what this means, that's why i'm telling you
151.919 -> that modal means, first deal with it and then see other things
157.291 -> clicked on okay and see "This is a page" came, so this was alert, very simple function
163.464 -> but alert doesn't return anything, this we have to keep in mind, i'll write here
171.305 -> "- Does not return anything" okay
175.109 -> because it can't return, you have to do okay, whatever you do
179.38 -> clicking here, you cannot do anything, you have to do okay, okay
183.918 -> so here if if i write "let a = alert" and after that "console.log(a)"
193.294 -> so see here, did okay so it is returning undefined okay
197.331 -> so here i wanted to tell you that it's return value is undefined that means it doesn't return anything
204.038 -> now sometimes happens that you want to ask user something and you have to give user a prompt
210.377 -> and when you want to give user a prompt, ask anything to user, then what you'll do
216.283 -> so i'll tell you, you can write like this, "let", and i'll comment it out because it is crying, my browser is saying that
223.223 -> what did you do?, so i'll write here "let" and assume i want to ask here any user there name, okay
230.164 -> assume we are making a gaming website in which we ask there name whenever the come at website to play game and join the server
237.071 -> so i'm asking "let name =" then i'll use prompt to ask, "What is your name", okay
245.379 -> i said "what is your name?", and after this, i'll give a default argument here okay, so see here
254.989 -> first argument is message, any message you want to display and second you give is default argument
259.994 -> which will be already there, so i'll show you here, like this
265.532 -> and whatever your prompt came, see here prompt came what is your name, assume i write "harry" okay
272.206 -> so what will happen as soon as i click okay, whatever i typed will come to this name variable
279.48 -> so what can i do here, "console.log(name)", something like this
285.986 -> so as i do this, see here assume i write "harry", so see here my harry came
291.792 -> that means i stored in my variable whatever user gave input
297.164 -> so like this we can use this prompt, give alert to user when you have to only tell the user that this happened
305.806 -> and then only click okay, they won't have any option, like you call tell that your subscription you purchased is going to expire, please pay the money
317.818 -> user will okay and say thanks for the reminder
321.889 -> so i'll comment this out here, and we'll see Confirm
327.694 -> but before watching this confirm, i want to tell you one more thing, if i don't give this, if i don't give this
335.636 -> still what will happen, i'll reload this again, still it'll be blank here
340.941 -> if i write "dev" here, so "dev" came here
344.211 -> and if i write here nothing, so what will be my default, nothing it'll be blank and
349.683 -> i'm using google chrome browser here, sometimes in internet explorer you have to always supply default
357.191 -> so it is nice that you can supply a default
362.729 -> so that all browser supports your app, so assume i write "Thakur" here, so see here "Thakur" came
373.54 -> so like this we can use this, i'll again make guest here
378.579 -> guest is a nice option, if you want users to come to the website and do some input, so here you can write guest
386.92 -> this was our Prompt, alert we have seen, now we'll see confirm
392.359 -> and confirm is used when your deleting a file or your doing something in which you have to give warning to the user
401.568 -> See your going to do this, okay or cancel?
404.805 -> so for double checking we use confirm, like it tells the name
409.543 -> so i'll write here "let deletePost = Confirm("") and it's first argument is message
422.789 -> "Do you really want to delete this post", okay
429.997 -> and after "do you want to delete this post" what i'll do
435.769 -> i'll save it here, i asked the question, i'll put here ; and ? also
441.975 -> so it looks good, and after doing this what i'll do, "console.log(deletePost)
449.983 -> and see what happens here
452.92 -> so i'll cancel this and reload again, it is saying do you really want to delete this post?, if i do okay so it will return true
460.894 -> but i cancelled, so it will return false, so if i double check with the user, so what will happen
468.068 -> my output will come based on it, now assume i write "if(deletePost){ console.log("Your post has been deleted successfully")", okay
491.692 -> i'll write here, "else{ ", i'm telling you here "your post has not been deleted", okay
502.202 -> so i'll do like this so i can double check, and i'll comment it out from here
507.507 -> and keep this up, sometimes you want to use it for debugging, what is coming here print it and see it
516.55 -> so quickly i'll cancel it and reload it, so it is saying "do you really want to delete this post?", if i do okay
521.855 -> this code got executed which was in my if, so ideally your code will be here
530.63 -> code to delete the post, and after that what will be here, "Code to cancel deletion of the post"
544.978 -> that means if your post is getting deleted, so it will not get deleted because you cancelled it, so i'll again quickly reload it
551.351 -> and see here, "do you really want to delete this post?", i did okay, your post has been deleted successfully
556.189 -> and if cancelled, your post has not been deleted, so if you want to double check once
562.295 -> say to the user if they want to do it or not, so you can use this three
568.301 -> First we saw alert, then we saw what? Prompt, "Prompt in JS", i'll write
579.613 -> and after that we saw Confirm
583.75 -> i'll write here "Confirm in JS"
590.09 -> i wrote here, "deletePost = confirm("Do you really want to delete this post?");", and here
596.897 -> Reloaded it, click okay, your post has been deleted successfully, okay
601.368 -> so i hope you understand this, i want to give a quick quiz, i want everyone to give answer in comment
607.808 -> and the quick quiz i want to give you is, so have to create a simple window and ask user there age
617.35 -> sorry you don't have to make a window, you have to use any of these 3, i won't tell you what to use
622.255 -> you have to ask user there age, and if he is less than 18 then you won't allow him, but if user is more that 18
628.862 -> then you'll print "You are allowed inside the club", you have to create a post like this
634.601 -> make a page and i want you to comment below, and i want everyone should do it and i'll know how many are watching complete video and how many are connected to the course properly
644.311 -> so i want everyone to write Challenge accepted in the comment section now
648.482 -> if you connected to my channel so you'll know we do this a lot in our courses and according to me
654.821 -> this gives interaction and chance for a practice, so quickly you write "Challenge Accepted" in the comment section
661.795 -> and whenever you get time you solve it, and put the solution also, now i'll wait for your solution
668.068 -> So guys if you haven't accessed this web development playlist, so kindly access it
673.64 -> click here to bookmark, click here to save, and if you haven't liked the video, so do like it
680.48 -> Thank you soo much guys for watching this video
and I will see you next time [ ♬ ]
685.485 -> [ ♬ ]
Source: https://www.youtube.com/watch?v=pdqXYAe1kKA