I understand Javascript but can't write code

I understand Javascript but can't write code
0.0 0

#1

Okay, I have been studying Javascript for awhile. I understand the syntax of JS, I know functions, objects, arrays, data types, etc etc…
However, I can’t write javascript. For example, here’s a question online, "Write a JavaScript program to display the current day and time in the following format. Sample Output : Today is : Friday. Current time is : 4 PM : 50 : 22"
I wouldn’t even know where to start. My brother who has been a software engineer for 20 years says I need to learn how to think like a computer. But, I do not think this is the problem.
It seems that I can comprehend Javascript but I can’t wrap my brain around solving the problems.

Could someone give advice to me before I give up on programming?


#2

Completely putting aside the “think like a computer” thing, what do you mean when you say you’ve been “studying” javascript? Have you actually been writing javascript?


#3

Hi, thanks for the reply. Yes, I have been writing javascript through courses like codecademy, treehouse and udacity, maybe it hasn’t been enough but I am not sure where else I can write javascript. I was actually half way through my B.S in web development but had to drop out because I couldn’t write javascript code when told to do a certain task.


#4

Those courses you mentioned don’t give you a certain task and require you to write a solution?

The ability to read code isn’t as close to the ability to write code as many people like to think.


#5

Then, that’s my problem, I do not have the ability to write code.


#6

The only way to learn it is by doing it. If the courses you’re doing don’t require you to actually write code, then it doesn’t seem like they’re doing you much good. I suggest working on Free Code Camp from the beginning of the JavaScript section. Always write your own code. Never copy-paste. See how that works.


#7

See if you can understand the code I have written below which solves the online question you could not figure out how to start. It is fairly crude code, but it accomplishes what the question asked.

<!DOCTYPE html>
<html>
<body>
  <div class='datetime'></div>
  <script>
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var d = new Date();
  var day = days[d.getDay()];
  var time = d.toLocaleTimeString().split(' ');
  var ampm = time[1]; // 2nd element contains AM or PM
  var [hour, min, sec] = time[0].split(':'); // first element contains hour:min:sec
  var formattedDateTime = `Today is: ${day}. Current time is: ${hour} ${ampm} :${min}:${sec}`;
  document.querySelector('.datetime').innerText = formattedDateTime;
  </script>
</body>
</html>

#8

I noticed you said:

I have been writing javascript through courses like codecademy, treehouse and udacity, maybe it hasn’t been enough but I am not sure where else I can write javascript.

If that means you are only writing javascript code in the environments they provide on those websites you are probably going to feel constrained.

In my experience I’ve learned the most through getting my hands dirty and experimenting by playing with code in less constricting environments.

I experiment in three main places:

  • Actual files on my computer (my dev environment where I run a local webserver).
  • Google chrome dev tools. (Typing stuff in the console or using Snippets).
  • The repl.it website.

When you don’t understand what is happening with your code start breaking it down into the smallest pieces possible and experiment with those.

For example just now I’m playing around with the Date object in the console.

If I type Date in the console it returns ƒ Date() { [native code] }.

Typing Date() returns "Fri Feb 23 2018 16:49:42 GMT-0800 (Pacific Standard Time)"

Typing new Date() returns Fri Feb 23 2018 16:50:27 GMT-0800 (Pacific Standard Time)

Hmm what’s the difference? Date() returns a string but new Date() returns the same but without the quotes, why is that?

typeof Date() returns “string”
typeof new Date() returns “object”
typeof Date returns “function”

Maybe this generates more questions that you can pursue like what does the new keyword do?

Explore the MDN docs but maybe the mdn docs look to complicated, too much info. Go ahead and try stackoverflow or even w3schools or look up a youtube vid, anything that helps you move forward.

Browsing through the MDN docs just now I see they have a section called Conversion Getter that shows some built in methods available to return nicely formatted strings.

let d = new Date(); // Create a new date object
let theDate = d.toDateString();
let moreDate = d.toLocaleDateString();
let theTime = d.toLocaleTimeString();

console.log(theDate); // Gives me "Fri Feb 23 2018"
console.log(moreDate); // Gives me "2/23/2018"
console.log(theTime); // Gives me "5:33:31 PM"

#9

What is assigning variables like this var [a, b, c] = "Oh hi there".split(" "); called?

I haven’t run in to that before.


#10

@br3ntor Destructuring Assignment


#11

Just my two cents on what helped me get past the block you are describing. Early on in my dev career, a coworker said to me “I’ve never seen anyone just sit down at a computer and code out a solution.” What he meant by that, is that a lot of developers will simply copy and paste a function or method, change a few things, iterate until it’s working and call it good.

