StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Note that the goal of this explanation is to give a general understanding, not to examine all the details of each topic. Experienced users will surely find points which seem to be "too general", but let's don't confuse new users. Links for further reading are provided in each topic.</p> <p>Let's start with the fundamental basics. You need to know how a webpage comes to your computer in order to understand all the following technologies.</p> <h1>HTTP</h1> <p>HTTP stands for <a href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" rel="nofollow noreferrer"><em>Hyper Text Transfer Protocol</a></em>. It describes how the browser communicates with the webservers in order to retrieve their content (webpages). Webpages are stored on servers, and the browser needs a way to tell a server which webpage it would like to get. The server, on the other hand, needs to tell the browser if the requested resource was found or not and send this information to the browser.</p> <ol> <li>The browser sends a <strong>request</strong> to the server. The request consists of several parts: <ul> <li>The URL, e.g. "<a href="https://stackoverflow.com/questions/ask">https://stackoverflow.com/questions/ask</a>", so the server knows which page to deliver.</li> <li>The <a href="https://en.wikipedia.org/wiki/HTTP#Request_methods" rel="nofollow noreferrer">HTTP method</a>. Most common are <strong>get</strong>, which indicates that the browser wants to retrieve information (e.g. a single page, or a websearch), and <strong>post</strong>, which indicates that the browser pushes some information to the webserver, like a forum post. Post usually changes something on the server (like the new post in a forum), while get does not.</li> <li>Request body, which can contain for example the text of a textbox, an image to be uploaded, etc.</li> </ul></li> <li>The server sends back a <strong>response</strong>, which is the answer of the browser's request. It consists of: <ul> <li>A <a href="http://en.wikipedia.org/wiki/List_of_HTTP_status_codes" rel="nofollow noreferrer">HTTP status code</a>. This is a three-digit-number which shows the result of the request. Most common are OK (2xx), REDIRECTION (3xx), CLIENT ERROR (4xx) and SERVER ERROR (5xx). Redirection status codes are the best way to redirect the browser to another page.</li> <li>Response body, this contains the webpage (if any).</li> </ul></li> </ol> <h1>HTML</h1> <p>HTML stands for <a href="http://en.wikipedia.org/wiki/HTML" rel="nofollow noreferrer"><em>Hyper Text Markup Language</em></a> and presents the <strong>content</strong>. HTML text is sent from the server to the client (which is, the browser) and is rendered by the browser to display it to the user. Example HTML:</p> <pre><code><!DOCTYPE HTML> <html> <head> <title>My first webpage</title> </head> <body> <p>Hello World!</p> </body> </html> </code></pre> <p>Since HTML has improved over the years, it is <strong>important</strong> that the first line of each HTML page contains the <strong>DOCTYPE</strong> declaration. It tells the browser how the different <strong>tags</strong> (like <code><p></code>) should be rendered. The rendering process is done by the browser. Everything, that is done by the browser on the local computer, is called <strong>client-side</strong>. Remember that term!</p> <h1>CSS</h1> <p>Means <em><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow noreferrer">Cascading Style Sheets</a></em>. This adds <strong>style</strong> to a webpage, like colors, font sizes, positions of elements, etc. CSS definitions are often kept in separate files to improve maintainability. Rendering of styles is also done <strong>client-side</strong>.</p> <h1>JavaScript</h1> <p>No, this has nothing to do with Java. Repeat: <strong>nothing</strong>. It is a <a href="https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java/5184356#5184356">totally different programming language</a> that is executed by the browser on <strong>client-side</strong>. With <a href="http://en.wikipedia.org/wiki/Javascript" rel="nofollow noreferrer">JavaScript</a>, you can include <strong>programming logic</strong> to your webpage and do things like:</p> <ul> <li>Validating user inputs</li> <li>Fancy slideshows</li> <li>Even programming games!</li> </ul> <p>You need to be aware of that JavaScript can be turned off in the browser, and then no JavaScript code will be executed. So you should not rely on the availability of JavaScript for your webapplication (except you have to, like for a game). JavaScript can be abused for things like redirection (where you should use HTTP status codes) or styling of elements (use CSS for that). So before doing something with Javascript, check if it is possible somehow else. <a href="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" rel="nofollow noreferrer">Even dropdown menus are possible with only HTML and CSS!</a></p> <h1>jQuery</h1> <p><a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a> is nothing else than a library written in JavaScript. It becomes handy when you want to make your JavaScript cross-browser compatible, because different browsers have some minor differences in their JavaScript implementations. It is also useful for <a href="http://api.jquery.com/category/selectors/" rel="nofollow noreferrer">selecting certain elements of a page</a>, <a href="http://api.jquery.com/category/effects/" rel="nofollow noreferrer">effects</a>, etc. It is still JavaScript, so it runs on <strong>client-side</strong>.</p> <h1>Web Container</h1> <p>This is a software which is located on your server and runs on <strong>server-side</strong>. Your webapplications are usually placed in a <a href="http://en.wikipedia.org/wiki/Web_container" rel="nofollow noreferrer">web container</a>. It is the interface between client requests and your webapplication and does several things to make programming webapplications more comfortable. For example, <a href="http://tomcat.apache.org/" rel="nofollow noreferrer">Apache Tomcat</a> is a web container.</p> <h1>Servlets</h1> <p>Now we get to the Java world. <a href="http://en.wikipedia.org/wiki/Servlet" rel="nofollow noreferrer">Servlets</a> are part of your webapplication which is located on a server inside a web container, they run on <strong>server-side</strong>. Servlets are Java classes which process the <strong>request</strong> from the client and send back a <strong>response</strong>. A typical HTTP Servlet looks like this:</p> <pre><code>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>"); } } </code></pre> <p><code>HttpServlet</code> classes have several <code>doXxx</code> methods, one for each HTTP method, which can be overridden by the developer. Here, <code>doGet</code> is overridden, which means that this code is executed when a GET request is sent to this servlet. This method gets the request and response as parameters, <code>HttpServletRequest</code> and <code>HttpServletResponse</code>.</p> <p>To make this Servlet accessible via a URL, the <a href="http://en.wikipedia.org/wiki/Web.xml" rel="nofollow noreferrer">web.xml</a> has to be configured:</p> <pre><code><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> </code></pre> <p>Now, a client can make a request to our servlet using GET and <code>/hello</code> as URL. For example, if our webapplication runs on www.example.com, correct URL to be used would be <code>http://www.example.com/hello</code> using GET.</p> <h1>JSP</h1> <p>Stands for <a href="http://en.wikipedia.org/wiki/JavaServer_Pages" rel="nofollow noreferrer"><em>Java Server Pages</em></a>. As you have seen, using Servlets to send responses to the client is rather unhandy. Some clever guys had the idea: "What if we could just add Java code to HTML pages?" Well, and that's what JSP is:</p> <pre><code><!DOCTYPE HTML> <html> <head> <title>Hello JSP</title> </head> <body> <% for(int i=0; i<10; i++){ out.print("Loop number " + i); } %> </body> </html> </code></pre> <p>In fact, <a href="https://stackoverflow.com/questions/15459832/jsp-tranlation-to-servlet">JSPs are translated to Java Servlet code</a> (by the web container) and compiled. Really! It's no magic. That means, they are nothing else than Servlets! This is the equivalent Servlet code for the above JSP:</p> <pre><code>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>"); } } </code></pre> <p>You see, all Java code is processed on <strong>server-side</strong> before the response is sent to the client.</p> <h1>JSTL</h1> <p>Stands for <a href="https://stackoverflow.com/tags/jstl/info"><em>Java Standard Tag Library</em></a>. Like the name says, it is a library which you <a href="https://stackoverflow.com/questions/292914/where-can-i-download-jstl-jar">need to include</a> before you can use it.</p> <p>JSPs with Java code are still not the best solution. It becomes very unreadable as the size of the pages grows, reduces maintainability and is difficult to read. So, what if we could just use additional <strong>tags</strong> to implement page flow, loops etc. and let Java classes do the programming logic? Welcome using tag libraries!</p> <p>There are many tag libraries out there, and JSTL is the "basic" one, providing core functionality. This includes if/else constructs, loops, etc. It is included in JSPs, translated and compiled to Servlets and therefore runs on <strong>server-side</strong>.</p> <h1>EL</h1> <p>Means <a href="https://stackoverflow.com/tags/el/info"><em>Expression Language</em></a> and is used to evaluate expressions and to access values of Java objects you have created in Java classes. Usually, you combine Servlets, JSP, JSTL and Expression language:</p> <ul> <li>A client request comes to a Servlet. The Servlet does some programming logic (like reading data from a Database) and stores some Java objects in the request. After that, it forwards the request to another resource on the server, like a JSP. <strong>Forwarding</strong> <a href="https://stackoverflow.com/questions/6068891/difference-between-jsp-forward-and-redirect">happens inside the webapplication</a> and is <strong>not</strong> a redirect.</li> <li>The JSP uses EL to access the Java objects in the request, displays them and sends the response to the client.</li> </ul> <p>For example, this is your Servlet:</p> <pre><code>public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // access databases, do calculations etc. here String hello = "Hello world!"; String someBoolean = true; request.setAttribute("helloObject", hello); request.setAttribute("myBoolean", hello); RequestDispatcher dispatcher = request.getRequestDispatcher("/result.jsp); dispatcher.forward(request, response); } } </code></pre> <p>And the <code>result.jsp</code>:</p> <pre><code><!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> </code></pre> <p>This will output <code>Hello world! The expression is true.</code>.</p> <h1>Things to keep in mind</h1> <ul> <li>I think I have shown clear enough what runs on server-side and what runs on client-side. Don't mix them up. </li> <li>Always use the right tool for the right job. HTML for content, CSS for layout and style, Javascript for client-side programming logic. Don't rely on Javascript if you don't need it, some users have it turned off.</li> <li>Most other technologies, like JSF, are built on top of existing technologies. Find out on what they are built on to understand where they are running (client, server) and what they are supposed to do.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload