Key Concepts

Review core concepts you need to learn to master this subject

HTML script element src attribute

<!-- Using a relative path --> <script src="./script.js"></script> <!-- Using an absolute path --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

The src attribute of a <script> element is used to point to the location of a script file.

The file referenced can be local (using a relative path) or hosted elsewhere (using an absolute path).

  1. 1
    HTML defines the structure of a web page by using page elements as the building blocks. However, HTML by itself can not produce web page interactivity, that’s where JavaScript comes in. Below, we …
  2. 2
    The element allows you to add JavaScript code inside an HTML file. Below, the element embeds valid JavaScript code: This is an embedded JS example function Hello() { alert (‘Hello Wor…
  3. 3
    Since you know how to use a element with embedded code, let’s talk about linking code. Linking code is preferable because of a programming concept called Separation of Concerns (SoC). Instead of …
  4. 4
    A quick recap: the element allows HTML files to load and execute JavaScript. The JavaScript can either go embedded inside of the tag or the script tag can reference an external file. Before we …
  5. 5
    When the HTML parser comes across a element, it stops to load its content. Once loaded, the JavaScript code is executed and the HTML parser proceeds to parse the next element in the file. This ca…
  6. 6
    The async attribute loads and executes the script asynchronously with the rest of the webpage. This means that, similar to the defer attribute, the HTML parser will continue parsing the rest of the…
  7. 7
    Let’s review. + HTML creates the skeleton of a webpage, but JavaScript introduces interactivity + The element has an opening and closing tag. You can embed JavaScript code inbetween the openin…
  1. 1
    The Document Object Model, abbreviated DOM, is a powerful tree-like structure that allows programmers to conceptualize hierarchy and access the elements on a web page. The DOM is one of the bet…
  2. 2
    Tree-like modeling is used in many fields, including evolutionary science and data analytics. Perhaps you’re already familiar with the concept of family trees: these charts represent the familial r…
  3. 3
    Following the metaphor of a family tree, let’s define some key terminology in the DOM hierarchy: A parent node is the closest connected node to another node in the direction towards the root. A…
  4. 4
    As mentioned, a node is the equivalent of each family member in a family tree. A node is an intersecting point in a tree that also contains data. There are nine different types of node objects in …
  5. 5
    DOM element nodes model elements in an HTML document. Much like an element in an HTML page, the DOM allows us to access a node’s attributes, such as its class, id, and inline style. In the diagra…
  6. 6
    Congratulations on completing our introduction to the Document Object Model, or DOM, as a structure! Let’s review what you’ve learned so far: - The DOM is a structural model of a web page that a…
  1. 1
    The Document Object Model, abbreviated DOM, is a powerful tree-like structure that organizes the elements on a web page and allows scripting languages to access them. This lesson will focus on so…
  2. 2
    When using the DOM in your script to access an HTML element, you also have access to all of that element’s properties. This includes the ability to modify the contents of the element as well as it…
  3. 3
    In the previous exercise, we accessed the webpage elements with the document keyword! What if we wanted to select a specific element? The DOM interface allows us to access a specific element with …
  4. 4
    Another way to modify an element is by changing its CSS style. The .style property of a DOM element provides access to the inline style of that HTML tag. The syntax follows an element.style.proper…
  5. 5
    Just as the DOM allows scripts to modify existing elements, it also allows for the creation of new ones. The .createElement(tagName) method creates a new element based on the specified tag name pa…
  6. 6
    In addition to modifying or creating an element from scratch, the DOM also allows for the removal of an element. The .removeChild() method removes a specified child from a parent. Because the .que…
  7. 7
    You can add interactivity to DOM elements by assigning a function to run based on an event . Events can include anything from a click to a user mousing over an element. The .onclick property a…
  8. 8
    In the DOM hierarchy, parent and children relationships are defined in relation to the position of the root node. A parent node is the closest connected node to another node in the direction tow…
  9. 9
    In this lesson, you manipulated a webpage structure by leveraging the Document Object Model interface in JavaScript. Let’s review what we learned: + The document keyword grants access to the root …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo