Scribd
Upload
10 views

Introduction To Web Technology Notes

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Introduction To Web Technology Notes

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

imageList[index];

Got it! I'm ready to create detailed study notes with example code as per your format
whenever you upload the PDFs. Just send them my way!

L01-HTML.pdf
PDF

Here's a detailed set of study notes based on your PDF about HTML:

Chapter: Introduction to HTML


1. What is HTML?

HTML stands for Hyper Text Markup Language.

It is used to describe and structure web documents by marking up parts of the


document to indicate how they should be displayed.

2. First HTML Document (Example)

html

<html>
<head>
<title>JT</title>
</head>
<body>
Hello World!
</body>
</html>

The basic structure of an HTML document starts with <html> and ends with
</html> .

The <head> section contains metadata, while the <body> section contains the
visible content.

3. HTML Tags

HTML tags are not case-sensitive and usually come in pairs:


<tagname>content</tagname> .

27/74
Example structure:
html

<html>
<body>
<p>This is a paragraph</p>
</body>
</html>

4. Common Tags

Headings: <h1> (most important) to <h6> (least important)

html

<h1>Heading 1</h1>
<h6>Heading 6</h6>

Paragraphs: <p>

html

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

Line Break: <br />

html

<p>First line <br /> Second line</p>

Horizontal Line: <hr />

html

<hr />

5. Character Entities

Replace reserved characters using entities:

< becomes &lt;

> becomes &gt;

& becomes &amp;

28/74
" becomes &quot;

' becomes &apos;

6. Text Formatting

Italic: <i>italic text</i>

Bold: <b>bold text</b>

Highlighted: <mark>highlighted text</mark>

Subscript: <sub> and Superscript: <sup>

Example:
html

<p>Math equation: x<sub>1</sub><sup>n</sup> + x<sub>2</sub><sup>n</sup> =


y<sub>1</sub><sup>n</sup></p>

7. Preformatted Text: <pre>

html

<pre>
Mary
had a
little lamb
</pre>

8. Computer Code Block

html

<pre>
<code>
sum = a + b + c;
</code>
</pre>

9. Images

html

<img src="uow-logo.png" height="300" width="200" alt="Logo of UOW" />

29/74
Attributes:

src : URL of the image

alt : Alternate text

height , width : Dimensions

10. Links

html

<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a>

href : URL for the link

target="_blank" : Opens link in a new tab

11. Lists

Unordered List:

html

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Ordered List:

html

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition List:

html

<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>

30/74
12. Tables

html

<table border="1" width="50%">


<caption>User Information</caption>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>jsmith</td>
<td>John</td>
<td>Smith</td>
</tr>
</table>

13. Comments

html

<!-- This is a comment -->

14. Security Note: index.html

Including index.html in directories can prevent exposure of the directory structure


to users, enhancing security.

These notes cover fundamental HTML elements, attributes, and usage with example code for
practical understanding. Let me know if you'd like any additional details or further
breakdowns!

L02-CSS.pdf
PDF

Here's a comprehensive set of study notes for your CSS PDF:

31/74
Chapter: Introduction to CSS
1. What is CSS?

CSS stands for Cascading Style Sheets.

It separates the content of an HTML document from its presentation (style),


enhancing the maintainability and flexibility of web pages.

2. Three Ways to Apply CSS

Inline CSS: Using the style attribute within HTML tags.

html

<h1 style="color: blue;">This is a Blue Heading</h1>

Document (Internal) CSS: Using the <style> tag within the <head> section of an
HTML document.

html

<html>
<head>
<style>
body { background-color: lightgrey; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

External CSS: Linking an external .css file using the <link> tag.

html

<link rel="stylesheet" href="path/to/mystyle.css">

Example in mystyle.css :

css

body { background-color: lightgrey; }

32/74
h1 { color: blue; }

3. CSS Property Syntax

Format: property: value;

Multiple properties can be separated by a semicolon ( ; ).

html

<p style="border: 1px solid black; padding: 10px; color: blue;">


This is a styled paragraph.
</p>

4. Color in CSS

Supported through color names or hex codes.


html

<h1 style="color: lightgrey;">Light Grey Heading</h1>


<h1 style="color: #D3D3D3;">Light Grey Heading</h1>

5. CSS Precedence Levels

Inline CSS > Document CSS > External CSS

Inline CSS has the highest precedence, followed by document CSS, then external
CSS.

6. Selectors

Simple Selectors: Target elements directly.

css

p {
border: 1px solid black;
padding: 10px;
}

Class Selectors: Apply styles to elements with a specific class.

css

.userInfo {
border: 1px solid black;

33/74
padding: 10px;
}

html

<p class="userInfo">This is a styled paragraph.</p>

ID Selectors: Apply styles to a unique element with a specific ID.

css

#userHeading {
color: blue;
}

