int prep

Tables and borders css

"border-collapse: collapse" specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. border-spacing specifies the width that should appear between table cells. caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. empty-cells specifies whether the border should be shown if a cell is empty. table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

jQuery Selectors

"p" - all p elements ".test" - all classes with "test" "#test" - all id with "test" * - selects all elements A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element. jQuery selectors start with the dollar sign and parentheses − $(). The factory function $() makes use of following three building blocks while selecting elements in a given document −TAG NAME, TAG ID, TAG CLASS

What does all jquery start with

$document.ready( function() { }) to prevent any jQuery code from running before the document is finished loading (is ready).

Javascript variables

** Strings, numbers, boolean. Also null and undefined. objects ares composite variables. ** All numbers are floating points ** Variables are defined by var

CSS font

** The font-family property is used to change the face of a font. ** The font-style property is used to make a font italic or oblique. ** The font-variant property is used to create a small-caps effect. ** The font-weight property is used to increase or decrease how bold or light a font appears. ** The font-size property is used to increase or decrease the size of a font. ** The font property is used as shorthand to specify a number of other font properties.

what is strict mode?

- JavaScript strict mode is used to generates silent errors. - provides "use strict"; expression to enable the strict mode. - expression can only be placed as the first statement in a script or a function. For example:

CSS Inclusion

- using the <style> element - inline css (<element style = "...style rules....">) - link type (<link type = "text/css" href = "mystyle.css" media = " all" />) - @import (@import "mystyle.css";)

CSS comment

/* this is a comment */

CSS Overriding rules

1. Any inline stylesheet takes the highest priority. Therefore, it will override any rule defined in <style>...</style> tags or rules defined in an external style sheet file. 2. Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. 3. Any rule defined in external style sheet file takes the lowest priority, and rules defined in this file will be applied only when above two rules are not applicable

How is specificity calculated?

