What is JavaScript?
How does JavaScript work with HTML+CSS?
Adding JavaScript within your HTML Document:
<head></head>
<body>
<h1>Hello World!</h1>
<script>
document.write(‘Hello World!’); // Will print off “Hello World!”
</script>
<body>
</html>[/CODE]
Adding JavaScript with an external document:
<script src=”js/javascript.js”></script>
</head>
[/CODE]
The src attribute is the file path to your .js file.
Helpful sources:
JavaScript & Jquery by Jon Duckett
developer.mozilla.org
stackoverflow.com
JavaScript is exactly what the name says; it’s a script that controls the behaviour of a website. It helps make your website more interactable and there is no need for any special IDE platforms, you can create it using a regular text editor. In this thread, you will be given a quick understanding on how JavaScript works with HTML+CSS, add JavaScript (JS) within your HTML document, and how to link it externally to a .JS file.
How does JavaScript work with HTML+CSS?
Similar to both HTML and CSS, JavaScript has its purpose. In other threads, I explained what both HTML and CSS were and their purpose. Just a refresher: HTML is the structure of a webpage and CSS is used to style the appearance of the webpage.
Now, what does JavaScript do? JavaScript makes your basic HTML/CSS document or webpage more interactive. It can be used to update content, animate images, control multimedia, display prompts etc. It can give the viewer warnings stating that their password does not meet requirements, or give a specific message like good morning or good afternoon. JavaScript can make your site do a lot of great things, you just need to conquer it. Remember JavaScript is a scripting language so you set a set of instructions and the browser will execute them.
Adding JavaScript within your HTML Document:
Although not particularly recommended, you can add JavaScript within your HTML document by using the <script></script> tag. An example is below:
[CODE lang="html" title="HTML: Internal JavaScript" highlight="5-7"]<!DOCTYPE html><head></head>
<body>
<h1>Hello World!</h1>
<script>
document.write(‘Hello World!’); // Will print off “Hello World!”
</script>
<body>
</html>[/CODE]
Adding JavaScript with an external document:
A more practical way of adding JavaScript to your website is by creating a separate JavaScript file and linking it to your HTML document. Similar to the way of including an external CSS file. You can identify a JavaScript file by looking for the file extension .js.
Within your HTML document under the <head> tag:
[CODE lang="html" title="HTML: External JavaScript"]<head><script src=”js/javascript.js”></script>
</head>
[/CODE]
The src attribute is the file path to your .js file.
Helpful sources:
JavaScript & Jquery by Jon Duckett
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
How do I link a JavaScript file to a HTML file?
How do you properly link a JavaScript file to a HTML document? Secondly, how do you use jQuery within a JavaScript file?
Last edited:
