-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjavascript.html
245 lines (240 loc) · 15.3 KB
/
javascript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#intro">JavaScript Intro</a></li>
<li><a href="#dom">The Dom</a></li>
<li><a href="#jquery">jQuery</a></li>
<li><a href="#selectors">CSS Selectors</a></li>
<li><a href="#script">Script Tag</a></li>
<li><a href="#manipulate">Manipulating the DOM</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#eventhandling">Handling Events</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="intro">An introduction to JavaScript</h1>
<p>
Okay - we now have a pretty good idea of how to build a website. We know that HTML is for the content and structure and CSS makes our HTML look pretty. But our sites don't do very much at the moment, there is no interaction. Enter JavaScript.
</p>
<p>
Unlike HTML and CSS that are markup languages, JavaScript is a fully fledged programming language. This means that it can do stuff - like perform calculations and handle behaviour.
</p>
<p>
In this session we're going to look at how we can use JavaScript to manipulate something called the Document Object Model or DOM.
</p>
<p>
To demonstrate the JavaScript is a full programming language, let's quickly do some maths with it!
</p>
<tasks>
<item title="Open Chrome's Developer Tools"></item>
<item title="Open the Console tab"></item>
<item title="Type 32 * 16"></item>
<item title="Type 2 + 9 * 3"></item>
<item title="Type 3 / 0"></item>
<item title="'Your name'.length"></item>
</tasks>
<h2 id="dom">Manipulating the DOM</h2>
<p>
The DOM (Document Object Model) is the browsers internal representation of your HTML. When the browser loads the your page, it builds up a tree like representation of your HTML.
</p>
<img src="images/dom.jpg">
<p>
At the top of the tree is the opening <code><html></code> tag. This tag has two children, <code><head></code> and <code><body></code>
</p>
<p>
The body tag then contains all of the HTML elements that are displayed on your webpage.
</p>
<p>
It is our job to dynamically interact with these elements. But before we can interact with them we must know how to select them.
</p>
<h2 id="jquery">Introducing jQuery $</h2>
<p>
jQuery is a JavaScript library written on top of old school JavaScript. It makes common web development tasks much easier. It also happens to be much easier to learn. This doesn't mean it's not a proper tool though - jQuery is used on 50% of all websites!
</p>
<p>
We'll use jQuery to select our elements, and then manipulate them.
</p>
<h3>Adding jQuery to our Site</h3>
<tasks>
<item title="Open your shopping website in Sublime Text"></item>
<item title="Go to the jQuery website"><a href="http://jquery.com">jQuery.com</a></item>
<item title="Select Download jQuery"></item>
<item title="Scroll down to 'Using jQuery with a CDN'"></item>
<item title="Copy the first <script> tag"></item>
<item title="Paste this script tag above the closing /head tag"></item>
<item title="Refresh your page in Chrome"></item>
</tasks>
<p>
You'll now have jQuery on your site, so we should be able to test it out.
</p>
<h2 id="selectors">jQuery uses CSS selectors</h2>
<p>
jQuery uses CSS selectors to allow us to access elements of the DOM. Much like how CSS allows us to style things using these selectors, jQuery allows us to manipulate things.
</p>
<p>
Everything in jQuery starts by selecting elements, and to select elements you use the following syntax:
</p>
<pre>
$("h1")
$("p")
$("#square")
</pre>
<p>
So everything in jQuery starts with the <code>$</code> symbol. Then you open a pair of parenthesis and in quotes enter your CSS selector.
</p>
<tasks>
<item title="Open your index.html shopping site in Chrome"></item>
<item title="Open Developer Tools"></item>
<item title="Select the Console tab"></item>
<item title="type $('h1') and hit enter"></item>
<item title="type $('p') and hit enter"></item>
<item title="type $('.row') and hit enter"></item>
<item title="type $('.jumbotron') and hit enter"></item>
</tasks>
<h2 id="script">The Script Tag</h2>
<p>
Okay - but I want to run JavaScript on my site permanently, not through the console!
</p>
<p>
Like CSS's <code><style></code> tag, JavaScript has its own tag too. All JavaScript code should be placed between a <code><script>...</script></code> set of tags.
</p>
<p>
Unlike the <code><style></code> tag, the <code><script></code> tag doesn't live in the head, rather it should be placed above the <code></body></code> tag.
</p>
<tasks>
<item title="Open your index.html file in Sublime"></item>
<item title="Add a <script></script> pair of tags above the </body>"></item>
<item title="Within these tags, add an alert('Hello World')"></item>
<item title="Refresh your site in Chrome"></item>
<item title="Ensure you have a alert box popping up"></item>
</tasks>
<h2 id="manipulate">Doing something once we've selected elements</h2>
<p>
So far we haven't done anything with our selected elements, that's going to change now.
</p>
<p>
jQuery offers us a whole host of manipulation methods that are all called the same way. Here are a few of them.
</p>
<pre>
$("h1").hide()
$("h1").show()
$("h1").fadeOut()
$("h1").fadeIn()
$("h1").text("New text here")
$("h1").slideUp()
$("h1").slideDown()
$("h1").css("css-property", "value")
</pre>
<tasks>
<item title="Have a play with some of the above elements"> Put your code inside your new <code><script></code> tag</item>
<item title="Change the CSS selector to change different items"></item>
<item title="Run more than one command"> Put different commands on different lines</item>
<item title="Refresh your page in Chrome to see the effects"></item>
</tasks>
<h2 id="functions">Functions</h2>
<p>
In JavaScript, a function is a named section of code that performs a particular task. A function can be thought of as a routing with a name.
</p>
<p>
You must declare a function before you can use it. For instance:
</p>
<pre>
function hello() {
alert("Hello World")
}
</pre>
<p>
The above code creates a function called hello. But putting this JavaScript in our application won't cause a pop up to appear. This is becuase we haven't <em>called</em> our function yet.
</p>
<p>
To call our function, we use the function name followed by a set of parenthesis. To call our hello function, we'd need to use <code>hello()</code>
</p>
<p>
We'll have a go at creating some functions now. All of the code we write below needs to live in the <code><script></code> tag.
</p>
<tasks>
<item title="Create a function called hideHeadings"> Hint: You'll need code like <code>function hideHeadings() { }</code></item>
<item title="Hide all h1 elements in this function"> Remember, we can select all h1 elements with <code>$("h1")</code> and we can hide everything selected with <code>.hide()</code></item>
<item title="On a new line inside the function, create an alert">Alerts can be created with alert("My message here")</item>
<item title="Refresh the page in Chrome">Nothing has happened - we haven't called our function yet</item>
<item title="Call our function after we have declared it">You can call your function </item>
<item title="Refresh chrome"> This time all the headings should dissapear and we should get an alert popping up</item>
</tasks>
<h2 id="eventhandling">Event Handling</h2>
<p>
Okay - functions are fine, you get them, but they aren't that useful unless we can call them at particular times. That's where events come in.
</p>
<p>
When you navigate a website your web browser is constantly firing events. Events are simple messages such as "the mouse has clicked this button", "the enter key has been pressed" or "the mouse is hovering over this image".
</p>
<p>
But nothing is ordinarily listenening to these events, so they get ignored. Enter jQuery. jQuery makes is extremely easy to set up event listeners - things that listen for particular events happening on particular elements. And that's right, they use functions to do so!
</p>
<pre>
$("selector").click(function_name);
</pre>
<p>
Above, we are listening to click events on all elements that match the selector. When a click event happens we call the function_name() function.
</p>
<pre>
function handleClick() {
alert("I have been clicked");
}
$("h1").click(handle_click);
</pre>
<p>
In the above example, we are listing for click events on all h1 elements. When a click event happens we will call the handle_click() method that displays an alert on screen.
</p>
<p>
We can equally as easily listen for hover events, for example:
</p>
<pre>
function myHoverEvent() {
$("p").text('I have been hovered in!')
}
$("p").hover(myHoverEvent);
</pre>
<p>
The above example listens for the mouse to be hovering over all paragraph elements. When this occurs we call our myHoverEvent function that changes the text inside our paragraph elements to read "I have been hovered in!".
</p>
<tasks>
<item title="Create a function called displayPrice"> Hint: you'll need code similar to <code>function displayPrice() { ... }</code></item>
<item title="Create an alert within this function"> It doesn't matter what is displayed - we'll change this shortly</item>
<item title="Attach a click handler to anything that has the class item"> Remember: You can select anything with a class with $(".class_name"). The function that should be called is your displayPrice function</item>
<item title="Refresh chrome"> Verify that clicking on the add to basket links displays your pop up</item>
<item title="Make it display the price in the popup"> You can get the text of the clicked element with <code>$(this).text()</code>. Your alert should now read: <code>alert($(this).text())</code> </item>
<item title="Refresh chrome"> Verify that clicking on the items displays the price of the item.</item>
</tasks>
</div> <!-- rightPane -->
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>