Course Classes

Javascript by The Net Ninja

Vídeos

Outros

0h03m

JavaScript Tutorial For Beginners 01 - Introduction

Hey ninja's, glad you decided to take the JavaScript train and join me on this epic journey of JavaScript tutorials for beginners. We'll be covering all the basics, and certainly enough to get you up and running making your own JavaScript programs for your websites.

If you need to cacth up on HTML or CSS first, check out my playlists below:

HTML for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

CSS for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

Brackets can be found @ http://brackets.io/

And you can download Chrome @ https://www.google.com/chrome/browser/desktop/index.html

===== SUBSCRIBE TO CHANNEL =====

https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML Basics Course ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2T

0h04m

JavaScript for Beginners 02 - What is JavaScript?

Hey guys, welcome to your 2nd JavaScript tutorial for beginners. In this lesson we'll take a quick look at what JavaScript actually is, and how it differs from other programming languages.

JavaScript is what's known as a client-side language, meaning it runs on your computer and not on a web server. There are exceptions to this (e.g. with Node.js) but this is generally the case. Other programming languages such as PHP, run on the server and are called server side languages.

JavaScript is also a scripting language. This essentially means it is limited in functionality - but this is the way it was made, intentionally! It's primary purpose is to add functionality and interactivity to websites, such as banner sliders, zoom-galleries, drag and drop etc.

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
========== HTML

0h03m

JavaScript Tutorial For Beginners 03 - Hello World! in JavaScript

Hey ninjas, welcome to your 3rd JavaScript for beginners tutorial!

It's customary that when you learn a new programming language, that the first program you write in that language is the timeless 'Hello, World!' classic! So that's exactly what we'll be doing in this lesson.

No need to pay attention to the details here, I just want to show you how easy it is to implement JavaScript in your web pages.


SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding ski

0h05m

JavaScript Tutorial For Beginners #4 - Where to put your JS

Hey all. In this JavaScript lesson I'll show you exactly where to put your JavaScript code. The code can essentially be placed anywhere on your HTML document, but good practise dictates that
you place it near the bottom of your code, and in an external file if it's global or large.

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social

0h04m

JavaScript Tutorial For Beginners #5 - Google Chrome Developer Tools

Yo everyone. So in this JavaScript tutorial I want to show you the basics of the Google Chrome developer tools that ship freely with Google Chrome. The developer tools are a wicked tool for debugging not only JavaScript, but also HTML & CSS as well as running other site diagnostics such as site speed & performance. I'm not gonna dig too deeply into all of those right now, but I just want to highlight a few areas of the developer tools that come in handy when learning JavaScript.

Other browsers also have their own version of developer tools, but personally, I like Chrome's :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://w

0h07m

JavaScript Tutorial For Beginners #6 - Basic JavaScript Syntax & Rules

Hey guys, today's awesome JavaScript lesson is gonna be all about the basics of JavaScript syntax and a few core rules. We'll look at case sensitivity, what statements are, whitespace & layout, as well as comments and how the order of your code matters.

As usual, comment below with any questions and I'll do my best to answer everything.

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4

0h09m

JavaScript Tutorial For Beginners #7 - JavaScript Variables

Hey ninjas. In today's JavaScript tutorial, we'll be taking a look at what variables are from a birds eye view. Variables are at the heart of most programming languages, and JavaScript is no different in that respect.

