Beginning JavaScript

Dette undervisningsmateriale tager udgangspunkt I Semmy Purewals Online kursus "Beginning JavaScript" som er udgivet på SafariBooks Online.

Det er meningen af du skal lave en fork af dette projekt, som er din egen.

Denne fork, din egen kopi af github-projektet, skal du clone, og så lave commit, og push til GitHub, så dine opgave besvarelser ligger der.

Kursuet består af nogle videoer hvor Semmy gennemgår dele af javascript sproget og de man skal vide for at løse de opgaver der hører til hvert kapitel. Opgaverne i kapitlerne er både nogle øvelser du bare skal udføre i en browser (debug viduets console) og nogle opgaver det skal løses ved at skrive kode i en editor, f.eks Brackets eller WebStorm. Til opgaverne hører der et testscript, som du kører i browseren til at afprøve dit program. Efter hånden som din program besvarer opgaven bedre og bedre, bliver testen også mere og mere "rigtig".

Selve vidoerne må du spørge din lærer om at give dig adgang til at se.

Særligt om at bruge Node.js

Kombinationen af Visual Studio Code og node.js giver et lækkert workflow, men kræver lidt tilpasning. Se [[README_nodejs.md]]

Indhold

meta

Kursusbeskrivelse

• 1 Meta - Overview 00:04:16
• 2 Meta - Using these Videos 00:03:11

basics

• 3 Basics - Working with the Browser and a Text Editor 00:03:42

variables

Chapter 01

• overview
  • 4 Variables - Overview 00:05:51
• declaring variables
• defining variables
• manipulating values via variables
  • 5 Variables - Working with String Expressions 00:04:04
• non-string variables
  • 6 Variables - Working with Number Expressions 00:07:03
• re-assigning variables

practice

• 7 Variables - Summary & Practice Overview 00:01:49

Ingen test, men øvelser 1-9 nederst i readme.md.

functions

Chapter 02

• overview
• defining a function
• calling a function
  • 8 Functions - Defining a Function & Calling a Function 00:15:26
• variable scope in functions
• example with numbers
• example with strings
  • 9 Functions - Scope & Examples 00:13:25

practice

• 10 Functions - Summary & Practice Overview 00:04:07

• add
• totalCost
• cardString
• openTag
• closeTag
• toTagString

• tests
  Kør test

Se løsningerne

Ok. Der er løsninger med i pakken.

Du kan se dem på den branch der hedder solutions. Lad nu vær' med bare at læse og skrive af. Prøv selv at løse opgaven. Hvis det ikke virker, så spørg en anden elev, spørg en lærer. Og, prøv så en gang til. Hvis det stadig ikke virker, så kan du kigge på løsnigerne i solutions-branch'en. Prøv bare at kigge på løsningen, og prøv at forstå hvordan det virker, og skriv det så selv bagefter. Husk at det er ØVELSE der gør dig dygtig til programmering og IT. I sidste ende er jeg, din lærer, der jo, til at hjælpe.

• 11 Accessing Solutions to the Practice Problems 00:01:33

types

Chapter 03

• overview

• 12 Types - Overview 00:01:37

• the typeof function

• 13 Types - The typeof Operator 00:08:40

• number types and arithmetic expressions

• 14 Types - Numbers and Arithmetic Expressions 00:10:30

• extending the number operations with Math
• string types and built-in methods

• 15 Types - Strings 00:10:35

• boolean types and boolean expressions

• 16 Types - Boolean Types and Boolean Expressions 00:08:08
• 17 Types - Complex Boolean Expressions 00:09:09

• creating functions to test types

• 18 Types - Functions that Test Types 00:09:25

practice

• 19 Types - Summary & Practice Overview 00:05:24

Øvelse 1 og 2 nederst i readme.md, og 6 opgaver i practice.js.

• isDivisibleBy3
• celsToFahr
• fahrToCels
• randUpTo
• randBetween
• isSuit
• isRank
• isCard
• isCapitalized
• getHTMLText
• isHTMLElement

• tests Kør test

conditionals (if-statements)

Chapter 04

• overview
• if-statements
• else clauses in if-statements

• 20 Conditionals - if-statements & else-clauses 00:14:19
• 21 Conditionals - Conditionals in Functions 00:09:35

• if-else if and nested if statements

• 22 Conditionals - if-else-if & nested if-statements 00:14:59

• writing robust functions (throwing errors on types)

• 23 Conditionals - Writing Robust Functions 00:04:15

practice

• 24 Conditionals - Summary & Practice Overview 00:02:08

  • passwordStrength
  • isLeapYear
  • firstInDictionary
  • getTagName
  • improveTweet
  • isQuestion
  • magic8Ball
  • interjectAt
  • randomInterject

• tests
  Kør test

loops

Chapter 05

• overview
• while-loops as generalizations of if-statements
• for-loops

• 25 Loops - while-loops and for-loops 00:12:12

• calculating properties using a loop

• 26 Loops - Using Loops in Functions 00:07:09

• transforming strings with for-loops

• 27 Loops - Transforming Strings with Loops 00:07:56

• breaking out of a loop

• 28 Loops - Breaking Out of a Loop 00:08:32

• iterating backwards

• 29 Loops - Iterating Backwards! 00:03:37

practice

• 30 Loops - Summary & Practice Overview 00:02:13