html

<h1 id="userHeading">User Heading</h1>

7. Relationships: Descendant and Child Selectors

Descendant Selector:

css

div i {
color: red;
}

Applies to all <i> elements inside a <div> .

Child Selector:

css

div > i {
color: red;
}

Applies only to direct <i> children of a <div> .

8. Contextual Selectors

Target elements based on their relationship to parent elements.


css

34/74
div.userInfo i {
color: red;
}

9. Pseudo-Class Selectors

Used to style elements in specific states.


css

a:link {
color: red;
}
a:visited {
color: green;
}
h1:hover {
color: blue;
}

10. List Properties

Ordered List:

html

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

css

ol {
list-style-type: decimal;
}
ol ol {
list-style-type: upper-roman;
}

Custom list style using images:


css

35/74
ol {
list-style-image: url('path/to/image.png');
}

11. Span and Div

<span> : For styling inline elements.

css

span.specialText {
color: red;
font-size: 150%;
}

html

This is <span class="specialText">special text</span>.

<div> : For styling block sections.

css

div.userInfo {
border: 1px solid black;
padding: 10px;
}

html

<div class="userInfo">
<p>User Information</p>
</div>

12. Comments in CSS

css

/* This is a single-line comment */


p {
color: blue;

36/74
/* This is a multi-line comment */
}

These notes summarize key concepts in CSS, focusing on implementation methods,


properties, and advanced selectors. Let me know if you'd like further examples or additional
topics!

L03-Form.pdf
PDF

Here's a detailed set of study notes for your web form PDF:

Chapter: Web Forms


1. Introduction to HTML Forms

HTML forms are used to collect user input and send it to a server for processing.

Common form elements include:

Text fields

Textareas

Checkboxes

Radio buttons

Selection dropdowns

Submit buttons

2. Basic Form Structure (Example)

html

<form action="handle_login" method="post">


Username:<br />
<input type="text" name="username" size="30"><br />
Password:<br />
<input type="password" name="password" size="30"><br /><br />

37/74
<input type="submit" value="Login">
<input type="reset" value="Reset form">
</form>

3. Form Elements

Text Input Field:

html

<input type="text" name="firstname" size="30">

Password Field:

html

<input type="password" name="password" size="30">

Checkboxes:

html

<input type="checkbox" name="journal" value="AMM">American Mathematical


Monthly<br />
<input type="checkbox" name="journal" value="CMJ">College Mathematics
Journal<br />

Radio Buttons:

html

<input type="radio" name="studentType" value="u">Undergraduate<br />


<input type="radio" name="studentType" value="p">Postgraduate<br />

Selection Dropdown:

html

<select name="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
</select>

Multi-Select Dropdown:

38/74
html

<select name="day" multiple>


<option value="mon">Monday</option>
<option value="wed">Wednesday</option>
</select>

Textarea:

html

<textarea name="comment" rows="5" cols="30"></textarea>

4. Form Submission Methods

GET Method:

Data is appended to the URL and is visible.

Suitable for non-sensitive data.

Can be bookmarked and saved in browser history.

html

<form action="handle_login" method="get">

POST Method:

Data is sent in the body of the request and is not visible in the URL.

More secure than GET, especially for sensitive information.

html

<form action="handle_login" method="post">

Differences Between GET and POST:

Visibility: GET displays data in the URL; POST does not.

Security: POST is preferred for sensitive data.

Data Length: GET has URL length limitations; POST does not.

Data Type: GET supports only ASCII characters; POST allows binary data.

39/74
5. Reset Button

Clears all input fields in the form when clicked.


html

<input type="reset" value="Reset form">

6. Form Submission Example

html

<form action="handle_login" method="post">


First name:<br />
<input type="text" name="firstname" size="30"><br />
Last name:<br />
<input type="text" name="lastname" size="30"><br />
<input type="submit" value="Submit">
</form>

The name attribute in form elements is essential as it identifies the input data when
sent to the server.

7. Practical Form Examples

Google Search Form Example: Access the Google search form to understand how
parameters are passed:

html

http://www.uow.edu.au/~dong/w3/example/form/google-search.html

These notes summarize essential concepts and code examples for using HTML forms. Let me
know if you'd like additional details or further examples!

L04-Javascript1.pdf
PDF

Here's a comprehensive set of study notes based on your JavaScript PDF:

