Here are five examples of displaying "Hello, JavaScript" in a web browser, from the simplest to more advanced:
### 1. Basic HTML
Simply displays "Hello, JavaScript" on the page using HTML.
```html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello JavaScript</title>
</head>
<body>
Hello, JavaScript
</body>
</html>
```
### 2. Using `document.write()`
Adds "Hello, JavaScript" to the page using JavaScript.
```html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello JavaScript</title>
<script>
document.write("Hello, JavaScript");
</script>
</head>
<body>
</body>
</html>
```
### 3. Modifying an HTML element with JavaScript
Using JavaScript to change the content of a `<div>` element to "Hello, JavaScript".
```html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello JavaScript</title>
</head>
<body>
<div id="message"></div>
<script>
document.getElementById("message").innerText= "Hello, JavaScript";
</script>
</body>
</html>
```
### 4. Adding "Hello, JavaScript" with Event Listener
Displays the message when the user clicks a button.
```html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello JavaScript</title>
</head>
<body>
<buttonid="helloButton">Click Me</button>
<divid="output"></div>
<script>
document.getElementById("helloButton").addEventListener("click", function() {
document.getElementById("output").innerText= "Hello, JavaScript";
});
</script>
</body>
</html>
```
### 5. Animated "Hello, JavaScript" using JavaScript
Displays "Hello, JavaScript" letter by letter with a typing effect.
```html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello JavaScript</title>
<style>
#animatedText{
font-family: Arial, sans-serif;
font-size: 24px;
}
</style>
</head>
<body>
<divid="animatedText"></div>
<script>
lettext= "Hello, JavaScript";
leti= 0;
functiontypeWriter() {
if(i< text.length) {
document.getElementById("animatedText").innerHTML+= text.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}
typeWriter();
</script>
</body>
</html>
```
