JavaScript Crash Course

hi guys after so many requests so here it is Javascript begin okay happy learning welcome to JavaScript crash course Ty okay let's begin JavaScript is the world's most popular programming l JavaScript okay and also the JavaScript JavaScript is easy to learn okay pring language is totally different Java is totally different okay Java is used to create interactive and dynamic web pages page functionality okay first let's start variables data types operat first Vari variable cre cons C cons cons online JavaScript comper Java comper online JavaScript compiler fsas F okay 10 where equ Al to 20 cons statement okay so variable next concept okay let AAL to cons let a equal to 20 console. log is not defined is noted okay loal glob global cons okay course Cor assment to constant variable const okay let week days okay where is a keyword function scope or Global scope so access okay okay so let's begin create a variable named price and set it to a specific price value second create a variable name called Product and set it to a product name specif okay where product equal to Apple okay iPhone iPhone 15 create a variable named tax and set it to a specific tax value tax variable the name of the product console. log calculate the total price amount including tax total equal to price plus tax and then print it total am where total equal to price plus tax and the to iPhone 15 tax iPhone total equal to price plus tax total ta iPhone okay iPhone iPhone is not defined okay iPhone 15 is not a is not defined a equal to 10ed iPhone iPhone 15 equal to where iPhone 15 equal to a equal to Apple console.log a not equal is not iPhone 15 is not def Okay so okay so understand the difference between name and name with JavaScript when a value string is enclosed in double quotation like name it is treated as string when something is mentioned without dou okay declare a variable name called fruit name where fruit name equal to Apple okay declare a variable named count where count equal to the question count declare a variable name price and set it to the price of the FR deare Vari name to and by MP the count by the price okay okay declare a variable name price and set to the price of the fruit declare a variable name total and calculate it by multiplying the count by the price where total equal to okay in the star symb 1 into 100 equal to 100 10 into 100 correct console.log tot count into Vari 100 10 into 100 total okay already JavaScript let JavaScript keywords function for ifal 20 console do log if okay okay javascripts single L commments mul L commments JavaScript commands can be used to explain JavaScript code and to make it more readable if for fruit equal to okay sing singar okay so this is commments in JavaScript okay JavaScript operators here where AAL to 10 where B = to 20 C = to a + b console.log information number okay cons okay equal to plusus Star division operators so simple increment and decrement operat equal to 10 A++ console of course AAL a increment po pre increment listen carefully where b equal to a ++ console. log B a equal to 10 a box 10 A++ a A++ A+ A++ 11 AAL 10 so explain a [Music] l plus plus a so first Plus okay premental 10 plus plus in the pre okay console.log Ty Str two major section primtive datp nonprimitive datp non second AAL okay false okay type of true type off type type off okay you'll get to know about it better major topic JavaScript functions JavaScript functions JavaScript function is a block of code designed to perform a particular task F function VIs first enironment okay just JavaScript programming fold open folder okay AAL 10 where Bal to 20 30 console DOT log a + space file namejs l so let's start with functions function function ABC so I have a phone the expain cons function is working fun function function my name okay my name function Sam console.log this is Samsung phone Samsung phone this isone function Oppo console.log this is Oppo the function Apple console.log this is apple add the function red me console. log this is redmi super this is Samsung this is RM Samsung this is and and then function so let's do it AAL 10 where Bal 20 console. log a plus b create a variable called Factor favorite actor favorite player favorite movie favorite player favorite movie and okay so okay so where favorite actor equal to Comm where favorite player equal to doni where favorite favorite actor favorite player favorite movie equal to unbe cons let's see favor favorite okay okay cons log favorite player favorite player the log favorite movie favorite movie okay okay first function favorite super right okay okay let's move on to the next topic the functions parameters that Define when declaring a function function add a b console.log A+ B not a number so what exactly Happening Here 10 + 20am okay okay so yeah so I'll do it first function area function cre l l l console do log area is l+ B okay where area equal to Quick confusion where a equal to l star B area is a where length equal to 10 where breadth equal to 20 area 10 comma 20 listen carefully Bal 20 b a equal to l into B now 20 into 10 a equal to 200 200 okay okay so function function function my name okay a equal to my name console log where AAL my okay in the function in the function so AAL to my name name AAL to so again just create a function called add which should take two parameter A and B and it should return the addition of two variables okay cre function add a comma B return a plus b okay a where total equal to console do log total total equal to add a = 10 Bal 20 total equal to add 10 comma total equal you will understand it okay so statements stat else else otherwise if else umbrella if console. log it's true okay console. log P it's false it's false and the statement false in the in the so question first question is it raining outside r equal if rain console.log taken umbrella enjoy the if rain equal if take okay sucess so yeah we'll move on to the next topic okay cons false false false and true false so and statement false first false and true false false and false false and true console.log false R in the PIP false false true so sh and FSE statement false okay okay cons exb logical and logical or logical not okay what is the color of the traffic okay okay where color equal to red if color if color equal to equal to Red console.log stop stop equal equal equal okay GRE okay if color equal to equal to Yellow console.log get ready if color equal to equal to Green console.log go Okay so so second spring summer autumn winter okay okay okay so okay what is the score SC in a game okay third question I'm going to do it okay thir what is the score in a game if score is less than 50 print you need to improve need to okay score equal to 5050 if score less than 50 console.log you need to improve 40 less than 50 stat the statement 70 okay super cool if score is between 50 and 70 here if score is between 50 and 7 if score if score greater than 50 and score less than 70 good job okay so again in the statement score less than 50 score greater than score 70 70 greater than 50 true are true this score less than 70 70 less than 70 true statement 70 greater than 50 it true and score 70 less than 70 true or false 70 correct Okay so score less 50 less than 50 correct 50 less than 50 correct score less than 50 or score equal to equal to 50 score less than score less than false score equal 5050 true okay you can understand it okay score less than or equal to 50 score greater than 50 and less than oral job super good job state if the okay if the score is greater than 70 print excellent performance if score greater than 70 console.log excellent performance super fantastic guys if I run this program now excellent performance okay you need to okay else for false okay so next question fourth question and fifth question okay so yeah if in JavaScript a for Loop is a control flow statement used to repeatedly execute block or code on specific condition generally syntax blah blah blah blah okay so and console.log node demo okay so 1 three 9 10 okay okay I should bring each and every Apple from this side to this side task okay okay start okay okay first thect 1 2 3 4 okay less than or equal to five correct true next next start plus one certain false okay okay countet already one second one thiret thir one okay for count okay correct 1 2 3 4 5 condition count equal to count Plus step one step one count equal to 1 count less than or equal 5 1 less than or equal true count equal to count plus one step two step two count equal to 2 count less than or equal to 5 2 less than or equal to 5 count or okay 1 2 3 okay okay so again okay okay next so okay print all the numbers from 1 to 10 using a for Loop 1 2 3 4 count count 2 3 4 okay okay so instead count equal to count okay okay so next number reverse number count less than or equal to 10 count equal to count figure out print only the even number from 1 to 10 two tables in the 1 2 1 2 3 4 5 6 into 2al Now 1 into 2 into 2 = into 2 = into 2 = Okay so Javas basic programming Bas okay so next session let's start first Dom stands for document object model body Hut docent object struct docent object first body title H1 paragraph t so tree of objects okay the manipulation do the paragraph tag hello create okay okay the okay select paragraph tagra okay so parag select paragraph tag using ID okay document do get element by ID document do get element by id id one in the get element by ID doc okay clear okay document dot get element by ID okay okay so let's see Okay so console log okay hell text cont g e capital b capital I capital okay okay okay text cont in the paragraph correct in the the paragraph text contenttext equal to by T par. text content paragraph tag Dot text content and then cons okay okay get element okay yeah okay hello so H1 hello world ID equal to H1 where H1 equal to document dot get element by ID H1 H1 do text content H1 do text content equal to BU World selecting htal okay so question super okay change and then H1 do text content equal to BU world in the L function change h. text content equal to by outut button click on function on hello super right yeah so on change on click on Mouse on okay okay so here here are some example okay number one number number one okay number one equal 67 okay okay so okay okay so selecting input box one selecting input Box 2 where box one equal to document Dot get element by ID number one where Box 2 equal to document dot get element by ID number two selecting result set ID equal to result where result equal to document dot get El by ID result okay okay [Music] cons log uh just box text input box value equal to 34 okay default value equal boex okay instead input boxue second value equal to 67 console. log box dot value box two do value box two dot value 3467 37 okay where box one value equal to box one dot text condu where box two value equal to box two dot text content okay in the input box one value equal to box one. cont so okay cons log box one Value Plus box two value 11 where a equal to a p where b equal to l C = A+ B a number value 12 + 1 number okay 4 7 okay so okay super right okay result do text content equal to total okay okay function result in the the in the button function okay again refr not function is not a function so result function function name result function okay okay result. text content in the total insert okay already again for first L where box on value equal to number of box do value box okay okay yeah so next JavaScript random number create okay how to create a random number in JavaScript okay so concept okay a equal to Mac dot random console.log 0.7 01655 0.73 so this Mac random random 0.0 2.5 9 1 7 3 6 okay Mac FL mag do floor 0.9 now 6.7 where b equal to back. floor console. log B9 random number 2.9 ma do floor random number outp random number output one procedure okay gu the number project SC okay guess the number from 1 to 10 okay so let's begin first okay so guess the number okay and then button check okay so first so yeah your wrong or right right okay so yeah let's begin number so let's do it equal uh check number ID equal to okay guest number guest number ID equal to guest number okay selecting input box where guess number equal to document dot get element by ID guess number result where result equal to document dot get element by ID result okay number result gu number okay number random number equal to Mac dot floor Mac dot random start 10 plus one if random number equal to equal to guest number equal to where entered number entered number equal to guest number dot value equal to equal to entered number expain console.log WR else console. L wrong okay enter the number equal to guest number value the guest number in the input box number ENT number on click equal to cons right number result do text content equal to right result do text content equal to wrong aler you want in the probably okay where score equal to ini score equal score minus one okay score equal score minus one where score equal to document dot get element by ID score score dot text content equal to score colon plus score put okay score score minus score okay like again again that is a problem again it causes problem total score total score equal to total score total okay so six score up the 10 up the one okay wrong two my score is three so okay okay so background color black with the 100 pixel height to 100 pixel okay scpt F openid equal uh box button change so select box where box equal to document dot get element by ID box the Box dot so the function on click the style okay box do style Dot colorr back and thenal okay background color okay for example Max 900 okay clal box do set attribute with Max Okay so with the maxb okay super so 2 second slow Okay so okay so see you in next session byebye okay so first question task so okay H okay so it's okay first button and then copy ID equal to input box H1 tag ID equal to result select input tag select H1 tag where input box equal to document dot get element by ID input put box where result equal to document dot get element by ID click equal to update update function update first value enter function ony up super first task complete next question number two how can you use JavaScript to accomplish the following task okay so again stud in the 1tm first hello hello H first okay select H1 bar H1 equal to docent get element by ID H1 on click equal to update function create function update text content equal to hello hm. text cont so what is the problem cannot set properties of null okay H1 get ID okay okay it's my mistake upend hello h hello for okay output hello [Music] hello H1 element create create new element H tag H1 equal to document dot create element list ital create element H1 okay list item list item dot text content equal to hello Lem first element lemal docent create element h third question change third question button change color function function update BTN do style dot background color equal to Red question number four how can I make it so that when a user clicks a button the text from that button is shown in the hon tag located above it okay idal John and then Jack okay John jacken scpt where H1 equal to document dot get element by ID result and function update function update but H text contal okay update function on click equal to update okay first B okay so okay is trusted ALT key bubbles cancel bubble c x c y [Music] in the event object browser jaas t even. target. text content refresh cons H1 text content equal to even. target. text content refresh John pin kthi super okay [Music] cool h11 H1 2 H1 3 H1 4 H1 5 H1 6 1 2 3 4 [Music] 5 Del Del okay ID H1 equal document dot get element by ID one function function delete it H1 do remlick 1 2 3 4 5 6 2 3 4 5 6 okay first in even target. remove refresh one cck Del cck Del four cck Del 5 2 6 super fantas okay starting with in HTML too HTML to. HTML okay okay so first in HTML idal so where div equal to document do get element by ID 1 okay and then console. cons okay good text okay text content so in HTML okay. inner HTML equal okay HML equal to H1 okay but text okay again HTML okay HTML okay html text content so insert HTML element okay okay different ways of Sting Elemental cons doy docy C CL H1 1 H1 2 C document okay okay H1 class equal to okay H1 class equal to okay H1 class equal to okay query selector all use dat okay so TOs where going here where fruit equal to app fruital toal so console.log Gra okay orange grape comma banana Apple orange grape banana okay super so grap two 0 1 2 3 okay so console. log fruit fruit of zero fruit of one fruit of two fruit of three count equal to Z count less than or equal to 5 count equal to count plus 1 2 1 2 3 4 okay so again in case Loop Lo 0 1 2 Step step step 3 4 5 fruit count fruit of zero fruit of one fruit of 2 of again console fruit of count count equal to Z count less than or equal to 3 0 1 2 3 1 2 fruit of count fruit of four 1 2 0 1 2 3 three Now console. log fruit dot length fruit dot L fruit do four 0 1 2 3 okay Lal L equal less than First Step Second Step third step okay okay one second position two third position okay El second 1 2 okay count count equal to Z count less than div dot length count equal to count + 1 cons div off Count 2 text content content Super 1 2 okay okay okay super so get Elements by class name get elag okay okay so insert okay element one something joh where div equal to document dot query selector okay dot up hello D do upend hello hell first okay still insert adjacent element okay insert adjacent element first before begin H1 element after insert adjacent element first after begin after end before begin before end okay okay okay so element insert adj element before begin hello okay error yeah error insert adjacent element element so where H1 equal to document dot create element H H and the insert adj element before begin the after end after after begin before end insert ad element okay super I hope you guys are ready okay so let's begin add hello delete outut copy PA paste box first function okay first JavaScript script function add ID equal to list content container selecting UL where UL equal to document dot get element by ID list container where list item equal to document dot create element any element text contal cor UL do up list item okay soal to super and then list item where input equal to document dot get element by ID input input in the input tag select okay okay function delete item delete Del on click equal to delete item delete object okay Target DOT first the button REM REM even do Target Dot parent element remove okay slash button delete the delete button cck the delete button on click me on click equal to Okay so s delete item so yeah okay hi guys we are leveling up game so maybe something and the way you think so it will get add can also delete it so yeah let's start this session okay okay okay index HTML okay so let's begin first okay so just straight the class equal to popup box in pop cancel first do overlay the overlay background color black okay 100 100% 100% left 0 pixel top 0 pixel complete scen 0 opacity 0.8 popt popup box index one index 2 so okay still it didn't [Music] come actually it's there background color and color black okay see 40 40% and then padding or 20 pixel okay and then R border radius then pixel okay 30 okay yeah I think that's enough so box display prop first the popup overlay in the popup box popup overlay and popup Bo where popup overlay equal documentery selector do overlay bar popup box equal to document dot get element by ID dot popup box okay function show show button click equal to pop box style dot display equal to block function did something cannot read style okay get element by okay dot style dot display equal to block pop function close popup displ okay Cal to close popup so Okay [Music] [Music] so function aler message function alert hello okay but okay let's see alert is not okay function okay so [Music] okay document do id id equal to BTN document dot get element by ID button do add listener Len f Al button dot add even listener add even listener function alert Mouse over but okay okay okay okay let's begin so now okay so stud open so already okay I'm closing this okay books key okay so in the books ke index. HTML style CSS f scpt style okay not style so link okay scpt SRC equal. go gole FS and then style CS okay first margin and padding also I'm setting to zero and then body open body family okay set cre okay and then equal na in the I'm creating h t book # fd65 69 okay and then padding 10 pixel first first class equal to container okay container cre the container class equal to Booky container okay first initially let me add and then name delete button button delete important dot container dot container in the container first padding padding let it be 10 pixel okay looks good DOT book iPhone container in the book container first let me add text Center okay not Center of course not Center okay and then with 25% so that background color can be black border radius or 10 pixel so super color and and next margin 30 pixel and then okay margin over 30 pixel super next and the book Cod H1 do book container H1 tag book container H1 okay it's not H1 it's H2 actually okay book container space button in the button background color the Buton padding top 5 pixel and then padding bottom or 5el and then padding left or 10 pixel padding right or 10 pixel so super it looks good but n okay so that okay looks good and then margin top margin top 10 pixel okay okay okay uh next thing is in okay so next okay I'm adding that button button class equal to add iph button equal to add popup button but okay [Music] again add I button background color set color it's going to be black border radius 100% CC and then uh padding top one or 20 pix set padding bottom or 20 pixel set and then padding left or 30 pixel and then padding right or 30 pixel and then font size increase 40el bottom 30 pixel and then right 30 pixel okay okay super and class equal to First and the popup overlay first and the pop po popup overlay okay in the pop up overlay first background color black opacity 0.8 and and then position absolute withd 100% it height again 100% top zero left zero so super and the black Z index so do class equal to or popup box and create okay so in the popup box first add book The placeholder equal to book title ID set okay book title input text place book author ID book author input okay in the input tag placeholder okay text area short description book description input okay super first butal add book cancel ID equal to cancel s popup and the popup popup box in the popup box background background color black okay not black background color with 40% okay and then 40 okay so border radius or 10 pixel and top% and left or 20% should work okay and IND okay so next in the pop box input dot pop box input in input background trans backgr F okay and then solid black two Piel so control C control V input box text area so okay okay so again dot popup box input colon place holder in the placeholder order color would be black okayy popup box button pop box button background color black padding left 20 pixel pading right or 20 pixel and then okay okay and then padding bottom or 10 pixel okay what else color I think it should be good okay super add create cancel button create [Music] and Dot popup box input colon Focus input text area text are text area okay super because popup overlay okay dis first popup box popup overlay and then button okay where popup overlay equal to popup overlay correct popup overlay where popup box equal to document get element by okay query selector again query selector popup box po popup button equal to document Dot soid add popup button add popup button add popup button [Music] dot button even listen add even listener function popup overlay display property box display property okay St display okay so and then style display okay so I guess okay next canel but okay where am I the cancel Buton Okay so okay Def same Fulton action prevent default select cancel button where cancel button equal to document do get element by ID cancel button cancel popup okay cancel popup cancel popup okay cancel popup do add EV listener dot prevent default okay disapp poock okay open po [Music] destion V okay display property inine block okay okay select okay overall container s add book add book but in the book title in the book title select the book auth in the book description input select okay where container equal to document do query selector dot container where add book equal to document dot query get El by ID get El by ID add book where book title input equal to document get El by ID okay get El by ID n book title input right yeah book title input okay book author input book author input description input super Okay add book dot add even listener click comma fun comma function okay listen carefully first first where div equal to document do create element dute the do inner HTML equal to [Music] double uhod template l and then container container do up okay so first so open book title add okay bracket dollar symbol okay first book title input do Value First book title okay book title input. value book author input dot value book description input do value so again mindset Carol hello there change the way you think the delete button first already delete but on click equal to delete so script.js function delete book even dot Target dot parent element remove you can through so cre something blah blah something hello blah blah blah HTML CSS JavaScript developa happy learning guys

