CSDS 221 Midterm Review
What is the difference between === and ==?
- === checks for both value AND type - == only checks for value, not type - Example: 1. Boolean(5 = = = "5") => False: does a value and type check 2. Boolean(5 = = "5") => True: just value check
What is a full stack application, as opposed to a website?
- Are applications that are used to store user input into a database and display it in such a way that is presentable - Full-stack dynamic applications can save data to a database whereas front-end static websites are only informational and do not retain data
What are HTML attributes?
- Attributes are specifications that can be added to each HTML tag so they behave in certain ways - quotes are required to define values on attributes
<span title='here is a "string"' style="margin: 10px 20px 30px 40px"></span> => In what direction are the arguments applied?
- CSS will take all 4 arguments and run them clock-wise from top, right, bottom, and left - if only 2 arguments are provided, then the 1st argument will apply to the top and bottom border, and the 2nd argument will apply to the left and right border - in this case, the margin size of the right side of the container will be 20px
What does it mean to apply CSS embedded?
- Embedded styles are internal styles that are placed within a <style> tag in the <head> element of the HTML
a.sort((a,b) => a.c == 2); => What does the second argument (b) mean in this function?
- For a sort, the b is the next argument/item, NOT the index - Example: Let c = [1, 4, 33, 24, 1233] 1. c.sort((a, b) => a-b) Returns the array but sorted. If you do b-a, it gives the reverse sort
What does it mean to apply CSS inline?
- Inline styles are rules placed within HTML elements via the "style" attribute - a semicolon is used to separate each style - a selector is not necessary with an inline style
What is the difference between div and span?
- div tags are block - span tags are inline
CSS
CSS
JAVASCRIPT
JAVASCRIPT
What does the shift() function do?
removes the first element of an array and returns that element
What does the pop() function do?
removes the last element of an array and returns that element
b = ""; let e = a && b && c || d; What does e return?
since an empty string (b) is falsy, e returns d since one of the variables were falsy, and thus the sequence goes to the right of the ||
What does the sort() function do?
sorts the elements of an array
What is the purpose of using relative units, like em and percentages?
to make apps scalable and responsive to the browser device
What is the title attribute used for?
used to add a tooltip on any given tag
What are the standards of the world wide web?
w3c (world wide web consortium)
Is <thead> a parent of <tr>?
yes
Is <tr> a parent of <td>?
yes
When you have a complicated feature request from stakeholders, do you think developers should create mockups and seek approval on complicated features?
yes b/c if not then it can cost companies thousands of dollars and can get you pipped if you mess up
Can <th> go inside the <tr> tag?
yes, but vice versa is not true
What is the difference between padding and margin on the box model? What do borders do?
- Margins and padding are essential for adding white space to a web page, and they help differentiate one element from another - Margins add space outside an element, and padding adds space inside an element, and borders divide the margin area from the padding area
What is the difference between get and post?
- POST requests store params in an objects whereas GET requests put params in the URL - GET requests are typically used for fetching data and POST is used for manipulating data - POST is where you can pass params through the request. GET passes params through the query string - Picture shows advantages and disadvantages
What is the client-server model?
- Server: A computer agent that is normally active 24/7, listening for queries from any client that makes a request - the server is a central hub to the client-server model - it hosts web applications, database systems, and performs security authorization tasks - it stores data such as documents, images, and videos - it listens to requests from the client and sends a response through a request-response loop - Client: A computer agent that makes requests and receives responses from the server, in the form of response codes, images, text files, and other data - client machines are desktops, laptops, smart phones, and tablets - they house web browsers - they make requests to servers using URLs - the web uses the client-server model of communication
Let a = 1; let b=2; let c=3; Let z = a && b || c; What will z display?
- The &&s, from left to right, check to see if each variable is falsy or truthy. If anything is falsy, it will run the right side of the bars - Since neither a nor b are falsy, z will display 2, which is what b equals - The picture shows another example
How do you insert an icon using font awesome?
- To insert an icon, the webmaster can add the following syntax to their page <i class='fa fa-fw fa-pencil'></i> - The 'fa-fw' syntax is used to define a fixed width so that all icons have the same size
What is positioning used to do?
- Used to move containers around a page - This is done by using absolute, fixed, relative, or static positioning - relative and static are encouraged b/c they are more responsive
What are advantages of web apps?
- accessible from anywhere - useable with different operating systems and browser applications - no installation required - easier to roll out program updates - accessible user data analytics - centralized storage
What are the tags used when making tables in HTML? What are their proper usages?
- all rows are defined with <tr> but the header column is defined with <th> and the content columns are defined with <td> - the whole table must be wrapped around a <table> tag - the header row must be wrapped in the <thead> tag, and the content rows are wrapped in a <tbody> tag - order: table => thead/tbody => tr => th/td
How do you make quotation marks appear inside a text value which is already in quotation marks?
- alternate the quotation marks - Ex.: <span title='here is a "string" '></span>
a.filter((a,b) => a.c == 2); => What does the second argument (b) mean in this function?
- b is the index - the code means a.filter((item[i], i) => a.c == 2
What is a famous CSS materials and styles library that a lot of apps use?
- bootstrap - "The most popular frameworks are bootstrap, blueprint, and 960" - jquery
What does the some() function do?
- checks if any of the elements in an array pass a specified test; returns true or false - Example: let a = [{b:1, c:2}, {b:3, c:4}]; 1. a.some(a => a.c == 4); //returns true 2. a.some(a => a.c); //returns true b/c it checks for a condition with a key of c 3. a.some(a => a.c == 5); //returns false
Is JS the preferred language of client-side or server-side scripting of web pages?
- client-side
What does the filter() function do?
- creates a new array with every element in an array that passes a specified test - Example: let a = [{b:1, c:2}, {b:3, c:4}]; 1. a.filter(a => a.c == 2) //returns an array of the item that has a c equal to 2 ; returns an object inside an array => [{b:1, c:2}] 2. a.filter(a => a.c == 4) //a) {b:3, c:4} //b) [{b:3, c:4}] => this is the correct answer b/c filter returns the object in an array AKA the array of the items that meet the condition
What does the map() function do?
- creates a new array with the result of calling a function for each array element - Example: let a = [{b:1, c:2}, {b:3, c:4}]; 1. a.map(a => a.b) //returns an array of 1 and 3 2. a.map(a => a.c) //outputs 2 and 4
What does it mean to apply CSS external?
- external styles are rules placed on an external .css file - the picture shows how to reference the .css file in the HTML file it refers to
What is another toolkit used for icons?
- font awesome
What are headers?
- headers are parameters that are part of the request and response on every HTTP transaction
What are the 3 tags that start the structure of an HTML page?
- html tag - header tag - body tag
What are the main differences between the client-server model and the peer-to-peer model?
- in the client-server model, there are many clients and one server - in the peer-to-peer model, everything is either a client or a server
What is the purpose of the non-breaking space ( )?
- it hard codes whitespace into the page - non-breakable space => the browser ignores multiple spaces in the source HTML file. If you want to display multiple spaces, you can do so using this entity
In general, nodes that are (lower/higher) in the DOM have higher say than more generic parent nodes.
- lower AKA they have more children
If the IP address changes, does the domain name change as well?
- no => it's like a key-value pair where the domain is the key and the IP is the value. Even if the value changes, the key allows you to access the new changed value
What are the cons of client-side scripting?
- no guarantee that client computer has JS enabled - client computers may be unpredictable depending on the operating systems, programs, configs, and browsers used - web development can be difficult b/c the added interactions of different languages that have to interact properly to display a web page - security is not an advantage since security is handled by the server
What are the pros of client-side scripting?
- reduces the load from the server computers - browser can respond to user events faster - JS can interact with HTML in ways servers can't - The load is distributed (you can run half of your app on the client and half on the server so the server doesn't do all of the work, but you don't want to load the client to the point where the app lags)
What is regex? What is it used for? Why is it beneficial even though it's confusing to read?
- regex = regular expressions: is a series of characters that translate into a series of functions - regex is used for input validation (i.e. scanning for proper email, phone, or number formats) - it is a more efficient way to select for validation of forms, and it reduces the number of lines of code
What are disadvantages of web apps?
- requires an internet connection - transmitted data causes security issues - concerns over storage, licensing, and uploaded data - problems with some websites not working right on some browsers - restrictions on access to the operating system
What is responsive design?
- responsive design is about creating web pages that automatically adjust to different screen sizes - make pages dynamically update to the viewport it is selected on - makes an app responsive by using percents and the media tag (@media)
What does the findIndex() function do?
- returns the index of the first element in an array that passes a specified test - Example: let a = [{b:1, c:2}, {b:3, c:4}]; 1. a.findIndex(a => a.c == 4); //returns 1
What does the find() function do?
- returns the value of the first element in an array that passes a specified test - find returns JUST the object/item itself - Example: let a = [{b:1, c:2}, {b:3, c:4}]; 1. a.find(a => a.c == 4) //returns {b:3, c:4}
What is specificity?
- specificity is the process of determining style precedence when more than one style is applied to an element => the more specific the selector, the more precedence it has
If the web master wants a CSS tag to override any existing style, regardless of their location or selector, what syntax must they use?
- the !important syntax
What is an anchor tag used by default?
- the <a> tag AKA the anchor tag is used to define a hyperlink, so that when a user clicks on it, it loads a link - it can also be used for buttons
If you want to select an ID in CSS, what is the delimiter?
- the ID selector is hashtag/pound (#) sign - ID selectors are used to target one specific tag, instead of a collection of tags - 2 HTML tags should NEVER have the same ID attribute
If you want to select a class in CSS, what is the delimiter?
- the class selector matches the class name of the style to the class name listed on the attribute of the HTML tags - the class selector is defined with a period (.) sign in the CSS style sheet
What is more secure: a hard drive under the mattress or a full stack application?
- the hard drive b/c with a full stack app, people can try to decrypt and access data
What is the selector for a generic tag (like if you want to select all of the divs)?
- the name itself, there is no separate delimiter - element selectors are used to select existing HTML tags, like <h1>, <body>, <strong>...etc. - when an element selector is defined in CSS, every specified tag in the HTML page will have the style applied to it (i.e. in the picture, all h1 tags will have a font size 24 pt, and all h2 tags will have a font size of 18 pt and a font weight that is bold)
How are scroll bars implemented in CSS?
- the overflow property is used to easily display elements that are too large to fit in their containers - you can specify horizontal and vertical scrollbars by saying "overflow-x" and "overflow-y"
What is the peer-to-peer model?
- the peer-to-peer model uses every computer the same way, either as a server or client - each node is able to send and receive data directly with one another - neither is required to be connected 24/7 - is useful b/c decentralized and is relatively secure
What is the advantage of a web app vs. a desktop app?
- the problem with desktop apps is that they require installation, they only live on local computers, and they cannot be accessed on the internet - web apps allow people to use apps without having to set aside space on their computer's physical memory => you don't need to install anything or go through setup - people can access web apps anywhere, and you can measure user activity unlike desktop apps
What is the <style> tag? Which tag do you usually nest the style tag inside of?
- the style tag is used for the embedded method of CSS - the style tag is nested inside the <head> tag
Why is nesting elements in HTML important?
- to properly construct this hierarchy of elements, your browser expects each HTML elements to be properly nested - if the tags are not wrapper properly, the page will not render properly - everything must be wrapped
What does it mean for a unit to be absolute or relative?
- units are sometimes absolute, meaning they are static and real-world sizes. This includes inches, centimeters, or points - other times, units are relative, meaning they depend on other elements to resize. These include em or %
What are the tags for lists?
- unordered lists are added using <ul> tag and contain bulletin points - ordered lists are added using the <ol> and contain numbers - the <li> tag is inserted for each item of the list
Do you have to access a library in order to insert an emoji or can you do it using HTML entities?
- you can do it using entities - <meta charset = "utf-8" /> => include this line in the head section
What are the different ways you can apply colors in CSS?
1. RGBA 2. RGB 3. Hexadecimal 4. By using the actual name of the color => colors can be defined using the name of the color (i.e. <span style='color: red'></span>)
What are the following different types of attributes? 1. "style" 2. "lang" 3. "href" 4. "src" 5. "width" and "height" 6. "alt" 7. "title"
1. allows css to be injected in-line directly on the tag, as opposed to a class and stylesheet 2. used on the html tag to define the language on browsers 3. used by the anchor (<a></a>) tag to define the website the hyperlink navigates to 4. used by the img (<img></img>) tag to define the location of the image that displays 5. used to define the sizes of an image 6. displays a backup message in case the image cannot be displayed 7. used to add a tooltip on any given tag
What are the 3 ways you can apply CSS on an HTML page?
1. inline 2. embedded 3. external
What are some examples of the following technologies? 1. front end languages 2. back end languages 3. front-end frameworks 4. back-end frameworks
1. javascript, css, html 2. php, node, express 3. angular, view, react 4. asp.net
Why is it good to comment your code?
1. readability - helps you and others read your code - lets other people know what's going on, and you understand what is going on when you come back to it 2. maintainability 3. process of elimination/troubleshooting - process of elimination by commenting out your code until you can pinpoint issues with your app
What is the DOM?
= document object model - is a tree-like structure with all of the Javascript elements that you can access in order to modify your website
What is an IP address?
= internet protocol address - it identifies destinations on the Internet - It's not intuitive to remember IP addresses like 173.194.33.32 instead of a domain name like www.google.com, so key-value pair domain name/ip addresses were invented
Why is it not recommended to use absolute styles?
B/c they don't resize well to different screen sizes or zooming in and out. they are not for responsive design
T/F: It is not bad practice to add other tags between a ul and li tag, like an anchor tag.
F => it is bad practice
HTML
HTML
What is http?
HTTP = hypertext transfer protocol - is for web communication => describes how requests and responses operate - if a request is successful, the server returns a response with code, headers, and an optional message
What is the order of precedence of the following selectors? - class selectors - element selectors - ID selectors
ID > Class > Element
What are visual code, visual studio, notepad++, etc.?
IDEs: integrated development environment
INTRO
INTRO
What are webmasters?
People in charge of maintaining one or more websites AKA someone who designs websites
What does the .length property do?
Property that sets or returns the number of elements in an array
Let a = 1; let b=null; let c=3; Let z = a && b || c; What will z display?
Since b is undefined, and thus falsy, z will return the value of c, which is 3 - the picture shows another example
T/F: The <th> tag and the <td> tag go inside the <tr>
T
T/F: CSS must use responsive design to adapt to multiple screen sizes
T => It is best to use liquid layouts(ex: calc(100%)) instead of a fixed layout(ex: width: 960px) for proper responsive design
Who invented the world wide web?
Tim Burners
What does the push() function do?
adds a new element to the end of the array and returns the new length
What does the unshift() function?
adds new elements to the beginning of an array and returns the new length
What does the splice() function do?
adds/removes elements from an array
What are chrome, firefox, IE, etc.?
browsers
What does the forEach() function do?
calls a function for each array element
What does CSS stand for?
cascading style sheet => there is a hierarchy of styles that define specificity
What does the includes() function do?
checks if an array contains the specified element
let a = 1; let b = 2; let c = 3; let d = a || b && c; What does d return?
d returns 1, which is what a equals
let a = 1; let b = 2; let c = 3; let d = 4; let e = a && b && c || d; What does e return?
e returns c since all variables to the left of || are truthy
let a = ' '; //empty string => falsy let b = undefined; => falsy let c = {}; => truthy let d = true; let e = a || b || c && d; What does e return?
e returns {} (checks a, it is falsy so check b, it is falsy so check c, since c is truthy is returns c)
What are SQL and Mongo?
languages for database management systems
Can the <tr> tag go inside something like the <td> tag?
no
Is <td> a parent of <tr>?
no
When talking about front-end web development, would you say PHP is a language that is front end?
no => javascript is front end, PHP is back end
