Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Foundations/JS basics part 2: Updated list styles #27157

Merged
merged 4 commits into from
Jan 23, 2024
Merged

Foundations/JS basics part 2: Updated list styles #27157

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a7efbb
fix: updated list style to style guide
damon314159 Jan 18, 2024
dfb0293
fix: updated style attempt 2
damon314159 Jan 19, 2024
9b313a0
Merge branch 'TheOdinProject:main' into patch-3
damon314159 Jan 23, 2024
c81aec2
fix: updated style attempt 3
damon314159 Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions foundations/javascript_basics/fundamentals-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,48 +18,49 @@ This section contains a general overview of topics that you will learn in this l

### Strings

Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A __string__ is a piece of text... and is a fundamental building block of the language.
Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text... and is a fundamental building block of the language.

1. Read and code along with [yet another MDN tutorial](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings) on the topic.
2. Go through [this lesson](https://www.w3schools.com/js/js_string_methods.asp) to learn a bit more about what you can do with strings... be sure to take a peek at [the String Reference](https://www.w3schools.com/jsref/jsref_obj_string.asp) page near the bottom, and do the exercises at the end!
3. Vocabulary time: a __method__ is a bit of functionality built into the language or specific data types. In [the previous W3Schools exercise](https://www.w3schools.com/js/js_string_methods.asp), you've learned about a few methods that can be used on strings, such as `replace` and `slice`. An exhaustive list of methods usable on strings can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).
1. Go through [this lesson](https://www.w3schools.com/js/js_string_methods.asp) to learn a bit more about what you can do with strings... be sure to take a peek at [the String Reference](https://www.w3schools.com/jsref/jsref_obj_string.asp) page near the bottom, and do the exercises at the end!
1. Vocabulary time: a **method** is a bit of functionality built into the language or specific data types. In [the previous W3Schools exercise](https://www.w3schools.com/js/js_string_methods.asp), you've learned about a few methods that can be used on strings, such as `replace` and `slice`. An exhaustive list of methods usable on strings can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).

### Conditionals

Now it's time for the fun stuff... So far, we haven't done much with our programming that you couldn't do with basic math skills. Sure, we've told our computer how to do the math, which makes it quicker, but the essence of programming is teaching the computer how to make decisions to do more involved things. Conditionals are how we do that.

1. Step one in learning about conditionals is making sure you have a good grasp on [comparisons](http://javascript.info/comparison).
2. [This tutorial](https://www.w3schools.com/js/js_if_else.asp) is a great first glance at conditionals in JavaScript.
3. [This tutorial](http://javascript.info/logical-operators) will teach you about logical operators. A little heads up regarding this reading's tasks: there will be questions where you see `alert()` with a number or string inside the parenthesis. What's happening here will be discussed later in the curriculum. Some of the answers may not make sense now, but they are accurate, and you will understand them as you progress in the curriculum. Don't worry too much about it now!
4. [This article](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) reinforces the concept and provides several interesting examples of how you could use it building websites.
5. [This article](http://javascript.info/ifelse) covers the same basic concept \(read through it as a review!\) and - more importantly - offers the usual 'tasks' at the bottom of the page!
6. [This article](https://javascript.info/switch) teaches you about the `switch` statement, which is handy when you have multiple conditions.
1. [This tutorial](https://www.w3schools.com/js/js_if_else.asp) is a great first glance at conditionals in JavaScript.
1. [This tutorial](http://javascript.info/logical-operators) will teach you about logical operators. A little heads up regarding this reading's tasks: there will be questions where you see `alert()` with a number or string inside the parenthesis. What's happening here will be discussed later in the curriculum. Some of the answers may not make sense now, but they are accurate, and you will understand them as you progress in the curriculum. Don't worry too much about it now!
1. [This article](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) reinforces the concept and provides several interesting examples of how you could use it building websites.
1. [This article](http://javascript.info/ifelse) covers the same basic concept \(read through it as a review!\) and - more importantly - offers the usual 'tasks' at the bottom of the page!
1. [This article](https://javascript.info/switch) teaches you about the `switch` statement, which is handy when you have multiple conditions.

### Assignment

<div class="lesson-content__panel" markdown="1">

To give you a good bit of practice, we have created replit.com exercises for you to play with. We believe it's best to practice programming on your _own_ computer rather than in an online environment, but we'll get to that soon enough.
To give you a good bit of practice, we have created replit.com exercises for you to play with. We believe it's best to practice programming on your *own* computer rather than in an online environment, but we'll get to that soon enough.

Be sure to do the lessons in the order presented here. Pressing "run" at the top will run the code. Read all directions, watch the terminal, and read all the errors. Don't forget to use 'console.log' extensively.

To get started, create a free replit account and click "Fork" or "Remix" to access the exercises.
Note: Feel free to browse the files on the left column to gain familiarity with it.

<div class="lesson-note lesson-note--warning">
<h4>Replit and AI</h4>
<div class="lesson-note lesson-note--warning" markdown="1">

#### Replit and AI

Replit recently introduced an AI assistant, which is on by default. Before trying any of the exercises, you should first disable it, in order to prevent it from spoiling the exercise. You can do so by clicking on the button labeled AI in the bottom left corner of the code view and then unchecking the "Enable" checkbox.
</div>

- [Exercise 1](https://replit.com/@OdinProject/troubleshooting#troubleshooting.js)
- In this exercise, you will be working out of the file called troubleshooting.js
- In this exercise, you will be working out of the file called `troubleshooting.js`.
- [Exercise 2](https://replit.com/@OdinProject/enter-a-number#script.js)
- You will be working out of script.js, and you will use the console in the 'webview' pane to check your work. To access the console, click the wrench icon, which is located on the right side of the address bar within the 'webview' pane.
- You will be working out of `script.js`, and you will use the console in the 'webview' pane to check your work. To access the console, click the wrench icon, which is located on the right side of the address bar within the 'webview' pane.
- [Exercise 3](https://replit.com/@OdinProject/lets-do-some-math#math.js)
- You will be working out of math.js
- You will be working out of `math.js`.
- [Exercise 4](https://replit.com/@OdinProject/direction-follow#follow.js)
- You will be working out of follow.js
- You will be working out of `follow.js`.

</div>

Expand Down Expand Up @@ -92,4 +93,3 @@ This section contains helpful links to other content. It isn't required, so cons

- [Regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions), commonly known as regex, is a tool that matches or locates patterns in strings for string validation. However, it's important to know [when you shouldn't use regular expressions](https://softwareengineering.stackexchange.com/questions/113237/when-you-should-not-use-regular-expressions). There are other various methods to process strings, and regex can be slower in comparison.
- [Web Dev Simplified's Regular Expressions In 20 Minutes](https://www.youtube.com/watch?v=rhzKDrUiJVk)