Code 201: Class 04 - HTML Links, CSS Layout, JS Functions

---

HTML Text 74-93

Links

• Created using <a></a> tags
• <a href="http://www.imdb.com">IMDB</a>
  • <a href="http://www.imdb.com"> opening link tag
  • "http://www.imdb.com" page that link takes you to
  • IMDB text the user clicks on
  • </a> closing link tag

URL Uniform Resource Locator

• Absolute URL url that would be typed into a browser to bring up the site
• Relative URL url that links internally to another page on the site which does not require as long of an address

Email Links

• mailto: link that starts up email program and pre-addresses the email
  • <a href="mailto:john@example.org">Email John</a> clicking on john will open an email addressed to john

Opening Link in New Window

• <a href = "http://www.idb.com" target="_blank">IMDB</a> clicking on IMDB will open it in a new window

Linking to other parts of the same page

• All elements should be given a unique id id="example"
• <a href="#example">Link to Example part of page</a> clicking the link will take the user to the element with id example

Linking to specific part of another page

• <a href="http://www.website.com#id">Website at location with element id</a> will take user to website at the location of the element with id

HTML Text 358-404

Controlling the Position of Elements

• Normal Flow block level elements stack on top of one another
• Relative Positioning changes the location of the element in question relative to its normal position, does not effect those around it
• Absolute Positioning positions the element in relation to its containing element, taken out of normal flow and will move as users scroll
• Fixed Positioning positions an element in relation to the browser window, do not impact the position of near by elements, does not move with scroll
• FLoating Elements removes from normal flow, allows other elements to flow around it

Z-index property determines which box appears on top when out of normal flow and overlapping

Fixed Width Layouts

• Designs do not change as the browser window size is changed
  • Typically defined in terms of pixel widths and heights

Liquid Layouts

• Stretch and contract to fit the browser window
  • Tend to use percentages to define dimensions
  • Better adapt to varying screen sizes

Layout Grid

• Method used to make multiple pages consistent

CSS Frameworks provide code for common tasks like creating layout grids

• www.960.gs

JS Text 86-99

Functions allow programmer to group a series of statements together to perform a specific task

• Calling the function the act of running the function, when and where it is desired
• {code block} Code blocks contain a series of related steps contained between two curly braces}
• Parameters pieces of information passed to a function
• Return Value the output of a function

Declaring a Function give it a name and then write its statements needed to achieve its tasks inside the curly braces

• Function keyword that declares a function
• Name *name the function (use camelCase) followed by ()
• Statements *perform the tasks of the function between the {}
• Example:

function sayHello() {
    document.write('Hello!');
}

• function = Function Keyword
• sayHello() = Function Name
• {document.write('Hello!');} = Code Block

Calling a Function can execute all of the statements between a functions curly braces with just one line of code in the location that programmer desires

• Use the function name followed by ();
• Example: sayHello();

Declaring functions that need information give a function information by providing parameters

• Parameters act like variables inside the equation, placed inside the () after the function name

function getArea(width,height) {
    return width * height;
}

• width, height = Parameters used like variables inside a function

Calling a Function that needs information specify the values it should use in the () following the name, these values are called arguments

• Example of arguments as values = getArea(3,5);
• Example of arguments as variables =

wallWidth = 3;
wallHeight = 5;
getArea(wallWidth,wallHeight);

Getting a single value out of a function “returning a result”

function calculateArea(width, height) {
    var area = width * height;
    return area;
}
var wallOne = calculateArea(3,5);
var wallTwo = calculateArea(8,5);

• wallOne variable now holds 15
• wallTwo variable now holds 40

Note: when the interpreter hits the return command it goes back to the statement that called it, subsiqent statements in the function would not be processed

Variable Scope location of where a variable is declared will effect where it can be used

• Variable declared inside of a function, it is only valid within that function
• Local variables those declared inside of a function, only work in the function
• Global Variables are stored in memory the entire time the page is open so it may be used across the whole code

6 Reasons for Pair Programming

• Greater Efficiency research shows that pair programming may take slightly longer, but will produce higher quality code with less debugging and implementation time
• Engaged Collaboration pair programmers tend to be more focused and are able to assist each other with less outside assistance required
• Learning from Fellow Students the less experienced partner gains knowledge and the other learns through teaching
• Social Skills pair programming forces good communication and team work
• Job Interview Readiness simulates a situation that is often experienced during industry interviews
• Work Environment Readiness simulates the work environment

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down