Unit -3 Web Technology II

 

PART -1

Unit -3 Web Technology II

3.1 Introduction

Web Technology II is an advanced course that continues the ideas learned in Web Technology I. (यो Web Technology I को अगाडिको उन्नत भाग हो). In this course, students will learn more about how the internet works and understand the technologies that make websites function. (इन्टरनेट कसरी चल्छ भन्ने गहिरो अध्ययन). It includes advanced topics such as server-side programming, connecting websites with databases, web security, and building web applications. (Server-side, Database, Security र Application Development जस्ता मुख्य विषयहरू). Students will also use different web development tools and frameworks and gain practical experience in creating dynamic and data-based web applications. (व्यावहारिक अभ्यास र आधुनिक tools/framework प्रयोग).

Today, the world is becoming more digital, and the demand for skilled web developers is increasing. (डिजिटल युगमा डेभलपरको माग बढ्दो छ). Web Technology II is an important course for students who want to build a career in web development or similar fields. (करियर बनाउनेहरूका लागि अत्यावश्यक कोर्स). This course helps students build a strong foundation in modern web technologies and industry best practices. (आधुनिक प्रविधि र best practices को राम्रो आधार). It also prepares them with the knowledge and skills needed to create professional web applications. (Professional web applications बनाउन आवश्यक सीप). By learning advanced tools and frameworks, students will be ready to work confidently in the fast-changing world of web development. (छिटो बदलिने web technology बाट सक्षम हुने).

3.2 Server-side and Client-side Scripting

Server-side and client-side scripting are two main parts of web development. In server-side scripting, all the work happens on the server. The server receives data from the user, processes it, creates a web page, and sends it back to the user. (Server-side = काम Server मा हुन्छ). Languages like PHP, Python, and Java are used for this. These are used to connect websites with databases, manage login systems, and handle difficult tasks of a web application. (Database, login, complex work = Server-side). Server-side scripting helps make strong and large web applications that work smoothly even when many users use them at the same time. (High traffic मा पनि चल्ने).

Client-side scripting happens on the user’s computer or mobile inside the web browser. (Client-side = काम Browser मा हुन्छ). Languages like JavaScript are used for this. Client-side scripting makes a webpage dynamic and interactive. For example, changing text, showing messages, animations, updating content without reloading the page. (User सँग तुरंत प्रतिक्रिया दिने काम). It helps to make websites more attractive and easy to use.

To become a good web developer, it is important to understand both server-side and client-side scripting. (दुवै जान्नु आवश्यक). By learning both, developers can create fast, reliable, user-friendly, and fully functional web applications. (Fast + Reliable + User-friendly वेबसाइट बन्ने). This gives students a strong base to create modern and scalable web applications needed by today’s businesses. (Modern website बनाउन आधार). 

Client-Side Scripting

Advantages

a. Immediate response to users (तात्कालिक प्रतिक्रिया)
b. Makes websites attractive (वेबसाइट आकर्षक)
c. Interactive and responsive design (User-friendly)
d. Reduces load on server (Server को भार कम)
e. Faster page loading (लोडिंग समय कम) 

Disadvantages:

a. Not all browsers support scripts (सभी browser मा support हुँदैन)
b. Code is visible to users (Code सुरक्षित हुँदैन)
c. Users can disable scripts (Script बन्द गरे content देखिँदैन)
d. Cannot connect to database (Database connection सम्भव छैन)
e. Cannot generate fully dynamic content (Real-time content सम्भव छैन)

 Server-Side Scripting

Advantages:

a.Create dynamic pages (Dynamic content) 
b. Connect to databases (Database CRUD)
c. Code is hidden from users (Code सुरक्षित)
d. Authentication and login possible (Login/Auth System)
e. Supports multiple databases (DB support)
f. Provides fast and customized user experience (User अनुसार content)

Disadvantages:

a. Server software required (Server setup आवश्यक)
b. Slower execution than client-side (Execution समय लाग्छ)
c. Uses more server memory (Server resource धेरै लाग्छ)
d. Higher implementation cost (महँगो पर्न सक्छ)
e. Many users may overload server (Server crash हुन सक्छ)

S.N.	Scripting Language	S.N.	Programming Language
1	Scripting language are platform-specific.	1	Programming language are platform- independent.
2	Most of the scripting languages are interpreted.	2	Most of the programming language are complied.
3	Scripting language runs slower than programming language.	3	Programming languages runs faster than scripting language.
4	Developer has to write less code compared to programming language.	4	Developer has to write much code compared to scripting language.
5	We cannot create standalone application with scripting language only.	5	We can create standalone application with programming language only.
6	Examples, JavaScript, VBScript, Python, Perl, ASP etc.	6	Examples, C, C++, Java etc.
7	Scripting languages run inside other programs. It is dependent on other programming language.	7	It is not dependent on other programs to run. It is independent.

 Difference Between Server-Side Scripting and Client-Side Scripting

