Hope you did well on your exam! 🎉
If this site helped, please leave feedback, check out the project on GitHub, or follow me on GitHub.
F5: JavaScript 1 code examples
Code examples from the course Google Drive for the JavaScript 1 lecture. View the source and run live previews where available.
My First Web Page — document.write
5.html
HTML18 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>My First Web Page</h2>7
<p>My first paragraph.</p>8
9
<p>What will displayed in this page?</p>10
11
<script>12
document.write("5" + 6);13
console.log("Hello");14
</script>15
16
</body>17
18
</html>My First Web Page — window.alert
7.html
HTML15 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>My First Web Page</h2>7
<p>My first paragraph.</p>8
9
<script>10
window.alert(5 + 6);11
</script>12
13
</body>14
15
</html>External JavaScript file
00.html
HTML14 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script src="myjs.js"></script>5
</head>6
<body>7
<h1>This is the beginning of the body</h1>8
<script>9
document.write("<h1>Hello World</h1>");10
document.write("A new line");11
</script>12
<h3>This is after the scripts</h3>13
</body>14
</html>My First JavaScript — display date on click
1.html
HTML17 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>My First JavaScript</h2>7
8
<button type="button" onclick="document.getElementById('demo').innerHTML = Date();document.getElementById('demo2').innerHTML ='This is after the date';">9
Click me to display Date and Time.10
</button>11
12
<p id="demo"></p>13
<div id="demo2"></div>14
15
</body>16
17
</html>What Can JavaScript Do? — change image src
2.html
HTML18 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>What Can JavaScript Do?</h2>7
8
<!--JavaScript can change HTML attribute values -->9
10
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif';">Turn on the light</button>11
12
<img id="myImage" src="pic_bulboff.gif" style="width:100px">13
14
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>15
16
</body>17
18
</html>What Can JavaScript Do? — change element style
3.html
HTML22 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
function myfunction(buttonId){6
document.getElementById('demo').style.fontSize='35px';7
alert(document.getElementById(buttonId).innerText);8
9
10
}11
</script>12
</head>13
<body>14
15
<h2>What Can JavaScript Do?</h2>16
17
<p id="demo">JavaScript can change the style of an HTML element.</p>18
19
<button id="b1" type="button" onclick="myfunction('b1');">1</button>20
21
</body>22
</html> What Can JavaScript Do? — hide HTML elements
4.html
HTML14 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>What Can JavaScript Do?</h2>7
8
<p id="demo">JavaScript can hide HTML elements.</p>9
10
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>11
12
</body>13
14
</html>What Can JavaScript Do? — show hidden elements
6.html
HTML16 lines
1
<!DOCTYPE html>2
<html>3
4
<body>5
6
<h2>What Can JavaScript Do?</h2>7
8
<p>JavaScript can show hidden HTML elements.</p>9
10
<p id="demo" style="display:none">Hello JavaScript!</p>11
12
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>13
14
</body>15
16
</html>Global variable
8.html
HTML28 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
//global vairable6
var myvariable = 5;7
console.log(window.myvariable);8
console.log(frames.myvariable);9
console.log(self.myvariable);10
console.log(this.myvariable);11
console.log(globalThis.myvariable);12
13
function myfunction(){14
var myvariable=9;15
alert(myvariable);16
}17
myfunction();18
</script>19
</head>20
<body>21
22
<h2>Global vairable</h2>23
<p><script>document.writeln(window.myvariable);</script>Test in console</p>24
25
26
27
</body>28
</html> Objects
9.html
HTML21 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var employee ={6
1:"Patrick",7
2: "Morin",8
eId:244334339
};10
document.write(employee[1] + ", " + employee[2] + ", " + employee.eId);11
</script>12
</head>13
<body>14
15
<h2>objects</h2>16
17
18
19
20
</body>21
</html> Variable scope
000.html
HTML22 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
6
function myfunction(){7
if(1){var z=3;}8
}9
try {10
console.log(z);11
} catch (error) {12
document.writeln(error.name + ": " + error.message);13
}14
</script>15
</head>16
<body>17
18
19
20
21
</body>22
</html> My First JavaScript — alert, confirm, and prompt
0.html
HTML26 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var myvalue=60;6
function showmsg() {7
//alert("This is an alert");8
//confirm("This is a confirmation message");9
var myvalue = window.prompt("Enter your age","20");10
document.writeln(myvalue);11
12
}13
</script>14
</head>15
<body>16
17
<h2>My First JavaScript</h2>18
<script>19
functionvalue = showmsg();20
document.writeln(myvalue);21
</script>22
<p id="demo"></p>23
24
25
</body>26
</html>