diff --git a/js/level3.js b/js/level3.js index d779541..af3feed 100644 --- a/js/level3.js +++ b/js/level3.js @@ -1,62 +1,119 @@ // Level 3 /* - WooHoo, you got so far on your first day! Great! But we still have more things for you. - First of all, go to index.html file and replace our script from level2.js to current - file - level3.js. - PS: if you want few js files to be used simply add more scripts with those files. + Introduction + ============ + + WooHoo, you got so far on your first day! Great! + + But we still have more things for you. First of all, open index.html, and + replace our script from level2.js to our current file — level3.js. + + P.S. If you want to use multiple js files simultaneously, simply add more + script tags. */ /* - Here we will talk a bit more about HTML, CSS and how JS can interact with them. - So HTML - stands for Hyper Text Markup Language. It is a structure of the elements - on the page. - - HTML: - As you noticed it is divided on elements that looks like that: -
,

etc - it is tags, each element on the page has opening - and closing tag (NOTE: some tags are self-closing like ). Whole html file is wrapped - in tag , which contains of and tags. In we keep different - meta information, title and link to css files. contains our actual content. - Tags has a set of names which you can find here http://htmldog.com/references/html/tags/ - - Any tag also can have different attributes (
- tag div - has a attribute class, that has name = 'settings'). - - CSS: - Stands for Cascading Style Sheets. CSS describes how HTML elements are to be - displayed on screen. As you can see in css file when we need to target any element - we can simply refer to the tag itself (footer{color: white;}), or to any attribute (class - via '.settings', id via '#logo' etc). The list of css properties is huge, you can check - on it here https://www.w3.org/TR/CSS21/propidx.html but don't worry, you don't need to - remember it all. - PS: difference between id and class is that tag with specific 'id' should be unique on - the page, but many tags can have same class within the same page. Use 'id' only if - you really need it!! + Lets talk a little more about HTML, CSS, and how we can interact with them + in JavaScript. + + + Hypertext Markup Language (HTML) + -------------------------------- + As you noticed, HTML is divided on elements that looks like this: + +
+

+ etc + + We call these "tags". Each element on the page has an opening and closing + tag. (NOTE: some tags are self-closing like ). + + The outermost tag in every HTML file is . + + Inside the tag you will find a and tag. + + In we keep meta information, the page title and links to css files. + contains our actual content. + + For a full list of HTML tags, you can refer to this listing: + http://htmldog.com/references/html/tags/ + + HTML tags may contain attributes: +
+ + This div has an attribute named class, that has value: 'settings'. + + + Cascading Style Sheets (CSS) + ---------------------------- + CSS describes how HTML elements look. + + CSS files are comprised of 'declaration blocks'. Each declaration block is + composed of a selector and a set of visual style rules. A declaration looks + like this: + + [selector] { + style-name: value; + style-name: value; + style-name: value; + } + + Selectors specify which elements the visual styles are applied to. + + The most basic selectors refer to elements by their tag-name. They look + like this: + + body { + background-color: white; + } + + Selectors can also refer to elements by their class attribute like this: + + .settings { + margin: 0; + } + + or IDs, like this: + + #logo { + text-align: center; + } + + The list of css properties is huge, you can read more here, if you're + interested: + https://www.w3.org/TR/CSS21/propidx.html + + Don't worry, you don't need to remember all of this immediately! */ /* - Phew, lot's of new things. But let's come back to javaScript and see how we can interact - with html. + Phew, lots of new things. Let's come back to javaScript and see how we can + interact with HTML. */ /* - Accessing page objects. - DOM - Stands for Document Object Model. It defines the logical structure of documents - and the way a document is accessed and manipulated. So let's get things from the page - and play around. - To find and get nods(page elements) we can use querySelector one of the functions of - JavaScript (in old browsers it might not work, in this case getElementById, - getElementsByTagsName etc should be used). - Let's get our twitter from the page. + Accessing Elements + ================== + + Document Object Model (DOM) + --------------------------- + The DOM is the javascript representation of the active HTML file. The DOM + is available under a special global variable called 'document'. We can get + specific nodes (page elements) with the DOM method: 'querySelector'. + + Let's get our twitter link from the page. + Example: + var ourTwitter = document.querySelector('.twitter'); - //we can store it in variable so we can use it after + // we can store page elements in variables, just like any other value! */ -//TODO: Now it's your turn - get the h1 tag from the page and store it into variable named -//ourTitle. console.log it and see what you will get. +// TODO: Now it's your turn — get the h1 tag from the page and store it into a +// variable named ourTitle. +// console.log it and see what you get! @@ -68,26 +125,32 @@ /* - Getting a set of elements - We also can get all elements with the same tag. So in the footer we have