WEBSYS REVIEWER - defines a title in the browser toolbar

Information Architect - provides a title for the page when it is added to favorites
- also known as Information Designer - displays a title for the page in search-engine results
- organizes the content logically and for the ease of findability
- inevitably entwined with UI and UX design as well as the content HTML HEADINGS are defined with the <h1> to <h6> tags.
management HTML PARAGRAPHS - are defined with the <p> tag.
Content Strategist HORIZONTAL LINE TAG
- makes sure that every bit of text on a site, supports the brand identity - The <hr /> tag creates a horizontal line in an HTML page. The hr element
UX Design can be used to separate content
- User Experience Design HTML Hyperlinks (Links)
- Coined by Donald Norman - A hyperlink (or link) is a word, group of words, or image that you can
- “All aspects of the user’s interaction with the product” click on to jump to a new document or a new section within the current
IxD document.
- Also known as Interaction Design - Links are specified in HTML using the <a> tag.
- Goal is to make the site as easy, efficient to use as possible. - <a href="url">Link text</a>
UI Design HTML IMAGES
- Also known as User Interface Design - are defined with the <img> tag.
- More narrowly focused on the functional organization of the page (buttons, - <img src="url" alt="some_text"/>
links, menus). HTML elements
- with no content are called empty elements.
TWO CATEGORIES OF DEVELOPMENT: - <br> is an empty element without a closing tag (the <br> tag defines a
Frontend development line break).
- refers to any aspect of the design process that appears in or relates directly HTML COMMENTS
to the browser. - Comments can be inserted into the HTML code to make it more readable
Backend development and understandable. Comments are ignored by the browser and are not
- focus on the server, including the applications and databases that run on it. displayed.
- They may be responsible for installing and configuring the server. - <!-- This is a comment -->
- PHP, Ruby, .NET (or ASP.NET), Python, or JSP, in order to create
applications that provide the functionality required by the site. HTML LISTS
- need to be familiar with configuring and maintaining databases that store Ordered lists
all of the data for a site. - are lists where each item in the list is numbered.
- include MySQL, Oracle, and SQL Server. Unordered lists
- are lists that begin with a bullet point (rather than characters that indicate
Full-Stack Developers and Unicorns order).
- That means a person who is fluent in both frontend (HTML, CSS, - An unordered list starts with the <ul> tag. Each list item starts with the
JavaScript) and backend (server applications, databases) languages. <li> tag
Definition lists
Product Manager - are made up of a set of terms along with the definitions for each of those
- application guides its design and development in a way that meets terms.
business goals. - The <dl> tag defines the description list, the <dt> tag defines the term
Project Manager (name), and the <dd> tag describes each term:
- manager coordinates the designers, developers, and everyone else who is
working on the site. THE HTML STYLE ATTRIBUTE
SEO Specialist - The HTML style attribute has the following syntax:
- Search Engine Optimization (SEO) is a discipline focused on tweaking - <tagname style=”property:value;”>
the site structure and code in a way that increases the chances it will be HTML BACKGROUND COLOR
highly ranked in search results. - The background-color property defines the background color for an
Multimedia producers HTML element.
- can add multimedia elements to a site, including sound, video, animation, HTML FONTS
and even interactive games. - The font-family property defines the font to be used for an html element
World Wide Web HTML TEXT ALIGNMENT
- a network of computers all over the world. - The text-align property defines the horizontal text alignment for an HTML
- uses http (hypertext transfer protocol) element.
- W3C : rule making body of the web HTML TABLE - COLLAPSED BORDERS
How does the web works? - If you want the borders to collapse into one border, add the CSS border-
- web pages collapse property
- web server HTML TABLE - ADDING BORDER SPACING
- web browser - Border spacing specifies the space between the cells.
- http request - To set the border spacing for a table, use the CSS border-spacing
HTML property:
HTML TABLE CELLS THAT SPAN MANY COLUMNS
- Hyper Text Markup Language - To make a cell span more than one column, use the colspan attribute
- a language describing web pages TABLE CELLS THAT SPAN MANY ROWS
- A markup language is a set of markup tags - To make a cell span more than one row, use the rowspan attribute
HTML TAGS THE <FORM> ELEMENT
- Tags are the basic units or building blocks of a HTML file. - HTML forms are used to collect user input.
- HTML tags are keywords (tag names) surrounded by angle brackets like - The <form> element defines an HTML form
<html> FORM ELEMENTS
ATTRIBUTES - HTML forms contain form elements.
- provide additional information about the contents of an element. - Form elements are different types of input elements, checkboxes, radio
- They appear on the opening tag of the element and are made up of two buttons, submit buttons, and more.
parts: a name and a value, separated by an equals sign. THE <INPUT> ELEMENT
- The <input> element is the most important form element.
HTML PAGE STRUCTURE - The <input> element has many variations, depending on the type attribute.
HTML <!DOCTYPE> - text – defines normal text input
- There are many different documents on the web. A browser can only - radio – defines radio button input (for selecting one of many choices)
display a document correctly, if it knows what kind of document it is. - submit – defines a submit button (for submitting the form)
The HTML <head> Element TEXT INPUT
- The <head> element is a container for all the head elements. Elements SYNTAX:
inside <head> can include scripts, instruct the browser where to find style sheets, <input type="text" name="name">
provide meta information, and more. RADIO BUTTON INPUT
The HTML <title> Element SYNTAX:
- The <title> tag defines the title of the document. <input type="radio" name="gender" value="male" checked> Male<br>
 <input type="radio" name="gender" value="female"> Female<br> - p.groove {border-style: groove;}
