JAVA SCRIPT PROGRAMMING IN 10 DAYS-BASIC, Cheat Sheet of Computer Programming

Download JAVA SCRIPT PROGRAMMING IN 10 DAYS-BASIC and more Cheat Sheet Computer Programming in PDF only on Docsity!

A 10-Day Journey to Master JavaScript from Scratch! LL EL OD SSS SL SO en es) a ee ee ee Se 2S aes | (1) Day 1 - Introduction to JavaScript ' @) Day 2 - Operators & User Input Conditional Statements ----------- S S cc Ww i Day 4 - Loops -------------------------- Day 5 - Functions ---------------------- Day 6 - Arrays pees eee Day 7 - Strings a a a ee Day 8 - Objects --------------------- | | | | \ I | ! | | ' | | | { | | | \ I l | | | | ' ! \ | { | | \ | | | 1 1 1 \ ! ! | | \ ' | \ | ! | \ | | | I I | bi CIOICISICIGIGKS , Basic JavaScript (10 Days) ” SL Day oe Introduction to JavaScript FZ What is is JavaScript ? ? - 2. Uses of JavaScript or a Add interactivity to websites % Form validation Dynamic content updates oS Create animations and effects Ww @ JavaScript is a programming language . ® used to make web pages interactive ® and dynamic. PS e It is a lightweight , interpreted ° language. @ Handle events (like button clicks, key e It is designed to run on the client-side presses, etc.) in the browser. @ Work with APIs and fetch data Cae) @ JavaScript is one of the core technologies e Build single page applications (SPA) of the web, along with HTML and CSS. 3. 3 JavaScript . Setup There ore 3 ways to include JavaScript in HTML : @ Inline JavaScript < button halick’=“alertC Hella!’ y"> Click Me ® Create games, calculators, and more. G2) __. * JavaScript code is written inside before closi ng tag External JavaScript for better performance. Keep JavaScript — code ina js file and link it. Ne J 4. Variables (var, let, const) Can be Can’ be ae Examples : Keyword Scope védestoved'? | updated Hoisting Best Use ee Bed. Function Old code ~ ? er Scoped Yes Yes Yes (Not recommended) let age = 20; Ye ; let Block No ie (But nat Variables that const pi = 3.14; Scoped initialized) | __ change No Yes F ; const Block No Cute ets | deikicak Variables that Note : Use const by default. Scoped change) Serene do not change Use let when value ed. hange. 5. Data_Types a og JavaScript has 2 types of data: A) “Primitiv ive Data “Types (7) @ String — “Hello” @ Null — null @ Object —> { name: "John", age: 20 } : 123n also objects) } ® Undefined —> undefined ' NEES, ® * Basic JavaScript (10 Days) oy FA La g @ if ese — It is used to execute a block of —> It runs one block if condition is true, code if the condition is true. otherwise runs the else block. if (marks >= 50) { console. log ("Pass"); if Cage >= 48) { console. log ("You are eligible"); Executes only if } condition is } else { true. ; console . log (“Fail”); else if switch Used to check multiple conditions. Used co when we have many fixed options. ‘a —s) ied trates = 243 H et day = if (marks >= 90) { ray switch (day) { aX "y, "3 case 1: console. log (“A Grade"); Eandthions console . log ("Monday"); Best for } else if (marks >= 60) { ore by break; multiple console. log (“B Grade") ; one: cose 2 " ny, ~ fixed } else { eon Tuesday); values. wy, case 3: console. log ("C Grade") ; soneala, lag (“Wednesday”); } | break ; = default : console . log ("Invalid day") Ap Ternary Operator U J A short form of if - else. (Note : a ii condition ? expression_if_true : ex ionif_false 5 | . P t = ty * Use if for one condition if true if false condition . Exowple:: %* Use else if for pened Soe ~~ multiple conditions . let age = 20; : a og : * Use switch for let result = (age >= 18) ? “Adult” : Minor"; many fixed options. console. log (result) ; // Adult * Use ternary for shorter if - else. 3 &) vi — single condition Vv if else —» two choices ¥ else if — multiple conditions Vv swith —» many fixed options v F —» short form of if else ¢+ Basic JavaScript (10 Days) a (4) for loop Used to repeat a block of code a known number of times. Best when we for (let Los dy i| Decrement ~ 3) do while Loop Similer te while loop but executes the block at least once. - > ‘Condition . let i= (6) break & continue ( : ask ) Used to terminate the loop ¥ Day 4 - Loops % 1; is checked do { after console . log (i) ; H42345 executing — tres gato } while (i <= 5); ~s (2) while loop Repeats a block of code while condition is true. [- > let f= 4; while (i <= 5) { console . log (i) ; URES W1A2345 Nested Loops A loop inside another loop . i++) { 3; j++) { - for (let i = 4; i <= 3; for (let j = 4; j< console . log (*i = ${i}, j= ${i}); Outer loop } runs once, } inner loop ~ f . 7) = UNS Output : - * : z : completely. iet, Jj = 3 i2=2, j= 4 i=2,j=2 i=2,j}=3 i=3, j= 4 O p= 359 <2 _i=3,j-3 Used to skip the current iteration | | | immediately . | and continue with next one. f ) | r for (let i = 4; i <= 5; i++) { Output :) | for (let i = 4; i <= 5; i++) { Output : | if (i == 3) break; // stop at 3 4 | if (i == 3) continue; // skip 3 4 console . log (i); |e console . log (i) ; | } e Ww ; OAM oe Ha eS i ee,” ne Van ee | LO Le = on S Loop stops when the condition | | = @ ! Skips the current iteration ) { is met. J | t only . 3 , * for loop = > when we know the number of times . | * Nested Loops — loop inside. Loop - % while loop —% when we don’t know the number of times. * break — exits the loop. # do while —> executes at least once. * = continue —> skips current iteration. Keep Practicing, Keep Coding ! Creating Arrays Arrays are used to store multiple values in | re single variable . - H Using array literal let fruits = ["Apple", "Banana", "Mango" ]; console.log(fruits); // [’Apple’, ‘Banana’, ‘Mange' 11 Using Array constructor // Accessing elements (0-based index) console. log(fruits[0]); // Apple console. log( fruits[2]); // Mango let numbers = new Array(41, 2, 3, 4, 5); console. log (numbers) ; if Es; 2; 3, 4, 5] @) Looping Arrays We can loop through arrays using different Loops. r- // Using for loop let nums = [40, 20, 30]; console . log(nums[i}); } 4 10 20 36 // Using for...of loop for (let num of nums) { console. log (num) , } WW 10 20 30 // Using forEach() nums.forEach(function(num) { console. log (num) ; // 10 20 30 | 3 for (let i = 0; i < nums.length; i++) { > A. Use ) for.sof) for clean J () Array Destructuring Extract elements from an array and assign them to variables. 1) Quick Summary ¢ v Creating Arrays Vv Array Methods V Looping Arrays (2) Array Methods Built-in methods to work with arrays. Method. Description Example Output push() ae eee err.push(4) | [4, 2, 3, 4] pop() —< last arr. pop) {4, 2, 3] unshift( a a arrunshift(o) | [0, 4, 2, 3] r Remo: irst 7 chift() | Remowms fi avevehife() [2, 3] indlexOf() mee tne F | wrrcindexOf(2) 4 wicduidi) — f eet) ew ccuues) | tame Returns. length len h igth & ong arr. lengt 3 Multidimensional Arrays Arrays inside arrays. Oo 64 06(2 4 4 + > - D 4] (4, 2, 3], at [4, By 6], 4 > 4 5 6 [%, 8, 9) , j ‘Ach J; 2-> 7 8 console: log (matrix [(0][1]); if 2 L console. log (matrix[2}[2]); // — Cntr row I row )[ column wie, -@° Think of it as a table with rows and columns. Ni. i; Destructuring let [first, second, third] = colors; console. log ( first) ; console. log (second) ; console. log (third); M1 Red. // Green / Blue fw colors = ["Red", “Green”, "Blue"; | // Skip elements let [o, , // Rest operator let [x, console. tog (x); c] » [4, 2, 3]; console.log(a); // 4 console.log(c); // 3 ...rest] = [40, 20, 30, 40]; 10 console.log (rest); // [20, 30, 40] ; —> Store multiple values in a single variable. — > Built-in functions to add, remove, find, etc. — Use loops to access each element. V Multidimensional Arrays —> Arrays inside arrays (tables) . V Array Destructuring > Extract values into variables easily. QJ) Note % Arrays are very powerful and widely used . %# Practice different methods to get comfortable. * Use meaningful variable names. 4 Keep coding and keep improving! (G) a r e200 © @ Practice Makes Perfect! MW occ (4) String Methods Strings have many built-in methods. (2) Template Literals 3) String Search Methods Q Methods to search for characters or substrings 7 Template literals allow embedded expressions Use ${} to embed variables or expressions. w Method Description Example Result and multi-line strings using backticks @}. a r. — length —- length "JavaScript". length 10 ( “OC f let name = "John"; lst f : let age = 20; te 0) Converts to “phar att oy |*neer , Strings are ) “3 , ul uppercase “— | immutable, ||| // Using template literal Converts to meaning tolowerCase( ) totierticse "HELLO", tolowerCase( ) “hello” let message = “Hello, ${name}! they You are $ {age} years ald.”; Remeves spaces |, yy. wsss) | 4 Be shes) trim() fresh Bah aeons chi class= "title" >Hello! > [ emt

This is a paragraph -

cat type of event (e.g., “click") * function + code to run when event occurs | \ ' | (2) Selecting Elements We can select elements from the DOM using various methods. Method Description Example Selects eiement getElementByld( ) * : Yy document .getElementByld (‘btn’) getElenentsByClassNume( ) ma elements Ey | asin gat laments ByCladeName ‘tite € gétElementsByTegNme() | “etsoetemente by | rst: gt ElarianteBy Taghome(') tag name Selects first element wery Selector 5 elector (*. title’ query () ws is se document..query 5; (*. title’) all elements querySelectorAll() slates document. querySelectorAll(‘p') using CSS selector a a ae a ae ( querySelector() is very powerful and / | qwarks like GSS: selectors! ; i] Oe ‘ Sty ling Elements We can change CSS styles of elements using style property or class, (— *y let box = document.getElementByld ("box ); 11 Using, stl. property box..style.color = ‘blue’; box . style backgroundColor = ‘lightyellow” ; box. style. padding = ‘10px"; // Using class box className = “highlight”; 1 adds/changes class = MH DOM is the bridge between HTML and JavaScript. © Select elements using various methods. [A Change content using textContent, innerText, innerHTML. [H Style elements using style or className. ww Respond to user actions using events. @ Understand the DOM, Control the Web! Keep Practicing! QD — — a ——- Let’s build o simple project that changes text and background when a button is clicked. HTML Hello, JavaScript! Click Me css (wey { font-family: "Segoe UI', sans-serif; text-align: center; margin-top; 50px; } #title { color: navy; } button. { padding: 10px 20px; font-size: 16px; cursor: pointer; berder: none; ig Day 10 — Mini Project & Revision JC Output (After Click) 3) Calculator Mini Project (2) Form Validation Basics Validate user input before submitting the form. background: #4CAFS5O; color: white; Greatt: You clicked. border-rndius: 6px; } the button 3° wa _/| JavaScript = const title = document getElementByld (‘title’); canst. bin = document. gatElementByld (‘btn’); a a btn addEventListener(‘elick', () => { = title.textContent = ‘Great! You clicked the button W'; | | Selected title.style.color = ‘green’; elements document.body,style.backgroundColor = “H#eBf5e9"; @ Added event btn.textContent « "Clicked HB"; Ustener btn.style.backgroundColor = "#2e%d32"; © Changed text, Ys eeu LL J button text A simple calculator using HTML, CSS & JavaScript. ( JavaScript (Logic) ") ( divem id= “myForm" > ) Submit

L J JavaScript OFS (- > a L const form = document, getElementByld ( 'myForm’); ( Always ) const user » document, getElementByld( ‘username’ ); { validate const email » document .getElementByld (‘email’); ( data from const msg = document. gatElementByld (‘message’); { users} ety } form addEvantlistener( "submit", function(s) { 7 @ J e.preventDefault(); aa oe if Cuserivaluecteim() === '") { ——<———— msg-textContent = “Username is required!" ; Checks: msg-style.color = ‘red"; return; ww Username : not empty if Clemail vatue.ineludes(’@")): { msg. textContent = ‘Enter a valid email!"; @ Email msg.style.color = ‘red’; contains return; @ : M Show msg.textContent = “Form submitted successfully!" ; message msg.style.color = “green’; accordingly y; Na 3 aia J (4) Full Revision Quick recap of everything we learned in 10 days! display,value = eval (display. value); t Th 0 lek display © document:getEtementByTa ( ‘display! ); function oppendValue{val) { (e isplay.value += val; #)(8}[9)[4}))2” 2 = sf r s function clearDisplay() { 4|[5]L¢@|[*] || seen VC function calculate) { 4 |{2][3 [=] || "at f } catch (e) { [0 | : 2) + display.volue = ‘Error’; \ L g? = x (Form with Basic Validation Oe oe aN : Features:: Addition, Subtraction, May | = Divtiten; (lear, Bi Dectmal. support [sei i m ul oaa 7 ee saan neg) ———N . | | : jes | Interactive Button Project using DOM & Events | | ! The journey has just begun! © exploring more advanced JavaScript concepts. Rasaee 3 sain BS ia aa String, Bootes, | Operators $RS- ail al cae em Controle Flow Pa | if.selee, iteh = QO fe ee icieui Nested Loops, fame FC) | a ee prays (32) | teen, Denar Strings 9 fot ka Ot ern ee @ | Soom Ma Pipes w ae Form Validation, f Next Step < 0 © © @Y Code Today, Create Tomorrow! Q © © © 0