Skip to main content
Version: v1.1

📓 1.2.0.1 JavaScript and Web Browsers Objectives

In this section, we will be learning the basics of JavaScript (JS), the programming language of the web. We'll also learn about the web browser standards and tools that make it possible to have interactive webpages. We'll start our exploration with the basic building blocks of JavaScript:

  • Data types
  • Operators
  • Variables
  • Methods
  • Functions

As you'll see when you explore other languages, these foundational elements are standard components throughout programming.

Next, we will learn about web browser tools that enable developers to create interactive webpages, ones that respond to user interactivity like clicks and form submissions. We'll learn about:

  • The window object, which makes the functionality of the web browser window/tab available to developers.
  • The Document Object Model (DOM) that represents our HTML as an object model in the web browser.
  • Using the document object to access and manipulate objects in the DOM.
  • Changing the attributes, visibility, and text content of HTML elements in the DOM.
  • Handling events with event handler properties and event listeners.
  • Creating forms to gather input from the user.
  • Organizing our code so that it is easy to read and understand.

Throughout the course section, we'll learn how to use and navigate Mozilla Developer Network (MDN) documentation. This will help us understand how web browser tools and JavaScript are structured. This will also build up our referencing and research skills to help us become resourceful developers.

We'll also pause periodically to learn valuable debugging techniques:

  • reading console errors
  • using console.log()
  • pausing on exceptions
  • using breakpoints and debugger;

Finally, we will move into more advanced JavaScript: branching with if statements. Branching allows JavaScript to perform different actions based on different conditions that we create.

Independent Project Objectives​

At the end of this section, you will complete an independent project. Your code will be reviewed for the following objectives:

  • Form gathers input from the user.
  • Branching is used to determine the result.
  • Web API object properties or methods (not including window methods for alerting, prompting, or confirming) are used to display the result to the user.
  • Event handler properties or event listeners are used to handle events.
  • When the user submits the form again (for a second or third time) previous results are hidden, cleared, or replaced.
  • Variable names are descriptive of what they represent and use lower camel case (e.g. myVariableExample).
  • Web page is styled using custom CSS.
  • Project is in a polished, portfolio-quality state.
  • The prompt’s required functionality and baseline project requirements are met.

What is a polished, portfolio-quality state?​

When a project is both polished and in a portfolio-quality state, this means:

  • You've reviewed your project and your README prior to submitting it to make sure there are no errors or missing information and you are consistent in your indentation, spacing, and code structure.
  • You are following the best practices and coding conventions we teach. Make sure that your:
    • Code is clean, well-refactored, and easy-to-read. This includes correct indentation, spacing, and including only necessary comments and debugging tools.
    • Commits are made regularly with clear messages that finish the phrase "It will…".

What are the baseline project requirements?​

All independent coding projects at Epicodus have these baseline requirements:

  • A complete and informative README
    • It is not required to include a link to your site hosted on gh-pages, but you are welcome and encouraged to do so!
  • The project's commit history shows at least 8 hours of work.
  • Completion of the project based on the prompt and objectives. The prompt contains details on the project's theme and features that are not always detailed in the objective. Carefully read through the prompt towards the end of your work session to make sure that you are not missing anything.