<input type="radio" name="gender" value="other"> Other  ridge - Defines a 3D ridged border. The effect depends on the border-
THE SUBMIT BUTTON color value
SYNTAX: - p.ridge {border-style: ridge;}
- <input type="submit" value=”submit”>  inset - Defines a 3D inset border. The effect depends on the border-color
- defines a button for submitting a form to a form-handler. value
THE ACTION ATTRIBUTE - p.inset {border-style: inset;}
- <form action="action_page.php">  outset - Defines a 3D outset border. The effect depends on the border-
- The action attribute defines the action to be performed when the form is color value
submitted. - p.outset {border-style: outset;}
THE METHOD ATTRIBUTE  none - Defines no border
- The method attribute specifies the HTTP method (GET or POST) to be - p.none {border-style: none;}
used when submitting the forms:  hidden - Defines a hidden border
- <form action="action_page.php" method="get"> - p.hidden {border-style: hidden;}
OR
- <form action="action_page.php" method="post">
WHEN TO USE GET? BORDER WIDTH
- You can use GET (the default method) - The border-width property specifies the width of the four borders.
- If the form submission is passive (like a search engine query), and without BORDER COLOR
sensitive information. - The border-color property is used to set the color of the four borders.
WHEN TO USE POST? - The color can be set by:
- You should use POST:  name - specify a color name, like "red"
- If the form is updating data, or includes sensitive information (password).
 Hex - specify a hex value, like "#ff0000"
- POST offers better security because the submitted data is not visible in
 RGB - specify a RGB value, like "rgb(255,0,0)"
the page address.
 transparent
GROUPING FORM DATA
BORDER INDIVIDUAL SIDES
- The <fieldset> element groups related data in a form.
- properties for specifying each of the borders (top, right, bottom, left)
- The <legend> element defines a caption for the <fieldset> element.
BORDER - SHORTHAND PROPERTY
- To shorten the code, it is also possible to specify all the individual border
CSS
properties in one property.
- The border property is a shorthand property for the following individual
CSS
border properties:
- CSS stands for Cascading Style Sheets
 border-width