Variables area a way of storing information (such as the pixel position of an element on a page, or the customer name, or email) and can be of any of the main JavaScript types (integers, strings, boolean values etc - we'll cover these later).

We need to use variables in our JS programs, so that we can refer to different pieces of varying information for different parts of our scripts to run! For example, an image slider needs to store how many images are in the slider.

As always, fire away with any questions :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners

0h06m

JavaScript Tutorial For Beginners #8 - Basic Mathematical Operators

Basic mathematical operators in JavaScript are:

- Plus, minus, multiply & divide

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter - @TheNetNinja - https://twitter.com/thenetninjauk

0h04m

JavaScript Tutorial For Beginners #9 - Math Operator Short-hand

Hey guys. In this JavaScript tutorial I want to build on what we've already learnt about mathematical operators, and show you a few cool short-hand notation versions that will save you time.

+= is the short-hand for adding to the current variable

-= is the short-hand for subtracting from the current variable

*= is the short-hand for multiplying by the current variable

/= is the short-hand for dividing the current variable

++var or var++ are the incremental operators (increase the value of the variable by 1).

--var or var-- are the decremental operators (decrease the value of the variable by 1).

As usual, comment down below with any questions :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeD

0h03m

JavaScript Tutorial For Beginners #10 - Logging to the Console

Hey ninjas, in this JavaScript lesson I'll be showing you a couple of quick and easy ways to test your JavaScript code and variable values. These include the Console.log method, as well as the Document.write method.

You don't need to worry too much about the Document and Console objects so much yet, as we'll be covering objects and methods in more detail later in the playlist.

As always, any questions, ask away :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt yo

0h06m

JavaScript Tutorial For Beginners #11 - Booleans in JavaScript

Yo guys, today we're gonna look at boolean values (true and false values) and the different values that are seen as "truthy" or "falsey" by JavaScript. To determine whether a value is truthy or falsey, we can use the built in JavaScript Boolean() function.

Other expressions can also be evaluated as true or false, for example, is 7 greater than 5. Is X smaller than Y etc. We'll go on to use expressions like this when we start using if statements and loops.

As always, any questions - just comment below :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

=======

0h08m

JavaScript Tutorial For Beginners #12 - If Statements

Hi all. In this JavaScript tutorial for beginners, we're going to take our first look at control flow - if statements. If statements are alive everywhere you look in the world. If you perform an action, there will be a corresponding reaction or result. This concept is used in programming too.

If statements can be used to check a variety of things in JavaScript, such as whether a certain element has a particular class associated with it, or to check if an element is showing on a web page. They're an extremely important aspect of JS, and will be VERY helpful in your future coding!

As usual, any questions just ask away :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTM

0h04m

JavaScript Tutorial For Beginners #13 - Else If Statements

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter - @TheNetNinja - https://twitter.com/thenetninjauk

0h05m

JavaScript Tutorial For Beginners #14 - Comparison Operators

Hey all. So in this JavaScript tutorial I wanted to introduce the comparison operators - well, you've already seen 1, the less than sign . We'll be using these in up and coming video's to make more complex logical flow statements.

As usual, any questions just fire away :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ===

0h06m

JavaScript Tutorial For Beginners #15 - Logical Operators

In this JavaScript tutorial for beginners, I'll show you the two logical operators we can use with our control flow statements (such as if statements and loops). The two operators are the AND operator ( && ) and the OR operator ( || ) .

The AND logical operator can be used when you need two or more conditions to be met, and the OR logical operator can be used when you only need ONE of two or more conditions to be met.

As always, any questions, fire ahead :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front

0h04m

JavaScript Tutorial For Beginners #16 - While Loops

Yo Ninjas, in this JavaScript tutorial I'll be introducing the concept of looping in JS. More specifically, we'll be taking a look at the while loop - the most basic form of loops.

JavaScript loops are a way of repeating sections of code over and over, so that you're not having to re-write code again and again manually. For as long as a specified condition is true, the loop will continue to execute your code.

Be careful not to cause an infinite loop! This can crash your computer.

As always, any questions, fire away :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4

0h07m

JavaScript Tutorial For Beginners #17 - For Loops

An easier way to iterate through a loop is via the for loop, which we'll talk about in this JavaScript tutorial. A for loop does exactly the same thing as a while loop, but it has the advantage of organizing it's components more locally and neater.

As always, if you have any questions, fire ahead with them below :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://th

0h04m

JavaScript Tutorial For Beginners #18 - Break & Continue

Break and Continue are two reserved keywords in JavaScript that help us when trying to 'get out' of a loop, and we'll cover both in this tutorial.

Break, as the name suggests, breaks out of a loop at any given point, and Continue just tells the loop to 'skip' this particular iteration and carries on with the next one.

As always, if you have any questions, ask away :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.y

0h04m

JavaScript Tutorial For Beginners 19 - Practical Example using Loops

Hey gang, in this JavaScript tutorial I just wanted to show you a quick practical example of using loops to change elements on a HTML page. In this example, we'll create an array of all the anchor tags on our HTML document, cycle through them using a for loop, and then add a dynamic class name to them dependant on their position in the page/array.

As always, fire away with any questions you have ninjas :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding

0h09m

JavaScript Tutorial For Beginners #20 - Functions

Hey class, so in this JavaScript tutorial I want to introduce you to the world of functions. Yep, I think you're ready for them :). Functions allow you to chunk parts of code together into logical sections, and call that code at any time. For example, you may have a function to cycle through all of your images on a web page, and implement a zoom functionality on the. You'd probably call this function something like imageZoom.

So, functions are a really cool and integral part of JavaScript, and something you should try and get into the habit of using early on in your JavaScript development, so that your code is always readable and tidy for yourself and other developers.

At first, functions in JavaScript can be a tricky concept, so by all means fire away with any questions you have down below :).

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?l