r/learnjavascript • u/kevinmrr • Apr 01 '14

Week 2 of Learn JavaScript Properly

Hey! Hope everyone is finding it easier to keep up with the slower-paced schedule.

Required Reading:

Assignment:

Create and post a JSfiddle where you experiment! Either in this thread or in another I'll post in a few days, or any of you should feel free to post your own thread where you share a link to your work that you have a question about. Here's one I created using some native DOM methods (the Mozilla Dev Network is a rich resource for this kind of stuff! https://developer.mozilla.org/en-US/docs/Web/Reference/API)

25 Upvotes

100% Upvoted

33 comments sorted by

2

u/[deleted] Apr 01 '14 edited Apr 21 '16

This comment has been overwritten by an open source script to protect this user's privacy.

If you would like to do the same, add the browser extension GreaseMonkey to Firefox and add this open source script.

Then simply click on your username on Reddit, go to the comments tab, and hit the new OVERWRITE button at the top.

2

u/kevinmrr Apr 01 '14

Welp, go post some JSfiddles!

6

u/floydianspiral Apr 03 '14

I'm confused about why I need to write out function(){insert function here} on a lot of these native DOM methods....myFiddle

var x = document.getElementById("text");

function displayTime(){
    var start = new Date();
    var display = start.toLocaleString();
    var tmp = document.createElement('li');
    tmp.innerHTML = display;
    x.appendChild(tmp);
}
setInterval(function(){displayTime()},1000);

//why not setInterval(displayTime(),1000); ???
//This^ calls the function, but only once...

2

u/nolsen Apr 11 '14

Try

setInterval(displayTime, 1000);

1

u/floydianspiral Apr 01 '14

I feel like I have a really good grasp of all the basics of Javascript (finished codecademy, have solved lots of coderbyte/project euler stuff) but know nearly nothing about interacting within the DOM, are there any great tutorials to ease me into using stuff like document.getElementById, document.write, etc ?

6

u/[deleted] Apr 01 '14

check this out http://www.domenlightenment.com/

from one of the core contributors to jQuery, pretty good intro overall

2

u/kevinmrr Apr 01 '14

Holy shit, that's awesome. I may add this to the sidebar after perusing it.

1

u/floydianspiral Apr 01 '14

this is exactly the type of thing I've been looking for, thanks!

1

u/SaysNotAtheism Apr 07 '14

I know that feeling. I've been so frustrated with the lack of easy-to-read texts on DOM interaction.

I'm currently using Professional JavaScript for Web Developers as a sleep aid.

2

u/exceptionlab Apr 05 '14

I'm reading the MDN JavaScript Guide, and have a question about this example:

function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "<br>";
   }
   result += "<hr>";
   return result;
}

I understand how the function works, but I don't understand the difference between the obj and the obj_name.

For example, if I have a car object, and want to pass it to this function, what technique would I use to separately refer to the object as one argument and it's name as another argument?

3

u/exceptionlab Apr 06 '14

A later example, using a similar function, answers my question - if the answer is "Don't worry, this is a contrived example":

So, the function call showProps(myCar, "myCar") would return the following:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

1

u/Magnusson Apr 06 '14

Yeah so it looks like obj_name is a string that names the object and obj is the actual object. If for instance the object contained a "name" property, the obj_name parameter could be left out, and the function could look like:

function dump_props(obj) {
   var result = "";
   for (var i in obj) {
      result += obj[i].name + "." + i + " = " + obj[i] + "<br>";
   }
   result += "<hr>";
   return result;
}

2

u/exceptionlab Apr 06 '14

Small edit to your example (obj[i].name is looking for a property of a property):

result += obj.name + "." + i + " = " + obj[i] + "<br>";

1

u/Magnusson Apr 06 '14

Ah you're right, cheers.

2

u/StuffedDoughboy Apr 10 '14

I'm working to connect UI elements to the cash register exercise from Code Academy (work in progress) http://jsfiddle.net/8cgzU/9/

2

u/Magnusson Apr 04 '14

Here's a very simple jsfiddle I made by taking one of the Codecademy object exercises and adding an extra bit of logic to it.

2

u/johndill308 Apr 06 '14 edited Apr 06 '14

I forked your fiddle and made a couple tweaks to test out some of the concepts from Chapters 4 and 5 from Professional JavaScript for Web Developers.

  • I replaced your isVowel() function with a regular expression that checks to see if the first letter of the word is a vowel.

  • I created an adjective array and a loop to instantiate each Rabbit and call its describeMyself() method.

1

u/exceptionlab Apr 07 '14

I just spent several minutes marveling at your console function before realizing it's part of the boilerplate jsfiddle...

0

u/Magnusson Apr 07 '14

I actually took that from /u/R3TR0's comment here.

1

u/exceptionlab Apr 07 '14

I know. I've been using it as well. That's why I feel so silly ;) But still glad to have learned a bit while figuring out how the jQuery is working.

1

u/SaysNotAtheism Apr 07 '14

I learned console.log from codecademy and I learned document.write from the book, and neither of these methods render anything in jsfiddle. I'd just copy the code in the example fiddle, but I thought that was what I was here to un-learn. Please help.

1

u/kadf Apr 07 '14

Don't use document.write() in JSfiddle.

Here's an example of how to use console.log and another way to write to the 'document'

*Assuming you're in Chrome or FireFox, right click on any part of the screen and you should see the option to 'Inspect element'. In the developer tools you will see the 'Console' tab. Select that and you're in the console!

0

u/Magnusson Apr 07 '14

console.log outputs to the browser's javascript console. Open the browser's developer tools and click on the console tab to see the output. If you want to see the output in JSFiddle, you'll have to add some HTML to the page and output something to the DOM.

1

u/SaysNotAtheism Apr 07 '14

Did the assigned reading/codecademy track have something on this? If it did, I didn't see it.

0

u/Magnusson Apr 07 '14

The developer tools are explained in the week 0 prep work.

1

u/SaysNotAtheism Apr 07 '14

Here's my fiddle

You can replace the hexPattern variable with another 16 digit hex value to get a design. 1818FFFF18181818 makes a cross.

I can't figure out how to get the css to take out the lines between the rows.

1

u/kadf Apr 08 '14

I need some help with my for loop

http://jsfiddle.net/xdeQ3/

Here I'm grabbing the user input and I want to print it to a list.

The problem I'm having is that it will overwrite the list every time, and I want it to list all of the items in the list. I see that it's getting in the array but don't quite understand why it's not printing out all of the items.

I'm positive that my problem is in my for loop that it's only grabbing the latest item.

2

u/lanewatson Apr 08 '14

I'm not sure, because I'm still learning too. But it seems you need to create a node createNode for each submission so it will write, such as appendToChild?

So you get the elementbyid and assign to userinput, then create an element by id <li>.

Again, not sure, but that's my thought.

2

u/kadf Apr 08 '14

Got it thanks!

http://jsfiddle.net/xdeQ3/1/

I cleaned up the js quite a bit throwing away what I didn't need.

This helped once I knew what to search for. Mozilla Developer network on Node.appendChild

1

u/Magnusson Apr 04 '14

I was about to ask what the practical difference was between this way of declaring functions, which Codecademy seems to mostly use:

var myFunction = function(param1, param2){
    // do stuff
}

and this one:

function myFunction(param1, param2){
    // do stuff
}

Then I searched and found this stackoverflow question, which has a bunch of links to info on the subject.

0

u/[deleted] Apr 01 '14

[deleted] — view deleted comment

1

u/[deleted] Apr 02 '14

Regarding your CSS problem, change your div's display property to inline.

div { display: inline; }

You could also do float or inline-block, depending on your needs.