Java Script Programming
- Get link
- X
- Other Apps
JavaScript Notes
1. What is JavaScript?
- JavaScript: A programming language that enables interactivity on websites (e.g., animations, form validation, and dynamic content).
- Usage: Combined with HTML and CSS for web development.
- Output: Using
document.write, you can directly display results on the webpage.
2. Basic JavaScript Syntax
2.1 Writing JavaScript
JavaScript code can be written:
- Inside
<script> tags in HTML. - In an external
.js file linked to an HTML document.
2.2 Using document.write
The document.write method writes content directly into the webpage.
Example:
<!DOCTYPE html><html>
<head>
<title>Basic Example</title>
<script>
document.write("<h1>Welcome to JavaScript</h1>");
</script>
</head>
<body>
</body>
</html>
3. Variables and Data Types
3.1 Variables
Variables store data values.
<!DOCTYPE html><html>
<head>
<title>Variables Example</title>
<script>
let name = "John"; // String
let age = 25; // Number
let isStudent = true; // Boolean
document.write("<p>Name: " + name + "</p>");
document.write("<p>Age: " + age + "</p>");
document.write("<p>Is Student: " + isStudent + "</p>");
</script>
</head>
<body>
</body>
</html>
3.2 Data Types
JavaScript supports:
- String: Text data, e.g.,
"Hello" - Number: Numeric values, e.g.,
42 - Boolean:
true or false - Array: A list of items, e.g.,
[1, 2, 3] - Object: Key-value pairs, e.g.,
{name: "John", age: 25}
Example:
<script> let colors = ["Red", "Green", "Blue"];
document.write("<p>Colors: " + colors + "</p>");
</script>
4. Operators
Operators perform operations on variables and values.
4.1 Arithmetic Operators
<!DOCTYPE html><html>
<head>
<title>Operators Example</title>
<script>
let a = 10, b = 5;
document.write("<p>Addition: " + (a + b) + "</p>");
document.write("<p>Subtraction: " + (a - b) + "</p>");
document.write("<p>Multiplication: " + (a * b) + "</p>");
document.write("<p>Division: " + (a / b) + "</p>");
</script>
</head>
<body>
</body>
</html>
4.2 Comparison Operators
<script> let x = 10, y = 20;
document.write("<p>x == y: " + (x == y) + "</p>");
document.write("<p>x < y: " + (x < y) + "</p>");
</script>
5. Conditional Statements
5.1 If-Else
<!DOCTYPE html><html>
<head>
<title>If-Else Example</title>
<script>
let age = 18;
if (age >= 18) {
document.write("<p>You are an adult.</p>");
} else {
document.write("<p>You are a minor.</p>");
}
</script>
</head>
<body>
</body>
</html>
5.2 Switch Statement
<script> let day = 3;
switch (day) {
case 1:
document.write("<p>Monday</p>");
break;
case 2:
document.write("<p>Tuesday</p>");
break;
default:
document.write("<p>Other day</p>");
}
</script>
6. Loops
Loops are used to repeat a block of code.
6.1 For Loop
<script> document.write("<p>Numbers 1 to 5:</p>");
for (let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
</script>
6.2 While Loop
<script> let i = 1;
document.write("<p>Using While Loop:</p>");
while (i <= 5) {
document.write(i + "<br>");
i++;
}
</script>
7. Functions
Functions are reusable blocks of code.
Defining and Calling Functions
<!DOCTYPE html><html>
<head>
<title>Functions Example</title>
<script>
function greet(name) {
document.write("<p>Hello, " + name + "!</p>");
}
greet("Alice");
</script>
</head>
<body>
</body>
</html>
8. Arrays
Arrays are collections of items.
<script> let fruits = ["Apple", "Banana", "Mango"];
document.write("<p>Fruits:</p>");
for (let i = 0; i < fruits.length; i++) {
document.write(fruits[i] + "<br>");
}
</script>
9. DOM Manipulation with document.write
Though document.write is not typically used for DOM manipulation, it can display dynamic content.
<!DOCTYPE html><html>
<head>
<title>Dynamic Content</title>
<script>
let message = "Hello, welcome to dynamic content!";
document.write("<h1>" + message + "</h1>");
</script>
</head>
<body>
</body>
</html>
10. Example: Calculator
A simple calculator using document.write.
<!DOCTYPE html><html>
<head>
<title>Simple Calculator</title>
<script>
function calculate() {
let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enter the second number:"));
let sum = num1 + num2;
document.write("<h2>Result:</h2>");
document.write("<p>The sum is: " + sum + "</p>");
}
</script>
</head>
<body>
<button onclick="calculate()">Start Calculator</button>
</body>
</html>
11. Advantages and Limitations of document.write
Advantages:
- Simple to use for learning.
- Directly displays content on the webpage.
Limitations:
- Cannot update content dynamically after the page loads.
- Overwrites all existing content if used after the page is loaded.
- Modern alternatives like
innerHTML or DOM manipulation are preferred.
Assessment: Regular Tests, Assignments, and Final Project Evaluation
Certification: Certificate of Completion from Disha Institute
Number of Days Depends on your practice and feedback. The more you practice and review your work, the faster you will complete the course.
For Batch time and Fess contact to Below Address and Number.
(MCA / Bsc. I.T / ‘A’ / ‘O’ / CCC / Govt. Certified Domain Skill Trainer )
Disha Institute 153 Vijay Nagar Opp. Rg Pg College W.K Road Meerut
(9411617329 , 9458516690)
- Get link
- X
- Other Apps
Comments
Post a Comment