I took this as a personal challenge to demonstrate that coding can happen on the fly without google being involved! After 12 months of no copying and pasting allowed, I can sit down with a client and my macbook and rip lines straight from my brain onto the screen.

I’m not saying that is exactly your problem, but if you can read it and understand it, eventually you will be able to write it. I always start with a main function and then go deeper. If that main function requires Dates/Times, Random hash strings or whatever, those functions/variables/arrays get written as they are presented as requirements.

Short version - the tried and true method of see it, read it, write it, do it again until it sticks will prove out over time.

Good luck!


#12

As you said yourself I think the problem is less you can’t write code, and more you don’t know how to approach coding problems. Don’t worry though it’s probably not that you’re a bad problem solver, I too often found exercises like those when I first started out weird. I didn’t understand where to start or even often why anybody would bother. I think it helps to start with really practical problems, preferably problems you actually have. Like things you could technically do by hand but a computer could do better.

For example, one of my first small programs was a calculator that calculated how long it would take to finish a book based on how many pages I’d read in a certain amount. Often I found it helpful to just go through the solution manually on paper and forget about the code (in fact I still do this sometimes). First what did I need to know? (total pages, pages read, time to read pages read). Then I’d write out the math or dummy code. Only then would I transfer that to code. Other similar problems were financial problems, simple calculators for how much you’d really pay at x interest over x months. Stuff like that.

I kept all this in a coding notebook (using python and jupyter, now you can use something like nteract which is a piece of cake to set up with node/javascript) where I also kept all my notes handy. That way it was easy when I forgot how I did something to look it up.

But first, ignore the code, learn how to break apart problems to solve them with algorithms first. Write dummy code even if it might not translate to javascript. Don’t try to force it though. Like with your example. If I tell you to write down today’s date and time in a certain format, you can do it right? Well, stop yourself and think how. If I give you the string 1/3/2018 16:24:00 you can parse that right? You know the current format is D/M/Y H:m:s. So given that you know you only need the variables D H, m, and s. The day is the most complicated, you can look up how this is calculated or see if there’s some easier method to get it (there is). Then with the hour, you’d need to know if it was over or under 12 to determine if it’s AM or PM, and then convert it if it’s > 12. Then just concatenate everything together.

If you can solve the problem you’re given without code, you can solve it with code.

You have to learn to decouple the code from the algorithm. Code is just a way to express said algorithm/s.


#13

I thought I had this problem too. I thought that I didn’t know how to write code even though I understood it when I see it. However, I realized that to solve stuff like that, what I needed to do is to write a list of things that I think I should do (or the instructions I should tell the computer) in order to solve the problem. Essentially, I was writing the algorithm and some pseudo code.

Then, I would translate that into code that I know.

If it’s something I don’t know, I would search for a solution on google which usually leads me to a stackoverflow post.

I just keep repeating that process and eventually I gained more confidence. I am not an expert. But at least, I trust myself more.


#14

What have you already done? To find out where exactly you get stuck, I’m going to give you five main tasks: Read them, try them out and tell me what you can or cannot do and where you get stuck.

  1. Look up info on dates There are many sites. Check out FCC, of course and try W3Schools.com. Great for starters.
  2. Look at the examples and write something in a text editor. Do you know what I mean? I’ve been using Notepad++. (easy download)
  3. You need to connect the code with some html. Make a basic html-page and put your code in script tags. Find a way of connecting the javascript with a tag in html. (a div tag or a p tag).
  4. Save as an html file. Open up the file and watch what happens.
  5. Open up a console in your browser (which one are you using) and look at the source code. Set breakpoints (does that ring a bell) so that you can test out your code and see what happens why.

Get back to me and tell me what has happened. You may simply be stuck because you can’t connect all the pieces of the puzzle. You see them, you know what they’re about but now you need to connect them.

Karin .


#15

If I have to think like a computer to learn how to code, i am sooooo gutted!

I am learning how to code and havent even finished all my front end challenges yet. However, i think it’s easy to get bogged down on what you don’t know. I’ve found that fCC is all about learning and that involves Read-Search-Ask/ Pair programming and so on.

I went to an interview recently and the interviewer told me. “It’s not what you know, it’s how well you can google the solution” He put it a lot better than that. But give the tips/hints a good go and if you have to look at the answer, break it down and explain to your own brain what the computer must be thinking. Make sense? After seeing a few hundred projects, your brain will start thinking like a programmer. It’s slow but the only way is up; or atleast I hope!

Thinking like a human is great for programming! The end goal is to get a computer to think like us so you’re halfway there!

Hope you didnt give up and Good luck!