Aspect	Server-Side Scripting	Client-Side Scripting
Execution Location	Executed on the web server.	Executed in the user’s browser (client-side).
Visibility	Code is not visible to the user because it runs on the server.	Code is visible to the user through View Source or Inspect.
Purpose	Used for backend operations like database interaction, session handling, user authentication, etc.	Used for frontend tasks like UI enhancement, form validation, event handling, etc.
Languages	Examples: PHP, Python, Ruby, ASP.NET, Node.js	Examples: JavaScript, HTML, CSS
Security	More secure as code runs on the server and is not exposed.	Less secure because code is visible and can be manipulated by the user.
Dependency	Requires a web server for execution.	Requires a web browser for execution.
Dynamic Content	Generates dynamic pages by processing data on the server.	Adds dynamic behavior and interactivity to already-loaded pages.

3.3 Introduction of Internet Technology 

Internet technology has changed the way people communicate, share information, and do business in modern life. (Internet ले सञ्चार, सूचना साझा र व्यापार गर्ने तरिका बदल्यो). The internet started as a simple network of connected computers but has now become a huge global network connecting people and devices all over the world. (सुरूमा सानो नेटवर्क, अहिले विश्वव्यापी नेटवर्क).The Internet is a global network of computers and devices that are connected together to share information, communicate, and access resources from anywhere in the world. (इन्टरनेट भनेको विश्वव्यापी कम्प्युटर नेटवर्क हो, जसले सूचना साझा, सञ्चार र स्रोत पहुँच सजिलो बनाउँछ)

The growth of the internet is supported by technologies like HTML (Hypertext Markup Language), HTTP (Hypertext Transfer Protocol), and DNS (Domain Name System). (मुख्य प्रविधि: HTML, HTTP, DNS). These technologies make it possible to create and access information from anywhere in real-time. (सक्छौं जानकारी छिटो र विश्वव्यापी पहुँच)

Internet technology has impacted many parts of society: education, business, entertainment, and communication. (शिक्षा, व्यापार, मनोरञ्जन, सञ्चारमा प्रभाव). High-speed internet lets people access large amounts of information, collaborate with others worldwide, and do business online. (High-speed internet = बढी जानकारी, collaboration, online business)

It has also made communication easier through social media, instant messaging, and email. (सामाजिक सञ्जाल, इमेल, Instant messaging सजिलो). Today, the internet is an essential tool for people of all ages and has changed the way we live, work, and interact. (सबै उमेरका लागि अनिवार्य, जीवनशैली र interaction बदलियो)

Features of Internet Technology

1.      Global Connectivity – Connects people and devices all over the world. (विश्वव्यापी जडान)

2.      Information Sharing – Allows easy sharing of data and resources. (सूचना साझा गर्न सकिन्छ)

3.      Real-Time Communication – Enables instant messaging, emails, and video calls. (छिटो सञ्चार)

4.      Access to Resources – Provides access to websites, databases, and online services. (स्रोत/सर्भिस पहुँच)

5.      Support for Multimedia – Can transfer text, images, audio, and video. (मल्टिमिडिया समर्थन)

6.      E-Commerce & Online Business – Facilitates online shopping, banking, and business. (अनलाइन व्यापार सम्भव)

7.      Social Interaction – Supports social media and online communities. (सामाजिक अन्तरक्रिया)

8.      Education & E-Learning – Enables online learning, courses, and research. (शिक्षा र ई–learning)

9.      Scalability – Can handle millions of users and devices simultaneously. (लाखौं प्रयोगकर्ता र उपकरण सँग काम गर्न सक्ने)

DOWNLOAD PDF NOTE OF WEB TECHNOLOGY PART-1

Patrt 2

3.4 Adding JavaScript to HTML Page

JavaScript is a programming language used to make web pages interactive and dynamic. It helps to add features like pop-up messages, form validation, image changes, animations, and interactive menus. JavaScript can also respond to user actions such as clicking a button or moving the mouse.

JavaScript is a client-side scripting language, which means it runs in the user’s web browser, not on the server. All modern web browsers support JavaScript, making it an important and widely used language in web development.

To add JavaScript to an HTML page, we use the <script> tag. JavaScript code can be written directly inside the HTML file using the <script> tag, or it can be linked from an external JavaScript file using the src attribute of the <script> tag.

By using JavaScript in HTML pages, developers can create dynamic, interactive, and user-friendly websites, which improves the overall user experience.

To add JavaScript to an HTML page, you can follow these basic steps:

1. Create an HTML file and save it on your computer.

2. Open the HTML file in a text editor, such as Notepad or Sublime Text.

3. Add the <script> tag to the <head> or <body> section of your HTML file.
   The <script> tag is used to include JavaScript code in your HTML page.

Here is an example of how to include JavaScript in the <head> section of
your HTML page:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
// Your JavaScript code goes here
</script>
</head>
<body>
<!-- Your HTML content goes here -->
</body> 

