This forum is now read-only. Please use our new forums! Go to forums
How come in jQuery some commands require a . and some don't, or a , and not a;?
In the code below,after left=’0px’} there is a comma before 200, why isn’t it a semicolon? Also, how come aftter animate there are ( and{, what does it mean? Lastly, how come $(‘body’) part doesn’t requre a . (period) before the single quotes? I would just like to make more sense of the language so that it becomes intuitive instead of just pure memorization. Thanks!
var main=function() { $(‘.icon-menu’);.click(function(); $(‘.menu’).animate({ left:’0px’ },200); $(‘body’).animate({ left:’285px’},200);
});
$(document).ready(main);
Answer 55b58ba076b8fea5650000fe
Your question is about the syntax. If you would have look at http://www.codecademy.com/guidance/choose you will see that you jumped into the deep…
google search == the Book == jquery [your question] site:developer.mozilla.org CSS [your question] site:developer.mozilla.org javascript [your question] site:developer.mozilla.org [your question] site:jquery.com [your question] site:getbootstrap.com
== discussions / opinions == jquery [your question] site:stackoverflow.com CSS [your question] site:stackoverflow.com javascript [your question] site:stackoverflow.com
== guidance == www.crockford.com [your question] site:crockford.com
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
Answer 55b58bd876b8fee3cb00009a
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>
</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
Answer 55b58c43e39efea98a00026c
If your HTML-page is loaded into memory by the Browser the memory-layout will be build using the rules, as defined in the Document Object Model in short the DOM
The DOM representation of the index.html file would look like:
html
|
|------+---------|
| |
head body
| |
|----+----| |----+-----------|
| | | | |
link link link 10div(.menu) 27div(.jumbotron)
| |
|--------------+----| 29div(.icon-menu)
| | |
13div(.icon-close) 18ul 30i (.fa
| | | and .fa-bars)
img |-----|----+|-----| text
| | | | node
19li 20li 21li 22li
| | | |
a a a a
| | | |
text text text text
node node node node
Now if you look at the DOM representation the body-Tag is parent to a 10div Element’s Tree ( with class-attribute with class-name “menu” ) and a 27div Element’s Tree ( with class-attr. with class-name “jumbotron” set )
Now if you look in the style.css file, with which you manage the Display of your Elements, you will find that the body object has the property left: 0; being set ( the body-Tree has a start-Display at position left-0 )
but the .menu object has the property left: -285px; being set and therefor the 10div-Tree is outside of Display.
In your ‘app.js’ file you are CREATING a VARIABLE main to which you assign a so-called anonymous Function and in the FUNCTION-BODY of this anonymous Function we are attaching our click Event-handlers to the HTML-Elements which are -1 carrying the “icon-menu” class-name as class-attribute -2 carrying the “icon-close” class-name as class-attribute ( during the assignment the function is NOT executed )
You will have to add the code-line $(document).ready( main ); which will result in the =main= Function to be executed AFTER the Browser has set the ready Event-flag.
Reference::
google search class site:jquery.com https://api.jquery.com/category/selectors/ http://api.jquery.com/class-selector/ https://api.jquery.com/element-selector/
what is CSS explained site:developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Answer 55b59317e39efee13d000510
As your index.html file is loaded by your Browser and comes accross the HTML-code-line
<script src="app.js"></script>
your Browser will load this app.js file with its Browser specific JavaScript-interpreter.
With
var main=function() {
//Begin of _anonymous_ FUNCTION-BODY
// your jQuery-code
//End of _anonymous_ FUNCTION-BODY
};
$(document).ready(main);
you will create a variable =main= to which you assign a so-called anonymous function. The function code is loaded but NOT executed….
The execution of this function
is done as soon as the document
_( which is the index.html-file )
has its is loaded & ready Eventflag set.
Answer 55b5a4a693767683e4000239
As the =main= function is executed… you will use jQuery statement’s… you use a jQuery-Selector $(‘.icon-menu’) with which you are selecting a HTML-Element which is carrying the class attribute with the class-name ‘icon-menu’ ( look at the div-defintion in line-29 of the index.html file )
To this HTML-Element yo are attaching a so-called =click= Eventhandler with the code-line
$('.icon-menu').click();
( =click= is the method and the parenthesis-( ) are parameter-holders ) As you want something to happen, when the ‘icon-menu’ is =click=ed upon…. you are placing an anonymous function as a parameter within the =click= parenthesis.
var main=function() {
//Begin of _anonymous_ FUNCTION-BODY
// your jQuery-code
$('.icon-menu').click( function() {
//Begin of -anonymous- FUNCTION-BODY
//your animation-code....
//End of -anonymous- FUNCTION-BODY
});
//End of _anonymous_ FUNCTION-BODY
};
$(document).ready(main);
Answer 55b5a575d3292f2edf000462
In the end you should have the structure
++++++++++ structure P u s h M e n u function The structure of your =main= Function should look like….
var main= function() {
$('.icon-menu').click( function() {
//Your animation
});
$('.icon-close').click( function() {
//Your animation
});
};
$(document).ready(main);
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency