5. Using Functions to Select HTML Elements (Worked But Don't Think It Should Have)


So I got through this with ease but feel like I did something wrong anyway. Here's my code.


I did get an ERROR message which said "Uncaught SyntaxError: Unexpected string" so I'm pretty sure I did something wrong even though I got it.



I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of

<!DOCTYPE html>
          <title> </title>
       <!-- here you insert your HTML-code -->

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

       |            |
     head          body

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
methods ( giving you the functionality to manipulate the Elements )


Now to the problem at hand

When this document is =loaded=

<!DOCTYPE html>
		<title>Fade In!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>

the Document Object Model representation
would look like

           |            |
         head          body
           |            |
    +- - +-+- -+       div
    |    |     |
  title link script

You must realize that on the background
this course also =loads= the jQuery-library 1.7.1

During the load of the HTML-Document
the load-sequence passes several stage's identified by the =setting= of an =event-flag=.

One of the stage-Event-flags is the ready-flag
which can be tracked by using jQueries ready() Method.
If the ready-flag has been =set=, it is safe to =manipulate= DOM Elements

Thus if we use


we are waiting for this document-is-ready flag to be set.

Now the beauty of using this jQuery ready() Method
is that as soon as the document-is-ready flag has been set
jQuery will try to execute any code
which is placed in the parameter-holders-( ) of the jQuery ready() Method.

In our case
we are going to =insert= a so-called anonymous Function
which consists of 3 parts
-1 the function keyword
-2 a set of parameter-holders ( )
-3 a FUNCTION-BODY encapsulated by a pair of curly-brackets-{ }

function () {
   //here you place the code which should be executed
   ..your code...

   //End-of-FUNCTION-BODY indicated with a closing-curly-bracket-}

We have to =insert= this into the ready-parameter-holders-( )

$(document).ready( function () {
   //here you place the code which should be executed
   ..your code...with 'jQuery-statements'....

   //End-of-FUNCTION-BODY indicated with a closing-curly-bracket-}
} );

( Take notice:: at the end you have a closing-curly-bracket-} from the function AND a closing-parentheses-) from the ready() Method )

==== jQuery Statements ===

A jQuery-statement consists of 2 =parts=

  • -1. the jQuery-Selector identified by $( selector )
    and if used will create a =selection= of DOM-Elements
    using the selector as =parent= and include's ALL its descendants
    which are then kept in a so-called jQuery-Selection-Object
  • -2 the jQuery-DOM-Elements-Manipulation part
    where you use jQuery-Methods,
    to manipulate the HTML-Elements which are contained in the jQuery-Selection-Object

In our case they want us to select the HTML-div-Element
which do by using the jQuery-Selector

Now they want us to =manipulate= the selected HTML-div-Element
by using jQueries _fadeIn() Method.
and they want you to use an argument "slow"

Thus the full jQuery-Statement would look like

We want this manipuation to occur
as soon as the document-is-ready flag has been set,
so we end up with

$(document).ready( function () {
   //here you place the code which should be executed
   //..your code...with 'jQuery-statements'....
   //End-of-FUNCTION-BODY indicated with a closing-curly-bracket-}
} );

which you should place into your script.js =file=....

== what is cooking ==

You have defined a HTML-Document which has 1 HTML-div-Element.
In your stylesheet.css =file= you have given this HTML-div-Element
some css-properties
by using

div {
    height: 100px;
    width: 100px;
    background-color: #F38630;
    display: none;   <=== the =opacity= is zero, NOT visible
    border-radius: 5px;

and with jQueries fadeIn() Method you will set the opacity to 1 ( thus visible )

== important to know ==

If you Reset your Browser
you will =re-load= your HTML-Document.

++++ reset of session *****************
under certain circumstances you can shoot your Browser in an
inconsistent state.

Therefor it is of an advantage to know that you have 2 reset facilities:

One is the use of the F5-key which does a refresh Browser


Two, select&copy your code
Then use the Reset Code button of the course-window,
then paste your code back in.

General Notes:
Always refresh the browser after making corrections:
CTRL f5 ( if on Windows or Linux)
CMD r ( if on a MAC).
CTRL 0 to reset browser zoom