HTML, CSS, and Bootstrap Flashcards
What is HTML?
- Hypertext Markup Language
- Defines how a web page is laid out.
- Uses tags
- Know the format of tags.
What are some common tags?
- HTML
- Head
- Body
- P (paragraph)
- Div (Division)
- Span
- h1 - h6 (heading 1-6)
- a (anchor)
- Style
- Script
- Form
- Ul (Unordered List)
- Ol (Ordered List)
- Dl (Description List)
- Li (List)
- Dt (Description term)
- Dd (Definition description)
- img (image) - etc.
What is the first tag in EVERY HTML file?
- HTML
- DOCTYPE
What is CSS?
- Cascading style sheet
- Defines how the elements on the page will look.
HTML vs CSS
- HTML defines the structure of a webpage while CSS defines the look
What are the different forms of CSS?
- External - In a separate file that is linked.
- Internal - At the top of the document in style tags.
- Inline - as an attribute on the elements themselves.
What is iFrame?
- An HTML document embedded inside another HTML document on a website.
- The IFrame element is used to insert content from another source, like an ad on a
web page.
What is DOM?
- Document Object Model
- Represents the HTML page structure as nodes and objects. That way, programming
languages can connect to the page. - Root node is the window object
What is Bootstrap?
- A front-end, open source toolkit used to speed up development with HTML, CSS, and
JavaScript. - Built for mobile first web-development, using a grid system.
What are Meta Tags?
- Provide metadata about the HTML document.
- Metadata will not be displayed on the page but will be machine parsable.
- Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.
What is ASCII?
- American Standard Code Information Interchange
- A character encoding standard for electric communication.
What is ANSI?
- American National Standards Institute.
- Creates standards for the computer industry.
- Sets standards throughout a wide range of technical areas from electrical specifications
to communication protocols.
What is UTF-8?
- Unicode Transformation Format
- 8 means it uses 8-bit blocks to represent a character
- A character encoding that can contain any Unicode characters.
What tag would you use to create tables?
- T - table tag
- Tr - is table row
- Th - is table head
- Td - is table data (column data)
What tag would you use to create list?
Ordered list - Ol - li Unordered list - Ul - li Description list - Dl - Dt - Dd
What tag would you use to create forms?
- Form tag creates a form
- Input specifies the different form inputs
- Button or input type=”button” can be used to submit.
- If there is only one button on the form it will default to the submit button.
What does attribute “required” do?
- Used on input to specify that it must be filled out for the form to submit.
What does attribute “target=”_blank”’ do?
- Anchor links may have the target attribute which controls what happens when the anchor
is Clicked. - If the target is _blank this tells the browser to open a new window (or tab depending on
user settings) when the link is Clicked.
What tag do you use to create an image?
- img
- Requires a src attribute which is where the image is from
- Also requires an alt attribute = specifies the alternate text for the image if it could not be
loaded.
What is JavaScript?
- is an object oriented interpreted scripting language
- Used on web pages for DOM manipulation to make the pages more interactive.
What is AJAX?
- Stands for Asynchronous JavaScript and XML.
- A new technique for creating better, faster, and more interactive web applications
using XML, HTML, CSS, and JavaScript.
What is OBP?
- Represents Object Based Programming.
- Basically, a superset of OOP.
What is DOM Manipulation?
- The altering of the DOM while the application is running.
- You can use this to add remove and change the way elements are laid out and how they
look on the page.
Is JavaScript loosely typed or strict typed?
- JavaScript is loosely typed. You do not declare the data types of variables explicitly.
What kind of compiler does JavaScript use/have?
- JavaScript is interpreted not compiled
- The script is interpreted by other applications like web-browsers or Node Packet
Manager(npm).
Is JavaScript case-sensitive?
- Yes, JavaScript is case sensitive.
What is Prototypical Inheritance?
- Everything in JavaScript is an object
- Each object has a private property which holds a link to another object called its
prototype. - When you construct an object the prototype chain links all the way up to Object, the
parent of everything in JavaScript to build the object.
Is JavaScript Pass-By-Value or Pass-By-Reference?
- For primitives JavaScript is pass by value.
- JavaScript also uses call by sharing for objects.
- Call by sharing is similar to pass by reference in that the function is able to modify the
same mutable object but unlike pass by reference isn’t able to assign directly over it.
What is Type Coercion?
- Type coercion is a property of JavaScript to attempt to compare values of different
types because it does not have strict types. - When == is done it will try to change the type of the object for a temporary comparison.
- A good example is (1 == ‘1’ will be true, even though one is a string and one is a
number). - This can be avoided by using === which will not try to do any casting.
What are the variable scopes in JavaScript?
- Global, local, and block scope
What are functions in JavaScript?
- Functions are objects to start.
- A function object defines a series of tasks and/or calculates a value.
- Must be defined in the scope you wish to call it in.
What are the types of functions?
- Function declaration - create a function but do not assign it to a variable.
- Function expression - create a function and assign it to a variable.
What is an anonymous function?
- A function that is created at runtime.
- The function operator can be used anywhere that it is valid to use an expression.
- Called “anonymous” because the function was not “named”.
What is a self-invoking function?
- A self-invoking function is started automatically without being called; this is done right
after it is created. - This is used for avoiding naming conflict as well as for achieving encapsulation.
- Variables or declared objects are not accessible outside this function.
What is Hoisting?
- Hoisting in JavaScript is when the interpreter moves all variable and function
declarations to the top of the current scope. - Only the declarations are hoisted, assignments are left where they are.
What are Closures?
- A closure is an inner function that has access to the outer functions’ variables.
- A closure has three scope chains: its own scope, outer functions, and globals.
JSON vs JS Object
- JSON is JavaScript Object Notation
- JSON is a data interchange format, a way to pass structured information between
languages. - JSON is formatted similarly to how a JavaScript Object is formatted which makes it
very easy to parse and build objects from.
What does the keyword “STRICT” mean?
- New as of ES5.
- Is a literal expression indicates that the code should be executed in “strict mode”.
- In strict mode you cannot do a lot of things that you can do outside of un-strict mode, for
example using undeclared variables.
What does it mean to be “Falsy”?
- JavaScript does not use true and false when doing logical comparisons. JavaScript
uses type coercion. - Truthy is not just the value true, it is a value that could logically represent a true
value. - Truthy values could be true, empty object, empty array, empty function, positive
numbers, and non-empty strings - Falsy values could be false, null, undefined, NaN, zero, and empty strings.
What are the data types in JavaScript? (6)
- String
- Number
- Boolean
- Undefined
- Arrays
- Objects
- Symbols
- Function
== vs ===
- == uses type coercion meaning that it will try to see if they hold the same value by
casting them to the same type, i.e. “1” = 1 - === is a strict comparison – only true if the operands are of the same type and the
contents match
What is Bubbling?
- Event bubbling is a form of event propagation.
- Event bubbling propagates events from children to parents.
- An event gets fired and is handled by a child element, from there it propagates up to
parents with handlers for the event.
What is Capturing?
- Capturing is another form of event propagation.
- Capturing works the opposite of bubbling:
- When an event is fired, and parent and children elements have handlers registered
the parent’s handler fires first and then the event trickles down to the child.
Are JS objects mutable or immutable?
- In JavaScript, only objects and arrays are mutable.
- Primitives are immutable.
What are events?
- HTML events are actions generated with user interaction with an element or
elements. - Good examples are Click events on buttons, page loading, resizing the window, Clicking
links, hovering, etc. - When a user does this with the mouse or keyboard the element can throw events to the
JavaScript to work with or call predefined functions.
What is a Listener?
- A listener is an object that waits for events or actions to occur
- In JavaScript the most used is the Event Listener, when an event occurs the element
with an event listener attached will call or execute some type of function to make the web
page more interactive.
What are the JSON conversion types?
- JSON to DataObject conversions:
- String JSON can convert to string, long if long value, double if double value,
boolean if true or false, date/datetime if is a date value. - Long to string, long, double, or date if value is a date.
- Double to string, long if long value, double.
- Boolean to string and boolean.
What is HTTP?
- HyperText Transfer Protocol.
- The underlying protocol used by the world wide web.
- Defines how messages are formatted and transmitted, and what actions servers
and browsers should take in response to various commands.
What are the Xml Http Request methods?
- new XMLHttpRequest() - creates a new XMLHttpRequest object.
- abort() - cancels the current request.
- getAllResponseHeaders() - returns header information.
- getResponseHeader() - returns specific header information.
- open(method, url, async, user, psw) - specifies a request.
- send()/send(string) - sends the request to the server.
- setRequestHeader() - adds a label/value pair to the header to be sent.
What are the Ready States in HTTP?
- 0: request not initialized
- 1: server connection established
- 2: request received
- 3: processing request
- 4: request finished, and response is ready
What are the HTTP Methods?
- GET - requests a representation of the specified resource. Get should only be used
to get data. - HEAD - asks for a response identical to that of a GET request, but without the
response body. - POST - used to submit an entity to the specified resource, often causing a change in
state or side effects on the server. - PUT - replaces all current representations of the target resource with the request
payload. - DELETE - deletes the specified resource.
- CONNECT - establishes a tunnel to the server identified by the target resource.
- OPTIONS - used to describe the communication options for the target resource.
- TRACE - performs a message loop-back test along the path to the target resource.
- PATCH - used to apply partial modifications to a resource.
What are the HTTP Statuses?
- 100 - info.
- 200 - success.
- 300 - redirect.
- 400 - bad request.
- 500 - server error.
What is a Callback Function?
- A callback function is a function placed into a parameter of another function to make
sure that certain steps are done when that function ends.
What is the AJAX workflow?
- An event in our browser occurs and a new XML/HTTPRequest is created
- The request is opened and sent
- Receives our request and processes it
- Create a response and return it to our Client
- Browser processes response and updates the webpage
GET vs POST
- GET requests can be cached.
- GET requests remain in the browser history.
- GET requests can be bookmarked.
- GET requests should never be used when dealing with sensitive data.
- GET requests have length restrictions.
- GET requests should be used only to retrieve data.
- POST requests are never cached.
- POST requests do not remain in the browser history.
- POST requests cannot be bookmarked.
- POST requests have no restrictions on data length.
- POST is NOT idempotent. So, if you retry the request N times, you will end up having N
resources with N different URIs created on server. - PUT method is idempotent. So if you send retry a request multiple times, that should be
equivalent to single request modification. - Idempotent - method can be called many times without different outcome.