Week 4 Flashcards
Define HTML
- Hypertext Markup Language
- markup language for creating the STRUCTURE and CONTENT of web pages and applications (styling is CSS and JS)
Attributes used on tag and elements (7)
- action
- target
- name
- method
- value
- placeholder
- required
Explain Declaration
- introduced in HTML5
- used to inform the browser about the version of HTML used in the document
- instructs the browser about the document type
- Documentation Type Declaration (DTD)
Explain Character Encoding
- an approach of converting bytes into characters. For validating the HTML document, a program must choose a character encoding
- HTML5 uses UTF-8 as default character encoding, defined by “meta”
Syntax to start an HTML Document
- DOCTYPE declaration - tells browser the version of HTML being used (5)
- < html > - everything about webpage is nested within this tag
- < head > - all the metadata associated with webpage, including the title, character encoding, and references to external stylesheets
- < body > - contains the actual content of our page that will be rendered on the screen by the browser
How to make a hyperlink?
use < a > tag with link inside the brackets
Tags for creating tables
< tr > defines table row < th > defines table headers < td > defines table cell (data)
What are the 2 options for making lists?
< ol > ordered lists (1st, 2nd, 3rd)
< ul > unordered lists (bullet points)
< li > used to list items
Define elements
- provide the structure of the document
- defined within HTML files using tags < >…>
- may be nested within other elements
Define attributes
- these are key/value pairs that give metadata about the tag that are important for the browser to know.
- EX - needs a URL inside the tags
What are HTML Forms and why would we use them?
a section of a document that contains controls
used to collect some information/data from the user
some tags would be: < form > < input > < label > < textarea > < button > < select > < option >
Examples of HTML Forms (9)
- text fields - one-line input field to input a line of text. specify the type attribute value as “text”
- password fields - type of text field in which the text is masked using asterisk or dots. specify the type attribute value as “password”
- radio buttons - let the user select exactly one value from a list of predefined options. specify the type attribute value as “radio”
- checkboxes - let the user select one or more values from a pre-defined set of options. specify the type attribute value as “checkbox”
- file select boxes - to select a local file on their computer and send it as an attachment to the webserver. specify a type attribute value as “file”
- text area - multi-line text input control. created by using the “textarea” element. “rows” and “cols” dictate size of box
- select boxes (drop-downs) - select one or more options from a drop-down list using and
- reset buttons - reset the form data and will display any default values. specify the type attribute as “reset”
- submit buttons - send the form data to the web server. specify the type attribute as “submit”
What is a Web Service?
- a generic term for an interoperable machine-to-machine software function that is hosted from a network addressable location.
- interoperable - different languages, hardware, environments, able to operate together thanks to some clearly defined communication protocol
- network addressable - remote, available over a network
Advantages of Web Services (4)
- Expand functionality of the way we use the web
- Expose functionality for accessibility and reuse
- Standardization & interoperability
- Loose coupling (separate technologies to function on own or together)
What is REST (Representational State Transfer)?
- an architectural style for web services
1. Representational - resources (objects) are represented as JSON or XML for transfer.
2. State - referring to a resource as it exists in that moment, a resource representation.
3. Transfer - the resource representation is transmitted.
What is a resource in REST?
- unit of identifiable information
- an analog of an object in OOP
- as a resource changes over time it is not a new resource; the same resource is in a different state
- resources are identified by a URI (Universal Resource Identifier)
What are the 6 architectural constraints that need to be followed in order to be RESTful?
- uniform interface
- stateless
- cacheable
- client-server
- layered system
- code on demand (*optional)
What is HTTP?
- HyperText Transfer Protocol
- client-server protocol we use the browse the web; client initiates communication
- every communication is made up of client request and server response
- stateless
Each HTTP request is composed of.. (5)
- HTTP Verb - the HTTP method to execute
- URI - indicates the endpoint used to access the resource
- HTTP Version - in order to be certain of communication protocol
- Request Header - Metadata (info) about the request represented as key-value pairs
- Request Body - message content (resource representation in REST)
Each HTTP response is composed of.. (4)
- HTTP StatusCode - code indicating the status of the request
- HTTP Version - in order to be certain of communication protocol
- Response Header - Metadata (info) about the response represented as key-value pairs
- Response Body - message content (resource representation in REST)
HTTP Status Codes
100 - Informational
200 - Success
- 201 - created / 204 - no content
300 - Redirect
- 301 - moved permanently / 304 - not modified
400 - Client Error
- 403 - forbidden / 404 - not found / 405 - method not allowed / 415 - unsupported media type / 451 - unavailable for legal reasons
500 - Server Error
- 501 - not implemented / 502 - bad gateway / 503 - service unavailable
What is a server?
software designed to process requests and deliver responses to another computer over the internet (ex Tomcat)
What is a client?
a program that runs on a local machine requesting service from the server (ex Postman)
Types of Client-Server Architecture (3)
- 2 tier
- 3 tier
- n-tier
Why were HTML 5 tags introduced?
What are some examples?
- introduced to more accurately reflect the content of the tags
Examples: < strong > instead of < b >< em > instead of < i >< nav >< header >< footer >< section >< article>< aside > instead of reusing < div >
Do all tags come in a pair?
No, tags either have a closing tag or are self-closing
What’s the syntax for a comment?
< ! - - words - - >
What is CSS?
- cascading style sheets
- language for styling HTML docs by specifying certain rules for layout and display in key/value pairs
What are the 3 ways to style an HTML file?
Which is best and why?
- inline - in the style attribute
- internal stylesheet - in the < style > tag in the < head >
- external stylesheet - using external .css files, use < link > in the < head >
External stylesheet is best practice due to separation of concerns, reusability, modularity
Describe the CSS box model
The box model consists of margin (outermost box), then border, then padding, then content (innermost). All box sizes / formatting can be styled with CSS
Which way has highest priority when styles cascade: inline, internal,and external?
Inline has highest priority, then internal/external depending on order.
Cascading rules are determined by:
(1) importance ( ! important flag )
(2) specificity of selector (inline has no selector, highest specificity)
(3) source order
Syntax for styling an element?
What is a class and how to style them?
What is an id and how to style?
div { property: value}
. class { property: value}
id { property: value}
What if I want to select child elements, what syntax is that?
use direct descendant selector ( > ) or space for any level nested element
Can I select multiple elements at once? How?
Yes, with a comma
What is a pseudo-class?
What is syntax for selecting that?
- pseudo-class selects an element in a certain state - for example, when hovered over
- Use colon ( : pseudoselector ) syntax
What is Bootstrap?
- CSS framework with pre-written CSS rules to easily style your page and incorporate responsive design seamlessly. Contains various utilities and components for making a great UI
Describe the Bootstrap grid system
- divided into 12 columns.
- you wrap the columns in a .row which is in a .container or .container-flex
- columns are responsive - there are classes for different screen sizes which collapse on smaller windows
What is an HTTP verb? List 8.
- describes the type of request and how it should be processed
GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, TRACE
What is a servlet?
- a Java class that takes incoming requests, processes them, and generates a response to send back to the user
What is a servlet container?
- the component of an application server that interacts with Java servlets and is responsible for managing the execution of servlets and JSP pages for Java applications
Describe the servlet class inhertitance hierarchy.
- The Servlet interface is the root interface of the servlet class hierarchy
- the GenericServlet class implements Servlet, ServletConfig, and Serializable interfaces
- the HttpServlet class extends the GenericServlet class and implements the Serializable interface
What is the deploymentdescriptor?
What file configures your servlet container?
- a file to define the URLs that map to servlets, and to determine which URLs require authentication and additional information
- specifies the classes, resources, and configuration of the application and how the web server uses them to serve HTTP requests
- web.xml file
Explain the lifecycle of a servlet (5 steps).
What methods (3) are called and when are they called?
- loading of servlet - servlet container deploys and loads all servlet classes
- creating an instance of servlet - default is one instance for each servlet class
- invoke init() method - used to initialize the servlet and called once
- invoke service() method repeatedly for each client request - servlet container calls the service method each time a request is received. service method determines the type of Http request (GET, POST, PUT, etc), and calls doGet(), doPost(), etc methods as appropriate
- invoke destroy() method once - called only once at the end of a servlet’s life. servlet container calls this method before removing servlet instance
What are some tags you would find in the web.xml file?
< web-app >< servlet >< servlet - name >< servlet - class >< servlet - mapping >< url - pattern >
*all need closing tags < / >
What is the difference between the ServletConfig and ServletContext objects?
How do you retrieve these in your servlet?
- both are created by the Servlet Container
- ServletConfig is used to pass initial params or configuration info to a particular servlet during initialization. retrieved by the getServletConfig() method of HttpServlet
- ServletContext is used to share params or configuration info to ALL servlets and other components. retrieved by the getServletContext() method of HttpServlet
What is the RequestDispatcher?
- interface that defines an object that passes along the client’s request to any other resources (servlet, JSP file, or HTML file) on the server
Explain the difference between RequestDispatcher.forward() and HttpServletResponse.sendRedirect()
- RequestDispatcher.forward() method is used to pass the same request to a new destination resource
- the Response.sendRedirect() method is used to send an entirely new request for the destination resource
What are 4 different ways of tracking a session with servlets?
- cookies
- hidden form fields
- URL writing
- HttpSession API
What is object mapping? Any Java libraries for this?
- enables you to relate objects in your application to data in a datebase
How would you send text or objects back in the body of the HTTP response from a servlet?
PrintWriter out = response.getWriter();
out.println(“_____”);
What is the difference between getParameter() and getAttribute() methods?
- getParameter() returns http request parameters, those passed from the client to the server
- getAttribute() is for server-side usage only - you fill the request with attributes that you can use within the same request
Explain the front controller design pattern
- provides a single handler for all the incoming requests for a resource in an application
- then dispatches the requests to the appropriate secondary handler for that type of request
- the front controller may use other helper APIs to achieve the dispatching mechanism
What is the front controller in front controller design pattern?
- a single entry point for all requests, and routes incoming user requests
What is the dispatcher in front controller design pattern?
- responsible for the action and view management, including locating and routing to the specific actions that will service a request, and finding the appropriate view
What is the helper in front controller design pattern?
- classes to break out specific features and make the application easier to build and maintain
- used for:
- retrieval of content
- validation of user-entered information
- processing of business logic
- data processing
What is view in front controller design pattern?
- represents and displays information to the client (think an HTML/CSS/JS page)
- retrieves info from model objects
Eager vs lazy loading
- lazy loading delays the initialization of a resource
- eager loading initializes or loads a resource as soon as the code is executed. also involves preloading related entities referenced by a resource
