JavaScript’s role in Front-End

JavaScript
1

Hello all. I’m newer to code and new to the forums. I’ve done the html/css sections of freecodecamp and I’m currently in the JavaScript section. I’m struggling with JavaScript. One of the things I’m struggling with in general is visualizing how certain concepts are relevant to front-end development. I can see how things like recursion, arrays, for loops etc could be used for the back-end but how is it used generally on the front end side?

Also, would there be any good resources to help me better think like a programmer? A lot of the questions on freecodecamp are worded in such a way that I’m having a hard time understanding what is actually being asked.

2

Roughly speaking, any time you see the local website change, that’s Javascript. The more complicated things you want a website or web application to do, the more complicated features of JS you need.

It’s hard stuff though - JS is harder than HTML. If you don’t know what a question is asking you to do, that’s a great time to ask a question on the forum. Converting a written description into a list of things that need to become code is a hard skill in itself.

3

You need JavaScript to make “dynamic” interactions on the webpage. In other words, you need JavaScript to change the document as the user is sat there looking at it.

Here’s a little counter app I wrote. It uses JavaScript to react to a user clicking the button, and dynamically updates the text on the page.

4

Thanks for sharing! That’s helpful. Question though….how do you link the html and css to JavaScript?

I know how you link html to css. You could do it like this for example…with a link rel and an href.

What would the equivalent be to link JavaScript?

5

In the most basic case, you can write your JS inside a script tag.

<script>
  document.write('Hello World');
</script>

But if you write your JS in another file, you can set the src attribute.

<script src="my-javascript-file.js"></script>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#basic_usage

1 Like
6

Thanks! That makes sense. How did you link it in your counter? Asking because I don’t think I saw the script tag in there.

7

Ah, CodePen does all the linking between your HTML, CSS, and JS for you behind the scenes… Which is convenient for the kind of stuff you write on CodePen, but not very helpful for a learning beginner, huh.

Here’s what the HTML it spits out could look like (assuming the CSS editor’s contents are in a file called “styles.css” and the JS editor’s contents are in a file called “script.js”):

<html>
  <head>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    ...all the stuff inside the HTML editor...
    <script src="script.js"></script>
  </body>
</html>
1 Like
8

That makes sense. Thanks for clarifying!

9

To think like a programmer you need to know how to program. Programming using recursion, arrays, for loops, etc., are all part of programming - backend or frontend. Lot of practice and decent knowledge of the programming language (in this case the JavaScript) are required to be a programmer - then you will be able to think like a programmer. And, its no different for front-end programming, though there will be scripting with HTML and CSS.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.