Codecademy - Javascript

这是一篇关于Codecademy - Javascript的思维导图，主要内容有Variables、Functions、lf statement、Switch statement、Loops等。

Codecademy - Javascript

• This mindmap is offered to you by drielingh. http://www.drielingh.nl Information is collected from the Codecademy Javascript library and during the online course. http://www.codecademy.com
• Variables
  • to store values
  • case sensitive
  • start with
    • letter
    • underscore _
    • dollar sign $
  • syntax
    • var name = value;
  • Types of variables
    • Numbers
      • multiply
        • *
      • divide
        • /
      • add
        • +
      • subtract
        • -
      • modulus
        • %
        • syntax
          • number1 % number2
        • returns the remainder
          • 9 % 2 // returns 4
    • Strings
      • syntax
        • "string of text"
        • 'string of text'
      • concatenation
        • string1 + string2
      • replace
        • "original string".replace("original", "replaced"); // returns "replaced string"
      • toUpperCase, to LowerCase
        • "my name".toUpperCase(); // Returns "MY NAME"
        • "MY NAME".toLowerCase(); // Returns "my name"
      • substring
        • returns the sequence of characters between to indices within a string
        • "adventures".substring(2,9); // Returns "venture"
    • Booleans
      • syntax
        • true
        • false
      • logical operators
        • AND &&
          • expression1 && expression2
          • true if both expressions are true
        • OR ||
          • expression3 || expression4
          • true if one of the expressions is true or both are true
        • negation !
          • !expression5
          • returns the boolean that is the opposite of expression5
      • comparison operators
        • equal
          • ===
          • Returns true if the operands are equal
        • not equal
          • !===
          • Returns true if the operands are not equal
        • greater than
          • >
          • Returns true if the first operand is greater than the second operand
        • greater than or equal
          • >=
          • Returns true if the first operand is greater than or equal to the second operand
        • less than
          • <
          • Returns true if the first operand is less than the second operand
        • less than or equal
          • <=
          • Returns true if the first operand is less than or equal to the second operand
• Functions
  • syntax
    • var name = function (parameter1, parameter2, ..., parameterN) { statement1; statement2; . . . statementN; };
  • calling a function
    • syntax
      • name(argument1, argument2, ..., argumentN);
• If statement
  • syntax
    • if (condition) { statement1; statement2; . . . statementN; }
    • boolean condition
  • if ... else
    • if (condition) { statement1; } else { statement2; }
  • ... else if ...
    • if (condition1) { statement1; } else if (condition2) { statement2; } else { statement3; }
• Switch statement
  • syntax
    • switch (expression) { case label1: statements1; break; case label2: statements2; break; . . . case labelN: statementsN; break; default: statementsX; break; }
  • Switch statements are used to check for different values of a variable (or an expression) to control the flow of the program.
  • example
    • var holiday = prompt("Where do you go on holiday?"); switch(holiday){ case 'Italy': console.log("It's always nice wether in" + " " + holiday); break; case 'Germany': console.log("Do you like bratwurst?"); break; case 'Spain': console.log("They speak Spanish"); break; default: console.log("Have a nice holiday!"); break; }
• Loops
  • For loops
    • syntax
      • for ([initialization]; [condition]; [increment]) { statement1; statement2; . . . statementN; }
      • initialization
        • An expression that is executed before the loop starts. Used to initialize a counter variable such as i.
      • condition
        • An expression that is executed before each loop iteration. If the result is true the loop will continue otherwise it will stop.
      • increment
        • An expression used to change the counter variable at the end of each loop (often a postfix increment).
    • example
      • for (var time = 10; time > 10; time--) { console.log("Launching rocket in T minus " + time); console.log("DON'T PANIC"); }
  • While loops
    • syntax
      • while (condition) { statement1; statement2; . . . statementN; }
      • condition
        • An expression that is executed before each loop iteration. If the result is true, the loop will continue. Otherwise it will stop.
  • Do while loops
    • syntax
      • do { statement1; statement2; . . . statementN; } while (condition);
      • condition
        • An expression that is executed during each loop iteration. If the result is true, the loop will continue. Otherwise, it will stop. The condition is only checked after the first run loop.
• This mind map was downloaded from www.biggerplate.com
  • Find more mind maps in our library
  • Follow us on Twitter
  • Find us on Facebook
• Objects
  • An object is a list-like construct that has properties which corresponds to JavaScript values, variables, or other objects.
  • syntax
    • { "property 1": value1, property2: value2, number: value3 }
  • property access
    • name1[string] name2.identifier
    • name = object variable name
    • string = any valid string or a variable referencing a string
    • identifier = any valid JavaScript variable name
  • example
    • var obj = { name: "Bob", married: true, "mother's name": "Alice", "year of birth": 1987, getAge: function () { return 2012 - obj["year of birth"]; }, 1: 'one' }; obj['name']; // 'Bob' obj.name; // 'Bob' obj.getAge(); // 24
  • example
    • var friends = new Object() friends.bill = { firstName: "Bill", lastName: "Balloon", number: "0307507222" }; friends.steve = { firstName: "Steve", lastName: "Rocker", number: "0301111111" }; var list = function(){ for (var friend in friends){ console.log(friend); } }; list(friends);
  • object constructor (example)
    • function Person(name,age) { this.name = name; this.age = age; } // Let's make bob and susan again, using our constructor var bob = new Person("Bob Smith", 30); var susan = new Person("Susan Jordan", 25); // help us make george, whose name is "George Washington" and age is 275 var george = new Person("George Washington", 275);
  • .hasOwnProperty (example)
    • var suitcase = { shirt: "Hawaiian" }; if(suitcase.hasOwnProperty('shorts') === true){ console.log(suitcase.shorts); } else { suitcase.shorts = "Long trowsers"; console.log(suitcase.shorts); }
