Introduction to JavaScript:
JavaScript is a powerful and widely-used programming language that is primarily used for web development. It provides the ability to add interactivity and dynamic elements to websites, making them more engaging and responsive. JavaScript is supported by all major web browsers and can be used on both the client side (in the browser) and the server side (with the help of platforms like Node.js). With JavaScript, you can create interactive forms, validate user input, manipulate and update content on web pages, handle events triggered by user actions, communicate with servers to retrieve or send data, and build complex web applications.
Including JavaScript in an HTML file:
To include JavaScript code in an HTML file, you have multiple options. The most common method is to use the <script> tag, which allows you to embed JavaScript code directly into your HTML file or link to an external JavaScript file.
Inline JavaScript:
You can write JavaScript code directly within HTML tags using the on event attributes. For example:
In this example, when the button is clicked, the myFunction JavaScript function is executed, displaying an alert box with the message "Hello, world!".
Internal JavaScript:
You can also include JavaScript code within the <script> tags directly in your HTML file. This method is suitable for smaller scripts or when you want to keep all the code in one place. For example:
<html> <head> <title>My Web Page</title> <script> function sayHello() { alert("Hello, world!"); } </script> </head> <body> <button onclick="sayHello()">Click Me</button> </body> </html>
1.External JavaScript file:
For larger scripts or when you want to reuse code across multiple HTML files, it is recommended to write your JavaScript code in a separate file (e.g., script.js) and link it to your HTML file using the src attribute of the <script> tag. For example:
In this example, the JavaScript code from the script.js file will be executed when the HTML file is loaded.
Running JavaScript code: JavaScript code can be executed in various ways:
Browser Console: You can open the developer tools of your web browser (usually by right-clicking on a web page and selecting "Inspect" or "Inspect Element") and navigate to the "Console" tab. Here, you can directly type JavaScript code and press Enter to execute it. This method is useful for quick testing and debugging.
HTML Events: JavaScript code can be executed in response to specific events triggered by user actions, such as clicking a button, submitting a form, or hovering over an element. You can define event handlers directly within HTML tags using event attributes like onclick, onsubmit, or onmouseover. When the associated event occurs, the specified JavaScript code is executed.
Functions: JavaScript code can be encapsulated within functions. Functions are reusable blocks of code that perform specific tasks. You can define a function using the function keyword, followed by the function name, parentheses, and a block of code wrapped in curly braces {}. To execute the code within a function, you need to call (or invoke) the function by using its name followed by parentheses ().
Basic syntax and structure of JavaScript: JavaScript has a C-like syntax that is easy to understand. Let's break down the basic elements of JavaScript:
Comments: Comments are used to add explanatory text within the code. They are not executed and do not affect the program's functionality. In JavaScript, you can write single-line comments using // and multi-line comments using /* and */. Comments are helpful for documenting your code or temporarily disabling certain sections during development.
Variables: Variables are used to store and manipulate data. In JavaScript, you can declare variables using the var, let, or const keyword, followed by the variable name. Variables declared with var have function scope, while variables declared with let or const have block scope. You can assign a value to a variable using the assignment operator =. JavaScript is a dynamically-typed language, so you don't need to specify the data type explicitly.
Console Output: You can use the console.log() function to display messages or variables in the browser console. It is a useful tool for debugging and troubleshooting your code. The console.log() function takes one or more arguments and prints them to the console.
Conditional Statements: Conditional statements allow you to execute different blocks of code based on specified conditions. The if statement is the most basic form of a conditional statement. It evaluates a condition within parentheses (). If the condition is true, the code block within curly braces {} following the if statement is executed. Optionally, you can include an else block to specify code that executes when the condition is false.
Loops: Loops are used to repeat a block of code multiple times. JavaScript provides different types of loops, but the most common one is the for loop. It consists of an initialization statement, a condition, and an iteration statement. The code within the loop's block is executed repeatedly until the condition evaluates to false.
Functions: Functions allow you to define reusable blocks of code. They encapsulate a set of instructions that can be called multiple times from different parts of your program. Functions are declared using the function keyword, followed by the function name, parentheses (), and a block of code within curly braces {}. You can pass parameters to functions and return values using the return statement.
Variables, Data Types, and Basic Operators: Variables: In JavaScript, variables are containers used to store data values. You can declare a variable using the var, let, or const keyword, followed by the variable name.
Example:
var age = 25;
let name = "John";
const PI = 3.14;
In this example, we declared three variables: age, name, and PI. The var keyword is used for variable declaration throughout the program, let allows block-scoped variables, and const creates a constant variable that cannot be reassigned.
Data Types: JavaScript has several built-in data types, including:Strings: Used to represent textual data. Enclose strings in single or double quotes.
Example:
var greeting = "Hello, world!";Example:
var age = 25; var price = 9.99;Example:
var isTrue = true; var isFalse = false;Example:
var fruits = ["apple", "banana", "orange"];Example:
var person = { name: "John", age: 25, isStudent: true };1. Arithmetic Operators:
Addition: +
Subtraction: -
Multiplication: *
Division: /
Modulus (remainder): %
Subtraction: -
Multiplication: *
Division: /
Modulus (remainder): %
Example:
var x = 10;
var y = 5;
var sum = x + y;
var difference = x - y;
var product = x * y;
var quotient = x / y;
var remainder = x % y;
Assign: =
Add and assign: +=
Subtract and assign: -=
Multiply and assign: *=
Divide and assign: /=
Example:
Add and assign: +=
Subtract and assign: -=
Multiply and assign: *=
Divide and assign: /=
Example:
var num = 10;
num += 5; // equivalent to num = num + 5;
num -= 3; // equivalent to num = num - 3;
num *= 2; // equivalent to num = num * 2;
num /= 4; // equivalent to num = num / 4;
Equal to: ==
Not equal to: !=
Greater than: >
Less than: <
Greater than or equal to: >=
Less than or equal to: <=
Example:
Not equal to: !=
Greater than: >
Less than: <
Greater than or equal to: >=
Less than or equal to: <=
Example:
var a = 10;
var b = 5;
var isEqual = (a == b);
var isNotEqual = (a != b);
var isGreater = (a > b);
var isLess = (a < b);
var isGreaterOrEqual = (a >= b);
var isLessOrEqual = (a <= b);
Logical AND: &&
Logical OR: ||
Logical NOT: !
Example:
Logical OR: ||
Logical NOT: !
Example:
var x = true;
var y = false;
var logicalAnd = x && y;
var logicalOr = x || y;
var logicalNot = !x;
Wow...
ReplyDelete