Searching...
- Home
- Video Lectures
Course
| Subject: | Web Development |
| Topic: | Javascript |
| Views: | 39,192 |
JavaScript Ninja Tutorials for Beginners
Video Lectures
Displaying all 46 video lectures.
Lecture 1 Play Video |
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=PL4cUxeGkcC9ibZ2TSBaGG... CSS for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... 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... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 2 Play Video |
avaScript? 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... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 3 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 4 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 5 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 6 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 7 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 8 Play Video |
Basic Mathematical Operators Basic mathematical operators in JavaScript are: - Plus, minus, multiply & divide SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 9 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 10 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 11 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 12 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 13 Play Video |
Else If Statements SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 14 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 15 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 16 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 17 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 18 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 19 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 20 Play Video |
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... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 21 Play Video |
Variable Scope Hey all, this JavaScript tutorial for beginners will introduce the concept of variable scope. Variables can have either global or local scope. A global variable is initialized at the 'top-level' of your document, and can be used anywhere within your document after it has been declared. A local variable has only local scope, and can only be used within the function in which it was initialized. As always, fire away with any questions :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 22 Play Video |
Numbers Yo ninjas, in this JavaScript tutorial for beginners, I'll be looking at the number type in more detail, and introducing the Math object. If you have any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 23 Play Video |
(Not a Number) Hey all, I thought it about time I introduced you all to NaN ;). So in this JavaScript tutorial for beginners I'll be showing you what NaN is (Not a Number) and how we can use it to check whether certain variables are indeed a number or not. As usual, ask away with any questions you have :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 24 Play Video |
Strings Hey all, so far we've looked at two data types in JavaScript - Boolean types (true or false) and number types. In this tutorial I want to talk about a third data type - strings. Strings are essentially a string of characters, be them numbers to make a phone number, or letters to make a word or phrase, or even a combo of both. Strings have a lot of methods (built in functions) you can call on them, and we'll look at a few of them in this tutorial too. As always, if you have any questions, just fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 25 Play Video |
Slice and Split Strings Yo ninjas, I just want to show you a couple of neat little string methods (functions) in this JavaScript tutorial. The slice method and the split method. The slice method literally 'slices' your string into a new segment defined by starting and ending points. The split method, splits a string into multiple 'pockets' and puts them into an array (great for splitting tags). As always, any questions, fire away below :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 26 Play Video |
Arrays Hey guys, in this JavaScript tutorial I wanted to show you how to make arrays and how we store pockets of informations in them. Arrays can be (virtually) endless in the amount of pockets they can hold, certainly enough for any client side script. The biggest indicator someone is using an array is the square bracket notation - [ ]. You can also create arrays using the 'new' keyword, but I prefer to use the square bracket method, just because it's quicker and easier to assign values straight away. As always, ask away with any questions :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 27 Play Video |
Introduction to Objects Hey ninjas, in this tutorial I'll introduce you to objects in JavaScript. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 28 Play Video |
Creating a new JavaScript Object Hey ninjas, in this JavaScript tutorial for beginners, we'll make our very own object using the car analogy from the last lesson. I'll show you how to create the object, add properties and methods, and finally how to use the shorthand notation to do this. As always, if you have any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 29 Play Video |
THIS Keyword Hey all, in this JavaScript tutorial for beginners, I want to introduce you to the THIS keyword, so... Ninjas, meet the THIS keyword. THIS, meet the ninjas :). Anyway, THIS in JavaScript is a very useful tool, and refers to whatever object currently owns the context you are working in. For example, at the root of your document, the Window object owns it, so THIS represents the Window object. Therefore, we can call any property on THIS (within the Window context) as we can on the Window object itself. Any questions, just ask! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 30 Play Video |
Constructor Functions Hey ninjas, I think it's about time we started using constructor functions to create our objects! So in this JavaScript tutorial for beginners I'll introduce it to you! The constructor function is useful if you are creating many objects of the same 'type' - e.g. many different Car objects. It promotes DRY code (don't repeat yourself) and saves a lot of time when creating many objects! Any questions, fire away :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 31 Play Video |
The Date Object Hey guys, in this javascript tutorial we'll take a look at the Date object and what we can do with it! The date object in javascript returns back the current date by default, but parameters can be passed into the object to store either future or past dates in a variable. Any questions, just ask :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 32 Play Video |
What is the DOM in JavaScript? Yo Ninjas, in this JavaScript tutorial for beginners, I'll be walking you through what the DOM is and how we use it to interact with our web pages. The DOM stands for Document Object Model and in technical terms, is an application programming interface. But what that really means is that we can use the DOM to go into our HTML code and 'grab' hold of elements (nodes) and then alter them via JavaScript. If you have any questions about the DOM, fire away :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 33 Play Video |
Traversing the DOM Hey all, in this JavaScript tutorial for beginners, I'll explain how we can reach into the DOM and grab content (nodes) from the DOM tree, such as elements, classes and ID's. And I'll also explain how we can search 'within' tags under different scopes to find child elements. In this tutorial we'll learn three JavaScript methods (functions) to do that: getElementsByTagName() - returns an array of objects getElementsByClassName() - returns an array of objects getElementById() - returns a single object SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 34 Play Video |
Changing Page Content Yo ninjas! In this JavaScript tutorial, I'll be showing you how to change your web page content on the fly via the DOM. To do this, we must follow two steps: 1. Reach into the page and grab a node / element 2. Change the property of that note (either innerHTML or textContent). In this video, I do sometimes refer to these properties as methods - that is my mistake, although the concept is still very clear to see. If you have any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 35 Play Video |
Changing Element Attributes Yo ninjas, so in this javascript lesson I want to build on the last tutorial by introducing the getAttribute and setAttribute methods for changing the attributes on your HTML elements. getAttribute allows us to read the value of any given attribute, and setAttribute allows us to set the attribute value to whatever we want. If you have any questions, fire away :) DOM OBJECT METHODS AND PROPERTIES - http://www.w3schools.com/jsref/dom_obj_all.asp SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 36 Play Video |
Changing CSS Styles Hey ninjas, in this JavaScript tutorial, we'll be looking again at the setAttribute method to control in-line styling of our HTML elements, as well as utilizing the 'style' property that all DOM objects have access to. If you have any questions at all, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 37 Play Video |
Adding Elements to the DOM Hey all! So for I've taught you how to change existing content in the DOM, but in this JavaScript tutorial I want to show you how to add new elements too! To do this we use the createElement method, and then insert the new element into the DOM by using either one of the following methods: appendChild(child) insertBefore(child, element) If you have any questions, fire away :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 38 Play Video |
Removing Elements from the DOM Hey guys, in the last JS tutorial I showed you how to insert new HTML elements into the DOM. In this lesson, I'll show you how to remove elements from the DOM! We can remove elements from the DOM in JavaScript via the removeChild() method. If you have any questions, fire away :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 39 Play Video |
- Introduction to JavaScript Events Alright ninjas, so I think it's about time I introduced you to JavaScript events in this tutorial. JavaScript events dictate how and when our scripts are executed, and introduce the whole concept of interactivity on our web pages. For example, when the window loads, that's an event which could fire some code. When a user clicks on a button, that's an event that could fire some code. YOUR job as a JavaScript developer is to write code that reacts to these events to create that interactivity. Any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 40 Play Video |
The onClick Event Hey ninjas / ninjarettes, in this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites. In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. Any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 41 Play Video |
Window onLoad Event So in this JavaScript tutorial for beginners, I want to show you another kind of JavaScript event - the Window.onload event! The Window object in JavaScript represents the browser window of your web page, and the onload event is the completion of your web page loading. Many times it's useful to only start our JavaScript functions AFTER the window has fully loaded, so we can use this event to make sure that happens. Any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 42 Play Video |
JavaScript Timers Yo ninjas, in this tutorial I want to teach to you the amazingness of JavaScript timers :). Timers are used all over the show in JavaScript, in anything from popup forms to image sliders. They are a cool feature of JavaScript and well worth mastering if you want to create slightly more advanced interactivity! The functions we use for JavaScript timers are: setTimeout() setInterval() Any questions, just ask :) SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 43 Play Video |
Accessing Form Elements Yo ninjas, in this JavaScript tutorial I'll show you how to access form elements and work with their properties and methods in JavaScript. In particular, we'll look at the onblur and andfocus method in this tutorial. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 44 Play Video |
VERY Simple Form Validation Hey guys, so in this tutorial I want to show you what we can do with another form method - the onsubmit method. The onsubmit method in JavaScript lets us interrupt the process of the form being sent to the server, so that we can perform some client side validation first and save time. If you have any questions, just ask :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 45 Play Video |
JavaScript Libraries Yo ninjas, in this JavaScript tutorial, I just want to give you a brief introduction to the fantastic world of JavaScript libraries. A JavaScript library is essentially a chunk of code that someone else has written (normally for a specific purpose, but there are general purpose libraries too), that can greatly reduce your work load. Any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
Lecture 46 Play Video |
What to Study Next Hey ninjas, thanks for watching this JavaScript for beginners tutorial playlist. I hope you've come some way to learning JavaScript! But there's still tonnes more stuff to cover... In the future we'll be learning all about different JavaScript libraries such as jQuery, Modernizr and maybe MooTools. In addition, I'll be making playlists on other advanced JavaScript topics such as AJAX and Regular Expressions. Stay tuned for more :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1... ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhm... ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGG... ========== 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 |
