University:
University of Arizona
Course:
CSC 337 | Web Programming
Academic year:

2023
Views:

314

Pages:

9
Author:

Tressa Z.

WHY LEARN JAVASCRIPT?It is the programming language of the browserBuild very interactive user interfaces with frameworks like ReactUsed in building very fast server side and full stack applicationsUsed in mobile development (React Native, NativeScript, lonic)Used in desktop application development (Electron JS)WHAT YOU WILL LEARN IN THIS COURSEVariables & Data TypesOOP (prototypes & classes)ArraysDOM SelectionObject LiteralsDOM manipulationMethods for strings, arrays, objects, etcEventsLoops - for, while, for...of, forEach, mapBasic Form ValidationConditionals (if, ternary & switch)Functions (normal & arrow)FURTHER LEARNINGYOUTUBE:JavaScript DOM Crash Course - 4 partsModern JS From The BeginningJS OOP Crash Course21 Hour Udemy CourseHigh Order Array Methods VideoPromo link in descriptionAsync JS Crash CourseFetch API & Ajax Crash CoursesVanilla JS Playlist (Full of small projects) Variables in JS:/llet,Const.- - meansconstanttry to always useConst unless youknow you need tochange this Vanobleex: in a gameData types:Scove.< 10) {6console. log( 'x is greater than 10');7 } else {8console. log('x is less than 10');9 }or Is represented w/ 11-Double verticalbars.1 const x . 4;2 const y . 11;|34 if(x 5 II y > 10) {5console.log('x is more than 5 or y is more than 10');this would run as6 }yrs move than 10.or condition onlyrequires one of theCard, Hous to be AND is shown w/++ sign and requires both Coud. his1 const x . 6;to be the in ordent to2 const y . 11;34 if(x > 5 56 y > 10) {run.5console. log(' 'x is more than 5 or y is more than 10');6 )Then t else Then is represen ted by"?" else is 4:"1 const x = 10;then elsethis reads:2if3 const color > 10 ? 'red' : 'blue';45 console.log(color);a would print "blue" since x is not greekthan 10.continuebelowHigher Order Aways1Const personfirstName: John'.JS Crash CourseLastName: 'Doe'age: 30,5hobbies: ['music' 'movies', sports'1,6address: {7street: '50 main st',8city: Boston'9state: 'MA'1011 }C0x1213 console. Log(person);IDQtop1415main.js:13(firstName: "John", lastName: "Doe", age: 30,hobbies: Array(3), addraddress: (street: "5.age: 30firstName: "John"hobbies: (3) ["music_LastName: "Doe"proto_ ObjectI f we want to pull info out of theaway we can do soby: 1 const person . {2firstName: 'John'.JS Crash Course3LastName: 'Doe',4age: 30,5hobbies: ['music', 'movies' 'sports'1,6address: {7street: '50 main st',8this (st llestructure for pullingcity: 'Boston',9state: 'MA'out theirle needed10 }11 }12C:13Ptop14constfirstName, lastName, address:city= person;15Bostonmain. 15:1016console. log(city);>17Continue Here11Turnary Operator1 const x = 9;2then else3 const color > 10 'red' : 'blue';4Color is Blue.5 switch(color) {6case 'red':7console.log('color is red');8break;9case 'blue':10console.log('color is blue');11break;12default:any of the above.13console.log(*color is NOT red or blue');14break;15 }Functionsmain.ju1 function addNums(num1 = 1, num2 = 1) {2return num1 + num2;3 }45 console. log (addNums (5, 5));Returns 10 on the console7FIRST1 const addNums . (num1 = 1, num2 = 1) hum1 + num2: Arrow functions Can slim down our code lines +commandsobject Oriented Programming:1 " Constructor fuhnctionmain.js:112 function Person(firstName, LastName, dob) {3this.firstName . firstName;Person {firstName: "John4this.LastName . LastName;v ". lastName: "Doe", dob:5this.dob N dob;6 }"4-3-1980"} 67dob: "4-3-1980"811 Instantiate object9outputfirstName: "John"const person1 N new Person( '4-3-1980');10console. Log(person)DlastName: "Doe"1112Aproto : Object