Learn Bootcamp From Zero

JavaScript Object is another way to structure data. Objects can store data in key-value pairs. Suppose we wanted to model a single person which will include name, age and city data. This is how we write the data in objects: var person = { name: "Marry", age: 15, city: "New York" }; Every item in this object is a key value pair. It is important to note that objects don't have any built in order.  No property comes first or second. It doesn't matter how we declared them in what order. They are all treated the same. Retrieving Data There are two choices to retrieving data:bracket and dot notation. console.log (person["name"]) ; //bracket console.log (person.name) ; // dot notation Both ways will give the same value which we want to call. The dot notation seems simpler than bracket. There are three main differences between two notations: You can't use dot notation if the property starts with a number For example: s...

After I learned JavaScript loop and array, it's time to implement those codes into a simple project and see how it works. The course instructor leads us to create a small To Do List APP. Basically, when we open the web page, it will pop up a question:"What would you like to do?". Then we enter "new" and add a todo. If we want to check our todo list, we need to enter "list", so we can see our todos are stored in the console. The question will ask you again and again until you enter "quit" to end it. We create a HTML page and link to a separate JS file.  In the JS file, we start to write a  todos array . We leave the empty[] since we will enter data through the pop up question window.  Then, we create the pop up window by writing a prompt("What would you like to do?" So when we open the web page, it will pop up this question to ask you to enter your todos. Next, we use while loop to let the site keep ask...

Array iteration refers to iterating over a list or an array. Basically, it loops through that array and do something to each item or with each item. Use For Loop We use for loop to loop over an array. In order to do that, we need to make use of the array's length property. For example, if we want to print out each item from an array, we need to recall the index of each item. In this case, we want to print out each letter from the array, so we have to type the code for times. It is repeating a lot. Image we have hundred or thousands data and print it all out, it will drive us crazy. Therefore, we use a loop to help automate this process because what we are doing here is the same operation. Using for loop can save our time and make the code clean.  var letters = ["a", "b", "c", "d"] for(var i = 0; i < letters.length; i++) { console.log(color[i]); } In the for loop, we have our variable i start with 0 because that ...

Arrays come with many built-in methods, and I just learn six most simple methods that can make our life easier. Push We use push to add to the end of an array. For example, if I want to add another letter at the end of array, instead of write letters[4],  I can write: Image an array contains 100+ data, we don't have to count index every time we want to add a new data in the array. Pop We use pop to remove the last item in an array. If I want to remove the letter "D" from the array, I can write: Unshift We use unshift to add a new item to the front of an array. Instead of add letter "E" at the end of the array, I can add "E" in front of the "A". Shift We use shift to remove the first item in an array. If I want to remove the letter "A" in the array, I can write: IndexOf() We use indexOf() to find the index of an item in an array. If I want to find the index of letter "C", I can writ...

Array is our first data structure. An array lets us to group data in a list.   For example, we have a group letters A, B, C, D. var letter = "A"; var letter = "B"; var letter = "C"; var letter = "D"; Those letter variables repeat too much, and we don't want it. Rather than having four separate variables, we can write one variable and inside of it we store those four variables. var letters = ["A", "B", "C", "D"];   //this is array (// means comment) Array are indexed starting at 0. Every slot has a corresponding number. "A" (0), "B" (1), "C" (2), and "D" (3). We can use those indices to retrieve data. If we want to get "A" out of the array, we need to know the index of  "A" which is 0. We can use the indices to update array value. If I want to change the "A" to "M", I can just write like this...

In the last post, I shared the argument note. The arguments allow the function take inputs but not send back any output value. The return keyword allows a function to send back an output value. If we use the return keyword, it means that we can capture the value that is coming back out of the function. For example: function square(x) { return x * x; } When I enter the function in the console and call square(4), it will give us a return sign "<" in front of 16. However, in the argument function, the result only print out the value. The return value is undefined. The other thing we can do with the return keyword is save it in a variable such as: var result = square(100) result So this function call square of 100 is evaluated that return 10000 which is then stored in result. Function Declaration V.S. Function Expression Function Declaration: function sayHi() { console.log ("Hello!"); } Function Expression: v...

