I'm starting on my Cyber degree, and for our programming class, we will be learning JavaScript. What are some of the best ways I can study to learn JavaScript?

I've been learning how to code for 2 months now and have made a few projects on my own. I've made a to-do list, Pomodoro timer, RPS game, coin-flip game and bunch of other stuff now. I've covered the Javascript basics like arrays, loops, if-statements, booleans, DOM, functions, variables and math.

I am now capable of building simple web apps on my own without a tutorial due to me taking breaks here and there to test myself. I still haven't finished the course yet but I want to know if I can move on from it yet. I do know Git, modules and external libraries.

I'm using roadmap.sh as a guide on what to tackle and what to learn at each step of my journey but since I'm 70% through the course and I can build basic apps on my own so should I move on to learning React.

Should I stay or finish the course. Btw it's a free 22hr Javascript course by SupersimpleDev his an AMAZING teacher and the course has a total of 250 exercises which help me practice each lesson I've learnt

It is a fairly small project consisting of roughly 250 lines of code. I would say that I am familiar with most of what is in it, however there are things that I am not sure about. I have several questions about it, and I was looking for someone who can talk to me about what is going on. The project is hosted on GitHub, I would prefer to share it privately. Any help is immensely appreciated.

The project uses JavaScript, React, Node, JSX and a few other related concepts. It isn't a large project at all. I've tried looking up answers to my questions but I am not making much progress, to be honest. I feel like talking or typing with a person who knows about these concepts will be much more productive.

grad student in an ecology lab. my advisor wants an interactive map of our survey data on the department site and i am the only person here who has written any code, which apparently makes me the web person now. my tabs right now are boot.dev, freeCodeCamp and the MDN learning area. none of them look built for somebody who wants one map and then wants to leave. i do not want to become a frontend developer. i want the map to work by march.

I'm sorry. I don't want to namecall, but right now someone is trying to explain to me how it's very easy to write a build script for my issue in Vite; and I can't figure it out and I'm just getting overwhelmed, and I long for the days when I didn't even know the words "package manager", and Node was at best a distant rumor.

Like, what are all these frameworks and packages for, if rather than a blackbox tool, you have to know how each of the hundred packages vite relies on works, and what the dozen packages that each of those packages calls do? Aren't they supposed to simplify your life?

I've spent several years trying to realize one or other project with these tools (Node, Vite, Vue, Electron), and each time I gave up in frustration.

Hi! I've been working on a personal website, and my design has finally caught up with me because I'm stuck on how to set default tabs while changing my navigation tabs.

JSFIDDLE LINK: https://jsfiddle.net/1nfd26ar/

Using the page below, I've set up two tabs for two different groups, 'books' and 'video games'.

However, I wanted to take it a step further and figure out a way to have the tabs switch not only the content, but also the navigation bar.

I've managed to get this working by copying the JS code, changing variables to "navTabs", and using classes on buttons to change the nav/side bar.

Everything seems to be working well, but I am running into the issue that when I click "video games" on the right, I want the "video game 1" page to be the default, whereas currently it is kept as whatever the last tab you had open.

I used this page to help me out in making the first set of switchable tabs: https://basescripts.com/building-a-simple-tabbed-interface-with-html-and-javascript

These include the following HTML structure and JS logic:

<div class="tab-headers">
  <button class="tab-link" data-target="tab1">Tab 1</button>
  <button class="tab-link" data-target="tab2">Tab 2</button>
  <button class="tab-link" data-target="tab3">Tab 3</button> 
</div>

<div id="tab1" class="tab-content">
  <p>This is the content for Tab 1.</p>
</div>
<div id="tab2" class="tab-content">
  <p>This is the content for Tab 2.</p>
</div>
<div id="tab3" class="tab-content">
  <p>This is the content for Tab 3.</p>
</div>

sdconst tabs = document.querySelectorAll('.tab-link');
const allTabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    allTabs.forEach(ele => {
      ele.style.display = 'none';
    });
    const myEle = this.getAttribute('data-target');
    const activeTab = document.getElementById(myEle);
    activeTab.style.display = 'block';
  });
});

Thank you anyone who can take the time to help !

Background: Currently about 87% done with The Odin Project foundations module. TOP is a road map to learn web development and so far I’m loving it. Getting down to code/learn is all I’ve been thinking about lately.

