Note that the purpose of this explanation is to give a general understanding, and not to consider all the details of each topic. Experienced users will surely find points that seem “too general,” but don't confuse new users. Links for further reading are provided in each topic.
Let's start with the fundamentals. You need to know how a web page comes to your computer in order to understand all of the following technologies.
HTTP
HTTP stands for Hyper Text Transfer Protocol . It describes how the browser interacts with web servers to retrieve their content (web pages). Web pages are stored on servers, and the browser needs a way to tell the server which web page it would like to receive. On the other hand, the server must inform the browser whether the found resource was found or not, and send this information to the browser.
- The browser sends a request to the server. The request consists of several parts:
- URL e.g. " https://stackoverflow.com/questions/ask ", so the server knows which page will be delivered.
- HTTP method . The most common are get , which indicates that the browser wants to receive information (for example, a single page or web search) and a message that indicates that the browser clicks any information on the web server, like in a forum. A post usually changes something on the server (for example, a new forum post), and get does not.
- The body of the request, which may contain, for example, the text of a text field, a loading image, etc.
- The server sends a response , which is a response to a browser request. It consists of:
- A HTTP status code . This is a three-digit number that shows the result of the request. The most common are OK (2xx), REDIRECTION (3xx), CLIENT ERROR (4xx) and SERVER ERROR (5xx). Redirect status codes are the best way to redirect your browser to another page.
- The response body contains a web page (if any).
HTML
HTML stands for Hypertext Markup Language and represents content . HTML text is sent from the server to the client (which is the browser) and displayed by the browser to be displayed to the user. HTML example:
<!DOCTYPE HTML> <html> <head> <title>My first webpage</title> </head> <body> <p>Hello World!</p> </body> </html>
Since HTML has improved over the years, it’s important that the first line of each HTML page contains a DOCTYPE declaration. It tells the browser how the various tags should be displayed (e.g. <p> ). The rendering process is performed by the browser. Everything that the browser does on the local computer is called the client side . Remember this term!
CSS
So Cascading Style Sheets . This adds style to the web page, such as colors, font sizes, element positions, etc. CSS definitions are often stored in separate files for improved maintainability. Dressing styles is also performed on the client side .
Javascript
No, this has nothing to do with Java. Repeat: nothing . This is a completely different programming language that runs on the client side of the browser. With JavaScript, you can incorporate programming logic into your web page and do things like:
- Validating user inputs
- Fancy slide show
- Even games for programming!
You need to know that JavaScript can be disabled in the browser, and then the JavaScript code will not execute. Therefore, you should not rely on the availability of JavaScript for your web application (except for what you need, for example, for a game). JavaScript can be abused for things like redirecting (where you should use HTTP status codes) or styling elements (use CSS for that). Therefore, before you do something with Javascript, check if it is possible in any other way. Even dropdown menus are only possible with HTML and CSS!
JQuery
jQuery is nothing more than a library written in JavaScript. This becomes convenient if you want to make your cross-browser compatible, because different browsers have some minor differences in their JavaScript implementations. It is also useful to select certain page elements , effects , etc. This is still JavaScript, so it works on the client side .
Web container
This is software that resides on your server and runs on the server side . Your web applications are usually placed in a web container . This is the interface between client requests and your web application and does a few things to make web programming applications more convenient. For example, Apache Tomcat is a web container.
servlets
Now we are in the Java world. Servlets are part of your web application, which is located on the server inside the web container, they work on the server side , Servlets are Java classes that process a request from a client and send a response . A typical HTTP servlet is as follows:
public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("<!DOCTYPE HTML>"); out.println("<html>"); out.println("<head>"); out.println("<title>Hi</title>"); out.println("</head>"); out.println("<body>"); out.println("<p>Hello World!</p>"); out.println("</body>"); out.println("</html>"); } }
HttpServlet classes have several doXxx methods, one for each HTTP method that can be overridden by the developer. Here, doGet overridden, which means that this code is executed when a GET request is sent to this servlet. This method receives the request and response as parameters, HttpServletRequest and HttpServletResponse .
To make this servlet accessible through a URL, you need to configure web.xml :
<servlet> <servlet-name>HelloWorld</servlet-name> <servlet-class>com.example.HelloWorld</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloWorld</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping>
The client can now request our servlet using GET and /hello as the URL. For example, if our web application runs on www.example.com, the correct URL to be used will be http://www.example.com/hello using GET.
Jsp
Stands for Java Server Pages . As you saw, using Servlets to send responses to the client is rather inconvenient. Some smart guys had the idea: "What if we could just add Java code to the HTML pages?" Well, what about JSP:
<!DOCTYPE HTML> <html> <head> <title>Hello JSP</title> </head> <body> <% for(int i=0; i<10; i++){ out.print("Loop number " + i); } %> </body> </html>
In fact, the JSP is translated into Java Servlet code (using a web container) and compiled. Indeed! This is not magic. This means that they are nothing more than Servlets! This is the equivalent servlet code for the above JSP:
public class ServletAbc extends GenericServlet { public void service(ServletRequest req,ServletResponse res) throws ServletException, IOException{ PrintWriter out = res.getWriter(); out.println("<!DOCTYPE HTML>"); out.println("<html>"); out.println("<head>"); out.println("<title>Hello JSP</title>"); out.println("</head>"); out.println("<body>"); for(int i=0; i<10; i++){ out.print("Loop number " + i); } out.println("</body>"); out.println("</html>"); } }
You see that all Java code is processed on the server side before a response is sent to the client.
Jstl
Stands for the standard Java tag library . As the name says, this is a library that you must include before you can use it.
JSP with Java code is still not the best solution. It becomes very unreadable as page size grows, reduces maintainability and is difficult to read. So, what if we could just use extra tags to implement page flow, loops, etc. And let Java classes execute programming logic? Welcome with the tag libraries!
There are many tag libraries, and JSTL is the “core” one, providing basic functionality. This includes if / else constructs, loops, etc. It is included in the JSP, is translated and compiled to servlets and therefore works on the server side .
EL
Means Expression Language and is used to evaluate expressions and access the values of Java objects that you created in Java classes. Usually you combine servlets, JSP, JSTL and expression language:
- A client request arrives at the servlet. Servlet executes some programming logic (for example, reading data from a database) and stores some Java objects in the request. After that, it redirects the request to another resource on the server, such as JSP. Forwarding takes place inside a web application and is not redirected.
- JSP uses EL to access Java objects in the request, displays them and sends a response to the client.
For example, this is your servlet:
public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
And result.jsp :
<!DOCTYPE HTML> <html xmlns:c="http://java.sun.com/jsp/jstl/core"> <head> <title>Hello EL</title> </head> <body> ${helloObject} <c:if test="${myBoolean}"> The expression is true. </c:if> </body> </html>
This will print Hello world! The expression is true. Hello world! The expression is true. .
What you need to keep in mind
- I think that I showed quite clearly what works on the server side and what works on the client side. Do not mix them.
- Always use the right tool for the right job. HTML for content, CSS for layout and style, Javascript for client programming logic. Do not rely on Javascript if you do not need it, some users are disabled.
- Most other technologies, such as JSF, are built on top of existing technologies. Find out what they are built on to understand where they work (client, server) and what they should do.