JavaScript Basics

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web. It enables interactive web pages and is an essential part of web applications.

What is JavaScript?

JavaScript (often abbreviated as JS) is a programming language that conforms to the ECMAScript specification. It is:

Where JavaScript Runs

JavaScript can run in multiple environments:

Adding JavaScript to HTML

Internal JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <script>
        console.log('Hello, JavaScript!');
        alert('Welcome to JavaScript!');
    </script>
</body>
</html>

External JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <script src="script.js"></script>
</body>
</html>

// script.js
console.log('Hello, JavaScript!');
alert('Welcome to JavaScript!');

JavaScript Syntax Basics

Statements

JavaScript code is composed of statements:

console.log('This is a statement');
let x = 5; // Another statement

Statements are separated by semicolons (optional but recommended).

Comments

// Single-line comment

/*
Multi-line
comment
*/

Case Sensitivity

JavaScript is case-sensitive:

let myVariable = 'Hello';
let myvariable = 'World'; // Different variable

Console Output

The console.log() function outputs to the browser console:

console.log('Hello, World!');
console.log(42);
console.log(true);

Open browser developer tools (F12) to see console output.

Basic Input/Output

Alert Dialog

alert('This is an alert message!');

Confirm Dialog

let result = confirm('Are you sure?');
console.log(result); // true or false

Prompt Dialog

let name = prompt('What is your name?');
console.log('Hello, ' + name + '!');

JavaScript in Modern Web Development

Frameworks and Libraries

Build Tools

JavaScript Versions

ECMAScript Standards

Browser Support

Modern browsers support ES6+ features. For older browsers, use Babel to transpile code.

Development Environment

Browser Console

Code Editors

Online Playgrounds

Debugging JavaScript

Console Methods

console.log('Basic logging');
console.warn('Warning message');
console.error('Error message');
console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]);

Breakpoints

Common JavaScript Errors

Syntax Errors

// Missing semicolon
console.log('Hello')

// Missing parenthesis
console.log('Hello';

Reference Errors

console.log(undefinedVariable); // ReferenceError

Type Errors

let num = 5;
num.toUpperCase(); // TypeError: num.toUpperCase is not a function

Best Practices

Code Style

Performance

Security

JavaScript Ecosystem

Package Management

# Initialize project
npm init

# Install package
npm install lodash

# Install development dependency
npm install --save-dev eslint

Module Systems

// ES6 Modules
import { sum } from './math.js';
export function multiply(a, b) { return a * b; }

// CommonJS (Node.js)
const fs = require('fs');
module.exports = { myFunction };

Next Steps

Understanding JavaScript basics is the foundation for web development. Next, you'll learn about variables, data types, and how to store and manipulate data in JavaScript programs.

Practice Exercises

  1. Create an HTML file with embedded JavaScript that displays an alert
  2. Use console.log to output different types of data
  3. Experiment with prompt() and confirm() dialogs
  4. Try different console methods (log, warn, error, table)

Remember: Practice is key to mastering JavaScript. Start with simple programs and gradually build complexity.

Loading