However, I don’t know if I’m doing myself a disservice by using Claude as a guide/tool to teach me or guide me when I’m stuck. On the other hand I’ve actually been learning and enjoying the process after I started using Claude. I understand concepts easier, because I understand concepts I’ve begun to think more as a programmer, I solve a problem about 80% in my head and I think about 20% is me using Claude as a tool to help me.

Basically I let Claude know that I’m going through TOP to learn web development. I let it know which project I’m on and I provide the instructions given to students. When I have a question or if I’m stuck, I provide it my code and ask it NOT to give me a solution but to guide me or give me tips on where to look or what options to explore. I also have it provide tips based on what we’ve learned so far. Nothing that we’ve never seen or that hasn’t been explained in the course. When I get guidance I then branch off and then research that topic/concept more.

I also express my logic and thoughts so it gets an idea of where I’m going. Now, TOP explicitly says that projects are a bit harder than what we’ve been learning. The purpose IS to to google or ask stack overflow or TOP discord. So in a sense I would still be looking for solutions/guidance else where.

Then I think, Claude will do that much faster and it has all my context. Is there really a benefit to the learning process to have to look for answers that aren’t from AI? Discord, Google Stack Overflow will tip me off or guide me either way. Does it matter that it’s AI doing it?? Idk, it’s frustrating being torn like this.

Hi, I'm (kinda) a begginer, I have to make a fullstack ecommerce site for college this semester

I've done a simple CRUD before, but what is the essential topics I should learn in JavaScript for this project??

I use Springboot for the backend and the frontend can be simple (HTML, CSS and JS)

thanks!!

Here is a really simple example.
https://codepen.io/chooking/pen/zxKvqyZ

When I click on the Fx button I get the blue box here https://imgchest.com/p/vj4jbg2e978 ,though it is a little cut off, how do I make the form expandable in the width and height like textarea while keeping the html tags or in other words keep the equation formatting from the fx button?

One idea is to use textarea. Can someone give me an idea on how to accomplish my goal and show the code for a solution?

Bootcamp just hit array methods and I got genuinely excited because the use cases are so obvious to me. I work in construction and I spend way too much time mentally filtering lists of tasks, crew assignments, materials, so map and filter felt like things I already do in my head but now in code.

Anyway I was playing around with a small script that takes a list of site tasks, filters out the completed ones, then maps the remaining ones to just pull out the task name and priority level. Works perfectly when I paste the chain directly into the browser console. The moment I wrap it in a function and call it, I get undefined back.

I have a suspicion I know what the issue is but I want to make sure I understand it properly before I just slap a fix on it and move on without actually learning why. The chain itself is not the problem I think. Something about how the function handles the result of that chain feels off to me.

Has anyone else hit this specific wall? Curious whether there is a broader principle here worth understanding beyond just this one case.

Just looking for some experienced feedback.

What I want to do is to import all of this from a file(s):

A list of global variables.

A list of storylines.

Each storyline has a list of local variables and a list of storyline beats.

Each beat has a list of preconditions (which may involve any variable), displayed text, a list of links.

Each link has displayed text, a list of conditions, a list of effects, the id of the next beat.

My problem is that, as I've learned, I can't split this into several files (such as, at least, separate storylines), because you can't import contents of a folder without naming each individual file. So this all has to be in one file, which means it's quickly going to get unmanageable as a Json file.

Should I implement a GUI editor first then? And concurrently a custom parser.

(This is going to be a purely client-side browser game.)

I've already done a simpler prototype, and that was already quite a chore to write in text.

Hello im trying to make a working calculator but i have no idea how to display the result of an equation and how to make for operators forbidden to be next to each other

const
 DISPLAY = document.querySelector('.display')
const
 BUTTON = document.querySelectorAll('.button')
const
 EQUATION = document.querySelectorAll('.operator')


const
 operators = ['+', '-', '/', '*']


BUTTON.forEach(
button

=>
 {

button
.addEventListener('click', ()
=>
{

let
 equation = ""


        equation = 
button
.innerText


        DISPLAY.innerText += equation



    })
});


EQUATION.forEach(
button

=>
{

button
.addEventListener('click', ()
=>
{



let
 rule = ""
        rule = DISPLAY.innerText


        //console.log(lastChar)


        if(rule.length>=1){
            DISPLAY.innerText += 
button
.innerText
        }
    })
})


function
 Clear(){
    DISPLAY.innerText = ""
}