hi guys after so many requests so here it is Javascript begin okay happy learning welcome to JavaScript crash course Ty okay let&#39;s begin JavaScript is the world&#39;s most popular programming l JavaScript okay and also the JavaScript JavaScript is easy to learn okay pring language is totally different Java is totally different okay Java is used to create interactive and dynamic web pages page functionality okay first let&#39;s start variables data types operat first Vari variable cre cons C cons cons online JavaScript comper Java comper online JavaScript compiler fsas F okay 10 where equ Al to 20 cons statement okay so variable next concept okay let AAL to cons let a equal to 20 console. log is not defined is noted okay loal glob global cons okay course Cor assment to constant variable const okay let week days okay where is a keyword function scope or Global scope so access okay okay so let&#39;s begin create a variable named price and set it to a specific price value second create a variable name called Product and set it to a product name specif okay where product equal to Apple okay iPhone iPhone 15 create a variable named tax and set it to a specific tax value tax variable the name of the product console. log calculate the total price amount including tax total equal to price plus tax and then print it total am where total equal to price plus tax and the to iPhone 15 tax iPhone total equal to price plus tax total ta iPhone okay iPhone iPhone is not defined okay iPhone 15 is not a is not defined a equal to 10ed iPhone iPhone 15 equal to where iPhone 15 equal to a equal to Apple console.log a not equal is not iPhone 15 is not def Okay so okay so understand the difference between name and name with JavaScript when a value string is enclosed in double quotation like name it is treated as string when something is mentioned without dou okay declare a variable name called fruit name where fruit name equal to Apple okay declare a variable named count where count equal to the question count declare a variable name price and set it to the price of the FR deare Vari name to and by MP the count by the price okay okay declare a variable name price and set to the price of the fruit declare a variable name total and calculate it by multiplying the count by the price where total equal to okay in the star symb 1 into 100 equal to 100 10 into 100 correct console.log tot count into Vari 100 10 into 100 total okay already JavaScript let JavaScript keywords function for ifal 20 console do log if okay okay javascripts single L commments mul L commments JavaScript commands can be used to explain JavaScript code and to make it more readable if for fruit equal to okay sing singar okay so this is commments in JavaScript okay JavaScript operators here where AAL to 10 where B = to 20 C = to a + b console.log information number okay cons okay equal to plusus Star division operators so simple increment and decrement operat equal to 10 A++ console of course AAL a increment po pre increment listen carefully where b equal to a ++ console. log B a equal to 10 a box 10 A++ a A++ A+ A++ 11 AAL 10 so explain a [Music] l plus plus a so first Plus okay premental 10 plus plus in the pre okay console.log Ty Str two major section primtive datp nonprimitive datp non second AAL okay false okay type of true type off type type off okay you&#39;ll get to know about it better major topic JavaScript functions JavaScript functions JavaScript function is a block of code designed to perform a particular task F function VIs first enironment okay just JavaScript programming fold open folder okay AAL 10 where Bal to 20 30 console DOT log a + space file namejs l so let&#39;s start with functions function function ABC so I have a phone the expain cons function is working fun function function my name okay my name function Sam console.log this is Samsung phone Samsung phone this isone function Oppo console.log this is Oppo the function Apple console.log this is apple add the function red me console. log this is redmi super this is Samsung this is RM Samsung this is and and then function so let&#39;s do it AAL 10 where Bal 20 console. log a plus b create a variable called Factor favorite actor favorite player favorite movie favorite player favorite movie and okay so okay so where favorite actor equal to Comm where favorite player equal to doni where favorite favorite actor favorite player favorite movie equal to unbe cons let&#39;s see favor favorite okay okay cons log favorite player favorite player the log favorite movie favorite movie okay okay first function favorite super right okay okay let&#39;s move on to the next topic the functions parameters that Define when declaring a function function add a b console.log A+ B not a number so what exactly Happening Here 10 + 20am okay okay so yeah so I&#39;ll do it first function area function cre l l l console do log area is l+ B okay where area equal to Quick confusion where a equal to l star B area is a where length equal to 10 where breadth equal to 20 area 10 comma 20 listen carefully Bal 20 b a equal to l into B now 20 into 10 a equal to 200 200 okay okay so function function function my name okay a equal to my name console log where AAL my okay in the function in the function so AAL to my name name AAL to so again just create a function called add which should take two parameter A and B and it should return the addition of two variables okay cre function add a comma B return a plus b okay a where total equal to console do log total total equal to add a = 10 Bal 20 total equal to add 10 comma total equal you will understand it okay so statements stat else else otherwise if else umbrella if console. log it&#39;s true okay console. log P it&#39;s false it&#39;s false and the statement false in the in the so question first question is it raining outside r equal if rain console.log taken umbrella enjoy the if rain equal if take okay sucess so yeah we&#39;ll move on to the next topic okay cons false false false and true false so and statement false first false and true false false and false false and true console.log false R in the PIP false false true so sh and FSE statement false okay okay cons exb logical and logical or logical not okay what is the color of the traffic okay okay where color equal to red if color if color equal to equal to Red console.log stop stop equal equal equal okay GRE okay if color equal to equal to Yellow console.log get ready if color equal to equal to Green console.log go Okay so so second spring summer autumn winter okay okay okay so okay what is the score SC in a game okay third question I&#39;m going to do it okay thir what is the score in a game if score is less than 50 print you need to improve need to okay score equal to 5050 if score less than 50 console.log you need to improve 40 less than 50 stat the statement 70 okay super cool if score is between 50 and 70 here if score is between 50 and 7 if score if score greater than 50 and score less than 70 good job okay so again in the statement score less than 50 score greater than score 70 70 greater than 50 true are true this score less than 70 70 less than 70 true statement 70 greater than 50 it true and score 70 less than 70 true or false 70 correct Okay so score less 50 less than 50 correct 50 less than 50 correct score less than 50 or score equal to equal to 50 score less than score less than false score equal 5050 true okay you can understand it okay score less than or equal to 50 score greater than 50 and less than oral job super good job state if the okay if the score is greater than 70 print excellent performance if score greater than 70 console.log excellent performance super fantastic guys if I run this program now excellent performance okay you need to okay else for false okay so next question fourth question and fifth question okay so yeah if in JavaScript a for Loop is a control flow statement used to repeatedly execute block or code on specific condition generally syntax blah blah blah blah okay so and console.log node demo okay so 1 three 9 10 okay okay I should bring each and every Apple from this side to this side task okay okay start okay okay first thect 1 2 3 4 okay less than or equal to five correct true next next start plus one certain false okay okay countet already one second one thiret thir one okay for count okay correct 1 2 3 4 5 condition count equal to count Plus step one step one count equal to 1 count less than or equal 5 1 less than or equal true count equal to count plus one step two step two count equal to 2 count less than or equal to 5 2 less than or equal to 5 count or okay 1 2 3 okay okay so again okay okay next so okay print all the numbers from 1 to 10 using a for Loop 1 2 3 4 count count 2 3 4 okay okay so instead count equal to count okay okay so next number reverse number count less than or equal to 10 count equal to count figure out print only the even number from 1 to 10 two tables in the 1 2 1 2 3 4 5 6 into 2al Now 1 into 2 into 2 = into 2 = into 2 = Okay so Javas basic programming Bas okay so next session let&#39;s start first Dom stands for document object model body Hut docent object struct docent object first body title H1 paragraph t so tree of objects okay the manipulation do the paragraph tag hello create okay okay the okay select paragraph tagra okay so parag select paragraph tag using ID okay document do get element by ID document do get element by id id one in the get element by ID doc okay clear okay document dot get element by ID okay okay so let&#39;s see Okay so console log okay hell text cont g e capital b capital I capital okay okay okay text cont in the paragraph correct in the the paragraph text contenttext equal to by T par. text content paragraph tag Dot text content and then cons okay okay get element okay yeah okay hello so H1 hello world ID equal to H1 where H1 equal to document dot get element by ID H1 H1 do text content H1 do text content equal to BU World selecting htal okay so question super okay change and then H1 do text content equal to BU world in the L function change h. text content equal to by outut button click on function on hello super right yeah so on change on click on Mouse on okay okay so here here are some example okay number one number number one okay number one equal 67 okay okay so okay okay so selecting input box one selecting input Box 2 where box one equal to document Dot get element by ID number one where Box 2 equal to document dot get element by ID number two selecting result set ID equal to result where result equal to document dot get El by ID result okay okay [Music] cons log uh just box text input box value equal to 34 okay default value equal boex okay instead input boxue second value equal to 67 console. log box dot value box two do value box two dot value 3467 37 okay where box one value equal to box one dot text condu where box two value equal to box two dot text content okay in the input box one value equal to box one. cont so okay cons log box one Value Plus box two value 11 where a equal to a p where b equal to l C = A+ B a number value 12 + 1 number okay 4 7 okay so okay super right okay result do text content equal to total okay okay function result in the the in the button function okay again refr not function is not a function so result function function name result function okay okay result. text content in the total insert okay already again for first L where box on value equal to number of box do value box okay okay yeah so next JavaScript random number create okay how to create a random number in JavaScript okay so concept okay a equal to Mac dot random console.log 0.7 01655 0.73 so this Mac random random 0.0 2.5 9 1 7 3 6 okay Mac FL mag do floor 0.9 now 6.7 where b equal to back. floor console. log B9 random number 2.9 ma do floor random number outp random number output one procedure okay gu the number project SC okay guess the number from 1 to 10 okay so let&#39;s begin first okay so guess the number okay and then button check okay so first so yeah your wrong or right right okay so yeah let&#39;s begin number so let&#39;s do it equal uh check number ID equal to okay guest number guest number ID equal to guest number okay selecting input box where guess number equal to document dot get element by ID guess number result where result equal to document dot get element by ID result okay number result gu number okay number random number equal to Mac dot floor Mac dot random start 10 plus one if random number equal to equal to guest number equal to where entered number entered number equal to guest number dot value equal to equal to entered number expain console.log WR else console. L wrong okay enter the number equal to guest number value the guest number in the input box number ENT number on click equal to cons right number result do text content equal to right result do text content equal to wrong aler you want in the probably okay where score equal to ini score equal score minus one okay score equal score minus one where score equal to document dot get element by ID score score dot text content equal to score colon plus score put okay score score minus score okay like again again that is a problem again it causes problem total score total score equal to total score total okay so six score up the 10 up the one okay wrong two my score is three so okay okay so background color black with the 100 pixel height to 100 pixel okay scpt F openid equal uh box button change so select box where box equal to document dot get element by ID box the Box dot so the function on click the style okay box do style Dot colorr back and thenal okay background color okay for example Max 900 okay clal box do set attribute with Max Okay so with the maxb okay super so 2 second slow Okay so okay so see you in next session byebye okay so first question task so okay H okay so it&#39;s okay first button and then copy ID equal to input box H1 tag ID equal to result select input tag select H1 tag where input box equal to document dot get element by ID input put box where result equal to document dot get element by ID click equal to update update function update first value enter function ony up super first task complete next question number two how can you use JavaScript to accomplish the following task okay so again stud in the 1tm first hello hello H first okay select H1 bar H1 equal to docent get element by ID H1 on click equal to update function create function update text content equal to hello hm. text cont so what is the problem cannot set properties of null okay H1 get ID okay okay it&#39;s my mistake upend hello h hello for okay output hello [Music] hello H1 element create create new element H tag H1 equal to document dot create element list ital create element H1 okay list item list item dot text content equal to hello Lem first element lemal docent create element h third question change third question button change color function function update BTN do style dot background color equal to Red question number four how can I make it so that when a user clicks a button the text from that button is shown in the hon tag located above it okay idal John and then Jack okay John jacken scpt where H1 equal to document dot get element by ID result and function update function update but H text contal okay update function on click equal to update okay first B okay so okay is trusted ALT key bubbles cancel bubble c x c y [Music] in the event object browser jaas t even. target. text content refresh cons H1 text content equal to even. target. text content refresh John pin kthi super okay [Music] cool h11 H1 2 H1 3 H1 4 H1 5 H1 6 1 2 3 4 [Music] 5 Del Del okay ID H1 equal document dot get element by ID one function function delete it H1 do remlick 1 2 3 4 5 6 2 3 4 5 6 okay first in even target. remove refresh one cck Del cck Del four cck Del 5 2 6 super fantas okay starting with in HTML too HTML to. HTML okay okay so first in HTML idal so where div equal to document do get element by ID 1 okay and then console. cons okay good text okay text content so in HTML okay. inner HTML equal okay HML equal to H1 okay but text okay again HTML okay HTML okay html text content so insert HTML element okay okay different ways of Sting Elemental cons doy docy C CL H1 1 H1 2 C document okay okay H1 class equal to okay H1 class equal to okay H1 class equal to okay query selector all use dat okay so TOs where going here where fruit equal to app fruital toal so console.log Gra okay orange grape comma banana Apple orange grape banana okay super so grap two 0 1 2 3 okay so console. log fruit fruit of zero fruit of one fruit of two fruit of three count equal to Z count less than or equal to 5 count equal to count plus 1 2 1 2 3 4 okay so again in case Loop Lo 0 1 2 Step step step 3 4 5 fruit count fruit of zero fruit of one fruit of 2 of again console fruit of count count equal to Z count less than or equal to 3 0 1 2 3 1 2 fruit of count fruit of four 1 2 0 1 2 3 three Now console. log fruit dot length fruit dot L fruit do four 0 1 2 3 okay Lal L equal less than First Step Second Step third step okay okay one second position two third position okay El second 1 2 okay count count equal to Z count less than div dot length count equal to count + 1 cons div off Count 2 text content content Super 1 2 okay okay okay super so get Elements by class name get elag okay okay so insert okay element one something joh where div equal to document dot query selector okay dot up hello D do upend hello hell first okay still insert adjacent element okay insert adjacent element first before begin H1 element after insert adjacent element first after begin after end before begin before end okay okay okay so element insert adj element before begin hello okay error yeah error insert adjacent element element so where H1 equal to document dot create element H H and the insert adj element before begin the after end after after begin before end insert ad element okay super I hope you guys are ready okay so let&#39;s begin add hello delete outut copy PA paste box first function okay first JavaScript script function add ID equal to list content container selecting UL where UL equal to document dot get element by ID list container where list item equal to document dot create element any element text contal cor UL do up list item okay soal to super and then list item where input equal to document dot get element by ID input input in the input tag select okay okay function delete item delete Del on click equal to delete item delete object okay Target DOT first the button REM REM even do Target Dot parent element remove okay slash button delete the delete button cck the delete button on click me on click equal to Okay so s delete item so yeah okay hi guys we are leveling up game so maybe something and the way you think so it will get add can also delete it so yeah let&#39;s start this session okay okay okay index HTML okay so let&#39;s begin first okay so just straight the class equal to popup box in pop cancel first do overlay the overlay background color black okay 100 100% 100% left 0 pixel top 0 pixel complete scen 0 opacity 0.8 popt popup box index one index 2 so okay still it didn&#39;t [Music] come actually it&#39;s there background color and color black okay see 40 40% and then padding or 20 pixel okay and then R border radius then pixel okay 30 okay yeah I think that&#39;s enough so box display prop first the popup overlay in the popup box popup overlay and popup Bo where popup overlay equal documentery selector do overlay bar popup box equal to document dot get element by ID dot popup box okay function show show button click equal to pop box style dot display equal to block function did something cannot read style okay get element by okay dot style dot display equal to block pop function close popup displ okay Cal to close popup so Okay [Music] [Music] so function aler message function alert hello okay but okay let&#39;s see alert is not okay function okay so [Music] okay document do id id equal to BTN document dot get element by ID button do add listener Len f Al button dot add even listener add even listener function alert Mouse over but okay okay okay okay let&#39;s begin so now okay so stud open so already okay I&#39;m closing this okay books key okay so in the books ke index. HTML style CSS f scpt style okay not style so link okay scpt SRC equal. go gole FS and then style CS okay first margin and padding also I&#39;m setting to zero and then body open body family okay set cre okay and then equal na in the I&#39;m creating h t book # fd65 69 okay and then padding 10 pixel first first class equal to container okay container cre the container class equal to Booky container okay first initially let me add and then name delete button button delete important dot container dot container in the container first padding padding let it be 10 pixel okay looks good DOT book iPhone container in the book container first let me add text Center okay not Center of course not Center okay and then with 25% so that background color can be black border radius or 10 pixel so super color and and next margin 30 pixel and then okay margin over 30 pixel super next and the book Cod H1 do book container H1 tag book container H1 okay it&#39;s not H1 it&#39;s H2 actually okay book container space button in the button background color the Buton padding top 5 pixel and then padding bottom or 5el and then padding left or 10 pixel padding right or 10 pixel so super it looks good but n okay so that okay looks good and then margin top margin top 10 pixel okay okay okay uh next thing is in okay so next okay I&#39;m adding that button button class equal to add iph button equal to add popup button but okay [Music] again add I button background color set color it&#39;s going to be black border radius 100% CC and then uh padding top one or 20 pix set padding bottom or 20 pixel set and then padding left or 30 pixel and then padding right or 30 pixel and then font size increase 40el bottom 30 pixel and then right 30 pixel okay okay super and class equal to First and the popup overlay first and the pop po popup overlay okay in the pop up overlay first background color black opacity 0.8 and and then position absolute withd 100% it height again 100% top zero left zero so super and the black Z index so do class equal to or popup box and create okay so in the popup box first add book The placeholder equal to book title ID set okay book title input text place book author ID book author input okay in the input tag placeholder okay text area short description book description input okay super first butal add book cancel ID equal to cancel s popup and the popup popup box in the popup box background background color black okay not black background color with 40% okay and then 40 okay so border radius or 10 pixel and top% and left or 20% should work okay and IND okay so next in the pop box input dot pop box input in input background trans backgr F okay and then solid black two Piel so control C control V input box text area so okay okay so again dot popup box input colon place holder in the placeholder order color would be black okayy popup box button pop box button background color black padding left 20 pixel pading right or 20 pixel and then okay okay and then padding bottom or 10 pixel okay what else color I think it should be good okay super add create cancel button create [Music] and Dot popup box input colon Focus input text area text are text area okay super because popup overlay okay dis first popup box popup overlay and then button okay where popup overlay equal to popup overlay correct popup overlay where popup box equal to document get element by okay query selector again query selector popup box po popup button equal to document Dot soid add popup button add popup button add popup button [Music] dot button even listen add even listener function popup overlay display property box display property okay St display okay so and then style display okay so I guess okay next canel but okay where am I the cancel Buton Okay so okay Def same Fulton action prevent default select cancel button where cancel button equal to document do get element by ID cancel button cancel popup okay cancel popup cancel popup okay cancel popup do add EV listener dot prevent default okay disapp poock okay open po [Music] destion V okay display property inine block okay okay select okay overall container s add book add book but in the book title in the book title select the book auth in the book description input select okay where container equal to document do query selector dot container where add book equal to document dot query get El by ID get El by ID add book where book title input equal to document get El by ID okay get El by ID n book title input right yeah book title input okay book author input book author input description input super Okay add book dot add even listener click comma fun comma function okay listen carefully first first where div equal to document do create element dute the do inner HTML equal to [Music] double uhod template l and then container container do up okay so first so open book title add okay bracket dollar symbol okay first book title input do Value First book title okay book title input. value book author input dot value book description input do value so again mindset Carol hello there change the way you think the delete button first already delete but on click equal to delete so script.js function delete book even dot Target dot parent element remove you can through so cre something blah blah something hello blah blah blah HTML CSS JavaScript developa happy learning guys

Transcript for:JavaScript Crash Course

Transcript for:
JavaScript Crash Course