Skip to content

Commit d10f8ff

Browse files
ajhyndmanTanya Butenko
ajhyndman
authored and
Tanya Butenko
committed
Suggestions for Level 3 (#5)
1 parent fad39c6 commit d10f8ff

File tree

1 file changed

+168
-80
lines changed

1 file changed

+168
-80
lines changed

‎js/level3.js‎

Lines changed: 168 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,119 @@
11
// Level 3
22

33
/*
4-
WooHoo, you got so far on your first day! Great! But we still have more things for you.
5-
First of all, go to index.html file and replace our script from level2.js to current
6-
file - level3.js.
7-
PS: if you want few js files to be used simply add more scripts with those files.
4+
Introduction
5+
============
6+
7+
WooHoo, you got so far on your first day! Great!
8+
9+
But we still have more things for you. First of all, open index.html, and
10+
replace our script from level2.js to our current file — level3.js.
11+
12+
P.S. If you want to use multiple js files simultaneously, simply add more
13+
script tags.
814
*/
915

1016
/*
11-
Here we will talk a bit more about HTML, CSS and how JS can interact with them.
12-
So HTML - stands for Hyper Text Markup Language. It is a structure of the elements
13-
on the page.
14-
15-
HTML:
16-
As you noticed it is divided on elements that looks like that:
17-
<header></header>, <p></p> etc - it is tags, each element on the page has opening
18-
and closing tag (NOTE: some tags are self-closing like <img>). Whole html file is wrapped
19-
in tag <html>, which contains of <head> and <body> tags. In <head> we keep different
20-
meta information, title and link to css files. <body> contains our actual content.
21-
Tags has a set of names which you can find here http://htmldog.com/references/html/tags/
22-
23-
Any tag also can have different attributes (<div class="settings"></div> - tag div
24-
has a attribute class, that has name = 'settings').
25-
26-
CSS:
27-
Stands for Cascading Style Sheets. CSS describes how HTML elements are to be
28-
displayed on screen. As you can see in css file when we need to target any element
29-
we can simply refer to the tag itself (footer{color: white;}), or to any attribute (class
30-
via '.settings', id via '#logo' etc). The list of css properties is huge, you can check
31-
on it here https://www.w3.org/TR/CSS21/propidx.html but don't worry, you don't need to
32-
remember it all.
33-
PS: difference between id and class is that tag with specific 'id' should be unique on
34-
the page, but many tags can have same class within the same page. Use 'id' only if
35-
you really need it!!
17+
Lets talk a little more about HTML, CSS, and how we can interact with them
18+
in JavaScript.
19+
20+
21+
Hypertext Markup Language (HTML)
22+
--------------------------------
23+
As you noticed, HTML is divided on elements that looks like this:
24+
25+
<header></header>
26+
<p></p>
27+
etc
28+
29+
We call these "tags". Each element on the page has an opening and closing
30+
tag. (NOTE: some tags are self-closing like <img>).
31+
32+
The outermost tag in every HTML file is <html>.
33+
34+
Inside the <html> tag you will find a <head> and <body> tag.
35+
36+
In <head> we keep meta information, the page title and links to css files.
37+
<body> contains our actual content.
38+
39+
For a full list of HTML tags, you can refer to this listing:
40+
http://htmldog.com/references/html/tags/
41+
42+
HTML tags may contain attributes:
43+
<div class="settings"></div>
44+
45+
This div has an attribute named class, that has value: 'settings'.
46+
47+
48+
Cascading Style Sheets (CSS)
49+
----------------------------
50+
CSS describes how HTML elements look.
51+
52+
CSS files are comprised of 'declaration blocks'. Each declaration block is
53+
composed of a selector and a set of visual style rules. A declaration looks
54+
like this:
55+
56+
[selector] {
57+
style-name: value;
58+
style-name: value;
59+
style-name: value;
60+
}
61+
62+
Selectors specify which elements the visual styles are applied to.
63+
64+
The most basic selectors refer to elements by their tag-name. They look
65+
like this:
66+
67+
body {
68+
background-color: white;
69+
}
70+
71+
Selectors can also refer to elements by their class attribute like this:
72+
73+
.settings {
74+
margin: 0;
75+
}
76+
77+
or IDs, like this:
78+
79+
#logo {
80+
text-align: center;
81+
}
82+
83+
The list of css properties is huge, you can read more here, if you're
84+
interested:
85+
https://www.w3.org/TR/CSS21/propidx.html
86+
87+
Don't worry, you don't need to remember all of this immediately!
3688
*/
3789

3890
/*
39-
Phew, lot's of new things. But let's come back to javaScript and see how we can interact
40-
with html.
91+
Phew, lots of new things. Let's come back to javaScript and see how we can
92+
interact with HTML.
4193
*/
4294

4395

4496
/*
45-
Accessing page objects.
46-
DOM - Stands for Document Object Model. It defines the logical structure of documents
47-
and the way a document is accessed and manipulated. So let's get things from the page
48-
and play around.
49-
To find and get nods(page elements) we can use querySelector one of the functions of
50-
JavaScript (in old browsers it might not work, in this case getElementById,
51-
getElementsByTagsName etc should be used).
52-
Let's get our twitter from the page.
97+
Accessing Elements
98+
==================
99+
100+
Document Object Model (DOM)
101+
---------------------------
102+
The DOM is the javascript representation of the active HTML file. The DOM
103+
is available under a special global variable called 'document'. We can get
104+
specific nodes (page elements) with the DOM method: 'querySelector'.
105+
106+
Let's get our twitter link from the page.
107+
53108
Example:
109+
54110
var ourTwitter = document.querySelector('.twitter');
55-
//we can store it in variable so we can use it after
111+
// we can store page elements in variables, just like any other value!
56112
*/
57113

58-
//TODO: Now it's your turn - get the h1 tag from the page and store it into variable named
59-
//ourTitle. console.log it and see what you will get.
114+
// TODO: Now it's your turn — get the h1 tag from the page and store it into a
115+
// variable named ourTitle.
116+
// console.log it and see what you get!
60117

61118

62119

@@ -68,26 +125,32 @@
68125

69126

70127
/*
71-
Getting a set of elements
72-
We also can get all elements with the same tag. So in the footer we have <ul>(unordered list)
73-
with 3 <li>(lists) inside. Let's get all of them
74-
Example:
75-
var mediaLinks = document.querySelectorAll('li'); //will get all <li> from the page
128+
Getting Similar Elements
129+
========================
130+
131+
We also can get all elements with the same tag. In our footer, we have an
132+
unordered list (<ul>), with three list items (<li>) inside. Let's get all
133+
of them.
134+
135+
Example:
136+
137+
// will get all <li> from the page
138+
var mediaLinks = document.querySelectorAll('li');
76139
*/
77140

78141

79-
//TODO: get all <li> elements from the page in variable named mediaLinks
142+
// TODO: Get all <li> elements from the page in variable named mediaLinks.
80143

81144

82145

83146

84-
//TODO: now console.log mediaLinks.length
147+
// TODO: Now console.log mediaLinks.length
85148

86149

87150

88151

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

92155

93156

@@ -98,15 +161,17 @@
98161

99162

100163
/*
101-
Ok, so far so good. But what if we need only content of our 'h1' tag? We have
102-
another property for it - .innerHTML
164+
Ok, so far so good. But what if we want only the text from our 'h1' tag?
165+
Page elements have another property for this: '.textContent'
166+
103167
Example:
104-
ourTwitter.innerHTML;
105-
//we will get text '@NodeGirlsSydney'
168+
169+
ourTwitter.textContent;
170+
// we will get text 'Twitter: @NodeGirlsSydney @NodeGirlsMelb'
106171
*/
107172

108173

109-
//TODO: get the content of 'h1' element and console.log it
174+
// TODO: get the content of 'h1' element and console.log it
110175

111176

112177

@@ -118,49 +183,65 @@
118183

119184

120185
/*
121-
Change content
122-
we can change the content of the tags using the same .innerHTML property
186+
Editing Page Content
187+
====================
188+
189+
We can change the content of the tags using the same .textContent property.
190+
123191
Example:
124-
ourTwitter.innerHTML = '@ButenkoMe';
125-
console.log(ourTwitter.innerHTML);
126-
//guess what we will see on the page and in console?
192+
193+
ourTwitter.textContent = '@ButenkoMe';
194+
console.log(ourTwitter.textContent);
195+
// guess what we will see on the page and in console?
127196
*/
128197

129198

130-
//TODO: change content of the 'h1' with anything you like
199+
// TODO: Make up a new title! Change the content of our 'h1' to anything you
200+
// like.
131201

132202

133203

134204

135205

136206
/*
137-
Changing properties.
138-
We also can change and set attributes to our elements.
139-
Example:
140-
var ourTwitter = document.querySelector('.twitter');
141-
ourTwitter.id = "surprise";
207+
Editing Attributes
208+
==================
209+
210+
We can also change and set attributes on our elements.
211+
212+
Example:
213+
214+
var ourTwitter = document.querySelector('.twitter');
215+
ourTwitter.id = "surprise";
142216
*/
143217

144218

145-
//TODO: replace the value of 'src' attribute for our img tag with "img/kittens.jpeg"
219+
// TODO: Update the value of the 'src' attribute of our img tag to
220+
// "img/kittens.jpeg"
146221

147222

148223

149224

150225

151226
/*
152-
Accessing and changing styles
153-
So, let's do some css changes. We can do it with help of '.style' property and
154-
giving the css property just like we do in css file, the only change here is is - if is css
155-
property name has '-' in the name (like font-size etc) then dash will be deleted and
156-
next word starts with capital (fontSize) - this way of naming is called the CamelCase :)
227+
Editing Styles
228+
==============
229+
230+
Let's change some styles. Page elements have a '.style' property. We can
231+
assign styles to the style property using the same names as in CSS files.
232+
233+
(If a CSS property name has '-' in the name — like font-size — then the
234+
hyphen will be deleted and the next word starts with a capital instead —
235+
fontSize. This pattern of naming is called CamelCase.)
236+
157237
Example:
238+
158239
var ourTwitter = document.querySelector('.twitter');
159240
ourTwitter.style.backgroundColor = 'white';
160241
*/
161242

162243

163-
//TODO: get any element on the page and change some styles for it
244+
// TODO: get any element on the page and change some styles for it
164245

165246

166247

@@ -169,12 +250,17 @@
169250

170251

171252
/*
172-
Creating new nodes (elements)
253+
Creating New Nodes (Elements)
254+
=============================
255+
173256
The document object also provides ways to create nodes from scratch:
257+
174258
document.createElement(tagName); --> create the element
175259
document.createTextNode(text); --> what text it should contain
176-
document.appendChild(); --> append it to the document
260+
document.appendChild(node); --> append it to the document
261+
177262
Example:
263+
178264
var pageNode = document.querySelector('body')[0];
179265
var newParagraph = document.createElement('p');
180266
var paragraphText = document.createTextNode('Squee!');
@@ -183,9 +269,11 @@
183269
*/
184270

185271

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

190278

191279

@@ -205,7 +293,7 @@
205293

206294

207295
////////////////////////////////////////////////////////////////////////
208-
//Congratulations! You have finished Part 3 of JavaScript Basics! //
296+
// Congratulations! You have finished Part 3 of JavaScript Basics! //
209297
// Stand up, stretch your legs, celebrate your achievement. //
210298
// I believe you deserve on some sweets today! //
211299
////////////////////////////////////////////////////////////////////////

0 commit comments

Comments
 (0)