Application-layer protocol for transmitting hypermedia documents, such as HTML. Wiki: HTTP
| HTML TAGS | |
|---|---|
| <!DOCTYPE> | Defines the document type |
| <html> | Defines an HTML document |
| <head> | Contains metadata/information for the document |
| <body> | Defines the document's body |
| <main> | Central topic of the document |
| <div> | Generic container for flow content |
| <section> | Container intended to divide chapters or topics |
| <article> | Container intended to be reusable, ex: user-submitted comment |
| <aside> | Sidebar |
| <header> | Defines a header for a document or a section |
| <footer> | Defines a footer for a document or a section |
| <nav> | Holds navigation links |
| <span> | Inline container for styling purposes |
| <title> | Defines a title for the document |
| <h1><h2><h3><h4><h5> | Headings |
| <p> | Defines a paragraph |
| <em> | Words that have a stressed emphasis compared to surrounding text |
| <cite> | Mark the title of a work (book, play, song, etc.) |
| <i> | Element to mark text |
| <strong> | Element to mark text that has greater importance than surrounding text. |
| <br> | Inserts a single line break |
| <pre> | Text preserves spaces and line breaks |
| <hr> | Thematic Break, sets a line between lines |
| <!--...--> | Comment |
| <code> | Contents styled to indicate that the text is computer code |
| <a href=""> | Link |
| <button> | Performs a programmable action |
| <textarea> | multi-line plain-text editing BOX |
| <label> | caption associated with item in a user interface |
| <select> | HTML element represents a control that provides a menu of options. |
| <option> | used to define an item contained in a <select>, an <optgroup>, or a <datalist> |
| <dl> | HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements) |
| <input> Types | ||
|---|---|---|
| <input type="button"> | programmed to control custom functionality | |
| <input type="checkbox"> | boxes that are checked (ticked) when activated | |
| <input type="radio"> | selection checkboxrendered as small circles, which are filled or highlighted when selected | |
| <input type="color"> | provide a user interface element that lets a user specify a color | |
| <input type="date"> | create input fields th at let the user enter a date | |
| <input type="datetime-local"> | create input controls that let the user easily enter both a date and a time | |
| <input type="month"> | create input fields that let the user enter a month and year allowing a month and year | |
| <input type="week"> | input fields allowing entry of a year plus the ISO 8601 week number | |
| <input type="time"> | input fields designed to enter a time | |
| <input type="datetime-local"> | A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. | |
| <input type="email"> | used to let the user enter and edit an e-mail address | |
| <input type="file"> | let the user choose one or more files from their device storage | |
| <input type="hidden"> | let web developers include data that cannot be seen or modified by users when a form is submitted | |
| <input type="image"> | used to create graphical submit buttons | |
| <input type="number"> | let the user enter a number | |
| <input type="password"> | provide a way for the user to securely enter a password | |
| <input type="range"> | slider or dial control | |
| <input type="reset"> | button with a default click event handler that resets all of the inputs in the form | |
| <input type="search"> | text fields designed for the user to enter search queries> | |
| <input type="submit"> | button that submits the form | |
| <input type="tel"> | control for entering a telephone number | |
| <input type="text"> | single-line text field | |
| <input type="url"> | automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. | |
This is the part of graphic design that deals with the arrangement of visual elements on a page.
It is used to make the web pages look better while establishes the overall appearance, relative
importance,
and relationships between the graphic elements to achieve a smooth flow of information and eye
movement for maximum effectiveness or impact.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag is required for the responsive design for all devices, adapts the viewport to the device.
<a href="xyz.html" target="_blank"> </a>
<a href="xyz.html" target="_self"> </a>
<a href="xyz.html" target="_parent"> </a>
&tla href="xyz.html" target="_top"> </a>
<a href="xyz.html" target="framename"> </a>
<span style="padding-left:20px">
Source
| KEY Shortcuts | |
|---|---|
| Select all the occurrences of current selection | Ctrl + Shift + L |
| Select all the occurrences of current word | Ctrl + F2 |
| Comment all selected text | Shift+Alt+A / Ctrl+K+C |
| Comment Line | // + text |
| Uncomment | Ctrl+K+U |
| Fast tag html | Alt + W |
| Boilerplate HTML | ! + tab + enter |
| Command palet | Crtl+Shift+P |
| Format Document | Shift+Alt+F |
| Format Selection | Ctrl+K Ctrl+F |
| Duplicate line | Shift + Alt + Up Shift + Alt + Down |
| Indentation | Tab to the right Shift + Tab to the left |
| Move selection | Ctrl + drag up/down |
| Multiple Cursor | Alt + Click , Ctrl+Alt+Up/Down |
| Column Select | Ctrl + Shift + Alt + Up, Down, Right, Left, PgUp, PgDown |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Toggle Word Wrap | Alt + Z |
<link rel="stylesheet" href="styles.css">
| UNIVERSAL SELECTOR | |
|---|---|
| * | Selects all the document and its elements |
| ELEMENT SELECTOR | |
| element tag | selects the refered element |
| element , element | selects multiple elements |
| ID SELECTOR | |
| #idname | selects the refered id element |
| CLASS SELECTOR | |
| .classname | selects the refered class, can contain multiple elements |
| DESCENDANT SELECTOR | |
| elementY elementX | select all x nested in a y at any deep |
| DIRECT DESCENDANT SELECTOR | |
| elementY > elementX | select all X direct descendent of Y |
| ADJACENT SELECTOR | |
| elementY + elementX | select the elementX that is immediately preceded by elementY |
| ATTRIBUTE SELECTOR | |
| element[attr] | Represents elements with an attribute name of attr. |
| element[attr=value] | Represents elements with an attribute name of attr whose value is exactly value. |
| [attr~=value] | Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value. |
| [attr|=value] | Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches. |
| [attr^=value] | Represents elements with an attribute name of attr whose value is prefixed (preceded) by value. |
| [attr$=value] | Represents elements with an attribute name of attr whose value is suffixed (followed) by value. |
| [attr*=value] | Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string. |
| [attr operator value i] | Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range). |
| [attr operator value S] | Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range). |
| PSEUDO CLASSES: | |
|---|---|
| :nth-of-type() | Matches elements based on their position among sibilings of the same type. |
| :nth-child() | Takes a single argument that describes a pattern for matching element indices in a list of siblings. |
| tr:nth-child(odd) or tr:nth-child(2n+1) | Represents the odd rows of an HTML table: 1, 3, 5, etc. |
| tr:nth-child(even) or tr:nth-child(2n) | Represents the even rows of an HTML table: 2, 4, 6, etc. |
| :nth-child(7) | Represents the seventh element. |
| :nth-child(5n) | Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. |
| :nth-child(n+7) | Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc. |
| :nth-child(3n+4) | Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc. |
| :nth-child(-n+3) | Represents the first three elements. [=-0+3, -1+3, -2+3] |
| p:nth-child(n) | Represents every <p> element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity). |
| p:nth-child(1) or p:nth-child(0n+1) | Represents every <p> that is the first element in a group of sib |
| p:nth-child(n+8):nth-child(-n+15) | Represents the eighth through the fifteenth <p> elements of a group of siblings. |
| :hover | triggered when the user hovers over an element with the cursor |
| :active | represents an element (such as a button) that is being activated by the user |
| :target | represents an element in the current document, that has id attribute set to a name that is matching the fragment identifier of the current URI. An URI fragment is what follows the “number sign” (#). |
| :autofill | matches when an <input> element has its value autofilled by the browser |
| :enabled | represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) |
| :focus | element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key. |
| :has() | element of the selectors passed as parameters (ex: <a> elements that directly contain an <img> child - a:has(> img)) |
| :optional | any <input>, <select>, or <textarea> element that does not have the required attribute set on it. |
| :is/:where() | takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list (ex: :where(header, main, footer) p:hover) |
| :link | matches every unvisited <a> or <area> element that has an href attribute |
| :root | represents the <html>, useful for declaring global CSS variables. Ex: --main-color: hotpink; |
| Pseudo Elements | |
|---|---|
| ::first-line | applies styles to the first line of a block-level element |
| ::after | creates a pseudo-element that is the last child of the selected element |
| ::before | creates a pseudo-element that is the first child of the selected element |
| ::file-selector-button | represents the button of an <input> of type="file" |
| @media screen and (min-width: 900px) and (orientation: landscape) |
| (min-width: 30em) and (max-width: 50em) |
| UNITS | |
|---|---|
| px | pixels |
| % | |
| em | with font-size 1em equals font-size of the parent, with other properties, 1em is equal to the computed font-size of the element itself |
| rem | root html font-size |
| ch | equates to the width of the number 0 (zero) of the grid container's current font |
| auto | use when you want to make your grid track match the size of content inside of it. This works for text, images, SVG, canvas elements, etc. |
| none | is the default for rows and columns if you don't specify them. Use none mainly when you want to reset/override a grid that was defined earlier, for example in a media query breakpoint. |
| vh | viewport height , 100vh = 100% size of the viewport |
| vw | viewport width same that vh but for the width |
| PROPERTIES | |
|---|---|
| Static | The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. |
| Relative | The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other element |
| Absolute | The element is removed from the normal document flow, and It is positioned relative to its closest positioned ancestor. |
| Fixed | The element is removed from the normal document flow. It is positioned relative to the initial containing block established by the viewport. |
| Sticky | The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. |
| Float: | Places an element on the left or right side of its container, allowing text and inline elements to wrap around it. |
| Display: | |
|---|---|
| INLINE | Width & Height are ignored. Margin & padding push elements away horizontally but not verticaly. |
| BLOCK | Block elements breat the flow of a document. Width Height, Margin, & Padding are respected. |
| INLINE-BLOCK | Behave like a inline element exept Width, Height, Margin, & Padding are respected. |
| flex; | The element behaves like a block element and lays out its content according to the flexbox model. |
| grid; | The element behaves like a block element and lays out its content according to the grid model. |
| inline-grid; | |
| flow-root; | |
| inline-flex; | |
| none; | |
| contents; | |
| inline flow; | |
| inline flow-root; | |
| block flex; | |
| inline flex; | |
| block grid; | |
| inline grid; | |
| block flow-root; | |
| block flow; | |
| table; | |
| table-row; | |
| list-item; | |
| inherit; | |
| initial; | |
| revert; | |
| revert-layer; | |
| unset; | |
| table; | |
| Box-sizing: | |
|---|---|
| border-box | (default) . If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. |
| content-box | If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. |
| padding-box: | The padding sits around the content as white space; size it using padding and related properties. |
| margin-box: | The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties. |
| Properties | |
|---|---|
| flex-direction: | row/column; |
| justify-content: | flex-start/flex-end/center/space-between/space-around/space-evenly;(main axis) |
| align-items: | flex-start/flex-end/center/baseline(aligns to text baseline); (cross axis) |
| flex-wrap: | wrap/wrap-reverse/nowrap; |
| align-content: | flex-start/end/center/space-between/space-around/space-evenly; (handles the space between the columns when wrap is on) |
| align-self: | flex-start/flex-end/center; (aligns the selected element in the cross axis) |
| flex-basis: | 400px;(size of the main axis direction) |
| flex-grow: | 1/2/3/...(element grow proportionaly respect the others taking available space) |
| flex-shrink: | 1/2/3... (element shrinks when there is not enought space on the container) |
| flex: | |
| flex: 2; | One value, unitless number: flex-grow |
| flex: 10em; | One value, width/height: flex-basis |
| flex: 1 30px; | Two values: flex-grow | flex-basis |
| flex: 2 2; | Two values: flex-grow | flex-shrink |
| flex: 2 2 10%; | Three values: flex-grow | flex-shrink | flex-basis |
| Transform: | lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS | |
|---|---|---|
| matrix() | Describes a homogeneous 2D transformation matrix. | |
| matrix3d() | Describes a 3D transformation as a 4x4 homogeneous matrix. | |
| perspective() | Sets the distance between the user and the z=0 plane. | |
| rotate() | Rotates an element around a fixed point on the 2D plane. | |
| rotate3d() | Rotates an element around a fixed axis in 3D space. | |
| rotateX() | Rotates an element around the horizontal axis. | |
| rotateY() | Rotates an element around the vertical axis. | |
| rotateZ() | Rotates an element around the z-axis. | |
| scale() | Scales an element up or down on the 2D plane. | |
| scale3d() | Scales an element up or down in 3D space. | |
| scaleX() | Scales an element up or down horizontally. | |
| scaleY() | Scales an element up or down vertically. | |
| scaleZ() | Scales an element up or down along the z-axis. | |
| skew() | Skews an element on the 2D plane. | |
| skewX() | Skews an element in the horizontal direction. | |
| skewY() | Skews an element in the vertical direction. | |
| translate() | Translates an element on the 2D plane. | |
| translate3d() | Translates an element in 3D space. | |
| translateX() | Translates an element horizontally. | |
| translateY() | Translates an element vertically. | |
| translateZ() | Translates an element along the z-axis. | |
| Transform-origin: | sets the origin for an element's transformations. | |
| One-value syntax: | represents the horizontal offset, <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom | |
| Two-value syntax | first value represents the horizontal offset and the second represents the vertical offset. | |
| Three-value syntax: | The third value must be a <length>. It always represents the Z offset. | |
| Transform-box: | defines the layout box to which the transform and transform-origin properties relate. | |
| content-box | The content box is used as the reference box. The reference box of a <table> is the border box of its table wrapper box, not its table box. | |
| border-box | The border box is used as the reference box. The reference box of a <table> is the border box of its table wrapper box, not its table box. | |
| fill-box | The object bounding box is used as the reference box. | |
| stroke-box | The stroke bounding box is used as the reference box. | |
| view-box | The nearest SVG viewport is used as the reference box. If a viewBox attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute, and the dimension of the reference box is set to the width and height values of the viewBox attribute. | |
| transform-style: | sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. | |
| flat | Indicates that the children of the element are lying in the plane of the element itself. | |
| preserve-3d | Indicates that the children of the element should be positioned in the 3D-space. | |
| text-transform | specifies how to capitalize an element's text | |
| uppercase | converts all characters to uppercase. | |
| lowercase | converts all characters to lowercase. | |
| none | prevents the case of all characters from being changed. | |
| full-width Is | forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese). | |
| full-size-kana | used for <ruby> annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby. |
| transition-delay | specifies the duration to wait before starting a property's transition effect when its value changes. |
| transition-duration | sets the length of time a transition animation should take to complete |
| transition-property | sets the CSS properties to which a transition effect should be applied. |
| transition-timing-function | sets how intermediate values are calculated for CSS properties being affected by a transition effect. |
| background: | sets all background style properties at once, such as color, image, origin and size, or repeat method | |
|---|---|---|
| background-color: | sets the background color of an element. | |
| brown; | ||
| #74992e; | ||
| rgb(255, 255, 128); | ||
| rgba(255, 255, 128, .5); | ||
| hsl(50, 33%, 25%); | ||
| hsla(50, 33%, 25%, .75); | ||
| linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); | ||
| background-image: | sets one or more background images on an element | |
| blue | ||
| linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); | ||
| url("../../media/examples/lizard.png"); | background-size | sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space. |
| background-size: | contain; | Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat. |
| background-size: | cover; | Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally. |
| background-size: | 30%; | Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. |
| background-size: | 200px 100px; | Using both a width and a height value, in which case the first sets the width and the second sets the height |
| background-size: | 6px, auto, contain; | |
| background-origin: | sets the background's origin: from the border start, inside the border, or inside the padding. | |
| background-origin: | padding-box; | |
| background-origin: | content-box; | |
| background-origin: | border-box; | The background is positioned relative to the border box |
| background-attachment | sets whether a background image's position is fixed within the viewport, or scrolls with its containing block. | |
| background-attachment: | scroll; | The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.) |
| background-attachment: | fixed; | The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. |
| background-attachment: | local; | The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. |
| background-clip | sets whether an element's background extends underneath its border box, padding box, or content box. | |
| background-clip: | border-box; | |
| background-clip: | padding-box; | |
| background-clip: | content-box; | |
| background-clip: | text; | |
| -webkit-background-clip: | text; | |
| background-repeat: | no-repeat; |
| TEXT ALIGN PROPERTIES | |
|---|---|
| text-align: | "sets the horizontal alignment of the inline-level content inside a block element or table-cell box" |
| text-align: start; | "Same as “left” in ltr, same as “right” in rtl." |
| text-align: end; | "Same as “right” in ltr, same as “left” in rtl." |
| text-align: left; | "The default value. Content aligns along the left side." |
| text-align: right; | "right – Content aligns along the right side." |
| text-align: center; | "Content centers between the left and right edges." |
| text-align: justify; | "Content spaces out such that as many blocks fit onto one line as possible" |
| text-align: justify-all; | "inline contents of a block are horizontally aligned if the contents do not completely fill the line box." |
| text-align: match-parent; | "match parent text-align property" |
| text-align: "."; | "When multiple cells in a column have an alignment character specified, the alignment character of each such cell in the column is centered along a single column-parallel axis and the rest of the text in the column shifted accordingly. " |
| text-align: "." center; | "character align with a property" |
| text-align: -moz-center; | "Block alignment values" |
| text-align: -webkit-center; | "Block alignment values" |
| text-align: inherit; | "match parent text-align property" |
| text-align: initial; | "?" |
| text-align: revert; | "?" |
| text-align: revert-layer; | "?" |
| text-align: unset; | "?" |
| Text properties | |
|---|---|
| font-weight: 400; | "Specifies weight of glyphs in the font, their degree of blackness or stroke thickness." |
| text-decoration: #3a220e underline wavy; | "Decorations applied to font used for an element's text." |
| letter-spacing: 15px; | "letter-spacing: 15px;" |
| font-size: 80px; | "Sets the size of the font" |
| font-family: monospace; | "sets font-family" |
| line-height: 3; | "Sets the height of a line box" |
| text-transform: | |
| none; | |
| capitalize; | |
| uppercase; | |
| lowercase; | |
| full-width; | |
| full-size-kana; | |
let agustin = 1985;
agustin = agustin + 1; -----> agustin += 1; ------> agustin++;
agustin = agustin - 1; -----> agustin -= 1; ------> agustin--;
const pi = 3.14;var edadhoy = 36;
true
false
1 == "1" (equality regardless of variable type)
true
1 === "1" (strict equality)
false
1 != "1" (inequality without distinction)
false
1 !== "1" (strict inequality)
true
The strict inequality operator (!==) checks whether its two operands are not equal, returning a Boolean result.
let nombre = "agustin"
let apellido = "bruno";
let ciudadNacimiento = "Buenos Aires";
let sentence = "the cat is under the table";
`hello ${1+2+3}` = "hello 6" (using "backtics" compilator detects text as
javascript instead of string)
let product = "artichoke";
let price = 2.25;
let qty = 5;
`You bought ${qty} ${product}. Total is: ${price*qty}` = 'You bought 5 artichoke. Total is: 11.25'
apellido [0] (Returns the character)
apellido.length (Returns the quantity of characters on the string)
nombre + apellido = agustinbruno (Concatenation)
apellido.toUpperCase() = "BRUNO" (string method).
let apellidoMayusc = apellido.toUpperCase() = "BRUNO" (creates a new variable and saves a modified variable inside)
let sentence = "the cat is under the table"
sentence.slice(4 , 8) = "cat " (Method + args () in this case, it cuts the string from 4 to 8)
let newsentence = sentence.replace("cat", "dog")
newsentence = "the dog is under the table"
sentence.repeat(2) (Repeat the number of times determined by the argument)
const word = "skateboard";
let facialHair = word.slice(5).replace("o","e")
"beard" (multiple methods can be used simultaneously to modify a variable)
Math.random()Creates a random decimal number from 0 to 0.99999999Math.random() * 5Creates a random number and multiply it The Math.floor()Function that returns the largest integer less than or equal to a
given
number.Math.floor(Math.random()*10) Generates a number up to the figure that multiplies
it
rounding
downMath.floor(Math.random()*10) + 1 Random number including the value that multiplies
itMath.floor(Math.random()*3) +20 Random number + base value
let number = Math.floor(Math.random()*10);
number = 7
example 2:
const die1 = Math.floor(Math.random() * 6) + 1; //random number from 1-6
const die2 = Math.floor(Math.random() * 6) + 1; //random number from 1-6`
let roll =`You rolled a ${die1} and a ${die2}. They sum to ${die1+die2} `
'You rolled a 4 and a 4. They sum to 8 '
console.log("Welcome to the practice");
let random = Math.random();
if (random < 0.5) {
console.log("Number is less than 0.5")
console.log(random);
} if (random>= 0.5){
console.log ("Number is greater than 0.5")
console.log (random);
}
function isEven(num){
if (num % 2 === 0)
console.log ("even");
}
const age = 9;
if (age < 5){
console.log("you get for free")
} else if (age< 10){
console.log("please pay $10")
} else if (age < 65) {
console.log("please pay $20")
}
const dayOfWeek=prompt("enter a day").toLowerCase();
if (dayOfWeek==="monday" ) {
console.log("i hate mondays")
} else if (dayOfWeek==="saturday" ){
console.log("i love saturdays")
} else {
console.log("meh")
}
function getColor(phrase){
if (phrase==="stop" ){
console.log("red")
} else if (phrase==="slow" ){
console.log("yellow") }
else if (phrase==="go" ){
console.log("green")
} else { console.log("purple")
}
}
const password = prompt("enter password");
if (password.length >=6) {
if(password.indexOf(" ") === -1){ // indexOf(" ") means space on the string // -1 means "no match found"
console.log("valid password");
} else {
console.log("password cannot contain spaces");
}
} else {
console.log("password too short, must contain 6 character")
}
const password = prompt("enter your password");
if (password.length >= 6 && password.indexOf(" ") === -1) { (considers both logics)
console.log("valid")
} else {
console.log("invalid")
}
const age = 9;
if (age >= 0 && age < 5 || age >= 65) { (considers one of both logics)
console.log("free");
} else if (age >=5 && age < 10) {
console.log("$10")
} else if (age >= 10 && age < 65) {
console.log("$20")
} else {
console.log("invalid")
}
let firstName = prompt ("enter your first name");
if (!firstName) { //meaning entry was false or empty
firstName = prompt("try again");
}
Will search through the cases and execute when finds the variable. Without the break it will continue to execute the next ones until the end or a break.
const day = 1;
switch (day){
case 1:
console.log("monday");
break;
case 2:
console.log("tuesday");
break;
case 3:
console.log("wednesday");
break;
case 4:
console.log("thursday");
break;
case 5:
console.log("friday");
break;
case 6:
case 7:
console.log("weekend");
default:
console.log("i dont know")
Data structure that colects information
let colors = ["red", "orange", "yellow"];
colors[0] = "red";
colors[1] = "orange";
colors[2] = "yellow";
//new items can be added or modified writing the variable name + the numeral of the array = the new one or just call them out with the numeral
colors[5]; //undefined
colors[5] = "blue"
//["red","orange","yellow", empty x 2, "blue"]
//to display an array on console just write the variable, to know length, variable.length
let lottNums = [19,22,56,12,51];
lottNums.push(5)
[19,22,56,12,51,5] //PUSH method added an element to the queue of the array
lottNums.pop();
[19,22,56,12,51] //POP method removed the last element of the array
lottNums.shift();
[22,56,12,51] //SHIFT method removed the first elemnt of the array
lottNums.unshift(76);
[79,22,56,12,51] //UNSHIFT method added a new element to the beggining of the array
//ej
const planets = ['The Moon','Venus', 'Earth', 'Mars', 'Jupiter']; //DO NOT TOUCH THIS LINE!
planets.shift(); //"The Moon" out
planets.push("Saturn"); //"Saturn" into queue
planets.unshift("Mercury"); //"Mercury" in to start
let cats= ["blue","kitty"];
let dogs= ["rusty","wyatt"];
let comboParty = dogs.concat(cats); //CONCAT method merges arrays
comboParty
["rusty","wyatt","blue","kitty"]
cats.includes("blue");
true
cats.includes("Blue"); //INCLUDES method display boolean condition
false
cats.indexOf("kitty") //indexOf method display the element searched (if there is not, will be -1)
1
comboParty.reverse(); //REVERSE method... backflip the queue
(4) ['kitty', 'blue', 'wyatt', 'rusty']
let colors = ["red", "orange", "yellow","green","blue","indigo","violet"];
let coolColors = colors.slice(3) //SLICE method copy and paste to the new variable from the 0 to the number between ()
coolColors
(4) ['green', 'blue', 'indigo', 'violet']
colors.slice(2,4) //SLICE from #2 to #3
(2) ['yellow', 'green']
colors.slice(-3); //SLICE counting elements from the end
(3) ['blue', 'indigo', 'violet']
colors.splice(5,1) //(5#,1 quantity of elemnts to delete)
['indigo'] //SPLICE method, deleted 1 element from the array
colors.splice(3,0,"ambar","magenta"); //added 2 new elements starting from the #given
colors
(9) ['red', 'orange', 'yellow', 'ambar', 'magenta', 'green', 'blue', 'indigo', 'violet']
colors.sort(); //SORT method, rearanged the array using some critearia.
(9) ['ambar', 'blue', 'green', 'indigo', 'magenta', 'orange', 'red', 'violet', 'yellow']
//NESTED ARRAYS
const gameBoard = [["x","o","x"],["o","null","x"],["o","o","x"]]
gameBoard
(3) [Array(3), Array(3), Array(3)]
0: (3) ['x', 'o', 'x']
1: (3) ['o', 'null', 'x']
2: (3) ['o', 'o', 'x']
length: 3
[[Prototype]]: Array(0)
gameBoard[1] //display the array #1
(3) ['o', 'null', 'x']
gameBoard[1][1] //display the element #1 on array #1
'null'
//Exercise NESTED ARRAYS
const airplaneSeats = [
['Ruth', 'Anthony', 'Stevie'],
['Amelia', 'Pedro', 'Maya'],
['Xavier', 'Ananya', 'Luis'],
['Luke', null, 'Deniz'],
['Rin', 'Sakura', 'Francisco']
];
airplaneSeats[3].splice(1,1,"Hugo"); //located on the #3 array, executed method splice placing on the #1, deleting 1, adding new string.
airplaneSeats
(5) [Array(3), Array(3), Array(3), Array(3), Array(3)]
0: (3) ['Ruth', 'Anthony', 'Stevie']
1: (3) ['Amelia', 'Pedro', 'Maya']
2: (3) ['Xavier', 'Ananya', 'Luis']
3: (3) ['Luke', 'Hugo', 'Deniz']
4: (3) ['Rin', 'Sakura', 'Francisco']
length: 5
[[Prototype]]: Array(0)
The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities
//example:
const kitchenSink = {
favNum: 2412442,
material: ["metal", "ceramic"],
warranty: true
}
const user = {name:"agustin",surename:"bruno"} //variable data enclosed with curly brackets {}
//exercise
const product = {name:"Gummy Bears",inStock:true,price:1.99,flavors:["grape","apple","cherry"]}
//extract data from objects
const years = {1999:"good", 2020:"bad"};
years["1999"]
"good"
years[1999]
"good"
const happy= {birthday:"today",newyear:"yesterday"};
happy.birthday
'today'
//EXERCISE
const restaurant = {
name: 'Ichiran Ramen',
address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
city: 'Brooklyn',
state: 'NY',
zipcode: '11206',
}
const fullAddress = restaurant.address+ restaurant.city+ restaurant.state+ restaurant.zipcode
'90 Johnson AveBrooklynNY11206'
//MODIFYING OBJECTS
const midterms = {danielle:96, thomas:78}
midterms.thomas = 79 //modified score to 79
midterms.ezra
midterms.ezra = 60
midterms["antonio"]
midterms["antonio"] = 100
midterms
{danielle: 96, thomas: 79, ezra: 60, antonio: 100}
//OBJECTS & ARRAY NESTING
const shoppingCart= [
{
product: "jenga classic",
price: 6.88,
quantity: 1,
}
{
product: "Echo Dot",
price: 29.99,
quantity: 3
}
]
const student = {
firstName: "david",
strengths:["music","art"],
exams: {
midterm:92,
final:88
}
}
Structure:
for ([initialExpression]; [conditionExpression]; [incrementExpression])
statement
Example 1: Count to 10
for (let num = 1; num <= 10; num += 1) { (creates a variable called num, if num less or equal to 10 , 1 is added to the num)Example 2: Repeat text
const n = 5;INFINITE LOOP , WARNING!!
for (let i = 1; i >= 1; i ++){ Node.js lets developers use JavaScript to write command line tools and for server-side
scripting to produce dynamic web page content before the page is
sent to the user's web browser.
Wiki: NODE
| commands: | |
|---|---|
| mkdir : | creates new folder |
| mkdir ../ : | creates folder upwards |
| touch | files will be created on the directory |
| rm | permanently remove selected files |
| rmdir | removes empty folders |
| rm -rf | removes all |
| ls: | stands for "list", similar to "dir" |
| pwd: | "print working directory" |
| cd : | "change directory" |
| cd .. : | backwards |
| cd ~ : | home directory |
| cd / : | root directory |
| cd c/: | to C |
| cd ../../Pets : | backs out to the directory required, relative path |
| absolute path: | cd /Users/coltsteele |
| explorer . : | open the instalation folder of git bash |
| "command" --help | command list |
Touch index.html app.css app.js files will be created on the directory
const express = require('express');
const app = express();
const router = express.Router();
app.use('/public', express.static('./public'));
app.get('/',function(req,res) {
res.sendFile(__dirname + '/index.html');
});
router.get('/', (req,res) => {
const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
console.log(ip); // ip address of the user
});
app.use('/', router);
app.listen(80, () => {
console.log('Serving on port 80')
})
