[Go to site: main page, start]
Scribd
Upload
13 views4 pages

Web Development Basics at ICD College

The document provides an overview of web development using HTML and JavaScript. It covers key JavaScript concepts such as variables, operators, conditional statements, loops, functions, objects, and arrays. The content is structured with code examples demonstrating the functionality of each concept.

Uploaded by

owaiszaki414
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views4 pages

Web Development Basics at ICD College

The document provides an overview of web development using HTML and JavaScript. It covers key JavaScript concepts such as variables, operators, conditional statements, loops, functions, objects, and arrays. The content is structured with code examples demonstrating the functionality of each concept.

Uploaded by

owaiszaki414
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ICD College Web Dev Overview</title>

</head>

<body>

<h1>Welcome to ICD College Web Development Overview</h1>

<!-- JavaScript Section -->

<script>

// This is how we include JavaScript inside an HTML file using <script> tags.

// What is JavaScript?

// JavaScript is a programming language used to make web pages interactive and dynamic.

// JavaScript Output Statements

alert("Hello, this is an alert box!"); // Displays a popup message to the user

[Link]("This message is logged in the browser console"); // Prints a message in the browser's
developer console

[Link]("This is written directly on the page"); // Outputs content directly to the webpage

// JavaScript Variables

var name = "ICD College"; // Declares a variable 'name' with string value using 'var'

let course = "Web Development"; // Declares a block-scoped variable 'course' using 'let'

const year = 2025; // Declares a constant 'year' which cannot be changed


// JavaScript Operators

let a = 5; // Assigns value 5 to variable 'a'

let b = 2; // Assigns value 2 to variable 'b'

let sum = a + b; // Adds 'a' and 'b', stores result in 'sum'

let product = a * b; // Multiplies 'a' and 'b', stores result in 'product'

[Link]("Sum:", sum); // Prints the sum

[Link]("Product:", product); // Prints the product

// Conditional Statements

if (a > b) { // Checks if 'a' is greater than 'b'

[Link]("a is greater than b"); // Executes if condition is true

} else {

[Link]("b is greater than or equal to a"); // Executes if condition is false

// Loop Types

// for-loop

for (let i = 1; i <= 3; i++) { // Repeats loop 3 times

[Link]("For loop iteration:", i); // Prints the current loop count

// while loop

let j = 1; // Initializes variable 'j'

while (j <= 3) { // Executes loop while 'j' is less than or equal to 3

[Link]("While loop iteration:", j); // Prints the current value of 'j'


j++; // Increments 'j' by 1

// do-while loop

let k = 1; // Initializes variable 'k'

do {

[Link]("Do-While loop iteration:", k); // Executes at least once

k++; // Increments 'k'

} while (k <= 3); // Repeats while 'k' is less than or equal to 3

// JavaScript Functions

function greet(name) { // Defines a function called 'greet' that takes one parameter

return "Hello, " + name + "!"; // Returns greeting message with the name

[Link](greet("Student")); // Calls 'greet' function with argument "Student"

// JavaScript Objects & Arrays

// Object Example

let student = {

name: "Ali", // Student name

age: 20, // Student age

course: "Web Development" // Student course

};

[Link]("Student Name:", [Link]); // Accesses 'name' property of student object

// Array Example

let courses = ["HTML", "CSS", "JavaScript"]; // Defines an array with 3 courses


[Link]("First Course:", courses[0]); // Accesses the first item in the array

</script>

</body>

</html>

Common questions

Powered by AI

The document defines a function 'greet(name)', which takes a single input parameter 'name'. The function returns a greeting string 'Hello, ' concatenated with the provided name and an exclamation mark. This interaction demonstrates basic function use in JavaScript, encapsulating behavior for reuse. When called, for example with 'greet("Student")', it returns 'Hello, Student!' which is then logged to the console .

According to the document, a JavaScript object is a collection of properties, where a property is an association between a name (or key) and a value, often representing a real-world entity. Unlike arrays, which are ordered collections of values accessed via numerical indices, objects are unordered collections accessed via named properties. The document provides an example object 'student' with properties like 'name', 'age', and 'course', and an array 'courses' with elements like 'HTML', 'CSS', and 'JavaScript' .

The document describes three JavaScript output methods: 'alert()', 'console.log()', and 'document.write()'. The 'alert()' method displays a popup alert box to the user with a specified message. 'console.log()' logs messages to the browser's console, which is typically used for debugging purposes. 'document.write()' writes directly to the HTML document stream, overriding the entire document if executed after the page loads .

JavaScript variables in the document are declared using 'var', 'let', and 'const'. 'var' declares a variable that is function-scoped or globally scoped and can be re-assigned. 'let' is block-scoped, meaning it can only be used within the block it is declared in, and can also be re-assigned. 'const' is similar to 'let' in terms of block-scoping but cannot be reassigned, ensuring the value remains constant .

Code encapsulation in the script section, particularly through function usage, allows for grouping behavior into reusable blocks. The document's function 'greet(name)' demonstrates encapsulation by defining a specific task of generating a greeting message, which can then be reused multiple times with different input values. This approach increases code modularity, readability, and reusability, critical principles in effective programming .

The document demonstrates JavaScript arrays as ordered collections of elements, accessed using zero-based numerical indices. Arrays provide a structured way to store multiple related data items, such as the 'courses' array example in the document, which holds strings "HTML", "CSS", and "JavaScript". Handling arrays allows for efficient data processing, such as iterating over elements with loops, adding/removing items dynamically, and accessing large quantities of data efficiently. This applicability makes arrays a powerful tool for managing lists and collections in programming .

The document employs the concept of scope in JavaScript, particularly showing global vs block scope through 'var', 'let', and 'const'. 'var' is function-scoped or globally scoped, and its variables are accessible throughout the function or globally. In contrast, 'let' and 'const' are block-scoped, meaning their variables are only accessible within the block they are declared in. This affects how variables are accessed and modified in different parts of the code, enforcing data hiding and reducing the risk of variable conflicts .

The document illustrates JavaScript's use of basic mathematical operators such as addition '+' and multiplication '*'. These operators perform calculations on numeric values; for instance, 'let sum = a + b' adds two numbers, while 'let product = a * b' multiplies them. These operators are fundamental for performing arithmetic operations, which are essential for data processing and manipulation in programming .

The document demonstrates three types of loops in JavaScript: for-loop, while-loop, and do-while-loop. A for-loop is used when the number of iterations is known beforehand; it runs a specified number of times. A while-loop checks the condition before executing the block of code and continues to execute as long as the condition is true. In contrast, a do-while-loop executes the code block at least once before checking the condition, ensuring the loop runs at least once regardless of the condition .

Conditional statements in JavaScript, as shown in the document, are structured using 'if' and 'else'. An 'if' statement evaluates a condition; if true, it executes the block of code within it. If the condition is false, the 'else' statement block is executed, if it exists. This structure allows the code to make decisions based on different conditions .

You might also like