Web Technology Overview

Web Technology Unit 3

• Web technology is the mechanism for communication between two or more computing devices over a network.
• Web technologies encompass various tools and techniques used for communication between devices on the internet.
• Web technology utilizes the World Wide Web (WWW) for identifying and locating webpages and resources using URLs. The tools and techniques enabling access are referred to as the technology.

Introduction to Web Technologies

• Web technology fundamentals include web browsers and some web application development.
• Programming/scripting languages and frameworks are part of web technology.
• Databases store data collected or required by websites.
• Protocols govern communication on the web.
• Multimedia elements (graphics, audio, video) are integrated into websites.
• Data formats facilitate data transmission over the internet.

Scripting Languages

• Scripting languages are similar to programming languages and are used to create dynamic web documents, enabling web development.
• They automate tasks at the application level, executable on web servers, and returning results to users through browsers or command lines.
• Scripting languages are categorized as client-side and server-side.

Client-Side Scripting Languages

• Client-side scripting executes directly in the user's web browser without involvement of the server.
• The code runs on the client's computer during, or after, webpage loading.
• Common applications include dynamic user interfaces (menus, animations, validation), improving user experience efficiency, and reducing server load.
• JavaScript, HTML, CSS, and jQuery are prominent client-side scripting languages.
• Client-side scripting is browser-dependent, as the browser downloads and processes the code.

Client-Side Scripting: Uses and Advantages

• Interactive webpages
• Dynamic functionality
• Temporary data storage
• User-server interface
• Request submission to server
• Data retrieval from server
• Remote access for client-server program
• Reusing code through open-source
• Providing interactive response to user actions
• Fast operation due to local code execution
• Improvement in user experience for websites with script support
• Developers have increased control

Client-Side Scripting: Disadvantages

• Code visibility for all users.
• Potential for code errors stalling content rendering across the entire website.
• Not all browsers support all scripts equally.
• Inconsistent scripting support across different versions of web browsers requires comprehensive quality assurance of testing.
• Development time and effort may be increased due to more complex testing needs.

Server-Side Scripting Languages

• Server-side scripting (back-end) executes on the server where the application is hosted.
• Responses are generated based on user requests.
• Server-side scripting enables dynamic web applications with enhanced user interaction and application function.
• Server-side languages allow connection to databases, facilitating user data storage and retrieval.
• Server-side languages facilitate data transfer to and from databases as per user needs.
• Common server-side scripting languages include ASP, JavaScript (using SSJS or node.js), Perl, PHP, Ruby, and Python.

Difference between Client-side and Server-side Scripting

Internet Technology

• Internet technology encompasses devices, software, and hardware with protocols for computer network communication for data exchange among computers, across local area networks (LANs), metropolitan area networks (MANs), and wide area networks (WANs).
• Network technology, including bridging, switching, routing, voice and data integration, wireless integration, dial-up technology, cable access technology, and network security, are integrated functionalities, as well as network management capabilities.
• Internet is the world's largest computer network, based on the TCP/IP protocol and comprised of interconnected private, public, academic, business, and government networks.
• Client-server technology is foundational to internet services, with the World Wide Web (WWW) being a major service allowing access to connected hypertext documents.

JavaScript(JS)

• JavaScript is a lightweight, interpreted language for creating dynamic and interactive webpages.
• Primarily used in web browsers, it provides an interactive experience to end-users.
• Modern web applications employing JavaScript functions are essential for internet functionalities.
• JavaScript can run on the server and on various devices with JavaScript engines to process and execute the code.
• Its uses range from website interactivity to mobile apps and browser-based games.

Uses of JavaScript

• Interactivity on websites
• Mobile application development
• Browser-based game creation
• Versatile back-end web development capabilities
• Client-side validation before server submission

Event Handling

• JavaScript's event handling is a process of capturing actions and occurrences on HTML elements or webpages (e.g. click, typing, moving mouse).
• Events trigger JavaScript responses.
• Key concepts include: - Events: actions or occurrences detected by the browser (e.g., mouse click, form submission). - Event handlers: functions that run when specific events occur (the code that responds). - Event listeners: functions that monitor for specific events and execute their associated handlers.
• Different event types (onClick, onMouseOver, onKeyDown) trigger specific JavaScript responses.

JavaScript Data Types

• Primitive types: - String: sequence of characters (e.g., "Hello"). - Number: numeric values (integers, decimals). - Boolean: true/false values. - Undefined: when a variable is declared but has no value. - Null: represents the intentional absence of a value.
• Non-primitive types: - Objects: structured collections of properties and methods (details about an object) - Arrays: lists of values.
  • Regular Expressions: patterns to match text

JavaScript Variables

• Variables are identifiers (names) that store values which can change during a program's execution.
• Variable declaration uses the keyword var. - Local variables: declared inside a function and have a limited scope (available only within that function). - Global variables: declared outside any function with a broader scope (accessible throughout the program).
• The naming convention starts with a letter, underscore, or dollar sign followed by letters, digits, underscores, or dollar signs. JavaScript variables are case-sensitive.

JavaScript Operators

• Operators are symbols that denote JavaScript actions.
  • Arithmetic operators: perform mathematical calculations (+, -, *, /, %, ++, --).
  • Relational operators(comparison operators): compare values (==, !=, >, <, >=, <=).
  • Logical operators: provide logical comparisons(AND(&&), OR(||), NOT(!)).
  • Assignment operators: assign values (=, +=, -=, *=, /=, %=, **=).

JavaScript Functions and Control Structure

• Functions are modular blocks of code for specialized tasks, performing calculations and calculations returning a value.
• Control structures dictate program execution pathways. This pathway depends on conditions, loops, or exceptions. Key conditional statements are:
  • If statement
  • If-else statement
  • If-else-if statement
  • Switch statement

JavaScript Loops

• Loops help execute code repeatedly (iterating elements). Key loop types are:
• For loop: repeats code for a set number of times.
• While loop: repeats code as long as a condition is true.
• Do-while loop: repeats code at least once and then continues looping as long as the condition evaluates to true.

JavaScript Objects

• Objects are collections of properties (data) and methods (functions). This structure is useful to organize data in an object-oriented manner.
• Objects are defined using curly braces {}. Key value pairs separated by a colon define properties and variable names with values.

JavaScript and jQuery

• jQuery is a fast and lightweight JavaScript library for HTML document navigation and manipulation.
• jQuery streamlines tasks like selecting elements, handling events, animations, as well as AJAX calls that are complex using JavaScript normally.
• Simplified methods exist within jQuery that are easy-to-use in web development.

Important JavaScript Programs (Examples)

• Simple calculated interest.
• Determining the largest of three values.
• Checking if a number is even or odd.

Date Object

• The date object stores information about dates and times.  The date object handles dates, times, days, months, weeks, hours, minutes, seconds, and milliseconds, either globally or for a given date.

Number Object

• The number object helps to manage numerical data.
•  Methods like toString(), valueOf(), toExponential(), toFixed(), toPrecision() help handle numbers.

String Object

• The string object helps manage string information.
•  Methods like toString() deal with strings.