- CSS describes how HTML elements are to be displayed on screen, paper,
or in other media  border-style (required)
- CSS is used to define styles for your web pages, including the design,  border-color
layout and variations in display for different devices and screen sizes. STYLING LINKS:
THE ELEMENT SELECTOR  Link - a normal, unvisited link
- The element selector selects elements based on the element name.  Visited - a link the user has visited
THE ID SELECTOR  Hover - a link when the user mouse over it
- The id selector uses the id attribute of an HTML element to select a  Active - a link the moment it is clicked
specific element CSS BACKGROUNDS
- To select an element with a specific id, write a hash (#) character, - The CSS background properties are used to define the background effects
followed by the id of the element. for elements.
THREE WAYS TO INSERT CSS CSS background properties:
- External style sheet - background-color - The background-color property specifies the
- Each page must include a reference to the external style sheet file inside background color of an element.
the <link> element. - background-image - The background image property specifies an image
- The <link> element goes inside the <head> section to use as the background of an element. By default, the image is repeated
<head> so it covers the entire element.
<link rel="stylesheet" type="text/css" href="mystyle.css"> - background-repeat - repeated only horizontally (background-repeat:
</head> repeat-x;) : background-repeat: no-repeat;
- Internal style sheet - background-attachment
- An internal style sheet may be used if one single page has a unique style. - background-position- does not disturb the text too much.
- Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
- Inline style CSS MARGIN
- An inline style may be used to apply a unique style for a single element. - used to generate space around elements.
- To use inline styles, add the style attribute to the relevant element. The  margin-top
style attribute can contain any CSS property.  margin-right
 margin-bottom
 margin-left
- Value of Margin:
MULTIPLE STYLE SHEETS  auto - the browser calculates the margin
- If some properties have been defined for the same selector (element) in  length - specifies a margin in px, pt, cm, etc.
different style sheets, the value from the last read style sheet will be used.
 % - specifies a margin in % of the width of the containing
CSS BORDER PROPERTIES
element
- The CSS border properties allow you to specify the style, width, and color
 inherit - specifies that the margin should be inherited from
of an element's border.
the parent element
BORDER STYLE
- The border-style property specifies what kind of border to display.
JAVASCRIPT
- The following values are allowed:
JAVASCRIPT
 dotted - Defines a dotted border
- the programming language that adds interactivity and custom behaviors to
- p.dotted {border-style: dotted;}
our sites. It is a client-side scripting language.
 dashed - Defines a dashed border - It was created by Brendan Eich at Netscape in 1995 and originally named
- p.dashed {border-style: dashed;} “LiveScript.”
 solid - Defines a solid border - a lightweight but incredibly powerful scripting language.
- p.solid {border-style: solid;} - doesn’t need to be run through any form of compiler that interprets our
 double - Defines a double border human readable code into something the browser can understand.
- p.double {border-style: double;} - JavaScript is case-sensitive
 groove - Defines a 3D grooved border. The effect depends on the border- EMBEDDED SCRIPT
color value
 - To embed a script on a page, just add the code as the content of a script  A modification expression
element.
EXTERNAL SCRIPT
- The other method uses the src attribute to point to a script file (with a .js ARGUMENTS
suffix) by its URL. In this case, the script element has no content. - are data that can influence how the function behaves.
SCRIPT PLACEMENT FUNCTIONS
- For most scripts, the end of the document, just before the tag, is the - a bit of code that doesn’t run until it is referenced or called. alert() is a
preferred placement because the browser will be done parsing the function built into our browser.
document and its DOM structure. o Native functions
alert() - push a notification to a user - alert(), confirm(), and prompt() - These functions trigger
confirm() - ask a user to approve or decline an action. browser-level dialog boxes.
prompt() - request the user’s input - Date() - Returns the current date and time.
STATEMENTS - parseInt("123") - This function will, among other things,
- a command that tells the browser what to do. take a string data type containing numbers and turn it into a
COMMENTS: number data type. The string is passed to the function as an
o Single-line comment - // argument.
o Multiple-line comment - /* */ - setTimeout(functionName, 5000) Will execute a function
VARIABLES after a delay. The function is specified in the first argument,
- is like an information container. You give it a name and then assign it a and the delay is specified in milliseconds in the second
value, which can a number, text string, an element in the DOM, or a o Custom functions
function—anything, really.  To create a custom function, we type the function keyword
Variable naming rules: followed by a name for the function, followed by opening and closing
o It must start with a letter or an underscore. parentheses, followed by opening and closing curly brackets.
o It may contain letters, digits, and underscores in any combination. o Arguments - We can “pass arguments” (provide data) to native and
o It may not contain character spaces. As an alternative, use underscores in custom functions in order to apply a function’s logic to different sets of data
place of spaces or close up the space and use camel case instead (for example, at different times.
my_variable or myVariable). o Returning a value - The return keyword inside a function effectively
o It may not contain special characters (! . , / \ + * = etc.). turns that function into a variable with a dynamic value!
DATA TYPES THE BROWSER OBJECT
• Undefined - The simplest of these data types is likely “undefined.” If we declare a  Events - is an action that can be detected with JavaScript, such as when
variable by giving it a name but no value, that variable contains a value of “undefined.” the document loads or when the user clicks on an element or just moves
• Null - Similar to the above, assigning a variable of “null” (again, case-sensitive) her mouse over it.
simply says, “Define this variable, but give it no inherent value. o onload - event handler triggers a script when the document
• Numbers - You can assign variables numeric values. loads
• Strings - Another type of data that can be saved to a variable is a string, which is o onclick and onmouseover - handlers trigger a script when
basically a line of text. Enclosing characters in a set of single or double quotes indicates the user clicks or mouses over an element, respectively.
that it’s a string, as shown here: three common methods for applying event handlers to items within our pages:
• Booleans - We can also assign a variable a “true” or “false” value. This is called a • As an HTML attribute - You can specify the function to be run in an attribute in the
Boolean value, and it is the lynchpin for all manner of advanced logic. Boolean values markup
use the true and false keywords built into JavaScript, so quotation marks are not • As a method attached to the element - This is another somewhat dated approach to
necessary. attaching events, though it does keep things strictly within our scripts. We can also
ARRAY attach functions using helpers already built into JavaScript.
- is a group of multiple values (called members) that can be assigned to a - , the second binding overwrites the first, so when the user clicks inside the browser
single variable. window, only myOtherFunction will run. The reference to myFunction is thrown away.
- The first member is given the index number 0, the second is 1, and so on. • Using addEventListener - this approach allows us to keep our logic within our
scripts
ARITHMETIC OPERATORS and allows us to perform multiple bindings on a single object. The syntax is a bit more
- are used to perform mathematics: verbose.
 + Addition We start by calling the addEventListener method of the target object, and then specify
 - Subtraction the
 * Multiplication event in question and the function to be executed as two arguments.
 / Division
 % Modulus DOM
 ++ Increment - is a programming interface (an API) for HTML and XML pages. It
 - - Decrement provides a structured map of the document, as well as a set of methods to
ASSIGNMENT OPERATORS interface with the elements contained therein. Effectively, it translates our
- are used to assign values to variables. They start with the very simple =, markup into a format that JavaScript (and other languages) can
and move on to +=, −=, and so on. understand.
COMPARISON OPERATORS Accessing DOM nodes:
- are generally used inside a construct such as an if statement where you  By element name document.getElementsByTagName().
need to compare two items. - This method retrieves any element or elements you specify as an
LOGICAL OPERATORS argument.
- JavaScript’s logical operators do not include and and or equivalents to &&  By id attribute value - getElementById()
and ||, and there is no xor operator. - This method returns a single element based on that element’s ID (the value
IF/ELSE STATEMENTS of its id attribute).
- how we get JavaScript to ask itself a true/false question  By class attribute value -
SWITCH STATEMENT  By selector - querySelectorAll
- is useful when one variable or the result of an expression can have - Allows you to access nodes of the DOM based on a CSS-style selector.
multiple values, for each of which you want to perform a different Manipulating DOM nodes:
function. setAttribute() - This method requires two arguments: the attribute to be changed
while Loops and the new value for that attribute.
- while loop first checks the value of an expression and starts executing the  innerHTML - gives us a simple method for accessing and changing the
statements within the loop only if that expression is true. If it is false, text and markup inside an element.
execution skips over to the next JavaScript statement (if any).  style - The DOM also allows you to add, modify, or remove a CSS style
do .. while Loops from an element using the style property. It works similarly to applying a
- is similar to a while loop, except that the test expression is checked only style with the inline style attribute.
after each iteration of the loop. Adding and removing elements :
for Loops  createElement() - This function accepts a single argument: the element to be
- combines the best of all worlds into a single looping construct that allows created. Using this method is a little counterintuitive at first because the new
you to pass three parameters for each statement: element doesn’t appear on the page right away.
 An initialization expression  createTextNode() - If we want to enter text into either an element we’ve created
 A condition expression or an existing on the page. To use it, provide a string of text as an argument,
 and the method creates a DOMfriendly version of that text, ready for inclusion
on the page.
 appendChild() - This method takes a single argument: the node you want to add
to the DOM. You call it on the existing element that will be its parent in the
document structure.
 insertBefore() - inserts an element before another element. It takes two
arguments: the first is the node that gets inserted, and the second is the element
it gets inserted in front of. You also need to know the parent to which the
element will be added.
 replaceChild() - replaces one node with another and takes two arguments. The
first argument is the new child (i.e., the node you want to end up with). The
second is the node that gets replaced by the first.
 removeChild() - The method takes one argument, which is the node you want to
remove. Remember that the DOM thinks in terms of nodes, not just elements,
so the child of an element may be the text (node) it contains, not just other
elements.
PATTERN MATCHING AND REGULAR EXPRESSIONS:
 Regular Expressions -
 Matching through metacharacters – Every regular expression must be enclosed in
slashes. Within these slashes, certain characters have special meanings; they are
calledmetacharacters.
 Fuzzy character matching - “match anything that lies between < and >, even if
there’s nothing.” You will match <>, and so on. But if you don’t want to match
the empty case, <>, you should use + instead of *.
 Grouping through parentheses - The plus sign works here, too, but you need to
group the string 000 so the plus sign matches the whole thing.
 Character classes - . One of the key features supporting fuzzy matching is the
pair of square brackets, []. It matches a single character, like a dot, but inside
the brackets you put a list of things that can match. If any of those characters
appears, the text matches.
 Indicating a range - Inside the brackets, you can use a hyphen (-) to indicate a
range. One very common task is matching a single digit.
 Negation - You can turn the whole character class on its head by placing a caret
(^) after the opening bracket. Here it means, “Match any characters except the
following.”

Using Regular Expressions in JavaScript

- In JavaScript, you will use regular expressions mostly in two methods: test (which
you have already seen) and replace. Whereas test just tells you whether its
argument matches the regular expression, replace takes a second parameter: the
string to replace the text that matches. Like most functions, replace generates a
new string as a return value; it does not change the input.