📚 Quick Study Guide: JavaScript Web Basics
- 🚀 What is JavaScript? It's a programming language that makes web pages interactive. Without it, web pages are mostly static text and images. Think of it as the 'action' behind your website!
- 🔗 Adding JavaScript to HTML: You can place JavaScript code directly into your HTML using the
<script> tag. It's often best placed at the end of the <body> section to make sure your page loads quickly. - 📝 External JavaScript Files: For larger projects, you can write your JavaScript in a separate
.js file and link it to your HTML using <script src="your_script.js"></script>. This keeps your code organized! - 💬 Outputting Information:
console.log("Hello!"): Shows messages in the browser's developer console (great for debugging!).alert("Welcome!"): Pops up a small message box on the screen.document.write("Hello World!"): Writes content directly onto the HTML document. Be careful, as it can overwrite existing content if used after the page has loaded!
- 🔢 Variables: Variables are like containers for storing data. You declare them using
let or const. For example, let score = 100; or const PI = 3.14;. - ✨ Basic Operations: You can do math!
+ (add), - (subtract), * (multiply), / (divide). Example: let result = 5 + 3; - 💡 Events: JavaScript can react to things users do, like clicking a button. This is called an 'event'. For example,
<button onclick="alert('You clicked me!')">Click Me</button>.
🧠 Practice Quiz
- What is the primary purpose of JavaScript on a web page?
A) To define the structure of the page
B) To add styling and colors
C) To make the page interactive and dynamic
D) To store data on a server - Which HTML tag is used to embed JavaScript code directly within an HTML document?
A) <js>
B) <script>
C) <javascript>
D) <code> - Where is the best place to link an external JavaScript file (
myscript.js) in an HTML document for optimal page loading?
A) In the <head> section
B) Right after the opening <body> tag
C) Just before the closing </body> tag
D) Anywhere in the document, it doesn't matter - What does the
console.log("Hello!") command do?
A) Displays "Hello!" in a pop-up alert box
B) Writes "Hello!" directly onto the web page
C) Prints "Hello!" to the browser's developer console
D) Creates a new HTML element with the text "Hello!" - Which keyword is used to declare a variable in JavaScript that can have its value changed later?
A) var
B) const
C) let
D) variable - If you have the code
let x = 7; let y = 3; let result = x * y;, what will be the value of result?
A) 10
B) 4
C) 21
D) 2.33 - Which of the following is an example of a JavaScript 'event' that can be used with an HTML button?
A) onhover
B) onclick
C) onpress
D) ondrag
Click to see Answers
1. C) To make the page interactive and dynamic
2. B) <script>
3. C) Just before the closing </body> tag
4. C) Prints "Hello!" to the browser's developer console
5. C) let
6. C) 21
7. B) onclick