Learn Bootcamp From Zero

After I learned some basic HTML, CSS and JavaScript, they are finally meet together. The DOM is Document Object Model, which is the interface between your JavaScript and HTML + CSS. The concept is that the browser turns every HTML tag into a JavaScript object that we can manipulate. Everything is stored inside of the document object. We interact with DOM to do things like: game, scrolling effects, drop-down menus, form validation, interactivity, or animations. The main DOM process is Select an element and then manipulate. How do we implement that? The document comes with a lot of methods for selecting elements. There are five most common methods we need to know: 1. document.getElementById() 2. document.getElementsByClassName() 3. document.getElementsByTagName() 4. document.querySelector() 5. document.querySelectorAll() All of them are started by document dot. And these five methods have all been added into the document object. Now I am going to create a simple HT...

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...

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...

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. ...

Boolean Logic: True & False Boolean is one of the five primitives. There are only two possible options for Boolean value: True or False. Boolean logic is simple writing statements that evaluate to be true or false. Then, we can combine those initial statements to create more complex statement that also evaluate to true or false. Comparison Operators Screenshot from Udemy Course Lecture Most of those operators are very easy to understand. I just want to mention two of them, which are "==" and "===". Those two operators are all equal sign, but they are different. According to the course, "==" performs type coercion which means that it takes two numbers (or strings or variables) and tries to turn them into a similar type so that we can compare them. In the meanwhile, "===" does not perform type coercion.  For example: var x = 5; x == "5" // true ("5" is a string. The "==" turns the string ...

Today the course assigned a simple JavaScript exercise: Here is my steps: Step One: Create a HTML page and link to the JavaScript File I create a simple HTML page and give a title "JS Stalker Exercise". Then, I link the HTML page to a new JS file named "stalker.js". Step Two: Enter variable data in the JS file In the JS file, I start to write three prompt messages which are asking for user's first name, last name and age. In order to print out user's full name and age in separate sentences, I set two console.log message. The only thing we need to pay attention is the spacing between each word.  The print sentence has one small space between each word : Your full name is X X. Therefore, in the console.log, we need to set the right space for each word. Step Three: Test the result When I open the page, it asks me three pop up questions in orders: After I answer each questions, I can see the print sentences in...

In the last post, I shared five primitive data types. Even though I could write some basic variables and do some math in the console, I don't see any action from the website.  How to let website take action? We will need to know three built-in methods: Alert It pops up a message to the user, and it alerts the user. Console.log What console.log will do is print something to the JavaScript console. Prompt Prompt is very useful for us because it lets us get input from a user. The second part of prompt is that we can store it in a variable. Now I am going to apply those three built-in methods in HTML, so you can see how they work. Firstly, I create a simple HTML page, and I only add the title. Then I add a <script> tag and link to a separate file named "script.js". I want my site to pop up a message when you open it. In the "script. js" file, I name my variable as "userName", and it equal to prompt("What is ...

JavaScript (JS) is a programming language which can add logic and interactivity to a page. If we treat HTML as a noun and treat CSS as a adjective in a sentence, we can treat JS as a verb which is the one to take action. Today, I learned five primitive datatypes about JS. Numbers Numbers are very simple, just like 4, 10, -29.etc It can do some math . For example we type a simple math in the console (open any web page on Google Chrome, right click and inspect the page, click "console" next to the "Element" bar): I type "4+26" and the result is calculated automatically. The JS follows the order of operations that all regular math follows as well. For example, (3+5)*8=8*8=64. Besides simple math, JS can also do modulo which is a reminder operator. It has "%" sign between two numbers. For example: The result shows when 10 divide 3, the reminder is 1 (3*3+1=10). Strings They can be text inside single or double quotes Fo...