Programming Foundations: Fundamentals / Javascript

What do we write in? - Never? What is it?

Can write in *note pad* (PC) or *txtedit*(MAC) Its just *plain text*! - Nothing special *NEVER IN WORD* >> never in a software that can change size or font or bold. Its plain simple.

What are variables How create a variable? - caviat? Undefined? Create a variable "year", and set it to your birth year Create multiple variables day month year - Include your birthday values What can you put into a variable?

Containers that *hold on to data*, giving it a name and value [Undefined]: *Variable w/o value* is undefined [Create]" *var year;* - tells computer to create a new variable called "year" Must be *one word with no spaces* - letters - numbers (*cant start with number*) - $ - underscore *var year = 1996;* *Case sensitive!* *var day = 29, month = 6, year 1996;* [Put Into]: Can put numbers, dates, text, combinations

Describe reading and writing from the DOM in Javascript What is it Components? Examples?

DOM: Document Object Model - *An agreed upon set of terms that describes how the pieces of a webpage interact* (1) *Document* - The webpage - The html code (2) *Object* - Elements / components / pieces (3) *Model* - What we call pieces - How pieces interact ===================== Examples: "Get the title text" "Get the second paragraph" Get the third link and make invisible Move an image 50 pixels to the right etc... So if have a document that builds an existing webpage In a completely seperate document, can refer to previous document and element and what you want to do, and it happens, because the computer understands what document, element are and how to handle them physically on the computer *Computer can make assumptions when you give it directions to manipulate parts of a webpage, instead of having to spell it all out*

What is multi-threading Challenges?

Do to keep program responsive Main thread - Of execution, goes sequentially down tasks Custom thread - Goes down unique pathway parallel to main thread [Challenges]: - Competition for resources - Restrictions on updating UI - Language support

Describe debugging Syntax errors Logic erros How debugg?

Dont get frustrated Expect code not to work Build piece by piece More time debugging than writing [Syntax errors]: - Format of code is wrong >> forgot ; or wrong case, forgot quotations [Logic errors]: - Code is correct but built wrong >> off-by-1 errors >> dividing by 0 (1) Reproduce problem - Does same error occur same way each time - Where in code is the problem?

Describe the file I/O Reading files Writing files Breaking files apart Streams

Javascript cant normally read files off harddrive or save files onto computer [Reading in files]: (1) Give name of file want to access - If dont give pathway assumes same folder as programm (2) Tell to open file - Can open in many different ways >> often safe mode (3) Close file [Writing in files]: (1) Give filename as above (2) Open in specific way >> write mode (3) close file [Breaking files apart]: - Rarely read entire file at once - Need to read in chunks >> open fiile >> while file has lines >>> read one line >>> display line >> end >> close file [Streams]: - Like a conveyor belt of bytes - Take on one by one

What are programmers text editors?

Just *plain text software* but makes it *easier* on programmers - *line #* - *colour coding* - *find/replace* funtions

Libraries and frameworks Skills as a programmer?

Libraries (Frameworks) are pre-written code you can link to and use Less about language more about libraries Skills are not only writing language, but knowing how to recgnize code - Know how to find way around and access and use it

Describe do loops

Like an *inverted while loops* So executed then evaluated for i (vs. for and while loops which evaluate first)

Describe iterations While loop? What's wrong with this loop? var a = 1; while (a < 10 ) { alert(a); } How fix?

Loops Avoid having to right code againg and again Have conditions for how long they loop - even code for how they stop and check to stop [While loop]: Repeats loop *infinately* Add *a++;*

Are all languages different?

Most are, but some are actually more similar to eachother than different because they *share similar histories* ** print("Hello,world") ** Is the same in algol, python3 and lua

Describe working with strings What about quotes within quotes? - Create a variable with the string: *He said "that's fine" and left* String properties? Use code to alert you to the length of the phrase *This is a simple phrase*

Need quotations, use proper *""* for good practice *var phrase = "He said \"that's fine\" and left"* [Properties]: Can see the variable's length, word search, character manipulation [Code] *var phrase = "This is a simple phrase."; *alert(phrase.length);*

