Unit 3 Web Technology II PDF

UNIT : 3 WEB TECHNOLOGY II  INTRODUCTION Web technology is the mechanism, which enables two or more computing devices to communicate over the network. Web technologies are the various tools and techniques that are utilized in the process of communication between different types of d...

UNIT : 3 WEB TECHNOLOGY II  INTRODUCTION Web technology is the mechanism, which enables two or more computing devices to communicate over the network. Web technologies are the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. In the term web technology, Web refers to the world wide web (WWW) where all the webpages, documents other resources are identified and located with their URLs. Technology refers to the tools and techniques that make these resources available on the web. Key components of web technology : Web technology includes:- Web browsers and some web app development fundamentals. Different programming/scripting languages and frameworks. Databases that are used at the backend to store data required or collected by websites. Some protocols/rules for communicating on the web. Graphics, audio visual and other multimedia elements. Some data formats that are usually used to transmit data over the internet.  Scripting Language: The scripting language is similar to programming language that is used to create dynamic web documents which provides programming logic in web development. Scripting languages are mostly used to automate processes at the application level. At command line or through the web browser they are able to execute programs running on a web server and display appropriate results to the users. Types of scripting languages : 1. Client side scripting language 2. Server side scripting language 1. Client side scripting language : Client side scripting is a process in which scripts are executed by browsers without connecting to the server. The code executes on the browser of client’s computer either during the loading of web page or after the web page has been loaded. Client side scripting is mainly used for dynamic user interface elements, such as pull-down menus, navigation tools, animation buttons, data validation purpose, etc. Today, it is rapidly growing and evolving day by day. As a result, writing client side web programming is now easier and faster, thereby, reducing load on the server. JavaScript, HTML, CSS and jQuery are the most important client-side scripting languages or web scripting languages and widely used to create a dynamic and responsive webpage and websites. The browser (temporarily) downloads the code in the local computer and starts processing it without the server. Therefore, the client side scripting is browser dependent.  Uses/Needs of client side scripting Advantages of client side scripting language :- language :- 1. Create and reuse code through open source. 1. Makes interactive webpages. 2. Allow more interactive by immediate response 2. Makes stuff work dynamically. to user's action. 3. Interact with temporary storage. 3. Execute quickly because they don't require a 4 Works as an interface between user and trip to server. server. 4. Improve the usability of websites for users 5. Sends request to the server. whose browser supports scripts. 6. Retrieval of data from server. 5. Can give developers more control. 7. Provides remote access for client server program.  Disadvantages of Client-side scripting :- Code is always visible to everyone. If errors occur in client side script, it can stop to render (generate & display the content) the whole website. Not all browsers support scripts. Different browsers and browser versions support scripts differently so more quality assurance testing is required. More development time and effort might be required. 2. Server-side scripting language: Server-Side Scripting programming Server-side scripting also known as back-end runs on the server where the application is hosted. Server-side is used to serve content depending upon the user request. Back end helps to create dynamic web based application that allows user to interact and communicate with the application. Back end language also helps to connect front end with data base. So that, User can store and retrieve data as per the requirement. Back- end developer is responsible for server-side programming. Some of the popular server-side (back-end) scripting language are ASP, JavaScript (using SSJS (Server-side JavaScript e.g. node.js), Perl, PHP, Ruby, Python etc. The client-side scripting emphasizes making the interface of the web application or website more appealing and functional. Whereas, server-side scripting emphasizes on data accessing methods, error handling and fast processing etc. Difference between Client-side scripting language and Server-side scripting language:- 1. The client-side script is executed at the front-end in the client’s browser while the server-side script is executed at the back end with a web server. 2. The client-side script is visible to the user of the web browser while the server-side script is hidden. 3. The client-side script is not secure while the server-side script is secure. 4. The client-side script does not need to interact with the server while the server-side script needs a web server to be processed. 5. The client-side script is executed on a local computer while the server-side script is executed on a remote computer. 6. The client-side script has a faster response time than the server-side script. 7. Client-side script is executed after the browser receives the web pages sent by the server while the server-side script cannot execute the client-side script. 8. The client-side script cannot connect with the database while the server-side script can connect with the database present on the server-side. 9. The client-side script cannot access the files while the server-side script can access and manipulate the files present at the webserver. 10. The client-side script helps create interactive web pages while the server-side script helps create web pages with dynamic data. INTERNET TECHNOLOGY Internet technology refers to the devices, software, hardware and transmission protocols used to connect computers together in order to receive or send data from one computer to another within the internet. It includes LANs, MANs, WANs, bridging, switching, routing, voice and data integration, wireless integration, dial up technology, cable access technology, network technology, network security and network management etc. Internet is the world largest computer network based on TCP/IP. It is a network of networks that consists of millions of private, public, academic, business and government networks. Internet is based on client server technology because most services that are accessed via the internet work on the client server model. Among the many services of internet, world wide web (WWW) is the major service. It is an architectural framework for accessing interlinked hypertext documents spread over millions of computers all over the internet. JAVASCRIPT(JS) JavaScript is a light weight object oriented programming language used for scripting the web pages. It is an interpreted and full fledge programming language, used primarily by web browsers to provide dynamic and interactive experience for the end-user. Most of the functions and applications that make the Internet indispensable to modern life are coded in some form of JavaScript. Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. A JavaScript engine is a computer program that executes JavaScript(JS) code. USES OF JAVASCRIPT ▪ Adding interactivity to website: If you want a website to be more than static page of text, you'll need to do some Java Scripting. ▪ Developing mobile applications: JavaScript isn't just for website. It's used to create those apps you have on your phone and tablet as well. ▪ Creating web browser-based games: Ever played a game directly from your web browser. JavaScript probably helped make that happen. ▪ Back end web development: JavaScript is mostly used on the front end of things, but it's a versatile enough scripting language to be used on back end infrastructure, too. ▪ Client-side validation: JavaScript contains built in function to validate the date before it is sent to the server ▪ Event Handling: JavaScript helps to handle the event which occurs when end- users interact with web pages. Eg:onclick, on mouse hover, on keydown and so on. ▪ Building web servers and developing server applications: A webserver can be created by using Node.js. Node.js is event-driven and not waits for the response of the previous call. The HTTP module can be used to create the server by using the createServer() method. Some other specific uses are: Dynamic drop-down menus Build forms that respond to user input without accessing a server. Change the appearance of HTML documents and dynamically write HTML into separate Windows.  Open and close new windows or frames. Build small but complete client side programs. Displaying popup windows and dialog boxes(like alert dialog box, confirm dialog box and prompt dialog box) Displaying date, clocks etc. FEATURES OF JAVASCRIPT JavaScript is an object-based scripting language. Giving the user more control over browser. It handling dates and time. It detecting the user's browser and OS. It is light weighted.  JavaScript is a scripting language and it is not java. JavaScript is interpreter based scripting language. JavaScript is case sensitive. JavaScript is object based language as it provides predefined objects. Most of the JavaScript control statements syntax is same as syntax of control statements in C language. An important part of JavaScript is the ability to create new functions withing scripts. Declare a function in JavaScript using function keyword. LIMITATIONS OF JAVASCRIPT Depends a lot on the browser and inability to use local devices. It can be disabled and it is not search engine friendly. It cannot protect page sources and doesn't have multiprocessing capacity. For security reason, JS doesn't allow reading and writing the files. Cannot access webpages hosted on a different domain and cannot access databases.  ADDING JAVASCRIPT TO HTML PAGE There are typically 3 ways of adding JavaScript to a webpages. 1. Inline JavaScript (Placing the JavaScript code inline) 2. Internal JavaScript (Embedding the JavaScript code) 3. External JavaScript (Calling an external JavaScript file) 1. Inline JavaScript (Placing the JavaScript code inline) : When JavaScript is written or inserted within the HTML element with event handling attributes (like onclick, on mouseover, on keypress, on load etc) then it is called inline JavaScript. In this method, JavaScript can be added in HTML directly without using tag.  Example of inline JavaScript : inline JavaScript example In the given example, 'onclick' is the event handling attribute of HTML for JavaScript and onclick="alert( 'Button Clicked' )" is the inline JavaScript code. When user press 'click me' button on the web browser, the event mis captured and display alert popup with button clicked message. 2. Internal JavaScript (Embedding the JavaScript code) It is also called embedding the JavaScript code in HTML. We can embed the JavaScript code directly within webpages by placing it between the and tags. The tag indicates to browser that the contained statements are to be interpreted as executable script and not HTML. Example of internal JavaScript : Embedding JavaScript var greet="Hello world"; 3. External JavaScript (Calling an external JavaScript file): In this method, first JavaScript code is written in separate external file and stored using.js extension and then included into HTML page using src attribute of tag. Example of External JavaScript : 1. Create a JavaScript file named "hello.js" and place the following code in it. hello.js //A function to display a message function sayHello() { alert("Hello World ! "); } 2. Call this external JavaScript file within a webpage using the tag : External JS Demo JAVASCRIPT FUNDAMENTALS JavaScript is the language of web. It is lightweight interpreted programming language with.js extension file. It is integrated with HTML as well as open and cross platform. JavaScript Keywords and reserve words: The word that is already defined by the JavaScript library and cannot be used as identifier is called Keywords or reserved identifiers. Keywords in JavaScript are a set of reserved words that cannot be used as names of functions, labels, or variables as they are already a part of the syntax of JavaScript. Each of the keywords has its own meaning. They are generally used in executing internal operations. Keywords or Reserved words in JavaScript JAVASCRIPT DATA TYPE JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript. 1. Primitive datatype 2. Non-primitive data type Primitive Datatype: Primitive datatype can hold only one value at a time. There are five types of primitive datatypes in JS.  Non-primitive datatype : Non primitive data type can hold collection of values and more complex entities. Data type Description Object represents an instance through which we can access numbers Array represents a group of similar values RegExp represents a regular expression JAVASCRIPT VARIABLES A variable is an identifier whose value may change during the execution of the program. A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : Local variable and global variable. Rules while declaring a JavaScript variable : 1. The name must start with a letter a to z or A to Z, underscore( _ ) or dollar($) sign. 2. After the letter or word we can use single or combination of digits (0 to 9). 3. JavaScript variables are case sensitive. For example : 'a' and 'A' are different variables.  Variable declaration in JavaScript : Variable should be declared before the use. Variables are declared using key word var as follows. Example :- var name; var address, phone no; //declaring multiple variable var country = "Nepal"; etc Storing a value in a variable is called variable initialization. Variable can be initialized :- i) at the time of declaration OR ii) after the declaration. var name = "Chandra"; //initialization at the time of declaration. var address; address = "Kathmandu"; // initialization after the initialization.  Scope of JavaScript Variables : The scope of the variable is the region of program from which it can be accessed or recognized. JavaScript variables have two scopes :- Global Scope Local Scope Global Scope :- The global variable which is declared outside of the function is called global variable. Example : document.getElementById("p1").innerHTML=Username; modifyUsername( ); var Username = "Janauddhar"; document.getElementById("p2").innerHTML=Username; function modifyUsername( ) { Username="Janajagriti"; }';  Local Scope : Variables declared inside any function with var keyword are called local variables. Example : function createUsername( ) { var Username="Janauddhar"; } function showUsername( ) {alert(Username);} createUsername( ); showUsername( ); JAVASCRIPT OPERATORS Operator is a symbol that 1. Arithmetic operators signifies the operations. Operator Description + Addition Types of JavaScript operators : 1. Arithmetic operators - Subtraction 2. Relational (comparison) * Multiplication operators ** Exponentiation (ES2016) 3. Logical operators 4. Bitwise operators / Division 5. Assignment operators % Modulus (Remainder) 6. Special operators ++ Increment -- Decrement  document.write("a/b="); b: ", a > b); // Greater than a != b: true console.log("a < b: ", a < b); // Less than a > b: false a < b: true console.log("a >= b: ", a >= b); // Greater than or equal to a >= b: false console.log("a statement to be executed if expression is true var marks = 50; } if(marks > 40) { document.write("Eligible for upgrading"); } OUTPUT : Eligible for upgrading 2. If-else statement : The if-else statement allows the JavaScript to execute statements more controlled way. If evaluated expression is TRUE, the if-statement is executed. If the evaluated expression is FALSE then else-statement is executed. Example : Syntax : if(expression)