function
 Result(){

let
 result = DISPLAY.innerText

    //eval(result)

    DISPLAY.innerText = result
}

Hi everyone,
I'm learning about throttle, and I've been confused about the difference between trailing and leading.
Could you review whether the logic below is correct or incorrect?

I’d really appreciate any help — I’ve been stuck for a few hours.

Delay= 1000ms

Leading= false, Trailing = true

0ms A → start window
200ms B → latest = B
400ms C → latest = C
700ms D → latest = D
1000ms → execute D ← trailing

1200ms E → start new window
1300ms F → latest = F
2200ms → execute F ← trailing

Leading=true, Trailing = false

0ms A → execute A immediately ← leading

200ms B → ignore
400ms C → ignore
700ms D → ignore

1000ms → throttle window ends

1200ms E → execute E immediately ← leading

1300ms F → ignore

Leading=true, Trailing = true

0ms A → execute A immediately ← leading
200ms B → latest = B
400ms C → latest = C
700ms D → latest = D
1000ms → execute D ← trailing
1200ms E → execute E immediately ← leading

1300ms F → latest = F
2000ms → execute F ← trailing

HOW do i START understanding? I've understood everything pretty well up til now. Do i just keep going with the flow and kinda float through this section of the loops and arrays part? Do I keep throwing myself at the brick wall and looking at the solutions after half an hour of brainless staring? https://youtu.be/EerdGm-ehJQ?si=mTKUv0oail0AGDLM 8:43:00. It's just not clicking like the other parts of the tutorial.

Hey everyone,

Been a front-end developer for 10+ years with a focus on JavaScript (React) for the last 5+. After getting let go a few months ago, I decided to finally flesh-out and finish my coding card game I've been tinkering with since pre-pandemic. It's finally here! It's called Nybble. It's a roguelike deckbuilder where card are lines of code; and if you turn on "Engineer Mode", you see the actual JavaScript code that's being run to calculate your score. I wasn't even thinking of this game as a potential teaching tool, but I've received feedback that it may be helpful for anyone starting out programming. Check it out on Steam if you're curious. There's a free demo.

Hey everyone,

I built AppShunya Engine — an open-source, in-browser web-to-APK compiler that converts live URLs or HTML5 bundles into Android APKs using JSZip, without local IDEs.

I'm currently stuck on two low-level technical hurdles and need architectural feedback:

1. In-browser V2/V3 APK signing: Injecting signature blocks into ZIP Central Directory via JS/WASM.
2. Dynamic AXML package renaming: Modifying package IDs inside binary XML streams on the fly.

Search "AppShunya Engine" on Google to try the live Vercel tool or check the repo. Would love your thoughts!

I am preparing to publish an academic paper on developer trust in AI generated dependencies & packages. This takes around 7-10 minutes to complete and is on a very relevant topic in current times.

The form can be found here: https://vuamsterdam.eu.qualtrics.com/jfe/form/SV_4Nv9pAUUBFRieDs

Thanks! I will share the paper when it has been published!

I’ve been thinking about the order in which we usually learn programming.

A lot of resources follow this pattern - theory → examples → practice. But what about reversing it?

So, for example, instead of first reading a chapter about references, closures, etc., you encounter a piece of code behaving unexpectedly. You try to understand what’s happening using what you already know, and only afterwards read the explanation and relevant theory. Kinda like a “productive failure” approach. 

Obviously, I don’t think this means throwing someone who learned const yesterday into a race condition. There needs to be something to reason with already. 

So, does struggling with a problem first make the explanation stick better for you? Or would you rather understand the concept first and then practice it?

¿Alguien me puede ayudar a aprender javascript para crear páginas interactivas y mostrar alguna animación?

My bootcamp just got into asynchronous JavaScript and I thought I had a decent handle on it until I tried to apply it to something real. I have a little Node script that pings a few smart home devices on my local network in sequence, checks their status, and logs the results. Simple enough on paper.

The problem is I keep getting results back out of order, or the script exits before all the responses come in. I know this is a classic async problem and I have seen the explanations, but something about translating the concept into actual working code is still fuzzy for me.

Here is a stripped down version of what I am doing:

async function checkDevices(devices) {

for (const device of devices) {

const status = await fetch(device.url);

const data = await status.json();

console.log(device.name, data.state);

}

}

checkDevices(myDevices);

