Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 views

HTML AND JAVASCRIPT

The document provides an overview of HTML and JavaScript, detailing the basic structure of an HTML document, essential HTML tags, and how to create forms. It also introduces JavaScript as a client-side scripting language, explaining variable declaration, data types, operators, conditional statements, loops, and DOM manipulation. Additionally, it includes examples of JavaScript functions, form validation, local storage, and a sample project demonstrating an interactive webpage.

Uploaded by

levi makokha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML AND JAVASCRIPT

The document provides an overview of HTML and JavaScript, detailing the basic structure of an HTML document, essential HTML tags, and how to create forms. It also introduces JavaScript as a client-side scripting language, explaining variable declaration, data types, operators, conditional statements, loops, and DOM manipulation. Additionally, it includes examples of JavaScript functions, form validation, local storage, and a sample project demonstrating an interactive webpage.

Uploaded by

levi makokha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML AND JAVASCRIPT

HTML (HyperText Markup Language) is the backbone of web development. It


defines the structure and content of a webpage.

Basic HTML Structure

A typical HTML document follows this structure:

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

ESSENTIAL HTML TAGS

Tag Description
<html> Root element of an HTML page
Contains meta information and links
<head>
to styles/scripts
Sets the title of the web page
<title>
(shown in the browser tab)
Contains the visible content of the
<body>
web page
Headings (h1 is the largest, h6 is the
<h1> to <h6>
smallest)
<p> Paragraph of text
<a href="URL"> Creates a hyperlink
<img src="image.jpg"> Displays an image
<ul> & <ol> Unordered and ordered lists
<li> List item
<table> Creates a table
<tr>, <td> Table row and table cell
<form> Creates an input form
Input field (text, password, submit,
<input>
etc.)

FORMS AND INPUT ELEMENTS

Forms allow users to input data. Example:

<form action="submit.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<input type="email" id="email" name="email">

<input type="submit" value="Submit">

</form>

INTRODUCTION TO JAVASCRIPT

JavaScript is a client-side scripting language used to make web pages


interactive. It is embedded inside an HTML document using the <script> tag.

Writing JavaScript Code

JavaScript can be written inside HTML in three ways:

a) Inline JavaScript (inside an element)

b) Internal JavaScript (inside <script> in the HTML file)

c) External JavaScript (linked from a .js file)

Example of Internal JavaScript

<script>

alert("Welcome to my website!");
</script>

Example of External JavaScript

<!-- HTML file -->

<script src="script.js"></script>

// script.js file

alert("This is an external JavaScript file!");

VARIABLES IN JAVASCRIPT

Variables store data values. JavaScript has three ways to declare variables:

var x = 10; // Old way (not recommended)

let y = 20; // Modern way (recommended)

const z = 30; // Constant (cannot be changed)

Data Types in JavaScript

Type Example
String "Hello, World!"
Number 100, 3.14
Boolean true, false
Array ["Apple", "Banana", "Orange"]
Object {name: "John", age: 25}

Operators in JavaScript

Operator Description Example


+ Addition 5+2=7
- Subtraction 5-2=3
* Multiplication 5 * 2 = 10
/ Division 10 / 2 = 5
== Equal to 5 == "5" (true)
=== Strictly equal 5 === "5" (false)
&& Logical AND (5 > 3 && 2 < 4)

Conditional Statements

Used to execute different actions based on conditions.

Example of if-else Statement


let age = 18;

if (age >= 18) {

console.log("You are an adult.");

} else {

console.log("You are a minor.");

Loops in JavaScript

Loops allow repetition of code.

For Loop

for (let i = 0; i < 5; i++) {

console.log("Iteration number: " + i);

While Loop

let i = 0;

while (i < 5) {

console.log("Count: " + i);

i++;

JAVASCRIPT AND HTML DOM (DOCUMENT OBJECT MODEL)

The DOM allows JavaScript to interact with HTML elements dynamically.

Selecting Elements

document.getElementById("myElement").innerHTML = "New Text";

document.querySelector(".myClass").style.color = "blue";

Handling Events
Events allow user interactions.

<button onclick="sayHello()">Click Me</button>

<script>

function sayHello() {

alert("Hello, user!");

</script>

JavaScript Functions

Functions are reusable blocks of code.

Defining a Function

function greet(name) {

return "Hello, " + name;

console.log(greet("Alice"));

JAVASCRIPT VALIDATION (FORM HANDLING)

Used to check user input before submitting a form.

<form onsubmit="return validateForm()">

<input type="text" id="username">

<input type="submit" value="Submit">

</form>

<script>
function validateForm() {

let user = document.getElementById("username").value;

if (user === "") {

alert("Username cannot be empty!");

return false;

return true;

</script>

Using Local Storage

Stores data in the browser.

localStorage.setItem("username", "Alice");

alert(localStorage.getItem("username"));

SAMPLE PROJECT: INTERACTIVE WEBPAGE

A simple webpage that takes user input and displays it dynamically.

<!DOCTYPE html>

<html>

<head>

<title>Andrea web Page</title>

</head>
<body>

<h1>Enter Your Name:</h1>

<input type="text" id="nameInput">

<button onclick="display()">Submit</button>

<p id="output"></p>

<script>

function display() {

let name = document.getElementById("nameInput").value;

document.getElementById("output").innerHTML = "Hello, " +


name + "!";

</script>

</body>

</html>

You might also like