diff --git a/_media/arithmetic-operators.png b/_media/arithmetic-operators.png new file mode 100644 index 0000000..dd8b44f Binary files /dev/null and b/_media/arithmetic-operators.png differ diff --git a/_media/browser-console.png b/_media/browser-console.png new file mode 100644 index 0000000..cf3e262 Binary files /dev/null and b/_media/browser-console.png differ diff --git a/_media/browser-inspect-element.png b/_media/browser-inspect-element.png new file mode 100644 index 0000000..44c6fc3 Binary files /dev/null and b/_media/browser-inspect-element.png differ diff --git a/_media/console-alert.png b/_media/console-alert.png new file mode 100644 index 0000000..2389bc7 Binary files /dev/null and b/_media/console-alert.png differ diff --git a/_media/console-log.png b/_media/console-log.png new file mode 100644 index 0000000..19b96d0 Binary files /dev/null and b/_media/console-log.png differ diff --git a/_media/logical-operators.png b/_media/logical-operators.png new file mode 100644 index 0000000..b75393e Binary files /dev/null and b/_media/logical-operators.png differ diff --git a/_media/string-replacement.png b/_media/string-replacement.png new file mode 100644 index 0000000..7a1964f Binary files /dev/null and b/_media/string-replacement.png differ diff --git a/_media/variable.png b/_media/variable.png new file mode 100644 index 0000000..de1c485 Binary files /dev/null and b/_media/variable.png differ diff --git a/_sidebar.md b/_sidebar.md index 5124fef..90d8af1 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -2,17 +2,23 @@ - [About Us](wwcodemanila/about.md) - [Study Groups](wwcodemanila/study_groups.md) -- Introduction - - [JavaScript Study Group](README.md) +- Web Fundamental Concepts + - [HTML, CSS, JavaScript: How They Work Together](contents/web/html_css_js.md) + - [A Recap of HTML and CSS](contents/web/html_css_recap.md) -- Basic Concepts - - [How to Read This Guide](contents/starter_pack_guide.md) - - Web Fundamentals - - [HTML, CSS, JavaScript: How They Work Together](contents/html_css_js.md) - - [A Recap of HTML and CSS](contents/html_css_recap.md) - - Introduction to JavaScript - - [Language Features](contents/js_language_features.md) - - [Examples From the Web](contents/js_examples_from_the_web.md) +- JavaScript Basics + - ["Hello, World!" Your First JS Code](contents/basics/hello_world.md) + - [JavaScript Code Structure](contents/basics/js_structure.md) + +- Data Types + - [Intro to Data Types and Variables](contents/data_types/overview_and_variables.md) + - [Data Types: Primitive Values](contents/data_types/primitives.md) + - [Data Types: Objects](contents/data_types/objects.md) + +- Operators + - [Logical Operators](contents/operators/logical.md) + - [Arithmetic Operators](contents/operators/arithmetic.md) + - [Comparison Operators](contents/operators/comparison.md) - Resources - [References](resources/references.md) diff --git a/contents/basics/hello_world.md b/contents/basics/hello_world.md new file mode 100644 index 0000000..cc2eddc --- /dev/null +++ b/contents/basics/hello_world.md @@ -0,0 +1,70 @@ +## Overview + +For this tutorial, we will walk you through on the fundamentals of JavaScript as a language. We'll focus on building on your knowledge of the core concepts of JavaScript. + +## Hello, World! + +We begin learning JavaScript with the best-selling introduction to programming: **"Hello, World!"**. This is usually the first ever exercise when learning a new programming language. This exercise simply lets you output the words "Hello, World!" in the language you're learning. + +Mentioned earlier in [HTML, CSS, JavaScript: How They Work Together](contents/web/html_css_js.md) is how JavaScript mostly deals with bringing interaction to our websites. As such, it seems fit that we use a web browser to run our first line of JS code. + +### Console + +Begin by opening your preferred web browser. In the screenshot guides, we used Google Chrome. + +Right click on anywhere in your web browser and select the option to "Inspect" or "Inspect Element". + +![](../../_media/browser-inspect-element.png "Google Chrome - Inspect") + +This will open the Inspector where you can see details about the web page you're currently viewing. Open the tab "Console". + +![](../../_media/browser-console.png "Google Chrome - Console") + +Then, write your JS code by entering the following line to the console: + +``` +console.log("Hello, World!"); +``` + +which should output something similar to what's shown below: + +![](../../_media/console-log.png "Console Log - Hello, World!") + +Now, let's look into what just happened. You just instructed your browser to print "Hello, World!" by placing this text inside the parenthesis for the function `console.log`. As its name suggests, it logs to the console whatever you want it to. + +### Alert + +Printing to the console is cool but normal visitors of a website won't really go to the trouble of checking "Inspect Element" to see what you logged in the console. However, you may have encountered an alert before. + +An alert is the pop up window that shows up on the top of your browser. The common reasons why this appears is to either + +1. warn you that what you're doing is not allowed or +2. confirm if you're sure you want to proceed with a certain action. + +To try this out, enter the following in the console: + +``` +alert("Hello, World!); +``` + +![](../../_media/console-alert.png "Alert - Hello, World!") + +## Exercises + +1. Try to see what happens when you change the text "Hello, World!". + +``` +console.log("I can print anything here!"); + +alert("This is a function call."); +``` + +2. What happens if you remove the quotation marks? + +3. Try printing numbers too! Did it work? + +## Wrap Up + +You just learned two different ways of printing "Hello, World!". `console.log` will come in handy later when debugging while `alert` can be used to show warnings to users of your site. + +More importantly though, you made a function call which we'll be learning more about later on. For now, it's a good observation to note that whatever we passed inside the parenthesis will be used by the function. diff --git a/contents/basics/js_structure.md b/contents/basics/js_structure.md new file mode 100644 index 0000000..9f0e057 --- /dev/null +++ b/contents/basics/js_structure.md @@ -0,0 +1 @@ +This page is still empty. We're still working on it! diff --git a/contents/data_types/objects.md b/contents/data_types/objects.md new file mode 100644 index 0000000..b68f883 --- /dev/null +++ b/contents/data_types/objects.md @@ -0,0 +1 @@ +This page is still empty, but it will cover Objects and Functions. Stay tuned! diff --git a/contents/data_types/overview_and_variables.md b/contents/data_types/overview_and_variables.md new file mode 100644 index 0000000..767b17a --- /dev/null +++ b/contents/data_types/overview_and_variables.md @@ -0,0 +1,45 @@ +## Overview + +In this section, we will give an overview of what data types are as well as a brief introduction to variables in JavaScript. + +## Data Types + +All values declared in JavaScript can be classified under a certain data type. + +Data types show us what kind of values we can use in our code as well as what kind of operations we can do on those values. They tell us the classifications and behavior of the different kinds of values that we can represent in our program. + +In JavaScript, almost all of the data types are **immutable**. This means they **cannot be modified or changed**. These kinds of data types are called **primitive values** or simply **primitives**. The exception to this are **objects (and functions)**, which can be modified. + +> As of writing this document, there are **9 data types** in defined in the ECMAScript standard. + +## Variables + +Before we learn about the different data types, let's take a look first into the concept of variables. + +A variable, like in Math, is used to represent something in our code. What is "something"? It could be any of the data types (which we'll learn more about later on). + +One common way to think about variables would be perhaps a box that you own and put values in. The usual way of declaring variables is using `let` followed by the name you want to call your variable. If you would like to assign a value to a variable, you use the `=` equals sign followed by the value you want to save to the variable you just declared. + +![](../../_media/variable.png "Variable Declaration") + +> Notice that there's a semicolon at the end of our variable declaration. We usually place semicolons (;) at the end of every line in JavaScript (except for code blocks). Although this isn't required and some developers choose to omit it from their code since JavaScript "assumes" where to place it if it's missing, we'll be consistently using semicolons for our examples. + +### Variable Names + +In general, there are two rules when it comes to naming your variables. + +1. You can only use a combination of letters (`a-z`, `A-Z`), numbers (`0-9`), and the symbols `$` and `_` for your variable name. +2. You cannot have a number as the first character of your variable name. + +Also, multi-word variable names are usually written in `camelCase` where the next words begin with a capital letter, but you may come across some code that uses the `snake_case` where words are separated by the underscore symbol. + +> When declaring variable names, we usually try to be as descriptive as possible to make our code readable. + +### Exercises + +Test out different variable names to check whether they are valid variable names or not. + +1. Try doing `let 1apple;` on the console and see what happens. Did it show an error? +2. Try out declaring a variable using your name `let ;`. For example, in my case, I did `let reg;`. Did it show an error? +3. Declare a variable using your first name and last name separated by a hyphen (`-`). +4. Declare a variable using your first name and last name separated by an underscore (`_`). \ No newline at end of file diff --git a/contents/data_types/primitives.md b/contents/data_types/primitives.md new file mode 100644 index 0000000..430a517 --- /dev/null +++ b/contents/data_types/primitives.md @@ -0,0 +1,342 @@ +## Overview + +Now that you know more about declaring variables, let's go back to the data types to know what values we can place on the right side of the equals (`=`) operator. + +There are **6 primitive values** in JavaScript, with one additional **special case**. In a way, you can say there is a total of **7 primitive values**. + +As mentioned earlier, all primitives are **immutable**, meaning their values cannot be changed in the same way that objects and functions can. This may sound a bit confusing for now, so we'll revisit this as we get into the specific date types. For now though, let's just keep in mind that primitives **cannot be directly altered**, but they can be **replaced**. + +## Undefined + +Let's start with Undefined, the first primitive value we'll learn in JavaScript. This data type represents an **unintentional missing value**. There exists **only one** value in JavaScript with this data type, and it's also called `undefined`. + +It usually shows up if you forgot to assign a value to a variable and in other situations where the code doesn't know what value that you wanted. If this happens, we say that our variable contains the value `undefined`. + +> So far, we've been imagining variables as *boxes* that *contain* values. Boxes are a common mental model of developers for variables. It's what we default to when we think of variables and when we try to describe variables to other people. However, I want to share a different perspective which I found from Dan Abramov's newsletter called [JustJavaScript](JustJavaScript.com) which I recommend that you check out once you're already familiar with the basics of JavaScript. In his mental model, he thinks of variables as *"wires"* that *point to* values. That's all that I'll say about it for now! + +### Exercises + +1. Declare a variable called `x`. +2. Log the value of `x` to the console. + +``` +let x; +console.log(x); +``` + +In the exercise you did, we declared a variable called `x` and did not assign any value to it. Hence, it outputs **undefined**. So far, we've been unintentionally assigning the value `undefined` when we learned about variables in the previous section. + +Don't be confused with its name `undefined`. It's **not** supposed to represent something that hasn't been defined yet. In fact, if you try to run `console.log` on a variable that hasn't been declared, it will show an error. Try out the example below where we did not declare the variable `y` in our code. + + +### Exercise + +1. Log the value of an undeclared variable `y` to the console. What was the result of logging to the console? + +``` +console.log(y); +``` + +If you got an error while trying to do the exercise above with the message `Uncaught ReferenceError: y is not defined`, then this is telling us that **undefined is not the same as not defined!** + +Finally, as we explore the different data types, we'll be making use of a new function called `typeof`. + +> `typeof` is a function in JavaScript that returns the data type of whatever is passed in between its parenthesis. Note that the value returned by `typeof` is a string. Don't worry if you're not yet sure what a string is, we'll be taking this on in a a bit. + +### Exercises + +1. Declare a variable called `z`. +2. Log the value of `z` to the console. +3. Log the type of `z` to the console. (Hint: use the `typeof` operator to retrieve the data type of variable `z`) + +For this exercise, note that the **value** of `z` is `undefined`, but the **type** of `z` is a string containing the word "undefined". + +## Null + +Null is the **special case** for primitives that we talked about earlier. Like `undefined`, there is also only **one value** in JavaScript with this data type. Same as the case for undefined, the only value for the null data type is also called `null`! + +If undefined was used for unintentional missing values, null on the other hand is used for **intentional missing values**. Developers usually assign their variables the value `null` in cases where they might want to declare the variable, but assign its actual value later on. + +An example is shown below where some dev might have declared a variable `age`, and intends to assign it the value 15 after some block of code is executed (probably since age is still unknown at the beginning of the program). + +``` +let age = null; +... + +... +age = 15; +console.log(age); +``` + +Arguably, the first line from our example could have also been just `let age;`. If we did this, `age` would have had the value `undefined` at first, but also lead to the same result of logging the value `15` at the end. + +``` +let age; +... + +... +age = 15; +console.log(age); +``` + +However, it's a convention for some developers to set it the value to `null` instead just to help us differentiate a mistake in our code from an intentional missing value. It might be a good idea to follow this practice, or to just avoid using both and declare a variable only when you plan on assigning it an actual value. + +``` +... + +... +let age = 15; +console.log(age); +``` + +We mentioned that `null` is a special case. What makes null so special? Try out the exercises below to see it yourself! + +### Exercises + +1. Declare a new variable called `age` and set its value to `null`. +2. Log to the console the value of `age`. +3. Log to the console the type of `age`. Was that the output you expected? + +What did the exercise above tell us about the `type` of `null`? Recall that `typeof` is used to tell us what the data type is of the value passed to it. + +``` +console.log(typeof(null)); +``` + +In case you're confused about this, `null` is still considered a `primitive value`. It's just pretending to be an `object`. This is actually the result of an irreversible bug from the past! + +If you're interested to read more about this bug and why it can't be fixed, check out [The history of "typeof null"](https://2ality.com/2013/10/typeof-null.html). + + +## Booleans + +The next primitive we'll take on are booleans. Booleans represent a logical entity in our code. They take on **two values** unlike Undefined and Null which both have one value each. + +The two boolean values are `true` and `false`. + +``` +console.log(typeof(false)); + +let isLearning = true; +console.log(typeof(isLearning)); +``` + +We usually use **logical operators** on boolean values. If you've taken a philosophy class before, you might be familiar with the terms "not", "and", and "or". Click [here](contents/operators/logical.md) if you'd like to learn more about [Logical Operators](contents/operators/logical.md). You can always come back where you left off! You can also just continue on to the next primitive value. + +## Numbers + +Numbers are the fourth kind of primitive values that we'll look into. Both integers and floating point numbers (numbers with decimal places) are represented as a **number** in JavaScript. This means that numbers can be written with or without decimals, and they will still be classified as a number. + +We'll look into the power of numbers through doing more exercises. + +### Exercises + +1. Declare a variable `x` with a value set to `3` and log its value to the console. +2. Declare another variable `y` with a value set to `3.00` and log its value to the console. What happened to the decimal places? Is it similar with the value of `x`? +3. Just to verify if `x` and `y` are really numbers, log to the console the result of `typeof(x)` and `typeof(y)`. +4. Let's try printing large numbers. The number of minutes in a common year is 525,600 minutes. Log the value `525600` to the console. +5. Large numbers can be hard to read especially when they reach more than a thousand. Try doing exercise 4 but use an underscore `_` between the digits 5 and 6. Did the printed output include the underscore `_` you added? + +**Scientific exponential notation** is also possible in JavaScript by using `e` (or capital `E`!) for the exponent followed by a positive or negative sign. By default, it no sign was passed, the exponent will be positive. + +``` +console.log(15E+13); +console.log(15E-13); +console.log(15E13); + +console.log(15e+2); +console.log(15e-2); +console.log(15e4); +``` + +Let's try even bigger numbers. Note that numbers have **limited precision** in JavaScript. At some point, if the number gets big enough or small enough, we start losing precision. This is because JavaScript represents the numbers we have in our code by *picking the closest numbers that it knows about*. Instead of doing real math that we're used to, numbers in JavaScript have a limited precision of 64 bits to be exact, which is approximately 16 digits. Try out the code below to explore the limitations of numbers. + +``` +console.log(999_999_999_999_999); +console.log(9_999_999_999_999_999); + + +console.log(0.1 + 0.2); +``` + +Because of this, we just need to be a bit more careful when dealing with large numbers and calculations. This is not unique in JavaScript. If you'd like to explore this in more detail, feel free to read [What Every Programmer Should Know About Floating-Point Arithmetic](https://floating-point-gui.de/). + +To add to the discussion, you can also use `Number.isSafeInteger()` and pass in your integer to check if it's within the safe range. If it returns false, it means that JavaScript will treat it as an **approximation** of the value (closest number it knows about). You can also check `Number.MAX_SAFE_INTEGER` (253 - 1) and `Number.MIN_SAFE_INTEGER`(-(253 - 1)). + + +``` +console.log(Number.MAX_SAFE_INTEGER); +console.log(Number.MIN_SAFE_INTEGER); + +console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER)); +console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1)); + +console.log(Number.MAX_SAFE_INTEGER); +console.log(Number.MAX_SAFE_INTEGER + 1); +console.log(Number.MAX_SAFE_INTEGER + 2); +console.log(Number.MAX_SAFE_INTEGER + 3); +console.log(Number.MAX_SAFE_INTEGER + 4); +console.log(Number.MAX_SAFE_INTEGER + 5); + +``` + +You might have noticed that we started to lose precision while adding to `Number.MAX_SAFE_INTEGER` and some numbers stayed more than just `1` step apart. Don't worry about this as you probably won't be dealing with these unless you're coding finance-related applications with heavy computations and really, really large values. + +Since you've had a peak at an addition operation with the previous code examples, you can choose to take a segue and learn about the other [arithmetic operators](contents/operators/arithmetic.md) that JavaScript has to offer by clicking [here](contents/operators/arithmetic.md). Or if you'd like, feel free to continue on to Symbolic Numbers. + +### Symbolic Numbers + +Aside from the usual integers and floating points, there are three symbolic numbers: `Infinity`, `-Infinity`, and `NaN`. We don't commonly write code using these special numbers but it's valuable to understand these in case they come up from a bugs. + +Just to confirm if they're really numbers, try logging the result of `typeof` for all three symbolic numbers. +``` +console.log(typeof(Infinity)); +console.log(typeof(-Infinity)); +console.log(typeof(NaN)); +``` + +The values `Infinity` and `-Infinity` are produced for two reasons. The first is if your number is greater than the largest possible number available in JavaScript (or if it's less than the smallest possible number available). + +You can get the largest and smallest value available by using the constants `Number.MAX_VALUE` and `Number.MIN_VALUE`. + +``` +console.log(Number.MAX_VALUE); +console.log(Number.MIN_VALUE); + +console.log(Number.MAX_VALUE * 2); +``` + +Another scenario where you can get a value of `Infinity` and `-Infinity` is when you perform a division by 0. + +``` +console.log(9 / 0); +console.log(-9 / 0); +``` + +`NaN` means **N**ot **a** **N**umber. This value shows up in the case where you have a numeric value that represents a non-number. Don't be confused with its name, it's still a numeric value but is called that way because it's treated as an "invalid number". There are 5 known ways of how to produce a `NaN` value as described by [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN). + +1. Perfoming any operation (except for addition) on a string + +``` +console.log(9 * "sample string"); +console.log(9 / "sample string"); +console.log(9 - "sample string"); +``` + +2. Trying to parse a non-number to a number + +``` +console.log(parseInt("cannot be a number")); +console.log(Number("hello")); +``` + +3. Any operation directly using `NaN` + +``` +console.log(NaN * 5); +``` + +4. Indeterminate form + +``` +console.log(0 * Infinity); +``` + +5. Any Math operation where the result is not a real number + +``` +console.log(Math.sqrt(-1)); +console.log(0/0); +``` + +> Note that you shouldn't always use numbers just because you're trying to represent data that is numeric. For example, when storing phone numbers, credit card numbers, and ID numbers, it might be better to just use strings! + + +## BigInts + +We mentioned previously in Numbers about how dealing with large numbers is not always safe. We were limited by the largest and smallest numbers that JavaScript can reliable represent (`Number.MAX_SAFE_INTEGER` and `Number.MIN_SAFE_INTEGER` respectively) to ensure that our calculations end up sound. With this, JavaScript introduced **BigInts** or **Big Integers** for large integers of arbitrary length. + +We can say that this is similar with Numbers because it's also a numeric type in JavaScript, but with arbitrary precision. Now we can perform operations on large integers even beyond the limit set for Numbers by `Number.MAX_SAFE_INTEGER` and `Number.MIN_SAFE_INTEGER`. + +To declare a BigInt, we just add an `n` to the end of a number. + +### Exercises +1. Declare a variable called `cash` and set it equal to `9876543321987654321987654321n`. +2. Log the value of `cash`. +3. Log to the console the result of passing in `cash` to the `typeof` function. +4. We can also try converting a `BigInt` to a `Number`. Check the result of `console.log(parseInt(cash))`. + +Note that you can also use the same arithmetic operators with BigInt. Let's try out a few exercises. + +### Exercises +1. Explore performing arithmetic operators on two BigInt values. Try out addition, subtraction, multiplication, division, exponentiation, and even modulo (for getting the remainder). `console.log(2n + 1n)` and so on. +2. Now see what happens when you try to perform an arithmetic operation on a BigInt and a Number. Log to the console the result of running `3n + 5`. How about `4n + 6.5`? + +It might be a rare case for you to use BigInts unless you're developing applications that make use of extraordinarily large numbers. In the event that you do find yourself using it, you can always turn to the [MDN Web Docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) online and other guides to help out. It's generally a good idea to be familiar with reading documentation. + +> BigInts are currently not supported in Safari/IE as of this writing. It's only supported by Firefox, Chrome, and Edge. To read more about Browser Compatibility of BigInt, check out the same [MDN Web Docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) and scroll down to the section on "Browser compatibility". + + +## Strings + +**Strings** are another primitive value in JavaScript. They are a sequence of characters (letters, numbers, symbols) used to represent textual data and are usually surrounded by single quotation marks (`''`) or double quotation marks (`""`). + +A sample string declaration of a string would be: + +``` +let name = "Women Who Code Manila"; +let language = 'JavaScript'; +``` + +Although in the example above, we demonstrated the two ways of declaring strings, in practice we try to be consistent in our code. If we chose to use single quotes once, try to use single quotes all throughout your code. Likewise, if you chose to use double quotes for your strings, use it consistently across your entire codebase. + +> If you've tried out ["Hello World" Your First JS Code](contents/basics/hello_world.md) before then you've actually already tried using strings already. + +Note that since strings are primitive, once you create a string you cannot modify them. Let's try to go through this by way of exercises. + +### Exercises + +1. Declare a string called `filename` and set its value to `"sample.txt"`. +2. Log to the console the value of `filename`. +3. Log to the console the result of `typeof(filename)`. +4. Change the value of `filename` to `"new.txt"` and log its new value to the console by running `console.log(filename);`. + +For the exercise done above, why was it that we were able to change the value of `filename` when it was said that primitive values cannot be modified. Didn't we just see that the string (which is a primitive) was changed from `"sample.txt"` to `"new.txt"`? + +Actually, behind the scenes, no. What we did in the exercise was change the value of `filename`. We replaced the variable's value, but the original string itself (`"sample.txt"`) remained the same. + +![](../../_media/string-replacement.png "String Example") + +You can think of it as the original string `"sample.txt"` was **removed** or taken out of from the "box" or variable, and then **replaced** by a new (and completely different) string with the value `"new.txt"`. So the original string is still out there somewhere, unmodified, while the new string has taken its place. + +There are a lot of operations that we can use on strings, which can be found in its documentation. A useful example would be **string concatenation** which makes use of the `+` sign to combine two or more strings together. + +``` +let name = "Barbara"; +console.log("Hey, " + name + "! How are you today?"); +``` + +In modern syntax, we can also make use of template literals which shortens the example above to just: + +``` +console.log(`Hey, ${name}! How are you today?`); +``` + +Another way of achieving the same result is by using `String.concat()`. There really is a whole lot more already-built functions that we can take advantage of when dealing with this data type. Check out the documentation under "Instance methods" over at [MDN Web Docs on Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). This doesn't only apply to strings but the other data types we've also discussed have their own documentation page as well that you can always refer to for readily-made methods that you can use. + +## Symbols + +Symbols in JavaScript are the last primitive values we'll take on. As a general description, **symbols** are used to create **unique identifiers** for objects. However, since symbols are closely tied to the objects data type, we'll put off the discussion for this one later on when we discuss objects. + +## Wrap Up + +There are **7 primitive values** in JavaScript, one of which (`null`) is a special case. +1. Undefined - used for unassigned values (`undefined`) +2. Null - used for intentionally missing values (`null`) +3. Booleans - used for logic (`true` or `false`) +4. Numbers - used for integers and floating point numbers +5. BigInts - used for integers of arbitrary length and precision +6. Strings - used for textual data (enclosed in `'` or `"`) +7. Symbols - used for unique identifiers for objects + +We've covered 7 out of the 9 data types so far in JavaScript. The remaining 2 are Objects and Functions. diff --git a/contents/operators/arithmetic.md b/contents/operators/arithmetic.md new file mode 100644 index 0000000..2f3274c --- /dev/null +++ b/contents/operators/arithmetic.md @@ -0,0 +1,28 @@ +## Overview + +In this section, we'll visit the different Arithmetic Operators that you can use. These are commonly applicable for [Numbers](contents/data_types/primitives?id=numbers) and [BigInts](contents/data_types/primitives?id=bigints), but there are some operators that you can even apply to [Strings](contents/data_types/primitives?id=strings)! + +If you came from learning the `Numbers` data type, you're probably already familiar with how addition works. You can probably also guess what the rest of the possible arithmetic operators are aside from addition. + +Shown below is a summary of the basic arithmetic operators we know from studying math (and a few more we might not have seen before). + +![](../../_media/arithmetic-operators.png "Arithmetic Operators") + +## Exercises + +1. Log to the console the result of adding 3 and 5. +2. Subtract 80 from 100 and then log the result to the console. Try it out the other way around, subtracting 100 from 80. +3. Run `console.log(50 * 48);`. +4. Run `console.log(100 / 5);`. Also run `console.log(5 / 100);`. How about `console.log(100 / 3);`? +5. Using `**` raises the number on the left to the power of the number on the right. `console.log(5 ** 2);` should result to 25. +6. Try out the following: +``` +let x = 9; +x = x + 1; +console.log(x); +x += 3; +console.log(x); +``` +This shows us one of the shortcuts for addition using the same variable. The same can also be done for `-=`, `*=`, and `/=`. +8. Incrementing and decrementing are even shorter shortcuts `x += 1;` or `x -= 1;` (specifically used only when incrementing by 1). Try it out with logging the result of `x--;` and `x++;`. +9. Finally, you can also declare the precedence of operators by using parentheses. `(5 + 3) / 2` can be done to perform addition first before division. \ No newline at end of file diff --git a/contents/operators/comparison.md b/contents/operators/comparison.md new file mode 100644 index 0000000..ca15d4c --- /dev/null +++ b/contents/operators/comparison.md @@ -0,0 +1 @@ +This will be released along with JavaScript conditional statements. Stay tuned! diff --git a/contents/operators/logical.md b/contents/operators/logical.md new file mode 100644 index 0000000..6ea4acd --- /dev/null +++ b/contents/operators/logical.md @@ -0,0 +1,19 @@ +## Overview + +We'll discuss the three logical operators in JavaScript, which are detailed in the table below. These are the not (`!`), and (`&&`), and or (`||`) operators. These are commonly used when working with [Boolean](contents/data_types/primitives?id=booleans) values. + +![](../../_media/logical-operators.png "Logical Operators") + +To better understand how these operators work, let's dive in to some exercises instead. + +## Exercises + +1. Declare a variable called `isRed` and set its value to `true`. +2. Log to the console the result of `!isRed`. `!` is the not operator. +3. Log to the console the result of `!!isRed`. Negating a negation just brings back the original value! +4. Declare a variable called `isRound` and set its value to `false`. +5. Log to the console the result of `isRed && isRound`. Here we're trying to check if something is both red AND round. +6. Log to the console the result of `isRed || isRound`. In this example, we're trying to see if something is either color red or is round in shape (or both!). +7. Change the value of `isRound` to `true` and try doing exercises 5 & 6 again. What changed in the output? Does it make sense with the description of the logical operators? +8. Try logging to the console the result of `true && true && true`. This shows us we can keep extending the `expression`. You can even try out `false || false || false || false` and keep going on and on... +9. Finally, try combining all three and use parentheses `()` to group statements together if it gets too complicated. `!true && (false || true) && !false` \ No newline at end of file diff --git a/contents/html_css_js.md b/contents/web/html_css_js.md similarity index 92% rename from contents/html_css_js.md rename to contents/web/html_css_js.md index 5a19e50..9be9ff8 100644 --- a/contents/html_css_js.md +++ b/contents/web/html_css_js.md @@ -4,11 +4,11 @@ HTML, CSS, and JavaScript work hand in hand to create the web pages that we acce Below is a basic structure of a web page. They can be thought of as building blocks. -![](../_media/building-blocks.png "Building Blocks") +![](../../_media/building-blocks.png "Building Blocks") And to build each block, the following are the technologies used: -![](../_media/building-blocks-technologies.png "Building Blocks - Technologies") +![](../../_media/building-blocks-technologies.png "Building Blocks - Technologies") We'll discuss in detail what each building block is for along with their corresponding technologies. @@ -18,13 +18,13 @@ We'll discuss in detail what each building block is for along with their corresp Below is sample content for the Women Who Code website made just in a normal document. This is simply a compilation of ideas which includes the words to use, the logo to be used, the navigation pages, and the call to action (text used for the button). -![](../_media/website-text.png "Text - Women Who Code Website") +![](../../_media/website-text.png "Text - Women Who Code Website") ## HTML - Structure After deciding on the content, you have to set up your website. You have to know how to organize it well, where each link goes, how each web page connects to the other parts of your site. You also have to decide on the **hierarchy of information**. Which are headings? Which are paragraphs? Which are links? Which are images? This is where **structure** comes in. With this **semantics** is very important. Structure can be achieved using **HTML (HyperText Markup Language)**. The image shown below shows the website built using only HTML with the content mentioned earlier. -![](../_media/website-html.png "HTML - Women Who Code Website") +![](../../_media/website-html.png "HTML - Women Who Code Website") ## CSS - Presentation @@ -32,7 +32,7 @@ The **presentation** and **interaction** block (CSS and JavaScript) both sit on Once the structure of your web page is finished, **presentation** will let you include styles on your site. This is where you can bring out the designer within you to define what font to use, what font size corresponds to each heading and paragraph, what the background color or background image of the site will be, how large or how small the images are, how big the space is between elements, how the paragraphs will be aligned (justified, centered, left-aligned, or right-aligned)—any possible design you can think of can be done with the help of **CSS (Cascading Style Sheets)**. The finished Women Who Code website with added styling using CSS is shown in the picture below. -![](../_media/website-css.png "CSS - Women Who Code Website") +![](../../_media/website-css.png "CSS - Women Who Code Website") ## JavaScript - Interaction @@ -40,7 +40,7 @@ Meanwhile, **interaction** can give life to your website and change your visitor How does JavaScript make more web pages more interactive? It does this by reacting to events that the user does. Every JavaScript function ever involves an **event** to trigger it to perform an **action**. -![](../_media/event-action.png "Event Triggers an Action") +![](../../_media/event-action.png "Event Triggers an Action") The **event or trigger** can be clicking a button, scrolling to a certain section of the site, typing a specific character, or just waiting for 30 seconds after the page loads, to name a few. After the event happens, JavaScript **accesses elements of the page**. For example, it can select all elements with the class 'container', all the images within the first container, the button with an id of 'sign-up-button', or the text that a user typed in an input field with the id 'username'. Finally, after the event and accessing elements of the page, an **action** is performed on the selected elements. diff --git a/contents/html_css_recap.md b/contents/web/html_css_recap.md similarity index 95% rename from contents/html_css_recap.md rename to contents/web/html_css_recap.md index 3801bd6..947a994 100644 --- a/contents/html_css_recap.md +++ b/contents/web/html_css_recap.md @@ -6,7 +6,7 @@ By the way, Women Who Code also has [HTML & CSS Study Groups](https://wwcodemani ## HTML -The main purpose of HTML or Hypertext Markup Language is to give structure to your content as mentioned in [HTML, CSS, JavaScript: How They Work Together](contents/html_css_js.md). HTML is *markup language* (not a programming language) meaning it gives information about the structure of the text or instructions for how it is to be displayed. +The main purpose of HTML or Hypertext Markup Language is to give structure to your content as mentioned in [HTML, CSS, JavaScript: How They Work Together](contents/web/html_css_js.md). HTML is *markup language* (not a programming language) meaning it gives information about the structure of the text or instructions for how it is to be displayed. When writing in HTML, you **define elements** in the form of **tags**. Some examples of these tags are `, , , <link>, <meta>, <nav>, <section>, <div>, <p>, <span>, <h1>, <a>, <form>, <table>, <script>, <ul>, <li>`. These tags are case-insensitive which means the tag `<div>` is the same with the tags `<DIV>`, `<Div>`, and its other variations. However, it is common to use the lowercase version. @@ -16,7 +16,7 @@ HTML elements can have **attributes** declared on the opening tag. Attributes he The typical HTML syntax is shown below: -![](../_media/html-syntax.png "HTML Syntax") +![](../../_media/html-syntax.png "HTML Syntax") In this example, we are defining that the content "This is cool!" is a **paragraph** by enclosing it in the **p** tag. The entire `<p class="awesome">This is cool!</p>` is an **element** composed of **p opening and closing tags** with the text "This is cool!". @@ -36,7 +36,7 @@ On top of HTML we can add CSS or Cascading Style Sheets. CSS is a *style languag When writing code using CSS, we make use of **selectors** and **declarations**. Shown below is a basic CSS example using the selectors and declarations: -![](../_media/css-syntax.png "CSS Syntax") +![](../../_media/css-syntax.png "CSS Syntax") **Selectors** "select" the HTML element (or elements) that we want to apply the styles to while declarations tell us the actual styles to apply to the element selected. @@ -54,7 +54,7 @@ In our example above, we are selecting all the paragraph elements in a web page When writing code in CSS, it's usually helpful to use line-breaks and indentations for each declaration. This would greatly improve code readability even though it won't change what is rendered on the page. To improve on our example earlier, we can format it to be written as: -![](../_media/css-clean-code.png "CSS Formatted") +![](../../_media/css-clean-code.png "CSS Formatted") For a list of the CSS properties you can use in your declarations, you can refer to [cssreference.io](https://cssreference.io/) and [W3Schools CSS Reference](https://www.w3schools.com/cssref/). To check more advanced selectors, you can visit [W3Schools CSS Selector Reference](https://www.w3schools.com/cssref/css_selectors.asp) and [HTML Dog CSS Selectors](http://htmldog.com/references/css/selectors/).