Skip to content

Commit

Permalink
Suggestions for Level 3 (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajhyndman @ButenkoT
ajhyndman authored and ButenkoT committed Nov 4, 2016
1 parent fad39c6 commit d10f8ff
Showing 1 changed file with 168 additions and 80 deletions.
248 changes: 168 additions & 80 deletions js/level3.js
View file
Original file line number Diff line number Diff line change
@@ -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:
<header></header>, <p></p> etc - it is tags, each element on the page has opening
and closing tag (NOTE: some tags are self-closing like <img>). Whole html file is wrapped
in tag <html>, which contains of <head> and <body> tags. In <head> we keep different
meta information, title and link to css files. <body> 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 (<div class="settings"></div> - 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:
<header></header>
<p></p>
etc
We call these "tags". Each element on the page has an opening and closing
tag. (NOTE: some tags are self-closing like <img>).
The outermost tag in every HTML file is <html>.
Inside the <html> tag you will find a <head> and <body> tag.
In <head> we keep meta information, the page title and links to css files.
<body> 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:
<div class="settings"></div>
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!



Expand All @@ -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 <ul>(unordered list)
with 3 <li>(lists) inside. Let's get all of them
Example:
var mediaLinks = document.querySelectorAll('li'); //will get all <li> from the page
Getting Similar Elements
========================
We also can get all elements with the same tag. In our footer, we have an
unordered list (<ul>), with three list items (<li>) inside. Let's get all
of them.
Example:
// will get all <li> from the page
var mediaLinks = document.querySelectorAll('li');
*/


//TODO: get all <li> elements from the page in variable named mediaLinks
// TODO: Get all <li> elements from the page in variable named mediaLinks.




//TODO: now console.log mediaLinks.length
// TODO: Now console.log mediaLinks.length




//TODO: do you still remember arrays that we had in previous sections? Using this knowledge
//iterate through whole meadiaLinks items and print them out.
// TODO: Do you remember loops from level 2? Using this knowledge, iterate
// through each mediaLinks item and console.log it.



Expand All @@ -98,15 +161,17 @@


/*
Ok, so far so good. But what if we need only content of our 'h1' tag? We have
another property for it - .innerHTML
Ok, so far so good. But what if we want only the text from our 'h1' tag?
Page elements have another property for this: '.textContent'
Example:
ourTwitter.innerHTML;
//we will get text '@NodeGirlsSydney'
ourTwitter.textContent;
// we will get text 'Twitter: @NodeGirlsSydney @NodeGirlsMelb'
*/


//TODO: get the content of 'h1' element and console.log it
// TODO: get the content of 'h1' element and console.log it



Expand All @@ -118,49 +183,65 @@


/*
Change content
we can change the content of the tags using the same .innerHTML property
Editing Page Content
====================
We can change the content of the tags using the same .textContent property.
Example:
ourTwitter.innerHTML = '@ButenkoMe';
console.log(ourTwitter.innerHTML);
//guess what we will see on the page and in console?
ourTwitter.textContent = '@ButenkoMe';
console.log(ourTwitter.textContent);
// guess what we will see on the page and in console?
*/


//TODO: change content of the 'h1' with anything you like
// TODO: Make up a new title! Change the content of our 'h1' to anything you
// like.





/*
Changing properties.
We also can change and set attributes to our elements.
Example:
var ourTwitter = document.querySelector('.twitter');
ourTwitter.id = "surprise";
Editing Attributes
==================
We can also change and set attributes on our elements.
Example:
var ourTwitter = document.querySelector('.twitter');
ourTwitter.id = "surprise";
*/


//TODO: replace the value of 'src' attribute for our img tag with "img/kittens.jpeg"
// TODO: Update the value of the 'src' attribute of our img tag to
// "img/kittens.jpeg"





/*
Accessing and changing styles
So, let's do some css changes. We can do it with help of '.style' property and
giving the css property just like we do in css file, the only change here is is - if is css
property name has '-' in the name (like font-size etc) then dash will be deleted and
next word starts with capital (fontSize) - this way of naming is called the CamelCase :)
Editing Styles
==============
Let's change some styles. Page elements have a '.style' property. We can
assign styles to the style property using the same names as in CSS files.
(If a CSS property name has '-' in the name — like font-size — then the
hyphen will be deleted and the next word starts with a capital instead —
fontSize. This pattern of naming is called CamelCase.)
Example:
var ourTwitter = document.querySelector('.twitter');
ourTwitter.style.backgroundColor = 'white';
*/


//TODO: get any element on the page and change some styles for it
// TODO: get any element on the page and change some styles for it



Expand All @@ -169,12 +250,17 @@


/*
Creating new nodes (elements)
Creating New Nodes (Elements)
=============================
The document object also provides ways to create nodes from scratch:
document.createElement(tagName); --> create the element
document.createTextNode(text); --> what text it should contain
document.appendChild(); --> append it to the document
document.appendChild(node); --> append it to the document
Example:
var pageNode = document.querySelector('body')[0];
var newParagraph = document.createElement('p');
var paragraphText = document.createTextNode('Squee!');
Expand All @@ -183,9 +269,11 @@
*/


//TODO: Well, do you still have kittens on your screen? I like both logo and kittens.
//Let's create a new image with source logo and put it into header.
//PS: you also can give styles to the new node that you create.
// TODO: Well, do you still have kittens on your screen? I like both logo and
// kittens. Let's create a new image that sources our original logo file, and
// put it into header.
//
// P.S. You also can give styles to the new node that you create.



Expand All @@ -205,7 +293,7 @@


////////////////////////////////////////////////////////////////////////
//Congratulations! You have finished Part 3 of JavaScript Basics! //
// Congratulations! You have finished Part 3 of JavaScript Basics! //
// Stand up, stretch your legs, celebrate your achievement. //
// I believe you deserve on some sweets today! //
////////////////////////////////////////////////////////////////////////
Expand Down

0 comments on commit d10f8ff

Please sign in to comment.