JavaScript Interactive Websites
Learn how to bring JavaScript and HTML together with the script tag and the DOM model.
StartKey Concepts
Review core concepts you need to learn to master this subject
HTML script element src attribute
HTML script element defer attribute
HTML script tag async attribute
HTML script element
Nodes in DOM tree
HTML DOM
Accessing HTML attributes in DOM
The Document Object Model
HTML script element src attribute
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).
The Script Element
Lesson 1 of 3
- 1HTML 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 …
- 2The 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…
- 3Since 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 …
- 4A 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 …
- 5When 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…
- 6The 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…
What you'll create
Portfolio projects that showcase your new skills