40/74
Chapter: The Basics of JavaScript
1. Introduction to JavaScript

JavaScript is a scripting language used to add interactive features to web pages.

2. First JavaScript Example

html

<button type="button" onclick="alert('Hi');">Click me</button>

3. Where to Include JavaScript

In the Head:

html

<head>
<script>
function sayHi() {
alert("Hi");
}
</script>
</head>

At the End of the Body (recommended for better page load):

html

<body>
<!-- Page content -->
<script>
function sayHi() {
alert("Hi");
}
</script>
</body>

4. External JavaScript

Link an external JavaScript file:


html

41/74
<script src="js/myscript.js"></script>

5. Changing Content with JavaScript

html

<button type="button" onclick="changeToFrench();">Click me to change the text to


French</button>
<span id="french">Hi there!</span>
<script>
function changeToFrench() {
document.getElementById("french").innerHTML = "Salut!";
}
</script>

6. Changing Style with JavaScript

html

<button type="button" onclick="changeStyle();">Change Style</button>


<span id="styledText">Hello world</span>
<script>
function changeStyle() {
var e = document.getElementById("styledText");
e.style.color = "orange";
e.style.fontSize = "30px";
e.style.fontStyle = "italic";
}
</script>

7. JavaScript Syntax Basics

Variables:

javascript

var studentName = "John";


var x, y;
x = 5;
y = x + 2;

Comments:

42/74
javascript

// Single-line comment
/* Multi-line comment */

8. JavaScript Data Types

Number:

javascript

var age = 19; // Number


alert(typeof age); // "number"

String:

javascript

var name = "John";


alert(typeof name); // "string"

Boolean:

javascript

var isActive = true;


alert(typeof isActive); // "boolean"

9. Operators

Arithmetic Operators: + , - , * , / , % , ++ , --

Comparison Operators:

javascript

if (x == y) { /* equal value */ }
if (x === y) { /* equal value and type */ }
if (x != y) { /* not equal value */ }
if (x !== y) { /* not equal value or type */ }

10. Date Object

javascript

43/74
var now = new Date();
alert(now); // Displays current date and time

Create different Date instances:


javascript

var specificDate = new Date("2000-01-30");


var dateFromMillisec = new Date(86400000); // 02 Jan 1970

Date Methods:
javascript

now.getDate(); // Day (1-31)


now.getMonth(); // Month (0-11)
now.getFullYear(); // Full year (yyyy)

11. String Methods

javascript

var text = "One Fish, Two Fish";


text.toUpperCase(); // "ONE FISH, TWO FISH"
text.indexOf("Fish"); // 4
text.includes("Red"); // false

12. Arrays

javascript

var subjects = ["Math", "Science", "History"];


subjects.push("Art"); // Adds "Art" to the end
alert(subjects.length); // 4

13. Objects

javascript

var student = {
name: "John",
age: 21
};

44/74
alert(student.name); // "John"
student.age = 22; // Change age

14. Array Sorting

javascript

var numbers = [1, 20, -3, 4];


numbers.sort((a, b) => a - b); // Sorts as [-3, 1, 4, 20]

15. Dialogs

Confirm Box:

javascript

var result = confirm("Proceed?");


if (result) {
alert("User clicked OK");
} else {
alert("User clicked Cancel");
}

Prompt Box:

javascript

var name = prompt("Enter your name", "defaultName");


if (name != null) {
alert("Hello " + name);
}

These notes provide an overview of fundamental JavaScript concepts with practical examples.
Let me know if you need more details or further breakdowns!

L05-Javascript2.pdf
PDF

Here's a detailed set of study notes for your JavaScript Form Validation PDF:

45/74
Chapter: JavaScript Form Validation
1. Form Validation Basics

HTML forms often use JavaScript to validate user input before submission.

The onSubmit attribute is used to call a JavaScript function for validation.

html

<form action="myService" method="get" onSubmit="return validateForm()">


<!-- form content -->
</form>

2. Example: Simple Email Validation

html

<form action="myService" method="get" onSubmit="return validateForm()">


Email: <input id="email" type="text" name="email"><br /><br />
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
var email = document.getElementById("email").value;
if (email == null || email.trim() == "") {
alert("Email must be filled out");
return false;
}
return true;
}
</script>

3. Displaying Error Messages

Use a <span> element to display error messages near the input fields.

html

<form action="myService" method="get" onSubmit="return validateForm()">


Email: <input id="email" type="text" name="email">
<span id="emailError"></span><br /><br />

