What is JavaScript?
JavaScript is a programming language that enables interactive web pages. It’s one of the core technologies of the web, alongside HTML and CSS.
Adding JavaScript to HTML
Inline JavaScript
<button onclick="alert('Hello!')">Click Me</button>
Internal JavaScript
<script>
console.log('Hello, World!');
</script>
External JavaScript (Recommended)
<script src="script.js"></script>
Variables
JavaScript has three ways to declare variables:
var oldWay = 'avoid using var';
let changeable = 'can be reassigned';
const constant = 'cannot be reassigned';
Data Types
// String
let name = 'John';
// Number
let age = 25;
// Boolean
let isStudent = true;
// Array
let colors = ['red', 'green', 'blue'];
// Object
let person = {
name: 'John',
age: 25
};
Functions
// Function declaration
function greet(name) {
return 'Hello, ' + name + '!';
}
// Arrow function
const greet = (name) => {
return `Hello, ${name}!`;
};
// Call the function
console.log(greet('World'));
DOM Manipulation
// Select an element
const button = document.getElementById('myButton');
// Add event listener
button.addEventListener('click', function() {
alert('Button clicked!');
});
// Change content
document.getElementById('demo').innerHTML = 'New content';
Practice Exercise
Create a simple interactive page:
- A button that changes text when clicked
- An input field that displays entered text
- A counter that increments on button click
Next Steps
Learn about JavaScript arrays, objects, async programming, and modern ES6+ features.