• isVowel
• isLowerCaseLetter
• sumUpTo
• sumAToB
• countVowels
• reverseString
• isPrime
• sumPrimesUpTo
• sumOfFirstNPrimes
• removeNonLetters
• isPalindrome

• tests Kør test

arrays

Chapter 06

• overview
• defining an array
• accessing elements of an array
• mutating an array
• using variables for indices
  • 31 Arrays - Overview & Basic Operations 00:12:12
• strings as special arrays
  • 32 Arrays - Similarities to Strings 00:05:16
• examples
  • 33 Arrays - More Examples 00:14:51
  • 34 Arrays - Array Types 00:06:14
• practice

• 35 Arrays - Summary & Practice Overview 00:03:08

• containsTwice
• containsNTimes
• atLeastOneEven
• allStrings
• containsAnyTwice
• getValuesAppearingTwice
• range
• mapToTags
• filterToLol

• tests Kør test

array methods

Chapter 07

• overview
• forEach

• 36 Array Iterators - forEach 00:07:45

• map

• 37 Array Iterators - Map 00:10:13

• chaining methods that return arrays

• 38 Array Iterators - Chaining 00:05:41

• filter

• 39 Array Iterators - Filter 00:06:07

• some and every

• 40 Array Iterators - Some and Every 00:05:10

• reduce

• 41 Array Iterators - Reduce 00:13:20

• converting between strings and arrays

• 42 Array Iterators - Converting Between Strings and Arrays 00:05:11

practice

• 43 Array Iterators - Summary & Practice Overview 00:05:22

• reverse
• flatten
• sumOfMultiplesOf3And5
• atLeastOneVowel
• longestAwesomeTweet
• elementsToContent
• randomArray
• randomElements

Nederst i 07-array-iterators/readme.md er der ti opgaver hvor du skal bruge array-funktionerne på rigtige, virkelige, statistiske data:

• 1. How many baby names start with the letter 'z'?
• 2. How many baby names have the letter 'z' in them anywhere?
• 3. Create a new array that contains all of the names containing a 'w' with the first letter upper-case.
• 4. Do all of the names contain vowels?
• 5. Are there any names that have only two letters?
• 6. Is your name in the list?
• 7. Find the name that would come first alphabetically.
• 8. How many times does the letter 'z' appear in the list?
• 9. What is the maximum number of vowels in any name?
• 10. How many names have the maximum number of vowels that you found in the previous problem?

• tests Kør test

objects

Chapter 08

• overview
• defining an object
• accessing elements of an object
• mutating an object
• using variables for keys
  • 44 Objects - Overview & Basic Operations 00:11:36
• using array functions on objects
• arrays of objects
  • 45 Objects - The Relationship Between Objects and Arrays 00:04:28
• nested objects
  • 46 Objects - Complex Objects 00:03:41
  • 47 Objects - Checking Object Types 00:05:13

practice

• 48 Objects - Summary & Practice Overview 00:05:20

I practice.js finder du fire opgaver:

• isUser
• userToDiv
• userWithTweetsToDiv
• frequencies

Desuden er der to set øvelser mere (se også 08-objects/readme.md):

For this set of questions, open up the file called cards.html in Chrome, then open the developer console. There should be a variable defined called cards. You can confirm this by typing it at the console.

cards;
//=> Array[5000]

This contains 5000 card objects, randomly generated by a function that you'll write a little later. Interact with the console and answer the following questions.

• 1. Which suit appears the most frequently?
• 2. Which rank appears the most frequently?
• 3. How many times does the ace of spades appear? What about the two of clubs?
• 4. Can you think of a way to determine which card appears the most frequently?

Obviously, you can repeat the process above for all 52 combinations, but is there an automated way you can do it? By the end of all of the subsequent exercises, you should be able to do this using a single function.

For the next set of questions, open up the file tweets.html in Chrome, then open the developer console. There should be a variable defined called tweets. You can confirm this by typing it at the console.

tweets;
//=> Array[500]

This is an array that contains a random sample of 500 tweets from the afternoon of Sunday, October 26, 2014. Using our favorite array methods (map, filter, reduce, some, and every methods) answer the following questions.

• 5. Create an array that only contains only the tweet texts that contain the word "awesome" (upper or lower case). How many tweets are in the array?
• 6. How many of the tweets contains URLs in them? (You can just look for "http:" as a substring).
• 7. How many of the tweets are associated with users who have underscores ("_") in their screen name?
• 8. What is the screen name of the user with the most followers?
• 9. The "statuses_count" property of a user object contains the number of tweets that the user has tweeted. How many users have tweeted exactly 1 tweet? What are their screen names?
• 10. What is the average number of followers among those users associated with tweets that contain "lol" (case insensitive)?

• tests Kør test

poker simulation

Chapter 09

Start med at lave funktionerne i 09-poker-simulation/practice.js, så følg instruktionerne nederst i 09-poker-simulation/readme.md. Nemli' at åbne 09-poker-simulation/simulation.html og køre simulationen derfra.

• 49 Putting It All Together 00:08:49

Practice

• isSuit
• isRank
• isCard
• isDeck
• createDeck
• shuffle
• isHand
• dealHand
• isHigherThan
• isLowerThan
• highCard
• lowCard
• containsPair
• containsTwoPair
• containsThreeOfAKind
• containsStraight
• containsFlush
• containsFullHouse
• containsFourOfAKind
• containsStraightFlush
• containsRoyalFlush
• highestRank

• tests Kør test