Describe working with complex conditions: Create variable "balance" which is 5000 Make it so that if balance is at least 0, alrt that balance is positive Otherwise, make it so that if balance is less than 0, alert that balance is negative Make it so that if a positive balance is more than 10,000, alert that balance is large

Notice the indentations of braces so you know what is nexted with what, should be alligning the if's with respective braces

Describe using classes and objects Objects vs primitives? Math objects? new?

OFten use pre-made classes and putting objects in them Classes: - arrays, regular expressions, dates - have properties and methods >> can acquire information from them Math objects to manipulate data >> x=200.6 >> y= Math.round(x): >> y = 201 >>> also min and max and log and PI and random and sqrt etc... Primitives: - numbers and booleans - store a value ============== So the *math class* have *Math.round* as an *object* Math. min as an object etc.... [New] - says make new object based on a class

Describe setting comparison operators = vs == vs ===? AND / OR?

Only use = for assigning valuess - For equality make == === is for exact equality >> would say that 123 and "123" are not equal. Looks at data type (number vs string) [AND/OR] - For asking if multiple conditions are true simultaneously - and is written as && - or is written as ||

Describe input and output Old vs new Persistence? - Which languages have

Originally fed something into program, then received outcome - When program closes its gone Now more about graphical user interface - Programs that stay up and can be interacted with >>> like a webpage interaction Persistence: Data outlives program (as file, in database, in cloud etc.) - Javscript doesnt have this >> cant code to save a file - Other languages (Visual,Java, Objective-C) >> have commands to save a file

Which languages are compiled, interpreted, hybrid?

Usually this categorization is not why youd pick a language BUT its still a factor - e..g do we want full privacy, importance of cross-platform? speed?

What do we write?

We write *source code* that is translated down to machine code

Describe programming style: Naming conventions Brace style

Where to put braces, how write variable names Want code readable, consistent, and also accepted best practices [Naming conventions] - letters,numbers,dollarsign,undercore >> dont start with number - *"camelCase"* > always lowercase letter >> subsequentwords are capitalized >>> var *evenHigherScore* others use underscores >>> var *high_score* [Brace conventions]: IF-statements: open brace on keyword line closed brace by itself indented with keyword on first line ELSE-statements: open brace w/ keyword on the line of closing brace of IF close brace in own line indent to the close brace of IF Always end w/ semicolon Define functions before call them Look at *javascript style guidelines*

Describe writing pseudocode

Writing computer instructions in plain English before coding : e.g. (1) ask user for email address (2) if email address matches accepted pattern >> Add them to email list - else >> show error message ^^ indent for clarity Dont need to know how to do all of pseudo code, its about reearching and testing Allows to better understand code while not worrying about syntax

Describe operators Arithmetic - BIDMAS! >> how get around (if want to)? Add onto an existing variable? Increments/Decrement?

[Arithmetic] + - * / = var a = 5; var b = 25; var c = a + b; [BIDMAS] Can *use parenthesis* or else * and / go first e.g. result = 5 + 5 * 10; = 55 e.g. result = (5+5) * 10; = 100 [Add to existing]: score = score + 10; >> finds score value and adds 10 or score *+=* 10; >> can also do *-= *= and /=* [I/D]: - If increasing or decreasing by *exactly 1* >> a = a + 1; >> a += 1; >> *a++*; >> same with decreaseing (use minus) (*a--*)

C# and Visual Basic.NET

