This will be all about javasript exam
LAMP Stack COMP 1231 Web Programming Ben Blanc Week 1 Introduction To JavaScript Protocols TCP/IP Transmission Control Protocol/Internet Protocol Suite of protocols that let two computers communicate HTTP FTP SMTP HTTP Error Codes 2xxx Success 3xx Redirect 4xx Client Error Dynamic Web Page The DOM DOM Standards History JavaScript Developed by Brendan Erich at Netscape for building interactive web pages using browser. JavaScript is added to a page by using tag. You can have multiple script tag in a page. Codes are executed from top to bottom. JavaScript relies on the web browsers and the DOM to get the input and display the output. -JavaScript is a programming language embedded in a web browser. -JavaScript is no Java. * When 3 Become 1 JavaScript Original 1996 Jscript Microsoft’s version Later in 1996 ECMAScript Standardized package 1997 Helpful Preferences Change Styling Settings ->Style Configuration Enable Auto-completion Settings -> Preferences External JS Params Basic JavaScript Skills JS Basics JS Basics JS Identifiers Identifier = name of Objects Functions Variables Properties Methods events JS Identifiers JS Reserved Words JS Global Properties/Methods Spacing/Indentation/Comments 1 space around operators Always use 4 spaces for indentation of code blocks Use one space before the opening bracket Put the closing bracket on a new line, without leading spaces. Line length 80 chars 2 comment types // /**/ Primitive Data Types Number Integer Float (decimal) +/- infinity String Value surrounded by single or double quotes Boolean True, false 1, 0 Window Object Common window methods window.open() Returns window object reference to new window or null Window.close() Window.alert() Window.prompt() Returns string value or null if cancelled Window.confirm() Returns boolean true if “OK”, false otherwise * Document object Common methods Write() getElementById() Document Object is descendent of window object Concatenation and Assignment Arithmetic Operators Variable Scopes Keyword ‘var’ is used to create variables. var nameofvar=value; Variables declared outside of a function are GLOBAL Omitting the ‘var’ keyword and assigning a variable a value makes the variable scope GLOBAL nameofvar=value; Newer Variable Scopes ECMA 2015 introduced two scopes let Const Keyword let allows block scope Inside curly braces Standalone Iteration structure Cannot have let and var variable with same name in same scope Use Console-ing F12 on browsers, then click console tab Additional Console Methods table(object) displays the provided object or array as a table time(name)…timeEnd(name) starts the timer in milliseconds until it is stopped by timeEnd group/groupCollapsed(name)…groupEnd Errors Most common runtime errors infinite loops Most common logic errors math calculations, typecasting Testing and Errors * LAMP Stack COMP 1231 Web Programming Ben Blanc Week 2 Controls Structures Output Methods document.write() (Object).innerHTML alert() Console.(method) Numbers To code a number var num1=123; //will be interpreted as integer var num2=12.3 //will be interpreted as float To typecast (convert) string to number parseInt() parseFloat() To check if value is number isNaN() //does typecasting on check but doesn’t typecast variable itself Arithmetic (Number) Operators var x = 6; var y = 3; var z = 0; //can also be var x = 6, y = 3, z = 0; z = x + y, z = x – y , z = x % y Works as expected because all variables are numbers Common Arithmetic Operators Arithmetic Assignment Shorthand version Updates value of one variable by value of another variable var x = 6, y = 3; x += y x -= y x %= y Why Can’t It Understand?! Is a number enclosed in quotes a number or a string? Technical Answer: string Situational answer: depends Strings String variable is any value enclosed in either single or double quotes Concat (combine) strings together with the “+” symbol Ensure concatenation symbol is not the last character in a JS statement Default value for string is undefined String Declaration A Control Structure A conditional expression returns a value of true or false based on the result of a comparison between two expressions Relational Operators Equality VS Identity Operators Equality Operators Anomalies IF Statements IF Statement Syntax If (Boolean expression){ statements(s) } else if(Boolean expression) { statements(s) } else{ statements(s) } IF-fy Example What Are The Results? Correct Order String Comparison Compared by their ASCII values Uppercase letters < lowercase="" letters="" comparison="" is="" character="" by="" character="" string="" comparison="" ascii="" table="" logical="" operators="" it’s="" only="" logical="" switch="" statement="" evaluate="" an="" expression="" most="" of="" the="" time,="" a="" single="" identifier="" value="" execute="" code="" based="" on="" the="" value="" of="" that="" expression="" (case)="" terminate="" case="" by="" keyword="" break="" switch="" statement="" syntax="" switch(expression)="" {="" case="" x:="" code="" block="" break;="" case="" y:="" code="" block="" break;="" default:="" code="" block="" }="" switch="" statements="" lamp="" stack="" comp="" 1231="" web="" programming="" ben="" blanc="" week="" 3="" iteration="" structures="" iteration="" structures="" while="" loop="" do="" while="" loop="" for="" loop="" while="" loop="" while="" loop="" examples="" what’s="" wrong="" with="" this="" code="" variable="" i="" is="" never="" updated="" while="" loop="" examples="" while="" loop="" do="" while="" loop="" do="" while="" vs="" while="" loop="" null="" vs="" undefined="" undefined="" declared="" but="" no="" value="" assigned="" typeof="" returns="" undefined="" null="" official="" value="" assignment="" of="" nothing="" typeof="" returns="" object="" for="" loop="" break="" and="" continue="" break="" the="" break="" statement="" causes="" the="" loop="" to="" end="" immediately="" continue="" the="" continue="" statement="" causes="" the="" loop="" to="" skip="" to="" the="" start="" of="" the="" loop="" using="" break="" and="" continue="" using="" break="" and="" continue="" let’s="" start="" coding="" lamp="" stack="" comp="" 1231="" web="" programming="" ben="" blanc="" week="" 4="" arrays="" i="" initialization="" and="" accessing="" for="" loops="" and="" arrays="" for="" (var="" x="0;" x<arr_y.length;x++)="" works="" for="" indexed="" arrays,="" not="" for="" associative="" unless="" named="" index="" is="" numerical="" value="" for="" (var="" x="" in="" arr_y)="" works="" for="" indexed="" arrays="" as="" well="" as="" associative="" arrays="" var="" x="" gets="" passed="" the="" property="" (index)="" value="" of="" each="" array="" key="" skips="" over="" undefined="" key="" values="" string="" manipulation="" very="" similar="" to="" array="" maninpulation="" most="" common="" methods="" touppercase()="" tolowercase()="" substring(start,end)="" exactly="" like="" array.slice()="" except="" no="" param="" can="" be="">< 0="" can="" even="" be="" accessed="" like="" array="" string="" manipulation="" charat(number)="" returns="" the="" character="" at="" a="" specific="" location="" if="" number="" not="" in="" range,="" returns="" empty="" string="" charcodeat(number)="" returns="" ascii="" value="" at="" specific="" location="" if="" number="" not="" in="" range,="" returns="" nan="" string="" manipulation="" split="" method="" str.split(delimiter[,limit])="" str="string" variable="" delimiter="" is="" string="" to="" separate="" characters="" by="" empty="" delimiter="each" character="" as="" index="" delimiter="" not="" found,="" whole="" string="" returned="" delimiter="" param="" not="" included,="" whole="" string="" returned="" limit="" (optional)="" set="" max="" amount="" of="" indexes="" returns="" array="" examples="" examples="" looping="" arrays="" example="" what="" is="" the="" output?="" looping="" arrays="" example="" what="" is="" the="" output?="" lamp="" stack="" comp="" 1231="" web="" programming="" ben="" blanc="" week="" 5="" functions="" functions="" overview="" can="" be="" called="" anywhere="" anonymous="" and="" named="" functions="" can="" pass="" many="" arguments="" to="" function="" arguments="" called="" parameters="" variable="" names="" within="" function="" return="" values="" keyword="" ‘return’="" if="" not="" present,="" default="" value="" of="" undefined="" named="" function="" declaration="" named="" functions="" are="" processes="" procedures="" that="" you="" want="" to="" use="" reserved="" word="" “function”,="" then="" name="" must="" start="" with="" letter="" should="" start="" with="" lowercase="" cannot="" contain="" spaces="" (underscores="" allowed)="" if="" function="" name="" is="" multiple="" words,="" each="" word="" after="" the="" first="" work="" should="" be="" capitalized="" function="" thisismyfunction()="" named="" function="" parameters="" parameters="" must="" be="" separated="" by="" commas="" each="" name="" of="" parameter="" should="" follow="" naming="" convention="" of="" function="" names="" parameters="" names="" are="" used="" as="" variable="" names="" in="" function="" return="" statement="" sends="" back="" data="" named="" function="" example="" var x="myFunction(4, 3); " function="" is="" called,="" return="" value="" will="" end="" up="" in="" x="" function myfunction(a,="" b)="" {="" return a="" *="" b; ="" //="" function="" returns="" the="" product="" of="" a="" and="" b="" }="" anonymous="" functions="" part="" 1="" similar="" to="" named="" function="" declaration="" remove="" name="" is="" attached="" to="" a="" variable="" or="" event="" executed="" when="" variable="" or="" event="" is="" called="" anonymous="" function="" example="" var="" x="function()" {="" function="" goes="" here="" };="" x();="" window.onload="function()" {="" function="" goes="" here="" };="" anonymous="" functions="" part="" 2="" anonymous="" functions="" can="" be="" evoked="" unattached="" to="" an="" event="" or="" variable="" executes="" immediately="" when="" called="" similar="" to="" part="" 1="" encompass="" anonymous="" function="" between="" brackets="" then="" add="" ()="" to="" pass="" any="" parameters="" anonymous="" function="" example="" (function()="" {="" alert(‘no="" params’);="" })();="" (function(a,b)="" {="" alert(‘params='+a+‘ & ' +b);="" })(7,9);="" arrow="" functions="" less="" brackets,="" more="" coding="" before="" let="" hello=" function()" {="" return "hello="" world!";="" }="" no="" args="" let="" hello="()" ==""> { return "Hello World!"; } With 1 args Let hello = (val) => {return "Hello " + val;} Arrow Functions More examples With multi args Let hello = (val, sum) => {return val + " " + sum;} Only 1 statement? No brackets Let hello = () => "Hello World!"; Let hello = (val, sum) => val + " " + sum; Only 1 parameter? No parenthesis Let hello = val => ”JavaScript” + val; Pass by Value vs Reference Pass by value Value only passed All primitive types Pass by reference Not value but alias is created All changes affect original and alias Object types Variable Scopes Keyword ‘var’ =>global. ‘let’ => scope of block Variables declared outside of a function are GLOBAL Omitting ‘var’ keyword => global variable ‘let’ variables cannot be re-declared Scopes and Order All functions have access to global vars Local vars only available within function Named functions created before any code executed Anonymous functions executed in order Runtime error possible Lexical scope Can determine scope of var by reading code