Week 7: JavaScript Programming – Basics (Part 1)
Introduction to JavaScript
JavaScript is a dynamic, high-level programming language that is primarily used to create
interactive and dynamic content on web pages. It allows developers to build responsive, user-
friendly websites by enabling features such as animations, form validation, interactive maps,
and real-time updates without needing to refresh the page. JavaScript is one of the core
technologies of web development, alongside HTML and CSS.
JavaScript is a client-side scripting language, meaning it is executed by the web browser on
the user's device, although it can also be used on the server-side (via [Link], for example).
Key features of JavaScript:
• Interactivity: Allows users to interact with web pages, e.g., clicking buttons, filling
forms, and dynamically changing content.
• Event-Driven: JavaScript reacts to user actions, such as mouse clicks, key presses, or
page load events.
• Cross-Platform: JavaScript runs on all modern web browsers, making it a universal
language for web development.
• Versatile: Can be used for a wide variety of purposes, including manipulating the DOM
(Document Object Model), making asynchronous requests (AJAX), and implementing
animations.
In a typical web development workflow, JavaScript enhances HTML and CSS by adding
functionality and dynamic features that make the user experience more engaging.
Data Types and Variables in JavaScript
Like most programming languages, JavaScript has several data types that define the type of
value a variable can store. Understanding these data types is crucial for writing efficient and
error-free code.
1. Primitive Data Types: JavaScript has six basic primitive data types:
• Number: Represents both integer and floating-point numbers.
o Example: 42, 3.14
• String: Represents a sequence of characters (text).
o Example: "Hello, World!", 'JavaScript'
• Boolean: Represents either true or false.
o Example: true, false
• Null: Represents the absence of any object value.
o Example: null
• Undefined: Represents a variable that has been declared but not assigned a value.
o Example: undefined
• Symbol: Introduced in ES6, it represents a unique identifier.
o Example: Symbol('description')
2. Reference Data Types: In addition to primitive data types, JavaScript also has reference
types, which include:
• Object: A collection of key-value pairs (properties and methods).
o Example: { name: "John", age: 30 }
• Array: A special type of object used to store a list of values.
o Example: [1, 2, 3, 4]
3. Declaring Variables: In JavaScript, variables can be declared using three keywords: var,
let, and const. Each has different scoping rules.
• var: Declares a variable with function or global scope. It has function scope and can be
re-assigned.
o Example: var name = "Alice";
• let: Declares a variable with block scope. It is more modern and preferred over var
because it has better scoping rules.
o Example: let age = 25;
• const: Declares a constant variable, meaning it cannot be reassigned after its initial
assignment. It also has block scope.
o Example: const birthYear = 1995;
Examples of Data Types and Variables:
let name = "Alice"; // String
let age = 25; // Number
const isStudent = true; // Boolean
let user = { // Object
name: "Alice",
age: 25,
isStudent: true
};
let numbers = [1, 2, 3]; // Array
let nothing = null; // Null
let notDefined; // Undefined
Type Conversion: JavaScript is dynamically typed, meaning you don’t need to explicitly
define a variable's type. However, sometimes you need to convert between types.
• Number to String: String(123) or [Link]()
• String to Number: Number("123") or parseInt("123")
Example:
let x = "10";
let y = 5;
let result = Number(x) + y; // result will be 15 (as number)
Using Input/Output Statements in JavaScript
JavaScript provides several ways to handle input from users and display output to users,
making the interaction with the web page dynamic.
1. Output Statements:
• [Link](): The most common way to display output for debugging purposes. It
outputs information to the browser’s console.
• [Link]("Hello, World!");
• [Link](5 + 3); // Output: 8
o Use [Link]() to print values, messages, or variables for testing or
debugging code.
• alert(): Displays a pop-up alert box with a message for the user. It is often used to
display simple messages or warnings.
• alert("Welcome to JavaScript!");
• [Link](): Writes directly to the webpage content. While this method can be
used to output content, it is not recommended in modern web development because it
can overwrite the entire page content if used after the page has loaded.
• [Link]("This is some text written to the page.");
2. Input Statements:
• prompt(): Displays a dialog box that asks the user for input. It returns the input as a
string.
• let name = prompt("What is your name?");
• alert("Hello, " + name + "!");
This code will display a prompt asking for the user's name and then greet them with an
alert box.
• confirm(): Displays a dialog box with OK and Cancel buttons, and returns a Boolean
value (true or false) based on the user's action.
• let result = confirm("Do you want to proceed?");
• if (result) {
• alert("You clicked OK.");
• } else {
• alert("You clicked Cancel.");
• }
This is commonly used for yes/no questions, such as confirming an action or decision.
Conclusion
In Week 7, you learned the following core concepts of JavaScript programming:
1. Introduction to JavaScript: JavaScript is a versatile programming language used for
creating dynamic, interactive websites and applications. It runs on the client-side (in
the browser) and can also be used on the server-side.
2. Data Types and Variables:
o JavaScript has both primitive and reference data types.
o Variables in JavaScript can be declared using var, let, or const.
o JavaScript is dynamically typed, and you can convert between different types
of values as needed.
3. Input/Output Statements:
o Output: [Link](), alert(), and [Link]() are commonly used to
display output to the user.
o Input: prompt() and confirm() are used to interact with users by collecting input
or confirming actions.
These fundamental JavaScript concepts lay the groundwork for more advanced programming
topics, such as functions, loops, and event handling, which you will explore in upcoming
lessons. With these skills, you can start adding interactivity and dynamic features to your
websites.
