Introduction to JavaScript Programming
JavaScript Introduction
JavaScript is a language for designing web pages. Its simplicity contributes to its widespread use. Unlike traditional programming languages like C, C++, or Delphi, JavaScript is a scripting or document-oriented language, similar to macro languages found in word processors and spreadsheets.
While primarily used for web development, you can execute JavaScript code outside a browser environment. As an interpreted language embedded within HTML, JavaScript instructions are analyzed and processed by the browser during execution.
Remember that JavaScript is case-sensitive. For instance, document.write is correct, while Document.write results in a syntax error. Consistent capitalization is crucial to avoid syntax errors. We’ll see that function names are typically written in camel case.
Variables in JavaScript
A variable acts as a storage container for a value. It possesses a name and belongs to a specific data type (e.g., numeric, string).
Variable Types
- Integer values (e.g., 100, 260)
- Floating-point values (e.g., 1.24, 2.90, 5.00)
- Strings (e.g., “John”, “Shopping”, “List”)
- Boolean values (true, false)
We will explore other variable types later. Variables are essentially named placeholders for storing information. In JavaScript, variable names must start with a letter or an underscore (_), and they can include digits between characters. However, a variable cannot share the same name as a reserved keyword in the language.
You can define a variable using the var keyword:
var day;
You can declare multiple variables in a single line:
var year, month, day;
You can also define and initialize a variable with a value directly:
var age = 20;
Or, you can do it in two steps:
var age;
age = 20;
Choosing Variable Names
Opt for descriptive variable names. In the example above, day, month, and year clearly indicate their contents. Avoid using generic names like a, b, or c, as they lack meaning.
To display a variable’s content on a page, use the write method of the document object:
document.write(name);
Remember that JavaScript is case-sensitive, so Document.write(name); would be incorrect. There’s no object called ‘Document,’ only ‘document’ (lowercase ‘d’). Similarly, the function is write, not ‘Write.’ These are common mistakes for beginners.
Keyboard Data Entry
The prompt function enables keyboard data entry. When you need user input, this function displays a window where the user can enter a value.
While more sophisticated input methods exist, prompt is suitable for learning JavaScript basics. The syntax is as follows:
= prompt(, );
The prompt function takes two parameters: the message to show the user and an optional initial value for the input field.
Sequential Programming Structures
When a problem involves a series of operations, inputs, and outputs, it’s considered sequential. For instance, a program that asks for a person’s name and age follows a sequential structure.
If you’re performing arithmetic operations on numeric values entered by the user, remember to use the parseInt function. This function converts strings to integers, ensuring correct calculations. For example, to add two numbers entered by the user:
var num1 = parseInt(prompt("Enter the first number:"));
var num2 = parseInt(prompt("Enter the second number:"));
var sum = num1 + num2;
Without parseInt, the + operator would treat the inputs as strings and concatenate them instead of adding them numerically.
Simple Conditional Structure
Not all problems can be solved sequentially. Conditional structures allow us to make decisions in our code.
In everyday life, we encounter situations requiring decisions: “Should I choose path A or path B?” “Should I wear these pants?” Conditional structures in programming mirror this decision-making process.
A simple conditional structure involves executing a block of code if a condition is true. If the condition is false, the code block is skipped.
In JavaScript, we use the if statement for conditional execution. The condition to evaluate is enclosed in parentheses:
if (condition) {
// Code to execute if the condition is true
}
You can use relational operators to form conditions:
>(greater than)>=(greater than or equal to)<(less than)<=(less than or equal to)!=(not equal to)==(equal to)
For example:
if (age >= 18) {
document.write("You are eligible to vote.");
}
Composite Conditional Structures
Composite conditional structures provide an alternative path of execution when the initial condition is false. This is achieved using the else keyword.
if (condition) {
// Code to execute if the condition is true
} else {
// Code to execute if the condition is false
}
For example:
if (grade >= 7) {
document.write("Congratulations! You passed.");
} else {
document.write("You did not pass. Please try again.");
}
Nested Conditional Structures
You can nest conditional structures within each other to create more complex decision-making logic. This means an if or else block can contain further if or else statements.
For example:
if (score >= 90) {
document.write("You got an A!");
} else if (score >= 80) {
document.write("You got a B.");
} else if (score >= 70) {
document.write("You got a C.");
} else {
document.write("You need to improve your score.");
}
Comments in JavaScript
Comments are used to explain your code and make it more understandable. They are ignored by the JavaScript interpreter.
You can add single-line comments using two forward slashes (//):
// This is a single-line comment.
For multi-line comments, use /* to start the comment and */ to end it:
/*
This is a multi-line comment.
It can span multiple lines.
*/
Remember that clear and concise code is crucial for maintainability and collaboration. Use comments wisely to explain your logic and improve code readability.