[C#]: C# notation looks really similar to ava Another main function Curly braces as on own line and match up open close [VB.NET]: - No braces - No semi-colons - Need to say 'end' since no bracer [Getting started]: - Visual Studio - microsoft.com/express

Difference between compiled and interpreted source code? Pros and cons? Intermediate?

[Compiled]: - Write code - Use a *compiler* that turns to *machine code* *upfront* - *Give* someone *machine code* - Directly executable - Others dont see source code [Interpreted]: - *Give* person *copy* of source code - *Receiver* needs some sort of *interpreting program* >> processes code line by line >> e.g. looking at a website, *browser interprets the javascript* [Intermediate approach] - *Upfront partial compiling* >> Produces *intermediate language (Byte code)* - *Send* IL - IL is *interpretted* >> turns into *machine code* >> Just In Time *(JIT) compilation*

Describe collections in other languages Javascript vs other languages? Associative arrays?

[Javascript] - Supports mixed data arrays: undefined, boolean, numberical etc. - Can increase/decrease array length (mutable) [Other languages] - specific-data arrays: >> one type of data in entire array - Fixed length (immutable) >> good for arrays you dont want to change e.g. days in the week array >> Often faster [Associative arrays]: - Also known as dictionary,map, table - Can make the i=0,1,23,etc. into specific words to help identify elements >> e.g. myArray = [AL] will produce Alabama

Python

[Notation]: - Clean and concise - Large libraries - Comments with # - def to define function - pays attention to indentation >> no curly braces [Getting started]: - Ecplipse IDE with PyDev, Komodo - python.org

Ruby

[Notation]: - No semicolon -Comments with # - Clean, compact language [Getting started]: - rubyonrails.org - rub-lang.org

Strongly typed language? Weakly typed language? What is javacript? What is a string? - Properties/Notation? - Boolean values? Issue with weakly typed language?

[Strongly typed:] *Once chosen data type for variable, cant change it.* - Each variable has a distinct format [Weakly typed:] *variables are generic and any data can be added into it* - e.g. Javascript [String] String is a *bunch of characters together* - Must be *enclosed with "" or ''* so computer knows when string starts and ends >> e.g. *"Hello"* - Boolean values. *True or false* >> e.g. *myVariable = true;* >>> *no quotations* needed [Issues]: Issue is that *cant know for certain* if variable has the right data you want

Describe object oriented languages Class? - Attributes - Behavior Object? - Encapsulation

Old: Long piece of scriptcode New: (OOL) split the code apart appropriately - Each object deals with different component of application >> as a human would approach and solve a problem, compartmentalizing [Class]: - THe idea - Blueprint, defintion, description >> e.g. groups (e.g. dates, users, buttons, - No data though, just labels (1) Attributes (Properties) - Name, height, weight, gender, age - the data (2) Behavior (Methods) - walk, run, speak, sleep - the funcitons [Objects]: - Created based on class - Encapsulation: Classes are self-contained units that represent both the data and the code that works with the data

Underlying theory of programming?

Programming breaks down complicated tasks into clear simple steps

Programming languages vs script languages?

Programming languages: *hold their own* power on a computer - C++, C#, java Script languages: for use in a *specific program/software* (so more limited and easier to pick up) - *Flash: Actionscript* - *MS Office: VBscript* - *Web browser: Javascript*

How does javascript deal with white spaces? String? - How code indents?

*Does not care* where line spaces and indents between lines - But spaces *within a line are important* >> usually want a space between all components, ending with a semicolon >> useful for readibility [String] - *Spaces count as characters* - *\n* >> new line

Iterating through collections What about if want to add arrays?

- Start array at 0 >> since base-0 -Make the check condition the length of the array >> makes it scan through array - Use index to access the current element to see what it is (i=1 = 20) Good for large arrays, minimizing the coding ================ [Add arrays] var myArray = [500,500,500,500,500] var total = 0 for ( var i = 0 ; i < myArray.length ; i++ ) { total = total + myArray[i]; } alert("The total is: " + total);

Describe array behavior var myArray = [10,20,"test",true,99]; alert( myArray.length ); // What will be producted? Difference from string Array Methods? *Guides?*

.length in strings *shows length of string* .length in arrays *shows # of elements in array*. >> length = 5 >> max index = 4 >>> b/c base-0 [Array methods]: - Functions that belong to an object myArray.reverse(); myArray.sort(); >> makes alphabetical/numerical myArray.join() >> combine w/ commas and make into string myArray.pop() >> detaches last element and returns as a value myArray.push(123) >> add value onto array as another slot [Guides]: - *Mozzila Javascript references*

How add comments in Javascript?

// comment on single line /* multi line comment */

Review OOLs which languages

C++ C# Java Javascript Python

Describe creating a for loop

A more streamlined version of the while loop for ( var i = 1 ; i < 10 ; i ++ ) { code; } Tells where to start increment and how to increase by and to what point

Describe using the switch statement: Create a variable "Grade" and set it to Premium Make a code so that if grade is Regular, alert customer that "It's $3.15" Also if grade is Premium, alert customer that "It's $3.35" Also if grade is Diesel, alert customer that "It's $3.47" With the remainder just being alerted that "That's not a valid grade")

Ability to list several cases in one place The "breaks" are to *prevent code from skipping lines*, which it can do quotations are only used *in this example* since variables are strings not numerical *default* is its own recognized component of string, no need to set it >> *no break* under since its at the end

Describe addition and concatenation What is dominant? What if multiple different data? isNan? - what if opposite?

Addition for adding numericals 5 + 5 = 10 concatenation for adding strings "5" + "5" = 55 >> good for adding phone numbers >> always dominates if mixed If multipy different data will get *NaN* >> *not a number* [isNaN]: - *Checks* a variable to see if its *not number* >> good for checking if data correct if ( iNaN(myNumber) ) { alert( "It is not a number"); } If want to see if it is a number use *!NaN*

Make it so the brower says "Hello World" when you click its html Download the exercise file, and go into Chp 02 - First .html? .js?

[html] 1. when *double click* opens up in *browser* - any browser - to open, right click then *"open with (PC) notepad or (MAC) text edit"* >> if *cant see* "open with" then *open the software first* then open within. >>> make sure *search window is "all files"* >>>> If only see *rich text* (just normal sentences) then need to *change to plain text* - Not a programming language, but *markup language* >> not a program or process, just specifies formats and text content ** <script src="script.js"></script>** - tells the browser to open the javascript file - since no location pathway assumes same folder as the html file [Mac] - in properties, disable smart quotes (Under substitutions ) - tick "ignore rich text commands in html files* [js] - stands for javascript ** alert("Hello world");** save file reopen html

Scope of variables w/ functions? How get around?

creating variables within a function, it only exists in that function, not in upper code - There are *"local variables"* If want to get around this then define it before function, then when in your function, just say x = 5

What are conditional statements Condition notations? Parentheses vs brackets vs braces?

if ( condition ) { code; } Can be in different styles for braces, insignificant =================== [Condition] if *condition* is *true*, (e.g. a < 50) >> must be able to be *true or false* >> if check for *exact* value need (e.g. a *==* 50) >>> to see if a is 50 >>> *cant use single =*, because that sets values, not checks values >>>> for *not equal* use *!=* [Execution Code] then *execute code* in *between braces* - Braces form *code blocks* that *group code* together >> code inside is *indented* (for readability) [Symbols] P: ( ) Brackets: [ ] Braces: {} >> always found in *pairs* (if open must close)

Signs of a C programming language?

if have weird } { ] [ ;

Describe inputs and outputs Download the exercise file, and go into Chp 02 - Input Open blank script Requesting inputs: - How would you code to acquire a name then greet that person? Issues?

the core of programming Different languages favor different inputs and outputs Output could be as simple as an alert box ============= [Requesting inputs] *var name = prompt("What is your name?");* - Introducing *variable called "name"* - Saying to *prompt (alert) user* with the text "__", and wait for response - Their *response will be stored as their name value* *alert("Hello, " + name);* - will *alert* with text "__" - adding *name variable* >> looks like it is *greeting* user [Issues] Non-specific = *can write* anything as name...

Create a variable with the values of 5, a million, negative 500, What's the difference between: var b = 123; and var c = "123";

var a; a = 5; a = 1000000; a = -500; ^^ No commas, very *fluid* [Difference] var b is stored as *numerical*, var c is stored as a *string* of characters

What are integrated develpment environments (IDE)

They are large software (like *SPSS and SAS*)

Describe memory management across languages Memory leak? Dangling pointer? Manual vs Reference Counter vs Garbage Collection

(1) Allocate memory - Pick pick specific area want to store (2) Create object (3) Use object (4) Free memory [Memory leak]: - When you forget to free memory from an object [Dangling pointer]: - When think object bound to memory but isnt, so when call upon object, no value More for low-level langauges (C C++ etc.) ============================= [Manual] - Crude work to specify RAM and computer memory stuff - Resource intensive and slow [Reference COunter]: - Keep counter of who is using object, system automatically frees memory when counter reaches 0 [Garbage collection]: - See's whch apps are using which memory, and cleans up in groups - Non-individual levels

Describe debugging - tracing

(1) Create a simple alert - Put alert in different levels of function to see if being read Highest level = alert for opening page - shows code is being referred to Within a function = shows function being called upon - If event function, be sure to do event and see if alert comes up *Trace: Injecting messages in code to see where broken* - (just about to start function X) - (just about to start function Y) - (just about to start function Z) >> see which alert is missing to identify break

Describe arrays Creating arrays? - Inputting? - Accessing? Shorthand?

*Collection of values* wrapped up and given a name Good to *keep data that belongs together* all wrapped up Is *comprised of elements*, which have *identifiers* to tell *where it is* in the array - *zero-based* >> *first element* is on position *0* - Can add into and retrieve from arrays using [Creating arrays]: var multipleValues = [ ]; // creates array that can hold multiple values multiplevalues[0] = 50; // sets element at position 0 to be 50 (inputting) alert(multipleValues[2]); // accessing whatever is stored in [2] position in array [Shorthand]: var mutipleValues = [ 50,60,"hello" ]; >> 0 is now 50 >> 1 is now 60 >> 2 is now "hello"

Describe breaking code apart What are functions? How create function - Create an empty function >> call upon it Where to declare functions?

*Functions wrap up lines of code and give it a name* >> able to be *called upon* and treated as *functional unit* >> can then treat function rather than rewrite all lines of code e.g. code for calculation is tedious, write it once, call it a function, then later just use the function name [Creating functions] function myFunction( ) { code; } // sometime later myFunction ( ); [Declaring functions]:

What are statements How does programming language affect this

*Sentences that convey one step* Language affects *punctuation and sentence structure* >> some end with ; >> some all caps >> some all lowercase with no ; >>> etc....

Describe writing a while statement Issues with the following loop? How fix? var amount = 0 var i = 1; while (i < 10 ) { amount = amount + 100; i++; } alert("The value is: " + amount);

// set up index var i = 1; //check the condition while (i < 10 ) { amount = amount + 100; //increment the index i++; } >> *essentially adds to the amount, using i as an increment for how many loops we want* ======================================= Does not make it to 1000, makes it to 900. - Need <= 10 - Or set i = 0 Called *off by 1 errors*

Describe setting parameteres and arguments 1. Create a function that can combine two values and give you the result (a) test with function on 5 and 10 What's the difference between parameters and arguements? How about getting information back using returns - careful with placement

1. function addTwoNumbers(a,b) { var result = a + b; alert(result); } // here is the empty body of the function, it does things but has no info (a) addTwoNumbers(5,10); // here you're plugging values fora and b [Parameters and arguments]: - *Parameters* are what are *defined* in empty function (a,b) - *Arguments* are what are *called upon* in specific function (5,10) e.g. when say alert("Hello, world"); >> you are calling up the pre-build alert function and *passing in* the "Hello, world" *string argument* into it! [Pass information out of function] - Use *return* to get result of function >> make sure *last line of code* since following code not read - Good for setting variables to outputs of functions function addTwoNumbers(a,b) { var result = a + b; return result; } var x = addTwoNumbers(5,10) alert(x); we did this when we did the " var name = prompt("What is your name?");

Examples of languages? Why are there different languages? - Why cant we just code the computer itself?

C C++ C# Java Javascript Python etc... All computers speak *machine code* - Possible to write machine code; but *we dont*, so we use a language to manipulate machine code (*bridge gap*) >> too long too tedious for no outcome so we dont

Objective-C

C language with extra object orientation modifications What iOS a - nd Mac use!!! [Notation]: - Curly braces - Main section where starts - 'NS' everywhere from old code - Square brackets - @infront of strings - Link to libraries of codes [Getting started]: - Xcode >> for building apps - developer.apple.com

Java

C-based language - Main function where program finds starting point Similar notation (; curly brackets) [Getting started]: - Eclipse, Netbeans >> compilers java.sun.com

Describe understanding error messages

Find the error console in the browser, errors in your code will pop up in here - are specific >> tells what line and what error

Describe splitting code into different files

For big projects can split code amongst programmers for javascript, can tell the browser to load the files in specific order

Why javascript? Relation to java? Properties

GOod for fundamentals - Very *popular and practical* - For *webpages* >> intentionally limited *No relation to java* in any way Interpretted language by browser *Operating system runs web browser runs webpage runs javascript* *Case sensitive* *C-based*, so easier to jump into other C-based languagse

High level vs low level languages?

High = away from hardware code (Machine code) >> e.g. Jaca, C++, python etc. vv for low

C Notation? Getting started?

Influence lots of languages Very slow and energy intensive [Notation]: - Same bracket use - same comment format - ends with semi-colon - 'int' as 'var' - starts around 'main' function - has links to coding libraries [Getting started]: - Compiler >> GCC >>> open source compilers - gcc.gnu.org - "K&R" book

Describe event driven programming What are events Event handles? Examples?

Right now code runs and finishes, but what if requires user input? - mouse move - mouse click - resize page - keypress Need to run functions when specific events happen Event Handlers - *Function waiting for an event to happen* - onload - onclick - onmouseover e.g. window.onload = - Load even of window object e.g. myelement.onclick = function( ) { //code }; >> still have semicolon because its not just a function, its an actual statement ==== Image makes it go back to another document and grab headline code Then made it so when click the headline it changes text

What are algorithms? Bubble sort? There are like 20+ good sorting algorithms Why is comp sci considered an art?

Series of steps to accomplish a task >> part of a program >> small procedure [Bubble sort]: - Go through pairs of numbers in list and flip if left > right - Repeat through list until in chronological order [Comp Sci]: - Because most efficient algorithms are often complex - Can give 10 programmers a task and all write different code

Describe regular expressions How to tell if string has the world hello in it? Use REs How can make patterns? Complex expressions?

Strange sequences that match patterns Two parts: (1) Create expression to describe pattern of interest (2) Apply expression to look for a match ============ (1) var myRE = /hello/; // the *slashes mark the string* as a regular expression, highlighting the string as a pattern *for later use* var myString = "Does this sentence have the word hello in it?"; if ( mrRE.test(myString) ){ alert("yes"); } // *test function searches string for the regular expression defined in the first line of code * [Creating patterns]: /*^*hello/; >> hello at *start* /hello*$*/; >> hello at *end* /hel*+*o/; >> hello. helllo, hel*llllllllll*o|" /hel*o/; >> heo, helo, hello, helllo..etc, /hel*?*o/; >> *zero* or *one* >> heo, helo /hello*|*goodbye/; >> either or /he*..*o/; >> *. can be any character* /*\w*ello/; >> *alphanumeric or _* /*\b*hello/; >> word boundary /*[*crnld*]*ope/; >> [..] range of chars >>> cope rope nope lope dope [ Complex expressions] - Look online for ones you want (email or phone # etc.)

Describe finding patterns in strings Length Cases Comparisons - Equality Find words Slice Comparisons - greater/less - case sensitivity?

String methods - functions that belong to a string e.g. var phase = "This is a simple phrase"; alert( phrase.length ); >> gives us *length* of phrase alert( phrase.toUpperCase() ); >> *converts* phrase to uppercase [Comparisons - Equality]: var str1 = "Hello"; var str2 = "hello"; // *not equal* because *case sentitive* if ( str1.toLowerCase () == str2.toLowerCase () ) { alert("Yes, equal"); } // converts to same case to see if is the same word >>> use only if dont care about cases (case insensitive) [Find words]: var phrase = "We want a groovy keyword."; var position = phrase.indexOf("groovy"; // upper case O // asking where the word groovy begins in string *( 0-based)*, first character of string is *0* // if word not in string then = *-1* e.g. if ( phrase.indexOf("DDD") == -1 { alert("That word does not occur."); } // notifies if word is *missing* // can use *.lastIndexOf* to find last occurence of word [ Slice]: // to *obtain specific excerpt* of string var phrase = "Yet another phrase."; var segment = phrase.slice(6,11); // *cuts out and saves* string from 6-10 as "segment" [Comparisons - Greater/Less]: var str1 = "aardvark"; var str2 = "beluga"; if (str1 < str2 ) { // checks character-by-character in string, so a comes before b etc.. *Upper case letters considered less than lower case letters*

Describe using debuggers

Tools to notify errors - even complex errors Browsers have their versions Can pause and play reading at specific lines (break points) - Jump in and out of functions *Follow your code as it runs* Can also run line by line Can show you what variables are set to,