46/74
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
var email = document.getElementById("email").value;
if (email == null || email.trim() == "") {
document.getElementById("emailError").innerHTML = "Email must be
filled out";
return false;
}
document.getElementById("emailError").innerHTML = ""; // Clears the
message if valid
return true;
}
</script>

4. Styling Error Messages

html

<style>
.errorMessage {
color: red;
}
</style>

<span id="emailError" class="errorMessage"></span>

5. Validation for Multiple Fields

Example of matching two input fields (e.g., email and email confirmation):
html

<form action="myService" method="get" onSubmit="return validateForm()">


Email: <input id="email" type="text" name="email"><span id="emailError"
class="errorMessage"></span><br />
Confirm Email: <input id="email2" type="text" name="email2"><span
id="emailError2" class="errorMessage"></span><br /><br />
<input type="submit" value="Submit">
</form>

<script>

47/74
function validateForm() {
var email = document.getElementById("email").value;
var email2 = document.getElementById("email2").value;
if (email == null || email.trim() == "") {
document.getElementById("emailError").innerHTML = "Email must be
filled out";
return false;
}
document.getElementById("emailError").innerHTML = ""; // Clears the
message if valid

if (email2 == null || email2.trim() == "") {


document.getElementById("emailError2").innerHTML = "Email must be
filled out";
return false;
}
document.getElementById("emailError2").innerHTML = ""; // Clears the
message if valid

if (email.trim() != email2.trim()) {
document.getElementById("emailError2").innerHTML = "Emails do not
match";
return false;
}
return true;
}
</script>

6. Handling Whitespace

Use the trim() method to remove whitespace:

javascript

var email = document.getElementById("email").value.trim();

7. Simple Math Problem for Validation

html

<script>
function validateForm() {
var answer = prompt("What is 1 + 2?");

48/74
if (answer == null || answer != 3) {
return false; // Prevent form submission if the answer is incorrect
}
return true;
}
</script>

8. Generating Random Numbers

Use Math.random() and Math.floor() to create random problems:

javascript

var x = Math.floor(Math.random() * 10) + 1;


var y = Math.floor(Math.random() * 10) + 1;
var correctAnswer = x + y;

var answer = prompt("What is " + x + " + " + y + "?");


if (answer == null || answer != correctAnswer) {
return false;
}

9. HTML5 Input Validation

Use the required attribute for basic validation:

html

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

10. Regular Expressions in JavaScript

Pattern matching in form validation:


javascript

if (/^[A-Z][a-z], [A-Z][a-z]$/.test(input) == false) {


alert("Input does not match the pattern");
return false;
}

Examples of common patterns:

^[0-9]{5}$ : Exactly 5 digits

^.{4,10}$ : Between 4 and 10 characters

49/74
^\d{2,}$ : At least 2 digits

These notes cover JavaScript form validation essentials and include practical examples for
input handling and validation techniques. Let me know if you need more examples or further
clarification!

L06-Javascript3.pdf
PDF

Here's a detailed set of study notes for your additional JavaScript PDF:

Chapter: Advanced JavaScript Concepts and Examples


1. Getting and Setting Input Values

javascript

// Get value from an input field


var feeAmount = document.getElementById("fee").value;

// Set value to an input field


document.getElementById("fee").value = "230.50";

2. Converting Strings to Numbers

javascript

var s = "100";
var x = Number(s);

3. Accessing and Modifying HTML Content

html

<span id="mark"><b>87</b></span>

javascript

50/74
// Get text content
var mark = document.getElementById("mark").textContent; // Returns "87"

// Set new content


document.getElementById("mark").innerHTML = "90"; // Sets content to "90"

4. Generating Random Numbers

javascript

// Random decimal between 0 (inclusive) and 1 (exclusive)


var x = Math.random();

// Random integer between 0 and 9


var x = Math.floor(Math.random() * 10);

// Random integer between 1 and 6


var x = Math.floor(Math.random() * 6) + 1;

5. Event Handling Examples

Changing an Image on Click:

html

<img id="circle" src="images/circle1.png" onclick="changeCircleImage()" />


<script>
function changeCircleImage() {
var image = document.getElementById("circle");
if (image.src.includes("circle1")) {
image.src = "images/circle2.png";
} else {
image.src = "images/circle1.png";
}
}
</script>

Redirecting on Button Click:

html

<button onclick="goToUOW()">Click me to visit UOW</button>


<script>

51/74
function goToUOW() {
window.location.assign("http://www.uow.edu.au");
}
</script>

Changing Input Text to Uppercase on Change:

html

<input type="text" id="discountCode" onchange="uppercase()" />


<script>
function uppercase() {
var e = document.getElementById("discountCode");
e.value = e.value.toUpperCase();
}
</script>

