https://github.com/codeadamca/javascript-placement
Three samples of JavaScript using inline, internal, and external JavaScript placement.
https://github.com/codeadamca/javascript-placement
javascript learning-code
Last synced: 3 months ago
JSON representation
Three samples of JavaScript using inline, internal, and external JavaScript placement.
- Host: GitHub
- URL: https://github.com/codeadamca/javascript-placement
- Owner: codeadamca
- Created: 2021-01-12T19:26:55.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:03:42.000Z (5 months ago)
- Last Synced: 2025-01-26T23:17:56.245Z (5 months ago)
- Topics: javascript, learning-code
- Language: HTML
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Including JavaScript in an HTML Document
Much like CSS, JavaScript can be placed into an HTML document using three different mthods:
1. Inline
2. Internal
3. External
## Inline
JavaScript can be placed inside an HTML tag using an event attribute:
- onclick
- onmouseover
- onsubmit
Or inside an `href` attribute by prefixing it with `javascript:`.
Create a new HTML document, name is `inline.html`, add the standard HTML elements, and inside the `body` tag add the following code:
```html
Click Me
```
Test the HTML file using a browser. You should see an alert message by clicking either the button or link.
## Internal
JavaScript can be placed inside an HTML document by adding JavaScript code inside a `script` tag.
Create a new HTML document, name it `internal.html`, add the standard HTML elements, and inside the `body` tag add the following code:
```html
document.write("<h1>Embedded JavaScript</h1>");
document.write("<p>This is embedded JavaScript!</p>");
```
Test the HTML file using a browser, the `body` section of the webpage should have an additional heading and paragraph.
## External
JavaScript can be placed inside an external JavaScript file.
Create a new JavaScript file and name it external.js. When placing JavaScript inside an external JavaScript file, you do not need to include `script` tags. Add the following code:
```javascript
document.write("
External JavaScript
");
document.write("This content comes from an external JavaScript file!
");
```
Next, create an HTML file, name it external.html, add the standard HTML elements, and then add the following code to the `body` section:
```html
```
Test the file using a browser, the `body` section of the webpage should have an additional heading and paragraph.
> Full tutorial URL:
> https://codeadam.ca/learning/javascript-placement.html
***
## Repo Resources
* [Visual Studio Code](https://code.visualstudio.com/) or [Brackets](http://brackets.io/) (or any code editor)
