Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 3
Message 1 of 7

Best Way to Learn JavaScript?

Beginner level student looking to learn JavaScript. What's the best way to learn? I'm also looking for people to learn with or code mentors.

6 Replies
Highlighted
Copilot Lvl 3
Message 2 of 7

Re: Best Way to Learn JavaScript?

Hi,

 

When I was learning JS I took a hands-on approach to learning; I'd read a couple of tutorials and try out what I learned. If I couldn't remember something I'd go back and re-read, and if I was really stumped I'd search for a solution in good ol' google.

 

Anywho, if you're just starting out you'll want to find a place to learn JavaScript. Personally I recommend MDN because they have in depth information on the language and an extensive reference. People also recommend w3schools because of it's "try it yourself" examples. It's not bad, since it's geared more towards beginners, but you'll want to move onto more advanced sources once you have a grip of the language. They're both decent (I've used them in the past, but use MDN more now), so pick whichever one works best for you.

 

A great thing about JavaScript is that you can use it on any webpage. If you want to experiment with what you've learned you can open the developer tools (F12, CTRL+SHIFT+I, right click>inspect) and write/execute code in the console to manipulate the page, make calculations, etc.. I did this a lot when I was first learning, since it allows you to see first-hand the effects of what you write. Furthermore the console will let you know if there are any errors in your JS, so if something is not working I highly recommend checking your console for errors.

 

Last but not least, try working on a few personal projects that make use of JavaScript. For example, try making a mock website, an application, or even a game. It'll give you a LOT of practice. (You'll want to get an IDE for programming too, such as Notepad++) One of the first projects I worked on to practice JavaScript was this silly little game. The code is horrid -- heck it doesn't even use the canvas api, but I learned a lot while making it, such as loops, debugging, functions, and so on.. I also wrote a crap ton of plugins and helped people with forum issues over the years that added to my experience, but that's another story.

 

I hope you find some of this helpful, even if I rambled a bit. :smileylol:

 

P.S.

I don't really consider myself a professional when it comes to JS; I'm self taught, so if anyone wants to add to what I've written feel free.

Copilot Lvl 3
Message 3 of 7

Re: Best Way to Learn JavaScript?

Thank you! I know of MDN and W3Schools but I have yet to go through any of their tutorials on js. I'm brand new noob. Just about 5 weeks into learning hmtl and css or any sort of programming. I've sort of got a grasp of functions/methods/objects. I guess I need more work on understanding the anatomy of the language because once they start stringing multiple things together with periods or commas I start to lose what's going on. Is it a method, object, class, ect. I've been using the inspector/console on a couple snippets of code I found and one dropdown menu from W3Schools that opens but will not close no matter what the heck I do to it. It's just not as forgiving as css haha. I have a school website and that's what I've been practicing on.

Copilot Lvl 3
Message 4 of 7

Re: Best Way to Learn JavaScript?

No problem. 

 

In regards to the periods, we use those to access properties of objects and html elements which happen to be objects too (everything is an object in JS) -- the technical term for it is "dot notation". There's also bracket notation too which. can come in handy if the property of an object contains a space, invalid character, or we want to access it using a variable. I'll give you few examples of how it works.

 

Take this snippet for example:

document.body.style.background = 'red';

 