Most time we want to write functions that take inputs. function doSomething(input) { console.log(run some code); } This syntax to say that a function is expecting something to be passed in that it's expecting an argument looks like this rather than an empty "()". For example, if we want to calculate square, we can write it in function. function square(num) { console.log (num * num); } Here, we give a name "num" for the input, but you can give any name you want. Then we  give a number in the "()", then call the square(10), so we get the result 100. It also works for the string. For example, if we want to say hello to someone, we can use function. function sayHello(name) { console.log ("Hello" + name + "!"); } We call sayHello ("Tom"), it gives us Hello Tom! Functions can have as many arguments as needed. For example, if we want to calculate area, we can give two inputs: length and width, an...

JavaScript Function is a fundamental building block. Functions let us wrap bits of code up into Resuable packages. Declare a function first: function doSomething() { console.log(""); } We define a block of code and give it a name so that makes the function. Then we have to run it later. Then call it: doSomething(); doSomething(); doSomething(); For example: We write a function named sayHi, and we want to print "Hello" when we run the code. When I call sayHi() and enter, the code runs and gives us "Hello". However, if I only call sayHi without (), the result would be different. It will only gives us the function back. It is really important that there is a difference between referring a function and executing it. Therefore, we have to have those "()" there which will go get the value of this function and then it's going to run the function. How to write a function to repeat a song? We can write function n...

For loop is another way of repeating code. for( initial; condition; step) { //run some code } As you see, for loop includes three part: The first part is the initialize where we declare a variable and set it to some initial value. The second part is condition which is when this loop should keep running. The last part is step , so what do we do at the end of every iteration. I would like to share two examples from the course: Print numbers from 0 to 5 with a for loop I write the for loop in the console. There are three part in the for loop:  1. Initial: count start from 0 (count = 0)  2. Condition: run the code until the count is less than 6 ( count < 6) 3. Step: count incrementally The result list 0 to 5. Print each character in a string with a for loop 1. Initial: list the character from the beginning (start 0)  2. Condition: run the code until it end by the string length  3. Step: list all the characters ...

According to the course, loops refer to DRY (Don't Repeat Yourself) . In the other word, we want to keep our code as DRY as possible. Loops offer a easy way to run the code repeatedly and save us a lot time. While Loops While loops is one kind of loops. It allows to repeat code While a condition is true . while (someCondition) { //run some code } While loops is very similar to an if statement, except it repeats a given code block instead of just running it once. For example: var num = 1; while(num <= 10) {           console.log(num);           num += 2; } The example assumes a number is equal to 1 and gives a condition we run the (num +2) and count how many result are less and equal than 10. When I run the loop in the console, the result: The (num + 2) result less than 10 are 1, 3, 5, 7, 9. And it ends by 11 since 11 is greater than 10. Infinite loops occur when the terminating condition in a loop is nev...

So far I have learned some basic JavaScript language such as conditional keywords, logical operators, and built-in methods. Today, we will build a simple guessing number game by applying those JS basic language. Basically, the game is ask user to guess a number, if the number is match to the secret number, they win the game. If not, they will have to try again. Step One: Create a simple HTML page and Link to the JS file I start to build a simple HTML page and give a title "Guessing Game" for it. Then, I create a separate JS file named "game.js", and link to the HTML page. Step Two: Create Secret Number and Prompt Question In the JS file, I start to create a secretNumber which is 6. Six is a lucky number in China which means everything goes well as you wish. Then I ask a prompt question:"Guess A Number", so user will enter a number. Step Three: If users enter the right number, they will receive a message It is conditional, so I u...

JavaScript conditionals is how you add logic to your programming and help you make decisions with code. For example, when we shop online and ready to pay our items, we will enter our credit card number, if our information is correct, it will match the code, and we will receive a confirmation message. If our credit card information is wrong, the code will send us an error message. There are three JS conditional keywords: If, Else If, and Else. How do we use those conditional keywords in JavaScript? If For example, if the website wants to send an message about your age is younger than 18, you can't enter the bar. if (age < 18) { console.log("Sorry, you are not old enough to enter the venue."); } Else If If your age is older than 18 but younger than 21, you can enter the bar but can not drink. else if (age < 21) { console.log("You can enter, but can not drink."); } Else If your age is older than 21, feel free to drink. ...