6. Mouse Event Handling

Mouse Down and Up:

html

<span id="demo" onmousedown="mouseDown()" onmouseup="mouseUp()">Click


Me</span>
<script>
function mouseDown() {
document.getElementById("demo").innerHTML = "Release Me";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "Thank You";
}
</script>

7. Dynamic Content Creation

html

<button onclick="addSubject()">Click here to add subject</button>


<div id="subjectList"></div>

<script>
function addSubject() {
var subject = prompt("Enter subject code");

52/74
if (subject != null) {
var para = document.createElement("p");
var node = document.createTextNode(subject);
para.appendChild(node);
document.getElementById("subjectList").appendChild(para);
}
}
</script>

8. Animation Using setInterval

Repeated Alerts:

javascript

function alertForever() {
var alertSchedule = setInterval(alertFunction, 5000);
}
function alertFunction() {
alert("Hello!");
}

Stopping an Interval:

javascript

var alertSchedule;
function stopIt() {
clearInterval(alertSchedule);
}

Clock Display:

html

<button onclick="startClock()">Click here to start the clock</button>


<span id="clock"></span>
<script>
function startClock() {
setInterval(displayClock, 1000);
}
function displayClock() {
document.getElementById("clock").innerHTML = new Date();

53/74
}
</script>

9. Moving Text Animation

html

<button onclick="moveText()">Click here to move text</button>


<span id="movingText" style="position:absolute;">Moving text</span>
<script>
function moveText() {
var e = document.getElementById("movingText");
var pos = 0;
var moveTextSchedule = setInterval(move, 50);
function move() {
pos++;
e.style.top = pos + 'px';
e.style.left = pos + 'px';
if (pos == 300) {
clearInterval(moveTextSchedule);
}
}
}
</script>

10. Image Slide Show

javascript

function slideShow() {
setInterval(changeImage, 2000);
}

function changeImage() {
var imageList = [
"images/simpson2.png",
"images/simpson4.png",
"images/simpson6.png",
"images/simpson1.jpg",
"images/simpson3.jpg",
"images/simpson5.png",
"images/simpson7.jpg"
];

54/74
var index = Math.floor(Math.random() * imageList.length);
document.getElementById("simpson").src = imageList[index];
}

html

<img id="simpson" src="images/simpson1.jpg" height="500px" />


<script>slideShow();</script>

These notes cover essential JavaScript concepts, event handling, dynamic content creation,
and basic animations. Let me know if you'd like additional examples or further explanations!

L07-XML-DTD-XSD.pdf
PDF

Here's a comprehensive set of study notes for your XML, DTD, and XSD PDF:

Chapter: XML, DTD, and XSD

1. XML (eXtensible Markup Language)

XML is a markup language similar to HTML but is designed for data storage and
transport.

It is software- and hardware-independent, enabling data interchange between different


systems.

Example of a basic XML document:


xml

<?xml version="1.0" ?>


<student>
<firstName>John</firstName>
<lastName>Smith</lastName>
<email>[email protected]</email>

55/74
<mobile>0211223344</mobile>
</student>

2. XML Declaration

The XML declaration is optional but should be at the first line of the document.
xml

<?xml version="1.0" encoding="UTF-8" ?>

3. XML Structure

Must have one root element encompassing all other elements.


xml

<rootElement>
<child>
<subchild>Content</subchild>
</child>
</rootElement>

4. XML Elements and Attributes

Elements are the building blocks of an XML document.


xml

<student gender="M">
<firstName>John</firstName>
<lastName>Smith</lastName>
</student>

Attributes provide additional information about elements and must be quoted.

5. Self-Closing Tags and Nested Rules

Self-closing tag for empty elements:


xml

<emptyElement />

XML tags must be properly nested:


xml

56/74
<student>
<firstName>John</firstName>
<lastName>Smith</lastName>
</student>

6. Entity References

Reserved characters must be replaced with entity references:

< → &lt;

> → &gt;

& → &amp;

' → &apos;

" → &quot;

7. Comments in XML

xml

<!-- This is a comment -->

Chapter: DTD (Document Type Definition)


DTD defines the structure and legal elements/attributes for XML documents.

Can be declared internally or as an external reference.

1. Internal DTD Example

xml

<?xml version="1.0" standalone="yes" ?>