If you run this in the console it sets the background of the page to red. First we start with the document (this is the page we're viewing) then we access the body property of the document (which returns <body>), to change the styles of the body tag we access the style property (this returns <body style="">), then to set the background color we access the background css property and set the value to 'red'. (<body style="background:red;">) In the case of properties like background-color we write them as backgroundColor (camelCase) in javascript when accessing them in this manner, since the dash would be an invalid character.

document.body.style.backgroundColor = 'red';

To sum things up JavaScript works alongside the HTML you write and can be used to manipulate it. All the HTML properties you see can be accessed in this manner, although there's a few discrepancies such as class being className, for example. Here's a final example with a generic DIV element.

 

HTML:

<div id="myDIV" class="something" style="background:blue;color:yellow;">Hello world !</div>

JavaScript used to manipulate this element:

var div = document.getElementById('myDIV'); // returns a <div> with the id of #myDIV

// below we access all of the properties listed on the HTML element above.
div.id; // returns "myDIV"
div.className; // returns "something"
div.style.background; // returns "blue"
div.style.color; // returns "yellow"
div.innerHTML; // returns "Hello world !"

 

Aside from HTML elements, the same method can be used with objects. Here's a simple object:

var stuff = {
  lang : ['English', 'French', 'German'], // this is an array btw
moreStuff : { html : '<div>some div</div>', foo : true, bar : false } };

All of these properties can be accessed in the same way:

stuff.lang; // returns ["English", "French", "German"]
stuff.moreStuff; // returns {html: "<div>some div</div>", foo: true, bar: false}
stuff.moreStuff.html; // returns "<div>some div</div>"
stuff.moreStuff.foo; // returns true
stuff.moreStuff.bar; // returns false

If you paste the object in the console and execute it, it'll define the object, after this you can type "stuff" and it'll return the object. It should contain arrows used to collapse/expand the object to see it's properties. The best way to think about all of this is to imagine a bunch of folders and sub-folders that contain files with specific data. We can access these files and return their data (which is similar to viewing/reading) or we can access them and change their values. (which is similar to writing to a file)

 

Hope that helps clarify a few things for you.

 

Haha you're right that it's not as forgiving as CSS, since this is a full-fledged programming language with logic and conditions. Just one typo or missing semi-colon can cause you hell !  :smileytongue: If something isn't working try opening your console to see if there's any errors; they usually appear red and provide information on where the error occurred so you can rectify it.

Copilot Lvl 3
Message 5 of 7

Re: Best Way to Learn JavaScript?

Thinking about it as folders and subfolders really helps out. I thought about links that way but not anything dealing with js. I've started going through the MDN tutorials and understand the smaller scripts but I don't think I can write them quite yet. I'm still a little vague on the i or i++ and "this" properties but I think I'll get the hang of it. Thanks again!

Copilot Lvl 3
Message 6 of 7

Re: Best Way to Learn JavaScript?

You do see `i` fairly often in regards to loops, usually when working with arrays, but it's just another variable; it can be `j`, `k`, or anything you want. When working with arrays it refers to the index of an array's item, and when working with numbers it's just a count of how many times the loop has been executed. `++` increments the value of `i` and `--` decrements the value.

 

The placement of these operators can be important. Post-incrementing (i++) increments the value of `i` after it has been executed, so the value at execution will be the value before `i` was incremented; 0, for example. If you check the value after post-incrementing it'll be `1`. Pre-incrementing (++i) does the opposite; it increments the value of `i` before it has been executed, so right off the bat it'll return `1` if the starting value was 0. Here's an example :

var i = 0;
console.log('i++ : ', i++); // 0
console.log('i : ', i); // 1
console.log('++i : ', ++i); // 2
console.log('i : ', i); // 2

Decrementing works the same as incrementing. Counter variables like this are normally used for loops, such as when going over an array's items. Here's a quick example of that :

var items = ['Pen', 'Pencil', 'Marker', 'Brush'],
    i = 0, // starting index; items[0] // returns "Pen"
    j = items.length; // the amount of strings in the items; 4

for (; i < j; i++) { // execute this block while i < 4
  console.log(items[i], 'items[' + i + ']');
}

It should write out each item in the array along with the index it can be accessed. Without looping over the array, we can normally access it's items like so :

var items = ['Pen', 'Pencil', 'Marker', 'Brush'];
items[0]; // Pen
items[1]; // Pencil
items[2]; // Marker
items[3]; // Brush

 

As for this, it's a keyword and the value is determined by how a function is called. When used in the global namespace it's a reference to window (this == window // returns true). When used in a function it's a reference to the parent object -- this can be window if the function was defined globally or an object that the function was defined in. Here's an example :

// define my func
function myFunc () {
  console.log('myFunc EXECUTED');
  console.log(this); // window
};

// define our object and it's props
var myObj = {
  num : 10,
  str : 'Hello world !',
  func : function () {
    console.log('myObj.func EXECUTED');
    console.log(this); // myObj
    console.log(this.num); // 10
    console.log(this.str); // "Hello World !"
  }
};

// execute our functions
myFunc();
myObj.func();

Basically `this` is a reference to the object your function was defined in.

 

In the case of HTML elements you can use `this` in their functional attributes, and `this` refers to that HTML element.

<span onclick="console.log(this);">HELLO</span>

It can be a little confusing at first, but constantly console.log'in stuff really helps. You'll get the hang of everything in time though. Keep it up !

Ground Controller Lvl 2
Message 7 of 7

Re: Best Way to Learn JavaScript?

If you are very new to Javascript, I would recommend some video tutorials. These Video tutorials are an easy way to learn some basics of Javascript, then you can learn further from MDN or any other website which got in depth topics and references.

here is a link for one video tutorial : 

http://www.pragimtech.com/javascript_video_tutorials_for_beginners.aspx

They got series of tutorials each with examples.