</html>

4. Write your JavaScript code inside the <script> tags. You can write your
   code directly in the HTML file or include an external JavaScript file using
   the "src" attribute of the <script> tag.

5. Save the HTML file and open it in a web browser to see the JavaScript
   code in action.

Here is an example of how to include an external JavaScript file in your

HTML page:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="myscript.js">

</script>
</head>
<body>
<!-- Your HTML content goes here -->
</body>

</html>

3.5 JavaScript Fundamentals

JavaScript is a high-level, interpreted programming language that is widely used for creating interactive and dynamic web content. Here are some fundamental concepts that are important to understand when learning JavaScript:

1. Variables

A variable is a named container that stores a value, such as a number, a string, or an object.
Variables are used to store and manipulate data in a JavaScript program.

Example:

var name = "Bikram"; 

var age = 18;

2. Data types

JavaScript supports several data types, including numbers, strings, booleans, arrays, objects, and null and undefined values. Each data type has its own set of operations and methods for working with it. 

Example:

var num = 10;           // Number

var text = "Hello";     // String

var isTrue = true;      // Boolean

var colors = ["red","blue","green"]; // Array

var person = {name:"Bikram", age:18}; // Object

var empty = null;       // Null

var notDefined;         // Undefined

3. Functions

A function is a block of code that performs a specific task. Functions can take arguments, or input values, and can return values as output.
Functions are an essential tool for organizing and reusing code in a JavaScript program.

Example:

function greet(name){
  alert("Hello " + name);
}

greet("Bikram");

4. Control flow

Control flow refers to the order in which code is executed in a JavaScript program. JavaScript uses conditional statements, loops, and other control flow structures to control the flow of program execution.

Example:

var score = 75;
if(score >= 50){
  alert("Pass");
} else {
  alert("Fail");
}

for(var i=1; i<=5; i++){
  console.log(i);

}

5. Objects and classes

In JavaScript, objects are used to represent real-world entities, such as users, products, or orders. Objects are created from classes, which are templates that define the properties and methods of an object.

Example:

class Person {

  constructor(name, age){

    this.name = name;

    this.age = age;

  }

}

var person1 = new Person("Bikram", 18);

console.log(person1.name); // Output: Bikram

6. Event handling

JavaScript can be used to handle user events, such as clicks, key presses, and form submissions.
Event handling is a crucial concept in creating interactive web content using JavaScript.

Example:

<button id="myBtn">Click Me</button>
<script>
document.getElementById("myBtn").onclick = function() {
  alert("Button clicked!");
};

</script>

Comments in JavaScript

Comments in JavaScript are used to add notes and explanations to the code that are not executed by the web browser. They are useful for explaining how the code works or for leaving reminders to yourself or other developers who may be working on the same project.

Types of Comments

1. Single-line comments:
To add a single-line comment, use two forward slashes // followed by the comment text. Anything after // on the same line is ignored.

Example:

// This is a single-line comment

var x = 5; // This is also a comment

2. Multi-line comments:
To add multi-line comments, enclose the comment text between /* and */.

Example:

/*This is a multi-line comment.

It can span multiple lines of text.*/

var y = 10;

Note: Comments are essential for documenting code and making it more readable.

3.6 JavaScript Data Types

JavaScript supports several data types, which are used to represent different kinds of values.

Basic Data Types:

1. Numbers: Represent numeric values like 3.14 or 42. Used for integers and floating-point numbers.

           Example: 

var age = 18;

var pi = 3.14;

   2. Strings: Represent text, enclosed in single or double quotes. 

 Example: 

var name = "Bikram"; 

var greeting = 'Hello, world!';

   3. Booleans: Represent true or false. Used in conditions and loops.

  Example: 

var isStudent = true;

var hasPassed = false;

4. Undefined: Represents a variable that has not been assigned a value.

  Example: 

var x;

console.log(x); // undefined

5. Null: Represents a deliberate non-value.

  Example: 

var data = null;

6. Objects: Represent complex data structures with properties and methods.

  Example: 

var person = {name: "Bikram", age: 18};

var colors = ["red", "green", "blue"];

3.7 Variables and Operators

Variables

A variable is a named container that stores a value. Use var, let, or const to declare variables.

Example:

var message = "Hello, world!";

let score = 100;

const pi = 3.14;

Operators

Operators are symbols or keywords used to perform operations on values.

1. Arithmetic Operators

var sum = 5 + 3; // 8
var difference = 5 - 3; // 2
var product = 5 * 3; // 15 

var quotient = 5 / 3; // 1.6666666666666667

 2. Comparison Operators

var isGreaterThan = 5 > 3; // true
var isLessThan = 5 < 3; // false 

var isEqualTo = 5 === 3; // false

3. Logical Operators

var andResult = true && false; // false

var orResult = true || false; // true

var notResult = !true; // false

 DOWNLOAD PDF NOTE OF WEB TECHNOLOGY- II  PART-2