An open-source reference book featuring detailed introductions to both JavaScript and JQuery for beginners. Skip to main content Skip to search Skip to select language Web technology for developers Developer guides Introduction to Web development Change language. Basic structure of a web page — the doctype and document 'tree' Fundamental HTML elements — structural, head, list, form elements and more, explained by category. HTML beginners tutorial — a tutorial and exercise that recap and take you through the basics you've learned above.
Let's zoom into it:. The server responds with HTTP status code So, the browser reloads the Notes page. The reload causes three more HTTP requests: fetching the style sheet main. The code on the server responsible for the POST request is quite simple NB: this code is on the server, and not on the JavaScript code fetched by the browser :.
Data is sent as the body of the POST-request. The server can access the data by accessing the req. The Note objects have two fields: content containing the actual content of the note, and date containing the date and time the note was created. The server does not save new notes to a database, so new notes disappear when the server is restarted. The Notes page of the application follows an early-nineties style of web development and "uses Ajax".
As such, it's on the crest of the wave of early 's web technology. AJAX Asynchronous JavaScript and XML is a term introduced in February on the back of advancements in browser technology to describe a new revolutionary approach that enabled the fetching of content to web pages using JavaScript included within the HTML, without the need to rerender the page. Prior to the AJAX era, all web pages worked like the traditional web application we saw earlier in this chapter.
All of the data shown on the page was fetched with the HTML-code generated by the server. Submitting the form still uses the traditional mechanism of submitting web-forms. The application URLs reflect the old, carefree times. The thing termed AJAX is now so commonplace that it's taken for granted.
The term has faded into oblivion, and the new generation has not even heard of it. In our example app, the home page works like a traditional web-page: All of the logic is on the server, and the browser only renders the HTML as instructed. The Notes page gives some of the responsibility, generating the HTML code for existing notes, to the browser. The browser tackles this task by executing the JavaScript code it fetched from the server.
In recent years, the Single-page application SPA style of creating web-applications has emerged. SPA-style websites don't fetch all of their pages separately from the server like our sample application does, but instead comprise only one HTML page fetched from the server, the contents of which are manipulated with JavaScript that executes in the browser. The Notes page of our application bears some resemblance to SPA-style apps, but it's not quite there yet.
Even though the logic for rendering the notes is run on the browser, the page still uses the traditional way of adding new notes. The data is sent to the server with form submit, and the server instructs the browser to reload the Notes page with a redirect. At first glance, the application looks exactly the same as the previous one. The form has no action or method attributes to define how and where to send the input data. Open the Network -tab and empty it.
When you now create a new note, you'll notice that the browser sends only one request to the server. The server responds with status code created. This time the server does not ask for a redirect, the browser stays on the same page, and it sends no further HTTP requests. The SPA version of the app does not send the form data in the traditional way, but instead uses the JavaScript code it fetched from the server.
We'll look into this code a bit, even though understanding all the details of it is not important just yet. The command document. The event handler immediately calls the method e. The default method would send the data to the server and cause a new GET request, which we don't want to happen.
Then the event handler creates a new note, adds it to the notes list with the command notes. The data type is determined with a Content-type header. Then the data is sent as JSON-string. It's worth remembering that the application is only meant to demonstrate the concepts of the course. The code follows a poor style of development in some measure, and should not be used as an example when creating your own applications.
The same is true for the URLs used. One of these libraries is the ever-so-popular jQuery. One of the reasons for the success of jQuery was its so-called cross-browser compatibility. The library worked regardless of the browser or the company that made it, so there was no need for browser-specific solutions. Nowadays using jQuery is not as justified given the advancement of vanilla JS, and the most popular browsers generally support basic functionalities well.
The rise of the single page app brought several more "modern" ways of web development than jQuery. The favorite of the first wave of developers was BackboneJS. After its launch in , Google's AngularJS quickly became almost the de facto standard of modern web development. However, the popularity of Angular plummeted in October after the Angular team announced that support for version 1 will end , and Angular 2 will not be backwards compatible with the first version.
Angular 2 and the newer versions have not gotten too warm of a welcome. Currently the most popular tool for implementing the browser-side logic of web-applications is Facebook's React library. During this course, we will get familiar with React and the Redux library, which are frequently used together. The status of React seems strong, but the world of JavaScript is ever changing. For example, recently a newcomer - VueJS - has been capturing some interest.
What does the name of the course, Full stack web development , mean? Full stack is a buzzword that everyone talks about, while no one really knows what it means. Or at least, there is no agreed-upon definition for the term. Practically all web applications have at least two "layers": the browser, being closer to the end-user, is the top layer, and the server the bottom one. There is often also a database layer below the server. We can therefore think of the architecture of a web application as a kind of stack of layers.
Often, we also talk about the frontend and the backend. The browser is the frontend, and JavaScript that runs on the browser is frontend code. The server on the other hand is the backend. In the context of this course, full stack web development means that we focus on all parts of the application: the frontend, the backend, and the database. Sometimes the software on the server and its operating system are seen as parts of the stack, but we won't go into those.
We will code the backend with JavaScript, using the Node. Using the same programming language on multiple layers of the stack gives full stack web development a whole new dimension.
Information Technology - Web Development Associate. University Transfer. Information Technology Baccalaureate Transfer Option. Career Explorer Web Developer Develop and implement websites, web applications, application databases, and interactive web interfaces.
Starting Salary. Median Annual Wage. Job Outlook. Annual Job Openings.
0コメント