JavaScript (Level 3)

This third part of the pre-course will provide you with an overview of JavaScript and resources to cover the basics that you need.

Introduction to JavaScript

Now that you have learned the basics of HTML and CSS, it's time to do more advanced things on your webpage! Think about a website like it's a big spaceship built out of Legos. The spaceship might look cool, but it would be pretty boring if it didn't actually do anything.

JavaScript is like adding parts to the Lego spaceship that spin, light up, make noise, and overall make the spaceship able to do completely new and exciting things - it makes it more fun to play with, or more useful.

JavaScript is a very fun language - we're sure you'll love it! 😃

JavaScript Crash Course

This video will give you an understanding of JavaScript and how to use it. Again, we really recommend taking the time to watch it as it will save you a lot of time trying to understand things on your own!

Concepts

The resources below are what you need to cover the basics of JavaScript. Each link will redirect you to the relevant page on W3 Schools, which will contain an explanation of JavaScript code, why we use it, and how to use it. You will also be able to play around with the code yourself so you can start practicing!

Please note that we use ⏱ to indicate the timestamp in the attached video.

• Intro to JavaScript - https://www.w3schools.com/js/default.asp

• Script <script> tag - https://www.w3schools.com/js/js_whereto.asp (⏱ 6:46)

• Console console.log() - https://www.w3schools.com/js/js_debugging.asp (⏱ 8:20)

• Variables const / let / var https://www.w3schools.com/js/js_variables.asp (⏱ 11:15)

• Data Types (⏱ 14:18)

  • String - https://www.w3schools.com/js/js_strings.asp

  • Boolean - https://www.w3schools.com/js/js_booleans.asp

  • Numbers - https://www.w3schools.com/js/js_numbers.asp

• String Methods length / slice / substring - https://www.w3schools.com/js/js_string_methods.asp (⏱ 18:38)

• Arrays [] - https://www.w3schools.com/js/js_arrays.asp (⏱ 23:53)

  • Arrays Of Objects - (timestamp:34:20)

• Objects {} - https://www.w3schools.com/js/js_objects.asp (⏱ 30:09)

• Loops for - https://www.w3schools.com/js/js_loop_for.asp (⏱ 37:40)

• Array Methods - (⏱ 42:24)

  • filter filter() - https://www.w3schools.com/jsref/jsref_filter.asp

  • find find() - https://www.w3schools.com/jsref/jsref_find.asp

  • Adding to Array push() - https://www.w3schools.com/js/js_array_methods.asp

  • Sorting sort() - https://www.w3schools.com/js/js_array_sort.asp

  • iteration map() / forEach() - https://www.w3schools.com/js/js_array_iteration.asp

• Conditionals if then else - https://www.w3schools.com/js/js_if_else.asp (⏱ 46:30)

• Functions function - https://www.w3schools.com/js/js_functions.asp (⏱ 53:23)

• Arrow Functions () => - https://www.w3schools.com/js/js_arrow_function.asp (⏱:56:22)

• ES6 Classes () - https://www.w3schools.com/js/js_es6.asp (⏱ 1:07:21)

• Window Object (window) - https://www.w3schools.com/js/js_window.asp (⏱ 1:10:30)

• DOM Selection document - https://www.w3schools.com/js/js_htmldom_methods.asp (⏱ 1:14:50)

• Manipulating The DOM getElementById - https://www.w3schools.com/js/js_htmldom_methods.asp (⏱ 1:20:05)

• Events onclick https://www.w3schools.com/js/js_htmldom_events.asp - (⏱ 1:24:40)

• Form Script onsubmit https://www.w3schools.com/js/js_validation.asp - (⏱ 1:30:39)

Additional Resources

Here are some additional links that you might find helpful to explore and understand JavaScript:

• Codecademy: Learn Javascript

• Udacity: Intro to Javascript

• MDN: Official Javascript Documentation

• MDN: Comparison Operators

• MDN: Control Flow

• MDN: Logical Operators

• MDN: for Loops

• MDN: Arrays

• MDN: for Loops