Three Ways to Add JavaScript to Your Web Pages
Introduction
Hello students! Welcome to another exciting lesson on web development. Today, we are diving into the world of JavaScript, the programming language that brings your web pages to life! Whether you want to create interactive buttons, animations, or games, JavaScript is your best friend.
In this lesson, we will learn how to set up JavaScript in three different ways: Inline, Internal, and External. By the end of this lesson, you'll know how to use JavaScript to make web pages fun and interactive.
What is JavaScript?
JavaScript is a scripting language that allows you to create dynamic content on your websites. It runs directly in the browser, which means users can see your changes instantly!
Now, let's see how to include JavaScript in your HTML documents!
1. Inline JavaScript
What is Inline JavaScript?
Inline JavaScript is when you write JavaScript code directly within an HTML tag. This method is best for simple scripts or small tasks.
How to Use Inline JavaScript
You can use the onclick event to execute JavaScript when a user interacts with an element. Here's how:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="alert('Hello, PyVerse students!')">Click Me!</button>
</body>
</html>Explanation:
We have a button that, when clicked, shows an alert message saying "Hello, PyVerse students!". The JavaScript is inline because it is inside the onclick attribute of the <button> tag.
2. Internal JavaScript
What is Internal JavaScript?
Internal JavaScript is written within a <script> tag in the <head> or <body> section of your HTML document. It's great for scripts that are more complex than inline snippets.
How to Use Internal JavaScript
Here's an example where we include a JavaScript function to greet the user:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JavaScript Example</title>
<script>
function greet() {
alert('Hello, welcome to PyVerse!');
}
</script>
</head>
<body>
<button onclick="greet()">Click Me!</button>
</body>
</html>Explanation:
We created a function called greet() that, when called, shows an alert. The function is called when the button is clicked. This keeps the JavaScript code separate from HTML, making it easier to manage.
3. External JavaScript
What is External JavaScript?
External JavaScript is stored in a separate .js file. This is useful for larger projects where you want to keep your code organized and make it reusable across different HTML files.
How to Use External JavaScript
First, create a separate file named script.js with the following code:
function welcome() {
alert('Welcome to the external JavaScript example!');
}Now, reference this JavaScript file in your HTML like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="welcome()">Click Me!</button>
</body>
</html>Explanation:
In the HTML file, we use the <script src="script.js"></script> tag to link the external JavaScript file. The function welcome() will run when the button is clicked.
Exercise/Project Idea 💡
Create Your Own Interactive Web Page!
- Choose one of the JavaScript methods (inline, internal, or external).
- Create a simple web page with a button that shows a personalized alert message when clicked.
- Use a separate JavaScript function for the alert message.
- Feel free to play around and make your page visually appealing with HTML and CSS!
RECAP
Today, we learned how to set up JavaScript in three different ways: Inline, Internal, and External. Each method has its own purpose and can be useful depending on the situation:
- Inline JavaScript is great for quick and simple interactions.
- Internal JavaScript keeps your code organized for larger scripts within the same HTML file.
- External JavaScript is perfect for multiple HTML files or larger projects where code reusability is important.
Now you have the skills to make your web pages dynamic and engaging! Keep experimenting, and happy coding!