Scribd
Upload
15 views

Image To PDF

Uploaded by

loviagarwal1209
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
15 views

Image To PDF

Uploaded by

loviagarwal1209
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 23
CHAPTER 2 FRONT-END WEB DEVELOPMENT Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript. Tools Used For Front-end Web Development ‘There are several tools availble that can be used to develop the front end of a website, and understanding which took are best fit for specific tasks marks the difference between developit a hacked site and a well designed, scalable site. Hyper Text Markup Language (HTML) Hyper Text Markup Language (HTML) is the backbone of any website development process, without which a web page doesrit exist. Hypertext means that text has links, termed hyperlinks, embedded in it, When a user clicks on a word or a phrase that has a hyperlink, it will bring another web-page. A markup language indicates text can be tumed into images, tables, links, and other representations, It is the HTML code that provides an overall framework of how the site will look. HTML was developed by Tim Berners-Lee. The latest version of HTML is called HTMLS and was published on October 28, 2014 by the W3 recommendation. This version contains new and efficient ways of handling elements such as video and audio fils. Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It does this by maintaining style sheets which sit on top of other style rules and are triggered based on other inputs, such as device sereen size and resolution JavaSei JavaScript is an event-based imperative programming language (as opposed to HITML's declarative language model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input. Using a technique called AJAX, JavaScript code can ako actively retrieve content from the web (independent of the original HTML page retrieval), and also react to server-side events as well, adding a truly dynamic nature to the web page experience. WebAssembly WebAssembly, supported by all the major browsers (ie. from the major vendors Google, Appl, Mozilla and Microsoft), is the only alternative to JavaScript for running, code in web browsers (without the help of plug-ins, such as Flash, Java or Silverlight; all being discontinued, as browsers are dropping plug-in support). Prior to its adoption, there was asmjs (a subset of JavaScript; and thus strictly works in all browsers), that's also used as a compiler target with efficient support in browsers such as Intemet Explorer 11; and for such browsers that do not support WebAssembly directly, it can be compiled to asmjs and those browsers supported that way. Generally speaking programmers do not program in WebAssembly (or asmjs) directly, but use languages such as Rust, C or C+ or in theory any language, that compile to it. CHAPTER 3 HYPER TEXT MARKUP LANGUAGE (HTML) Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of comerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render the documents into muitimedia web pages. HTML describes the structure of a web page semantically and originally inched cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using ange brackets. Tags such as and directly introduce content into the page. Other tags such as

surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page. HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inchsion of CSS defines the look and layout of content, ‘The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997. 3.1 Markup HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like

and

, although some represent empty elements and so are unpaired, for example . The first tag in such a pair is the start tag, and the second is the end tag (they are also called opening tags and closing tags). Another important component is the HTML document type declaration, which triggers standards mode rendering. ‘The following is an example of the classic "Hello, World!" program: This is a title Figure 3.1: “Hello, World!” HTML program. The text between and describes the web page, and the text berween and is the visible page content, The markup text This is a titke defines the browser page title ‘The Document Type Declaration is for HTMLS. If a declaration is not included, various browsers will revert to "quirks mode" for rendering 3.2 Delivery HTML documents can be delivered by the same means as any other computer file, However, they are most often delivered either by HTTP fiom a web server or by email. HTTP The World Wide Web is composed primarily of HTML documents transmitted from web servers to web browsers using the Hypertext Transfer Protocol (HTTP). However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the web browser to know how to handle each document it receives, other information is transmitted along with the document. This meta data usually includes the MIME type(e.g, text/html or application/xhtml+xml) and the character encoding, In modern browsers, the MIME type that is sent with the HTML document may affect how the document is intially interpreted. A document sent with the XHTML MIME type is expected to be wellformed XML; syntax errors may cause the browser to fill to render it, The same document sent with the HTML MIME type might be displayed successfilly, since some browsers are more lenient with HTML. CHAPTER 4 CASCADING STYLE SHEETS (CSS) Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation ofa document written in a markup language like HTML. CSS is a comerstone technology of, the World Wide Web, alongside HTML and JavaScript CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. Separation of formatting and content ako makes it feasible to present the same markup page in different styles for different rendering methods, such as on-sereen, in print, by voice (via speech- based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device. ‘The name cascading comes ftom the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable ‘The CSS specifications are maintained by the Work! Wide Web Consortium (W3C). Internet media type (MIME type) textes is registered for use with CSS by RFC 2318 (March 1998). ‘The W3C operates a fie CSS validation service for CSS documents. Inaddition to HTML, other markup languages support the use of CSS, including XHTML, plain XML, SVG, and XUL. 4.1 Syntax CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. Astyle sheet consists of a list of rules. Each rule or ruk-set consists of one or more selectors, and a declaration block. Selector InCSS, selectors declare which part of the markup a style applies to by matching tags and attributes. in the markup itself Selectors may apply to: 1, all elements of a specific type, e.g. the second-level headers h2 2. elements specified by attribute, in particular: id: an identifier unique within the document class: an identifier that can annotate multiple elements. in a document 3. elements depending on how they are placed relative to others in the document tree. Classes and IDs are case-sensitive, start with letters, and can inchide alphanumeric characters, and underscores. A class may apply to any number of instances of any elements. An ID may only be applied to a single element Declaration Block A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) mast be inserted to separate each declaration. Properties are specified in the CSS standard. Each property has a set of possible values. Some properties can affect any type of element, and others apply only to particular groups of elements. Values may be keywords, such as "center" or "inherit", or numerical values, such as 200px (200 pixels), SOvw (50 percent of the viewport width) or 80% (80 percent of the window with). Color values can be specified with keywords (e.g. "red", hexadecimal values (e.g. #FFO000, alo abbreviated as #F00), RGB values on a 0 to 255 scak (e.g. rgb(255, 0, 0)), RGBA values that specify both color and alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values (e.g. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)). 4.2Use Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup. All font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within. the HTML. CSS lets authors move much of that information to another file, the style sheet, resulting in considerably simpler HTML. For example, headings (hl elements), sub-headings (2), sub-sub-headings (43), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational. Before CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS alo defines non-visual styles, such as reading speed and emphasis for aural text readers. The W3C has now deprecated the use of all presentational HTML markup. CHAPTER 5 JavaScript JavaScript, offen abbreviated as JS, is a high-level, interpreted programming language. Itis a language which is ako characterized as dynamic, weakly typed, prototype-based and multi- paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of the Work! Wide Web. JavaScript enables interactive web pages and thus is an essential part of web applications. The vast majority of websites use it, and all major web browsers have a dedicated JavaScript engine to execute it ‘Asa multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has an API for working with text, arrays, dates, regular expressions, and basic manipulation of the DOM, but the language itself does not inchude any VO, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host software, including server-side in web servers and databases, and in non-web programs such as word processors and PDF software, and in runtime environments. that make JavaScript available for writing mobile and desktop applications, including desktop widgets, Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinet and differ greatly in design; JavaScript was influenced by programming languages such as Self and Scheme. 4.1 History 1. First web Scripting language 2. Developed by Netscape and Sun 3. Initiated by Netscape 4.2 Why JS? 1. JavaScript enhances web pages with dynamic and interactive features. 2. JavaScript runs in client software. 3. JavaScript can react to events 4, JavaScript can read/vrite/modify HTML elements 4.3 JavaScript Terminology JavaScript programming uses specialized terminology. Understanding JavaScript terms is findamental to understanding the script. Objects 1. Objects refers to windows, documents, images, tables, forms, buttons or links, etc. Objects should be named, Objects have properties that act as modifiers. Properties 1. Properties are object attributes. 2. Object attributes are defined by using the object’s name, a period and the property name. Methods 1, Method are actions applied to particular objects 2. Methods are what objects can do, Functions 1. Functions are named statements that performs tasks. 2. JavaScript has built in fictions and you can write your own. Values 1. Values are bits of information. 2. Value types and some examples include: Number: 1, 2, 3, ete. String: characters enclosed in quotes. Boolean: true or fake. Object: image, form. Variables 1. Variables contains values and use the equal sign to specify their values. 2. Variables are created by declaration using the var command with or without an initial value state. 4.4 Client-Side Script When client makes the request, the HTML and all scripts will be downloaded into your browser and then the resultant HTML will be displayed in the browser is called client-side script CHAPTER 6 SQL SQLis a standard language for storing, manipulating, and retrieving data in databases. Our SQL tutorial will teach you how to use SQL in: MySQL, SQL Server, MS Access, Oracle, Sybase, Informix, Postgres, and other database systems. 6.1 What is SQL? * SQL stands for Structured Query Language + SQLkets you access and manipulate databases + SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the Intemational Organization for Standardization (ISO) in 1987 6.2 What can SQL do? * SQL can execute queries against a database + SQL can retrieve data from a database + SQL can insert records in a database + SQL can update records in a database + SQL can delete records from a database * SQL can create new databases * SQL can create new tables in a database + SQL can create stored procedures in a database + SQL-can create views in a database * SQL can set permissions on tables, procedures, and views 6.3 Using SQLin your Web Site To build a web site that shows data from a database, you will need: + An RDBMS database program (ie. MS Access, SQL Server, MySQL) + To use a server-side scripting language, like PHP or ASP + To use SQL to get the data you want + To use HTML / CSS to style the page 6.4 Some of the most important SQL Commands + SELECT - extracts data from a database + UPDATE - updates data in a database + DELETE - deletes data fiom a database + INSERT INTO - inserts new data into a database + CREATE DATABASE - creates a new database + ALTER DATABASE - modifies a database + CREATE TABLE - creates a new table + ALTER TABLE - modifies a table + DROPTABLE - dektes a table * CREATE INDEX - creates an index (search key) + DROP INDEX - deletes an index CHAPTER 7 React JS React (also known as React,js or ReactJS)is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API. 6.1 What is React JS? A JavaScript library for building user interfaces. React js is created by the facebook by reusable and interactive UI components. 6.2 Why React JS? 1. Virtual Dom — React js use the concept of virtual DOM which helps in the performance. . Unidirectional Data Flow ~ Compared to the two way binding. React js use the concept of Unidirectional data flow which improve the overall performance. 3. UL Components — Reusable and interactive components. 4. SEO Friendly — Components are client side as well as server side render hence they are SEO fiiendly and no 3° party plugin required. . Coding is simpler because of ISX. 6. React js own debugger. 6.3 Basic Usage ‘The following is a rudimentary example of React usage in HTML with JSX and JavaScript.
el 8 Greeter extends React component ( render() ( return {this.props.greeting) ReactDOM. render (, document .getElementBytd (‘myReactapp')) + Figure 7.1: “Hello, World!” React js program, ‘The Greeter class is a React component that accepts a property greeting. ‘The ReactDOM.render method creates an instance of the Greeter component, sets the greeting property to ‘Hello World’ and inserts the rendered component as a child element to the DOM clement with id myReactApp. When displayed in a web browser the result will be
Hello, world!
Figure 7.2: “Hello, World!” React js program as displayed in the web browser. 6.4 Important Terms JSX ISX ~ JavaScript XML syntax transform. It helps in making our writing code easier and faster. ISX lets us HTML (not 100%) with XML based object representation ‘Components In react js the whole application is break into components. Components are interactive, reusable and stageful too. Everything in react js is components. The core buikling blocks of React application is components only. Components interact with each other and maintain the state too. Virtual DOM React js uses the concept of Virtual DOM. 2. It selectively the subtree of DOM elements into the rendering of the DOM on state change. Use different algorithm with the browser DOM tree to identify the changes. 4. Instead of creating new object, React js just identify what change has taken place and once it identifies, it updates that state 5. Itis improving the performance by creating a virtual DOM. 6. It can be render on server and syne on local. Props In react js props are like HTML properties. They are used to pass the data between the components or via the states. In react js props can be accessed by this.props.propsname. States Every component has a State object. Can be set by using setState. setState triggers UI updates and to get the intial state before the setState. Nested elements Multiple elements on the same level need to be wrapped in a single container element such as the
element shown above, or returned as an array. Attributes ISX provides a range of element attributes designed to mirror those provided by HTML, Custom attributes can ako be passed to the component, Alll attributes will be received by the component as props. CHAPTER 8 Node,js Node.js is anopemsource, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage's HTML and run client-side by a JavaScript engine in the user's web browser. Node,js lets developers use JavaScript to write Command Line tools and for server-side scripting—running scripts server- side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,“ unifying web application development around a single programming language, rather than different languages for server side and client side scripts Though js is the conventional filename extension for JavaScript code, the name "Node.js" does not refer to a particular file in this context and is merely the name of the product. Node,js has anevent-driven architecture capable ofasynchronows VO. These design choives aim to optimize throughput and scalability in web applications with many input/output operations, as well as forreaktime Web applications (e.g,, rea tion programs and browser games), 7.1 Platform Architecture Node,js brings event-driven programming to web servers, enabling development of fast web servers in JavaScript. Developers can create highly scalable servers without using threading, by using a simplified model of event-driven programming that uses callbacks to signal the completion of a task. Node,js connects the ease of a scripting language (JavaScript) with the power of Unix network programming. Node,js was built on the Google V8 JavaScript engine since it was open-sourced under the BSD license. It is extremely fast and proficient with internet fundamentals such as HTTP, DNS, TCP. Also, JavaScript was a wellknown language, making Node,js immediately accessible to the entire web development community. 7.1 Technical Details Node,js is the event loop. a Javascript runtime environment that processes incoming requests in a loop, called Threading Node,js operates ona single thread, using non-blocking V/O calls, allowing it to support tens of thousands of concurrent connections without incurring the cost of thread context switching. The design of sharing a single thread among all the requests that use the observer pattern is intended for building highly concurrent applications, where any function performing VO must use acallback. To accommodate the single-threaded event loop, Node,js uses the libuy library— which, in turn, uses a fixed-sized thread pool that handles some of the non-blocking asynchronous 1/0 operations. ‘A downside of this single-threaded approach is that Node,js doesn't allow vertical scaling by increasing the number of CPU cores of the machine it is running on without using an additional module, such as cluster, StrongLoop Process Manager, or pm2. However, developers can increase the defiult number of threads in the libuv thread pool The server operating system (OS) is likely to distribute these threads across muiple cores. A thread pool handles execution of parallel tasks in Node,js. The main thread call functions post tasks to the shared task queue, which threads in the thread pool pull and execute. Inherently non- blocking system functions such as networking translate to kernel-side non-blocking sockets, while inherently blocking system functions such as file VO run in a blocking way on their own threads. When a thread in the thread pool compktes a task, it informs the main thread of this, which in turn, wakes up and executes the registered callback. Since Node,js handles callbacks in serial on the main thread, long lasting computations and other CPU-bound tasks freeze the entire event-loop until completion. V8 V8 is the JavaScript execution engine which was initially built for Google Chrome. It was then open-sourced by Google in 2008. Written inC+t, V8 compiles JavaScript source code to native machine code instead of interpreting it in real time Node,js uses libuv to handle asynchronous events. Libuy is an abstraction layer for network and file system functionality on both Windows and POSIX-based systems such as Linux, macOS, OSS on NonStop, and Unix. The core functionality of Node,js resides in a JavaScript library. The Node. js bindings, written in C++, connect these technologies to each other and to the operating system. Package management npm is the pre-installed package manager for the Node,js server platform, It installs Node,js programs from the npm registry, organizing the installation and management of third-party Node,js programs. Packages in the npm registry can range from simple helper libraries such as Lodash to task runners such as Grunt. Unified APT Node,js can be combined with a browser, a database that supports JSON data (such as Postgres, MongoDB, or CouchDB) and JSON for a unified JavaScript development stack. With the adaptation of what were essentially server-side development patterns such as MVC, MVP, MVM, et between client-side and server-side Node,js allows the reuse of the same model and service interface Event loop Node,js registers with the operating system so the OS notifies it of connections and issues a callback. Within the Node.js runtime, each connection is a small heap allocation. Traditionally, relatively heavyweight OS processes or threads handled each connection. Node,js uses an event loop for scalability, instead of processes or threads. In contrast to other event-driven servers, Node.js's event loop does not need to be called explicitly. Instead callbacks are defined, and the server automatically enters the event loop at the end of the callback definition, Nodes exits the event loop when there are no further callbacks to be performed. 7.2 mpm npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node,js. It consists of a command line client, ako called npm, and an online database of public and paid-for private packages, called the npm registry, The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc. CHAPTER 1 INTRODUCTION 1.1 Web Application Development Web application development is the process and practice of developing web applications. There is a consensus that the processes involved are extensions of standard software engineering processes. Considering this, along with its unique characteristics, popular frameworks used include the spiral approach and business-oriented approach to application development, among other models that address the requirements. for an iterative process. Figure 1.1: Web Application Development Just as with a traditional desktop application, web applications have varying levels of risk. A personal home page is much less risky than, for example, a stock trading web site. For some projects security, software bugs, ete. are major issues. Iftime to market, or technical complexity is aconcem, documentation, test pkiming, change control, requirements analysis, architectural description and formal design and construction practices can mitigate risk. 1.2 Web Development Tools Web development tools allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are took used for testing the user interface of a website or web application. Web development tools come as browser add-ons or built-in features in web browsers. Most popular web browsers, such as Google Chrome, Firefox, Intemet Explorer, Safari and Opera, have built-in tools to help web developers, and many additional add- ‘ons can be found in their respective plugin download centers. Web development took allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to increasing demand ffom web browsers to do more, popular web browsers have included more features geared for developers. 1.3 Web Development Specialization ‘There are three kinds of web developer specialization: front-end developer, back-end developer, and fillkstack developer. Front-end developers deal with the layout and visuals of a website, while back-end developers deal with the functionality ofa website, Back-end developers will program in the functions ofa website that will collect data.

You might also like