1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before). 2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). 3. ID selectors (e.g., #example). 4. style="" 5. !important

What is the output of "10"+20+30 in JavaScript?

102030 because after a string all the + will be treated as string concatenation operator (not binary +).

CSS links

:link signifies unvisited hyperlinks. :visited signifies visited hyperlinks. :hover signifies an element that currently has the user's mouse pointer hovering over it. :active signifies an element on which the user is currently clicking.

Links (and targets)

<a href="url" target="_self" >Link sest</a> targets: blank, self, top, parent, targetframe

Tags used to break page

<br> <p> <blockquote>

Tables in HTML

<table> for Table <tr> for table row <td> for table data cells in rows <thead> for to create separate table header <tbody> to indicate body of table

Lists in HTML

<ul> unordered list - bullet points <ol> ordered list - numbered <li> is list tag There are also definition lists

Javascript Operators

= = (Equal) Checks if the value of two operands are equal or not, if yes, then the condition becomes true. != (Not Equal) Checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true. > (Greater than) Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true. < (Less than) Checks if the value of the left operand is less than the value of the right operand, if yes, then the condition becomes true. % (Modulus) Outputs the remainder of an integer division && (Logical AND) If both the operands are non-zero, then the condition becomes true. ? : (Conditional ) If Condition is true? Then value X : Otherwise value Y The typeof operator is a unary operator that is placed before its single operand, which can be of any type. Its value is a string indicating the data type of the operand. difference between == and ===

what is promise Javascript

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

jquery events

All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens. Examples: moving a mouse over an element selecting a radio button clicking on an element click, dblclick, mouseenter, mouseleave keypress, keydown, keyup submit, change, focus, blur

What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Javascript comments

Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. Any text between the characters /* and */ is treated as a comment. This may span multiple lines. JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment. The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.

What are ways to target elements?

CLASS, ID, TAG

JavaScript Cookies

CREATE COOKIE - document.cookie READ COOKIE - var x = document.cookie; DELETE COOKIE - Just set the expires parameter to a passed date: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

CSS Sprites

CSS sprite is merging multiple images into a single image. It reduces the amount of WEB-requests and increases page speed.

ES6 class

Class declaration creates a new class with a given name based on prototype inheritance

Javascript limitations

Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason. JavaScript cannot be used for networking applications because there is no such support available. JavaScript doesn't have any multi-threading or multiprocessor capabilities.

Comment in html and css

Comments in html written like <!--- --> Comments in CSS written like // or /* multi */

CSS box model

Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

JavaScript Events

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. <element event='some JavaScript'> EXAMPLE- <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> Try it Yourself »

CSS colors

Hex Code - p{color:#FF0000;} RGB % - p{color:rgb(50%,50%,50%);} keyword - p{color:teal;}

inline elements vs. block level elements

Inline elements don't create a new line whereas block elements start at a new line and take up whole width INLINE: <a>, <b>, <br>, <button>, <img>, <input>, <label>, <span> BLOCK: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address>

Javascript advantages

Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server. Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Local vs session storage

Local storage exists on the browser even after closed while session storage only exists when browser tab is open

Javascript error handling

Logic errors are not the result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic that drives your script and you do not get the result you expected. You cannot catch those errors, because it depends on your business requirement what type of logic you want to put in your program The try block must be followed by either exactly one catch block or one finally block (or one of both). When an exception occurs in the try block, the exception is placed in e and the catch block is executed. The optional finally block executes unconditionally after try/catch.

Types of javascript function and what they do

Named function - function myFunction() {} Anonymous function - var myFunction = function() {} Anonymous functions are run dynamically at runtime using function operator

HTML 5 New Elements

New Semantic Elements − These are like <header>, <footer>, and <section>. Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage − To achieve without resorting to third-party plugins. WebSocket − A next-generation bidirectional communication technology for web applications. Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript. Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins. Geolocation − Now visitors can choose to share their physical location with your web application. Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Drag and drop − Drag and drop the items from one location to another location on the same webpage.

HTML5 plugins

Plug-ins can be added to web pages with the <object> tag or the <embed> tag. Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.

JavaScript Properties

Properties are the values associated with a JavaScript object. objectName.property // person.age objectName["property"] // person["age"] You can add new properties to an existing object by simply giving it a value. >> person.nationality = "English"; The delete keyword deletes a property from an object: >> delete person.age; // or delete person["age"];

Pseudo class

Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button. Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab. a:link {color: #FF0000;} p:first-child {color: blue;}

Positioning

Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position. An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner. Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.

Javascript placement

Script in <head>...</head> section. Script in <body>...</body> section. Script in <body>...</body> and <head>...</head> sections. Script in an external file and then include in <head>...</head> section.

HTML5 canvas

The <canvas> element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images. There are several methods in canvas to draw paths, boxes, circles, text and add images. For Example: You can easily find that <canvas> element in the DOM using getElementById() method as follows − var canvas = document.getElementById("mycanvas");

CSS Rules

The @import: rule imports another style sheet into the current style sheet. The @charset rule indicates the character set the style sheet uses. The @font-face rule is used to exhaustively describe a font face for use in a document. The !important rule indicates that a user-defined rule should take precedence over the author's style sheets.

HTML5 storage

The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time. The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

Javascript control statements

The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way. The if...else if... statement is an advanced form of if...else that allows JavaScript to make a correct decision out of several conditions. The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.

CSS margins

The margin specifies a shorthand property for setting the margin properties in one declaration. The margin-bottom specifies the bottom margin of an element. The margin-top specifies the top margin of an element. The margin-left specifies the left margin of an element. The margin-right specifies the right margin of an element.

Jquery on

The on() method attaches one or more event handlers for the selected elements and child elements. $("p").on("click", function(){ alert("The paragraph was clicked.");});

CSS padding

The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element. The padding-right specifies the right padding of an element. The padding serves as shorthand for the preceding properties.

JavaScript Prototypes

The prototype property allows you to add properties and methods to any object (Number, Boolean, String and Date etc.). function book(title, author) { this.title = title; this.author = author; } LEADS TO >>>> var myBook = new book("Perl", "Mohtashim"); book.prototype.price = null; myBook.price = 100;

HTML Form

Use <form> tags to create form. Use <input> tags to create inputs. Use <input type=""> to set type of input... text, radio, submit Use action in <input action=''> to defines the action to be performed when the form is submitted

How to evaluate number of characters in string?

Use length property.

Hoisting

all variables are moved to the top (let/const are not moved)

Jquery chaining

allows you to run multiple jQuery commands, one after the other, on the same element(s).. This way browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action example - $("#p1").css("color", "red").slideUp(2000).slideDown(2000);

HTML Attribute

alt - Specifies an alternative text for an image, when the image cannot be displayed disabled - Specifies that an input element should be disabled href - Specifies the URL (web address) for a link id - Specifies a unique id for an element src - Specifies the URL (web address) for an image style - Specifies an inline CSS style for an element title - Specifies extra information about an element (displayed as a tool tip)

Image links

attach image inside ahreaf <a href = "https://www.tutorialspoint.com" target = "_self"> <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a>

Empty vs non empty html element

cannot have any child nodes (i.e., nested elements or text nodes) ex: <input /> (NOT <input></input>)

ES6 classes

class className { constructor(value ) { this.value = value. } valuefunc() { return value + ""} }

CSS Measurement

cm - centimeters px - pixels em - A relative measurement for the height of a font in em spaces % - percentage

CSS text

color property is used to set the color of a text. direction property is used to set the text direction. letter-spacing property is used to add or subtract space between the letters that make up a word. word-spacing property is used to add or subtract space between the words of a sentence. text-indent property is used to indent the text of a paragraph. text-align property is used to align the text of a document. text-decoration property is used to underline, overline, and strikethrough text. text-transform property is used to capitalize text or convert text to uppercase or lowercase letters. white-space property is used to control the flow and formatting of text. text-shadow property is used to set the text shadow around a text.

ES6 inheritance

https://i.imgur.com/hKGpoRW.png

HTML5 input types

introduces new inputs and output tag

CSS display

none - removes the element allowing others to fill in inline, block, inline block

Psuedo Elements

p::first-line { ... } span::first-letter { ... } ::selection { ... } .header::after { ... } .tooltip::before { ... } Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you've selected, or you can use it to insert text or shapes before or after an element. They always start with a double colon - although a single colon is still allowed for backwards compatibility - and they look like this:

How does Javascript implement inheritance

prototype chain

CSS Selector (WIP)

selector { property: value }

Visibility

visible - element is visible hidden - element is hidden but still takes up space

CSS overflow

visible − Overflowing content should be displayed. hidden − Overflowing content should not be displayed. scroll − Overflowing content should not be displayed, but the user agent should provide some means of accessing the hidden content (e.g., a set of scrollbars). auto − The behavior caused by this value is dependent on the browser.