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


#1

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

$(document).ready(function({fadeIn('slow')};

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.


#2

@thorlindur99,

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>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
       <!-- here you insert your HTML-code -->
     </body>
  </html>

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 )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

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
and
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 )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#3

@thorlindur99,
Now to the problem at hand

When this document is =loaded=

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

the Document Object Model representation
would look like

                html
                 |
           +-----+------+
           |            |
         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
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
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

$(document).ready();

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-{ }
thus

function () {
   //The FUNCTION-BODY
   //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-( )
like

$(document).ready( function () {
   //The FUNCTION-BODY
   //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
    https://api.jquery.com/category/selectors/
  • -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
$('div')

Now they want us to =manipulate= the selected HTML-div-Element
by using jQueries _fadeIn() Method.
http://api.jquery.com/fadein/
and they want you to use an argument "slow"
thus
fadeIn("slow")

Thus the full jQuery-Statement would look like
$('div').fadeIn("slow");

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 () {
   //The FUNCTION-BODY
   //here you place the code which should be executed
   //..your code...with 'jQuery-statements'....
   $('div').fadeIn("slow");
   //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

and

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

Addendum
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