Is there some sort of Javascript 'bible' I could use?

Hi all,

Hopefully this isn’t a silly question, but here goes.

I’ve been learning Javascript, doing tutorials etc, and now I’m trying to go through and create some projects so I can put into practice what I’ve learned.

What has struck me, however, is that while I know the syntax to write functions, if/else statements, and a whole bunch of other stuff, I don’t know much about what commands Javascript has.

For example, in html/css, I know what I need to type to make things change color/size/position etc. But in Javascript, I don’t know any such commands. I had to research how to move an element left!

So my question is, is there some sort of javascript ‘bible’, or documentation with a list of commands that I can use to manipulate elements? Thins like ‘slide’ or ‘shake’. I know I can do a lot of these things using jQuery, and that there is jQuery documentation out there, but I specifically want to understand Javascript right now.

Thanks very much for your help!

Cheers,
Fern444

6 Likes

(not srs, choose the above post)

Hey BenGitter and DevMaterial,

Thanks for the link. I’ve been reading through a lot on MDN and am finding it extremely helpful and comprehensive.

The Javascript bible looks good too.

Thanks guys!

2 Likes

I think you are looking for a static answer to “How to Program in JavaScript” or are you looking for specific details like “Under the hood of JavaScript”?

Hi Cowwy,

I suppose ‘Under the hood of javascript’ would be more accurate. Basically I want to know what things are available for me to do in javascript, which sounds horribly broad. Let me try and explain more clearly.

In html, if I want to change text color, then I know there is a command for it called ‘font-color’, or if I want to change something in CSS I know to use terms such as ‘width’, ‘transition’, and sizes. In Javascript, I don’t know what sort of term I would use if I wanted to shift an element across a page, or make it blur, or shake it etc.

Its like, in jQuery there is a command to animate something. But I have no idea how I would do something like this in javascript.

HTML and CSS is what I like to call static language that uses simple tags and attributes to define a layout and present information on a web page. CSS deals with the design aspects of HTML elements using attributes such as ‘font-size’ and ‘background-color’. These attributes are already preset there whether you use them or not just as how a light switch will be there. It is static because once is set, it doesn’t change unless it is driven by other something. Usually an event from the mouse, or keyboard.

But JavaScript is different. It is considered a high-level programming language, the purpose is to allow the developers to create dynamic webpages that can interact with the users.

The tools available in high-level programming language is unlike HTML/CSS. It heavily relies on variables, loops and decision to create the contents. This is why you don’t see things like ‘font-size’ in JavaScript, because it doesn’t actually exist. It is designed to customize and manipulate complex data which simply changing an attribute can’t do.

The confusion here is, HTML/CSS is design based language where a developer can move tags around, and changing their dimensions. Everything is almost visual. Whereas a high-level programming language is all conceptual.

HTML/CSS have tags and attributes
JavaScript have Objects, and functions

Programming languages have predefined Objects, such as Array, Math, String, Number, etc. They are build to simulate real world objects, at least they try to. Within these Objects, it has static functions/methods or constants that developers can use to help them code faster.

For instance:

Math.PI, gives you 3.1415...
Math.round( x ), will round a number
Math.floor( x ), will round down a number

But there is no such thing as ‘font-size’ to change the size of the font on the console.
What JavaScript does is to give the developer the ability to customize what HTML/CSS alone cannot.

For instance:

//If the user clicks on a button, retrieve information from an Google.

Think of it like this. The whole webpage is like a clock. It has the front-end and a back-end.
HTML/CSS - The front-end is all about the design and basic functionality, like the minute hand moves, etc.
JavaScript - The back-end is the gears that move the front-end, like how long is 1 second, how much should the gear rotate to move the minute hand by 1 minute.

Basically JavaScript can dictates what HTML/CSS can do.
jQuery is also a JavaScript file. The only difference is, all the functionality has already been written. Hence, gives you the illusion that ‘shake’ is an attribute much like ‘font-size’ to HTML.

The under the hood stuff has to do with data manipulation.
I think what you want to learn at this point is DOM (Document Object Model)
That will get you the element moving left to the right stuff. :smiley:

Sorry if this is a long reply, hope I understood what you meant correctly. :smiley:

8 Likes
5 Likes

Hi,

I think you might want to take a look at JavaScript Reference on MDN. It lists out all the properties and methods available on all the objects that are available in JavaScript by default.

Like if you look at the Array, you can see everything you can do with an array in JS with comprehensive examples.

I hope that helps.

2 Likes

Cowwy…you legend! :smiley: Thank you so much for your reply. You’ve just cleared up a LOT of confusion for me!

I totally get it now :slight_smile: Yes, a lot of my confusion was coming from being able to give commands in JQuery, since we learn that before Javascript in FCC, I was under the impression it just worked in a similar way. I see the difference now.

You understood me perfectly. Thank you for pointing me in the next direction I should go, DOM is what I’ll look into understanding now :slight_smile:

Omce again, thanks so much for your comprehensive and easy to understand post. I think you’ve saved me a world of pain there :slight_smile:

1 Like

Hi Typicaljoe111. Thanks for that link :slight_smile: A few others have pointed me in the direction of MDN and I’ll definitely be doing a lot of reading as well as checking out examples. Thank you!

If you’re looking for a textbook, I’ve heard a lot of good things about Eloquent JavaScript by Marijn Haverbeke.

2 Likes

Thanks janschreiber! I’ve had a look at the book and it seems very informative. I’ll have a more in-depth look later :slight_smile:

1 Like

Completely agree…I 'd just add YDKJS and you have the perfect resources to understand the JavaScript engine.

1 Like

Hi cangelozzi,

Thank you, I’ll add that one to the awesome list of resources you’re all recommending me. Thanks! :slight_smile:

1 Like

YDKJS and “Understanding the Weird Parts” are AMAZING to understand the Javascript engine.

For the “little details”, basic things, semantic core and syntax stuff, there are also:

and

Done the above, you are all set…perhaps I (consequently) would find just a specific course for ES6, but bottom line, you would be completely confident in JS knowledge.

DevDocs.io provides easy to access offline documentation for the most popular languages and frameworks (including JavaScript, DOM, React, Angular and the likes). I think you should check it out, it should give you everything you need for a reference.

Hope that helps.

2 Likes

@Fern444 have you tried this site?

Hey Fern444,
I’ve only been coding for about a year now and I recently took a FREE JavaScript course with Wes Bos. He goes over the basics of JS with no libraries (jQuery, etc…) used. It’s vanilla JS so you understand the basic concepts and build some cool applications along the way. I HIGHLY recommend you take a look at it.

Good luck to you!

1 Like

Hi ayoisaiah,

Thanks for linkling me Devdocs! I actually found the site quite a while ago, but then couldn’t remember what it was called -_-" Thanks for linking it to me :slight_smile: It will definitely be helpful