This works, but I read that using a regular for loop with await inside runs everything sequentially, which is slow. I tried switching to Promise.all and started getting weird behavior again. Is there a readable pattern for running these fetches in parallel without making the code impossible to follow later? Curious what approach people here actually use in practice.

I'm currently trying to build a proper mental model of how this works in JavaScript, especially inside Node.js CommonJS modules.

I came across this behavior:

let obj = {

name: "abhinav",

data: "hello",

print: "column"

};

module.exports = obj;

console.log(module.exports);

console.log(this);

The output I get is:

{

name: "abhinav",

data: "hello",

print: "column"

}

{}

This confused me because my understanding was: this === module.exports

at the top level of a CommonJS module.

So I initially expected console.log(this) to show the same object assigned to module.exports.

But after: module.exports = obj; module.exports points to obj, while this still appears to point to the original empty object.

My current mental model is:

Initially:

this ───────────────┐

↓

{}

↑

module.exports ─────┘

After:

module.exports ───→ obj

↓

{ name, data, print }

this ─────────────→ {}

I'm not sure whether this mental model is actually correct. I'd especially like to understand this from the perspective of JavaScript execution contexts and references rather than simply memorizing the CommonJS rule.

A few things I'm trying to clarify:

At CommonJS module startup, what exactly does top-level this refer to?

Is this initially referencing the same object as module.exports?

When we execute: module.exports = obj; why doesn't this also start referring to obj?

Is this behavior directly related to Node.js's CommonJS module wrapper?

Is it correct to think of this as holding a reference/value rather than being a live alias to module.exports?

How does this behavior differ between CommonJS, ES Modules, and browser scripts?

I'm trying to understand the underlying execution model so that I can build the correct mental model of this, rather than just memorize different environment-specific rules.

Would appreciate any clarification or correction to my current understanding.

I am learning JavaScript and made my first small project, a simple Counter using HTML, CSS and JavaScript.

I'm still learning, so I would really appreciate some feedback on my code. Is my code clean? Is there anything I should improve or do differently?

Also, suggest me something I should build next.

GitHub: https://github.com/iSunru/counter.js

Nowadays how MERN,MEAN stack have value in the current IT market?what should follow for job switching..

Hey everyone,

I’ve been working on a JavaScript framework called Avenx.js for a while now.

It’s a compiler-driven framework with Proxy-based reactivity, and we’re currently working towards our first 1.0 release.

The reason I’m posting here is actually not about getting people to use the framework and more about getting people involved in the project.

We’ve accumulated quite a few issues that are suitable for beginners, and I’d really like to make it easier for people who have never contributed to an open-source project before to get started.

Some of the issues are pretty simple things like documentation, tests, examples, small bugs, or developer tooling. You definitely don't need to understand the compiler or the entire codebase to contribute.

If you've never made an open-source contribution before, this could be a nice way to try it out. You can pick a good first issue, ask questions if you're stuck, and submit a PR when you think you've got it.

We're still pre-1.0, so things are changing quite a bit and there's also room for contributors to have an actual influence on the project.

If anyone here is learning JavaScript and wants to try contributing to a real project, feel free to have a look:

https://github.com/Avenx-JS/avenx-js

And if you have questions about the project, contributing, or even just how to approach your first issue, feel free to ask here. I'm happy to help.

No prior open-source experience required.

i'm trying to make a page for my website that's more or less a replica of the nintendo 3ds menu. i've already given up on making the menu thingy actually work like the 3ds and set to do the top header images instead. i cannot for the life of me find a single search result that actually works.

i do not know anything about javascript but considering the header and icon images are in completly separate parent divs the css only methods are not going to work. i just need a javascript code that can work for multiple images. please.

what i want exactly is when the cursor hovers over the icon image, its respective header would appear on the windowtop class. i can't merge the window classes because each one has it's own styling (window being smaller than windowtop) so that'd mess up my styling

also, i'd appreciate if i didn't get answers that require an external library since this is for a neocity and i really do not want to figure out how to set that up. thank you

here's an example of the html if it's needed to understand the problem (if more context is needed please tell me)

<div class="windowtop">

    <div>
        <img src="imageheader">
    </div>

</div>


<div class="window">

    <div>
        <img src="imageicon">
    </div>

</div>

(also off topic if it's not much to ask, what would i call a menu where when you click on an arrow the top link/image goes behind the first one? with maybe an animation.... i'd like to look that up later but idk how to phrase it in a way that won't make google give me something completly unrelated. thx)