When does the JavaScript lessons apply to the web page design?

Hi all,

I am still at the Regular Expressions lessons of the JavaScript curriculum.
So far, I am not seeing how the JavaScript lessons apply to the web page design (the same way the HTML and CSS curricula did).
At what stage will the JavaScript lessons start been applied to web page design?

Thanks

1 Like

Once you learn JavaScript basics you can venture in the realm of DOM manipulation and you can do that with vanilla JavaScript learning outside of FCC once you have finished the second certificate or with the third certificate about front end libraries and frameworks

JavaScript write the logic about how the page should change based on user actions, on which content there is to display, or just for animations.

2 Likes

@ilenia thanks for your response. i’m hearing of this for the first time. learning the JavaScript is very abstract and tiring at the moment. i’m hoping to make sense of it all soon. Thanks

It is very abstract. JavaScript is a way to program things in the browser, it’s not for designing, for laying out things visually in a browser.

Browsers provide a whole host of functionality to manipulate how they work via JS, but this functionality is useless if you don’t know how to use JS. So learning how to use JS is a prerequisite, and yes, it will seem abstract. It is a programming language, it’s just a [complex] tool that, in this case, allows you to manipulate something much more complex (the browser itself).

For example, regex: HTML lets you validate form fields (eg if you use <input type="email" and a user types something that isn’t an email, the browser will show the input field is invalid). But maybe you need something more robust – say you’re validating credit card input, and you want to tell the user what kind of card (Visa, MasterCard etc) they’re using based on what they’ve currently typed. So you write a small JS program, which takes a string as input, and returns a list of possible cards

// Given a string of digits, return an array
// or possible credit card issuers:
function iinChecker (input) {
  // Helper function that returns true if current
  // input matches a given regex pattern:
  const test = (regexPattern) => regexPattern.test(input);
    
  // If the test returns true, the current
  // branch returns a list of possible CC issuers.
  switch (true) {
    case test(/^4/):
      return ["Visa"]
    case test(/^5/):
      return ["Diners Club", "Maestro", "MasterCard"];
    case test(/^5[45]/):
      return ["Diners Club"];
    case test(/^5[0678]/):
      return ["Maestro"];
    case test(/^5[1-5]/):
      return ["MasterCard"];
    // ...and so and so forth
  }
}

This, by itself, doesn’t interface with anything you can see in the browser. So there is a second part, where I use the JS functions provided by the browser to allow me to access it:

// Grab some elements in the browser by
// selecting them by their class names;
// the input field itself + a place to put output:
const ccinput = document.querySelector(".ccinput");
const ccissuer = document.querySelector(".ccissuer");

// Every time a user types a character,
// print the current list of possible issuers:
ccinput.addEventListener("keyup", (e) => {
  ccissuer.textContent = iinChecker(e.target.value).join(", ");
});

So that will have looked like gibberish, but it’s just an illustration of how you need to know how the programming language works. You’re currently working through learning regex: all the above is doing is running function that maps a string to an array of strings by testing the string using regex.

3 Likes

Wow. Thanks! Reading your response just left me with a headache…but I get it. Some of this makes some sense now as I’ve just come across the switch code in my FCC lessons. Hopefully, I’ll get to that stage where i can apply them to the web page. Is there a repository for JScript codes or do you have to write codes for yourself for whatever you need to do?

1 Like

Libraries and frameworks I guess are what you would use. So to go back to the credit card validation example, that’ll have been written many times. So is there any point writing it again? In some cases, yes. In some cases, no. It just depends.

You could just include a library that someone has written, ie a set of functions that do the same thing. For example:

http://validatejs.org/

That’s a library built for validating strings. At the simplest level, you include it by adding:

<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>

In the <head> section of an HTML document. Then you can use the functions from it.

1 Like

Thank you for your responses and answers.