<!DOCTYPE student [
<!ELEMENT student (firstName, lastName, email, mobile)>
<!ELEMENT firstName (#PCDATA)>
<!ELEMENT lastName (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT mobile (#PCDATA)>
]>

2. External DTD Example

57/74
xml

<?xml version="1.0" standalone="no" ?>


<!DOCTYPE student SYSTEM "student.dtd">
<student>
<firstName>John</firstName>
<lastName>Smith</lastName>
<email>[email protected]</email>
</student>

Content of student.dtd :

xml

<!ELEMENT student (firstName, lastName, email)>


<!ELEMENT firstName (#PCDATA)>
<!ELEMENT lastName (#PCDATA)>
<!ELEMENT email (#PCDATA)>

Chapter: XSD (XML Schema Definition)


XSD is another way to define the structure and content of XML documents.

It is more powerful than DTD as it supports data types and namespaces.

Example of an XML schema ( student.xsd ):

xml

<?xml version="1.0" ?>


<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:element name="student">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="firstName" type="xsd:string"/>
<xsd:element name="lastName" type="xsd:string"/>
<xsd:element name="email" type="xsd:string"/>
<xsd:element name="mobile" type="xsd:string"/>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>

58/74
1. Complex and Simple Types

ComplexType: Contains elements and attributes.

xml

<xsd:element name="person">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="firstName" type="xsd:string"/>
<xsd:element name="lastName" type="xsd:string"/>
</xsd:sequence>
<xsd:attribute name="gender" type="xsd:string"/>
</xsd:complexType>
</xsd:element>

SimpleType: Contains only text without child elements or attributes.

xml

<xsd:element name="website" type="xsd:anyURI" />

2. Restrictions in XSD

Example of an enumerated restriction:


xml

<xsd:element name="grade">
<xsd:simpleType>
<xsd:restriction base="xsd:string">
<xsd:enumeration value="A"/>
<xsd:enumeration value="B"/>
<xsd:enumeration value="C"/>
</xsd:restriction>
</xsd:simpleType>
</xsd:element>

These notes summarize key concepts of XML, DTD, and XSD with practical examples for each.
Let me know if you need further clarification or additional details!

59/74
L08-XSLT.pdf
PDF

Here's a detailed set of study notes based on your XSLT PDF:

Chapter: XSL and XSLT Overview


1. What is XSL?

XSL (Extensible Stylesheet Language) is a family of languages for transforming and


rendering XML documents.

It includes:

XSLT (XSL Transformations): A language for transforming XML documents into


other formats such as HTML or XML.

XPath: A language used for navigating XML documents.

XQuery: A language used for querying XML documents.

2. XSLT Overview

XSLT transforms XML documents into different formats, enabling their display or
further processing.

XSLT documents have the .xsl extension.

The document defines how XML elements should be processed and displayed.

3. Basic XSLT Structure

xml

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/rootElement">
<!-- Transformation content here -->
</xsl:template>
</xsl:stylesheet>

60/74
Chapter: Example XML and XSLT Usage
1. Example XML Document

xml

<?xml version="1.0" encoding="UTF-8" ?>


<dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
<person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
</dailyTransaction>

2. Linking an XML Document to an XSLT File

xml

<?xml version="1.0" encoding="UTF-8" ?>


<?xml-stylesheet type="text/xsl" href="transaction-style1.xsl"?>
<dailyTransaction date="24/02/2015">
<!-- Content here -->
</dailyTransaction>

Chapter: Creating an XSLT File


1. Simple XSLT Example

xml

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>

61/74
<head>
<title>XSLT Example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /></h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text>
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Chapter: Advanced XSLT Features


1. Applying Templates and Sorting

Example of applying templates with sorting:


xml

<table border="1">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Staff ID</th>
<th>Operation</th>
</tr>
<xsl:apply-templates select="person">
<xsl:sort select="lastName" />

62/74
</xsl:apply-templates>
</table>

2. Conditional Processing with <xsl:choose>

xml

<xsl:choose>
<xsl:when test="@operation = 'add'">
<td bgcolor="#ffffe6">
<xsl:value-of select="@operation" />
</td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="#d6f5d6">
<xsl:value-of select="@operation" />
</td>
</xsl:otherwise>
</xsl:choose>

3. Using <xsl:attribute> for Dynamic Attributes

xml

<td align="center">
<img>
<xsl:attribute name="src">
<xsl:text>images/</xsl:text>
<xsl:value-of select="@operation"/>
<xsl:text>.png</xsl:text>
</xsl:attribute>
<xsl:attribute name="width">30px</xsl:attribute>
</img>
</td>

These notes summarize the core concepts of XSLT, including transforming XML documents,
using templates, and applying conditional logic. Let me know if you'd like more detailed
explanations or further examples!

63/74
L09-JSON.pdf
PDF

Here's a comprehensive set of study notes based on your JSON PDF:

Chapter: JSON (JavaScript Object Notation)


1. What is JSON?

JSON is a lightweight data-interchange format that is easy for humans to read and
write, and easy for machines to parse and generate.

Commonly used in web applications to store or transport data.

JSON is "self-describing" and simple to understand.

2. Basic Structure of JSON

JSON data is organized in name/value pairs.

Data items are separated by commas.

Curly braces {} are used to define objects.

Example:
json

{
"firstName": "John",
"lastName": "Smith",
"domestic": true,
"fee": 100.5
}

3. Converting Between JavaScript Objects and JSON

Convert JavaScript object to JSON string:

javascript

var objJSON = JSON.stringify(obj);

Convert JSON string to JavaScript object:

64/74
javascript

var obj = JSON.parse(objJSON);

4. JSON Arrays

Square brackets [] are used to hold arrays.

Example:
json

[
{
"firstName": "John",
"lastName": "Smith"
},
{
"firstName": "Kate",
"lastName": "Williams"
}
]

Chapter: JSON Examples and Applications


1. Example: Creating a JSON String from a JavaScript Object

javascript

function showJSON() {
var john = {};
john.firstName = "John";
john.lastName = "Smith";
john.domestic = true;
john.fee = 100.50;

var johnJSON = JSON.stringify(john);


console.log(johnJSON);
}

html

<button onclick="showJSON()">Click here to see JSON string</button>

65/74
2. Example: Converting JSON String to JavaScript Object

javascript

function showObject() {
var johnJSON =
'{"firstName":"John","lastName":"Smith","domestic":true,"fee":100.5}';
var john = JSON.parse(johnJSON);
console.log(john);
console.log("Full name is " + john.firstName + " " + john.lastName);
}

html

<button onclick="showObject()">Click here to see object from JSON</button>

3. Example: Creating an Array of JSON Objects

javascript

function showJSON() {
var john = { firstName: "John", lastName: "Smith" };
var kate = { firstName: "Kate", lastName: "Williams" };

var studentList = [john, kate];


var studentListJSON = JSON.stringify(studentList);
console.log(studentListJSON);
}

html

<button onclick="showJSON()">Click here to see JSON string</button>

4. Example: Parsing JSON Array

javascript

function showArray() {
var studentListJSON = '[{"firstName":"John","lastName":"Smith"},
{"firstName":"Kate","lastName":"Williams"}]';
var studentList = JSON.parse(studentListJSON);
console.log(studentList);

66/74
console.log("There are " + studentList.length + " students");
}

html

<button onclick="showArray()">Click here to see array from JSON</button>

5. Example: Nested JSON Objects

javascript

function showJSON() {
var john = {
firstName: "John",
lastName: "Smith",
enrolledSubjects: [
{ code: "MATH101", title: "Algebra" },
{ code: "CSIT122", title: "C programming" }
]
};

var johnJSON = JSON.stringify(john);


console.log(johnJSON);
}

json

{
"firstName": "John",
"lastName": "Smith",
"enrolledSubjects": [
{ "code": "MATH101", "title": "Algebra" },
{ "code": "CSIT122", "title": "C programming" }
]
}

Chapter: JSON and AJAX


1. Using JSON with AJAX

To make an AJAX call to get JSON data:


javascript

67/74
function getMarketAjax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
processResult(xhttp);
}
};
xhttp.open("GET", "market.json", true);
xhttp.send();
}

2. Processing JSON Response

javascript

function processResult(xhttp) {
var jsonText = xhttp.responseText;
var marketObj = JSON.parse(jsonText);
display(marketObj);
}

3. Displaying JSON Data

javascript

function display(marketObj) {
var html = "<h1>Stock Market Activity " + marketObj.queryTime + "</h1>";
html += "<table border='1'>";
html += "<tr><th>Index</th><th>Value</th><th>Change</th><th>Net / %</th>
</tr>";

for (var i = 0; i < marketObj.indexList.length; i++) {


html += "<tr>";
html += "<td><b>" + marketObj.indexList[i].name + "</b></td>";
html += "<td align='right'>" + marketObj.indexList[i].value + "</td>";
if (marketObj.indexList[i].change < 0) {
html += "<td style='color:red' align='right'>" +
marketObj.indexList[i].change + "<img src='stockDown.png' /></td>";
} else {
html += "<td style='color:green' align='right'>" +
marketObj.indexList[i].change + "<img src='stockUp.png' /></td>";
}

68/74
html += "<td align='right'>" + marketObj.indexList[i].netPercentage + "%
</td>";
html += "</tr>";
}
html += "</table>";

document.getElementById("marketDiv").innerHTML = html;
}

html

<button onclick="getMarketAjax()">Click here to view Stock Market


Activity</button>
<div id="marketDiv"></div>

These notes summarize the key concepts of JSON, including creating and parsing JSON data,
as well as using JSON with AJAX. Let me know if you need further examples or additional
explanations!

L10-HTML5(graphic).pdf
PDF

Here's a comprehensive set of study notes based on your HTML5 Graphics and Drag-and-
Drop PDF:

Chapter: HTML5 Canvas and Drag-and-Drop

1. Canvas Overview

Canvas was introduced by Apple in WebKit for OS X Dashboard and is now implemented
in all major browsers.

It is used to draw graphics on the web using JavaScript.

2. Basic Canvas Structure

html

69/74
<canvas id="mycanvas" width="1000" height="500" style="border:1px solid black;">
Your browser does not support canvas.
</canvas>

The <canvas> element only acts as a container. JavaScript is needed to draw on it.

3. Accessing Canvas for Drawing

Use CanvasRenderingContext2D to draw shapes, images, text, etc.

javascript

var canvas = document.getElementById("the-canvas-id");


var context = canvas.getContext("2d");

4. Drawing Text on Canvas

javascript

context.font = "italic small-caps bold 50px Arial";


context.fillText("Hello World", 200, 100); // Fills text with color

context.font = "oblique 100px Courier New";


context.strokeText("Hello World", 250, 300); // Outlines text

5. Drawing Paths (Stroke)

javascript

context.beginPath();
context.moveTo(50, 10);
context.lineTo(50, 400);
context.lineTo(250, 400);
context.strokeStyle = "blue";
context.lineWidth = 4;
context.stroke();

6. Drawing and Filling Paths

javascript

70/74
context.beginPath();
context.moveTo(50, 10);
context.lineTo(50, 400);
context.lineTo(250, 400);
context.closePath();
context.fillStyle = "#F5FFFA"; // Fill color
context.fill(); // Fills the enclosed path with color

Chapter: Drag-and-Drop in HTML5

1. Drag-and-Drop Overview

Allows users to drag elements and drop them onto other elements.

Requires defining:

Draggable elements

Droppable elements

2. Basic Draggable Element

html

<span id="hello" draggable="true" ondragstart="dragStart(event)">hello</span>

ondragstart event triggers when an element starts being dragged.

3. Basic Droppable Element

html

<span id="web" ondrop="drop(event)" ondragover="dragOver(event)">web</span>

ondragover event needs event.preventDefault() to allow dropping.

javascript

function dragOver(event) {
event.preventDefault();
}

4. Handling Drag Start

71/74
javascript

function dragStart(event) {
var dragId = event.target.id;
event.dataTransfer.setData("dragId", dragId);
}

5. Handling Drop Event

javascript

function drop(event) {
event.preventDefault();
var dragId = event.dataTransfer.getData("dragId");
var dropId = event.target.id;

// Display dropped result


var messageSpan = document.getElementById("message");
messageSpan.innerHTML = dragId + " is dropped on " + dropId;
}

Chapter: Advanced Examples

1. Cat, Dog, and Fish Game

Draggable Elements:

html

<img src="cat.png" draggable="true" ondragstart="dragStart(event)" id="catImage"


/>
<img src="dog.png" draggable="true" ondragstart="dragStart(event)" id="dogImage"
/>

Droppable Elements:

html

<div id="catDiv" ondrop="drop(event)" ondragover="dragOver(event)">


cat <span id="catCount">0</span>
</div>

2. Drop Function with Counting

72/74
javascript

var catCount = 0;
function drop(event) {
event.preventDefault();
var dragId = event.dataTransfer.getData("dragId");
var dropId = event.target.id;

if (dragId == "catImage" && dropId == "catDiv") {


catCount += 1;
document.getElementById("catCount").innerHTML = catCount;
}
}

3. Drop Function with Image Addition

javascript

function drop(event) {
event.preventDefault();
var dragId = event.dataTransfer.getData("dragId");
var dropId = event.target.id;

if (dragId == "catImage" && dropId == "catDiv") {


var img = document.createElement("img");
img.setAttribute("src", "cat.png");
img.addEventListener("click", function() {
img.style.display = "none"; // Hide image on click
});

document.getElementById("catDiv").appendChild(img);
}
}

References
HTML5 Canvas API

HTML Drag and Drop API

73/74
These notes cover the fundamentals and some advanced concepts of HTML5 Canvas and
Drag-and-Drop functionalities. Let me know if you need further examples or clarifications!

74/74

You might also like