• Array
  • special type of object
  • ordered list of JavaScript values
  • syntax
    • [value1, value2, ..., valueN]
  • accessing array elements
    • syntax
      • name[index]
      • index
        • The 0-based index of the element in the array. Note that the position of an element in an array is determined by the number of elements to the left of it. As a result, the first element in an array is at index 0.
      • example
        • var primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37]; primes[0]; // 2 primes[3]; // 7
  • multi-dimensional arrays
  • example
    • // Our person constructor function Person (name, age) { this.name = name; this.age = age; } // Now we can make an array of people var family = new Array(); family[0] = new Person("alice", 40); family[1] = new Person("bob", 42); family[2] = new Person("michelle", 8); // add the last family member, "timmy", who is 6 years old family[3] = new Person("timmy", 6);
  • example
    • var bob = { firstName: "Bob", lastName: "Jones", phoneNumber: "[phone]", email: "[e-mail]" }; var mary = { firstName: "Mary", lastName: "Johnson", phoneNumber: "[phone]", email: "[e-mail]" }; var contacts = [bob, mary]; function printPerson(person) { console.log(person.firstName + " " + person.lastName); } function list() { var contactsLength = contacts.length; for (var i = 0; i printPerson(contacts[i]); } } /*Create a search function then call it passing "Jones"*/ var search = function(lastName){ var contactsLength = contacts.length; for(var j = 0; j if(contacts[j].lastName ===lastName){ printPerson(contacts[j]); } } }; search("Jones");
• Math
  • object that contains a library of math function
  • random
    • Math.random()
    • returns number between 0 and 1
  • floor
    • Math.floor(expression)
    • returns the largest integer less than or equal to a number
• Popup boxes
  • alert
    • alert(message);
  • prompt
    • prompt(message);
    • example
      • var name = prompt("enter your name:");
  • confirm
    • confirm(message);
• Object Oriented Programming
  • Class
    • syntax
      • var ClassName = function (parameter1, parameter2, ..., parameterN) { this.property1 = parameter1; this.property2 = expression; };
      • ClassName
        • The name of the new class. By convention, class names are always uppercase.
      • parameter1..N
        • Parameters passed in when the class is created. This is generally used to assign a property value. Parameters are optional.
      • this
        • Refers to the class instance object being created.
      • property1
        • A property or "attribute" of the class. This can be either an simple value or a function. Can be initialized with default values or values passed in through a parameter.
      • property2
        • An example of a property that has a default value (in this case its the result of an expression) that is not the value of a parameter.
    • example
      • var Vegetable = function (color) { this.color = color; this.delicious = true; this.eat = function() { console.log("nom"); }; };
  • Class instance
    • syntax
      • var objName = new ClassName(argument1, argument2, ..., argumentN);
      • objName
        • New instances of the ClassName class. These are objects.
      • ClassName
        • The class we are creating an instance of.
      • argument1...N
        • Arguments we are passing into the class.
    • example
      • var broccoli = new Vegetable("green"); console.log("Broccoli is " + broccoli.color + "!"); // will print "Broccoli is green!"
  • Class methods
    • syntax
      • ClassName.prototype.methodName = function (parameter1, parameter2, ... paramaterN) { statement1 . . statementN };
      • ClassName
        • The class which the method is being added to.
      • methodName
        • The name of the method we're adding.
      • paramater1...N
        • The method parameters.
    • example
      • var Person = function () { this.job = "Unemployed"; }; Person.prototype.getJob = function() { return this.job; }; var Bob = new Person(); Bob.getJob(); // 'Unemployed'
  • Inheritance
    • allows one class to gain properties from another class
    • syntax
      • SubClass.prototype = new SuperClass();
      • SubClass
        • The class that receives the inheritance, the child.
      • SuperClass
        • The class that gives the inheritance, the parent.
    • example
      • var PoliceOfficer = function (age) { this.job = "Police Officer"; this.age = age; }; PoliceOfficer.prototype = new Person(); PoliceOfficer.prototype.retire = function () { if (this.age > 66) { this.retired = true; } else { this.retired = false; } return this.retired; }; var Alice = new PoliceOfficer(43); Alice.getJob(); // 'Police Officer' Alice.retire(); // false
  • private objects (example)
    • function Person(first,last,age) { this.firstname = first; this.lastname = last; this.age = age; var bankBalance = 7500; //private variable var returnBalance = function() { //private method return bankBalance; }; // create the new function here this.askTeller = function(){ return returnBalance; }; } var john = new Person('John','Smith',30); console.log(john.returnBalance); var myBalanceMethod = john.askTeller(); var myBalance = myBalanceMethod(); console.log(myBalance);
  • example
    • var cashRegister = { total:0, lastTransactionAmount:0, //Dont forget to add your property add: function(itemCost) { this.total += itemCost; this.lastTransactionAmount = itemCost; }, scan: function(item,quantity) { switch (item) { case "eggs": this.add(0.98 * quantity); break; case "milk": this.add(1.23 * quantity); break; case "magazine": this.add(4.99 * quantity); break; case "chocolate": this.add(0.45 * quantity); break; } return true; }, //Add the voidLastTransaction Method here voidLastTransaction: function(item, quantity) { this.total -= this.lastTransactionAmount; } }; cashRegister.scan('eggs',1); cashRegister.scan('milk',1); cashRegister.scan('magazine',1); cashRegister.scan('chocolate',4); //Void the last transaction and then add 3 instead cashRegister.voidLastTransaction(); cashRegister.scan('chocolate',3); //Show the total bill console.log('Your bill is '+cashRegister.total);